@assistant-ui/react 0.15.28 → 0.15.30

package/src/primitives/composer/ComposerAddAttachment.ts

@@ -5,7 +5,7 @@ import {
   type ActionButtonProps,
   createActionButton,
 } from "../../utils/createActionButton";
-import { useCallback } from "react";
+import { useCallback, useInsertionEffect, useRef } from "react";
 import { useAui } from "@assistant-ui/store";
 import { useComposerAddAttachment as useComposerAddAttachmentBehavior } from "@assistant-ui/core/react";
 
@@ -17,8 +17,17 @@ const useComposerAddAttachment = ({
 } = {}) => {
   const { disabled, addAttachment } = useComposerAddAttachmentBehavior();
   const aui = useAui();
+  const scopeGenerationRef = useRef(0);
+
+  useInsertionEffect(
+    () => () => {
+      scopeGenerationRef.current += 1;
+    },
+    [aui.composer, aui.optional.threadListItem],
+  );
 
   const callback = useCallback(() => {
+    const scopeGeneration = scopeGenerationRef.current;
     const input = document.createElement("input");
     input.type = "file";
     input.multiple = multiple;
@@ -37,6 +46,7 @@ const useComposerAddAttachment = ({
 
       const attachmentPromises = Array.from(fileList, async (file) => {
         try {
+          if (scopeGenerationRef.current !== scopeGeneration) return;
           await addAttachment(file);
         } catch {
           // The composer runtime emits composer.attachmentAddError before rejecting.

package/src/primitives/composer/ComposerInput.focus-on-run-start.test.tsx

@@ -0,0 +1,130 @@
+// @vitest-environment jsdom
+
+import { act, fireEvent, render, screen } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+import { AssistantRuntimeProvider } from "../../context";
+import { useLocalRuntime } from "../../legacy-runtime/runtime-cores/local/useLocalRuntime";
+import { ThreadPrimitiveRoot } from "../thread/ThreadRoot";
+import { ComposerPrimitiveInput } from "./ComposerInput";
+import { ComposerPrimitiveRoot } from "./ComposerRoot";
+
+const adapter = { async *run() {} };
+
+type Runtime = ReturnType<typeof useLocalRuntime>;
+
+const setup = () => {
+  let runtime: Runtime | null = null;
+  const App = () => {
+    const currentRuntime = useLocalRuntime(adapter);
+    runtime = currentRuntime;
+    return (
+      <AssistantRuntimeProvider runtime={currentRuntime}>
+        <input aria-label="Outside thread" />
+        <ThreadPrimitiveRoot>
+          <button type="button">Inside thread</button>
+          <ComposerPrimitiveInput aria-label="Composer" autoFocus />
+          <ThreadPrimitiveRoot>
+            <button type="button">Nested thread</button>
+          </ThreadPrimitiveRoot>
+        </ThreadPrimitiveRoot>
+      </AssistantRuntimeProvider>
+    );
+  };
+
+  render(<App />);
+  const composer = screen.getByRole("textbox", {
+    name: "Composer",
+  }) as HTMLTextAreaElement;
+  const startRun = async () => {
+    await act(async () => {
+      await runtime!.thread.append("Programmatic message");
+    });
+  };
+  return { composer, startRun };
+};
+
+describe("ComposerPrimitiveInput run-start focus", () => {
+  it("focuses the composer when its button is focused without a thread root", async () => {
+    let runtime: Runtime | null = null;
+    const App = () => {
+      const currentRuntime = useLocalRuntime(adapter);
+      runtime = currentRuntime;
+      return (
+        <AssistantRuntimeProvider runtime={currentRuntime}>
+          <ComposerPrimitiveRoot>
+            <ComposerPrimitiveInput aria-label="Floating composer" autoFocus />
+            <button type="button">Send</button>
+          </ComposerPrimitiveRoot>
+        </AssistantRuntimeProvider>
+      );
+    };
+
+    render(<App />);
+    const composer = screen.getByRole("textbox", {
+      name: "Floating composer",
+    });
+    const send = screen.getByRole("button", { name: "Send" });
+    act(() => send.focus());
+
+    await act(async () => {
+      await runtime!.thread.append("Programmatic message");
+    });
+
+    expect(document.activeElement).toBe(composer);
+  });
+
+  it("keeps focus in an input outside the thread", async () => {
+    const { startRun } = setup();
+    const outside = screen.getByRole("textbox", { name: "Outside thread" });
+    act(() => outside.focus());
+
+    await startRun();
+
+    expect(document.activeElement).toBe(outside);
+  });
+
+  it("focuses the composer when nothing is focused", async () => {
+    const { composer, startRun } = setup();
+    act(() => composer.blur());
+    expect(document.activeElement).toBe(document.body);
+
+    await startRun();
+
+    expect(document.activeElement).toBe(composer);
+  });
+
+  it("focuses the composer when another element in its thread is focused", async () => {
+    const { composer, startRun } = setup();
+    const inside = screen.getByRole("button", { name: "Inside thread" });
+    act(() => inside.focus());
+
+    await startRun();
+
+    expect(document.activeElement).toBe(composer);
+  });
+
+  it("keeps focus inside a nested thread root", async () => {
+    const { startRun } = setup();
+    const nested = screen.getByRole("button", { name: "Nested thread" });
+    act(() => nested.focus());
+
+    await startRun();
+
+    expect(document.activeElement).toBe(nested);
+  });
+
+  it("preserves the focused composer's selection", async () => {
+    const { composer, startRun } = setup();
+    fireEvent.change(composer, { target: { value: "hello world" } });
+    act(() => {
+      composer.focus();
+      composer.setSelectionRange(2, 5);
+    });
+
+    await startRun();
+
+    expect(document.activeElement).toBe(composer);
+    expect(composer.selectionStart).toBe(2);
+    expect(composer.selectionEnd).toBe(5);
+  });
+});

package/src/primitives/composer/ComposerInput.tsx

@@ -28,6 +28,7 @@ import { flushTapSync } from "@assistant-ui/tap";
 import { useComposerInputPluginRegistryOptional } from "./ComposerInputPluginContext";
 import { useComposerCompactContextOptional } from "./ComposerCompactContext";
 import { useComposerCancelWithFocus } from "./useComposerCancelWithFocus";
+import { useThreadRootElementRef } from "../thread/ThreadRootElementContext";
 import {
   useComposerInputDisabled,
   useComposerInputValue,
@@ -57,7 +58,10 @@ export namespace ComposerPrimitiveInput {
      */
     cancelOnEscape?: boolean | undefined;
     /**
-     * Whether to automatically focus the input when a new run starts.
+     * Whether to focus the input when a new run starts if nothing is focused
+     * or focus is already inside the same thread or composer. Keeps the current
+     * selection when the input is already focused. Applies when `autoFocus` is
+     * enabled.
      *
      * @deprecated Experimental since 2024-10-12. Not scheduled for removal; the API may change in any release.
      *
@@ -189,6 +193,7 @@ export const ComposerPrimitiveInput = forwardRef<
     forwardedRef,
   ) => {
     const aui = useAui();
+    const threadRootRef = useThreadRootElementRef();
     const pluginRegistry = useComposerInputPluginRegistryOptional();
     const compactContext = useComposerCompactContextOptional();
 
@@ -343,6 +348,27 @@ export const ComposerPrimitiveInput = forwardRef<
       textarea.setSelectionRange(textarea.value.length, textarea.value.length);
     }, [autoFocusEnabled]);
 
+    const focusOnRunStart = useCallback(() => {
+      const textarea = textareaRef.current;
+      if (!textarea) return;
+      const doc = textarea.ownerDocument;
+      const active = doc.activeElement;
+      if (active === textarea) return;
+
+      const root = threadRootRef?.current;
+      const composerRoot = textarea.closest("[data-aui-composer-type]");
+      if (
+        active &&
+        active !== doc.body &&
+        !composerRoot?.contains(active) &&
+        (!root?.contains(active) ||
+          active.closest("[data-aui-thread-root]") !== root)
+      )
+        return;
+
+      focus();
+    }, [focus, threadRootRef]);
+
     useEffect(() => focus(), [focus]);
 
     useOnScrollToBottom(() => {
@@ -361,8 +387,8 @@ export const ComposerPrimitiveInput = forwardRef<
       )
         return undefined;
 
-      return aui.on("thread.runStart", focus);
-    }, [unstable_focusOnRunStart, focus, aui]);
+      return aui.on("thread.runStart", focusOnRunStart);
+    }, [unstable_focusOnRunStart, focusOnRunStart, aui]);
 
     useEffect(() => {
       if (
@@ -398,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(