const getThinkingMessage = (isStreaming: boolean, duration?: number) => {
if (isStreaming) {
return Thinking...
}
// When duration is unknown or 0 (e.g., non-streaming responses), show a generic message
if (duration === undefined || duration === 0) {
return Thought for a few seconds
}
return Thought for {duration} seconds
}
export const ReasoningTrigger = memo(
({ className, children, ...props }: ReasoningTriggerProps) => {
const { isStreaming, isOpen, duration } = useReasoning()
return (
{children ?? (
<>
{getThinkingMessage(isStreaming, duration)}
>
)}
)
}
)
export type ReasoningContentProps = ComponentProps<
typeof CollapsibleContent
> & {
children: string
}
export const ReasoningContent = memo(
({ className, children, ...props }: ReasoningContentProps) => (
{children}
)
)
Reasoning.displayName = 'Reasoning'
ReasoningTrigger.displayName = 'ReasoningTrigger'
ReasoningContent.displayName = 'ReasoningContent'