@copilotz/chat-ui 0.6.7 → 0.7.0

package/dist/index.js

@@ -757,8 +757,7 @@ var StreamingText = memo2(function StreamingText2({
   className = "",
   renderMarkdown = true,
   markdown,
-  plainTextChunkChars = 12e3,
-  contentStyle
+  plainTextChunkChars = 12e3
 }) {
   const hasContent = content.trim().length > 0;
   const enableSyntaxHighlight = renderMarkdown && !isStreaming && hasCodeBlocks(content);
@@ -788,7 +787,6 @@ var StreamingText = memo2(function StreamingText2({
       LongContentShell,
       {
         className: `prose prose-sm max-w-none dark:prose-invert break-words ${className}`.trim(),
-        style: contentStyle,
         children: /* @__PURE__ */ jsx8(
           ReactMarkdown,
           {
@@ -804,8 +802,7 @@ var StreamingText = memo2(function StreamingText2({
       {
         content,
         className,
-        chunkSize: plainTextChunkChars,
-        style: contentStyle
+        chunkSize: plainTextChunkChars
       }
     ) : null,
     isStreaming && hasContent && /* @__PURE__ */ jsx8("span", { className: "inline-block w-2 h-4 bg-primary animate-pulse ml-1" })
@@ -955,11 +952,6 @@ var Message = memo2(({
   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 horizontalOffsetClass = showAvatar ? messageIsUser ? compactMode ? "mr-9" : "mr-11" : compactMode ? "ml-9" : "ml-11" : "";
   const handleCopy = async () => {
     try {
@@ -1070,8 +1062,7 @@ var Message = memo2(({
                 isStreaming: message.isStreaming,
                 renderMarkdown: shouldRenderMarkdown,
                 markdown,
-                plainTextChunkChars: normalizedChunkChars,
-                contentStyle
+                plainTextChunkChars: normalizedChunkChars
               }
             ),
             canCollapseMessage && /* @__PURE__ */ jsx8("div", { className: "mt-3", children: /* @__PURE__ */ jsx8(
@@ -5350,6 +5341,7 @@ var ChatUI = ({
   const virtualizer = useVirtualizer({
     count: groupedMessages.length,
     getScrollElement: () => scrollAreaRef.current,
+    getItemKey: (index) => groupedMessages[index]?.id ?? index,
     estimateSize: () => 100,
     overscan: 5
   });
@@ -5418,8 +5410,29 @@ var ChatUI = ({
     });
   }, [groupedMessages, state.isAtBottom, virtualizer]);
   useEffect11(() => {
-    virtualizer.measure();
-  }, [expandedMessageIds, virtualizer]);
+    const viewport = scrollAreaRef.current;
+    if (!viewport) return;
+    let rafId;
+    const ro = new ResizeObserver(() => {
+      cancelAnimationFrame(rafId);
+      rafId = requestAnimationFrame(() => {
+        const elements = virtualizer.elementsCache;
+        if (elements) {
+          elements.forEach((node) => {
+            if (node.isConnected) {
+              virtualizer.observer?.unobserve(node);
+              virtualizer.observer?.observe(node);
+            }
+          });
+        }
+      });
+    });
+    ro.observe(viewport);
+    return () => {
+      cancelAnimationFrame(rafId);
+      ro.disconnect();
+    };
+  }, [virtualizer]);
   useEffect11(() => {
     prependSnapshotRef.current = null;
   }, [currentThreadId]);
@@ -5776,7 +5789,7 @@ var ChatUI = ({
                   className: "flex-1 min-h-0",
                   viewportClassName: "p-4 overscroll-contain",
                   onScrollCapture: handleScroll,
-                  style: { contain: "strict" },
+                  style: { contain: "content" },
                   children: /* @__PURE__ */ jsxs17("div", { className: "max-w-4xl mx-auto pb-4", children: [
                     groupedMessages.length > 0 && /* @__PURE__ */ jsx27("div", { className: "flex justify-center py-2", children: isLoadingOlderMessages ? /* @__PURE__ */ jsx27("span", { className: "text-xs text-muted-foreground", children: config.labels.loadingOlderMessages }) : hasMoreMessagesBefore ? /* @__PURE__ */ jsx27(
                       "button",