@copilotz/chat-ui 0.1.6 → 0.1.8

package/dist/index.js

@@ -1,5 +1,6 @@
 // src/components/chat/ChatUI.tsx
-import { useState as useState8, useEffect as useEffect10, useRef as useRef7, useCallback as useCallback4, useMemo as useMemo3 } from "react";
+import { useState as useState8, useEffect as useEffect9, useRef as useRef7, useCallback as useCallback4, useMemo as useMemo3 } from "react";
+import { useVirtualizer } from "@tanstack/react-virtual";
 
 // src/config/chatConfig.ts
 var defaultChatConfig = {
@@ -571,10 +572,11 @@ var rehypePluginsEmpty = [];
 var StreamingText = memo(function StreamingText2({
   content,
   isStreaming = false,
-  thinkingLabel = "Thinking..."
+  thinkingLabel = "Thinking...",
+  className = ""
 }) {
   const hasContent = content.trim().length > 0;
-  return /* @__PURE__ */ jsxs2("div", { className: "prose prose-sm max-w-none dark:prose-invert", children: [
+  return /* @__PURE__ */ jsxs2("div", { className: `prose prose-sm max-w-none dark:prose-invert break-words ${className}`, children: [
     hasContent ? /* @__PURE__ */ jsx7(
       ReactMarkdown,
       {
@@ -816,7 +818,7 @@ var Message = memo(({
       minute: "2-digit"
     });
   };
-  return /* @__PURE__ */ jsx7(TooltipProvider, { children: /* @__PURE__ */ jsxs2(
+  return /* @__PURE__ */ jsxs2(
     "div",
     {
       className: `flex w-full flex-col ${className} max-w-[800px] mx-auto`,
@@ -834,7 +836,7 @@ var Message = memo(({
             message.isEdited && /* @__PURE__ */ jsx7(Badge, { variant: "outline", className: "text-xs", children: "editado" })
           ] })
         ] }),
-        /* @__PURE__ */ jsx7("div", { className: `flex-1 min-w-0 ${messageIsUser ? "text-right" : "text-left"} ${isGrouped && showAvatar && !messageIsUser ? compactMode ? "ml-9" : "ml-11" : ""} ${isGrouped && showAvatar && messageIsUser ? compactMode ? "mr-9" : "mr-11" : ""}`, children: /* @__PURE__ */ jsxs2("div", { className: `relative inline-flex flex-col ${messageIsUser ? "rounded-lg p-3 bg-primary text-primary-foreground ml-auto max-w-[85%]" : "max-w-[85%]"}`, children: [
+        /* @__PURE__ */ jsx7("div", { className: `flex-1 min-w-0 ${messageIsUser ? "text-right" : "text-left"} ${isGrouped && showAvatar && !messageIsUser ? compactMode ? "ml-9" : "ml-11" : ""} ${isGrouped && showAvatar && messageIsUser ? compactMode ? "mr-9" : "mr-11" : ""}`, children: /* @__PURE__ */ jsxs2("div", { className: `relative inline-flex flex-col overflow-hidden ${messageIsUser ? "rounded-lg p-3 bg-primary text-primary-foreground ml-auto max-w-[85%]" : "max-w-full"}`, children: [
           isEditing ? /* @__PURE__ */ jsxs2("div", { className: "space-y-2", children: [
             /* @__PURE__ */ jsx7(
               Textarea,
@@ -862,7 +864,8 @@ var Message = memo(({
               {
                 content: message.content,
                 isStreaming: message.isStreaming,
-                thinkingLabel
+                thinkingLabel,
+                className: messageIsUser ? "[&_*]:text-right" : ""
               }
             ),
             message.attachments && message.attachments.length > 0 && /* @__PURE__ */ jsx7("div", { className: "mt-3 space-y-2", children: message.attachments.map((attachment, index) => /* @__PURE__ */ jsx7(MediaRenderer, { attachment }, index)) })
@@ -911,11 +914,11 @@ var Message = memo(({
         ] }) })
       ]
     }
-  ) });
+  );
 }, arePropsEqual);
 
 // src/components/chat/Sidebar.tsx
-import { useState as useState4, useRef as useRef5, useEffect as useEffect7 } from "react";
+import { useState as useState4, useRef as useRef5, useEffect as useEffect6 } from "react";
 
 // src/components/ui/input.tsx
 import { jsx as jsx8 } from "react/jsx-runtime";
@@ -2166,7 +2169,7 @@ var Sidebar2 = ({
   const [editTitle, setEditTitle] = useState4("");
   const inputRef = useRef5(null);
   const { setOpen } = useSidebar();
-  useEffect7(() => {
+  useEffect6(() => {
     if (editingThreadId && inputRef.current) {
       inputRef.current.focus();
       inputRef.current.select();
@@ -2583,10 +2586,10 @@ var ChatHeader = ({
 };
 
 // src/components/chat/ChatInput.tsx
-import { useState as useState6, useRef as useRef6, useCallback as useCallback3, useEffect as useEffect9, memo as memo2 } from "react";
+import { useState as useState6, useRef as useRef6, useCallback as useCallback3, useEffect as useEffect8, 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 useMemo2, useState as useState5 } from "react";
+import { createContext as createContext2, useCallback as useCallback2, useContext as useContext2, useEffect as useEffect7, useMemo as useMemo2, useState as useState5 } from "react";
 import { jsx as jsx19 } from "react/jsx-runtime";
 var Ctx = createContext2(void 0);
 var ChatUserContextProvider = ({ children, initial }) => {
@@ -2594,7 +2597,7 @@ var ChatUserContextProvider = ({ children, initial }) => {
     updatedAt: Date.now(),
     ...initial ?? {}
   }));
-  useEffect8(() => {
+  useEffect7(() => {
     if (!initial) return;
     setCtx((prev) => ({
       ...prev,
@@ -2909,7 +2912,7 @@ var ChatInput = memo2(function ChatInput2({
   const recordingStartTime = useRef6(0);
   const recordingInterval = useRef6(null);
   const mediaStreamRef = useRef6(null);
-  useEffect9(() => {
+  useEffect8(() => {
     return () => {
       if (mediaStreamRef.current) {
         mediaStreamRef.current.getTracks().forEach((track) => track.stop());
@@ -3180,7 +3183,7 @@ var ChatInput = memo2(function ChatInput2({
               onChange: (e) => onChange(e.target.value),
               onKeyDown: handleKeyDown,
               placeholder,
-              disabled: disabled || isGenerating,
+              disabled,
               className: "max-h-[120px] resize-none border-0 bg-transparent focus-visible:ring-0 focus-visible:ring-offset-0",
               rows: 1
             }
@@ -3709,7 +3712,7 @@ var UserProfile = ({
 
 // src/components/chat/ChatUI.tsx
 import { Sparkles, ArrowRight, MessageSquare, Lightbulb as Lightbulb2, Zap, HelpCircle } from "lucide-react";
-import { Fragment as Fragment6, jsx as jsx24, jsxs as jsxs14 } from "react/jsx-runtime";
+import { jsx as jsx24, jsxs as jsxs14 } from "react/jsx-runtime";
 var ChatUI = ({
   messages = [],
   threads = [],
@@ -3766,35 +3769,40 @@ var ChatUI = ({
     isSidebarCollapsed: false
     // No longer used for main sidebar
   });
-  useEffect10(() => {
+  useEffect9(() => {
     if (currentThreadId !== state.selectedThreadId) {
       setState((prev) => ({ ...prev, selectedThreadId: currentThreadId }));
     }
   }, [currentThreadId]);
   const initialInputApplied = useRef7(false);
   const initialInputConsumedRef = useRef7(false);
-  useEffect10(() => {
+  useEffect9(() => {
     if (initialInput && !initialInputApplied.current) {
       setInputValue(initialInput);
       initialInputApplied.current = true;
     }
   }, [initialInput]);
-  const messagesEndRef = useRef7(null);
   const scrollAreaRef = useRef7(null);
   const stateRef = useRef7(state);
   const inputValueRef = useRef7(inputValue);
   const attachmentsRef = useRef7(attachments);
-  useEffect10(() => {
+  useEffect9(() => {
     stateRef.current = state;
   }, [state]);
-  useEffect10(() => {
+  useEffect9(() => {
     inputValueRef.current = inputValue;
   }, [inputValue]);
-  useEffect10(() => {
+  useEffect9(() => {
     attachmentsRef.current = attachments;
   }, [attachments]);
   const [isCustomMounted, setIsCustomMounted] = useState8(false);
   const [isCustomVisible, setIsCustomVisible] = useState8(false);
+  const virtualizer = useVirtualizer({
+    count: messages.length,
+    getScrollElement: () => scrollAreaRef.current,
+    estimateSize: () => 100,
+    overscan: 5
+  });
   const createStateCallback = useCallback4(
     (setter) => ({
       setState: (newState) => setter?.(newState),
@@ -3807,7 +3815,7 @@ var ChatUI = ({
     []
     // No dependencies - uses refs for latest state
   );
-  useEffect10(() => {
+  useEffect9(() => {
     const checkMobile = () => {
       setIsMobile(globalThis.innerWidth < 1024);
     };
@@ -3815,7 +3823,7 @@ var ChatUI = ({
     globalThis.addEventListener("resize", checkMobile);
     return () => globalThis.removeEventListener("resize", checkMobile);
   }, []);
-  useEffect10(() => {
+  useEffect9(() => {
     if (!isMobile || !config.customComponent?.component) return;
     if (state.showSidebar) {
       setIsCustomMounted(true);
@@ -3826,21 +3834,25 @@ var ChatUI = ({
       return () => clearTimeout(t);
     }
   }, [state.showSidebar, isMobile, config.customComponent]);
-  useEffect10(() => {
-    if (!state.isAtBottom) return;
-    const viewport = scrollAreaRef.current;
-    if (!viewport) return;
-    const target = viewport.scrollHeight;
-    try {
-      viewport.scrollTo({ top: target, behavior: "smooth" });
-    } catch {
-      viewport.scrollTop = target;
-    }
+  useEffect9(() => {
+    if (!state.isAtBottom || messages.length === 0) return;
+    requestAnimationFrame(() => {
+      const viewport = scrollAreaRef.current;
+      if (!viewport) return;
+      try {
+        viewport.scrollTo({ top: viewport.scrollHeight, behavior: "smooth" });
+      } catch {
+        viewport.scrollTop = viewport.scrollHeight;
+      }
+    });
   }, [messages, state.isAtBottom]);
   const handleScroll = useCallback4((e) => {
     const { scrollTop, scrollHeight, clientHeight } = e.currentTarget;
     const isAtBottom = scrollHeight - scrollTop - clientHeight < 50;
-    setState((prev) => ({ ...prev, isAtBottom }));
+    setState((prev) => {
+      if (prev.isAtBottom === isAtBottom) return prev;
+      return { ...prev, isAtBottom };
+    });
   }, []);
   const handleSendMessage = useCallback4((content, messageAttachments = []) => {
     if (!content.trim() && messageAttachments.length === 0) return;
@@ -3961,49 +3973,26 @@ var ChatUI = ({
       `message-skeleton-${index}`
     );
   }) });
-  const renderedMessageList = useMemo3(() => {
-    if (isMessagesLoading) return renderMessageLoadingSkeleton();
-    return /* @__PURE__ */ jsxs14(Fragment6, { children: [
-      renderSuggestions(),
-      messages.map((message, index) => {
-        const prevMessage = index > 0 ? messages[index - 1] : null;
-        const isGrouped = prevMessage !== null && prevMessage.role === message.role;
-        return /* @__PURE__ */ jsxs14("div", { className: isGrouped ? "space-y-1 -mt-2" : "space-y-2", children: [
-          /* @__PURE__ */ jsx24(
-            Message,
-            {
-              message,
-              userAvatar: user?.avatar,
-              userName: user?.name,
-              assistantAvatar: assistant?.avatar,
-              assistantName: assistant?.name,
-              showTimestamp: config.ui.showTimestamps,
-              showAvatar: config.ui.showAvatars,
-              enableCopy: config.features.enableMessageCopy,
-              enableEdit: config.features.enableMessageEditing,
-              enableRegenerate: config.features.enableRegeneration,
-              enableToolCallsDisplay: config.features.enableToolCallsDisplay,
-              compactMode: config.ui.compactMode,
-              onAction: handleMessageAction,
-              toolUsedLabel: config.labels.toolUsed,
-              thinkingLabel: config.labels.thinking,
-              isGrouped
-            }
-          ),
-          message.role === "assistant" && renderInlineSuggestions(message.id)
-        ] }, message.id);
-      })
-    ] });
-  }, [
-    isMessagesLoading,
-    messages,
-    handleSendMessage,
+  const messageProps = useMemo3(() => ({
+    userAvatar: user?.avatar,
+    userName: user?.name,
+    assistantAvatar: assistant?.avatar,
+    assistantName: assistant?.name,
+    showTimestamp: config.ui.showTimestamps,
+    showAvatar: config.ui.showAvatars,
+    enableCopy: config.features.enableMessageCopy,
+    enableEdit: config.features.enableMessageEditing,
+    enableRegenerate: config.features.enableRegeneration,
+    enableToolCallsDisplay: config.features.enableToolCallsDisplay,
+    compactMode: config.ui.compactMode,
+    onAction: handleMessageAction,
+    toolUsedLabel: config.labels.toolUsed,
+    thinkingLabel: config.labels.thinking
+  }), [
     user?.avatar,
     user?.name,
     assistant?.avatar,
     assistant?.name,
-    config.branding.title,
-    config.branding.subtitle,
     config.ui.showTimestamps,
     config.ui.showAvatars,
     config.ui.compactMode,
@@ -4013,9 +4002,7 @@ var ChatUI = ({
     config.features.enableToolCallsDisplay,
     config.labels.toolUsed,
     config.labels.thinking,
-    handleMessageAction,
-    messageSuggestions,
-    suggestions
+    handleMessageAction
   ]);
   const shouldShowAgentSelector = Boolean(
     config.agentSelector?.enabled && onSelectAgent && agentOptions.length > 0 && (!config.agentSelector?.hideIfSingle || agentOptions.length > 1)
@@ -4076,10 +4063,48 @@ var ChatUI = ({
               className: "flex-1 min-h-0",
               viewportClassName: "p-4 overscroll-contain",
               onScrollCapture: handleScroll,
-              children: /* @__PURE__ */ jsxs14("div", { className: "max-w-4xl mx-auto space-y-4 pb-4", children: [
-                renderedMessageList,
-                /* @__PURE__ */ jsx24("div", { ref: messagesEndRef })
-              ] })
+              style: { contain: "strict" },
+              children: /* @__PURE__ */ jsx24("div", { className: "max-w-4xl mx-auto pb-4", children: isMessagesLoading ? renderMessageLoadingSkeleton() : messages.length === 0 ? renderSuggestions() : /* @__PURE__ */ jsx24(
+                "div",
+                {
+                  style: {
+                    height: `${virtualizer.getTotalSize()}px`,
+                    width: "100%",
+                    position: "relative"
+                  },
+                  children: virtualizer.getVirtualItems().map((virtualRow) => {
+                    const message = messages[virtualRow.index];
+                    const prevMessage = virtualRow.index > 0 ? messages[virtualRow.index - 1] : null;
+                    const isGrouped = prevMessage !== null && prevMessage.role === message.role;
+                    return /* @__PURE__ */ jsx24(
+                      "div",
+                      {
+                        "data-index": virtualRow.index,
+                        ref: virtualizer.measureElement,
+                        style: {
+                          position: "absolute",
+                          top: 0,
+                          left: 0,
+                          width: "100%",
+                          transform: `translateY(${virtualRow.start}px)`
+                        },
+                        children: /* @__PURE__ */ jsxs14("div", { className: virtualRow.index === 0 ? "" : isGrouped ? "pt-2" : "pt-4", children: [
+                          /* @__PURE__ */ jsx24(
+                            Message,
+                            {
+                              message,
+                              ...messageProps,
+                              isGrouped
+                            }
+                          ),
+                          message.role === "assistant" && renderInlineSuggestions(message.id)
+                        ] })
+                      },
+                      message.id
+                    );
+                  })
+                }
+              ) })
             }
           ),
           /* @__PURE__ */ jsx24("div", { className: "bg-background pb-[env(safe-area-inset-bottom)]", children: /* @__PURE__ */ jsx24(
@@ -4158,7 +4183,7 @@ var ChatUI = ({
 };
 
 // src/components/chat/ThreadManager.tsx
-import { useState as useState9, useRef as useRef8, useEffect as useEffect11 } from "react";
+import { useState as useState9, useRef as useRef8, useEffect as useEffect10 } from "react";
 import {
   Plus as Plus4,
   MessageSquare as MessageSquare2,
@@ -4173,12 +4198,12 @@ import {
   X as X4,
   Check as Check4
 } from "lucide-react";
-import { Fragment as Fragment7, jsx as jsx25, jsxs as jsxs15 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx25, jsxs as jsxs15 } from "react/jsx-runtime";
 var ThreadItem = ({ thread, isActive, config, onSelect, onRename, onDelete, onArchive }) => {
   const [isEditing, setIsEditing] = useState9(false);
   const [editTitle, setEditTitle] = useState9(thread.title);
   const inputRef = useRef8(null);
-  useEffect11(() => {
+  useEffect10(() => {
     if (isEditing && inputRef.current) {
       inputRef.current.focus();
       inputRef.current.select();
@@ -4218,7 +4243,7 @@ var ThreadItem = ({ thread, isActive, config, onSelect, onRename, onDelete, onAr
       ),
       /* @__PURE__ */ jsx25(Button, { size: "sm", variant: "ghost", onClick: handleSaveEdit, children: /* @__PURE__ */ jsx25(Check4, { className: "h-3 w-3" }) }),
       /* @__PURE__ */ jsx25(Button, { size: "sm", variant: "ghost", onClick: handleCancelEdit, children: /* @__PURE__ */ jsx25(X4, { className: "h-3 w-3" }) })
-    ] }) : /* @__PURE__ */ jsxs15(Fragment7, { children: [
+    ] }) : /* @__PURE__ */ jsxs15(Fragment6, { children: [
       /* @__PURE__ */ jsx25("h4", { className: "font-medium text-sm truncate mb-1", children: thread.title }),
       /* @__PURE__ */ jsxs15("div", { className: "flex items-center gap-2 text-xs text-muted-foreground", children: [
         /* @__PURE__ */ jsxs15("div", { className: "flex items-center gap-1", children: [
@@ -4231,7 +4256,7 @@ var ThreadItem = ({ thread, isActive, config, onSelect, onRename, onDelete, onAr
           /* @__PURE__ */ jsx25(Calendar2, { className: "h-3 w-3" }),
           formatDate(thread.updatedAt, config?.labels)
         ] }),
-        thread.isArchived && /* @__PURE__ */ jsxs15(Fragment7, { children: [
+        thread.isArchived && /* @__PURE__ */ jsxs15(Fragment6, { children: [
           /* @__PURE__ */ jsx25(Separator, { orientation: "vertical", className: "h-3" }),
           /* @__PURE__ */ jsxs15(Badge, { variant: "secondary", className: "text-xs", children: [
             /* @__PURE__ */ jsx25(Archive2, { className: "h-2 w-2 mr-1" }),