@ash-ai/ui 0.0.2 → 0.0.4

package/dist/index.cjs

@@ -33,6 +33,7 @@ __export(index_exports, {
   SessionHistory: () => SessionHistory,
   StatusIndicator: () => StatusIndicator,
   Terminal: () => Terminal2,
+  ThinkingBlock: () => ThinkingBlock,
   ToolCallBlock: () => ToolCallBlock,
   buildFileTree: () => buildFileTree,
   cn: () => cn,
@@ -112,6 +113,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") {
@@ -119,18 +130,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") {
@@ -149,9 +165,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) {
@@ -620,6 +639,17 @@ function icon(d, opts) {
   );
   return Component;
 }
+var Brain = (props) => /* @__PURE__ */ (0, import_jsx_runtime2.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__ */ (0, import_jsx_runtime2.jsx)("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__ */ (0, import_jsx_runtime2.jsx)("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__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M15 13a4.5 4.5 0 0 1-3-4 4.5 4.5 0 0 1-3 4" }),
+  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M17.599 6.5a3 3 0 0 0 .399-1.375" }),
+  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M6.003 5.125A3 3 0 0 0 6.401 6.5" }),
+  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M3.477 10.896a4 4 0 0 1 .585-.396" }),
+  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M19.938 10.5a4 4 0 0 1 .585.396" }),
+  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M6 18a4 4 0 0 1-1.967-.516" }),
+  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M19.967 17.484A4 4 0 0 1 18 18" })
+] });
 var Bot = (props) => /* @__PURE__ */ (0, import_jsx_runtime2.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__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M12 8V4H8" }),
   /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("rect", { width: "16", height: "12", x: "4", y: "8", rx: "2" }),
@@ -829,6 +859,25 @@ var import_react8 = require("react");
 // src/components/ToolCallBlock.tsx
 var import_react7 = require("react");
 var import_jsx_runtime5 = require("react/jsx-runtime");
+function ThinkingBlock({ thinking }) {
+  const [open, setOpen] = (0, import_react7.useState)(false);
+  const combined = thinking.join("\n\n");
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "my-2 rounded-lg border border-amber-500/20 bg-amber-500/[0.03] overflow-hidden", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+      "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__ */ (0, import_jsx_runtime5.jsx)(Brain, { className: "h-3.5 w-3.5 shrink-0 text-amber-500/60" }),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "text-xs font-medium text-amber-400/70", children: "Thinking" }),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "ml-auto flex items-center gap-1.5", children: open ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ChevronDown, { className: "h-3 w-3 text-white/30" }) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ChevronRight, { className: "h-3 w-3 text-white/30" }) })
+        ]
+      }
+    ),
+    open && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "border-t border-amber-500/10 px-3 py-2", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("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] = (0, import_react7.useState)(false);
   const isRunning = tool.state === "running" || tool.state === "pending";
@@ -900,6 +949,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__ */ (0, import_jsx_runtime6.jsx)(ThinkingBlock, { thinking: msg.thinking }),
       msg.content && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "whitespace-pre-wrap text-sm leading-relaxed", children: [
         msg.content,
         msg.isStreaming && !msg.toolCalls?.some((tc) => tc.state === "running") && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "ml-1 inline-block h-4 w-0.5 animate-pulse bg-accent align-text-bottom" })
@@ -1761,6 +1811,7 @@ function Playground({ client, defaultAgent, className }) {
   SessionHistory,
   StatusIndicator,
   Terminal,
+  ThinkingBlock,
   ToolCallBlock,
   buildFileTree,
   cn,