setUserOpen(!open)}\n type=\"button\"\n >\n \n {working ? (\n {summary}\n ) : (\n {summary}\n )}\n \n {open && (\n \n {tools.map((tool, toolIndex) => (\n \n ))}\n
\n )}\n \n );\n};\n\n/** Explicit markdown styling — no typography plugin required. */\nconst MARKDOWN_CLASS = cn(\n \"text-sm leading-relaxed\",\n \"[&_p]:my-2 first:[&_p]:mt-0 last:[&_p]:mb-0\",\n \"[&_h1]:mt-4 [&_h1]:mb-2 [&_h1]:font-semibold [&_h1]:text-base\",\n \"[&_h2]:mt-4 [&_h2]:mb-2 [&_h2]:font-semibold [&_h2]:text-sm\",\n \"[&_h3]:mt-3 [&_h3]:mb-1.5 [&_h3]:font-medium [&_h3]:text-sm\",\n \"[&_ul]:my-2 [&_ul]:list-disc [&_ul]:pl-5 [&_ol]:my-2 [&_ol]:list-decimal [&_ol]:pl-5 [&_li]:my-0.5\",\n \"[&_code]:bg-muted/60 [&_code]:px-1 [&_code]:py-px [&_code]:font-mono [&_code]:text-[0.85em]\",\n \"[&_pre]:my-2 [&_pre]:overflow-x-auto [&_pre]:border [&_pre]:border-border/60 [&_pre]:bg-muted/30 [&_pre]:p-3 [&_pre_code]:bg-transparent [&_pre_code]:p-0\",\n \"[&_a]:text-primary [&_a]:underline [&_a]:underline-offset-2\",\n \"[&_blockquote]:my-2 [&_blockquote]:border-border/60 [&_blockquote]:border-l-2 [&_blockquote]:pl-3 [&_blockquote]:text-muted-foreground\",\n \"[&_strong]:font-semibold\"\n);\n\nexport type ChatMessageProps = Omit, \"children\"> & {\n message: UIMessage;\n /**\n * The turn is still streaming: tool groups hold open for the whole run\n * instead of folding in the gaps between calls.\n */\n isLive?: boolean;\n};\n\n/** One conversation turn: user bubble or agent markdown with tool chips. */\nexport const ChatMessage = ({\n className,\n message,\n isLive = false,\n ...props\n}: ChatMessageProps) => {\n if (message.role === \"user\") {\n const text = message.parts\n .map((part) => (part.type === \"text\" ? part.text : \"\"))\n .join(\"\");\n\n return (\n \n \n {text}\n
\n \n );\n }\n\n return (\n \n {segmentParts(message.parts).map((segment, index) => {\n const key = `${message.id}-${index.toString()}`;\n\n if (segment.kind === \"reasoning\") {\n return (\n \n {segment.text}\n \n );\n }\n\n if (segment.kind === \"tools\") {\n const tools = isLive ? segment.tools : settleTools(segment.tools);\n // One call is a log line, not a folder.\n if (tools.length === 1 && tools[0]) {\n return (\n \n \n
\n );\n }\n return ;\n }\n\n return (\n \n {segment.text}\n
\n );\n })}\n \n );\n};\n\nconst autoGrow = (event: FormEvent) => {\n const textarea = event.currentTarget;\n textarea.style.height = \"auto\";\n textarea.style.height = `${Math.min(textarea.scrollHeight, 160)}px`;\n};\n\nexport interface ChatInputProps {\n onSend: (text: string) => void;\n disabled?: boolean;\n busy?: boolean;\n placeholder?: string;\n /** Slot at the left of the composer's control row, e.g. ThinkingModelSelect. */\n controls?: ReactNode;\n className?: string;\n}\n\n/** Composer: auto-growing textarea, controls slot, and a send action. */\nexport const ChatInput = ({\n busy = false,\n className,\n controls,\n disabled = false,\n onSend,\n placeholder = \"Describe a change…\",\n}: ChatInputProps) => {\n const [text, setText] = useState(\"\");\n const textareaRef = useRef(null);\n\n const submit = useCallback(() => {\n const trimmed = text.trim();\n\n if (!trimmed || busy || disabled) {\n return;\n }\n\n onSend(trimmed);\n setText(\"\");\n\n const textarea = textareaRef.current;\n\n if (textarea) {\n textarea.style.height = \"auto\";\n textarea.focus();\n }\n }, [busy, disabled, onSend, text]);\n\n const handleKeyDown = (event: KeyboardEvent) => {\n if (event.key === \"Enter\" && !event.shiftKey) {\n event.preventDefault();\n submit();\n }\n };\n\n return (\n \n setText(event.target.value)}\n onInput={autoGrow}\n onKeyDown={handleKeyDown}\n placeholder={placeholder}\n ref={textareaRef}\n rows={1}\n value={text}\n />\n \n
{controls}
\n
\n {busy ? (\n \n ) : (\n \n )}\n \n \n The agent hit an error. Your message wasn’t lost.\n
\n {onRetry ? (\n \n Retry\n \n ) : null}\n \n )}\n \n \n \n \n \n\n \n \n \n );\n};\n",
"type": "registry:component"
}
],
"type": "registry:component"
}