@assistant-ui/react 0.15.29 → 0.15.30

package/src/model-context/makeAssistantVisible.test.tsx

@@ -136,6 +136,21 @@ const runEditTool = async (
   await task;
 };
 
+const expectDefaultSettleDelay = async (start: () => Promise<unknown>) => {
+  await act(async () => {
+    const settled = vi.fn();
+    const task = start();
+    void task.then(settled);
+
+    await vi.advanceTimersByTimeAsync(1999);
+    expect(settled).not.toHaveBeenCalled();
+
+    await vi.advanceTimersByTimeAsync(1);
+    expect(settled).toHaveBeenCalledOnce();
+    await task;
+  });
+};
+
 describe("makeAssistantVisible", () => {
   beforeEach(() => {
     registerMock.mockClear();
@@ -191,21 +206,14 @@ describe("makeAssistantVisible", () => {
     });
     const input = render(<EditableInput />).getByRole("textbox");
     const editId = (input as HTMLInputElement).dataset.editId!;
-    const setTimeoutSpy = vi.spyOn(globalThis, "setTimeout");
 
     expect(
       (input as HTMLInputElement).dataset.actionSettleDelay,
     ).toBeUndefined();
 
-    const task = getRegisteredTools().edit!.execute({
-      editId,
-      value: "updated",
-    });
-
-    expect(setTimeoutSpy).toHaveBeenCalledWith(expect.any(Function), 2000);
-    await vi.runAllTimersAsync();
-    await task;
-    setTimeoutSpy.mockRestore();
+    await expectDefaultSettleDelay(() =>
+      getRegisteredTools().edit!.execute({ editId, value: "updated" }),
+    );
   });
 
   it("uses the default when the rendered settle delay is invalid", async () => {
@@ -218,14 +226,9 @@ describe("makeAssistantVisible", () => {
     );
     const clickId = (button as HTMLButtonElement).dataset.clickId!;
     (button as HTMLButtonElement).dataset.actionSettleDelay = "invalid";
-    const setTimeoutSpy = vi.spyOn(globalThis, "setTimeout");
-
-    const task = getRegisteredTools().click!.execute({ clickId });
-
-    expect(setTimeoutSpy).toHaveBeenCalledWith(expect.any(Function), 2000);
-    await vi.runAllTimersAsync();
-    await task;
-    setTimeoutSpy.mockRestore();
+    await expectDefaultSettleDelay(() =>
+      getRegisteredTools().click!.execute({ clickId }),
+    );
   });
 
   it.each(["", "   "])(
@@ -239,29 +242,14 @@ describe("makeAssistantVisible", () => {
       const input = render(<VisibleInput />).getByRole("textbox");
       const clickId = (input as HTMLInputElement).dataset.clickId!;
       const editId = (input as HTMLInputElement).dataset.editId!;
-      const setTimeoutSpy = vi.spyOn(globalThis, "setTimeout");
       input.dataset.actionSettleDelay = renderedDelay;
 
-      const clickTask = getRegisteredTools().click!.execute({ clickId });
-      expect(setTimeoutSpy).toHaveBeenLastCalledWith(
-        expect.any(Function),
-        2000,
+      await expectDefaultSettleDelay(() =>
+        getRegisteredTools().click!.execute({ clickId }),
       );
-      await vi.runAllTimersAsync();
-      await clickTask;
-
-      setTimeoutSpy.mockClear();
-      const editTask = getRegisteredTools().edit!.execute({
-        editId,
-        value: "updated",
-      });
-      expect(setTimeoutSpy).toHaveBeenLastCalledWith(
-        expect.any(Function),
-        2000,
+      await expectDefaultSettleDelay(() =>
+        getRegisteredTools().edit!.execute({ editId, value: "updated" }),
       );
-      await vi.runAllTimersAsync();
-      await editTask;
-      setTimeoutSpy.mockRestore();
     },
   );
 

package/src/primitives/composer/ComposerInput.tsx

@@ -424,7 +424,7 @@ export const ComposerPrimitiveInput = forwardRef<
             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
+          // Standalone tap roots need a synchronous flush while the input is composing.
           flushTapSync(() => {
             aui.composer.setText(e.target.value);
           });

package/src/primitives/composer/ComposerResume.ts

@@ -0,0 +1,36 @@
+"use client";
+
+import { useCallback } from "react";
+import { useComposerResume as useComposerResumeBehavior } from "@assistant-ui/core/react";
+import {
+  createActionButton,
+  type ActionButtonElement,
+  type ActionButtonProps,
+} from "../../utils/createActionButton";
+
+const useComposerResume = () => {
+  const { disabled, resume } = useComposerResumeBehavior();
+  const callback = useCallback(() => resume(), [resume]);
+  if (disabled) return null;
+  return callback;
+};
+
+export namespace ComposerPrimitiveResume {
+  export type Element = ActionButtonElement;
+  export type Props = ActionButtonProps<typeof useComposerResume>;
+}
+
+/**
+ * Resumes an interrupted run when its adapter explicitly reports a checkpoint.
+ *
+ * @example
+ * ```tsx
+ * <ComposerPrimitive.Resume>
+ *   Resume
+ * </ComposerPrimitive.Resume>
+ * ```
+ */
+export const ComposerPrimitiveResume = createActionButton(
+  "ComposerPrimitive.Resume",
+  useComposerResume,
+);

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

@@ -82,6 +82,30 @@ describe("TriggerSelectionResource", () => {
     expect(onSelected).toHaveBeenCalledOnce();
   });
 
+  it("reports an inserted directive once a select override finishes the insertion", () => {
+    const onInserted = vi.fn();
+    const { root, setText, onSelected } = render({
+      behavior: { kind: "directive", formatter, onInserted },
+      text: "@file tail",
+      trigger: { offset: 0, query: "file", endOffset: 5 },
+    });
+    let finishInsertion: (() => void) | undefined;
+    root.getValue().registerSelectItemOverride((_, onOverrideInserted) => {
+      finishInsertion = onOverrideInserted;
+      return true;
+    });
+
+    root.getValue().selectItem(item);
+
+    expect(onInserted).not.toHaveBeenCalled();
+    expect(setText).not.toHaveBeenCalled();
+    expect(onSelected).toHaveBeenCalledOnce();
+
+    finishInsertion?.();
+
+    expect(onInserted).toHaveBeenCalledExactlyOnceWith(item);
+  });
+
   it("resynchronizes the cursor after removing an action", () => {
     const { root, setText, setCursorPosition } = render({
       behavior: {

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

@@ -7,8 +7,15 @@ import type {
 import type { AssistantClient } from "@assistant-ui/store";
 import type { DetectedTrigger } from "./triggerDetectionResource";
 
-/** External override for selection (used by Lexical's DirectivePlugin). */
-export type SelectItemOverride = (item: Unstable_TriggerItem) => boolean;
+/**
+ * External override for selection (used by Lexical's DirectivePlugin).
+ * Returns whether it handled the item, and calls `onInserted` once the
+ * insertion has reached the composer.
+ */
+export type SelectItemOverride = (
+  item: Unstable_TriggerItem,
+  onInserted: () => void,
+) => boolean;
 
 export type TriggerBehavior =
   | {
@@ -66,7 +73,11 @@ const useTriggerSelectionResource = ({
   const selectItem = useEffectEvent((item: Unstable_TriggerItem) => {
     if (!trigger || !behavior) return;
 
-    if (selectItemOverrideRef.current?.(item)) {
+    const reportInserted = () => {
+      if (behavior.kind === "directive") behavior.onInserted?.(item);
+    };
+
+    if (selectItemOverrideRef.current?.(item, reportInserted)) {
       onSelected();
       return;
     }

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

@@ -0,0 +1,84 @@
+/** @vitest-environment jsdom */
+import { fireEvent, render, screen, waitFor } from "@testing-library/react";
+import { useState } from "react";
+import { describe, expect, it } from "vitest";
+import {
+  AssistantRuntimeProvider,
+  useExternalStoreRuntime,
+} from "@assistant-ui/core/react";
+import type { ThreadMessage } from "@assistant-ui/core";
+import { useAui, useAuiState } from "@assistant-ui/store";
+
+function Input({
+  value,
+  onChange,
+  withOwnState,
+}: {
+  value: string;
+  onChange: (value: string) => void;
+  withOwnState: boolean;
+}) {
+  const [, setChangeCount] = useState(0);
+  return (
+    <textarea
+      aria-label="composer"
+      value={value}
+      onChange={(event) => {
+        if (withOwnState) setChangeCount((count) => count + 1);
+        onChange(event.target.value);
+      }}
+    />
+  );
+}
+
+function BoundInput({ withOwnState }: { withOwnState: boolean }) {
+  const aui = useAui();
+  const text = useAuiState((s) => s.composer.text);
+  return (
+    <>
+      <button onClick={() => aui.composer.setText("hello world")}>seed</button>
+      <Input
+        value={text}
+        onChange={(value) => aui.composer.setText(value)}
+        withOwnState={withOwnState}
+      />
+    </>
+  );
+}
+
+function App({ withOwnState }: { withOwnState: boolean }) {
+  const runtime = useExternalStoreRuntime<ThreadMessage>({
+    messages: [],
+    convertMessage: (message) => message,
+    onNew: async () => {},
+  });
+  return (
+    <AssistantRuntimeProvider runtime={runtime}>
+      <BoundInput withOwnState={withOwnState} />
+    </AssistantRuntimeProvider>
+  );
+}
+
+describe("composer state in controlled inputs", () => {
+  it.each([
+    ["mentions-like", true],
+    ["plain textarea", false],
+  ])(
+    "keeps the caret after typing in the middle: %s",
+    async (_, withOwnState) => {
+      render(<App withOwnState={withOwnState} />);
+      fireEvent.click(screen.getByRole("button", { name: "seed" }));
+      const input = screen.getByRole("textbox", {
+        name: "composer",
+      }) as HTMLTextAreaElement;
+      await waitFor(() => expect(input.value).toBe("hello world"));
+
+      input.setSelectionRange(5, 5);
+      fireEvent.change(input, {
+        target: { value: "helloX world", selectionStart: 6, selectionEnd: 6 },
+      });
+      await waitFor(() => expect(input.value).toBe("helloX world"));
+      expect(input.selectionStart).toBe(6);
+    },
+  );
+});

package/src/primitives/composer.ts

@@ -3,6 +3,7 @@ import type { TriggerMatch, TriggerMatcher } from "./composer/trigger";
 export { ComposerPrimitiveRoot as Root } from "./composer/ComposerRoot";
 export { ComposerPrimitiveInput as Input } from "./composer/ComposerInput";
 export { ComposerPrimitiveSend as Send } from "./composer/ComposerSend";
+export { ComposerPrimitiveResume as Resume } from "./composer/ComposerResume";
 export { ComposerPrimitiveCancel as Cancel } from "./composer/ComposerCancel";
 export { ComposerPrimitiveAddAttachment as AddAttachment } from "./composer/ComposerAddAttachment";
 export { ComposerPrimitiveAttachments as Attachments } from "./composer/ComposerAttachments";

package/src/primitives/thread/useThreadViewportAutoScroll.test.tsx

@@ -29,6 +29,7 @@ import { ThreadPrimitiveMessages } from "./ThreadMessages";
 import { ThreadPrimitiveRoot } from "./ThreadRoot";
 import { ThreadPrimitiveScrollToBottom } from "./ThreadScrollToBottom";
 import { ThreadPrimitiveViewport } from "./ThreadViewport";
+import { ThreadPrimitiveViewportFooter } from "./ThreadViewportFooter";
 import {
   ExportedMessageRepository,
   useExternalStoreRuntime,
@@ -325,6 +326,95 @@ const DelayedThread = ({
   );
 };
 
+const measureFooter = (element: HTMLDivElement | null) => {
+  if (!element) return;
+  Object.defineProperty(element, "offsetHeight", {
+    configurable: true,
+    get: () => Number.parseFloat(element.style.height),
+  });
+};
+
+const FooterInsetState = () => {
+  const inset = useThreadViewport((s) => s.height.inset);
+  return <output data-testid="footer-inset">{inset}</output>;
+};
+
+const FooterThread = ({
+  footerHeight,
+  autoScroll = false,
+}: {
+  footerHeight: number | null;
+  autoScroll?: boolean;
+}) => (
+  <SyncRuntimeProvider>
+    <ThreadPrimitiveViewport
+      data-testid="viewport"
+      autoScroll={autoScroll}
+      scrollToBottomOnInitialize={false}
+    >
+      {messages.map((_, index) => (
+        <div key={index} data-testid="thread-message" />
+      ))}
+      {footerHeight !== null && (
+        <ThreadPrimitiveViewportFooter
+          ref={measureFooter}
+          data-testid="footer"
+          style={{ height: footerHeight }}
+        />
+      )}
+      <AtBottom />
+      <FooterInsetState />
+    </ThreadPrimitiveViewport>
+  </SyncRuntimeProvider>
+);
+
+describe("viewport footer insets", () => {
+  it("counts a footer registered before viewport attachment toward at-bottom", () => {
+    render(<FooterThread footerHeight={40} />);
+
+    act(() => {
+      getViewport().scrollTop = 500;
+      fireEvent.scroll(getViewport());
+    });
+
+    expect(screen.getByTestId("footer-inset").textContent).toBe("40");
+    expect(screen.getByTestId("is-at-bottom").textContent).toBe("true");
+  });
+
+  it("follows a pinned viewport when its footer grows without a content resize", () => {
+    const view = render(<FooterThread footerHeight={40} autoScroll />);
+    act(notifyResizeObservers);
+
+    act(() => {
+      getViewport().scrollTop = 500;
+      fireEvent.scroll(getViewport());
+    });
+
+    view.rerender(<FooterThread footerHeight={80} autoScroll />);
+    act(() => notifyResizeOf(screen.getByTestId("footer")));
+
+    expect(getViewport().scrollTop).toBe(540);
+    expect(screen.getByTestId("footer-inset").textContent).toBe("80");
+    expect(screen.getByTestId("is-at-bottom").textContent).toBe("true");
+  });
+
+  it("unregisters an unmounted footer and recomputes at-bottom", () => {
+    const view = render(<FooterThread footerHeight={40} />);
+
+    act(() => {
+      getViewport().scrollTop = 500;
+      fireEvent.scroll(getViewport());
+    });
+    expect(screen.getByTestId("is-at-bottom").textContent).toBe("true");
+
+    view.rerender(<FooterThread footerHeight={null} />);
+
+    expect(screen.getByTestId("footer-inset").textContent).toBe("0");
+    expect(screen.getByTestId("is-at-bottom").textContent).toBe("false");
+    expect(getViewport().scrollTop).toBe(500);
+  });
+});
+
 describe("useThreadViewportAutoScroll", () => {
   it("keeps viewport listeners and observers across rerenders", () => {
     const view = render(