@assistant-ui/react 0.15.31 → 0.15.32

package/src/primitives/threadListItem/ThreadListKeyboardNav.test.tsx

@@ -112,6 +112,31 @@ describe("thread list keyboard navigation", () => {
     expect(document.activeElement).toBe(first);
   });
 
+  it("skips disabled triggers in both directions without wrapping", () => {
+    const { container } = render(
+      <ThreadListPrimitiveRoot>
+        {[0, 1, 2].map((i) => (
+          <ThreadListItemPrimitiveRoot key={i}>
+            <ThreadListItemPrimitiveTrigger disabled={i === 1}>
+              item {i}
+            </ThreadListItemPrimitiveTrigger>
+          </ThreadListItemPrimitiveRoot>
+        ))}
+      </ThreadListPrimitiveRoot>,
+    );
+    const [first, , third] = triggers(container);
+
+    first!.focus();
+    expect(fireEvent.keyDown(first!, { key: "ArrowDown" })).toBe(false);
+    expect(document.activeElement).toBe(third);
+    expect(fireEvent.keyDown(third!, { key: "ArrowDown" })).toBe(true);
+    expect(document.activeElement).toBe(third);
+    expect(fireEvent.keyDown(third!, { key: "ArrowUp" })).toBe(false);
+    expect(document.activeElement).toBe(first);
+    expect(fireEvent.keyDown(first!, { key: "ArrowUp" })).toBe(true);
+    expect(document.activeElement).toBe(first);
+  });
+
   it("moves between an item and its More button with right/left arrows", () => {
     const { trigger, more } = renderItem();
 

package/src/utils/smooth/useSmooth.test.tsx

@@ -8,12 +8,14 @@ import type {
   TextMessagePart,
 } from "@assistant-ui/core";
 
-const part = {};
-vi.mock("@assistant-ui/store", () => ({
-  useAui: () => ({ part }),
+const aui = vi.hoisted(() => ({ part: {} }));
+vi.mock("@assistant-ui/store", async (importOriginal) => ({
+  ...(await importOriginal<typeof import("@assistant-ui/store")>()),
+  useAui: () => aui,
   useAuiState: (selector: () => unknown) => selector(),
 }));
-vi.mock("./SmoothContext", () => ({
+vi.mock("./SmoothContext", async (importOriginal) => ({
+  ...(await importOriginal<typeof import("./SmoothContext")>()),
   useSmoothStatusStore: () => null,
 }));
 
@@ -163,6 +165,113 @@ describe("useSmooth", () => {
     expect(result.current.status.type).toBe("running");
   });
 
+  it("keeps completed text visible when smoothing is enabled", () => {
+    vi.spyOn(performance, "now").mockReturnValue(1000);
+    vi.spyOn(globalThis, "requestAnimationFrame").mockReturnValue(1);
+    vi.spyOn(globalThis, "cancelAnimationFrame").mockImplementation(() => {});
+    const { result, rerender } = renderHook(
+      ({ state, smooth }) => useSmooth(state, smooth),
+      { initialProps: { state: textState("Hello"), smooth: false } },
+    );
+    rerender({ state: runningState("Hello world"), smooth: false });
+    rerender({ state: textState("Hello world"), smooth: false });
+    expect(result.current.text).toBe("Hello world");
+
+    rerender({ state: textState("Hello world"), smooth: true });
+    expect(result.current.text).toBe("Hello world");
+    expect(result.current.status.type).toBe("complete");
+  });
+
+  it("starts a new part from its own cursor when enabling smoothing in the same update", () => {
+    let now = 1000;
+    let queued: FrameRequestCallback | undefined;
+    vi.spyOn(performance, "now").mockImplementation(() => now);
+    vi.spyOn(globalThis, "requestAnimationFrame").mockImplementation((cb) => {
+      queued = cb;
+      return 1;
+    });
+    vi.spyOn(globalThis, "cancelAnimationFrame").mockImplementation(() => {
+      queued = undefined;
+    });
+    const { result, rerender } = renderHook(
+      ({ state, smooth }) => useSmooth(state, smooth),
+      {
+        initialProps: {
+          state: runningState("Hello"),
+          smooth: false as boolean | SmoothOptions,
+        },
+      },
+    );
+    expect(result.current.text).toBe("Hello");
+
+    aui.part = {};
+    rerender({
+      state: runningState("Hello world"),
+      smooth: { maxCharsPerFrame: 1 },
+    });
+    expect(result.current.text).toBe("");
+    act(() => {
+      now += 16;
+      const callback = queued;
+      queued = undefined;
+      callback?.(now);
+    });
+    expect(result.current.text).toBe("H");
+  });
+
+  it.each([false, true])(
+    "animates only new text after reduced motion is disabled, with a part switch: %s",
+    (switchPart) => {
+      let now = 1000;
+      let queued: FrameRequestCallback | undefined;
+      vi.spyOn(performance, "now").mockImplementation(() => now);
+      vi.spyOn(globalThis, "requestAnimationFrame").mockImplementation((cb) => {
+        queued = cb;
+        return 1;
+      });
+      vi.spyOn(globalThis, "cancelAnimationFrame").mockImplementation(() => {
+        queued = undefined;
+      });
+      const listeners = new Set<() => void>();
+      const media = {
+        matches: true,
+        addEventListener: (_event: string, listener: () => void) =>
+          listeners.add(listener),
+        removeEventListener: (_event: string, listener: () => void) =>
+          listeners.delete(listener),
+      };
+      Object.defineProperty(window, "matchMedia", {
+        configurable: true,
+        value: () => media,
+      });
+      const { result, rerender } = renderHook(
+        (state) => useSmooth(state, { maxCharsPerFrame: 1 }),
+        { initialProps: runningState("Hello") },
+      );
+      if (switchPart) aui.part = {};
+      rerender(runningState("Hello world"));
+      expect(result.current.text).toBe("Hello world");
+
+      act(() => {
+        media.matches = false;
+        for (const listener of listeners) listener();
+      });
+      expect(result.current.text).toBe("Hello world");
+
+      rerender(runningState("Hello world!"));
+      expect(result.current.text).toBe("Hello world");
+      act(() => {
+        now += 16;
+        const callback = queued;
+        queued = undefined;
+        callback?.(now);
+      });
+      expect(result.current.text).toBe("Hello world!");
+      rerender(textState("Hello world!"));
+      expect(result.current.status.type).toBe("complete");
+    },
+  );
+
   it.each([
     { name: "negative drain time", options: { drainMs: -1 } },
     { name: "NaN character interval", options: { maxCharIntervalMs: NaN } },

package/src/utils/smooth/useSmooth.ts

@@ -217,6 +217,17 @@ export const useSmooth = (
   const [animatorRef] = useState(
     () => new TextStreamAnimator(displayedText, setText),
   );
+  const [prevEnabled, setPrevEnabled] = useState(enabled);
+  if (enabled !== prevEnabled) {
+    setPrevEnabled(enabled);
+    if (
+      enabled &&
+      part === prevPart &&
+      text.startsWith(animatorRef.currentText)
+    ) {
+      setDisplayedText(animatorRef.currentText);
+    }
+  }
 
   useEffect(() => {
     animatorRef.drainMs = drainMs;
@@ -227,13 +238,16 @@ export const useSmooth = (
 
   const animatorPartRef = useRef(part);
   useEffect(() => {
+    const partChanged = animatorPartRef.current !== part;
+    animatorPartRef.current = part;
     if (!enabled) {
       animatorRef.stop();
+      animatorRef.currentText = text;
+      animatorRef.targetText = text;
+      animatorRef.lastCommitTime = -Infinity;
       return;
     }
 
-    const partChanged = animatorPartRef.current !== part;
-    animatorPartRef.current = part;
     // A new part whose text shares a prefix with the previous target would
     // keep the stale cursor and flicker without this reset.
     if (partChanged || !text.startsWith(animatorRef.targetText)) {

package/src/primitives/chainOfThought/ChainOfThoughtAccordionTrigger.ts

@@ -1,49 +0,0 @@
-"use client";
-
-import {
-  type ActionButtonElement,
-  type ActionButtonProps,
-  createActionButton,
-} from "../../utils/createActionButton";
-import { useCallback } from "react";
-import { useAuiState, useAui } from "@assistant-ui/store";
-
-const useChainOfThoughtAccordionTrigger = () => {
-  const aui = useAui();
-  const collapsed = useAuiState((s) => s.chainOfThought.collapsed);
-
-  const callback = useCallback(() => {
-    aui.chainOfThought.setCollapsed(!collapsed);
-  }, [aui, collapsed]);
-
-  return callback;
-};
-
-export namespace ChainOfThoughtPrimitiveAccordionTrigger {
-  export type Element = ActionButtonElement;
-  /**
-   * Props for the ChainOfThoughtPrimitive.AccordionTrigger component.
-   * Inherits all button element props and action button functionality.
-   */
-  export type Props = ActionButtonProps<
-    typeof useChainOfThoughtAccordionTrigger
-  >;
-}
-
-/**
- * A button component that toggles the collapsed state of the chain of thought accordion.
- *
- * This component automatically handles the toggle functionality, expanding or collapsing
- * the chain of thought parts when clicked.
- *
- * @example
- * ```tsx
- * <ChainOfThoughtPrimitive.AccordionTrigger>
- *   Toggle Reasoning
- * </ChainOfThoughtPrimitive.AccordionTrigger>
- * ```
- */
-export const ChainOfThoughtPrimitiveAccordionTrigger = createActionButton(
-  "ChainOfThoughtPrimitive.AccordionTrigger",
-  useChainOfThoughtAccordionTrigger,
-);