@assistant-ui/react 0.14.26 → 0.14.28

package/src/primitives/assistantModal/AssistantModalTrigger.tsx

@@ -1,14 +1,12 @@
-import {
-  type ComponentPropsWithoutRef,
-  type ComponentRef,
-  forwardRef,
-} from "react";
-import { Popover as PopoverPrimitive } from "radix-ui";
+import { type ComponentRef, forwardRef } from "react";
+import type { Popover as PopoverPrimitive } from "radix-ui";
+import type { WithRenderPropProps } from "../../utils/Primitive";
+import { PopoverRenderTrigger } from "./popoverRenderPrimitives";
 import { type ScopedProps, usePopoverScope } from "./scope";
 
 export namespace AssistantModalPrimitiveTrigger {
   export type Element = ComponentRef<typeof PopoverPrimitive.Trigger>;
-  export type Props = ComponentPropsWithoutRef<typeof PopoverPrimitive.Trigger>;
+  export type Props = WithRenderPropProps<typeof PopoverPrimitive.Trigger>;
 }
 
 export const AssistantModalPrimitiveTrigger = forwardRef<
@@ -24,7 +22,7 @@ export const AssistantModalPrimitiveTrigger = forwardRef<
   ) => {
     const scope = usePopoverScope(__scopeAssistantModal);
 
-    return <PopoverPrimitive.Trigger {...scope} {...rest} ref={ref} />;
+    return <PopoverRenderTrigger {...scope} {...rest} ref={ref} />;
   },
 );
 

package/src/primitives/assistantModal/popoverRenderPrimitives.ts

@@ -0,0 +1,6 @@
+import { Popover as PopoverPrimitive } from "radix-ui";
+import { withRenderProp } from "../../utils/Primitive";
+
+export const PopoverRenderTrigger = withRenderProp(PopoverPrimitive.Trigger);
+export const PopoverRenderAnchor = withRenderProp(PopoverPrimitive.Anchor);
+export const PopoverRenderContent = withRenderProp(PopoverPrimitive.Content);

package/src/primitives/composer/ComposerCompactContext.tsx

@@ -0,0 +1,13 @@
+"use client";
+
+import { createContext, useContext } from "react";
+
+export type ComposerCompactContextValue = {
+  setMultiline: (multiline: boolean) => void;
+};
+
+export const ComposerCompactContext =
+  createContext<ComposerCompactContextValue | null>(null);
+
+export const useComposerCompactContextOptional = () =>
+  useContext(ComposerCompactContext);

package/src/primitives/composer/ComposerInput.tsx

@@ -17,6 +17,7 @@ import {
 } from "react";
 import TextareaAutosize, {
   type TextareaAutosizeProps,
+  type TextareaHeightChangeMeta,
 } from "react-textarea-autosize";
 import { useEscapeKeydown } from "@radix-ui/react-use-escape-keydown";
 import { useOnScrollToBottom } from "../../utils/hooks/useOnScrollToBottom";
@@ -24,6 +25,7 @@ import { useMediaQuery } from "../../utils/hooks/useMediaQuery";
 import { useAui } from "@assistant-ui/store";
 import { flushTapSync } from "@assistant-ui/tap";
 import { useComposerInputPluginRegistryOptional } from "./ComposerInputPluginContext";
+import { useComposerCompactContextOptional } from "./ComposerCompactContext";
 import {
   useComposerInputDisabled,
   useComposerInputValue,
@@ -165,12 +167,14 @@ export const ComposerPrimitiveInput = forwardRef<
       unstable_focusOnThreadSwitched = true,
       unstable_insertNewlineOnTouchEnter = false,
       addAttachmentOnPaste = true,
+      onHeightChange,
       ...rest
     },
     forwardedRef,
   ) => {
     const aui = useAui();
     const pluginRegistry = useComposerInputPluginRegistryOptional();
+    const compactContext = useComposerCompactContextOptional();
 
     const declaredSubmitMode =
       submitMode ?? (submitOnEnter === false ? "none" : "enter");
@@ -278,6 +282,28 @@ export const ComposerPrimitiveInput = forwardRef<
       }
     };
 
+    const handleHeightChange = (
+      height: number,
+      meta: TextareaHeightChangeMeta,
+    ) => {
+      onHeightChange?.(height, meta);
+      if (!compactContext) return;
+      const el = textareaRef.current;
+      if (!el || el.value === "") return;
+      const cs = getComputedStyle(el);
+      const contentHeight =
+        cs.boxSizing === "border-box"
+          ? height -
+            parseFloat(cs.paddingTop) -
+            parseFloat(cs.paddingBottom) -
+            parseFloat(cs.borderTopWidth) -
+            parseFloat(cs.borderBottomWidth)
+          : height;
+      if (Math.round(contentHeight / meta.rowHeight) > 1) {
+        compactContext.setMultiline(true);
+      }
+    };
+
     const autoFocusEnabled = autoFocus && !isDisabled;
     const focus = useCallback(() => {
       const textarea = textareaRef.current;
@@ -318,6 +344,10 @@ export const ComposerPrimitiveInput = forwardRef<
       return aui.on("threadListItem.switchedTo", focus);
     }, [unstable_focusOnThreadSwitched, focus, aui]);
 
+    useEffect(() => {
+      if (value === "") compactContext?.setMultiline(false);
+    }, [value, compactContext]);
+
     const ariaComboboxProps = useTriggerPopoverAriaProps();
 
     const inputProps = {
@@ -391,6 +421,11 @@ export const ComposerPrimitiveInput = forwardRef<
         },
       ),
       onPaste: composeEventHandlers(onPaste, handlePaste),
+      ...(compactContext
+        ? { onHeightChange: handleHeightChange }
+        : onHeightChange !== undefined
+          ? { onHeightChange }
+          : {}),
     };
 
     if (render && isValidElement(render)) {

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

@@ -0,0 +1,382 @@
+/** @vitest-environment jsdom */
+import { act } from "react";
+import type { MouseEvent, ReactNode } from "react";
+import { createPortal } from "react-dom";
+import { createRoot } from "react-dom/client";
+import type { Root } from "react-dom/client";
+import type * as AssistantStore from "@assistant-ui/store";
+import type * as ComposerSendModule from "./ComposerSend";
+import { fireEvent, render } from "@testing-library/react";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { useComposerCompactContextOptional } from "./ComposerCompactContext";
+import type { ComposerCompactContextValue } from "./ComposerCompactContext";
+import { ComposerPrimitiveRoot } from "./ComposerRoot";
+
+type StoreState = {
+  composer: {
+    attachments: object[];
+    quote: object | undefined;
+    queue: object[];
+    dictation: object | undefined;
+    text: string;
+  };
+};
+
+const { storeState } = vi.hoisted((): { storeState: StoreState } => ({
+  storeState: {
+    composer: {
+      attachments: [],
+      quote: undefined,
+      queue: [],
+      dictation: undefined,
+      text: "",
+    },
+  },
+}));
+
+(globalThis as Record<string, unknown>).IS_REACT_ACT_ENVIRONMENT = true;
+
+vi.mock("@assistant-ui/store", async (importOriginal) => {
+  const actual = await importOriginal<typeof AssistantStore>();
+  return {
+    ...actual,
+    useAuiState: <T,>(selector: (state: StoreState) => T) =>
+      selector(storeState),
+  };
+});
+
+vi.mock("./ComposerSend", async (importOriginal) => ({
+  ...(await importOriginal<typeof ComposerSendModule>()),
+  useComposerSend: () => vi.fn(),
+}));
+
+const resetStoreState = () => {
+  storeState.composer.attachments = [];
+  storeState.composer.quote = undefined;
+  storeState.composer.queue = [];
+  storeState.composer.dictation = undefined;
+  storeState.composer.text = "";
+};
+
+describe("ComposerPrimitiveRoot click-to-focus", () => {
+  beforeEach(() => {
+    resetStoreState();
+  });
+
+  const setupComposer = (props?: ComposerPrimitiveRoot.Props) => {
+    const { getByTestId } = render(
+      <ComposerPrimitiveRoot {...props}>
+        <div data-testid="blank-space">
+          <textarea data-testid="composer-input" />
+        </div>
+      </ComposerPrimitiveRoot>,
+    );
+    return {
+      blankSpace: getByTestId("blank-space"),
+      textarea: getByTestId("composer-input"),
+    };
+  };
+
+  it("focuses the textarea when primary-button mousedown starts on blank form space", () => {
+    const { blankSpace, textarea } = setupComposer();
+
+    fireEvent.mouseDown(blankSpace, { button: 0 });
+
+    expect(document.activeElement).toBe(textarea);
+  });
+
+  it("does not move focus to the textarea when mousedown starts on an interactive child", () => {
+    const { getByTestId } = render(
+      <ComposerPrimitiveRoot>
+        <button data-testid="interactive-child" type="button">
+          Action
+        </button>
+        <textarea data-testid="composer-input" />
+      </ComposerPrimitiveRoot>,
+    );
+
+    const notPrevented = fireEvent.mouseDown(getByTestId("interactive-child"), {
+      button: 0,
+    });
+
+    expect(notPrevented).toBe(true);
+    expect(document.activeElement).not.toBe(getByTestId("composer-input"));
+  });
+
+  it("does not steal focus from a role-based widget carrying a tabindex", () => {
+    const { getByTestId } = render(
+      <ComposerPrimitiveRoot>
+        <div role="slider" tabIndex={0} data-testid="widget" />
+        <textarea data-testid="composer-input" />
+      </ComposerPrimitiveRoot>,
+    );
+
+    const notPrevented = fireEvent.mouseDown(getByTestId("widget"), {
+      button: 0,
+    });
+
+    expect(notPrevented).toBe(true);
+    expect(document.activeElement).not.toBe(getByTestId("composer-input"));
+  });
+
+  it("does not steal focus from a roving-tabindex child with tabindex=-1", () => {
+    const { getByTestId } = render(
+      <ComposerPrimitiveRoot>
+        <span tabIndex={-1} data-testid="roving-item">
+          Item
+        </span>
+        <textarea data-testid="composer-input" />
+      </ComposerPrimitiveRoot>,
+    );
+
+    const notPrevented = fireEvent.mouseDown(getByTestId("roving-item"), {
+      button: 0,
+    });
+
+    expect(notPrevented).toBe(true);
+    expect(document.activeElement).not.toBe(getByTestId("composer-input"));
+  });
+
+  it("does not move focus to the textarea on non-primary mousedown", () => {
+    const { blankSpace, textarea } = setupComposer();
+
+    const notPrevented = fireEvent.mouseDown(blankSpace, { button: 2 });
+
+    expect(notPrevented).toBe(true);
+    expect(document.activeElement).not.toBe(textarea);
+  });
+
+  it("focuses a contenteditable composer target when primary-button mousedown starts on blank form space", () => {
+    const { getByTestId } = render(
+      <ComposerPrimitiveRoot>
+        <div data-testid="blank-space">
+          <div contentEditable data-testid="composer-input" tabIndex={0} />
+        </div>
+      </ComposerPrimitiveRoot>,
+    );
+
+    fireEvent.mouseDown(getByTestId("blank-space"), { button: 0 });
+
+    expect(document.activeElement).toBe(getByTestId("composer-input"));
+  });
+
+  it("still focuses the textarea when the form is hosted inside a tabindex=-1 wrapper", () => {
+    const { getByTestId } = render(
+      <div tabIndex={-1}>
+        <ComposerPrimitiveRoot>
+          <div data-testid="blank-space">
+            <textarea data-testid="composer-input" />
+          </div>
+        </ComposerPrimitiveRoot>
+      </div>,
+    );
+
+    fireEvent.mouseDown(getByTestId("blank-space"), { button: 0 });
+
+    expect(document.activeElement).toBe(getByTestId("composer-input"));
+  });
+
+  it("ignores mousedown on portaled descendants rendered outside the form's DOM", () => {
+    const { getByTestId } = render(
+      <ComposerPrimitiveRoot>
+        {createPortal(<div data-testid="portal-blank" />, document.body)}
+        <textarea data-testid="composer-input" />
+      </ComposerPrimitiveRoot>,
+    );
+
+    const notPrevented = fireEvent.mouseDown(getByTestId("portal-blank"), {
+      button: 0,
+    });
+
+    expect(notPrevented).toBe(true);
+    expect(document.activeElement).not.toBe(getByTestId("composer-input"));
+  });
+
+  it("keeps the mousedown default when the only textarea is disabled", () => {
+    const { getByTestId } = render(
+      <ComposerPrimitiveRoot>
+        <div data-testid="blank-space">
+          <textarea disabled data-testid="composer-input" />
+        </div>
+      </ComposerPrimitiveRoot>,
+    );
+
+    const notPrevented = fireEvent.mouseDown(getByTestId("blank-space"), {
+      button: 0,
+    });
+
+    expect(notPrevented).toBe(true);
+    expect(document.activeElement).not.toBe(getByTestId("composer-input"));
+  });
+
+  it("skips a disabled textarea and focuses the next composer input", () => {
+    const { getByTestId } = render(
+      <ComposerPrimitiveRoot>
+        <div data-testid="blank-space">
+          <textarea disabled data-testid="disabled-input" />
+          <div contentEditable data-testid="composer-input" tabIndex={0} />
+        </div>
+      </ComposerPrimitiveRoot>,
+    );
+
+    fireEvent.mouseDown(getByTestId("blank-space"), { button: 0 });
+
+    expect(document.activeElement).toBe(getByTestId("composer-input"));
+  });
+
+  it("keeps the mousedown default when the form contains no composer input", () => {
+    const { getByTestId } = render(
+      <ComposerPrimitiveRoot>
+        <div data-testid="blank-space" />
+      </ComposerPrimitiveRoot>,
+    );
+
+    const notPrevented = fireEvent.mouseDown(getByTestId("blank-space"), {
+      button: 0,
+    });
+
+    expect(notPrevented).toBe(true);
+  });
+
+  it("lets descendants keep native mousedown defaults via stopPropagation", () => {
+    const { getByTestId } = render(
+      <ComposerPrimitiveRoot>
+        <div data-testid="selectable" onMouseDown={(e) => e.stopPropagation()}>
+          Selectable content
+        </div>
+        <textarea data-testid="composer-input" />
+      </ComposerPrimitiveRoot>,
+    );
+
+    const notPrevented = fireEvent.mouseDown(getByTestId("selectable"), {
+      button: 0,
+    });
+
+    expect(notPrevented).toBe(true);
+    expect(document.activeElement).not.toBe(getByTestId("composer-input"));
+  });
+
+  it("lets consumer onMouseDown prevent the default focus behavior", () => {
+    const onMouseDown = vi.fn((event: MouseEvent<HTMLFormElement>) => {
+      event.preventDefault();
+    });
+    const { blankSpace, textarea } = setupComposer({ onMouseDown });
+
+    fireEvent.mouseDown(blankSpace, { button: 0 });
+
+    expect(onMouseDown).toHaveBeenCalledTimes(1);
+    expect(document.activeElement).not.toBe(textarea);
+  });
+
+  it("runs consumer onMouseDown and preserves default focus behavior when it does not prevent default", () => {
+    const onMouseDown = vi.fn();
+    const { blankSpace, textarea } = setupComposer({ onMouseDown });
+
+    fireEvent.mouseDown(blankSpace, { button: 0 });
+
+    expect(onMouseDown).toHaveBeenCalledTimes(1);
+    expect(document.activeElement).toBe(textarea);
+  });
+});
+
+describe("ComposerPrimitiveRoot compact mode", () => {
+  let container: HTMLDivElement;
+  let root: Root;
+
+  beforeEach(() => {
+    resetStoreState();
+    container = document.createElement("div");
+    document.body.appendChild(container);
+    root = createRoot(container);
+  });
+
+  afterEach(async () => {
+    await act(async () => {
+      root.unmount();
+    });
+    container.remove();
+    vi.restoreAllMocks();
+  });
+
+  const mount = async (props: {
+    compact?: boolean | undefined;
+    children?: ReactNode;
+  }) => {
+    await act(async () => {
+      root.render(
+        <ComposerPrimitiveRoot data-testid="composer-root" {...props} />,
+      );
+    });
+    const form = container.querySelector("form");
+    expect(form).not.toBeNull();
+    return form as HTMLFormElement;
+  };
+
+  it("does not mark the form compact when compact is not enabled", async () => {
+    const form = await mount({});
+
+    expect(form.hasAttribute("data-compact")).toBe(false);
+  });
+
+  it("provides no compact context when compact is not enabled", async () => {
+    let compactContext: ComposerCompactContextValue | null = null;
+    const Probe = () => {
+      compactContext = useComposerCompactContextOptional();
+      return null;
+    };
+
+    await mount({ children: <Probe /> });
+
+    expect(compactContext).toBeNull();
+  });
+
+  it("starts compact on the first render when compact is enabled and composer state is pristine", async () => {
+    const form = await mount({ compact: true });
+
+    expect(form.hasAttribute("data-compact")).toBe(true);
+  });
+
+  it.each([
+    ["attachments are present", { attachments: [{}] }],
+    ["a quote is present", { quote: {} }],
+    ["queued messages are present", { queue: [{}] }],
+    ["dictation is active", { dictation: {} }],
+    ["text contains an explicit newline", { text: "a\nb" }],
+  ] as const)(
+    "does not mark the form compact when %s",
+    async (_name, composerPatch) => {
+      Object.assign(storeState.composer, composerPatch);
+
+      const form = await mount({ compact: true });
+
+      expect(form.hasAttribute("data-compact")).toBe(false);
+    },
+  );
+
+  it("updates compact mode when the compact context multiline latch changes", async () => {
+    let compactContext: ComposerCompactContextValue | null = null;
+    const Probe = () => {
+      compactContext = useComposerCompactContextOptional();
+      return null;
+    };
+
+    const form = await mount({
+      compact: true,
+      children: <Probe />,
+    });
+    const context = compactContext;
+    expect(context).not.toBeNull();
+    if (!context) throw new Error("Composer compact context was not provided");
+    expect(form.hasAttribute("data-compact")).toBe(true);
+
+    await act(async () => {
+      context.setMultiline(true);
+    });
+    expect(form.hasAttribute("data-compact")).toBe(false);
+
+    await act(async () => {
+      context.setMultiline(false);
+    });
+    expect(form.hasAttribute("data-compact")).toBe(true);
+  });
+});

package/src/primitives/composer/ComposerRoot.tsx

@@ -1,14 +1,42 @@
 "use client";
 
 import { composeEventHandlers } from "@radix-ui/primitive";
+import { useAuiState } from "@assistant-ui/store";
 import { Primitive } from "../../utils/Primitive";
 import {
   type ComponentRef,
   type FormEvent,
   forwardRef,
   type ComponentPropsWithoutRef,
+  type MouseEvent,
+  useMemo,
+  useState,
 } from "react";
 import { useComposerSend } from "./ComposerSend";
+import { ComposerCompactContext } from "./ComposerCompactContext";
+
+const CONTENT_EDITABLE_SELECTOR =
+  "[contenteditable]:not([contenteditable='false'])";
+
+const COMPOSER_INPUT_SELECTOR = `textarea:not(:disabled), ${CONTENT_EDITABLE_SELECTOR}`;
+
+// Keeps tabindex="-1": roving-tabindex widgets click-focus items at -1.
+const INTERACTIVE_ELEMENT_SELECTOR = [
+  "a",
+  "audio[controls]",
+  "button",
+  "details",
+  "embed",
+  "iframe",
+  "input",
+  "label",
+  "select",
+  "summary",
+  "textarea",
+  "video[controls]",
+  CONTENT_EDITABLE_SELECTOR,
+  "[tabindex]",
+].join(", ");
 
 export namespace ComposerPrimitiveRoot {
   export type Element = ComponentRef<typeof Primitive.form>;
@@ -16,7 +44,17 @@ export namespace ComposerPrimitiveRoot {
    * Props for the ComposerPrimitive.Root component.
    * Accepts all standard form element props.
    */
-  export type Props = ComponentPropsWithoutRef<typeof Primitive.form>;
+  export type Props = ComponentPropsWithoutRef<typeof Primitive.form> & {
+    /**
+     * Opt the composer into compact mode. While the input holds at most a single
+     * line of text and there are no attachments, quote, queued messages, or
+     * active dictation, the root renders a `data-compact` attribute so styles
+     * can collapse the composer into a single row. It expands automatically
+     * when any of those conditions stop holding.
+     * @default false
+     */
+    compact?: boolean | undefined;
+  };
 }
 
 /**
@@ -26,6 +64,11 @@ export namespace ComposerPrimitiveRoot {
  * is submitted (e.g., via Enter key or submit button). It automatically prevents the
  * default form submission and triggers the composer's send functionality.
  *
+ * Clicking blank form space focuses the composer input (the first textarea or
+ * contenteditable inside the form). Text selection cannot start from blank
+ * areas; descendants that need native mousedown defaults can call
+ * `stopPropagation()` in their own `onMouseDown`.
+ *
  * @example
  * ```tsx
  * <ComposerPrimitive.Root>
@@ -37,9 +80,22 @@ export namespace ComposerPrimitiveRoot {
 export const ComposerPrimitiveRoot = forwardRef<
   ComposerPrimitiveRoot.Element,
   ComposerPrimitiveRoot.Props
->(({ onSubmit, ...rest }, forwardedRef) => {
+>(({ onSubmit, onMouseDown, compact, ...rest }, forwardedRef) => {
   const send = useComposerSend();
 
+  const [multiline, setMultiline] = useState(false);
+  const compactContext = useMemo(() => ({ setMultiline }), []);
+  const stateAllowsCompact = useAuiState((s) =>
+    compact
+      ? s.composer.attachments.length === 0 &&
+        s.composer.quote == null &&
+        s.composer.queue.length === 0 &&
+        s.composer.dictation == null &&
+        !s.composer.text.includes("\n")
+      : false,
+  );
+  const isCompact = stateAllowsCompact && !multiline;
+
   const handleSubmit = (e: FormEvent) => {
     e.preventDefault();
 
@@ -47,12 +103,35 @@ export const ComposerPrimitiveRoot = forwardRef<
     send();
   };
 
+  const handleMouseDown = (e: MouseEvent<HTMLFormElement>) => {
+    if (e.button !== 0) return;
+    const target = e.target;
+    // Portaled descendants (e.g. a dialog overlay) propagate mousedown through
+    // the React tree while their DOM nodes live outside the form.
+    if (!(target instanceof Element) || !e.currentTarget.contains(target))
+      return;
+    // Bound the ancestor walk to the form: hosts like AssistantModal render
+    // the composer inside a wrapper carrying tabindex="-1" (Radix FocusScope).
+    const interactive = target.closest(INTERACTIVE_ELEMENT_SELECTOR);
+    if (interactive && e.currentTarget.contains(interactive)) return;
+    const input = e.currentTarget.querySelector<HTMLElement>(
+      COMPOSER_INPUT_SELECTOR,
+    );
+    if (!input) return;
+    e.preventDefault();
+    input.focus();
+  };
+
   return (
-    <Primitive.form
-      {...rest}
-      ref={forwardedRef}
-      onSubmit={composeEventHandlers(onSubmit, handleSubmit)}
-    />
+    <ComposerCompactContext.Provider value={compact ? compactContext : null}>
+      <Primitive.form
+        {...rest}
+        data-compact={isCompact ? "" : undefined}
+        ref={forwardedRef}
+        onSubmit={composeEventHandlers(onSubmit, handleSubmit)}
+        onMouseDown={composeEventHandlers(onMouseDown, handleMouseDown)}
+      />
+    </ComposerCompactContext.Provider>
   );
 });
 

package/src/primitives/messagePart/useMessagePartData.ts

@@ -5,8 +5,9 @@ import { useAuiState } from "@assistant-ui/store";
 
 /**
  * @deprecated Use {@link useAuiState} to select and narrow `s.part`.
- * Return `null` for optional rendering, or throw inside the selector to
- * preserve the old hook's strict behavior.
+ * Return `null` for optional rendering. Do not throw inside the selector:
+ * selectors run inside `useSyncExternalStore`'s `getSnapshot`, so a transient
+ * part mismatch during thread switches can unmount the React root.
  *
  * @example
  * ```tsx