@assistant-ui/react 0.14.16 → 0.14.19

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

@@ -38,103 +38,97 @@ export type TriggerNavigationResourceOutput = {
  * Computes categories, items, search results, and navigation state from the
  * adapter + current query. Pure derivation — no side effects on the composer.
  */
-export const TriggerNavigationResource = resource(
-  function TriggerNavigationResource({
-    adapter,
-    query,
-    open,
-  }: {
-    adapter: Unstable_TriggerAdapter | undefined;
-    query: string;
-    open: boolean;
-  }): TriggerNavigationResourceOutput {
-    const [activeCategoryId, setActiveCategoryId] = useState<string | null>(
-      null,
-    );
-
-    useEffect(() => {
-      if (!open) setActiveCategoryId(null);
-    }, [open]);
-
-    const categories = useMemo<readonly Unstable_TriggerCategory[]>(() => {
-      if (!open || !adapter) return [];
-      return adapter.categories();
-    }, [open, adapter]);
-
-    const effectiveActiveCategoryId = open ? activeCategoryId : null;
-
-    const allItems = useMemo<readonly Unstable_TriggerItem[]>(() => {
-      if (!effectiveActiveCategoryId || !adapter) return [];
-      return adapter.categoryItems(effectiveActiveCategoryId);
-    }, [effectiveActiveCategoryId, adapter]);
-
-    const searchResults = useMemo<
-      readonly Unstable_TriggerItem[] | null
-    >(() => {
-      if (!open || !adapter || effectiveActiveCategoryId) return null;
-      // If categories exist and query is empty, show categories first (not search)
-      if (!query && categories.length > 0) return null;
-      if (adapter.search) return adapter.search(query);
-
-      // fallback: no adapter.search
-      const all: Unstable_TriggerItem[] = [];
-      const lower = query.toLowerCase();
-      for (const cat of categories) {
-        for (const item of adapter.categoryItems(cat.id)) {
-          if (matchesQuery(item, lower)) {
-            all.push(item);
-          }
+const useTriggerNavigationResource = ({
+  adapter,
+  query,
+  open,
+}: {
+  adapter: Unstable_TriggerAdapter | undefined;
+  query: string;
+  open: boolean;
+}): TriggerNavigationResourceOutput => {
+  const [activeCategoryId, setActiveCategoryId] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (!open) setActiveCategoryId(null);
+  }, [open]);
+
+  const categories = useMemo<readonly Unstable_TriggerCategory[]>(() => {
+    if (!open || !adapter) return [];
+    return adapter.categories();
+  }, [open, adapter]);
+
+  const effectiveActiveCategoryId = open ? activeCategoryId : null;
+
+  const allItems = useMemo<readonly Unstable_TriggerItem[]>(() => {
+    if (!effectiveActiveCategoryId || !adapter) return [];
+    return adapter.categoryItems(effectiveActiveCategoryId);
+  }, [effectiveActiveCategoryId, adapter]);
+
+  const searchResults = useMemo<readonly Unstable_TriggerItem[] | null>(() => {
+    if (!open || !adapter || effectiveActiveCategoryId) return null;
+    // If categories exist and query is empty, show categories first (not search)
+    if (!query && categories.length > 0) return null;
+    if (adapter.search) return adapter.search(query);
+
+    // fallback: no adapter.search
+    const all: Unstable_TriggerItem[] = [];
+    const lower = query.toLowerCase();
+    for (const cat of categories) {
+      for (const item of adapter.categoryItems(cat.id)) {
+        if (matchesQuery(item, lower)) {
+          all.push(item);
         }
       }
-      return all;
-    }, [open, adapter, query, effectiveActiveCategoryId, categories]);
-
-    const isSearchMode = searchResults !== null;
-
-    const filteredCategories = useMemo(() => {
-      if (isSearchMode) return [];
-      if (!query) return categories;
-      const lower = query.toLowerCase();
-      return categories.filter((cat) =>
-        cat.label.toLowerCase().includes(lower),
-      );
-    }, [categories, query, isSearchMode]);
-
-    const filteredItems = useMemo(() => {
-      if (isSearchMode) return searchResults ?? [];
-      if (!query) return allItems;
-      const lower = query.toLowerCase();
-      return allItems.filter((item) => matchesQuery(item, lower));
-    }, [allItems, query, isSearchMode, searchResults]);
-
-    const navigableList = useMemo(() => {
-      if (isSearchMode) return searchResults ?? [];
-      if (effectiveActiveCategoryId) return filteredItems;
-      return filteredCategories;
-    }, [
-      isSearchMode,
-      searchResults,
-      effectiveActiveCategoryId,
-      filteredItems,
-      filteredCategories,
-    ]);
-
-    const selectCategory = useEffectEvent((categoryId: string) => {
-      setActiveCategoryId(categoryId);
-    });
-
-    const goBack = useEffectEvent(() => {
-      setActiveCategoryId(null);
-    });
-
-    return {
-      categories: filteredCategories,
-      items: filteredItems,
-      isSearchMode,
-      activeCategoryId: effectiveActiveCategoryId,
-      navigableList,
-      selectCategory,
-      goBack,
-    };
-  },
-);
+    }
+    return all;
+  }, [open, adapter, query, effectiveActiveCategoryId, categories]);
+
+  const isSearchMode = searchResults !== null;
+
+  const filteredCategories = useMemo(() => {
+    if (isSearchMode) return [];
+    if (!query) return categories;
+    const lower = query.toLowerCase();
+    return categories.filter((cat) => cat.label.toLowerCase().includes(lower));
+  }, [categories, query, isSearchMode]);
+
+  const filteredItems = useMemo(() => {
+    if (isSearchMode) return searchResults ?? [];
+    if (!query) return allItems;
+    const lower = query.toLowerCase();
+    return allItems.filter((item) => matchesQuery(item, lower));
+  }, [allItems, query, isSearchMode, searchResults]);
+
+  const navigableList = useMemo(() => {
+    if (isSearchMode) return searchResults ?? [];
+    if (effectiveActiveCategoryId) return filteredItems;
+    return filteredCategories;
+  }, [
+    isSearchMode,
+    searchResults,
+    effectiveActiveCategoryId,
+    filteredItems,
+    filteredCategories,
+  ]);
+
+  const selectCategory = useEffectEvent((categoryId: string) => {
+    setActiveCategoryId(categoryId);
+  });
+
+  const goBack = useEffectEvent(() => {
+    setActiveCategoryId(null);
+  });
+
+  return {
+    categories: filteredCategories,
+    items: filteredItems,
+    isSearchMode,
+    activeCategoryId: effectiveActiveCategoryId,
+    navigableList,
+    selectCategory,
+    goBack,
+  };
+};
+
+export const TriggerNavigationResource = resource(useTriggerNavigationResource);

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);
+  });
 });