@copilotz/chat-ui 0.1.8 → 0.1.10

package/dist/index.cjs

@@ -119,7 +119,9 @@ var defaultChatConfig = {
     daysAgo: "days ago",
     inputHelpText: "Press Enter to send, Shift+Enter to add a new line.",
     thinking: "Thinking...",
-    defaultThreadName: "Main Thread"
+    defaultThreadName: "Main Thread",
+    showMoreMessage: "Show more",
+    showLessMessage: "Show less"
   },
   features: {
     enableThreads: true,
@@ -138,7 +140,12 @@ var defaultChatConfig = {
     showTimestamps: false,
     showAvatars: true,
     compactMode: false,
-    showWordCount: false
+    showWordCount: false,
+    collapseLongMessages: false,
+    collapseLongMessagesForUserOnly: false,
+    longMessagePreviewChars: 4e3,
+    longMessageChunkChars: 12e3,
+    renderUserMarkdown: true
   },
   customComponent: {},
   headerActions: null
@@ -293,7 +300,7 @@ var configUtils = {
 };
 
 // src/components/chat/Message.tsx
-var import_react = require("react");
+var import_react = __toESM(require("react"), 1);
 var import_react_markdown = __toESM(require("react-markdown"), 1);
 var import_remark_gfm = __toESM(require("remark-gfm"), 1);
 var import_rehype_highlight = __toESM(require("rehype-highlight"), 1);
@@ -614,21 +621,89 @@ var markdownComponents = {
 var remarkPluginsDefault = [import_remark_gfm.default];
 var rehypePluginsDefault = [import_rehype_highlight.default];
 var rehypePluginsEmpty = [];
+var getPlainTextChunks = (content, chunkSize) => {
+  if (chunkSize <= 0 || content.length <= chunkSize) {
+    return [content];
+  }
+  const chunks = [];
+  let start = 0;
+  while (start < content.length) {
+    let end = Math.min(start + chunkSize, content.length);
+    if (end < content.length) {
+      const splitAt = content.lastIndexOf("\n", end);
+      if (splitAt > start + Math.floor(chunkSize / 2)) {
+        end = splitAt + 1;
+      }
+    }
+    chunks.push(content.slice(start, end));
+    start = end;
+  }
+  return chunks;
+};
+var hasCodeBlocks = (content) => /(^|\n)(```|~~~)/.test(content);
+var getCollapsedPreview = (content, previewChars, previewOverride) => {
+  if (previewOverride && previewOverride.trim().length > 0) {
+    const normalizedPreview = previewOverride.trimEnd();
+    return normalizedPreview.endsWith("...") ? normalizedPreview : `${normalizedPreview}...`;
+  }
+  if (content.length <= previewChars) {
+    return content;
+  }
+  return `${content.slice(0, previewChars).trimEnd()}...`;
+};
+var LongContentShell = (0, import_react.memo)(function LongContentShell2({ children, className, style }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className, style, children });
+});
+var PlainTextContent = (0, import_react.memo)(function PlainTextContent2({
+  content,
+  className = "",
+  chunkSize = 12e3,
+  style
+}) {
+  const chunks = (0, import_react.useMemo)(() => getPlainTextChunks(content, chunkSize), [content, chunkSize]);
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    LongContentShell,
+    {
+      className: `text-sm leading-6 whitespace-pre-wrap break-words ${className}`.trim(),
+      style,
+      children: chunks.map((chunk, index) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react.default.Fragment, { children: chunk }, index))
+    }
+  );
+});
 var StreamingText = (0, import_react.memo)(function StreamingText2({
   content,
   isStreaming = false,
   thinkingLabel = "Thinking...",
-  className = ""
+  className = "",
+  renderMarkdown = true,
+  plainTextChunkChars = 12e3,
+  contentStyle
 }) {
   const hasContent = content.trim().length > 0;
-  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,
+  const enableSyntaxHighlight = renderMarkdown && !isStreaming && hasCodeBlocks(content);
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
+    hasContent ? renderMarkdown ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      LongContentShell,
+      {
+        className: `prose prose-sm max-w-none dark:prose-invert break-words ${className}`.trim(),
+        style: contentStyle,
+        children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+          import_react_markdown.default,
+          {
+            remarkPlugins: remarkPluginsDefault,
+            rehypePlugins: enableSyntaxHighlight ? rehypePluginsDefault : rehypePluginsEmpty,
+            components: markdownComponents,
+            children: content
+          }
+        )
+      }
+    ) : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      PlainTextContent,
       {
-        remarkPlugins: remarkPluginsDefault,
-        rehypePlugins: isStreaming ? rehypePluginsEmpty : rehypePluginsDefault,
-        components: markdownComponents,
-        children: content
+        content,
+        className,
+        chunkSize: plainTextChunkChars,
+        style: contentStyle
       }
     ) : isStreaming ? (
       // Show thinking indicator while waiting for first token
@@ -798,6 +873,15 @@ var arePropsEqual = (prevProps, nextProps) => {
   if (prevProps.className !== nextProps.className) return false;
   if (prevProps.toolUsedLabel !== nextProps.toolUsedLabel) return false;
   if (prevProps.thinkingLabel !== nextProps.thinkingLabel) return false;
+  if (prevProps.showMoreLabel !== nextProps.showMoreLabel) return false;
+  if (prevProps.showLessLabel !== nextProps.showLessLabel) return false;
+  if (prevProps.collapseLongMessages !== nextProps.collapseLongMessages) return false;
+  if (prevProps.collapseLongMessagesForUserOnly !== nextProps.collapseLongMessagesForUserOnly) return false;
+  if (prevProps.longMessagePreviewChars !== nextProps.longMessagePreviewChars) return false;
+  if (prevProps.longMessageChunkChars !== nextProps.longMessageChunkChars) return false;
+  if (prevProps.renderUserMarkdown !== nextProps.renderUserMarkdown) return false;
+  if (prevProps.isExpanded !== nextProps.isExpanded) return false;
+  if (prevProps.onToggleExpanded !== nextProps.onToggleExpanded) return false;
   if (prevProps.isGrouped !== nextProps.isGrouped) return false;
   if (prevProps.assistantAvatar !== nextProps.assistantAvatar) return false;
   return true;
@@ -820,6 +904,15 @@ var Message = (0, import_react.memo)(({
   className = "",
   toolUsedLabel,
   thinkingLabel = "Thinking...",
+  showMoreLabel = "Show more",
+  showLessLabel = "Show less",
+  collapseLongMessages = false,
+  collapseLongMessagesForUserOnly = false,
+  longMessagePreviewChars = 4e3,
+  longMessageChunkChars = 12e3,
+  renderUserMarkdown = true,
+  isExpanded = false,
+  onToggleExpanded,
   isGrouped = false
 }) => {
   const [isEditing, setIsEditing] = (0, import_react.useState)(false);
@@ -829,6 +922,18 @@ var Message = (0, import_react.memo)(({
   const messageIsUser = isUser ?? message.role === "user";
   const canEdit = enableEdit && messageIsUser;
   const canRegenerate = enableRegenerate && !messageIsUser;
+  const normalizedPreviewChars = Math.max(longMessagePreviewChars, 1);
+  const normalizedChunkChars = Math.max(longMessageChunkChars, 1);
+  const previewOverride = typeof message.metadata?.previewContent === "string" ? message.metadata.previewContent : void 0;
+  const canCollapseMessage = collapseLongMessages && !message.isStreaming && message.content.length > normalizedPreviewChars && (!collapseLongMessagesForUserOnly || messageIsUser);
+  const isCollapsed = canCollapseMessage && !isExpanded;
+  const contentToRender = isCollapsed ? getCollapsedPreview(message.content, normalizedPreviewChars, previewOverride) : message.content;
+  const shouldRenderMarkdown = !isCollapsed && (!messageIsUser || renderUserMarkdown);
+  const shouldApplyLargeContentContainment = !isCollapsed && message.content.length > normalizedChunkChars;
+  const contentStyle = shouldApplyLargeContentContainment ? {
+    contentVisibility: "auto",
+    containIntrinsicSize: "1px 400px"
+  } : void 0;
   const handleCopy = async () => {
     try {
       await navigator.clipboard.writeText(message.content);
@@ -857,6 +962,9 @@ var Message = (0, import_react.memo)(({
   const handleRegenerate = () => {
     onAction?.({ action: "regenerate", messageId: message.id });
   };
+  const handleToggleExpanded = () => {
+    onToggleExpanded?.(message.id);
+  };
   const formatTime = (timestamp) => {
     return new Date(timestamp).toLocaleTimeString("pt-BR", {
       hour: "2-digit",
@@ -881,7 +989,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 overflow-hidden ${messageIsUser ? "rounded-lg p-3 bg-primary text-primary-foreground ml-auto max-w-[85%]" : "max-w-full"}`, 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,
@@ -907,12 +1015,26 @@ var Message = (0, import_react.memo)(({
             /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
               StreamingText,
               {
-                content: message.content,
+                content: contentToRender,
                 isStreaming: message.isStreaming,
                 thinkingLabel,
-                className: messageIsUser ? "[&_*]:text-right" : ""
+                renderMarkdown: shouldRenderMarkdown,
+                plainTextChunkChars: normalizedChunkChars,
+                contentStyle
               }
             ),
+            canCollapseMessage && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "mt-3", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+              Button,
+              {
+                type: "button",
+                variant: "ghost",
+                size: "sm",
+                className: "h-auto px-0 text-xs font-medium text-current hover:bg-transparent hover:opacity-80",
+                "aria-expanded": !isCollapsed,
+                onClick: handleToggleExpanded,
+                children: isCollapsed ? showMoreLabel : showLessLabel
+              }
+            ) }),
             message.attachments && message.attachments.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "mt-3 space-y-2", children: message.attachments.map((attachment, index) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(MediaRenderer, { attachment }, index)) })
           ] }),
           !isEditing && (showActions || copied) && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: `absolute -top-2 flex gap-1 ${messageIsUser ? "-left-2" : "-right-2"}`, children: [
@@ -3735,6 +3857,7 @@ var ChatUI = ({
   };
   const [inputValue, setInputValue] = (0, import_react7.useState)("");
   const [attachments, setAttachments] = (0, import_react7.useState)([]);
+  const [expandedMessageIds, setExpandedMessageIds] = (0, import_react7.useState)({});
   const [state, setState] = (0, import_react7.useState)({
     isRecording: false,
     selectedThreadId: currentThreadId,
@@ -3812,8 +3935,23 @@ var ChatUI = ({
       return () => clearTimeout(t);
     }
   }, [state.showSidebar, isMobile, config.customComponent]);
+  const prevMessageCountRef = (0, import_react7.useRef)(0);
   (0, import_react7.useEffect)(() => {
-    if (!state.isAtBottom || messages.length === 0) return;
+    if (messages.length === 0) {
+      prevMessageCountRef.current = 0;
+      return;
+    }
+    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;
@@ -3823,7 +3961,25 @@ var ChatUI = ({
         viewport.scrollTop = viewport.scrollHeight;
       }
     });
-  }, [messages, state.isAtBottom]);
+  }, [messages, state.isAtBottom, virtualizer]);
+  (0, import_react7.useEffect)(() => {
+    virtualizer.measure();
+  }, [expandedMessageIds, virtualizer]);
+  (0, import_react7.useEffect)(() => {
+    const validMessageIds = new Set(messages.map((message) => message.id));
+    setExpandedMessageIds((prev) => {
+      const activeIds = Object.keys(prev);
+      const staleIds = activeIds.filter((messageId) => !validMessageIds.has(messageId));
+      if (staleIds.length === 0) {
+        return prev;
+      }
+      const next = { ...prev };
+      staleIds.forEach((messageId) => {
+        delete next[messageId];
+      });
+      return next;
+    });
+  }, [messages]);
   const handleScroll = (0, import_react7.useCallback)((e) => {
     const { scrollTop, scrollHeight, clientHeight } = e.currentTarget;
     const isAtBottom = scrollHeight - scrollTop - clientHeight < 50;
@@ -3861,6 +4017,19 @@ var ChatUI = ({
         break;
     }
   }, [callbacks, createStateCallback]);
+  const handleToggleMessageExpansion = (0, import_react7.useCallback)((messageId) => {
+    setExpandedMessageIds((prev) => {
+      if (prev[messageId]) {
+        const next = { ...prev };
+        delete next[messageId];
+        return next;
+      }
+      return {
+        ...prev,
+        [messageId]: true
+      };
+    });
+  }, []);
   const handleCreateThread = (0, import_react7.useCallback)((title) => {
     callbacks.onCreateThread?.(title, createStateCallback());
   }, [callbacks, createStateCallback]);
@@ -3965,7 +4134,15 @@ var ChatUI = ({
     compactMode: config.ui.compactMode,
     onAction: handleMessageAction,
     toolUsedLabel: config.labels.toolUsed,
-    thinkingLabel: config.labels.thinking
+    thinkingLabel: config.labels.thinking,
+    showMoreLabel: config.labels.showMoreMessage,
+    showLessLabel: config.labels.showLessMessage,
+    collapseLongMessages: config.ui.collapseLongMessages,
+    collapseLongMessagesForUserOnly: config.ui.collapseLongMessagesForUserOnly,
+    longMessagePreviewChars: config.ui.longMessagePreviewChars,
+    longMessageChunkChars: config.ui.longMessageChunkChars,
+    renderUserMarkdown: config.ui.renderUserMarkdown,
+    onToggleExpanded: handleToggleMessageExpansion
   }), [
     user?.avatar,
     user?.name,
@@ -3980,7 +4157,15 @@ var ChatUI = ({
     config.features.enableToolCallsDisplay,
     config.labels.toolUsed,
     config.labels.thinking,
-    handleMessageAction
+    config.labels.showMoreMessage,
+    config.labels.showLessMessage,
+    config.ui.collapseLongMessages,
+    config.ui.collapseLongMessagesForUserOnly,
+    config.ui.longMessagePreviewChars,
+    config.ui.longMessageChunkChars,
+    config.ui.renderUserMarkdown,
+    handleMessageAction,
+    handleToggleMessageExpansion
   ]);
   const shouldShowAgentSelector = Boolean(
     config.agentSelector?.enabled && onSelectAgent && agentOptions.length > 0 && (!config.agentSelector?.hideIfSingle || agentOptions.length > 1)
@@ -4072,7 +4257,8 @@ var ChatUI = ({
                             {
                               message,
                               ...messageProps,
-                              isGrouped
+                              isGrouped,
+                              isExpanded: Boolean(expandedMessageIds[message.id])
                             }
                           ),
                           message.role === "assistant" && renderInlineSuggestions(message.id)