@copilotz/chat-ui 0.1.9 → 0.1.11

package/dist/index.cjs

@@ -43,6 +43,7 @@ __export(index_exports, {
   chatUtils: () => chatUtils,
   cn: () => cn,
   configUtils: () => configUtils,
+  createObjectUrlFromDataUrl: () => createObjectUrlFromDataUrl,
   defaultChatConfig: () => defaultChatConfig,
   featureFlags: () => featureFlags,
   formatDate: () => formatDate,
@@ -119,7 +120,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 +141,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 +301,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);
@@ -326,6 +334,24 @@ var formatDate = (timestamp, labels) => {
     });
   }
 };
+var createObjectUrlFromDataUrl = (dataUrl) => {
+  const match = dataUrl.match(/^data:(.+?);base64,(.+)$/s);
+  if (!match) {
+    return null;
+  }
+  try {
+    const [, mimeType, base64] = match;
+    const binary = atob(base64);
+    const bytes = new Uint8Array(binary.length);
+    for (let i = 0; i < binary.length; i += 1) {
+      bytes[i] = binary.charCodeAt(i);
+    }
+    const blob = new Blob([bytes], { type: mimeType || "application/octet-stream" });
+    return URL.createObjectURL(blob);
+  } catch {
+    return null;
+  }
+};
 
 // src/components/ui/button.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
@@ -614,21 +640,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
@@ -638,26 +732,22 @@ var StreamingText = (0, import_react.memo)(function StreamingText2({
   ] });
 });
 var MediaRenderer = (0, import_react.memo)(function MediaRenderer2({ attachment }) {
-  const [isPlaying, setIsPlaying] = (0, import_react.useState)(false);
-  const audioRef = (0, import_react.useRef)(null);
-  const videoRef = (0, import_react.useRef)(null);
-  const togglePlayback = () => {
-    if (attachment.kind === "audio" && audioRef.current) {
-      if (isPlaying) {
-        audioRef.current.pause();
-      } else {
-        audioRef.current.play();
-      }
-      setIsPlaying(!isPlaying);
-    } else if (attachment.kind === "video" && videoRef.current) {
-      if (isPlaying) {
-        videoRef.current.pause();
-      } else {
-        videoRef.current.play();
-      }
-      setIsPlaying(!isPlaying);
+  const [audioPlaybackSrc, setAudioPlaybackSrc] = (0, import_react.useState)(attachment.dataUrl);
+  (0, import_react.useEffect)(() => {
+    if (attachment.kind !== "audio" || !attachment.dataUrl.startsWith("data:")) {
+      setAudioPlaybackSrc(attachment.dataUrl);
+      return;
     }
-  };
+    const objectUrl = createObjectUrlFromDataUrl(attachment.dataUrl);
+    if (!objectUrl) {
+      setAudioPlaybackSrc(attachment.dataUrl);
+      return;
+    }
+    setAudioPlaybackSrc(objectUrl);
+    return () => {
+      URL.revokeObjectURL(objectUrl);
+    };
+  }, [attachment.kind, attachment.dataUrl]);
   const formatDuration = (ms) => {
     if (!ms) return "";
     const seconds = Math.floor(ms / 1e3);
@@ -682,13 +772,10 @@ var MediaRenderer = (0, import_react.memo)(function MediaRenderer2({ attachment
       return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "flex w-full max-w-md py-0 min-w-64 items-center gap-3", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
         "audio",
         {
-          ref: audioRef,
-          src: attachment.dataUrl,
-          onPlay: () => setIsPlaying(true),
-          onPause: () => setIsPlaying(false),
-          onEnded: () => setIsPlaying(false),
           className: "w-full mt-2",
-          controls: true
+          preload: "metadata",
+          controls: true,
+          children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("source", { src: audioPlaybackSrc, type: attachment.mimeType })
         }
       ) });
     case "video":
@@ -696,14 +783,10 @@ var MediaRenderer = (0, import_react.memo)(function MediaRenderer2({ attachment
         /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
           "video",
           {
-            ref: videoRef,
             src: attachment.dataUrl,
             poster: attachment.poster,
             controls: true,
-            className: "w-full h-auto",
-            onPlay: () => setIsPlaying(true),
-            onPause: () => setIsPlaying(false),
-            onEnded: () => setIsPlaying(false)
+            className: "w-full h-auto"
           }
         ),
         attachment.fileName && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "absolute bottom-0 left-0 right-0 bg-black/50 text-white text-xs p-2", children: attachment.fileName })
@@ -798,6 +881,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 +912,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 +930,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 +970,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",
@@ -907,11 +1023,26 @@ var Message = (0, import_react.memo)(({
             /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
               StreamingText,
               {
-                content: message.content,
+                content: contentToRender,
                 isStreaming: message.isStreaming,
-                thinkingLabel
+                thinkingLabel,
+                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: [
@@ -2732,7 +2863,23 @@ var FileUploadItem = (0, import_react5.memo)(function FileUploadItem2({ file, pr
 });
 var AttachmentPreview = (0, import_react5.memo)(function AttachmentPreview2({ attachment, onRemove }) {
   const [isPlaying, setIsPlaying] = (0, import_react5.useState)(false);
+  const [audioPlaybackSrc, setAudioPlaybackSrc] = (0, import_react5.useState)(attachment.dataUrl);
   const audioRef = (0, import_react5.useRef)(null);
+  (0, import_react5.useEffect)(() => {
+    if (attachment.kind !== "audio" || !attachment.dataUrl.startsWith("data:")) {
+      setAudioPlaybackSrc(attachment.dataUrl);
+      return;
+    }
+    const objectUrl = createObjectUrlFromDataUrl(attachment.dataUrl);
+    if (!objectUrl) {
+      setAudioPlaybackSrc(attachment.dataUrl);
+      return;
+    }
+    setAudioPlaybackSrc(objectUrl);
+    return () => {
+      URL.revokeObjectURL(objectUrl);
+    };
+  }, [attachment.kind, attachment.dataUrl]);
   const handlePlayPause = () => {
     if (audioRef.current) {
       if (isPlaying) {
@@ -2811,10 +2958,11 @@ var AttachmentPreview = (0, import_react5.memo)(function AttachmentPreview2({ at
         "audio",
         {
           ref: audioRef,
-          src: attachment.dataUrl,
           onPlay: () => setIsPlaying(true),
           onPause: () => setIsPlaying(false),
-          onEnded: () => setIsPlaying(false)
+          onEnded: () => setIsPlaying(false),
+          preload: "metadata",
+          children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("source", { src: audioPlaybackSrc, type: attachment.mimeType })
         }
       ),
       /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
@@ -3734,6 +3882,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,
@@ -3838,6 +3987,24 @@ var ChatUI = ({
       }
     });
   }, [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;
@@ -3875,6 +4042,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]);
@@ -3979,7 +4159,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,
@@ -3994,7 +4182,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)
@@ -4086,7 +4282,8 @@ var ChatUI = ({
                             {
                               message,
                               ...messageProps,
-                              isGrouped
+                              isGrouped,
+                              isExpanded: Boolean(expandedMessageIds[message.id])
                             }
                           ),
                           message.role === "assistant" && renderInlineSuggestions(message.id)
@@ -4477,6 +4674,7 @@ var chatUtils = {
   chatUtils,
   cn,
   configUtils,
+  createObjectUrlFromDataUrl,
   defaultChatConfig,
   featureFlags,
   formatDate,