@copilotz/chat-ui 0.1.22 → 0.1.24

package/dist/index.cjs

@@ -630,88 +630,35 @@ 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);
+var ThinkingBlock = (0, import_react.memo)(function ThinkingBlock2({ reasoning, isStreaming = false, label = "Thinking..." }) {
+  const [isOpen, setIsOpen] = (0, import_react.useState)(isStreaming);
   (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"
-        }
-      }
-    ),
+    if (isStreaming) setIsOpen(true);
+  }, [isStreaming]);
+  const finishedLabel = label.replace(/\.{3}$/, "");
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: `mb-3 rounded-lg border ${isStreaming ? "border-primary/40 bg-primary/5" : "border-border/60 bg-muted/30"} overflow-hidden transition-colors duration-300`, children: [
     /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
-      "div",
+      "button",
       {
-        className: `relative rounded-lg border bg-muted/30 ${thinkingActive ? "border-transparent" : "border-muted-foreground/20"}`,
-        style: thinkingActive ? { margin: "1px" } : void 0,
+        type: "button",
+        className: "flex w-full items-center gap-2 px-3 py-2 text-left text-sm font-medium text-muted-foreground hover:text-foreground transition-colors",
+        onClick: () => setIsOpen(!isOpen),
         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)(import_lucide_react.Brain, { className: `h-4 w-4 flex-shrink-0 ${isStreaming ? "text-primary animate-pulse" : "text-muted-foreground"}` }),
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "flex-1", children: isStreaming ? label : finishedLabel }),
+          isStreaming && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex gap-0.5 mr-1", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "inline-block w-1 h-1 bg-primary rounded-full animate-bounce", style: { animationDelay: "0ms" } }),
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "inline-block w-1 h-1 bg-primary rounded-full animate-bounce", style: { animationDelay: "150ms" } }),
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "inline-block w-1 h-1 bg-primary rounded-full animate-bounce", style: { animationDelay: "300ms" } })
+          ] }),
+          isOpen ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_lucide_react.ChevronDown, { className: "h-3 w-3 flex-shrink-0" }) : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_lucide_react.ChevronRight, { className: "h-3 w-3 flex-shrink-0" })
         ]
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("style", { children: `
-        @keyframes thinking-shimmer {
-          0%, 100% { background-position: 0% 50%; }
-          50% { background-position: 100% 50%; }
-        }
-      ` })
+    isOpen && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "px-3 pb-3 text-sm text-muted-foreground leading-relaxed whitespace-pre-wrap break-words border-t border-border/40", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "pt-2", children: [
+      reasoning,
+      isStreaming && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "inline-block w-1.5 h-3.5 bg-primary/60 animate-pulse ml-0.5" })
+    ] }) })
   ] });
 });
 var markdownComponents = {
@@ -780,7 +727,8 @@ var StreamingText = (0, import_react.memo)(function StreamingText2({
   className = "",
   renderMarkdown = true,
   plainTextChunkChars = 12e3,
-  contentStyle
+  contentStyle,
+  hideThinkingIndicator = false
 }) {
   const hasContent = content.trim().length > 0;
   const enableSyntaxHighlight = renderMarkdown && !isStreaming && hasCodeBlocks(content);
@@ -808,10 +756,7 @@ var StreamingText = (0, import_react.memo)(function StreamingText2({
         chunkSize: plainTextChunkChars,
         style: contentStyle
       }
-    ) : isStreaming ? (
-      // Show thinking indicator while waiting for first token
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ThinkingIndicator, { label: thinkingLabel })
-    ) : null,
+    ) : isStreaming && !hideThinkingIndicator ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ThinkingIndicator, { label: thinkingLabel }) : null,
     isStreaming && hasContent && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "inline-block w-2 h-4 bg-primary animate-pulse ml-1" })
   ] });
 });
@@ -1104,13 +1049,12 @@ 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)(
+            !messageIsUser && message.reasoning && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
               ThinkingBlock,
               {
-                content: message.reasoning,
-                isStreaming: message.isStreaming,
-                label: thinkingLabel,
-                chunkSize: normalizedChunkChars
+                reasoning: message.reasoning,
+                isStreaming: message.isReasoningStreaming,
+                label: thinkingLabel
               }
             ),
             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 }) }),
@@ -1122,7 +1066,8 @@ var Message = (0, import_react.memo)(({
                 thinkingLabel,
                 renderMarkdown: shouldRenderMarkdown,
                 plainTextChunkChars: normalizedChunkChars,
-                contentStyle
+                contentStyle,
+                hideThinkingIndicator: !!message.reasoning
               }
             ),
             canCollapseMessage && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "mt-3", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(