@agentscope-ai/chat 1.2.0-beta.1792117572949 → 1.2.0-beta.1792133067831

package/components/AgentScopeRuntimeWebUI/core/Chat/MessageList/UserMessageAnchors/index.tsx

@@ -27,6 +27,8 @@ import { listenForScrollIntent } from './scrollIntent';
 import {
   createTargetLayout,
   isMeasurableRect,
+  observeMessageLayout,
+  scheduleAfterLayout,
   waitForMeasurableTarget,
 } from './targetLayout';
 import type { UserMessageAnchor, UserMessageAnchorsProps } from './types';
@@ -419,6 +421,7 @@ export default function UserMessageAnchors(props: UserMessageAnchorsProps) {
   const highlightFrameRef = React.useRef<number | undefined>();
   const highlightTimeoutRef = React.useRef<number | undefined>();
   const scrollSequenceRef = React.useRef(0);
+  const cancelLayoutUpdateRef = React.useRef<(() => void) | undefined>();
   const cancelNavigationRef = React.useRef<
     ((measure?: boolean) => void) | undefined
   >();
@@ -590,13 +593,9 @@ export default function UserMessageAnchors(props: UserMessageAnchorsProps) {
     const scrollEl = root?.querySelector(
       `.${scrollContainerClassName}`,
     ) as HTMLElement | null;
-    const resizeObserver =
-      typeof ResizeObserver !== 'undefined'
-        ? new ResizeObserver(updateAnchors)
-        : undefined;
-
-    if (scrollEl) resizeObserver?.observe(scrollEl);
-    if (anchorTrackRef.current) resizeObserver?.observe(anchorTrackRef.current);
+    const disconnectResizeObserver = scrollEl
+      ? observeMessageLayout(scrollEl, anchorTrackRef.current, updateAnchors)
+      : () => {};
     const mutationObserver =
       scrollEl && typeof MutationObserver !== 'undefined'
         ? new MutationObserver(updateAnchors)
@@ -612,7 +611,7 @@ export default function UserMessageAnchors(props: UserMessageAnchorsProps) {
 
     return () => {
       cancelPendingAnchorPositionUpdate();
-      resizeObserver?.disconnect();
+      disconnectResizeObserver();
       mutationObserver?.disconnect();
       scrollEl?.removeEventListener('scroll', updateAnchors);
       scrollEl?.removeEventListener('load', updateAnchors, true);
@@ -633,6 +632,8 @@ export default function UserMessageAnchors(props: UserMessageAnchorsProps) {
   const handleAnchorClick = useCallback(
     async (messageId: string) => {
       cancelNavigationRef.current?.(false);
+      cancelLayoutUpdateRef.current?.();
+      cancelLayoutUpdateRef.current = undefined;
       const root = anchorTrackRef.current?.closest(`.${prefixCls}`);
       const scrollEl = root?.querySelector(
         `.${scrollContainerClassName}`,
@@ -647,7 +648,7 @@ export default function UserMessageAnchors(props: UserMessageAnchorsProps) {
       const targetLayout = createTargetLayout();
       let highlightedTarget: HTMLElement | undefined;
       let removeScrollIntentListener = () => {};
-      const finishNavigation = () => {
+      const finishNavigation = (keepActiveLock = false) => {
         removeScrollIntentListener();
         if (highlightFrameRef.current) {
           window.cancelAnimationFrame(highlightFrameRef.current);
@@ -662,7 +663,7 @@ export default function UserMessageAnchors(props: UserMessageAnchorsProps) {
         );
         targetLayout.restore();
         cancelNavigationRef.current = undefined;
-        activeAnchorLockRef.current = undefined;
+        if (!keepActiveLock) activeAnchorLockRef.current = undefined;
       };
       const cancelNavigation = (measure = true) => {
         if (!isCurrent()) return;
@@ -727,8 +728,15 @@ export default function UserMessageAnchors(props: UserMessageAnchorsProps) {
           targetAtTop.classList.add(`${prefixCls}-anchor-target-active`);
           highlightTimeoutRef.current = window.setTimeout(() => {
             if (!isCurrent()) return;
-            finishNavigation();
-            measureAnchors();
+            finishNavigation(true);
+            // Keep the selected message through the transient intrinsic size,
+            // then hand active tracking back to settled geometry after paint.
+            cancelLayoutUpdateRef.current = scheduleAfterLayout(() => {
+              if (!isCurrent()) return;
+              cancelLayoutUpdateRef.current = undefined;
+              activeAnchorLockRef.current = undefined;
+              measureAnchors();
+            });
           }, TARGET_ACTIVE_DURATION);
         });
       } catch {
@@ -750,6 +758,8 @@ export default function UserMessageAnchors(props: UserMessageAnchorsProps) {
   React.useEffect(
     () => () => {
       cancelNavigationRef.current?.(false);
+      cancelLayoutUpdateRef.current?.();
+      cancelLayoutUpdateRef.current = undefined;
       scrollSequenceRef.current += 1;
       if (highlightFrameRef.current) {
         window.cancelAnimationFrame(highlightFrameRef.current);

package/components/AgentScopeRuntimeWebUI/core/Chat/MessageList/UserMessageAnchors/targetLayout.ts

@@ -60,3 +60,35 @@ export async function waitForMeasurableTarget(
   }
   return null;
 }
+
+/** The scroll viewport can stay fixed while skipped bubbles regain their size. */
+export function observeMessageLayout(
+  scrollEl: HTMLElement,
+  trackEl: HTMLElement | null,
+  onLayout: () => void,
+) {
+  if (typeof ResizeObserver === 'undefined') return () => {};
+  const observer = new ResizeObserver(onLayout);
+  observer.observe(scrollEl);
+  if (trackEl) observer.observe(trackEl);
+  scrollEl
+    .querySelectorAll<HTMLElement>('[data-role][id]')
+    .forEach((target) => {
+      observer.observe(target);
+    });
+  return () => observer.disconnect();
+}
+
+/** content-visibility's remembered intrinsic size settles after the next paint. */
+export function scheduleAfterLayout(onLayout: () => void) {
+  let frame: number | undefined = window.requestAnimationFrame(() => {
+    frame = window.requestAnimationFrame(() => {
+      frame = undefined;
+      onLayout();
+    });
+  });
+  return () => {
+    if (frame !== undefined) window.cancelAnimationFrame(frame);
+    frame = undefined;
+  };
+}

package/lib/AgentScopeRuntimeWebUI/core/Chat/MessageList/UserMessageAnchors/index.js

@@ -20,7 +20,7 @@ import React, { useCallback, useMemo, useState } from 'react';
 import { useTranslation } from "../../../Context/ChatAnywhereI18nContext";
 import { areAnchorPositionsEqual, clamp, getActiveAnchorId, getAnchorTimeText, getMessageElementInScrollContainer, getMessageElementMapInScrollContainer, getScrollVisibleTopOffset, getTargetTopOffset, getUserMessageAnchor, getUserMessageAnchorBadgeText, getUserMessageAnchorMinCount, getUserMessageAnchorMinGap, scrollTargetIntoContainerTop } from "./helpers";
 import { listenForScrollIntent } from "./scrollIntent";
-import { createTargetLayout, isMeasurableRect, waitForMeasurableTarget } from "./targetLayout";
+import { createTargetLayout, isMeasurableRect, observeMessageLayout, scheduleAfterLayout, waitForMeasurableTarget } from "./targetLayout";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 import { jsx as _jsx } from "react/jsx-runtime";
 var ANCHOR_CONTENT_GAP = 24;
@@ -382,6 +382,7 @@ export default function UserMessageAnchors(props) {
   var highlightFrameRef = React.useRef();
   var highlightTimeoutRef = React.useRef();
   var scrollSequenceRef = React.useRef(0);
+  var cancelLayoutUpdateRef = React.useRef();
   var cancelNavigationRef = React.useRef();
   var _useState = useState({}),
     _useState2 = _slicedToArray(_useState, 2),
@@ -527,9 +528,7 @@ export default function UserMessageAnchors(props) {
     measureAnchors();
     var root = (_anchorTrackRef$curre3 = anchorTrackRef.current) === null || _anchorTrackRef$curre3 === void 0 ? void 0 : _anchorTrackRef$curre3.closest(".".concat(prefixCls));
     var scrollEl = root === null || root === void 0 ? void 0 : root.querySelector(".".concat(scrollContainerClassName));
-    var resizeObserver = typeof ResizeObserver !== 'undefined' ? new ResizeObserver(updateAnchors) : undefined;
-    if (scrollEl) resizeObserver === null || resizeObserver === void 0 || resizeObserver.observe(scrollEl);
-    if (anchorTrackRef.current) resizeObserver === null || resizeObserver === void 0 || resizeObserver.observe(anchorTrackRef.current);
+    var disconnectResizeObserver = scrollEl ? observeMessageLayout(scrollEl, anchorTrackRef.current, updateAnchors) : function () {};
     var mutationObserver = scrollEl && typeof MutationObserver !== 'undefined' ? new MutationObserver(updateAnchors) : undefined;
     mutationObserver === null || mutationObserver === void 0 || mutationObserver.observe(scrollEl, {
       childList: true,
@@ -543,7 +542,7 @@ export default function UserMessageAnchors(props) {
     window.addEventListener('resize', updateAnchors);
     return function () {
       cancelPendingAnchorPositionUpdate();
-      resizeObserver === null || resizeObserver === void 0 || resizeObserver.disconnect();
+      disconnectResizeObserver();
       mutationObserver === null || mutationObserver === void 0 || mutationObserver.disconnect();
       scrollEl === null || scrollEl === void 0 || scrollEl.removeEventListener('scroll', updateAnchors);
       scrollEl === null || scrollEl === void 0 || scrollEl.removeEventListener('load', updateAnchors, true);
@@ -552,20 +551,22 @@ export default function UserMessageAnchors(props) {
   }, [anchorIdsKey, cancelPendingAnchorPositionUpdate, measureAnchors, prefixCls, renderedItemsKey, scrollContainerClassName, updateAnchors, variant, visible]);
   var handleAnchorClick = useCallback( /*#__PURE__*/function () {
     var _ref3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(messageId) {
-      var _cancelNavigationRef$, _anchorTrackRef$curre4;
+      var _cancelNavigationRef$, _cancelLayoutUpdateRe, _anchorTrackRef$curre4;
       var root, scrollEl, scrollSequence, isCurrent, targetLayout, highlightedTarget, removeScrollIntentListener, finishNavigation, cancelNavigation, target, targetAtTop;
       return _regeneratorRuntime().wrap(function _callee$(_context) {
         while (1) switch (_context.prev = _context.next) {
           case 0:
             (_cancelNavigationRef$ = cancelNavigationRef.current) === null || _cancelNavigationRef$ === void 0 || _cancelNavigationRef$.call(cancelNavigationRef, false);
+            (_cancelLayoutUpdateRe = cancelLayoutUpdateRef.current) === null || _cancelLayoutUpdateRe === void 0 || _cancelLayoutUpdateRe.call(cancelLayoutUpdateRef);
+            cancelLayoutUpdateRef.current = undefined;
             root = (_anchorTrackRef$curre4 = anchorTrackRef.current) === null || _anchorTrackRef$curre4 === void 0 ? void 0 : _anchorTrackRef$curre4.closest(".".concat(prefixCls));
             scrollEl = root === null || root === void 0 ? void 0 : root.querySelector(".".concat(scrollContainerClassName));
             if (scrollEl) {
-              _context.next = 5;
+              _context.next = 7;
               break;
             }
             return _context.abrupt("return");
-          case 5:
+          case 7:
             scrollSequence = ++scrollSequenceRef.current;
             isCurrent = function isCurrent() {
               return scrollSequenceRef.current === scrollSequence;
@@ -576,6 +577,7 @@ export default function UserMessageAnchors(props) {
             removeScrollIntentListener = function removeScrollIntentListener() {};
             finishNavigation = function finishNavigation() {
               var _highlightedTarget;
+              var keepActiveLock = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
               removeScrollIntentListener();
               if (highlightFrameRef.current) {
                 window.cancelAnimationFrame(highlightFrameRef.current);
@@ -588,7 +590,7 @@ export default function UserMessageAnchors(props) {
               (_highlightedTarget = highlightedTarget) === null || _highlightedTarget === void 0 || _highlightedTarget.classList.remove("".concat(prefixCls, "-anchor-target-active"));
               targetLayout.restore();
               cancelNavigationRef.current = undefined;
-              activeAnchorLockRef.current = undefined;
+              if (!keepActiveLock) activeAnchorLockRef.current = undefined;
             };
             cancelNavigation = function cancelNavigation() {
               var measure = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
@@ -610,55 +612,55 @@ export default function UserMessageAnchors(props) {
             removeScrollIntentListener = listenForScrollIntent(scrollEl, function () {
               return cancelNavigation();
             });
-            _context.prev = 15;
-            _context.next = 18;
+            _context.prev = 17;
+            _context.next = 20;
             return onEnsureMessageVisible(messageId);
-          case 18:
+          case 20:
             if (isCurrent()) {
-              _context.next = 20;
+              _context.next = 22;
               break;
             }
             return _context.abrupt("return");
-          case 20:
+          case 22:
             cancelPendingAnchorPositionUpdate();
-            _context.next = 23;
+            _context.next = 25;
             return waitForMeasurableTarget(function () {
               return getMessageElementInScrollContainer(scrollEl, messageId);
             }, targetLayout.prepare, isCurrent, waitForNextFrame);
-          case 23:
+          case 25:
             target = _context.sent;
             if (isCurrent()) {
-              _context.next = 26;
+              _context.next = 28;
               break;
             }
             return _context.abrupt("return");
-          case 26:
+          case 28:
             if (target) {
-              _context.next = 30;
+              _context.next = 32;
               break;
             }
             finishNavigation();
             measureAnchors();
             return _context.abrupt("return");
-          case 30:
-            _context.next = 32;
-            return scrollTargetIntoContainerTopAndSettle(scrollEl, messageId, target, isCurrent, targetLayout.prepare);
           case 32:
+            _context.next = 34;
+            return scrollTargetIntoContainerTopAndSettle(scrollEl, messageId, target, isCurrent, targetLayout.prepare);
+          case 34:
             targetAtTop = _context.sent;
             if (isCurrent()) {
-              _context.next = 35;
+              _context.next = 37;
               break;
             }
             return _context.abrupt("return");
-          case 35:
+          case 37:
             if (targetAtTop) {
-              _context.next = 39;
+              _context.next = 41;
               break;
             }
             finishNavigation();
             measureAnchors();
             return _context.abrupt("return");
-          case 39:
+          case 41:
             setActiveAnchorId(messageId);
             cancelPendingAnchorPositionUpdate();
             highlightedTarget = targetAtTop;
@@ -669,24 +671,31 @@ export default function UserMessageAnchors(props) {
               targetAtTop.classList.add("".concat(prefixCls, "-anchor-target-active"));
               highlightTimeoutRef.current = window.setTimeout(function () {
                 if (!isCurrent()) return;
-                finishNavigation();
-                measureAnchors();
+                finishNavigation(true);
+                // Keep the selected message through the transient intrinsic size,
+                // then hand active tracking back to settled geometry after paint.
+                cancelLayoutUpdateRef.current = scheduleAfterLayout(function () {
+                  if (!isCurrent()) return;
+                  cancelLayoutUpdateRef.current = undefined;
+                  activeAnchorLockRef.current = undefined;
+                  measureAnchors();
+                });
               }, TARGET_ACTIVE_DURATION);
             });
-            _context.next = 49;
+            _context.next = 51;
             break;
-          case 46:
-            _context.prev = 46;
-            _context.t0 = _context["catch"](15);
+          case 48:
+            _context.prev = 48;
+            _context.t0 = _context["catch"](17);
             if (isCurrent()) {
               finishNavigation();
               measureAnchors();
             }
-          case 49:
+          case 51:
           case "end":
             return _context.stop();
         }
-      }, _callee, null, [[15, 46]]);
+      }, _callee, null, [[17, 48]]);
     }));
     return function (_x6) {
       return _ref3.apply(this, arguments);
@@ -694,8 +703,10 @@ export default function UserMessageAnchors(props) {
   }(), [cancelPendingAnchorPositionUpdate, measureAnchors, onEnsureMessageVisible, prefixCls, scrollContainerClassName]);
   React.useEffect(function () {
     return function () {
-      var _cancelNavigationRef$2;
+      var _cancelNavigationRef$2, _cancelLayoutUpdateRe2;
       (_cancelNavigationRef$2 = cancelNavigationRef.current) === null || _cancelNavigationRef$2 === void 0 || _cancelNavigationRef$2.call(cancelNavigationRef, false);
+      (_cancelLayoutUpdateRe2 = cancelLayoutUpdateRef.current) === null || _cancelLayoutUpdateRe2 === void 0 || _cancelLayoutUpdateRe2.call(cancelLayoutUpdateRef);
+      cancelLayoutUpdateRef.current = undefined;
       scrollSequenceRef.current += 1;
       if (highlightFrameRef.current) {
         window.cancelAnimationFrame(highlightFrameRef.current);

package/lib/AgentScopeRuntimeWebUI/core/Chat/MessageList/UserMessageAnchors/targetLayout.d.ts

@@ -4,3 +4,7 @@ export declare function createTargetLayout(): {
     restore(): void;
 };
 export declare function waitForMeasurableTarget(getTarget: () => HTMLElement | null, prepare: (target: HTMLElement) => void, isCurrent: () => boolean, nextFrame: () => Promise<void>): Promise<HTMLElement>;
+/** The scroll viewport can stay fixed while skipped bubbles regain their size. */
+export declare function observeMessageLayout(scrollEl: HTMLElement, trackEl: HTMLElement | null, onLayout: () => void): () => void;
+/** content-visibility's remembered intrinsic size settles after the next paint. */
+export declare function scheduleAfterLayout(onLayout: () => void): () => void;

package/lib/AgentScopeRuntimeWebUI/core/Chat/MessageList/UserMessageAnchors/targetLayout.js

@@ -45,6 +45,8 @@ export function createTargetLayout() {
 export function waitForMeasurableTarget(_x, _x2, _x3, _x4) {
   return _waitForMeasurableTarget.apply(this, arguments);
 }
+
+/** The scroll viewport can stay fixed while skipped bubbles regain their size. */
 function _waitForMeasurableTarget() {
   _waitForMeasurableTarget = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(getTarget, prepare, isCurrent, nextFrame) {
     var preparedTarget, frame, _target;
@@ -99,4 +101,30 @@ function _waitForMeasurableTarget() {
     }, _callee);
   }));
   return _waitForMeasurableTarget.apply(this, arguments);
+}
+export function observeMessageLayout(scrollEl, trackEl, onLayout) {
+  if (typeof ResizeObserver === 'undefined') return function () {};
+  var observer = new ResizeObserver(onLayout);
+  observer.observe(scrollEl);
+  if (trackEl) observer.observe(trackEl);
+  scrollEl.querySelectorAll('[data-role][id]').forEach(function (target) {
+    observer.observe(target);
+  });
+  return function () {
+    return observer.disconnect();
+  };
+}
+
+/** content-visibility's remembered intrinsic size settles after the next paint. */
+export function scheduleAfterLayout(onLayout) {
+  var frame = window.requestAnimationFrame(function () {
+    frame = window.requestAnimationFrame(function () {
+      frame = undefined;
+      onLayout();
+    });
+  });
+  return function () {
+    if (frame !== undefined) window.cancelAnimationFrame(frame);
+    frame = undefined;
+  };
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@agentscope-ai/chat",
-  "version": "1.2.0-beta.1792117572949",
+  "version": "1.2.0-beta.1792133067831",
   "description": "a free and open-source chat framework for building excellent LLM-powered chat experiences",
   "license": "Apache-2.0",
   "sideEffects": [