Reasoning

1"use client";
2 
3import { Brain } from "lucide-react";
4 
5import { useMemo, useState } from "react";
6 
7import {
8	Collapsible,
9	CollapsibleContent,
10	CollapsibleTrigger,
11} from "@/components/ui/collapsible";
12 
13import { MarkdownContent } from "@/registry/ui/markdown-content";
14 
15/**
16 * Parses reasoning content to extract title and content.
17 * Supports formats like:
18 * - "**Title**\n\nContent"
19 * - "# Title\n\nContent"
20 * - "Title\n\nContent" (fallback for plain text with blank line)
21 * - Plain text (returns as content with no title)
22 */
23function parseReasoningContent(text: string): {
24	title?: string;
25	content: string;
26} {
27	if (!text || text.trim() === "") {
28		return { title: undefined, content: "" };
29	}
30 
31	const trimmed = text.trim();
32 
33	// Define matchers for explicit title formats
34	const matchers = [
35		{
36			// Check for markdown bold title format (**Title**)
37			pattern: /^\*\*(.+?)\*\*(?:\n\n|\n|$)/,
38		},
39		{
40			// Check for markdown heading format
41			pattern: /^#+\s+(.+?)(?:\n\n|\n|$)/,
42		},
43	];
44 
45	// Try each matcher in order
46	for (const matcher of matchers) {
47		const match = trimmed.match(matcher.pattern);
48		if (match) {
49			const title = match[1].trim();
50			const content = trimmed.slice(match[0].length).trim();
51			return { title, content: content || trimmed };
52		}
53	}
54 
55	// Fallback: Check for title/content split (first line as title if followed by blank line)
56	const lines = trimmed.split("\n");
57	if (lines.length > 1 && lines[1].trim() === "") {
58		const title = lines[0].trim();
59		const content = lines.slice(2).join("\n").trim();
60		return { title, content: content || trimmed };
61	}
62 
63	// No title found, return content only
64	return { content: trimmed };
65}
66 
67interface ReasoningProps {
68	content: string;
69	isLastPart: boolean;
70}
71 
72export function Reasoning({ content, isLastPart }: ReasoningProps) {
73	const [isOpen, setIsOpen] = useState(false);
74 
75	const parsedContent = useMemo(
76		() => parseReasoningContent(content),
77		[content],
78	);
79	const title = parsedContent.title;
80	const finalContent = parsedContent.content;
81 
82	if (isLastPart) {
83		return (
84			<div className="flex flex-col items-start gap-4 my-2 ml-2 text-muted-foreground">
85				<div className="flex items-center gap-2 text-sm">
86					<Brain className="size-4" />
87					{title ?? "Thinking..."}
88				</div>
89 
90				{finalContent.trim() !== "" && (
91					<div className="text-sm">
92						<MarkdownContent content={finalContent} />
93					</div>
94				)}
95			</div>
96		);
97	}
98 
99	if (finalContent.trim() === "") {
100		return (
101// … truncated