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

Prop	Type	Default	Description
isStreaming	boolean	false	Streaming state indicator
open	boolean	-	Controlled open state
defaultOpen	boolean	-	Initial open state
onOpenChange	(open: boolean) => void	-	State change callback
duration	number	-	Reasoning duration in seconds

Import

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