@adecore/agents-react 0.44.3 → 0.44.4

package/dist/chat/ui/Timeline.js

@@ -631,32 +631,57 @@ export function Timeline({
       viewport: element_2.clientHeight
     };
   }, [rows.length, totalSize, composerHeight, frame.height]);
+  /*
+   * A height that changes after the first paint (the composer taking its draft, a row measured again) is
+   * seen by an observer before the page paints, but the state it sets is drawn after that paint. The
+   * end is pinned here as well, so the page never paints the thread with its end out of view.
+   */
+  useLayoutEffect(() => {
+    const content = contentRef.current;
+    if (content === null || typeof ResizeObserver === 'undefined') {
+      return;
+    }
+    const observer_1 = new ResizeObserver(() => {
+      const element_3 = scrollRef.current;
+      if (!followRef.current || element_3 === null) {
+        return;
+      }
+      element_3.scrollTop = element_3.scrollHeight;
+      scrollGeometry.current = {
+        top: element_3.scrollTop,
+        height: element_3.scrollHeight,
+        viewport: element_3.clientHeight
+      };
+    });
+    observer_1.observe(content);
+    return () => observer_1.disconnect();
+  }, []);
   // Prepending history moves rows; keep the reader on the same row at the same height.
   useLayoutEffect(() => {
-    const element_3 = scrollRef.current;
+    const element_4 = scrollRef.current;
     const head = order?.[0];
     const moved = head !== headRef.current;
     headRef.current = head;
-    if (element_3 === null) {
+    if (element_4 === null) {
       return;
     }
     const anchor = anchorRef.current;
     const index_2 = moved && anchor !== null && !followRef.current ? rows.findIndex(row_9 => row_9.id === anchor.id) : -1;
     if (anchor !== null && index_2 !== -1) {
       virtualizer.getTotalSize();
-      element_3.scrollTop = virtualizer.measurementsCache[index_2].start - anchor.offset;
+      element_4.scrollTop = virtualizer.measurementsCache[index_2].start - anchor.offset;
       return;
     }
-    const row_10 = virtualizer.getVirtualItemForOffset(element_3.scrollTop);
+    const row_10 = virtualizer.getVirtualItemForOffset(element_4.scrollTop);
     anchorRef.current = row_10 === undefined ? null : {
       id: String(row_10.key),
-      offset: row_10.start - element_3.scrollTop
+      offset: row_10.start - element_4.scrollTop
     };
   });
   // Close to the top, the page before goes in; again after each page that left too little above the reader.
   useEffect(() => {
-    const element_4 = scrollRef.current;
-    if (element_4 !== null && wantsEarlier(element_4)) {
+    const element_5 = scrollRef.current;
+    if (element_5 !== null && wantsEarlier(element_5)) {
       loadEarlier();
     }
   }, [rows, loadEarlier, frame.height]);
@@ -698,7 +723,7 @@ export function Timeline({
     starts,
     inView
   };
-  const followStrip = element_5 => {
+  const followStrip = element_6 => {
     const {
       starts: current_0,
       inView: shown
@@ -708,7 +733,7 @@ export function Timeline({
     }
     const next = messagesInView({
       starts: current_0,
-      scrollTop: element_5.scrollTop,
+      scrollTop: element_6.scrollTop,
       visibleHeight: visibleHeightRef.current
     });
     if (next?.first !== shown.first || next?.last !== shown.last) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adecore/agents-react",
-  "version": "0.44.3",
+  "version": "0.44.4",
   "description": "React agent chat threads, composers, approvals, provider accounts and usage views.",
   "type": "module",
   "exports": {
@@ -72,11 +72,11 @@
     "test:visuals": "bun --config=integration.bunfig.toml --conditions=source test ./src/chat/visual-viewport.integration.test.ts"
   },
   "dependencies": {
-    "@adecore/agent-contracts": "0.44.3",
-    "@adecore/editor": "0.44.3",
-    "@adecore/editor-react": "0.44.3",
-    "@adecore/intelligent-ui": "0.44.3",
-    "@adecore/merge": "0.44.3",
+    "@adecore/agent-contracts": "0.44.4",
+    "@adecore/editor": "0.44.4",
+    "@adecore/editor-react": "0.44.4",
+    "@adecore/intelligent-ui": "0.44.4",
+    "@adecore/merge": "0.44.4",
     "@codemirror/commands": "^6.11.1",
     "@codemirror/language": "^6.13.1",
     "@codemirror/state": "^6.7.6",
@@ -100,14 +100,14 @@
     "zustand": "^5.0.16"
   },
   "peerDependencies": {
-    "@adecore/ui": "^0.44.3",
+    "@adecore/ui": "^0.44.4",
     "i18next": "^26.4.2",
     "react": "^19.3.0",
     "react-dom": "^19.3.0",
     "react-i18next": "^17.0.15"
   },
   "devDependencies": {
-    "@adecore/ui": "0.44.3",
+    "@adecore/ui": "0.44.4",
     "@types/bun": "^1.4.4",
     "@types/react": "^19.3.0",
     "@types/react-dom": "^19.3.0",

package/src/chat/ui/Timeline.tsx

@@ -480,6 +480,34 @@ export function Timeline({
         scrollGeometry.current = { top: element.scrollTop, height: element.scrollHeight, viewport: element.clientHeight };
     }, [rows.length, totalSize, composerHeight, frame.height]);
 
+    /*
+     * A height that changes after the first paint (the composer taking its draft, a row measured again) is
+     * seen by an observer before the page paints, but the state it sets is drawn after that paint. The
+     * end is pinned here as well, so the page never paints the thread with its end out of view.
+     */
+    useLayoutEffect(() => {
+        const content = contentRef.current;
+
+        if (content === null || typeof ResizeObserver === 'undefined') {
+            return;
+        }
+
+        const observer = new ResizeObserver(() => {
+            const element = scrollRef.current;
+
+            if (!followRef.current || element === null) {
+                return;
+            }
+
+            element.scrollTop = element.scrollHeight;
+            scrollGeometry.current = { top: element.scrollTop, height: element.scrollHeight, viewport: element.clientHeight };
+        });
+
+        observer.observe(content);
+
+        return () => observer.disconnect();
+    }, []);
+
     // Prepending history moves rows; keep the reader on the same row at the same height.
     useLayoutEffect(() => {
         const element = scrollRef.current;