@assistant-ui/react 0.12.28 → 0.14.0

package/src/context/stores/ThreadViewport.ts

@@ -60,28 +60,80 @@ export type ThreadViewportState = {
   /** Controls scroll anchoring: "top" anchors user messages at top, "bottom" is classic behavior */
   readonly turnAnchor: "top" | "bottom";
 
+  /** Clamps tall user messages so the assistant response stays in view. */
+  readonly topAnchorMessageClamp: {
+    readonly tallerThan: string;
+    readonly visibleHeight: string;
+  };
+
   /** Raw height values from registered elements */
   readonly height: {
     /** Total viewport height */
     readonly viewport: number;
     /** Total content inset height (footer, anchor message, etc.) */
     readonly inset: number;
-    /** Height of the anchor user message (full height) */
-    readonly userMessage: number;
   };
 
+  /** Current DOM elements used for geometry-based top anchoring */
+  readonly element: {
+    readonly viewport: HTMLElement | null;
+    readonly anchor: HTMLElement | null;
+    readonly target: HTMLElement | null;
+  };
+
+  /** Numeric clamp configuration for the active top-anchor target message */
+  readonly targetConfig: {
+    readonly tallerThan: number;
+    readonly visibleHeight: number;
+  } | null;
+
+  /**
+   * The current top-anchor turn activated in this viewport session.
+   * History-loaded messages do not populate this; it is set when a run creates
+   * a live user/assistant pair and remains after the run completes.
+   */
+  readonly topAnchorTurn: {
+    readonly anchorId: string;
+    readonly targetId: string;
+  } | null;
+
   /** Register a viewport and get a handle to update its height */
   readonly registerViewport: () => SizeHandle;
 
   /** Register a content inset (footer, anchor message, etc.) and get a handle to update its height */
   readonly registerContentInset: () => SizeHandle;
 
-  /** Register the anchor user message height */
-  readonly registerUserMessageHeight: () => SizeHandle;
+  /** Register the scroll viewport element */
+  readonly registerViewportElement: (
+    element: HTMLElement | null,
+  ) => Unsubscribe;
+
+  /** Register the current anchor user message element */
+  readonly registerAnchorElement: (element: HTMLElement | null) => Unsubscribe;
+
+  /**
+   * Register the current top-anchor target (last assistant response) element
+   * along with its numeric clamp configuration. When unregistered, both
+   * `element.target` and `targetConfig` clear together.
+   */
+  readonly registerAnchorTargetElement: (
+    element: HTMLElement | null,
+    config?: { readonly tallerThan: number; readonly visibleHeight: number },
+  ) => Unsubscribe;
+
+  readonly setTopAnchorTurn: (
+    turn: { readonly anchorId: string; readonly targetId: string } | null,
+  ) => void;
 };
 
 export type ThreadViewportStoreOptions = {
   turnAnchor?: "top" | "bottom" | undefined;
+  topAnchorMessageClamp?:
+    | {
+        tallerThan?: string | undefined;
+        visibleHeight?: string | undefined;
+      }
+    | undefined;
 };
 
 export const makeThreadViewportStore = (
@@ -107,14 +159,27 @@ export const makeThreadViewportStore = (
       },
     });
   });
-  const userMessageRegistry = createSizeRegistry((total) => {
+  const registerElementSlot = (
+    key: "viewport" | "anchor",
+    element: HTMLElement | null,
+  ) => {
     store.setState({
-      height: {
-        ...store.getState().height,
-        userMessage: total,
+      element: {
+        ...store.getState().element,
+        [key]: element,
       },
     });
-  });
+
+    return () => {
+      if (store.getState().element[key] !== element) return;
+      store.setState({
+        element: {
+          ...store.getState().element,
+          [key]: null,
+        },
+      });
+    };
+  };
 
   const store = create<ThreadViewportState>(() => ({
     isAtBottom: true,
@@ -131,16 +196,51 @@ export const makeThreadViewportStore = (
     },
 
     turnAnchor: options.turnAnchor ?? "bottom",
+    topAnchorMessageClamp: {
+      tallerThan: options.topAnchorMessageClamp?.tallerThan ?? "10em",
+      visibleHeight: options.topAnchorMessageClamp?.visibleHeight ?? "6em",
+    },
 
     height: {
       viewport: 0,
       inset: 0,
-      userMessage: 0,
     },
+    element: {
+      viewport: null,
+      anchor: null,
+      target: null,
+    },
+    targetConfig: null,
+    topAnchorTurn: null,
 
     registerViewport: viewportRegistry.register,
     registerContentInset: insetRegistry.register,
-    registerUserMessageHeight: userMessageRegistry.register,
+    registerViewportElement: (element) =>
+      registerElementSlot("viewport", element),
+    registerAnchorElement: (element) => registerElementSlot("anchor", element),
+    registerAnchorTargetElement: (element, config) => {
+      store.setState({
+        element: {
+          ...store.getState().element,
+          target: element,
+        },
+        targetConfig: element && config ? config : null,
+      });
+
+      return () => {
+        if (store.getState().element.target !== element) return;
+        store.setState({
+          element: {
+            ...store.getState().element,
+            target: null,
+          },
+          targetConfig: null,
+        });
+      };
+    },
+    setTopAnchorTurn: (topAnchorTurn) => {
+      store.setState({ topAnchorTurn });
+    },
   }));
 
   return store;

package/src/index.ts

@@ -125,7 +125,6 @@ export type {
 // --- external-store ---
 export type { ThreadMessageLike } from "@assistant-ui/core";
 export {
-  getExternalStoreMessage,
   getExternalStoreMessages,
   bindExternalStoreMessage,
 } from "@assistant-ui/core";
@@ -151,25 +150,13 @@ export type {
   LocalRuntimeOptionsBase,
 } from "@assistant-ui/core";
 export { useLocalRuntime } from "./legacy-runtime/runtime-cores/local/useLocalRuntime";
-/**
- * @deprecated Use `useLocalRuntime` instead.
- */
-export { useLocalRuntime as useLocalThreadRuntime } from "./legacy-runtime/runtime-cores/local/useLocalRuntime";
 export type { LocalRuntimeOptions } from "./legacy-runtime/runtime-cores/local/LocalRuntimeOptions";
 
 // --- remote-thread-list ---
 export { useRemoteThreadListRuntime } from "./legacy-runtime/runtime-cores/remote-thread-list/useRemoteThreadListRuntime";
-/** @deprecated Use `useRemoteThreadListRuntime` instead. */
-export { useRemoteThreadListRuntime as unstable_useRemoteThreadListRuntime } from "./legacy-runtime/runtime-cores/remote-thread-list/useRemoteThreadListRuntime";
 export { useCloudThreadListAdapter } from "./legacy-runtime/runtime-cores/remote-thread-list/adapter/cloud";
-/** @deprecated Use `useCloudThreadListAdapter` instead. */
-export { useCloudThreadListAdapter as unstable_useCloudThreadListAdapter } from "./legacy-runtime/runtime-cores/remote-thread-list/adapter/cloud";
 export type { RemoteThreadListAdapter } from "@assistant-ui/core";
-/** @deprecated Use `RemoteThreadListAdapter` instead. */
-export type { RemoteThreadListAdapter as unstable_RemoteThreadListAdapter } from "@assistant-ui/core";
 export { InMemoryThreadListAdapter } from "@assistant-ui/core";
-/** @deprecated Use `InMemoryThreadListAdapter` instead. */
-export { InMemoryThreadListAdapter as unstable_InMemoryThreadListAdapter } from "@assistant-ui/core";
 
 // Re-export from @assistant-ui/core (runtime-cores root)
 export type { ExportedMessageRepositoryItem } from "@assistant-ui/core";
@@ -391,25 +378,3 @@ export {
 } from "./primitives/composer/trigger";
 
 export type { Assistant } from "./augmentations";
-
-// Backwards compatibility — deprecated exports, to be removed in v0.13
-
-/**
- * @deprecated Use `useAui` instead. This alias will be removed in v0.13.
- */
-export { useAui as useAssistantApi } from "@assistant-ui/store";
-
-/**
- * @deprecated Use `useAuiState` instead. This alias will be removed in v0.13.
- */
-export { useAuiState as useAssistantState } from "@assistant-ui/store";
-
-/**
- * @deprecated Use `useAuiEvent` instead. This alias will be removed in v0.13.
- */
-export { useAuiEvent as useAssistantEvent } from "@assistant-ui/store";
-
-/**
- * @deprecated Use `AuiIf` instead. This alias will be removed in v0.13.
- */
-export { AuiIf as AssistantIf } from "@assistant-ui/store";

package/src/legacy-runtime/runtime-cores/assistant-transport/utils.ts

@@ -1,5 +1 @@
-export {
-  toAISDKTools,
-  getEnabledTools,
-  createRequestHeaders,
-} from "@assistant-ui/core";
+export { createRequestHeaders } from "@assistant-ui/core";

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()) {