@copilotz/chat-ui 0.1.21 → 0.1.23

package/dist/index.cjs

@@ -632,17 +632,29 @@ var ThinkingIndicator = (0, import_react.memo)(function ThinkingIndicator2({ lab
 });
 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) setOpen(true);
-  }, [isStreaming]);
-  (0, import_react.useEffect)(() => {
-    if (!isStreaming && open) {
-      const timer = setTimeout(() => setOpen(false), 600);
-      return () => clearTimeout(timer);
+    if (!isStreaming) {
+      setThinkingActive(false);
+      contentLenRef.current = 0;
+      return;
+    }
+    if (content.length > contentLenRef.current) {
+      contentLenRef.current = content.length;
+      setThinkingActive(true);
     }
-  }, [isStreaming, open]);
+  }, [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: [
-    isStreaming && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    thinkingActive && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
       "div",
       {
         className: "absolute inset-0 rounded-lg pointer-events-none",
@@ -657,8 +669,8 @@ var ThinkingBlock = (0, import_react.memo)(function ThinkingBlock2({ content, is
     /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
       "div",
       {
-        className: `relative rounded-lg border bg-muted/30 ${isStreaming ? "border-transparent" : "border-muted-foreground/20"}`,
-        style: isStreaming ? { margin: "1px" } : void 0,
+        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",
@@ -667,10 +679,10 @@ var ThinkingBlock = (0, import_react.memo)(function ThinkingBlock2({ content, is
               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 ${isStreaming ? "animate-pulse text-primary" : ""}` }),
+                /* @__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: [
-                  isStreaming ? label : `${label}`,
-                  isStreaming && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("span", { className: "ml-1 inline-flex gap-0.5", 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" } })
@@ -689,7 +701,7 @@ var ThinkingBlock = (0, import_react.memo)(function ThinkingBlock2({ content, is
                 chunkSize
               }
             ),
-            isStreaming && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "inline-block w-1.5 h-3 bg-muted-foreground/40 animate-pulse ml-0.5" })
+            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" })
           ] }) })
         ]
       }