@copilotz/chat-ui 0.1.9 → 0.1.11

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 useEffect10, useRef as useRef6, 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, useMemo, useEffect, memo } from "react";
 import ReactMarkdown from "react-markdown";
 import remarkGfm from "remark-gfm";
 import rehypeHighlight from "rehype-highlight";
@@ -271,6 +278,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
 import { jsx } from "react/jsx-runtime";
@@ -569,21 +594,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,
       {
-        remarkPlugins: remarkPluginsDefault,
-        rehypePlugins: isStreaming ? rehypePluginsEmpty : rehypePluginsDefault,
-        components: markdownComponents,
-        children: content
+        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,
+      {
+        content,
+        className,
+        chunkSize: plainTextChunkChars,
+        style: contentStyle
       }
     ) : isStreaming ? (
       // Show thinking indicator while waiting for first token
@@ -593,26 +686,22 @@ var StreamingText = memo(function StreamingText2({
   ] });
 });
 var MediaRenderer = memo(function MediaRenderer2({ attachment }) {
-  const [isPlaying, setIsPlaying] = useState(false);
-  const audioRef = useRef(null);
-  const videoRef = 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] = useState(attachment.dataUrl);
+  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);
@@ -637,13 +726,10 @@ var MediaRenderer = memo(function MediaRenderer2({ attachment }) {
       return /* @__PURE__ */ jsx7("div", { className: "flex w-full max-w-md py-0 min-w-64 items-center gap-3", children: /* @__PURE__ */ jsx7(
         "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__ */ jsx7("source", { src: audioPlaybackSrc, type: attachment.mimeType })
         }
       ) });
     case "video":
@@ -651,14 +737,10 @@ var MediaRenderer = memo(function MediaRenderer2({ attachment }) {
         /* @__PURE__ */ jsx7(
           "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__ */ jsx7("div", { className: "absolute bottom-0 left-0 right-0 bg-black/50 text-white text-xs p-2", children: attachment.fileName })
@@ -753,6 +835,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 +866,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 +884,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 +924,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 +977,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: [
@@ -917,7 +1047,7 @@ var Message = memo(({
 }, arePropsEqual);
 
 // src/components/chat/Sidebar.tsx
-import { useState as useState4, useRef as useRef5, useEffect as useEffect6 } from "react";
+import { useState as useState4, useRef as useRef4, useEffect as useEffect7 } from "react";
 
 // src/components/ui/input.tsx
 import { jsx as jsx8 } from "react/jsx-runtime";
@@ -2166,9 +2296,9 @@ var Sidebar2 = ({
   const [deleteThreadId, setDeleteThreadId] = useState4(null);
   const [editingThreadId, setEditingThreadId] = useState4(null);
   const [editTitle, setEditTitle] = useState4("");
-  const inputRef = useRef5(null);
+  const inputRef = useRef4(null);
   const { setOpen } = useSidebar();
-  useEffect6(() => {
+  useEffect7(() => {
     if (editingThreadId && inputRef.current) {
       inputRef.current.focus();
       inputRef.current.select();
@@ -2585,10 +2715,10 @@ var ChatHeader = ({
 };
 
 // src/components/chat/ChatInput.tsx
-import { useState as useState6, useRef as useRef6, useCallback as useCallback3, useEffect as useEffect8, memo as memo2 } from "react";
+import { useState as useState6, useRef as useRef5, useCallback as useCallback3, useEffect as useEffect9, 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 useEffect8, 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 }) => {
@@ -2596,7 +2726,7 @@ var ChatUserContextProvider = ({ children, initial }) => {
     updatedAt: Date.now(),
     ...initial ?? {}
   }));
-  useEffect7(() => {
+  useEffect8(() => {
     if (!initial) return;
     setCtx((prev) => ({
       ...prev,
@@ -2610,7 +2740,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() })
@@ -2662,8 +2792,8 @@ import {
   FileText,
   X as X2,
   Square,
-  Play as Play2,
-  Pause as Pause2,
+  Play,
+  Pause,
   Loader2
 } from "lucide-react";
 import { Fragment as Fragment4, jsx as jsx21, jsxs as jsxs11 } from "react/jsx-runtime";
@@ -2728,7 +2858,23 @@ var FileUploadItem = memo2(function FileUploadItem2({ file, progress, onCancel }
 });
 var AttachmentPreview = memo2(function AttachmentPreview2({ attachment, onRemove }) {
   const [isPlaying, setIsPlaying] = useState6(false);
-  const audioRef = useRef6(null);
+  const [audioPlaybackSrc, setAudioPlaybackSrc] = useState6(attachment.dataUrl);
+  const audioRef = useRef5(null);
+  useEffect9(() => {
+    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) {
@@ -2796,7 +2942,7 @@ var AttachmentPreview = memo2(function AttachmentPreview2({ attachment, onRemove
           size: "icon",
           className: "h-8 w-8",
           onClick: handlePlayPause,
-          children: isPlaying ? /* @__PURE__ */ jsx21(Pause2, { className: "h-3 w-3" }) : /* @__PURE__ */ jsx21(Play2, { className: "h-3 w-3" })
+          children: isPlaying ? /* @__PURE__ */ jsx21(Pause, { className: "h-3 w-3" }) : /* @__PURE__ */ jsx21(Play, { className: "h-3 w-3" })
         }
       ),
       /* @__PURE__ */ jsxs11("div", { className: "flex-1", children: [
@@ -2807,10 +2953,11 @@ var AttachmentPreview = memo2(function AttachmentPreview2({ attachment, onRemove
         "audio",
         {
           ref: audioRef,
-          src: attachment.dataUrl,
           onPlay: () => setIsPlaying(true),
           onPause: () => setIsPlaying(false),
-          onEnded: () => setIsPlaying(false)
+          onEnded: () => setIsPlaying(false),
+          preload: "metadata",
+          children: /* @__PURE__ */ jsx21("source", { src: audioPlaybackSrc, type: attachment.mimeType })
         }
       ),
       /* @__PURE__ */ jsx21(
@@ -2905,13 +3052,13 @@ var ChatInput = memo2(function ChatInput2({
   const { setContext } = useChatUserContext();
   const [recordingDuration, setRecordingDuration] = useState6(0);
   const [uploadProgress, setUploadProgress] = useState6(/* @__PURE__ */ new Map());
-  const textareaRef = useRef6(null);
-  const fileInputRef = useRef6(null);
-  const mediaRecorderRef = useRef6(null);
-  const recordingStartTime = useRef6(0);
-  const recordingInterval = useRef6(null);
-  const mediaStreamRef = useRef6(null);
-  useEffect8(() => {
+  const textareaRef = useRef5(null);
+  const fileInputRef = useRef5(null);
+  const mediaRecorderRef = useRef5(null);
+  const recordingStartTime = useRef5(0);
+  const recordingInterval = useRef5(null);
+  const mediaStreamRef = useRef5(null);
+  useEffect9(() => {
     return () => {
       if (mediaStreamRef.current) {
         mediaStreamRef.current.getTracks().forEach((track) => track.stop());
@@ -3735,7 +3882,7 @@ var ChatUI = ({
   initialInput,
   onInitialInputConsumed
 }) => {
-  const config = useMemo3(
+  const config = useMemo4(
     () => mergeConfig(defaultChatConfig, userConfig),
     [userConfig]
   );
@@ -3756,6 +3903,7 @@ var ChatUI = ({
   };
   const [inputValue, setInputValue] = useState8("");
   const [attachments, setAttachments] = useState8([]);
+  const [expandedMessageIds, setExpandedMessageIds] = useState8({});
   const [state, setState] = useState8({
     isRecording: false,
     selectedThreadId: currentThreadId,
@@ -3768,30 +3916,30 @@ var ChatUI = ({
     isSidebarCollapsed: false
     // No longer used for main sidebar
   });
-  useEffect9(() => {
+  useEffect10(() => {
     if (currentThreadId !== state.selectedThreadId) {
       setState((prev) => ({ ...prev, selectedThreadId: currentThreadId }));
     }
   }, [currentThreadId]);
-  const initialInputApplied = useRef7(false);
-  const initialInputConsumedRef = useRef7(false);
-  useEffect9(() => {
+  const initialInputApplied = useRef6(false);
+  const initialInputConsumedRef = useRef6(false);
+  useEffect10(() => {
     if (initialInput && !initialInputApplied.current) {
       setInputValue(initialInput);
       initialInputApplied.current = true;
     }
   }, [initialInput]);
-  const scrollAreaRef = useRef7(null);
-  const stateRef = useRef7(state);
-  const inputValueRef = useRef7(inputValue);
-  const attachmentsRef = useRef7(attachments);
-  useEffect9(() => {
+  const scrollAreaRef = useRef6(null);
+  const stateRef = useRef6(state);
+  const inputValueRef = useRef6(inputValue);
+  const attachmentsRef = useRef6(attachments);
+  useEffect10(() => {
     stateRef.current = state;
   }, [state]);
-  useEffect9(() => {
+  useEffect10(() => {
     inputValueRef.current = inputValue;
   }, [inputValue]);
-  useEffect9(() => {
+  useEffect10(() => {
     attachmentsRef.current = attachments;
   }, [attachments]);
   const [isCustomMounted, setIsCustomMounted] = useState8(false);
@@ -3814,7 +3962,7 @@ var ChatUI = ({
     []
     // No dependencies - uses refs for latest state
   );
-  useEffect9(() => {
+  useEffect10(() => {
     const checkMobile = () => {
       setIsMobile(globalThis.innerWidth < 1024);
     };
@@ -3822,7 +3970,7 @@ var ChatUI = ({
     globalThis.addEventListener("resize", checkMobile);
     return () => globalThis.removeEventListener("resize", checkMobile);
   }, []);
-  useEffect9(() => {
+  useEffect10(() => {
     if (!isMobile || !config.customComponent?.component) return;
     if (state.showSidebar) {
       setIsCustomMounted(true);
@@ -3833,8 +3981,8 @@ var ChatUI = ({
       return () => clearTimeout(t);
     }
   }, [state.showSidebar, isMobile, config.customComponent]);
-  const prevMessageCountRef = useRef7(0);
-  useEffect9(() => {
+  const prevMessageCountRef = useRef6(0);
+  useEffect10(() => {
     if (messages.length === 0) {
       prevMessageCountRef.current = 0;
       return;
@@ -3860,6 +4008,24 @@ var ChatUI = ({
       }
     });
   }, [messages, state.isAtBottom, virtualizer]);
+  useEffect10(() => {
+    virtualizer.measure();
+  }, [expandedMessageIds, virtualizer]);
+  useEffect10(() => {
+    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 +4063,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 +4166,7 @@ var ChatUI = ({
       `message-skeleton-${index}`
     );
   }) });
-  const messageProps = useMemo3(() => ({
+  const messageProps = useMemo4(() => ({
     userAvatar: user?.avatar,
     userName: user?.name,
     assistantAvatar: assistant?.avatar,
@@ -4001,7 +4180,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 +4203,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 +4303,8 @@ var ChatUI = ({
                             {
                               message,
                               ...messageProps,
-                              isGrouped
+                              isGrouped,
+                              isExpanded: Boolean(expandedMessageIds[message.id])
                             }
                           ),
                           message.role === "assistant" && renderInlineSuggestions(message.id)
@@ -4197,7 +4393,7 @@ var ChatUI = ({
 };
 
 // src/components/chat/ThreadManager.tsx
-import { useState as useState9, useRef as useRef8, useEffect as useEffect10 } from "react";
+import { useState as useState9, useRef as useRef7, useEffect as useEffect11 } from "react";
 import {
   Plus as Plus4,
   MessageSquare as MessageSquare2,
@@ -4216,8 +4412,8 @@ import { Fragment as Fragment6, jsx as jsx25, jsxs as jsxs15 } from "react/jsx-r
 var ThreadItem = ({ thread, isActive, config, onSelect, onRename, onDelete, onArchive }) => {
   const [isEditing, setIsEditing] = useState9(false);
   const [editTitle, setEditTitle] = useState9(thread.title);
-  const inputRef = useRef8(null);
-  useEffect10(() => {
+  const inputRef = useRef7(null);
+  useEffect11(() => {
     if (isEditing && inputRef.current) {
       inputRef.current.focus();
       inputRef.current.select();
@@ -4511,6 +4707,7 @@ export {
   chatUtils,
   cn,
   configUtils,
+  createObjectUrlFromDataUrl,
   defaultChatConfig,
   featureFlags,
   formatDate,