@copilotz/chat-ui 0.1.9 → 0.1.10

package/dist/index.d.cts

@@ -117,6 +117,8 @@ interface ChatConfig {
         inputHelpText?: string;
         thinking?: string;
         defaultThreadName?: string;
+        showMoreMessage?: string;
+        showLessMessage?: string;
     };
     features?: {
         enableThreads?: boolean;
@@ -135,6 +137,11 @@ interface ChatConfig {
         showAvatars?: boolean;
         compactMode?: boolean;
         showWordCount?: boolean;
+        collapseLongMessages?: boolean;
+        collapseLongMessagesForUserOnly?: boolean;
+        longMessagePreviewChars?: number;
+        longMessageChunkChars?: number;
+        renderUserMarkdown?: boolean;
     };
     customComponent?: {
         label?: string;
@@ -359,6 +366,15 @@ interface MessageProps {
     className?: string;
     toolUsedLabel?: string;
     thinkingLabel?: string;
+    showMoreLabel?: string;
+    showLessLabel?: string;
+    collapseLongMessages?: boolean;
+    collapseLongMessagesForUserOnly?: boolean;
+    longMessagePreviewChars?: number;
+    longMessageChunkChars?: number;
+    renderUserMarkdown?: boolean;
+    isExpanded?: boolean;
+    onToggleExpanded?: (messageId: string) => void;
     /** When true, hides the avatar and name (for grouped consecutive messages from same sender) */
     isGrouped?: boolean;
 }
@@ -565,6 +581,11 @@ declare const configUtils: {
             showAvatars?: boolean;
             compactMode?: boolean;
             showWordCount?: boolean;
+            collapseLongMessages?: boolean;
+            collapseLongMessagesForUserOnly?: boolean;
+            longMessagePreviewChars?: number;
+            longMessageChunkChars?: number;
+            renderUserMarkdown?: boolean;
         };
     };
 };

package/dist/index.d.ts

@@ -117,6 +117,8 @@ interface ChatConfig {
         inputHelpText?: string;
         thinking?: string;
         defaultThreadName?: string;
+        showMoreMessage?: string;
+        showLessMessage?: string;
     };
     features?: {
         enableThreads?: boolean;
@@ -135,6 +137,11 @@ interface ChatConfig {
         showAvatars?: boolean;
         compactMode?: boolean;
         showWordCount?: boolean;
+        collapseLongMessages?: boolean;
+        collapseLongMessagesForUserOnly?: boolean;
+        longMessagePreviewChars?: number;
+        longMessageChunkChars?: number;
+        renderUserMarkdown?: boolean;
     };
     customComponent?: {
         label?: string;
@@ -359,6 +366,15 @@ interface MessageProps {
     className?: string;
     toolUsedLabel?: string;
     thinkingLabel?: string;
+    showMoreLabel?: string;
+    showLessLabel?: string;
+    collapseLongMessages?: boolean;
+    collapseLongMessagesForUserOnly?: boolean;
+    longMessagePreviewChars?: number;
+    longMessageChunkChars?: number;
+    renderUserMarkdown?: boolean;
+    isExpanded?: boolean;
+    onToggleExpanded?: (messageId: string) => void;
     /** When true, hides the avatar and name (for grouped consecutive messages from same sender) */
     isGrouped?: boolean;
 }
@@ -565,6 +581,11 @@ declare const configUtils: {
             showAvatars?: boolean;
             compactMode?: boolean;
             showWordCount?: boolean;
+            collapseLongMessages?: boolean;
+            collapseLongMessagesForUserOnly?: boolean;
+            longMessagePreviewChars?: number;
+            longMessageChunkChars?: number;
+            renderUserMarkdown?: boolean;
         };
     };
 };

package/dist/index.js

@@ -1,5 +1,5 @@
 // src/components/chat/ChatUI.tsx
-import { useState as useState8, useEffect as useEffect9, 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 useMemo4 } from "react";
 import { useVirtualizer } from "@tanstack/react-virtual";
 
 // src/config/chatConfig.ts
@@ -64,7 +64,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,
@@ -83,7 +85,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
@@ -238,7 +245,7 @@ var configUtils = {
 };
 
 // src/components/chat/Message.tsx
-import { useState, useRef, memo } from "react";
+import React, { useState, useRef, useMemo, memo } from "react";
 import ReactMarkdown from "react-markdown";
 import remarkGfm from "remark-gfm";
 import rehypeHighlight from "rehype-highlight";
@@ -569,21 +576,89 @@ var markdownComponents = {
 var remarkPluginsDefault = [remarkGfm];
 var rehypePluginsDefault = [rehypeHighlight];
 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 = memo(function LongContentShell2({ children, className, style }) {
+  return /* @__PURE__ */ jsx7("div", { className, style, children });
+});
+var PlainTextContent = memo(function PlainTextContent2({
+  content,
+  className = "",
+  chunkSize = 12e3,
+  style
+}) {
+  const chunks = useMemo(() => getPlainTextChunks(content, chunkSize), [content, chunkSize]);
+  return /* @__PURE__ */ jsx7(
+    LongContentShell,
+    {
+      className: `text-sm leading-6 whitespace-pre-wrap break-words ${className}`.trim(),
+      style,
+      children: chunks.map((chunk, index) => /* @__PURE__ */ jsx7(React.Fragment, { children: chunk }, index))
+    }
+  );
+});
 var StreamingText = memo(function StreamingText2({
   content,
   isStreaming = false,
   thinkingLabel = "Thinking...",
-  className = ""
+  className = "",
+  renderMarkdown = true,
+  plainTextChunkChars = 12e3,
+  contentStyle
 }) {
   const hasContent = content.trim().length > 0;
-  return /* @__PURE__ */ jsxs2("div", { className: `prose prose-sm max-w-none dark:prose-invert break-words ${className}`, children: [
-    hasContent ? /* @__PURE__ */ jsx7(
-      ReactMarkdown,
+  const enableSyntaxHighlight = renderMarkdown && !isStreaming && hasCodeBlocks(content);
+  return /* @__PURE__ */ jsxs2(Fragment, { children: [
+    hasContent ? renderMarkdown ? /* @__PURE__ */ jsx7(
+      LongContentShell,
+      {
+        className: `prose prose-sm max-w-none dark:prose-invert break-words ${className}`.trim(),
+        style: contentStyle,
+        children: /* @__PURE__ */ jsx7(
+          ReactMarkdown,
+          {
+            remarkPlugins: remarkPluginsDefault,
+            rehypePlugins: enableSyntaxHighlight ? rehypePluginsDefault : rehypePluginsEmpty,
+            components: markdownComponents,
+            children: content
+          }
+        )
+      }
+    ) : /* @__PURE__ */ jsx7(
+      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
@@ -753,6 +828,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;
@@ -775,6 +859,15 @@ var Message = 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] = useState(false);
@@ -784,6 +877,18 @@ var Message = 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);
@@ -812,6 +917,9 @@ var Message = 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",
@@ -862,11 +970,26 @@ var Message = memo(({
             /* @__PURE__ */ jsx7(
               StreamingText,
               {
-                content: message.content,
+                content: contentToRender,
                 isStreaming: message.isStreaming,
-                thinkingLabel
+                thinkingLabel,
+                renderMarkdown: shouldRenderMarkdown,
+                plainTextChunkChars: normalizedChunkChars,
+                contentStyle
               }
             ),
+            canCollapseMessage && /* @__PURE__ */ jsx7("div", { className: "mt-3", children: /* @__PURE__ */ jsx7(
+              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__ */ jsx7("div", { className: "mt-3 space-y-2", children: message.attachments.map((attachment, index) => /* @__PURE__ */ jsx7(MediaRenderer, { attachment }, index)) })
           ] }),
           !isEditing && (showActions || copied) && /* @__PURE__ */ jsxs2("div", { className: `absolute -top-2 flex gap-1 ${messageIsUser ? "-left-2" : "-right-2"}`, children: [
@@ -2588,7 +2711,7 @@ var ChatHeader = ({
 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 useEffect7, useMemo as useMemo2, useState as useState5 } from "react";
+import { createContext as createContext2, useCallback as useCallback2, useContext as useContext2, useEffect as useEffect7, useMemo as useMemo3, useState as useState5 } from "react";
 import { jsx as jsx19 } from "react/jsx-runtime";
 var Ctx = createContext2(void 0);
 var ChatUserContextProvider = ({ children, initial }) => {
@@ -2610,7 +2733,7 @@ var ChatUserContextProvider = ({ children, initial }) => {
       return { ...prev, ...partial, updatedAt: Date.now() };
     });
   }, []);
-  const value = useMemo2(() => ({
+  const value = useMemo3(() => ({
     context: ctx,
     setContext: setPartial,
     resetContext: () => setCtx({ updatedAt: Date.now() })
@@ -3735,7 +3858,7 @@ var ChatUI = ({
   initialInput,
   onInitialInputConsumed
 }) => {
-  const config = useMemo3(
+  const config = useMemo4(
     () => mergeConfig(defaultChatConfig, userConfig),
     [userConfig]
   );
@@ -3756,6 +3879,7 @@ var ChatUI = ({
   };
   const [inputValue, setInputValue] = useState8("");
   const [attachments, setAttachments] = useState8([]);
+  const [expandedMessageIds, setExpandedMessageIds] = useState8({});
   const [state, setState] = useState8({
     isRecording: false,
     selectedThreadId: currentThreadId,
@@ -3860,6 +3984,24 @@ var ChatUI = ({
       }
     });
   }, [messages, state.isAtBottom, virtualizer]);
+  useEffect9(() => {
+    virtualizer.measure();
+  }, [expandedMessageIds, virtualizer]);
+  useEffect9(() => {
+    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 = useCallback4((e) => {
     const { scrollTop, scrollHeight, clientHeight } = e.currentTarget;
     const isAtBottom = scrollHeight - scrollTop - clientHeight < 50;
@@ -3897,6 +4039,19 @@ var ChatUI = ({
         break;
     }
   }, [callbacks, createStateCallback]);
+  const handleToggleMessageExpansion = useCallback4((messageId) => {
+    setExpandedMessageIds((prev) => {
+      if (prev[messageId]) {
+        const next = { ...prev };
+        delete next[messageId];
+        return next;
+      }
+      return {
+        ...prev,
+        [messageId]: true
+      };
+    });
+  }, []);
   const handleCreateThread = useCallback4((title) => {
     callbacks.onCreateThread?.(title, createStateCallback());
   }, [callbacks, createStateCallback]);
@@ -3987,7 +4142,7 @@ var ChatUI = ({
       `message-skeleton-${index}`
     );
   }) });
-  const messageProps = useMemo3(() => ({
+  const messageProps = useMemo4(() => ({
     userAvatar: user?.avatar,
     userName: user?.name,
     assistantAvatar: assistant?.avatar,
@@ -4001,7 +4156,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,
@@ -4016,7 +4179,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)
@@ -4108,7 +4279,8 @@ var ChatUI = ({
                             {
                               message,
                               ...messageProps,
-                              isGrouped
+                              isGrouped,
+                              isExpanded: Boolean(expandedMessageIds[message.id])
                             }
                           ),
                           message.role === "assistant" && renderInlineSuggestions(message.id)