@codrstudio/openclaude-chat 0.1.0 → 0.2.0

package/src/index.ts

@@ -1,76 +1,76 @@
-// @codrstudio/openclaude-chat — barrel
-
-// Tipos publicos
-export type {
-  Message,
-  MessagePart,
-  MessageRole,
-  TextPart,
-  ReasoningPart,
-  ToolInvocationPart,
-  ToolInvocationState,
-} from "./types.js";
-
-// Componente principal
-export { Chat } from "./components/Chat.js";
-export type { ChatProps } from "./components/Chat.js";
-
-// Hook + Provider
-export { useOpenClaudeChat } from "./hooks/useOpenClaudeChat.js";
-export type {
-  UseOpenClaudeChatOptions,
-  UseOpenClaudeChatReturn,
-} from "./hooks/useOpenClaudeChat.js";
-
-export { ChatProvider, useChatContext } from "./hooks/ChatProvider.js";
-export type { ChatProviderProps } from "./hooks/ChatProvider.js";
-
-// Subcomponentes
-export { Markdown } from "./components/Markdown.js";
-export { StreamingIndicator } from "./components/StreamingIndicator.js";
-export { ErrorNote } from "./components/ErrorNote.js";
-export type { ErrorNoteProps } from "./components/ErrorNote.js";
-export { MessageBubble } from "./components/MessageBubble.js";
-export type { MessageBubbleProps } from "./components/MessageBubble.js";
-export { MessageList } from "./components/MessageList.js";
-export type { MessageListProps } from "./components/MessageList.js";
-export { MessageInput } from "./components/MessageInput.js";
-export type { MessageInputProps, Attachment } from "./components/MessageInput.js";
-
-// Parts
-export { PartRenderer } from "./parts/PartRenderer.js";
-export type { PartRendererProps } from "./parts/PartRenderer.js";
-export { ReasoningBlock } from "./parts/ReasoningBlock.js";
-export type { ReasoningBlockProps } from "./parts/ReasoningBlock.js";
-export { ToolActivity, defaultToolIconMap } from "./parts/ToolActivity.js";
-export type { ToolActivityProps, ToolActivityState } from "./parts/ToolActivity.js";
-export { ToolResult } from "./parts/ToolResult.js";
-export type { ToolResultProps } from "./parts/ToolResult.js";
-
-// Display renderers
-export { AlertRenderer } from "./display/AlertRenderer.js";
-export { MetricCardRenderer } from "./display/MetricCardRenderer.js";
-export { PriceHighlightRenderer } from "./display/PriceHighlightRenderer.js";
-export { FileCardRenderer } from "./display/FileCardRenderer.js";
-export { CodeBlockRenderer } from "./display/CodeBlockRenderer.js";
-export { SourcesListRenderer } from "./display/SourcesListRenderer.js";
-export { StepTimelineRenderer } from "./display/StepTimelineRenderer.js";
-export { ProgressStepsRenderer } from "./display/ProgressStepsRenderer.js";
-export { ChartRenderer } from "./display/ChartRenderer.js";
-export { CarouselRenderer } from "./display/CarouselRenderer.js";
-export { ProductCardRenderer } from "./display/ProductCardRenderer.js";
-export { ComparisonTableRenderer } from "./display/ComparisonTableRenderer.js";
-export { DataTableRenderer } from "./display/DataTableRenderer.js";
-export { SpreadsheetRenderer } from "./display/SpreadsheetRenderer.js";
-export { GalleryRenderer } from "./display/GalleryRenderer.js";
-export { ImageViewerRenderer } from "./display/ImageViewerRenderer.js";
-export { LinkPreviewRenderer } from "./display/LinkPreviewRenderer.js";
-export { MapViewRenderer } from "./display/MapViewRenderer.js";
-export { ChoiceButtonsRenderer } from "./display/ChoiceButtonsRenderer.js";
-
-// Registry
-export { defaultDisplayRenderers, resolveDisplayRenderer } from "./display/registry.js";
-export type { DisplayRendererMap, DisplayActionName } from "./display/registry.js";
-
-// useIsMobile helper reuse
-export { useIsMobile } from "./hooks/useIsMobile.js";
+// @codrstudio/openclaude-chat — barrel
+
+// Tipos publicos
+export type {
+  Message,
+  MessagePart,
+  MessageRole,
+  TextPart,
+  ReasoningPart,
+  ToolInvocationPart,
+  ToolInvocationState,
+} from "./types.js";
+
+// Componente principal
+export { Chat } from "./components/Chat.js";
+export type { ChatProps } from "./components/Chat.js";
+
+// Hook + Provider
+export { useOpenClaudeChat } from "./hooks/useOpenClaudeChat.js";
+export type {
+  UseOpenClaudeChatOptions,
+  UseOpenClaudeChatReturn,
+} from "./hooks/useOpenClaudeChat.js";
+
+export { ChatProvider, useChatContext } from "./hooks/ChatProvider.js";
+export type { ChatProviderProps } from "./hooks/ChatProvider.js";
+
+// Subcomponentes
+export { Markdown } from "./components/Markdown.js";
+export { StreamingIndicator } from "./components/StreamingIndicator.js";
+export { ErrorNote } from "./components/ErrorNote.js";
+export type { ErrorNoteProps } from "./components/ErrorNote.js";
+export { MessageBubble } from "./components/MessageBubble.js";
+export type { MessageBubbleProps } from "./components/MessageBubble.js";
+export { MessageList } from "./components/MessageList.js";
+export type { MessageListProps } from "./components/MessageList.js";
+export { MessageInput } from "./components/MessageInput.js";
+export type { MessageInputProps, Attachment } from "./components/MessageInput.js";
+
+// Parts
+export { PartRenderer } from "./parts/PartRenderer.js";
+export type { PartRendererProps } from "./parts/PartRenderer.js";
+export { ReasoningBlock } from "./parts/ReasoningBlock.js";
+export type { ReasoningBlockProps } from "./parts/ReasoningBlock.js";
+export { ToolActivity, defaultToolIconMap } from "./parts/ToolActivity.js";
+export type { ToolActivityProps, ToolActivityState } from "./parts/ToolActivity.js";
+export { ToolResult } from "./parts/ToolResult.js";
+export type { ToolResultProps } from "./parts/ToolResult.js";
+
+// Display renderers
+export { AlertRenderer } from "./display/AlertRenderer.js";
+export { MetricCardRenderer } from "./display/MetricCardRenderer.js";
+export { PriceHighlightRenderer } from "./display/PriceHighlightRenderer.js";
+export { FileCardRenderer } from "./display/FileCardRenderer.js";
+export { CodeBlockRenderer } from "./display/CodeBlockRenderer.js";
+export { SourcesListRenderer } from "./display/SourcesListRenderer.js";
+export { StepTimelineRenderer } from "./display/StepTimelineRenderer.js";
+export { ProgressStepsRenderer } from "./display/ProgressStepsRenderer.js";
+export { ChartRenderer } from "./display/ChartRenderer.js";
+export { CarouselRenderer } from "./display/CarouselRenderer.js";
+export { ProductCardRenderer } from "./display/ProductCardRenderer.js";
+export { ComparisonTableRenderer } from "./display/ComparisonTableRenderer.js";
+export { DataTableRenderer } from "./display/DataTableRenderer.js";
+export { SpreadsheetRenderer } from "./display/SpreadsheetRenderer.js";
+export { GalleryRenderer } from "./display/GalleryRenderer.js";
+export { ImageViewerRenderer } from "./display/ImageViewerRenderer.js";
+export { LinkPreviewRenderer } from "./display/LinkPreviewRenderer.js";
+export { MapViewRenderer } from "./display/MapViewRenderer.js";
+export { ChoiceButtonsRenderer } from "./display/ChoiceButtonsRenderer.js";
+
+// Registry
+export { defaultDisplayRenderers, resolveDisplayRenderer } from "./display/registry.js";
+export type { DisplayRendererMap, DisplayActionName } from "./display/registry.js";
+
+// useIsMobile helper reuse
+export { useIsMobile } from "./hooks/useIsMobile.js";

package/src/lib/utils.ts

@@ -1,6 +1,6 @@
-import { clsx, type ClassValue } from "clsx";
-import { twMerge } from "tailwind-merge";
-
-export function cn(...inputs: ClassValue[]) {
-  return twMerge(clsx(inputs));
-}
+import { clsx, type ClassValue } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}

package/src/parts/PartErrorBoundary.tsx

@@ -1,51 +1,51 @@
-import React from "react";
-import { AlertTriangle } from "lucide-react";
-
-interface State {
-  hasError: boolean;
-  message?: string;
-}
-
-interface Props {
-  children: React.ReactNode;
-  label?: string;
-}
-
-/**
- * Isola o crash de um renderer (ex: display widget com input invalido) pra
- * evitar que um unico bloco derrube a arvore React inteira. O chat continua
- * renderizando os outros parts, e no lugar do part quebrado mostra um aviso.
- */
-export class PartErrorBoundary extends React.Component<Props, State> {
-  state: State = { hasError: false };
-
-  static getDerivedStateFromError(error: unknown): State {
-    return {
-      hasError: true,
-      message: error instanceof Error ? error.message : String(error),
-    };
-  }
-
-  componentDidCatch(error: unknown, info: unknown) {
-    // eslint-disable-next-line no-console
-    console.warn("[openclaude-chat] part renderer failed:", error, info);
-  }
-
-  render() {
-    if (this.state.hasError) {
-      return (
-        <div
-          role="alert"
-          className="flex items-start gap-2 rounded-md border border-destructive/30 bg-destructive/5 px-3 py-2 text-xs text-destructive"
-        >
-          <AlertTriangle className="size-3.5 shrink-0 mt-0.5" />
-          <span className="flex-1 min-w-0 break-words font-mono">
-            {this.props.label ? `[${this.props.label}] ` : ""}
-            {this.state.message ?? "Falha ao renderizar bloco"}
-          </span>
-        </div>
-      );
-    }
-    return this.props.children;
-  }
-}
+import React from "react";
+import { AlertTriangle } from "lucide-react";
+
+interface State {
+  hasError: boolean;
+  message?: string;
+}
+
+interface Props {
+  children: React.ReactNode;
+  label?: string;
+}
+
+/**
+ * Isola o crash de um renderer (ex: display widget com input invalido) pra
+ * evitar que um unico bloco derrube a arvore React inteira. O chat continua
+ * renderizando os outros parts, e no lugar do part quebrado mostra um aviso.
+ */
+export class PartErrorBoundary extends React.Component<Props, State> {
+  state: State = { hasError: false };
+
+  static getDerivedStateFromError(error: unknown): State {
+    return {
+      hasError: true,
+      message: error instanceof Error ? error.message : String(error),
+    };
+  }
+
+  componentDidCatch(error: unknown, info: unknown) {
+    // eslint-disable-next-line no-console
+    console.warn("[openclaude-chat] part renderer failed:", error, info);
+  }
+
+  render() {
+    if (this.state.hasError) {
+      return (
+        <div
+          role="alert"
+          className="flex items-start gap-2 rounded-md border border-destructive/30 bg-destructive/5 px-3 py-2 text-xs text-destructive"
+        >
+          <AlertTriangle className="size-3.5 shrink-0 mt-0.5" />
+          <span className="flex-1 min-w-0 break-words font-mono">
+            {this.props.label ? `[${this.props.label}] ` : ""}
+            {this.state.message ?? "Falha ao renderizar bloco"}
+          </span>
+        </div>
+      );
+    }
+    return this.props.children;
+  }
+}

package/src/parts/PartRenderer.tsx

@@ -1,145 +1,145 @@
-import { memo, useState } from "react";
-import { Paperclip, ChevronDown } from "lucide-react";
-import { Markdown } from "../components/Markdown.js";
-import { LazyRender } from "../components/LazyRender.js";
-import { ReasoningBlock } from "./ReasoningBlock.js";
-import { ToolActivity } from "./ToolActivity.js";
-import { ToolResult } from "./ToolResult.js";
-import { resolveDisplayRenderer } from "../display/registry.js";
-import type { DisplayRendererMap } from "../display/registry.js";
-import { Collapsible, CollapsibleTrigger, CollapsibleContent } from "../ui/collapsible.js";
-import { cn } from "../lib/utils.js";
-import type { MessagePart, TextPart, ReasoningPart, ToolInvocationPart } from "../types.js";
-
-const HEAVY_RENDERERS = new Set([
-  "chart", "map", "table",
-  "spreadsheet", "gallery", "image",
-]);
-
-export interface PartRendererProps {
-  part: MessagePart;
-  isStreaming?: boolean;
-  displayRenderers?: DisplayRendererMap;
-}
-
-// ─── Attachment sub-components ────────────────────────────────────────────────
-
-function AttachmentTextBlock({ filename, content }: { filename: string; content: string }) {
-  const [open, setOpen] = useState(false);
-  const lines = content.split("\n");
-  const preview = lines.slice(0, 3).join("\n") + (lines.length > 3 && !open ? "\n…" : "");
-
-  return (
-    <Collapsible open={open} onOpenChange={setOpen} className="rounded-lg border text-xs overflow-hidden">
-      <div className="flex items-center gap-2 px-3 py-2 bg-muted/50 border-b">
-        <Paperclip className="h-3.5 w-3.5 shrink-0 text-muted-foreground" />
-        <span className="flex-1 truncate font-medium">{filename}</span>
-        <CollapsibleTrigger asChild>
-          <button type="button" className="text-muted-foreground hover:text-foreground transition-colors" aria-label={open ? "Recolher" : "Expandir"}>
-            <ChevronDown className={cn("h-3.5 w-3.5 transition-transform", open && "rotate-180")} />
-          </button>
-        </CollapsibleTrigger>
-      </div>
-      <pre className="px-3 py-2 text-muted-foreground whitespace-pre-wrap break-words">{preview}</pre>
-      <CollapsibleContent>
-        <pre className="px-3 py-2 max-h-40 overflow-auto whitespace-pre-wrap break-words border-t">{content}</pre>
-      </CollapsibleContent>
-    </Collapsible>
-  );
-}
-
-// ─── Main renderer ────────────────────────────────────────────────────────────
-
-export const PartRenderer = memo(function PartRenderer({ part, isStreaming, displayRenderers }: PartRendererProps) {
-  switch (part.type) {
-    case "text": {
-      const p = part as TextPart;
-      if (p.text.startsWith("[📎")) {
-        const firstNewline = p.text.indexOf("\n");
-        const header = firstNewline >= 0 ? p.text.slice(0, firstNewline) : p.text;
-        const body = firstNewline >= 0 ? p.text.slice(firstNewline + 1) : "";
-        const match = header.match(/^\[📎\s+(.+?)\]?$/);
-        const filename = match?.[1] ?? header;
-        return <AttachmentTextBlock filename={filename} content={body} />;
-      }
-      return <Markdown>{p.text}</Markdown>;
-    }
-
-    case "reasoning": {
-      const p = part as ReasoningPart;
-      return <ReasoningBlock content={p.reasoning} isStreaming={isStreaming} />;
-    }
-
-    case "tool-invocation": {
-      const { toolInvocation } = part as ToolInvocationPart;
-      // O openclaude-sdk entrega os display tools como meta-tools MCP com
-      // prefixo `mcp__display__display_*` (ex: mcp__display__display_highlight).
-      // O tipo especifico do widget vem no campo `action` do input/args
-      // (ex: {action: "metric", label: "...", value: "..."}).
-      //
-      // Alem disso aceitamos a forma "legada" direta `display_*` (compat).
-      const name = toolInvocation.toolName;
-      const isMcpDisplay = /^mcp__display__display_(highlight|collection|card|visual)$/.test(name);
-      const isLegacyDisplay = name.startsWith("display_");
-      const isDisplay = isMcpDisplay || isLegacyDisplay;
-
-      if (isDisplay) {
-        // IMPORTANTE: para display tools, o `args` (input) contem a definicao
-        // COMPLETA do widget. O `result` (tool_result) e apenas uma confirmacao
-        // minima (`{action: "metric"}`). Sempre preferimos args aqui.
-        const payload = toolInvocation.args as Record<string, unknown> | undefined;
-        // Para meta-tools MCP, a action vem no payload.
-        // Para display_* legado, a action e o sufixo do toolName.
-        const action = isMcpDisplay
-          ? (payload?.action as string | undefined)
-          : name.replace(/^display_/, "");
-        const Renderer = action ? resolveDisplayRenderer(action, displayRenderers) : null;
-        if (payload && Renderer && action) {
-          // Alguns campos complexos (ex: trend, data) podem chegar serializados
-          // como JSON string se o modelo nao souber passar objetos. Tentamos
-          // parsear string → objeto antes de spreadar no renderer.
-          const normalized: Record<string, unknown> = {};
-          for (const [k, v] of Object.entries(payload)) {
-            if (typeof v === "string" && (v.startsWith("{") || v.startsWith("["))) {
-              try {
-                normalized[k] = JSON.parse(v);
-              } catch {
-                normalized[k] = v;
-              }
-            } else {
-              normalized[k] = v;
-            }
-          }
-          // key by toolCallId so iframe-based renderers (DisplayReactRenderer)
-          // unmount/remount cleanly when a new tool_use block arrives.
-          const rendered = <Renderer key={toolInvocation.toolCallId} {...normalized} />;
-          // NOTE: LazyRender via IntersectionObserver nao funciona bem dentro
-          // do virtualized MessageList (itens ficam position:absolute e o
-          // observer nao dispara consistente). Renderizamos direto.
-          return rendered;
-        }
-      }
-
-      if (toolInvocation.state === "result") {
-        return (
-          <ToolResult
-            toolName={toolInvocation.toolName}
-            result={toolInvocation.result}
-            isError={toolInvocation.isError}
-          />
-        );
-      }
-
-      return (
-        <ToolActivity
-          toolName={toolInvocation.toolName}
-          state={toolInvocation.state}
-          args={toolInvocation.args}
-        />
-      );
-    }
-
-    default:
-      return null;
-  }
-});
+import { memo, useState } from "react";
+import { Paperclip, ChevronDown } from "lucide-react";
+import { Markdown } from "../components/Markdown.js";
+import { LazyRender } from "../components/LazyRender.js";
+import { ReasoningBlock } from "./ReasoningBlock.js";
+import { ToolActivity } from "./ToolActivity.js";
+import { ToolResult } from "./ToolResult.js";
+import { resolveDisplayRenderer } from "../display/registry.js";
+import type { DisplayRendererMap } from "../display/registry.js";
+import { Collapsible, CollapsibleTrigger, CollapsibleContent } from "../ui/collapsible.js";
+import { cn } from "../lib/utils.js";
+import type { MessagePart, TextPart, ReasoningPart, ToolInvocationPart } from "../types.js";
+
+const HEAVY_RENDERERS = new Set([
+  "chart", "map", "table",
+  "spreadsheet", "gallery", "image",
+]);
+
+export interface PartRendererProps {
+  part: MessagePart;
+  isStreaming?: boolean;
+  displayRenderers?: DisplayRendererMap;
+}
+
+// ─── Attachment sub-components ────────────────────────────────────────────────
+
+function AttachmentTextBlock({ filename, content }: { filename: string; content: string }) {
+  const [open, setOpen] = useState(false);
+  const lines = content.split("\n");
+  const preview = lines.slice(0, 3).join("\n") + (lines.length > 3 && !open ? "\n…" : "");
+
+  return (
+    <Collapsible open={open} onOpenChange={setOpen} className="rounded-lg border text-xs overflow-hidden">
+      <div className="flex items-center gap-2 px-3 py-2 bg-muted/50 border-b">
+        <Paperclip className="h-3.5 w-3.5 shrink-0 text-muted-foreground" />
+        <span className="flex-1 truncate font-medium">{filename}</span>
+        <CollapsibleTrigger asChild>
+          <button type="button" className="text-muted-foreground hover:text-foreground transition-colors" aria-label={open ? "Recolher" : "Expandir"}>
+            <ChevronDown className={cn("h-3.5 w-3.5 transition-transform", open && "rotate-180")} />
+          </button>
+        </CollapsibleTrigger>
+      </div>
+      <pre className="px-3 py-2 text-muted-foreground whitespace-pre-wrap break-words">{preview}</pre>
+      <CollapsibleContent>
+        <pre className="px-3 py-2 max-h-40 overflow-auto whitespace-pre-wrap break-words border-t">{content}</pre>
+      </CollapsibleContent>
+    </Collapsible>
+  );
+}
+
+// ─── Main renderer ────────────────────────────────────────────────────────────
+
+export const PartRenderer = memo(function PartRenderer({ part, isStreaming, displayRenderers }: PartRendererProps) {
+  switch (part.type) {
+    case "text": {
+      const p = part as TextPart;
+      if (p.text.startsWith("[📎")) {
+        const firstNewline = p.text.indexOf("\n");
+        const header = firstNewline >= 0 ? p.text.slice(0, firstNewline) : p.text;
+        const body = firstNewline >= 0 ? p.text.slice(firstNewline + 1) : "";
+        const match = header.match(/^\[📎\s+(.+?)\]?$/);
+        const filename = match?.[1] ?? header;
+        return <AttachmentTextBlock filename={filename} content={body} />;
+      }
+      return <Markdown>{p.text}</Markdown>;
+    }
+
+    case "reasoning": {
+      const p = part as ReasoningPart;
+      return <ReasoningBlock content={p.reasoning} isStreaming={isStreaming} />;
+    }
+
+    case "tool-invocation": {
+      const { toolInvocation } = part as ToolInvocationPart;
+      // O openclaude-sdk entrega os display tools como meta-tools MCP com
+      // prefixo `mcp__display__display_*` (ex: mcp__display__display_highlight).
+      // O tipo especifico do widget vem no campo `action` do input/args
+      // (ex: {action: "metric", label: "...", value: "..."}).
+      //
+      // Alem disso aceitamos a forma "legada" direta `display_*` (compat).
+      const name = toolInvocation.toolName;
+      const isMcpDisplay = /^mcp__display__display_(highlight|collection|card|visual)$/.test(name);
+      const isLegacyDisplay = name.startsWith("display_");
+      const isDisplay = isMcpDisplay || isLegacyDisplay;
+
+      if (isDisplay) {
+        // IMPORTANTE: para display tools, o `args` (input) contem a definicao
+        // COMPLETA do widget. O `result` (tool_result) e apenas uma confirmacao
+        // minima (`{action: "metric"}`). Sempre preferimos args aqui.
+        const payload = toolInvocation.args as Record<string, unknown> | undefined;
+        // Para meta-tools MCP, a action vem no payload.
+        // Para display_* legado, a action e o sufixo do toolName.
+        const action = isMcpDisplay
+          ? (payload?.action as string | undefined)
+          : name.replace(/^display_/, "");
+        const Renderer = action ? resolveDisplayRenderer(action, displayRenderers) : null;
+        if (payload && Renderer && action) {
+          // Alguns campos complexos (ex: trend, data) podem chegar serializados
+          // como JSON string se o modelo nao souber passar objetos. Tentamos
+          // parsear string → objeto antes de spreadar no renderer.
+          const normalized: Record<string, unknown> = {};
+          for (const [k, v] of Object.entries(payload)) {
+            if (typeof v === "string" && (v.startsWith("{") || v.startsWith("["))) {
+              try {
+                normalized[k] = JSON.parse(v);
+              } catch {
+                normalized[k] = v;
+              }
+            } else {
+              normalized[k] = v;
+            }
+          }
+          // key by toolCallId so iframe-based renderers (DisplayReactRenderer)
+          // unmount/remount cleanly when a new tool_use block arrives.
+          const rendered = <Renderer key={toolInvocation.toolCallId} {...normalized} />;
+          // NOTE: LazyRender via IntersectionObserver nao funciona bem dentro
+          // do virtualized MessageList (itens ficam position:absolute e o
+          // observer nao dispara consistente). Renderizamos direto.
+          return rendered;
+        }
+      }
+
+      if (toolInvocation.state === "result") {
+        return (
+          <ToolResult
+            toolName={toolInvocation.toolName}
+            result={toolInvocation.result}
+            isError={toolInvocation.isError}
+          />
+        );
+      }
+
+      return (
+        <ToolActivity
+          toolName={toolInvocation.toolName}
+          state={toolInvocation.state}
+          args={toolInvocation.args}
+        />
+      );
+    }
+
+    default:
+      return null;
+  }
+});

package/src/parts/ReasoningBlock.tsx

@@ -1,41 +1,41 @@
-import { useEffect, useState } from "react";
-import { Brain, ChevronDown, ChevronRight } from "lucide-react";
-import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "../ui/collapsible.js";
-
-export interface ReasoningBlockProps {
-  content: string;
-  isStreaming?: boolean;
-  className?: string;
-}
-
-export function ReasoningBlock({ content, isStreaming = false, className }: ReasoningBlockProps) {
-  const [expanded, setExpanded] = useState(isStreaming);
-
-  useEffect(() => {
-    if (isStreaming) {
-      setExpanded(true);
-    } else {
-      setExpanded(false);
-    }
-  }, [isStreaming]);
-
-  return (
-    <Collapsible open={expanded} onOpenChange={setExpanded} className={className}>
-      <div className="border border-border bg-muted/30 rounded-md text-sm overflow-hidden">
-        <CollapsibleTrigger className="flex items-center gap-2 px-3 py-2 w-full text-left font-medium text-muted-foreground hover:bg-muted/60 cursor-pointer">
-          <Brain className="h-3.5 w-3.5" aria-hidden="true" />
-          <span className="font-mono text-xs">reasoning</span>
-          {expanded
-            ? <ChevronDown className="h-3.5 w-3.5 ml-auto" aria-hidden="true" />
-            : <ChevronRight className="h-3.5 w-3.5 ml-auto" aria-hidden="true" />
-          }
-        </CollapsibleTrigger>
-        <CollapsibleContent>
-          <div className="max-h-96 overflow-y-auto px-3 py-3 text-muted-foreground whitespace-pre-wrap break-words border-t border-border text-xs">
-            {content}
-          </div>
-        </CollapsibleContent>
-      </div>
-    </Collapsible>
-  );
-}
+import { useEffect, useState } from "react";
+import { Brain, ChevronDown, ChevronRight } from "lucide-react";
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "../ui/collapsible.js";
+
+export interface ReasoningBlockProps {
+  content: string;
+  isStreaming?: boolean;
+  className?: string;
+}
+
+export function ReasoningBlock({ content, isStreaming = false, className }: ReasoningBlockProps) {
+  const [expanded, setExpanded] = useState(isStreaming);
+
+  useEffect(() => {
+    if (isStreaming) {
+      setExpanded(true);
+    } else {
+      setExpanded(false);
+    }
+  }, [isStreaming]);
+
+  return (
+    <Collapsible open={expanded} onOpenChange={setExpanded} className={className}>
+      <div className="border border-border bg-muted/30 rounded-md text-sm overflow-hidden">
+        <CollapsibleTrigger className="flex items-center gap-2 px-3 py-2 w-full text-left font-medium text-muted-foreground hover:bg-muted/60 cursor-pointer">
+          <Brain className="h-3.5 w-3.5" aria-hidden="true" />
+          <span className="font-mono text-xs">reasoning</span>
+          {expanded
+            ? <ChevronDown className="h-3.5 w-3.5 ml-auto" aria-hidden="true" />
+            : <ChevronRight className="h-3.5 w-3.5 ml-auto" aria-hidden="true" />
+          }
+        </CollapsibleTrigger>
+        <CollapsibleContent>
+          <div className="max-h-96 overflow-y-auto px-3 py-3 text-muted-foreground whitespace-pre-wrap break-words border-t border-border text-xs">
+            {content}
+          </div>
+        </CollapsibleContent>
+      </div>
+    </Collapsible>
+  );
+}