@copilotz/chat-ui 0.6.7 → 0.7.0

package/dist/index.cjs

@@ -786,8 +786,7 @@ var StreamingText = (0, import_react2.memo)(function StreamingText2({
   className = "",
   renderMarkdown = true,
   markdown,
-  plainTextChunkChars = 12e3,
-  contentStyle
+  plainTextChunkChars = 12e3
 }) {
   const hasContent = content.trim().length > 0;
   const enableSyntaxHighlight = renderMarkdown && !isStreaming && hasCodeBlocks(content);
@@ -817,7 +816,6 @@ var StreamingText = (0, import_react2.memo)(function StreamingText2({
       LongContentShell,
       {
         className: `prose prose-sm max-w-none dark:prose-invert break-words ${className}`.trim(),
-        style: contentStyle,
         children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
           import_react_markdown.default,
           {
@@ -833,8 +831,7 @@ var StreamingText = (0, import_react2.memo)(function StreamingText2({
       {
         content,
         className,
-        chunkSize: plainTextChunkChars,
-        style: contentStyle
+        chunkSize: plainTextChunkChars
       }
     ) : null,
     isStreaming && hasContent && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "inline-block w-2 h-4 bg-primary animate-pulse ml-1" })
@@ -984,11 +981,6 @@ var Message = (0, import_react2.memo)(({
   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 {
@@ -1099,8 +1091,7 @@ var Message = (0, import_react2.memo)(({
                 isStreaming: message.isStreaming,
                 renderMarkdown: shouldRenderMarkdown,
                 markdown,
-                plainTextChunkChars: normalizedChunkChars,
-                contentStyle
+                plainTextChunkChars: normalizedChunkChars
               }
             ),
             canCollapseMessage && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "mt-3", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
@@ -5304,6 +5295,7 @@ var ChatUI = ({
   const virtualizer = (0, import_react_virtual.useVirtualizer)({
     count: groupedMessages.length,
     getScrollElement: () => scrollAreaRef.current,
+    getItemKey: (index) => groupedMessages[index]?.id ?? index,
     estimateSize: () => 100,
     overscan: 5
   });
@@ -5372,8 +5364,29 @@ var ChatUI = ({
     });
   }, [groupedMessages, state.isAtBottom, virtualizer]);
   (0, import_react10.useEffect)(() => {
-    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]);
   (0, import_react10.useEffect)(() => {
     prependSnapshotRef.current = null;
   }, [currentThreadId]);
@@ -5730,7 +5743,7 @@ var ChatUI = ({
                   className: "flex-1 min-h-0",
                   viewportClassName: "p-4 overscroll-contain",
                   onScrollCapture: handleScroll,
-                  style: { contain: "strict" },
+                  style: { contain: "content" },
                   children: /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "max-w-4xl mx-auto pb-4", children: [
                     groupedMessages.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "flex justify-center py-2", children: isLoadingOlderMessages ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "text-xs text-muted-foreground", children: config.labels.loadingOlderMessages }) : hasMoreMessagesBefore ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
                       "button",