@ykurilov/agent-chat-react 0.71.0 → 0.72.0

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @ykurilov/agent-chat-react
 
+## 0.72.0
+
+No changes in this release.
+
+## 0.71.1
+
+### Patch Changes
+
+- 519914e: Лента закрепляет только сообщения у текущего окна, пока следует за ответом. При расхождении измеренных высот DOM и оценок виртуального списка больше не монтируется весь остаток длинной истории. Растущий ответ и черновик правки сохраняют отдельное закрепление.
+  
+  Прилипание к низу сохраняется, когда пересчёт высот сдвигает сообщение и прокрутку на одинаковое расстояние вверх, даже при росте списка. Ввод читателя вверх по-прежнему останавливает следование за ответом.
+  
+  Служебные обёртки сообщений не анимируют координаты: глобальное правило уменьшенного движения с ненулевой длительностью перехода больше не создаёт пустоты между строками в Safari.
+  
+  Рост ответа не перезаписывает ещё не обработанный уход читателя вверх: положение учитывается до доводки низа, даже если браузер задержал событие scroll.
+  
+  После открытия и немедленной отправки начальная прокрутка больше не удерживает асинхронную цель внизу: уход читателя вверх сохраняется при дальнейших замерах ответа. Обновление ничего не требует.
+
 ## 0.71.0
 
 ### Minor Changes

package/README.md

@@ -1,7 +1,9 @@
 # @ykurilov/agent-chat-react
 
 Поведение чата с агентом для React 19, без внешнего вида. Всё видимое рисует скин —
-объект из десяти компонентов. Готовый скин Тандема — пакет `@ykurilov/agent-chat-skin-tandem`.
+объект компонентов. Это низкоуровневый API: `skin` обязателен.
+
+Стандартный экран SDK - `AgentChat`, `ChatWorkspace`, `AgentPanel` из `@ykurilov/agent-chat-skin-oduvanchik/chat`: без `skin` используется Одуванчик, явный скин имеет приоритет. [Подключение CSS и переход](../../skins/oduvanchik/README.md). Существующий импорт из React сам не меняет оформление приложения.
 
 ```tsx
 import { AgentChat, ChatLabelsProvider, russianLabels } from "@ykurilov/agent-chat-react";

package/dist/{chunk-W5VBPNFF.js → chunk-WJJY2WLQ.js}

@@ -4197,7 +4197,10 @@ var SCROLL_KEYS = /* @__PURE__ */ new Set([...JUMP_KEYS, "PageUp", "ArrowUp", "H
 var READER_INPUT_WINDOW_MS = 250;
 var UP_KEYS = /* @__PURE__ */ new Set(["PageUp", "ArrowUp", "Home"]);
 function FeedItem({ style, children, ref }) {
-  return /* @__PURE__ */ jsx3("div", { ref, style, "data-feed-item": "", children });
+  return /* @__PURE__ */ jsx3("div", { ref, style: { ...style, transitionProperty: "none" }, "data-feed-item": "", children });
+}
+function FeedWindow({ style, children, ref }) {
+  return /* @__PURE__ */ jsx3("div", { ref, style: { ...style, transitionProperty: "none" }, children });
 }
 function isTextField(target) {
   if (!(target instanceof Element)) return false;
@@ -4214,6 +4217,7 @@ function MessageFeedView({ scrollRef, messages, renderMessage, keepLastMounted,
   }, []);
   const lastHeight = useRef7(0);
   const lastTop = useRef7(0);
+  const syncScrollState = useRef7(null);
   const shrunkSinceScroll = useRef7(0);
   const openedAtBottom = useRef7(false);
   const userJumpUntil = useRef7(0);
@@ -4230,43 +4234,60 @@ function MessageFeedView({ scrollRef, messages, renderMessage, keepLastMounted,
   const lastIndex = messages.length - 1;
   useEffect6(() => setScrollerReady(true), []);
   useLayoutEffect(() => {
-    const scroller = scrollRef.current;
+    const scroller2 = scrollRef.current;
     const root = rootRef.current;
-    if (!scrollerReady || !scroller || !root) return;
+    if (!scrollerReady || !scroller2 || !root) return;
     const measure = () => {
-      const offset = root.getBoundingClientRect().top - scroller.getBoundingClientRect().top + scroller.scrollTop;
+      const offset = root.getBoundingClientRect().top - scroller2.getBoundingClientRect().top + scroller2.scrollTop;
       setStartMargin(Math.max(0, Math.round(offset)));
     };
     measure();
     const observer = new ResizeObserver(measure);
-    observer.observe(scroller);
+    observer.observe(scroller2);
     return () => observer.disconnect();
   }, [scrollRef, scrollerReady]);
   useEffect6(() => {
-    const scroller = scrollRef.current;
-    if (!scrollerReady || !scroller) return;
-    lastHeight.current = scroller.scrollHeight;
-    lastTop.current = scroller.scrollTop;
+    const scroller2 = scrollRef.current;
+    if (!scrollerReady || !scroller2) return;
+    lastHeight.current = scroller2.scrollHeight;
+    lastTop.current = scroller2.scrollTop;
+    let anchor;
+    const rememberAnchor = () => {
+      const view = scroller2.getBoundingClientRect();
+      for (const element of rootRef.current?.querySelectorAll("[data-feed-item]") ?? []) {
+        if (element.style.visibility === "hidden") continue;
+        const box = element.getBoundingClientRect();
+        if (box.bottom > view.top && box.top < view.bottom) {
+          anchor = { element, offset: box.top - view.top + scroller2.scrollTop };
+          return;
+        }
+      }
+      anchor = void 0;
+    };
+    rememberAnchor();
     const onScroll = () => {
-      const height = scroller.scrollHeight;
-      const top = scroller.scrollTop;
-      const near = Math.min(height, lastHeight.current) - top - scroller.clientHeight < STICK_TO_BOTTOM_PX;
+      const height = scroller2.scrollHeight;
+      const top = scroller2.scrollTop;
+      const near = Math.min(height, lastHeight.current) - top - scroller2.clientHeight < STICK_TO_BOTTOM_PX;
       const shrunk = shrunkSinceScroll.current + Math.max(0, lastHeight.current - height);
       shrunkSinceScroll.current = 0;
       const step = top - lastTop.current;
       const now = performance.now();
       const readerActed = now < readerInputUntil.current || now < userJumpUntil.current;
-      const movedByLayout = step < 0 && -step <= 2 * shrunk && !readerActed;
+      const anchorShift = anchor && scroller2.contains(anchor.element) ? anchor.element.getBoundingClientRect().top - scroller2.getBoundingClientRect().top + top - anchor.offset : 0;
+      const compensated = anchorShift < 0 && Math.abs(step - anchorShift) <= 1;
+      const movedByLayout = step < 0 && (-step <= 2 * shrunk || compensated) && !readerActed;
       lastTop.current = top;
       lastHeight.current = height;
+      rememberAnchor();
       if (movedByLayout) {
-        if (stuck.current) scroller.scrollTop = height;
+        if (stuck.current) scroller2.scrollTop = height;
         return;
       }
       if (step < 0) stick(readerActed ? false : near);
       else if (step > 0) {
         readerUpUntil.current = 0;
-        if (near && (step <= scroller.clientHeight || performance.now() < userJumpUntil.current)) stick(true);
+        if (near && (step <= scroller2.clientHeight || performance.now() < userJumpUntil.current)) stick(true);
       }
     };
     const onKeyDown = (event) => {
@@ -4295,38 +4316,41 @@ function MessageFeedView({ scrollRef, messages, renderMessage, keepLastMounted,
     const onPointerUp = () => {
       if (userJumpUntil.current > performance.now() + POINTER_JUMP_WINDOW_MS) userJumpUntil.current = performance.now() + POINTER_JUMP_WINDOW_MS;
     };
-    scroller.addEventListener("scroll", onScroll, { passive: true });
+    syncScrollState.current = onScroll;
+    scroller2.addEventListener("scroll", onScroll, { passive: true });
     document.addEventListener("keydown", onKeyDown);
-    scroller.addEventListener("pointerdown", onPointerDown);
-    scroller.addEventListener("wheel", onWheel, { passive: true });
-    scroller.addEventListener("touchstart", onTouchStart, { passive: true });
-    scroller.addEventListener("touchmove", onTouchMove, { passive: true });
+    scroller2.addEventListener("pointerdown", onPointerDown);
+    scroller2.addEventListener("wheel", onWheel, { passive: true });
+    scroller2.addEventListener("touchstart", onTouchStart, { passive: true });
+    scroller2.addEventListener("touchmove", onTouchMove, { passive: true });
     window.addEventListener("pointerup", onPointerUp);
     window.addEventListener("pointercancel", onPointerUp);
     return () => {
-      scroller.removeEventListener("scroll", onScroll);
+      syncScrollState.current = null;
+      scroller2.removeEventListener("scroll", onScroll);
       document.removeEventListener("keydown", onKeyDown);
-      scroller.removeEventListener("pointerdown", onPointerDown);
-      scroller.removeEventListener("wheel", onWheel);
-      scroller.removeEventListener("touchstart", onTouchStart);
-      scroller.removeEventListener("touchmove", onTouchMove);
+      scroller2.removeEventListener("pointerdown", onPointerDown);
+      scroller2.removeEventListener("wheel", onWheel);
+      scroller2.removeEventListener("touchstart", onTouchStart);
+      scroller2.removeEventListener("touchmove", onTouchMove);
       window.removeEventListener("pointerup", onPointerUp);
       window.removeEventListener("pointercancel", onPointerUp);
     };
   }, [scrollRef, scrollerReady, stick]);
   useEffect6(() => {
-    const scroller = scrollRef.current;
+    const scroller2 = scrollRef.current;
     const root = rootRef.current;
-    if (!scrollerReady || !scroller || !root) return;
+    if (!scrollerReady || !scroller2 || !root) return;
     const settleAtBottom = () => {
-      const height = scroller.scrollHeight;
-      const clientHeight = scroller.clientHeight;
+      if (scroller2.scrollTop < lastTop.current) syncScrollState.current?.();
+      const height = scroller2.scrollHeight;
+      const clientHeight = scroller2.clientHeight;
       shrunkSinceScroll.current += Math.max(0, lastHeight.current - height);
       lastHeight.current = height;
       const needed = height > settledHeight.current || clientHeight < settledClientHeight.current;
       settledHeight.current = height;
       settledClientHeight.current = clientHeight;
-      if (stuck.current && needed && performance.now() >= readerUpUntil.current) scroller.scrollTop = height;
+      if (stuck.current && needed && performance.now() >= readerUpUntil.current) scroller2.scrollTop = height;
     };
     let followUp = 0;
     const follow = () => {
@@ -4341,7 +4365,7 @@ function MessageFeedView({ scrollRef, messages, renderMessage, keepLastMounted,
     const listObserver = new MutationObserver(follow);
     listObserver.observe(root, { subtree: true, childList: true, attributes: true, attributeFilter: ["style"] });
     const scrollerObserver = new ResizeObserver(follow);
-    scrollerObserver.observe(scroller);
+    scrollerObserver.observe(scroller2);
     return () => {
       listObserver.disconnect();
       scrollerObserver.disconnect();
@@ -4356,8 +4380,8 @@ function MessageFeedView({ scrollRef, messages, renderMessage, keepLastMounted,
       setPositioned(false);
       return;
     }
-    const scroller = scrollRef.current;
-    if (!scrollerReady || !scroller || openedAtBottom.current) return;
+    const scroller2 = scrollRef.current;
+    if (!scrollerReady || !scroller2 || openedAtBottom.current) return;
     openedAtBottom.current = true;
     const focusIndex = openAtMessageId === void 0 ? -1 : messages.findIndex((message) => message.id === openAtMessageId);
     stick(focusIndex < 0 || focusIndex === lastIndex);
@@ -4365,12 +4389,14 @@ function MessageFeedView({ scrollRef, messages, renderMessage, keepLastMounted,
       virtualizerRef.current?.scrollToIndex(focusIndex, { align: "start" });
       openingScrollUntil.current = performance.now() + OPENING_SCROLL_QUIET_MS;
     } else {
-      virtualizerRef.current?.scrollTo(BOTTOM_SCROLL_TARGET);
+      queueMicrotask(() => {
+        if (rootRef.current?.isConnected && scrollRef.current === scroller2 && stuck.current) scroller2.scrollTop = scroller2.scrollHeight;
+      });
       openingScrollUntil.current = 0;
     }
     let frame = 0;
     const cancel = () => {
-      scroller.removeEventListener("scroll", settle);
+      scroller2.removeEventListener("scroll", settle);
       cancelAnimationFrame(frame);
       cancelSettle.current = null;
     };
@@ -4379,7 +4405,7 @@ function MessageFeedView({ scrollRef, messages, renderMessage, keepLastMounted,
       setPositioned(true);
     };
     cancelSettle.current = cancel;
-    scroller.addEventListener("scroll", settle, { once: true });
+    scroller2.addEventListener("scroll", settle, { once: true });
     frame = requestAnimationFrame(() => {
       frame = requestAnimationFrame(settle);
     });
@@ -4389,19 +4415,22 @@ function MessageFeedView({ scrollRef, messages, renderMessage, keepLastMounted,
     stick(true);
     if (performance.now() < openingScrollUntil.current) virtualizerRef.current?.scrollTo(BOTTOM_SCROLL_TARGET);
     openingScrollUntil.current = 0;
-    const scroller = scrollRef.current;
-    if (scroller) scroller.scrollTop = scroller.scrollHeight;
+    const scroller2 = scrollRef.current;
+    if (scroller2) scroller2.scrollTop = scroller2.scrollHeight;
   }, [scrollRef, stick]);
   useImperativeHandle(ref, () => ({ scrollToBottom }), [scrollToBottom]);
   const virtualizer = virtualizerRef.current;
   const editedIndex = keepMountedMessageId === void 0 ? -1 : messages.findIndex((message) => message.id === keepMountedMessageId);
-  const tailStart = positioned && followingBottom && virtualizer && lastIndex >= 0 ? Math.min(lastIndex, Math.max(0, virtualizer.findItemIndex(virtualizer.scrollOffset - BUFFER_PX))) : lastIndex + 1;
+  const scroller = scrollRef.current;
+  const keepBuffer = positioned && followingBottom && virtualizer && scroller && lastIndex >= 0;
+  const bufferStart = keepBuffer ? Math.max(0, virtualizer.findItemIndex(scroller.scrollTop - BUFFER_PX)) : 0;
+  const bufferEnd = keepBuffer ? Math.min(lastIndex, virtualizer.findItemIndex(scroller.scrollTop + scroller.clientHeight)) : -1;
   const keepMounted = useMemo6(() => {
-    const kept = new Set(Array.from({ length: Math.max(0, lastIndex + 1 - tailStart) }, (_, offset) => tailStart + offset));
+    const kept = new Set(Array.from({ length: Math.max(0, bufferEnd - bufferStart + 1) }, (_, offset) => bufferStart + offset));
     if (keepLastMounted && lastIndex >= 0) kept.add(lastIndex);
     if (editedIndex >= 0) kept.add(editedIndex);
     return [...kept].sort((a, b) => a - b);
-  }, [editedIndex, keepLastMounted, lastIndex, tailStart]);
+  }, [bufferEnd, bufferStart, editedIndex, keepLastMounted, lastIndex]);
   return /* @__PURE__ */ jsx3("div", { ref: rootRef, children: scrollerReady && /* @__PURE__ */ jsx3(
     Virtualizer,
     {
@@ -4411,6 +4440,7 @@ function MessageFeedView({ scrollRef, messages, renderMessage, keepLastMounted,
       itemSize: UNMEASURED_MESSAGE_HEIGHT_PX,
       bufferSize: positioned ? BUFFER_PX : 0,
       item: FeedItem,
+      as: FeedWindow,
       keepMounted,
       startMargin,
       children: (message, index) => renderMessage(message, index)
@@ -7194,4 +7224,4 @@ export {
   activeChatTitle,
   useWorkspaceListSync
 };
-//# sourceMappingURL=chunk-W5VBPNFF.js.map
+//# sourceMappingURL=chunk-WJJY2WLQ.js.map