@copilotz/chat-ui 0.1.21 → 0.1.22

package/dist/index.js

@@ -1,5 +1,5 @@
 // src/components/chat/ChatUI.tsx
-import { useState as useState8, useEffect as useEffect10, useRef as useRef6, useCallback as useCallback4, useMemo as useMemo4 } from "react";
+import { useState as useState8, useEffect as useEffect10, useRef as useRef7, useCallback as useCallback4, useMemo as useMemo4 } from "react";
 import { useVirtualizer } from "@tanstack/react-virtual";
 
 // src/config/chatConfig.ts
@@ -245,7 +245,7 @@ var configUtils = {
 };
 
 // src/components/chat/Message.tsx
-import React, { useState, useMemo, useEffect, memo } from "react";
+import React, { useState, useMemo, useEffect, useRef, memo } from "react";
 import ReactMarkdown from "react-markdown";
 import remarkGfm from "remark-gfm";
 import rehypeHighlight from "rehype-highlight";
@@ -587,17 +587,29 @@ var ThinkingIndicator = memo(function ThinkingIndicator2({ label = "Thinking..."
 });
 var ThinkingBlock = memo(function ThinkingBlock2({ content, isStreaming = false, label = "Thinking", chunkSize = 12e3 }) {
   const [open, setOpen] = useState(isStreaming);
+  const [thinkingActive, setThinkingActive] = useState(false);
+  const contentLenRef = useRef(0);
   useEffect(() => {
-    if (isStreaming) setOpen(true);
-  }, [isStreaming]);
-  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]);
+  useEffect(() => {
+    if (!thinkingActive || !isStreaming) return;
+    const timer = setTimeout(() => setThinkingActive(false), 1e3);
+    return () => clearTimeout(timer);
+  }, [thinkingActive, isStreaming, content.length]);
+  useEffect(() => {
+    if (isStreaming && content.length > 0) setOpen(true);
+  }, [isStreaming, content.length]);
   return /* @__PURE__ */ jsxs2("div", { className: "mb-3 relative rounded-lg overflow-hidden", children: [
-    isStreaming && /* @__PURE__ */ jsx7(
+    thinkingActive && /* @__PURE__ */ jsx7(
       "div",
       {
         className: "absolute inset-0 rounded-lg pointer-events-none",
@@ -612,8 +624,8 @@ var ThinkingBlock = memo(function ThinkingBlock2({ content, isStreaming = false,
     /* @__PURE__ */ jsxs2(
       "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__ */ jsxs2(
             "button",
@@ -622,10 +634,10 @@ var ThinkingBlock = memo(function ThinkingBlock2({ content, isStreaming = false,
               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__ */ jsx7(BrainCircuit, { className: `h-3.5 w-3.5 flex-shrink-0 ${isStreaming ? "animate-pulse text-primary" : ""}` }),
+                /* @__PURE__ */ jsx7(BrainCircuit, { className: `h-3.5 w-3.5 flex-shrink-0 ${thinkingActive ? "animate-pulse text-primary" : ""}` }),
                 /* @__PURE__ */ jsxs2("span", { className: "flex-1", children: [
-                  isStreaming ? label : `${label}`,
-                  isStreaming && /* @__PURE__ */ jsxs2("span", { className: "ml-1 inline-flex gap-0.5", children: [
+                  label,
+                  thinkingActive && /* @__PURE__ */ jsxs2("span", { className: "ml-1 inline-flex gap-0.5", children: [
                     /* @__PURE__ */ jsx7("span", { className: "inline-block w-1 h-1 bg-current rounded-full animate-bounce", style: { animationDelay: "0ms" } }),
                     /* @__PURE__ */ jsx7("span", { className: "inline-block w-1 h-1 bg-current rounded-full animate-bounce", style: { animationDelay: "150ms" } }),
                     /* @__PURE__ */ jsx7("span", { className: "inline-block w-1 h-1 bg-current rounded-full animate-bounce", style: { animationDelay: "300ms" } })
@@ -644,7 +656,7 @@ var ThinkingBlock = memo(function ThinkingBlock2({ content, isStreaming = false,
                 chunkSize
               }
             ),
-            isStreaming && /* @__PURE__ */ jsx7("span", { className: "inline-block w-1.5 h-3 bg-muted-foreground/40 animate-pulse ml-0.5" })
+            thinkingActive && /* @__PURE__ */ jsx7("span", { className: "inline-block w-1.5 h-3 bg-muted-foreground/40 animate-pulse ml-0.5" })
           ] }) })
         ]
       }
@@ -1130,7 +1142,7 @@ var Message = memo(({
 }, arePropsEqual);
 
 // src/components/chat/Sidebar.tsx
-import { useState as useState4, useRef as useRef4, useEffect as useEffect7 } from "react";
+import { useState as useState4, useRef as useRef5, useEffect as useEffect7 } from "react";
 
 // src/components/ui/input.tsx
 import { jsx as jsx8 } from "react/jsx-runtime";
@@ -2379,7 +2391,7 @@ var Sidebar2 = ({
   const [deleteThreadId, setDeleteThreadId] = useState4(null);
   const [editingThreadId, setEditingThreadId] = useState4(null);
   const [editTitle, setEditTitle] = useState4("");
-  const inputRef = useRef4(null);
+  const inputRef = useRef5(null);
   const { setOpen } = useSidebar();
   useEffect7(() => {
     if (editingThreadId && inputRef.current) {
@@ -2798,7 +2810,7 @@ var ChatHeader = ({
 };
 
 // src/components/chat/ChatInput.tsx
-import { useState as useState6, useRef as useRef5, useCallback as useCallback3, useEffect as useEffect9, memo as memo2 } from "react";
+import { useState as useState6, useRef as useRef6, useCallback as useCallback3, useEffect as useEffect9, memo as memo2 } from "react";
 
 // src/components/chat/UserContext.tsx
 import { createContext as createContext2, useCallback as useCallback2, useContext as useContext2, useEffect as useEffect8, useMemo as useMemo3, useState as useState5 } from "react";
@@ -2942,7 +2954,7 @@ var FileUploadItem = memo2(function FileUploadItem2({ file, progress, onCancel }
 var AttachmentPreview = memo2(function AttachmentPreview2({ attachment, onRemove }) {
   const [isPlaying, setIsPlaying] = useState6(false);
   const [audioPlaybackSrc, setAudioPlaybackSrc] = useState6(attachment.dataUrl);
-  const audioRef = useRef5(null);
+  const audioRef = useRef6(null);
   useEffect9(() => {
     if (attachment.kind !== "audio" || !attachment.dataUrl.startsWith("data:")) {
       setAudioPlaybackSrc(attachment.dataUrl);
@@ -3135,12 +3147,12 @@ var ChatInput = memo2(function ChatInput2({
   const { setContext } = useChatUserContext();
   const [recordingDuration, setRecordingDuration] = useState6(0);
   const [uploadProgress, setUploadProgress] = useState6(/* @__PURE__ */ new Map());
-  const textareaRef = useRef5(null);
-  const fileInputRef = useRef5(null);
-  const mediaRecorderRef = useRef5(null);
-  const recordingStartTime = useRef5(0);
-  const recordingInterval = useRef5(null);
-  const mediaStreamRef = useRef5(null);
+  const textareaRef = useRef6(null);
+  const fileInputRef = useRef6(null);
+  const mediaRecorderRef = useRef6(null);
+  const recordingStartTime = useRef6(0);
+  const recordingInterval = useRef6(null);
+  const mediaStreamRef = useRef6(null);
   useEffect9(() => {
     return () => {
       if (mediaStreamRef.current) {
@@ -4004,18 +4016,18 @@ var ChatUI = ({
       setState((prev) => ({ ...prev, selectedThreadId: currentThreadId }));
     }
   }, [currentThreadId]);
-  const initialInputApplied = useRef6(false);
-  const initialInputConsumedRef = useRef6(false);
+  const initialInputApplied = useRef7(false);
+  const initialInputConsumedRef = useRef7(false);
   useEffect10(() => {
     if (initialInput && !initialInputApplied.current) {
       setInputValue(initialInput);
       initialInputApplied.current = true;
     }
   }, [initialInput]);
-  const scrollAreaRef = useRef6(null);
-  const stateRef = useRef6(state);
-  const inputValueRef = useRef6(inputValue);
-  const attachmentsRef = useRef6(attachments);
+  const scrollAreaRef = useRef7(null);
+  const stateRef = useRef7(state);
+  const inputValueRef = useRef7(inputValue);
+  const attachmentsRef = useRef7(attachments);
   useEffect10(() => {
     stateRef.current = state;
   }, [state]);
@@ -4064,7 +4076,7 @@ var ChatUI = ({
       return () => clearTimeout(t);
     }
   }, [state.showSidebar, isMobile, config.customComponent]);
-  const prevMessageCountRef = useRef6(0);
+  const prevMessageCountRef = useRef7(0);
   useEffect10(() => {
     if (messages.length === 0) {
       prevMessageCountRef.current = 0;
@@ -4477,7 +4489,7 @@ var ChatUI = ({
 };
 
 // src/components/chat/ThreadManager.tsx
-import { useState as useState9, useRef as useRef7, useEffect as useEffect11 } from "react";
+import { useState as useState9, useRef as useRef8, useEffect as useEffect11 } from "react";
 import {
   Plus as Plus4,
   MessageSquare as MessageSquare2,
@@ -4496,7 +4508,7 @@ import { Fragment as Fragment6, jsx as jsx25, jsxs as jsxs15 } from "react/jsx-r
 var ThreadItem = ({ thread, isActive, config, onSelect, onRename, onDelete, onArchive }) => {
   const [isEditing, setIsEditing] = useState9(false);
   const [editTitle, setEditTitle] = useState9(thread.title);
-  const inputRef = useRef7(null);
+  const inputRef = useRef8(null);
   useEffect11(() => {
     if (isEditing && inputRef.current) {
       inputRef.current.focus();