@assistant-ui/react 0.12.27 → 0.14.0

package/src/primitives/composer/ComposerInput.test.tsx

@@ -0,0 +1,232 @@
+/**
+ * @vitest-environment jsdom
+ */
+import { act } from "react";
+import { createRoot, type Root } from "react-dom/client";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { ComposerPrimitiveInput } from "./ComposerInput";
+
+const setText = vi.fn<(text: string) => void>();
+const setCursorPosition = vi.fn<(pos: number) => void>();
+
+const composerState = {
+  isEditing: true,
+  text: "",
+  type: "thread" as const,
+  isEmpty: true,
+  canCancel: false,
+  dictation: undefined as undefined | { inputDisabled: boolean },
+};
+
+const threadState = {
+  isDisabled: false,
+  isRunning: false,
+  capabilities: { queue: false, attachments: false },
+};
+
+const plugin = {
+  handleKeyDown: () => false,
+  setCursorPosition,
+};
+
+let pluginRegistry: { getPlugins: () => (typeof plugin)[] } | null = null;
+
+globalThis.IS_REACT_ACT_ENVIRONMENT = true;
+
+vi.mock("@assistant-ui/store", () => {
+  const aui = {
+    composer: () => ({
+      setText,
+      getState: () => composerState,
+      cancel: () => {},
+      send: () => {},
+      addAttachment: async () => {},
+    }),
+    thread: () => ({
+      getState: () => threadState,
+    }),
+    on: () => () => {},
+  };
+  type Selector<T> = (s: {
+    composer: typeof composerState;
+    thread: typeof threadState;
+  }) => T;
+  return {
+    useAui: () => aui,
+    useAuiState: <T,>(selector: Selector<T>) =>
+      selector({ composer: composerState, thread: threadState }),
+  };
+});
+
+vi.mock("@assistant-ui/tap", () => ({
+  flushResourcesSync: (fn: () => void) => fn(),
+}));
+
+vi.mock("./ComposerInputPluginContext", () => ({
+  useComposerInputPluginRegistryOptional: () => pluginRegistry,
+}));
+
+vi.mock("@radix-ui/react-use-escape-keydown", () => ({
+  useEscapeKeydown: () => {},
+}));
+
+vi.mock("../../utils/hooks/useOnScrollToBottom", () => ({
+  useOnScrollToBottom: () => {},
+}));
+
+const setNativeValue = (textarea: HTMLTextAreaElement, value: string) => {
+  const setter = Object.getOwnPropertyDescriptor(
+    HTMLTextAreaElement.prototype,
+    "value",
+  )?.set;
+  setter?.call(textarea, value);
+};
+
+const fireInput = (
+  textarea: HTMLTextAreaElement,
+  value: string,
+  isComposing: boolean,
+) => {
+  setNativeValue(textarea, value);
+  textarea.dispatchEvent(
+    new InputEvent("input", { bubbles: true, isComposing }),
+  );
+};
+
+const fireCompositionStart = (textarea: HTMLTextAreaElement) => {
+  textarea.dispatchEvent(
+    new CompositionEvent("compositionstart", { bubbles: true }),
+  );
+};
+
+const fireCompositionEnd = (textarea: HTMLTextAreaElement, value: string) => {
+  setNativeValue(textarea, value);
+  textarea.dispatchEvent(
+    new CompositionEvent("compositionend", { bubbles: true }),
+  );
+};
+
+describe("ComposerPrimitiveInput", () => {
+  let container: HTMLDivElement;
+  let root: Root;
+
+  beforeEach(() => {
+    setText.mockReset();
+    setCursorPosition.mockReset();
+    composerState.isEditing = true;
+    composerState.text = "";
+    composerState.isEmpty = true;
+    composerState.dictation = undefined;
+    threadState.isDisabled = false;
+    threadState.isRunning = false;
+    threadState.capabilities = { queue: false, attachments: false };
+    pluginRegistry = null;
+
+    container = document.createElement("div");
+    document.body.appendChild(container);
+    root = createRoot(container);
+  });
+
+  afterEach(async () => {
+    await act(async () => {
+      root.unmount();
+    });
+    container.remove();
+    vi.restoreAllMocks();
+  });
+
+  const mount = async () => {
+    await act(async () => {
+      root.render(<ComposerPrimitiveInput data-testid="input" />);
+    });
+    const textarea = container.querySelector("textarea") as HTMLTextAreaElement;
+    expect(textarea).not.toBeNull();
+    return textarea;
+  };
+
+  it("syncs setText during active composition so React 19 cannot reset the textarea", async () => {
+    const textarea = await mount();
+
+    await act(async () => {
+      fireCompositionStart(textarea);
+      fireInput(textarea, "ㄱ", true);
+    });
+    expect(setText).toHaveBeenCalledWith("ㄱ");
+
+    await act(async () => {
+      fireInput(textarea, "가", true);
+    });
+    expect(setText).toHaveBeenLastCalledWith("가");
+  });
+
+  it("commits the final value on compositionend", async () => {
+    const textarea = await mount();
+
+    await act(async () => {
+      fireCompositionStart(textarea);
+      fireInput(textarea, "가", true);
+    });
+    expect(setText).toHaveBeenCalledTimes(1);
+
+    await act(async () => {
+      fireCompositionEnd(textarea, "가");
+    });
+    expect(setText).toHaveBeenCalledTimes(2);
+    expect(setText).toHaveBeenLastCalledWith("가");
+  });
+
+  it("recovers when compositionend is dropped before the next input", async () => {
+    const textarea = await mount();
+
+    await act(async () => {
+      fireCompositionStart(textarea);
+      fireInput(textarea, "hello", false);
+    });
+    expect(setText).toHaveBeenCalledWith("hello");
+
+    await act(async () => {
+      fireInput(textarea, "hello!", false);
+    });
+    expect(setText).toHaveBeenLastCalledWith("hello!");
+  });
+
+  it("skips plugin cursor tracking during composition but resumes after", async () => {
+    pluginRegistry = { getPlugins: () => [plugin] };
+    const textarea = await mount();
+
+    await act(async () => {
+      fireCompositionStart(textarea);
+      fireInput(textarea, "ㄱ", true);
+    });
+    expect(setText).toHaveBeenCalledWith("ㄱ");
+    expect(setCursorPosition).not.toHaveBeenCalled();
+
+    await act(async () => {
+      fireCompositionEnd(textarea, "가");
+    });
+    expect(setCursorPosition).toHaveBeenCalled();
+  });
+
+  it("tracks plugin cursor for non-composition input", async () => {
+    pluginRegistry = { getPlugins: () => [plugin] };
+    const textarea = await mount();
+
+    await act(async () => {
+      fireInput(textarea, "abc", false);
+    });
+    expect(setText).toHaveBeenCalledWith("abc");
+    expect(setCursorPosition).toHaveBeenCalled();
+  });
+
+  it("ignores input and compositionend when the composer is not editing", async () => {
+    composerState.isEditing = false;
+    const textarea = await mount();
+
+    await act(async () => {
+      fireInput(textarea, "abc", false);
+      fireCompositionStart(textarea);
+      fireCompositionEnd(textarea, "가");
+    });
+    expect(setText).not.toHaveBeenCalled();
+  });
+});

package/src/primitives/composer/ComposerInput.tsx

@@ -297,13 +297,18 @@ export const ComposerPrimitiveInput = forwardRef<
         onChange,
         (e: React.ChangeEvent<HTMLTextAreaElement>) => {
           if (!aui.composer().getState().isEditing) return;
-          const isComposing =
-            (e.nativeEvent as { isComposing?: boolean }).isComposing === true ||
-            compositionRef.current;
-          if (isComposing) return;
+          const nativeIsComposing =
+            (e.nativeEvent as { isComposing?: boolean }).isComposing === true;
+          // recover stuck compositionRef when the browser drops compositionend
+          if (compositionRef.current && !nativeIsComposing) {
+            compositionRef.current = false;
+          }
+          const isComposing = nativeIsComposing || compositionRef.current;
+          // keep controlled value in sync mid-IME so react does not reset the textarea to a stale value
           flushResourcesSync(() => {
             aui.composer().setText(e.target.value);
           });
+          if (isComposing) return;
           const pos = e.target.selectionStart ?? e.target.value.length;
           if (pluginRegistry) {
             for (const plugin of pluginRegistry.getPlugins()) {

package/src/primitives/message/MessagePartsGrouped.tsx

@@ -412,6 +412,12 @@ const EmptyParts = memo(
  * The grouping function receives all message parts and returns an array of groups,
  * where each group has a key and an array of part indices.
  *
+ * @deprecated Prefer `<MessagePrimitive.GroupedParts>` for adjacent
+ * grouping — it dispatches all rendering through one `switch (part.type)`
+ * and supports nested group paths. Keep this primitive only for
+ * non-adjacent clustering (e.g., gathering parts with the same parent-id
+ * across the message).
+ *
  * @example
  * ```tsx
  * // Group by parent ID (default behavior)
@@ -431,27 +437,6 @@ const EmptyParts = memo(
  *   }}
  * />
  * ```
- *
- * @example
- * ```tsx
- * // Group by tool name
- * import { groupMessagePartsByToolName } from "@assistant-ui/react";
- *
- * <MessagePrimitive.Unstable_PartsGrouped
- *   groupingFunction={groupMessagePartsByToolName}
- *   components={{
- *     Group: ({ groupKey, indices, children }) => {
- *       if (!groupKey) return <>{children}</>;
- *       return (
- *         <div className="tool-group">
- *           <h4>Tool: {groupKey}</h4>
- *           {children}
- *         </div>
- *       );
- *     }
- *   }}
- * />
- * ```
  */
 export const MessagePrimitiveUnstable_PartsGrouped: FC<
   MessagePrimitiveUnstable_PartsGrouped.Props

package/src/primitives/message/MessageRoot.tsx

@@ -5,14 +5,21 @@ import {
   type ComponentRef,
   forwardRef,
   type ComponentPropsWithoutRef,
+  type ForwardedRef,
   useCallback,
 } from "react";
 import { useAui, useAuiState } from "@assistant-ui/store";
 import { useManagedRef } from "../../utils/hooks/useManagedRef";
-import { useSizeHandle } from "../../utils/hooks/useSizeHandle";
 import { useComposedRefs } from "@radix-ui/react-compose-refs";
-import { useThreadViewport } from "../../context/react/ThreadViewportContext";
-import { ThreadPrimitiveViewportSlack } from "../thread/ThreadViewportSlack";
+import {
+  useThreadViewport,
+  useThreadViewportStore,
+} from "../../context/react/ThreadViewportContext";
+import { parseCssLength } from "../thread/topAnchor/topAnchorUtils";
+
+type ThreadViewportStore = NonNullable<
+  ReturnType<typeof useThreadViewportStore>
+>;
 
 const useIsHoveringRef = () => {
   const aui = useAui();
@@ -47,54 +54,126 @@ const useIsHoveringRef = () => {
   return useManagedRef(callbackRef);
 };
 
-/**
- * Hook that registers the anchor user message as a content inset.
- * Only registers if: user message, at index messages.length-2, and last message is assistant.
- */
-const useMessageViewportRef = () => {
-  const turnAnchor = useThreadViewport((s) => s.turnAnchor);
-  const registerUserHeight = useThreadViewport(
-    (s) => s.registerUserMessageHeight,
-  );
-
-  // inset rules:
-  // - the previous user message before the last assistant message registers its full height
-  const shouldRegisterAsInset = useAuiState(
+const useIsTopAnchorUser = () => {
+  const activeAnchorId = useThreadViewport((s) => s.topAnchorTurn?.anchorId);
+  return useAuiState(
     (s) =>
-      turnAnchor === "top" &&
       s.message.role === "user" &&
+      s.message.index > 0 &&
       s.message.index === s.thread.messages.length - 2 &&
-      s.thread.messages.at(-1)?.role === "assistant",
+      s.thread.messages.at(-1)?.role === "assistant" &&
+      (s.message.id === activeAnchorId || s.thread.isRunning),
   );
+};
 
-  const getHeight = useCallback((el: HTMLElement) => el.offsetHeight, []);
+const useIsTopAnchorTarget = () => {
+  const activeTargetId = useThreadViewport((s) => s.topAnchorTurn?.targetId);
+  return useAuiState(
+    (s) =>
+      s.message.isLast &&
+      s.message.role === "assistant" &&
+      s.message.index >= 1 &&
+      s.thread.messages.at(s.message.index - 1)?.role === "user" &&
+      (s.message.id === activeTargetId || s.thread.isRunning),
+  );
+};
 
-  return useSizeHandle(
-    shouldRegisterAsInset ? registerUserHeight : null,
-    getHeight,
+const useTopAnchorUserRef = (
+  active: boolean,
+  threadViewportStore: ThreadViewportStore,
+) => {
+  const callback = useCallback(
+    (el: HTMLElement) => {
+      if (!active) return;
+      return threadViewportStore.getState().registerAnchorElement(el);
+    },
+    [active, threadViewportStore],
   );
+
+  return useManagedRef<HTMLElement>(callback);
+};
+
+const useTopAnchorTargetRef = ({
+  active,
+  threadViewportStore,
+}: {
+  active: boolean;
+  threadViewportStore: ThreadViewportStore;
+}) => {
+  const targetRefCallback = useCallback(
+    (el: HTMLElement) => {
+      if (!active) return;
+      const state = threadViewportStore.getState();
+      const clamp = state.topAnchorMessageClamp;
+
+      return state.registerAnchorTargetElement(el, {
+        tallerThan: parseCssLength(clamp.tallerThan, el),
+        visibleHeight: parseCssLength(clamp.visibleHeight, el),
+      });
+    },
+    [active, threadViewportStore],
+  );
+
+  return useManagedRef<HTMLElement>(targetRefCallback);
 };
 
 export namespace MessagePrimitiveRoot {
   export type Element = ComponentRef<typeof Primitive.div>;
-  /**
-   * Props for the MessagePrimitive.Root component.
-   * Accepts all standard div element props plus optional viewport slack tuning.
-   */
-  export type Props = ComponentPropsWithoutRef<typeof Primitive.div> & {
-    /**
-     * Threshold at which the user message height clamps to the offset.
-     * @default "10em"
-     */
-    fillClampThreshold?: string | undefined;
-    /**
-     * Offset used when clamping large user messages.
-     * @default "6em"
-     */
-    fillClampOffset?: string | undefined;
-  };
+  export type Props = ComponentPropsWithoutRef<typeof Primitive.div>;
 }
 
+type MessagePrimitiveRootInternalProps = MessagePrimitiveRoot.Props & {
+  forwardedRef: ForwardedRef<MessagePrimitiveRoot.Element>;
+};
+
+const MessagePrimitiveRootDefault = ({
+  forwardedRef,
+  ...props
+}: MessagePrimitiveRootInternalProps) => {
+  const isHoveringRef = useIsHoveringRef();
+  const ref = useComposedRefs<HTMLDivElement>(forwardedRef, isHoveringRef);
+  const messageId = useAuiState((s) => s.message.id);
+
+  return <Primitive.div {...props} ref={ref} data-message-id={messageId} />;
+};
+
+const MessagePrimitiveRootTopAnchor = ({
+  forwardedRef,
+  threadViewportStore,
+  ...props
+}: MessagePrimitiveRootInternalProps & {
+  threadViewportStore: ThreadViewportStore;
+}) => {
+  const isHoveringRef = useIsHoveringRef();
+  const isTopAnchorUser = useIsTopAnchorUser();
+  const isTopAnchorTarget = useIsTopAnchorTarget();
+  const topAnchorUserRef = useTopAnchorUserRef(
+    isTopAnchorUser,
+    threadViewportStore,
+  );
+  const topAnchorTargetRef = useTopAnchorTargetRef({
+    active: isTopAnchorTarget,
+    threadViewportStore,
+  });
+  const ref = useComposedRefs<HTMLDivElement>(
+    forwardedRef,
+    isHoveringRef,
+    topAnchorUserRef,
+    topAnchorTargetRef,
+  );
+  const messageId = useAuiState((s) => s.message.id);
+
+  return (
+    <Primitive.div
+      {...props}
+      ref={ref}
+      data-message-id={messageId}
+      data-aui-top-anchor-user={isTopAnchorUser ? "" : undefined}
+      data-aui-top-anchor-target={isTopAnchorTarget ? "" : undefined}
+    />
+  );
+};
+
 /**
  * The root container component for a message.
  *
@@ -102,8 +181,10 @@ export namespace MessagePrimitiveRoot {
  * hover state management for the message. It automatically tracks when the user
  * is hovering over the message, which can be used by child components like action bars.
  *
- * When `turnAnchor="top"` is set on the viewport, this component
- * registers itself as the scroll anchor if it's the last user message.
+ * When `turnAnchor="top"` is set on the viewport, this component automatically
+ * registers itself as the top-anchor user message (when it's the previous user
+ * message) or as the top-anchor target (when it's the streaming assistant
+ * response). No additional component is required.
  *
  * @example
  * ```tsx
@@ -119,24 +200,21 @@ export namespace MessagePrimitiveRoot {
 export const MessagePrimitiveRoot = forwardRef<
   MessagePrimitiveRoot.Element,
   MessagePrimitiveRoot.Props
->(({ fillClampThreshold, fillClampOffset, ...props }, forwardRef) => {
-  const isHoveringRef = useIsHoveringRef();
-  const anchorUserMessageRef = useMessageViewportRef();
-  const ref = useComposedRefs<HTMLDivElement>(
-    forwardRef,
-    isHoveringRef,
-    anchorUserMessageRef,
-  );
-  const messageId = useAuiState((s) => s.message.id);
+>((props, forwardedRef) => {
+  const threadViewportStore = useThreadViewportStore();
+  // turnAnchor is initial-only viewport config (see ThreadViewportProvider).
+  const turnAnchor = threadViewportStore.getState().turnAnchor;
 
-  return (
-    <ThreadPrimitiveViewportSlack
-      fillClampThreshold={fillClampThreshold}
-      fillClampOffset={fillClampOffset}
-    >
-      <Primitive.div {...props} ref={ref} data-message-id={messageId} />
-    </ThreadPrimitiveViewportSlack>
-  );
+  if (turnAnchor === "top") {
+    return (
+      <MessagePrimitiveRootTopAnchor
+        {...props}
+        forwardedRef={forwardedRef}
+        threadViewportStore={threadViewportStore}
+      />
+    );
+  }
+  return <MessagePrimitiveRootDefault {...props} forwardedRef={forwardedRef} />;
 });
 
 MessagePrimitiveRoot.displayName = "MessagePrimitive.Root";

package/src/primitives/message.ts

@@ -7,6 +7,7 @@ export { MessagePrimitiveAttachments as Attachments } from "./message/MessageAtt
 export { MessagePrimitiveAttachmentByIndex as AttachmentByIndex } from "./message/MessageAttachments";
 export { MessagePrimitiveQuote as Quote } from "@assistant-ui/core/react";
 export { MessagePrimitiveError as Error } from "./message/MessageError";
+export { MessagePrimitiveGroupedParts as GroupedParts } from "@assistant-ui/core/react";
 export {
   MessagePrimitiveUnstable_PartsGrouped as Unstable_PartsGrouped,
   MessagePrimitiveUnstable_PartsGroupedByParentId as Unstable_PartsGroupedByParentId,

package/src/primitives/thread/ThreadViewport.tsx

@@ -7,11 +7,23 @@ import {
   forwardRef,
   type ComponentPropsWithoutRef,
   useCallback,
+  useLayoutEffect,
+  useMemo,
 } from "react";
+import { useAuiEvent, useAuiState } from "@assistant-ui/store";
+import { useManagedRef } from "../../utils/hooks/useManagedRef";
 import { useThreadViewportAutoScroll } from "./useThreadViewportAutoScroll";
 import { ThreadPrimitiveViewportProvider } from "../../context/providers/ThreadViewportProvider";
 import { useSizeHandle } from "../../utils/hooks/useSizeHandle";
-import { useThreadViewport } from "../../context/react/ThreadViewportContext";
+import {
+  useThreadViewport,
+  useThreadViewportStore,
+} from "../../context/react/ThreadViewportContext";
+import { useTopAnchorReserve } from "./topAnchor/useTopAnchorReserve";
+import {
+  getActiveTopAnchorAnchorId,
+  getActiveTopAnchorTargetId,
+} from "./topAnchor/topAnchorTurn";
 
 export namespace ThreadPrimitiveViewport {
   export type Element = ComponentRef<typeof Primitive.div>;
@@ -31,6 +43,26 @@ export namespace ThreadPrimitiveViewport {
      */
     turnAnchor?: "top" | "bottom" | undefined;
 
+    /**
+     * Clamps tall user messages so the assistant response stays in view.
+     *
+     * @default { tallerThan: "10em", visibleHeight: "6em" }
+     */
+    topAnchorMessageClamp?: {
+      /**
+       * Clamp messages taller than this. Supports `px`, `em`, and `rem`.
+       *
+       * @default "10em"
+       */
+      tallerThan?: string;
+      /**
+       * Visible portion of clamped messages. Supports `px`, `em`, and `rem`.
+       *
+       * @default "6em"
+       */
+      visibleHeight?: string;
+    };
+
     /**
      * Whether to scroll to bottom when a new run starts.
      *
@@ -60,6 +92,52 @@ const useViewportSizeRef = () => {
   return useSizeHandle(register, getHeight);
 };
 
+const useViewportElementRef = () => {
+  const registerViewportElement = useThreadViewport(
+    (s) => s.registerViewportElement,
+  );
+
+  return useManagedRef(registerViewportElement);
+};
+
+const useTopAnchorTurn = (enabled: boolean) => {
+  const threadViewportStore = useThreadViewportStore();
+  const activeAnchorId = useAuiState((s) => {
+    if (!enabled) return undefined;
+    return getActiveTopAnchorAnchorId(s.thread);
+  });
+  const activeTargetId = useAuiState((s) => {
+    if (!enabled) return undefined;
+    return getActiveTopAnchorTargetId(s.thread);
+  });
+  const activeTurn = useMemo(() => {
+    if (!activeAnchorId || !activeTargetId) return null;
+    return { anchorId: activeAnchorId, targetId: activeTargetId };
+  }, [activeAnchorId, activeTargetId]);
+
+  useLayoutEffect(() => {
+    if (!activeTurn) return;
+
+    const state = threadViewportStore.getState();
+    const current = state.topAnchorTurn;
+    if (
+      current?.anchorId === activeTurn.anchorId &&
+      current.targetId === activeTurn.targetId
+    ) {
+      return;
+    }
+
+    state.setTopAnchorTurn(activeTurn);
+  }, [activeTurn, threadViewportStore]);
+
+  const clearTopAnchorTurn = useCallback(() => {
+    threadViewportStore.getState().setTopAnchorTurn(null);
+  }, [threadViewportStore]);
+
+  useAuiEvent("thread.initialize", clearTopAnchorTurn);
+  useAuiEvent("threadListItem.switchedTo", clearTopAnchorTurn);
+};
+
 const ThreadPrimitiveViewportScrollable = forwardRef<
   ThreadPrimitiveViewport.Element,
   ThreadPrimitiveViewport.Props
@@ -82,7 +160,18 @@ const ThreadPrimitiveViewportScrollable = forwardRef<
       scrollToBottomOnThreadSwitch,
     });
     const viewportSizeRef = useViewportSizeRef();
-    const ref = useComposedRefs(forwardedRef, autoScrollRef, viewportSizeRef);
+    const viewportElementRef = useViewportElementRef();
+    const threadViewportStore = useThreadViewportStore();
+    const turnAnchor = threadViewportStore.getState().turnAnchor;
+    const topAnchorEnabled = turnAnchor === "top";
+    useTopAnchorTurn(topAnchorEnabled);
+    useTopAnchorReserve(topAnchorEnabled);
+    const ref = useComposedRefs(
+      forwardedRef,
+      autoScrollRef,
+      viewportSizeRef,
+      viewportElementRef,
+    );
 
     return (
       <Primitive.div {...rest} ref={ref}>
@@ -114,9 +203,11 @@ ThreadPrimitiveViewportScrollable.displayName =
 export const ThreadPrimitiveViewport = forwardRef<
   ThreadPrimitiveViewport.Element,
   ThreadPrimitiveViewport.Props
->(({ turnAnchor, ...props }, ref) => {
+>(({ turnAnchor, topAnchorMessageClamp, ...props }, ref) => {
   return (
-    <ThreadPrimitiveViewportProvider options={{ turnAnchor }}>
+    <ThreadPrimitiveViewportProvider
+      options={{ turnAnchor, topAnchorMessageClamp }}
+    >
       <ThreadPrimitiveViewportScrollable {...props} ref={ref} />
     </ThreadPrimitiveViewportProvider>
   );

package/src/primitives/thread/ThreadViewportFooter.tsx

@@ -20,7 +20,8 @@ export namespace ThreadPrimitiveViewportFooter {
  * A footer container that measures its height for scroll calculations.
  *
  * This component measures its height and provides it to the viewport context
- * for use in scroll calculations (e.g., ViewportSlack min-height).
+ * so the auto-scroll system can account for any sticky footer overlapping the
+ * message list.
  *
  * Multiple ViewportFooter components can be used - their heights are summed.
  *