Chatbot

Reasoning

Collapsible component for displaying AI reasoning process with auto-expand/collapse during streaming.

The user is asking about React performance optimization. I should consider memoization with useMemo and useCallback, avoiding unnecessary re-renders from inline function props, using React.memo for pure components, and checking for missing dependency arrays in useEffect hooks. I'll also mention React DevTools Profiler for identifying bottlenecks.

Props

PropTypeDefaultDescription
isStreamingbooleanfalseStreaming state indicator
openboolean-Controlled open state
defaultOpenboolean-Initial open state
onOpenChange(open: boolean) => void-State change callback
durationnumber-Reasoning duration in seconds

Import

import { Reasoning, ReasoningTrigger, ReasoningContent } from '@blastx/ui-ai';