@assistant-ui/react 0.14.15 → 0.14.18

package/src/primitives/composer/trigger/triggerSelectionResource.ts

@@ -33,91 +33,91 @@ export type TriggerSelectionResourceOutput = {
 };
 
 /** Owns composer text mutation + behavior dispatch on item selection. */
-export const TriggerSelectionResource = resource(
-  function TriggerSelectionResource({
-    behavior,
-    trigger,
-    aui,
-    triggerChar,
-    setCursorPosition,
-    onSelected,
-  }: {
-    behavior: TriggerBehavior | undefined;
-    trigger: DetectedTrigger | null;
-    aui: AssistantClient;
-    triggerChar: string;
-    setCursorPosition: (pos: number) => void;
-    /** Called after a successful selection so the parent can reset nav state. */
-    onSelected: () => void;
-  }): TriggerSelectionResourceOutput {
-    // Select-item override: lets Lexical's DirectivePlugin intercept selection
-    // and drive its own node insertion.
-    const selectItemOverrideRef = useRef<SelectItemOverride | null>(null);
+const useTriggerSelectionResource = ({
+  behavior,
+  trigger,
+  aui,
+  triggerChar,
+  setCursorPosition,
+  onSelected,
+}: {
+  behavior: TriggerBehavior | undefined;
+  trigger: DetectedTrigger | null;
+  aui: AssistantClient;
+  triggerChar: string;
+  setCursorPosition: (pos: number) => void;
+  /** Called after a successful selection so the parent can reset nav state. */
+  onSelected: () => void;
+}): TriggerSelectionResourceOutput => {
+  // Select-item override: lets Lexical's DirectivePlugin intercept selection
+  // and drive its own node insertion.
+  const selectItemOverrideRef = useRef<SelectItemOverride | null>(null);
 
-    const registerSelectItemOverride = useEffectEvent(
-      (fn: SelectItemOverride) => {
-        selectItemOverrideRef.current = fn;
-        return () => {
-          if (selectItemOverrideRef.current === fn) {
-            selectItemOverrideRef.current = null;
-          }
-        };
-      },
-    );
+  const registerSelectItemOverride = useEffectEvent(
+    (fn: SelectItemOverride) => {
+      selectItemOverrideRef.current = fn;
+      return () => {
+        if (selectItemOverrideRef.current === fn) {
+          selectItemOverrideRef.current = null;
+        }
+      };
+    },
+  );
 
-    const selectItem = useEffectEvent((item: Unstable_TriggerItem) => {
-      if (!trigger || !behavior) return;
+  const selectItem = useEffectEvent((item: Unstable_TriggerItem) => {
+    if (!trigger || !behavior) return;
 
-      if (selectItemOverrideRef.current?.(item)) {
-        onSelected();
-        return;
-      }
+    if (selectItemOverrideRef.current?.(item)) {
+      onSelected();
+      return;
+    }
 
-      const currentText = aui.composer().getState().text;
-      const before = currentText.slice(0, trigger.offset);
-      const after = currentText.slice(
-        trigger.offset + triggerChar.length + trigger.query.length,
-      );
+    const currentText = aui.composer().getState().text;
+    const before = currentText.slice(0, trigger.offset);
+    const after = currentText.slice(
+      trigger.offset + triggerChar.length + trigger.query.length,
+    );
+
+    const insertDirective = () => {
+      const directive = behavior.formatter.serialize(item);
+      aui
+        .composer()
+        .setText(
+          before + directive + (after.startsWith(" ") ? after : ` ${after}`),
+        );
+    };
 
-      const insertDirective = () => {
-        const directive = behavior.formatter.serialize(item);
+    if (behavior.kind === "directive") {
+      insertDirective();
+      behavior.onInserted?.(item);
+    } else {
+      if (behavior.removeOnExecute) {
         aui
           .composer()
-          .setText(
-            before + directive + (after.startsWith(" ") ? after : ` ${after}`),
-          );
-      };
-
-      if (behavior.kind === "directive") {
-        insertDirective();
-        behavior.onInserted?.(item);
+          .setText(before + (after.startsWith(" ") ? after.slice(1) : after));
       } else {
-        if (behavior.removeOnExecute) {
-          aui
-            .composer()
-            .setText(before + (after.startsWith(" ") ? after.slice(1) : after));
-        } else {
-          // Leave directive chip in the composer as an audit trail
-          insertDirective();
-        }
-        behavior.onExecute(item);
+        // Leave directive chip in the composer as an audit trail
+        insertDirective();
       }
+      behavior.onExecute(item);
+    }
 
-      onSelected();
-    });
+    onSelected();
+  });
 
-    const close = useEffectEvent(() => {
-      onSelected();
-      // Move cursor before the trigger so trigger detection deactivates
-      if (trigger) {
-        setCursorPosition(trigger.offset);
-      }
-    });
+  const close = useEffectEvent(() => {
+    onSelected();
+    // Move cursor before the trigger so trigger detection deactivates
+    if (trigger) {
+      setCursorPosition(trigger.offset);
+    }
+  });
 
-    return {
-      selectItem,
-      close,
-      registerSelectItemOverride,
-    };
-  },
-);
+  return {
+    selectItem,
+    close,
+    registerSelectItemOverride,
+  };
+};
+
+export const TriggerSelectionResource = resource(useTriggerSelectionResource);

package/src/primitives/messagePart/MessagePartText.tsx

@@ -8,7 +8,7 @@ import {
   type ElementType,
 } from "react";
 import { useMessagePartText } from "./useMessagePartText";
-import { useSmooth } from "../../utils/smooth/useSmooth";
+import { useSmooth, type SmoothOptions } from "../../utils/smooth/useSmooth";
 
 export namespace MessagePartPrimitiveText {
   export type Element = ComponentRef<typeof Primitive.span>;
@@ -19,9 +19,10 @@ export namespace MessagePartPrimitiveText {
     /**
      * Whether to enable smooth text streaming animation.
      * When enabled, text appears with a typing effect as it streams in.
+     * Pass a `SmoothOptions` object to tune the reveal rate.
      * @default true
      */
-    smooth?: boolean;
+    smooth?: boolean | SmoothOptions;
     /**
      * The HTML element or React component to render as.
      * @default "span"

package/src/primitives/reasoning/useScrollLock.ts

@@ -64,21 +64,44 @@ export const useScrollLock = <T extends HTMLElement = HTMLElement>(
     const scrollPosition = scrollContainer.scrollTop;
     const scrollbarWidth = scrollContainer.style.scrollbarWidth;
 
+    // Hiding the scrollbar collapses its gutter on classic scrollbars, which
+    // shifts centered content horizontally; compensate with padding on the
+    // side the scrollbar occupies (the left side in RTL).
+    const computed = getComputedStyle(scrollContainer);
+    const paddingSide =
+      computed.direction === "rtl" ? "paddingLeft" : "paddingRight";
+    const previousPadding = scrollContainer.style[paddingSide];
+    const scrollbarSize =
+      scrollContainer.offsetWidth -
+      scrollContainer.clientWidth -
+      parseFloat(computed.borderLeftWidth) -
+      parseFloat(computed.borderRightWidth);
+
     scrollContainer.style.scrollbarWidth = "none";
+    if (scrollbarSize > 0) {
+      scrollContainer.style[paddingSide] = `${
+        parseFloat(computed[paddingSide]) + scrollbarSize
+      }px`;
+    }
+
+    const restoreStyles = () => {
+      scrollContainer.style.scrollbarWidth = scrollbarWidth;
+      scrollContainer.style[paddingSide] = previousPadding;
+    };
 
     const resetPosition = () => (scrollContainer.scrollTop = scrollPosition);
     scrollContainer.addEventListener("scroll", resetPosition);
 
     const timeoutId = setTimeout(() => {
       scrollContainer.removeEventListener("scroll", resetPosition);
-      scrollContainer.style.scrollbarWidth = scrollbarWidth;
+      restoreStyles();
       cleanupRef.current = null;
     }, animationDuration);
 
     cleanupRef.current = () => {
       clearTimeout(timeoutId);
       scrollContainer.removeEventListener("scroll", resetPosition);
-      scrollContainer.style.scrollbarWidth = scrollbarWidth;
+      restoreStyles();
     };
   }, [animationDuration, animatedElementRef]);
 

package/src/primitives/thread/useThreadViewportAutoScroll.ts

@@ -180,9 +180,17 @@ export const useThreadViewportAutoScroll = <TElement extends HTMLElement>({
   });
 
   const scrollRef = useManagedRef<HTMLElement>((el) => {
+    // A pointer gesture invalidates pending bottom-scroll intent; otherwise an
+    // intent kept alive by a non-overflowing thread (see handleScroll) hijacks
+    // the next content growth, e.g. expanding a collapsible tool call.
+    const cancelPendingScrollToBottom = () => {
+      scrollingToBottomBehaviorRef.current = null;
+    };
     el.addEventListener("scroll", handleScroll);
+    el.addEventListener("pointerdown", cancelPendingScrollToBottom);
     return () => {
       el.removeEventListener("scroll", handleScroll);
+      el.removeEventListener("pointerdown", cancelPendingScrollToBottom);
     };
   });
 

package/src/tests/external-thread-branches.test.tsx

@@ -0,0 +1,160 @@
+// @vitest-environment jsdom
+
+import { render } from "@testing-library/react";
+import type { FC } from "react";
+import { describe, it, expect, vi } from "vitest";
+import { useAui, AuiProvider } from "@assistant-ui/store";
+import type {
+  ExternalThreadBranchAdapter,
+  ThreadMessage,
+} from "@assistant-ui/core";
+import {
+  ExternalThread,
+  type ExternalThreadProps,
+} from "../client/ExternalThread";
+
+const message = (id: string, role: "user" | "assistant"): ThreadMessage =>
+  ({
+    id,
+    role,
+    content: [{ type: "text", text: `text of ${id}` }],
+    createdAt: new Date(1718000000000),
+    ...(role === "assistant"
+      ? { status: { type: "complete", reason: "stop" } }
+      : { attachments: [] }),
+    metadata: { custom: {} },
+  }) as ThreadMessage;
+
+const renderThread = (props: ExternalThreadProps) => {
+  const captured: { aui?: ReturnType<typeof useAui> } = {};
+  const Capture: FC = () => {
+    captured.aui = useAui();
+    return null;
+  };
+  const App: FC<{ threadProps: ExternalThreadProps }> = ({ threadProps }) => {
+    const aui = useAui({ thread: ExternalThread(threadProps) });
+    return (
+      <AuiProvider value={aui}>
+        <Capture />
+      </AuiProvider>
+    );
+  };
+  const utils = render(<App threadProps={props} />);
+  return {
+    aui: () => captured.aui!,
+    rerender: (next: ExternalThreadProps) =>
+      utils.rerender(<App threadProps={next} />),
+  };
+};
+
+const baseProps = (
+  branches?: ExternalThreadBranchAdapter,
+): ExternalThreadProps => ({
+  messages: [message("u1", "user"), message("a2", "assistant")],
+  isRunning: false,
+  ...(branches ? { branches } : {}),
+});
+
+const adapterFor = (
+  ids: readonly string[],
+  switchToBranch = vi.fn(),
+): ExternalThreadBranchAdapter => ({
+  getBranches: (messageId) => (ids.includes(messageId) ? ids : []),
+  switchToBranch,
+});
+
+describe("ExternalThread branches", () => {
+  it("defaults to single-branch state without an adapter", () => {
+    const { aui } = renderThread(baseProps());
+    const state = aui().thread().getState();
+    expect(state.messages[1]!.branchNumber).toBe(1);
+    expect(state.messages[1]!.branchCount).toBe(1);
+    expect(state.capabilities.switchToBranch).toBe(false);
+    expect(() =>
+      aui().thread().message({ index: 1 }).switchToBranch({ position: "next" }),
+    ).not.toThrow();
+  });
+
+  it("derives branchNumber and branchCount from the adapter", () => {
+    const { aui } = renderThread(baseProps(adapterFor(["a1", "a2", "a3"])));
+    const state = aui().thread().getState();
+    expect(state.messages[1]!.branchNumber).toBe(2);
+    expect(state.messages[1]!.branchCount).toBe(3);
+    expect(state.capabilities.switchToBranch).toBe(true);
+  });
+
+  it("resolves previous and next to sibling ids and no-ops at the edges", () => {
+    const switchToBranch = vi.fn();
+    const { aui } = renderThread(
+      baseProps(adapterFor(["a1", "a2", "a3"], switchToBranch)),
+    );
+    const msg = () => aui().thread().message({ index: 1 });
+
+    msg().switchToBranch({ position: "previous" });
+    expect(switchToBranch).toHaveBeenLastCalledWith("a1");
+    msg().switchToBranch({ position: "next" });
+    expect(switchToBranch).toHaveBeenLastCalledWith("a3");
+
+    switchToBranch.mockClear();
+    const edge = renderThread({
+      messages: [message("u1", "user"), message("a1", "assistant")],
+      isRunning: false,
+      branches: adapterFor(["a1", "a2"], switchToBranch),
+    });
+    edge.aui().thread().message({ index: 1 }).switchToBranch({
+      position: "previous",
+    });
+    expect(switchToBranch).not.toHaveBeenCalled();
+  });
+
+  it("forwards an explicit branchId unvalidated but ignores self-switches", () => {
+    const switchToBranch = vi.fn();
+    const { aui } = renderThread(
+      baseProps(adapterFor(["a1", "a2"], switchToBranch)),
+    );
+    const msg = () => aui().thread().message({ index: 1 });
+
+    msg().switchToBranch({ branchId: "not-in-the-list" });
+    expect(switchToBranch).toHaveBeenLastCalledWith("not-in-the-list");
+
+    switchToBranch.mockClear();
+    msg().switchToBranch({ branchId: "a2" });
+    expect(switchToBranch).not.toHaveBeenCalled();
+  });
+
+  it("falls back to single-branch state when getBranches omits the own id", () => {
+    const switchToBranch = vi.fn();
+    const { aui } = renderThread(
+      baseProps({
+        getBranches: () => ["b1", "b2"],
+        switchToBranch,
+      }),
+    );
+    const state = aui().thread().getState();
+    expect(state.messages[1]!.branchNumber).toBe(1);
+    expect(state.messages[1]!.branchCount).toBe(1);
+
+    aui().thread().message({ index: 1 }).switchToBranch({ position: "next" });
+    expect(switchToBranch).not.toHaveBeenCalled();
+  });
+
+  it("keeps message state identity across adapter recreation with equal values", () => {
+    const messages = [message("u1", "user"), message("a2", "assistant")];
+    const { aui, rerender } = renderThread({
+      messages,
+      isRunning: false,
+      branches: adapterFor(["a1", "a2", "a3"]),
+    });
+    const before = aui().thread().getState().messages[1];
+
+    rerender({
+      messages,
+      isRunning: false,
+      branches: adapterFor(["a1", "a2", "a3"]),
+    });
+    const after = aui().thread().getState().messages[1];
+
+    expect(after!.branchNumber).toBe(2);
+    expect(before!.parts[0]).toBe(after!.parts[0]);
+  });
+});

package/src/tests/shouldContinue.test.ts

@@ -86,4 +86,37 @@ describe("shouldContinue", () => {
     });
     expect(shouldContinue(msg, undefined)).toBe(true);
   });
+
+  it("returns false while a tool call has a pending approval", () => {
+    const msg = makeMessage({
+      status: { type: "requires-action", reason: "tool-calls" },
+      content: [{ ...toolCall("deploy"), approval: { id: "a1" } }],
+    });
+    expect(shouldContinue(msg, undefined)).toBe(false);
+    expect(shouldContinue(msg, ["human-approval"])).toBe(false);
+  });
+
+  it("returns true when a decided approval has no result", () => {
+    const msg = makeMessage({
+      status: { type: "requires-action", reason: "tool-calls" },
+      content: [
+        { ...toolCall("deploy"), approval: { id: "a1", approved: true } },
+      ],
+    });
+    expect(shouldContinue(msg, undefined)).toBe(true);
+    expect(shouldContinue(msg, ["human-approval"])).toBe(true);
+  });
+
+  it("exempts approval-gated tool calls from the human tool result requirement", () => {
+    const msg = makeMessage({
+      status: { type: "requires-action", reason: "tool-calls" },
+      content: [
+        {
+          ...toolCall("human-approval"),
+          approval: { id: "a1", approved: true },
+        },
+      ],
+    });
+    expect(shouldContinue(msg, ["human-approval"])).toBe(true);
+  });
 });

package/src/unstable/useComposerInputHistory.test.tsx

@@ -0,0 +1,201 @@
+/** @vitest-environment jsdom */
+import { createEvent, fireEvent, render, screen } from "@testing-library/react";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+
+const fixture = {
+  messages: [] as { role: string; content: { type: string; text: string }[] }[],
+  composerType: "thread",
+  activeAria: null as object | null,
+  switchedToHandlers: [] as (() => void)[],
+};
+const setText = vi.fn();
+
+vi.mock("@assistant-ui/store", () => ({
+  useAui: () => ({
+    composer: () => ({
+      getState: () => ({ type: fixture.composerType }),
+      setText,
+    }),
+    thread: () => ({ getState: () => ({ messages: fixture.messages }) }),
+    on: (_event: string, cb: () => void) => {
+      fixture.switchedToHandlers.push(cb);
+      return () => {};
+    },
+  }),
+}));
+vi.mock("@assistant-ui/tap", () => ({
+  flushTapSync: (fn: () => void) => fn(),
+}));
+vi.mock("../primitives/composer/trigger/TriggerPopoverRootContext", () => ({
+  useTriggerPopoverRootContextOptional: () => ({
+    getActiveAria: () => fixture.activeAria,
+  }),
+}));
+
+vi.stubGlobal("requestAnimationFrame", (cb: FrameRequestCallback) => {
+  cb(0);
+  return 0;
+});
+
+import { unstable_useComposerInputHistory } from "./useComposerInputHistory";
+
+const user = (text: string) => ({
+  role: "user",
+  content: [{ type: "text", text }],
+});
+const assistant = (text: string) => ({
+  role: "assistant",
+  content: [{ type: "text", text }],
+});
+
+function Harness() {
+  const history = unstable_useComposerInputHistory();
+  return <textarea data-testid="input" {...history} />;
+}
+
+const setup = (value = "") => {
+  const utils = render(<Harness />);
+  const textarea = screen.getByTestId("input") as HTMLTextAreaElement;
+  textarea.value = value;
+  textarea.setSelectionRange(value.length, value.length);
+  return { ...utils, textarea };
+};
+
+const arrow = (
+  textarea: HTMLTextAreaElement,
+  key: "ArrowUp" | "ArrowDown",
+  init: Record<string, unknown> = {},
+) => fireEvent.keyDown(textarea, { key, ...init });
+
+beforeEach(() => {
+  fixture.messages = [user("first"), assistant("reply"), user("second")];
+  fixture.composerType = "thread";
+  fixture.activeAria = null;
+  fixture.switchedToHandlers = [];
+  setText.mockClear();
+});
+
+describe("unstable_useComposerInputHistory", () => {
+  it("recalls the newest user message on ArrowUp in an empty composer", () => {
+    const { textarea } = setup("");
+    const notPrevented = arrow(textarea, "ArrowUp");
+    expect(notPrevented).toBe(false);
+    expect(setText).toHaveBeenCalledWith("second");
+  });
+
+  it("steps to older entries and consumes the key at the oldest", () => {
+    const { textarea } = setup("");
+    arrow(textarea, "ArrowUp");
+    textarea.value = "second";
+    arrow(textarea, "ArrowUp");
+    expect(setText).toHaveBeenLastCalledWith("first");
+
+    textarea.value = "first";
+    const notPrevented = arrow(textarea, "ArrowUp");
+    expect(notPrevented).toBe(false);
+    expect(setText).toHaveBeenCalledTimes(2);
+  });
+
+  it("restores the draft snapshot on ArrowDown past the newest", () => {
+    const { textarea } = setup("  ");
+    arrow(textarea, "ArrowUp");
+    textarea.value = "second";
+    arrow(textarea, "ArrowDown");
+    expect(setText).toHaveBeenLastCalledWith("  ");
+
+    textarea.value = "  ";
+    const notPrevented = arrow(textarea, "ArrowDown");
+    expect(notPrevented).toBe(true);
+    expect(setText).toHaveBeenCalledTimes(2);
+  });
+
+  it("ignores ArrowUp when the composer holds a typed draft", () => {
+    const { textarea } = setup("draft in progress");
+    const notPrevented = arrow(textarea, "ArrowUp");
+    expect(notPrevented).toBe(true);
+    expect(setText).not.toHaveBeenCalled();
+  });
+
+  it("keeps native arrows when the caret is not on the first line", () => {
+    fixture.messages = [user("other"), user("line1\nline2")];
+    const { textarea } = setup("");
+    arrow(textarea, "ArrowUp");
+    expect(setText).toHaveBeenLastCalledWith("line1\nline2");
+    textarea.value = "line1\nline2";
+    textarea.setSelectionRange(8, 8);
+    const notPrevented = arrow(textarea, "ArrowUp");
+    expect(notPrevented).toBe(true);
+    expect(setText).toHaveBeenCalledTimes(1);
+  });
+
+  it("yields to an open trigger popover", () => {
+    fixture.activeAria = {};
+    const { textarea } = setup("");
+    const notPrevented = arrow(textarea, "ArrowUp");
+    expect(notPrevented).toBe(true);
+    expect(setText).not.toHaveBeenCalled();
+  });
+
+  it("ignores IME composition, modifiers, selections, and prevented events", () => {
+    const { textarea } = setup("");
+    fireEvent.keyDown(textarea, { key: "ArrowUp", isComposing: true });
+    arrow(textarea, "ArrowUp", { shiftKey: true });
+    arrow(textarea, "ArrowUp", { metaKey: true });
+    textarea.value = "ab";
+    textarea.setSelectionRange(0, 2);
+    arrow(textarea, "ArrowUp");
+
+    textarea.value = "";
+    textarea.setSelectionRange(0, 0);
+    const prevented = createEvent.keyDown(textarea, { key: "ArrowUp" });
+    prevented.preventDefault();
+    fireEvent(textarea, prevented);
+    expect(setText).not.toHaveBeenCalled();
+  });
+
+  it("derives the ring from trimmed user texts, newest first, deduped", () => {
+    fixture.messages = [
+      user("first"),
+      user("first"),
+      assistant("noise"),
+      user("   "),
+      user("second"),
+    ];
+    const { textarea } = setup("");
+    arrow(textarea, "ArrowUp");
+    expect(setText).toHaveBeenLastCalledWith("second");
+    textarea.value = "second";
+    arrow(textarea, "ArrowUp");
+    expect(setText).toHaveBeenLastCalledWith("first");
+    textarea.value = "first";
+    arrow(textarea, "ArrowUp");
+    expect(setText).toHaveBeenCalledTimes(2);
+  });
+
+  it("starts a fresh browse after the composer was cleared externally", () => {
+    const { textarea } = setup("");
+    arrow(textarea, "ArrowUp");
+    fixture.messages = [...fixture.messages, user("third")];
+    textarea.value = "";
+    arrow(textarea, "ArrowUp");
+    expect(setText).toHaveBeenLastCalledWith("third");
+  });
+
+  it("is inert on edit composers", () => {
+    fixture.composerType = "edit";
+    const { textarea } = setup("");
+    const notPrevented = arrow(textarea, "ArrowUp");
+    expect(notPrevented).toBe(true);
+    expect(setText).not.toHaveBeenCalled();
+  });
+
+  it("resets browsing when the thread switches", () => {
+    const { textarea } = setup("");
+    arrow(textarea, "ArrowUp");
+    fixture.switchedToHandlers.forEach((cb) => cb());
+    textarea.value = "second";
+    const notPrevented = arrow(textarea, "ArrowDown");
+    expect(notPrevented).toBe(true);
+    expect(setText).toHaveBeenCalledTimes(1);
+  });
+});