@copilotz/chat-ui 0.1.20 → 0.1.22

package/dist/index.cjs

@@ -630,6 +630,90 @@ var ThinkingIndicator = (0, import_react.memo)(function ThinkingIndicator2({ lab
     /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "text-sm text-muted-foreground animate-pulse", children: label })
   ] });
 });
+var ThinkingBlock = (0, import_react.memo)(function ThinkingBlock2({ content, isStreaming = false, label = "Thinking", chunkSize = 12e3 }) {
+  const [open, setOpen] = (0, import_react.useState)(isStreaming);
+  const [thinkingActive, setThinkingActive] = (0, import_react.useState)(false);
+  const contentLenRef = (0, import_react.useRef)(0);
+  (0, import_react.useEffect)(() => {
+    if (!isStreaming) {
+      setThinkingActive(false);
+      contentLenRef.current = 0;
+      return;
+    }
+    if (content.length > contentLenRef.current) {
+      contentLenRef.current = content.length;
+      setThinkingActive(true);
+    }
+  }, [content.length, isStreaming]);
+  (0, import_react.useEffect)(() => {
+    if (!thinkingActive || !isStreaming) return;
+    const timer = setTimeout(() => setThinkingActive(false), 1e3);
+    return () => clearTimeout(timer);
+  }, [thinkingActive, isStreaming, content.length]);
+  (0, import_react.useEffect)(() => {
+    if (isStreaming && content.length > 0) setOpen(true);
+  }, [isStreaming, content.length]);
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "mb-3 relative rounded-lg overflow-hidden", children: [
+    thinkingActive && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      "div",
+      {
+        className: "absolute inset-0 rounded-lg pointer-events-none",
+        style: {
+          padding: "1px",
+          background: "linear-gradient(135deg, hsl(var(--primary) / 0.4), hsl(var(--muted-foreground) / 0.2), hsl(var(--primary) / 0.4))",
+          backgroundSize: "200% 200%",
+          animation: "thinking-shimmer 2s ease-in-out infinite"
+        }
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+      "div",
+      {
+        className: `relative rounded-lg border bg-muted/30 ${thinkingActive ? "border-transparent" : "border-muted-foreground/20"}`,
+        style: thinkingActive ? { margin: "1px" } : void 0,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+            "button",
+            {
+              type: "button",
+              className: "flex w-full items-center gap-2 px-3 py-2 text-left text-xs font-medium text-muted-foreground hover:text-foreground/70 transition-colors",
+              onClick: () => setOpen((v) => !v),
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_lucide_react.BrainCircuit, { className: `h-3.5 w-3.5 flex-shrink-0 ${thinkingActive ? "animate-pulse text-primary" : ""}` }),
+                /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("span", { className: "flex-1", children: [
+                  label,
+                  thinkingActive && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("span", { className: "ml-1 inline-flex gap-0.5", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "inline-block w-1 h-1 bg-current rounded-full animate-bounce", style: { animationDelay: "0ms" } }),
+                    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "inline-block w-1 h-1 bg-current rounded-full animate-bounce", style: { animationDelay: "150ms" } }),
+                    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "inline-block w-1 h-1 bg-current rounded-full animate-bounce", style: { animationDelay: "300ms" } })
+                  ] })
+                ] }),
+                open ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_lucide_react.ChevronDown, { className: "h-3 w-3" }) : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_lucide_react.ChevronRight, { className: "h-3 w-3" })
+              ]
+            }
+          ),
+          open && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "px-3 pb-3", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "border-l-2 border-muted-foreground/20 pl-3", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+              PlainTextContent,
+              {
+                content,
+                className: "text-xs text-muted-foreground/80 leading-5",
+                chunkSize
+              }
+            ),
+            thinkingActive && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "inline-block w-1.5 h-3 bg-muted-foreground/40 animate-pulse ml-0.5" })
+          ] }) })
+        ]
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("style", { children: `
+        @keyframes thinking-shimmer {
+          0%, 100% { background-position: 0% 50%; }
+          50% { background-position: 100% 50%; }
+        }
+      ` })
+  ] });
+});
 var markdownComponents = {
   code: ({ node, className, children, ...props }) => {
     const inline = props.inline;
@@ -1020,6 +1104,15 @@ var Message = (0, import_react.memo)(({
               ] })
             ] })
           ] }) : /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
+            !messageIsUser && message.reasoning && message.reasoning.trim().length > 0 && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+              ThinkingBlock,
+              {
+                content: message.reasoning,
+                isStreaming: message.isStreaming,
+                label: thinkingLabel,
+                chunkSize: normalizedChunkChars
+              }
+            ),
             enableToolCallsDisplay && message.toolCalls && message.toolCalls.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "mb-3", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ToolCallsDisplay, { toolCalls: message.toolCalls, label: toolUsedLabel }) }),
             /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
               StreamingText,