@ash-ai/ui 0.0.2 → 0.0.4

package/dist/index.d.cts

@@ -22,6 +22,7 @@ interface ChatMessage$1 {
     role: 'user' | 'assistant' | 'system';
     content: string;
     toolCalls?: ToolCall[];
+    thinking?: string[];
     timestamp?: string;
     isStreaming?: boolean;
 }
@@ -89,6 +90,9 @@ interface ChatMessageProps {
 }
 declare function ChatMessage({ message: msg }: ChatMessageProps): react_jsx_runtime.JSX.Element;
 
+declare function ThinkingBlock({ thinking }: {
+    thinking: string[];
+}): react_jsx_runtime.JSX.Element;
 declare function ToolCallBlock({ tool }: {
     tool: ToolCall;
 }): react_jsx_runtime.JSX.Element;
@@ -309,14 +313,16 @@ declare function buildFileTree(files: Array<{
     modifiedAt: string;
 }>): TreeNode[];
 /**
- * Parse content blocks (from Anthropic SDK format) into text + tool calls.
- * Handles both JSON string content and pre-parsed arrays.
+ * Parse content blocks (from Anthropic SDK format) into text + tool calls + thinking.
+ * Handles both JSON string content and pre-parsed arrays, as well as
+ * wrapped message envelopes from Claude Code conversations.
  */
 declare function parseContentBlocks(content: unknown): {
     text: string;
     toolCalls: ToolCall[];
+    thinking: string[];
 };
 declare function isImageFile(name: string): boolean;
 declare function getFileLanguage(name: string): string;
 
-export { type AttachedFile, BottomPanels, type BottomPanelsProps, Chat, ChatInput, type ChatInputProps, ChatMessage, type ChatMessageProps, type ChatMessage$1 as ChatMessageType, ChatMessages, type ChatMessagesProps, type ChatProps, FileBrowser, type FileBrowserProps, FileTree, type FileTreeProps, type LogEntry, Playground, type PlaygroundContextValue, PlaygroundHeader, type PlaygroundHeaderProps, type PlaygroundProps, PlaygroundProvider, type PlaygroundProviderProps, SessionHistory, type SessionHistoryProps, StatusIndicator, type StatusIndicatorProps, Terminal, type TerminalProps, type ToolCall, ToolCallBlock, type TreeNode, type UseAgentsOptions, type UseAgentsReturn, type UseFileBrowserOptions, type UseFileBrowserReturn, type UseFileUploadOptions, type UseFileUploadReturn, type UseHealthCheckOptions, type UseHealthCheckReturn, type UsePlaygroundChatOptions, type UsePlaygroundChatReturn, type UseSessionsOptions, type UseSessionsReturn, type UseTerminalOptions, type UseTerminalReturn, buildFileTree, cn, formatBytes, formatTime, getFileLanguage, isImageFile, parseContentBlocks, useAgents, useFileBrowser, useFileUpload, useHealthCheck, usePlaygroundChat, usePlaygroundContext, useSessions, useTerminal };
+export { type AttachedFile, BottomPanels, type BottomPanelsProps, Chat, ChatInput, type ChatInputProps, ChatMessage, type ChatMessageProps, type ChatMessage$1 as ChatMessageType, ChatMessages, type ChatMessagesProps, type ChatProps, FileBrowser, type FileBrowserProps, FileTree, type FileTreeProps, type LogEntry, Playground, type PlaygroundContextValue, PlaygroundHeader, type PlaygroundHeaderProps, type PlaygroundProps, PlaygroundProvider, type PlaygroundProviderProps, SessionHistory, type SessionHistoryProps, StatusIndicator, type StatusIndicatorProps, Terminal, type TerminalProps, ThinkingBlock, type ToolCall, ToolCallBlock, type TreeNode, type UseAgentsOptions, type UseAgentsReturn, type UseFileBrowserOptions, type UseFileBrowserReturn, type UseFileUploadOptions, type UseFileUploadReturn, type UseHealthCheckOptions, type UseHealthCheckReturn, type UsePlaygroundChatOptions, type UsePlaygroundChatReturn, type UseSessionsOptions, type UseSessionsReturn, type UseTerminalOptions, type UseTerminalReturn, buildFileTree, cn, formatBytes, formatTime, getFileLanguage, isImageFile, parseContentBlocks, useAgents, useFileBrowser, useFileUpload, useHealthCheck, usePlaygroundChat, usePlaygroundContext, useSessions, useTerminal };

package/dist/index.d.ts

@@ -22,6 +22,7 @@ interface ChatMessage$1 {
     role: 'user' | 'assistant' | 'system';
     content: string;
     toolCalls?: ToolCall[];
+    thinking?: string[];
     timestamp?: string;
     isStreaming?: boolean;
 }
@@ -89,6 +90,9 @@ interface ChatMessageProps {
 }
 declare function ChatMessage({ message: msg }: ChatMessageProps): react_jsx_runtime.JSX.Element;
 
+declare function ThinkingBlock({ thinking }: {
+    thinking: string[];
+}): react_jsx_runtime.JSX.Element;
 declare function ToolCallBlock({ tool }: {
     tool: ToolCall;
 }): react_jsx_runtime.JSX.Element;
@@ -309,14 +313,16 @@ declare function buildFileTree(files: Array<{
     modifiedAt: string;
 }>): TreeNode[];
 /**
- * Parse content blocks (from Anthropic SDK format) into text + tool calls.
- * Handles both JSON string content and pre-parsed arrays.
+ * Parse content blocks (from Anthropic SDK format) into text + tool calls + thinking.
+ * Handles both JSON string content and pre-parsed arrays, as well as
+ * wrapped message envelopes from Claude Code conversations.
  */
 declare function parseContentBlocks(content: unknown): {
     text: string;
     toolCalls: ToolCall[];
+    thinking: string[];
 };
 declare function isImageFile(name: string): boolean;
 declare function getFileLanguage(name: string): string;
 
-export { type AttachedFile, BottomPanels, type BottomPanelsProps, Chat, ChatInput, type ChatInputProps, ChatMessage, type ChatMessageProps, type ChatMessage$1 as ChatMessageType, ChatMessages, type ChatMessagesProps, type ChatProps, FileBrowser, type FileBrowserProps, FileTree, type FileTreeProps, type LogEntry, Playground, type PlaygroundContextValue, PlaygroundHeader, type PlaygroundHeaderProps, type PlaygroundProps, PlaygroundProvider, type PlaygroundProviderProps, SessionHistory, type SessionHistoryProps, StatusIndicator, type StatusIndicatorProps, Terminal, type TerminalProps, type ToolCall, ToolCallBlock, type TreeNode, type UseAgentsOptions, type UseAgentsReturn, type UseFileBrowserOptions, type UseFileBrowserReturn, type UseFileUploadOptions, type UseFileUploadReturn, type UseHealthCheckOptions, type UseHealthCheckReturn, type UsePlaygroundChatOptions, type UsePlaygroundChatReturn, type UseSessionsOptions, type UseSessionsReturn, type UseTerminalOptions, type UseTerminalReturn, buildFileTree, cn, formatBytes, formatTime, getFileLanguage, isImageFile, parseContentBlocks, useAgents, useFileBrowser, useFileUpload, useHealthCheck, usePlaygroundChat, usePlaygroundContext, useSessions, useTerminal };
+export { type AttachedFile, BottomPanels, type BottomPanelsProps, Chat, ChatInput, type ChatInputProps, ChatMessage, type ChatMessageProps, type ChatMessage$1 as ChatMessageType, ChatMessages, type ChatMessagesProps, type ChatProps, FileBrowser, type FileBrowserProps, FileTree, type FileTreeProps, type LogEntry, Playground, type PlaygroundContextValue, PlaygroundHeader, type PlaygroundHeaderProps, type PlaygroundProps, PlaygroundProvider, type PlaygroundProviderProps, SessionHistory, type SessionHistoryProps, StatusIndicator, type StatusIndicatorProps, Terminal, type TerminalProps, ThinkingBlock, type ToolCall, ToolCallBlock, type TreeNode, type UseAgentsOptions, type UseAgentsReturn, type UseFileBrowserOptions, type UseFileBrowserReturn, type UseFileUploadOptions, type UseFileUploadReturn, type UseHealthCheckOptions, type UseHealthCheckReturn, type UsePlaygroundChatOptions, type UsePlaygroundChatReturn, type UseSessionsOptions, type UseSessionsReturn, type UseTerminalOptions, type UseTerminalReturn, buildFileTree, cn, formatBytes, formatTime, getFileLanguage, isImageFile, parseContentBlocks, useAgents, useFileBrowser, useFileUpload, useHealthCheck, usePlaygroundChat, usePlaygroundContext, useSessions, useTerminal };

package/dist/index.js

@@ -58,6 +58,16 @@ function buildFileTree(files) {
   sortNodes(root);
   return root;
 }
+function unwrapMessageObject(obj) {
+  if (obj.message && typeof obj.message === "object") {
+    const msg = obj.message;
+    if (Array.isArray(msg.content)) return msg.content;
+  }
+  if (Array.isArray(obj.content)) return obj.content;
+  if (typeof obj.content === "string") return obj.content;
+  if (typeof obj.result === "string") return obj.result;
+  return "";
+}
 function parseContentBlocks(content) {
   let blocks = null;
   if (typeof content === "string") {
@@ -65,18 +75,23 @@ function parseContentBlocks(content) {
       const parsed = JSON.parse(content);
       if (Array.isArray(parsed)) {
         blocks = parsed;
+      } else if (parsed && typeof parsed === "object") {
+        return parseContentBlocks(unwrapMessageObject(parsed));
       }
     } catch {
-      return { text: content, toolCalls: [] };
+      return { text: content, toolCalls: [], thinking: [] };
     }
   } else if (Array.isArray(content)) {
     blocks = content;
+  } else if (content && typeof content === "object") {
+    return parseContentBlocks(unwrapMessageObject(content));
   }
   if (!blocks) {
-    return { text: typeof content === "string" ? content : "", toolCalls: [] };
+    return { text: typeof content === "string" ? content : "", toolCalls: [], thinking: [] };
   }
   let text = "";
   const toolCalls = [];
+  const thinking = [];
   for (const block of blocks) {
     const b = block;
     if (b.type === "text" && typeof b.text === "string") {
@@ -95,9 +110,12 @@ function parseContentBlocks(content) {
         match.isError = b.is_error ?? false;
         match.state = b.is_error ? "error" : "completed";
       }
+    } else if (b.type === "thinking") {
+      const t = b.thinking || b.text || "";
+      if (t) thinking.push(t);
     }
   }
-  return { text, toolCalls };
+  return { text, toolCalls, thinking };
 }
 var IMAGE_EXTS = /* @__PURE__ */ new Set(["png", "jpg", "jpeg", "gif", "svg", "webp", "ico"]);
 function isImageFile(name) {
@@ -566,6 +584,17 @@ function icon(d, opts) {
   );
   return Component;
 }
+var Brain = (props) => /* @__PURE__ */ jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", ...props, children: [
+  /* @__PURE__ */ jsx2("path", { d: "M12 5a3 3 0 1 0-5.997.125 4 4 0 0 0-2.526 5.77 4 4 0 0 0 .556 6.588A4 4 0 1 0 12 18Z" }),
+  /* @__PURE__ */ jsx2("path", { d: "M12 5a3 3 0 1 1 5.997.125 4 4 0 0 1 2.526 5.77 4 4 0 0 1-.556 6.588A4 4 0 1 1 12 18Z" }),
+  /* @__PURE__ */ jsx2("path", { d: "M15 13a4.5 4.5 0 0 1-3-4 4.5 4.5 0 0 1-3 4" }),
+  /* @__PURE__ */ jsx2("path", { d: "M17.599 6.5a3 3 0 0 0 .399-1.375" }),
+  /* @__PURE__ */ jsx2("path", { d: "M6.003 5.125A3 3 0 0 0 6.401 6.5" }),
+  /* @__PURE__ */ jsx2("path", { d: "M3.477 10.896a4 4 0 0 1 .585-.396" }),
+  /* @__PURE__ */ jsx2("path", { d: "M19.938 10.5a4 4 0 0 1 .585.396" }),
+  /* @__PURE__ */ jsx2("path", { d: "M6 18a4 4 0 0 1-1.967-.516" }),
+  /* @__PURE__ */ jsx2("path", { d: "M19.967 17.484A4 4 0 0 1 18 18" })
+] });
 var Bot = (props) => /* @__PURE__ */ jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", ...props, children: [
   /* @__PURE__ */ jsx2("path", { d: "M12 8V4H8" }),
   /* @__PURE__ */ jsx2("rect", { width: "16", height: "12", x: "4", y: "8", rx: "2" }),
@@ -775,6 +804,25 @@ import { useEffect as useEffect4, useRef as useRef2 } from "react";
 // src/components/ToolCallBlock.tsx
 import { useState as useState6 } from "react";
 import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+function ThinkingBlock({ thinking }) {
+  const [open, setOpen] = useState6(false);
+  const combined = thinking.join("\n\n");
+  return /* @__PURE__ */ jsxs4("div", { className: "my-2 rounded-lg border border-amber-500/20 bg-amber-500/[0.03] overflow-hidden", children: [
+    /* @__PURE__ */ jsxs4(
+      "button",
+      {
+        onClick: () => setOpen(!open),
+        className: "flex w-full items-center gap-2 px-3 py-2 text-left hover:bg-amber-500/5 transition-colors",
+        children: [
+          /* @__PURE__ */ jsx5(Brain, { className: "h-3.5 w-3.5 shrink-0 text-amber-500/60" }),
+          /* @__PURE__ */ jsx5("span", { className: "text-xs font-medium text-amber-400/70", children: "Thinking" }),
+          /* @__PURE__ */ jsx5("span", { className: "ml-auto flex items-center gap-1.5", children: open ? /* @__PURE__ */ jsx5(ChevronDown, { className: "h-3 w-3 text-white/30" }) : /* @__PURE__ */ jsx5(ChevronRight, { className: "h-3 w-3 text-white/30" }) })
+        ]
+      }
+    ),
+    open && /* @__PURE__ */ jsx5("div", { className: "border-t border-amber-500/10 px-3 py-2", children: /* @__PURE__ */ jsx5("pre", { className: "whitespace-pre-wrap text-xs text-white/50 leading-relaxed max-h-96 overflow-y-auto", children: combined }) })
+  ] });
+}
 function ToolCallBlock({ tool }) {
   const [open, setOpen] = useState6(false);
   const isRunning = tool.state === "running" || tool.state === "pending";
@@ -846,6 +894,7 @@ function ChatMessage({ message: msg }) {
       "max-w-[75%] rounded-2xl px-4 py-2.5",
       isUser ? "bg-accent/10 border border-accent/20 text-white" : "bg-white/5 border border-white/10 text-white/80"
     ), children: [
+      msg.thinking && msg.thinking.length > 0 && /* @__PURE__ */ jsx6(ThinkingBlock, { thinking: msg.thinking }),
       msg.content && /* @__PURE__ */ jsxs5("div", { className: "whitespace-pre-wrap text-sm leading-relaxed", children: [
         msg.content,
         msg.isStreaming && !msg.toolCalls?.some((tc) => tc.state === "running") && /* @__PURE__ */ jsx6("span", { className: "ml-1 inline-block h-4 w-0.5 animate-pulse bg-accent align-text-bottom" })
@@ -1706,6 +1755,7 @@ export {
   SessionHistory,
   StatusIndicator,
   Terminal2 as Terminal,
+  ThinkingBlock,
   ToolCallBlock,
   buildFileTree,
   cn,