@copilotz/chat-ui 0.1.7 → 0.1.9

package/dist/index.cjs

@@ -55,6 +55,7 @@ module.exports = __toCommonJS(index_exports);
 
 // src/components/chat/ChatUI.tsx
 var import_react7 = require("react");
+var import_react_virtual = require("@tanstack/react-virtual");
 
 // src/config/chatConfig.ts
 var defaultChatConfig = {
@@ -616,10 +617,11 @@ var rehypePluginsEmpty = [];
 var StreamingText = (0, import_react.memo)(function StreamingText2({
   content,
   isStreaming = false,
-  thinkingLabel = "Thinking..."
+  thinkingLabel = "Thinking...",
+  className = ""
 }) {
   const hasContent = content.trim().length > 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "prose prose-sm max-w-none dark:prose-invert", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: `prose prose-sm max-w-none dark:prose-invert break-words ${className}`, children: [
     hasContent ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
       import_react_markdown.default,
       {
@@ -861,7 +863,7 @@ var Message = (0, import_react.memo)(({
       minute: "2-digit"
     });
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(TooltipProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
     "div",
     {
       className: `flex w-full flex-col ${className} max-w-[800px] mx-auto`,
@@ -879,7 +881,7 @@ var Message = (0, import_react.memo)(({
             message.isEdited && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Badge, { variant: "outline", className: "text-xs", children: "editado" })
           ] })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("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__ */ (0, import_jsx_runtime7.jsxs)("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__ */ (0, import_jsx_runtime7.jsx)("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__ */ (0, import_jsx_runtime7.jsxs)("div", { className: `relative inline-flex flex-col overflow-hidden text-left ${messageIsUser ? "rounded-lg p-3 bg-primary text-primary-foreground ml-auto max-w-[85%]" : "max-w-full"}`, children: [
           isEditing ? /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "space-y-2", children: [
             /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
               Textarea,
@@ -956,7 +958,7 @@ var Message = (0, import_react.memo)(({
         ] }) })
       ]
     }
-  ) });
+  );
 }, arePropsEqual);
 
 // src/components/chat/Sidebar.tsx
@@ -3184,7 +3186,7 @@ var ChatInput = (0, import_react5.memo)(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
             }
@@ -3757,7 +3759,6 @@ var ChatUI = ({
       initialInputApplied.current = true;
     }
   }, [initialInput]);
-  const messagesEndRef = (0, import_react7.useRef)(null);
   const scrollAreaRef = (0, import_react7.useRef)(null);
   const stateRef = (0, import_react7.useRef)(state);
   const inputValueRef = (0, import_react7.useRef)(inputValue);
@@ -3773,6 +3774,12 @@ var ChatUI = ({
   }, [attachments]);
   const [isCustomMounted, setIsCustomMounted] = (0, import_react7.useState)(false);
   const [isCustomVisible, setIsCustomVisible] = (0, import_react7.useState)(false);
+  const virtualizer = (0, import_react_virtual.useVirtualizer)({
+    count: messages.length,
+    getScrollElement: () => scrollAreaRef.current,
+    estimateSize: () => 100,
+    overscan: 5
+  });
   const createStateCallback = (0, import_react7.useCallback)(
     (setter) => ({
       setState: (newState) => setter?.(newState),
@@ -3804,21 +3811,40 @@ var ChatUI = ({
       return () => clearTimeout(t);
     }
   }, [state.showSidebar, isMobile, config.customComponent]);
+  const prevMessageCountRef = (0, import_react7.useRef)(0);
   (0, import_react7.useEffect)(() => {
-    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;
+    if (messages.length === 0) {
+      prevMessageCountRef.current = 0;
+      return;
     }
-  }, [messages, state.isAtBottom]);
+    const wasEmpty = prevMessageCountRef.current === 0;
+    prevMessageCountRef.current = messages.length;
+    if (wasEmpty) {
+      requestAnimationFrame(() => {
+        requestAnimationFrame(() => {
+          virtualizer.scrollToIndex(messages.length - 1, { align: "end" });
+        });
+      });
+      return;
+    }
+    if (!state.isAtBottom) 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, virtualizer]);
   const handleScroll = (0, import_react7.useCallback)((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 = (0, import_react7.useCallback)((content, messageAttachments = []) => {
     if (!content.trim() && messageAttachments.length === 0) return;
@@ -3939,49 +3965,26 @@ var ChatUI = ({
       `message-skeleton-${index}`
     );
   }) });
-  const renderedMessageList = (0, import_react7.useMemo)(() => {
-    if (isMessagesLoading) return renderMessageLoadingSkeleton();
-    return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_jsx_runtime24.Fragment, { children: [
-      renderSuggestions(),
-      messages.map((message, index) => {
-        const prevMessage = index > 0 ? messages[index - 1] : null;
-        const isGrouped = prevMessage !== null && prevMessage.role === message.role;
-        return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: isGrouped ? "space-y-1 -mt-2" : "space-y-2", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
-            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 = (0, import_react7.useMemo)(() => ({
+    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,
@@ -3991,9 +3994,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)
@@ -4054,10 +4055,48 @@ var ChatUI = ({
               className: "flex-1 min-h-0",
               viewportClassName: "p-4 overscroll-contain",
               onScrollCapture: handleScroll,
-              children: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "max-w-4xl mx-auto space-y-4 pb-4", children: [
-                renderedMessageList,
-                /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { ref: messagesEndRef })
-              ] })
+              style: { contain: "strict" },
+              children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "max-w-4xl mx-auto pb-4", children: isMessagesLoading ? renderMessageLoadingSkeleton() : messages.length === 0 ? renderSuggestions() : /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+                "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__ */ (0, import_jsx_runtime24.jsx)(
+                      "div",
+                      {
+                        "data-index": virtualRow.index,
+                        ref: virtualizer.measureElement,
+                        style: {
+                          position: "absolute",
+                          top: 0,
+                          left: 0,
+                          width: "100%",
+                          transform: `translateY(${virtualRow.start}px)`
+                        },
+                        children: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: virtualRow.index === 0 ? "" : isGrouped ? "pt-2" : "pt-4", children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+                            Message,
+                            {
+                              message,
+                              ...messageProps,
+                              isGrouped
+                            }
+                          ),
+                          message.role === "assistant" && renderInlineSuggestions(message.id)
+                        ] })
+                      },
+                      message.id
+                    );
+                  })
+                }
+              ) })
             }
           ),
           /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "bg-background pb-[env(safe-area-inset-bottom)]", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(