@assistant-ui/react 0.14.22 → 0.14.24

package/src/tests/threadMessageById.test.tsx

@@ -0,0 +1,224 @@
+// @vitest-environment jsdom
+
+import { act, render, screen } from "@testing-library/react";
+import { useState, type FC, type PropsWithChildren } from "react";
+import { describe, expect, it } from "vitest";
+import {
+  AssistantRuntimeProvider,
+  useExternalStoreRuntime,
+  unstable_useThreadMessageIds,
+  type ThreadMessageLike,
+} from "../index";
+import * as ThreadPrimitive from "../primitives/thread";
+import * as MessagePrimitive from "../primitives/message";
+import * as MessagePartPrimitive from "../primitives/messagePart";
+
+type Msg = { id: string; role: "user" | "assistant"; text: string };
+
+const convertMessage = (m: Msg): ThreadMessageLike => ({
+  id: m.id,
+  role: m.role,
+  content: [{ type: "text", text: m.text }],
+});
+
+const TextPart: FC = () => <MessagePartPrimitive.Text />;
+const Message: FC = () => (
+  <MessagePrimitive.Parts components={{ Text: TextPart }} />
+);
+const COMPONENTS = { Message };
+
+let setMessages: (updater: (prev: Msg[]) => Msg[]) => void;
+
+const Provider: FC<PropsWithChildren<{ initial: Msg[] }>> = ({
+  initial,
+  children,
+}) => {
+  const [messages, setState] = useState(initial);
+  setMessages = setState;
+  const runtime = useExternalStoreRuntime({
+    messages,
+    convertMessage,
+    onNew: async () => {},
+  });
+  return (
+    <AssistantRuntimeProvider runtime={runtime}>
+      {children}
+    </AssistantRuntimeProvider>
+  );
+};
+
+let lastIds: readonly string[] | undefined;
+const idIdentities: (readonly string[])[] = [];
+
+const List: FC = () => {
+  const ids = unstable_useThreadMessageIds();
+  lastIds = ids;
+  if (idIdentities[idIdentities.length - 1] !== ids) idIdentities.push(ids);
+  return (
+    <>
+      {ids.map((id) => (
+        <div data-testid={`by-id-${id}`} key={id}>
+          <ThreadPrimitive.Unstable_MessageById
+            messageId={id}
+            components={COMPONENTS}
+          />
+        </div>
+      ))}
+    </>
+  );
+};
+
+const initial: Msg[] = [
+  { id: "m1", role: "user", text: "first" },
+  { id: "m2", role: "assistant", text: "second" },
+  { id: "m3", role: "user", text: "third" },
+];
+
+const reset = () => {
+  lastIds = undefined;
+  idIdentities.length = 0;
+};
+
+describe("unstable_useThreadMessageIds", () => {
+  it("returns the message ids in thread order", () => {
+    reset();
+    render(
+      <Provider initial={initial}>
+        <List />
+      </Provider>,
+    );
+    expect(lastIds).toEqual(["m1", "m2", "m3"]);
+  });
+
+  it("keeps a stable array identity across content-only updates", async () => {
+    reset();
+    render(
+      <Provider initial={initial}>
+        <List />
+      </Provider>,
+    );
+    const before = lastIds;
+
+    await act(async () => {
+      setMessages((prev) =>
+        prev.map((m) => (m.id === "m2" ? { ...m, text: "second-edited" } : m)),
+      );
+    });
+
+    expect(lastIds).toBe(before);
+    expect(idIdentities).toHaveLength(1);
+  });
+
+  it("changes array identity when the id sequence changes", async () => {
+    reset();
+    render(
+      <Provider initial={initial}>
+        <List />
+      </Provider>,
+    );
+    const before = lastIds;
+
+    await act(async () => {
+      setMessages((prev) => [
+        ...prev,
+        { id: "m4", role: "user", text: "fourth" },
+      ]);
+    });
+
+    expect(lastIds).not.toBe(before);
+    expect(lastIds).toEqual(["m1", "m2", "m3", "m4"]);
+  });
+});
+
+describe("ThreadPrimitive.Unstable_MessageById", () => {
+  it("renders the same content as MessageByIndex for a known id", () => {
+    reset();
+    render(
+      <Provider initial={initial}>
+        <ThreadPrimitive.MessageByIndex index={1} components={COMPONENTS} />
+        <div data-testid="by-id">
+          <ThreadPrimitive.Unstable_MessageById
+            messageId="m2"
+            components={COMPONENTS}
+          />
+        </div>
+      </Provider>,
+    );
+    expect(screen.getByTestId("by-id").textContent).toBe("second");
+  });
+
+  it("renders null for an unknown id without throwing", () => {
+    reset();
+    expect(() =>
+      render(
+        <Provider initial={initial}>
+          <div data-testid="by-id">
+            <ThreadPrimitive.Unstable_MessageById
+              messageId="does-not-exist"
+              components={COMPONENTS}
+            />
+          </div>
+        </Provider>,
+      ),
+    ).not.toThrow();
+    expect(screen.getByTestId("by-id").textContent).toBe("");
+  });
+
+  it("renders null when messageId changes from known to unknown", () => {
+    reset();
+    const { rerender } = render(
+      <Provider initial={initial}>
+        <div data-testid="by-id">
+          <ThreadPrimitive.Unstable_MessageById
+            messageId="m3"
+            components={COMPONENTS}
+          />
+        </div>
+      </Provider>,
+    );
+    expect(screen.getByTestId("by-id").textContent).toBe("third");
+
+    expect(() =>
+      rerender(
+        <Provider initial={initial}>
+          <div data-testid="by-id">
+            <ThreadPrimitive.Unstable_MessageById
+              messageId="does-not-exist"
+              components={COMPONENTS}
+            />
+          </div>
+        </Provider>,
+      ),
+    ).not.toThrow();
+
+    expect(screen.getByTestId("by-id").textContent).toBe("");
+  });
+
+  it("stays attached to the same message across reordering", async () => {
+    reset();
+    render(
+      <Provider initial={initial}>
+        <div data-testid="by-id">
+          <ThreadPrimitive.Unstable_MessageById
+            messageId="m1"
+            components={COMPONENTS}
+          />
+        </div>
+      </Provider>,
+    );
+    expect(screen.getByTestId("by-id").textContent).toBe("first");
+
+    await act(async () => {
+      setMessages((prev) => [...prev].reverse());
+    });
+
+    expect(screen.getByTestId("by-id").textContent).toBe("first");
+  });
+});
+
+describe("exports", () => {
+  it("exposes the unstable id-keyed surface", () => {
+    expect(typeof unstable_useThreadMessageIds).toBe("function");
+    expect(ThreadPrimitive.Unstable_MessageById).toBeDefined();
+  });
+});

package/src/unstable/useComposerInput.test.tsx

@@ -0,0 +1,187 @@
+/** @vitest-environment jsdom */
+import { render } from "@testing-library/react";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+
+type ComposerState = { isEditing: boolean; text: string };
+
+const fixture = {
+  composer: { isEditing: true, text: "hello" } as ComposerState,
+  threadDisabled: false,
+  dictationInputDisabled: undefined as boolean | undefined,
+  sendDisabled: false,
+  activeAria: null as { popoverId: string; highlightedItemId?: string } | null,
+};
+
+const composerSetText = vi.fn();
+const composerSend = vi.fn();
+const flushTapSync = vi.fn((fn: () => void) => fn());
+
+vi.mock("@assistant-ui/store", () => ({
+  useAui: () => ({
+    composer: () => ({
+      getState: () => ({ isEditing: fixture.composer.isEditing }),
+      setText: composerSetText,
+      send: composerSend,
+    }),
+  }),
+  useAuiState: (selector: (s: unknown) => unknown) =>
+    selector({
+      composer: {
+        isEditing: fixture.composer.isEditing,
+        text: fixture.composer.text,
+        dictation: fixture.dictationInputDisabled
+          ? { inputDisabled: fixture.dictationInputDisabled }
+          : undefined,
+      },
+      thread: { isDisabled: fixture.threadDisabled },
+    }),
+}));
+vi.mock("@assistant-ui/tap", () => ({
+  flushTapSync: (fn: () => void) => flushTapSync(fn),
+}));
+vi.mock("@assistant-ui/core/react", () => ({
+  useComposerSend: () => ({
+    send: composerSend,
+    disabled: fixture.sendDisabled,
+  }),
+}));
+vi.mock("../primitives/composer/trigger/TriggerPopoverRootContext", () => ({
+  useTriggerPopoverActiveAriaOptional: () => fixture.activeAria,
+}));
+
+import {
+  unstable_useComposerInput,
+  unstable_useTriggerPopoverAriaProps,
+  type Unstable_ComposerInput,
+  type Unstable_TriggerPopoverAriaProps,
+} from "./useComposerInput";
+
+const renderInput = (options?: { disabled?: boolean }) => {
+  let result!: Unstable_ComposerInput;
+  function Harness() {
+    result = unstable_useComposerInput(options);
+    return null;
+  }
+  render(<Harness />);
+  return () => result;
+};
+
+const renderAria = () => {
+  let result!: Unstable_TriggerPopoverAriaProps;
+  function Harness() {
+    result = unstable_useTriggerPopoverAriaProps();
+    return null;
+  }
+  render(<Harness />);
+  return () => result;
+};
+
+beforeEach(() => {
+  fixture.composer = { isEditing: true, text: "hello" };
+  fixture.threadDisabled = false;
+  fixture.dictationInputDisabled = undefined;
+  fixture.sendDisabled = false;
+  fixture.activeAria = null;
+  composerSetText.mockClear();
+  composerSend.mockClear();
+  flushTapSync.mockClear();
+});
+
+describe("unstable_useComposerInput", () => {
+  it("exposes the composer text while editing", () => {
+    expect(renderInput()().value).toBe("hello");
+  });
+
+  it("reports an empty value when the composer is not editing", () => {
+    fixture.composer = { isEditing: false, text: "stale" };
+    expect(renderInput()().value).toBe("");
+  });
+
+  it("writes text via flushTapSync when editing", () => {
+    renderInput()().setText("world");
+    expect(flushTapSync).toHaveBeenCalledTimes(1);
+    expect(composerSetText).toHaveBeenCalledWith("world");
+  });
+
+  it("ignores setText when the composer is not editing (editing guard)", () => {
+    fixture.composer = { isEditing: false, text: "" };
+    renderInput()().setText("world");
+    expect(composerSetText).not.toHaveBeenCalled();
+  });
+
+  it("combines the disabled option with composer disabled sources", () => {
+    expect(renderInput()().isDisabled).toBe(false);
+    expect(renderInput({ disabled: true })().isDisabled).toBe(true);
+
+    fixture.threadDisabled = true;
+    expect(renderInput()().isDisabled).toBe(true);
+
+    fixture.threadDisabled = false;
+    fixture.dictationInputDisabled = true;
+    expect(renderInput()().isDisabled).toBe(true);
+  });
+
+  it("derives canSend from send gating and disabled state", () => {
+    expect(renderInput()().canSend).toBe(true);
+
+    fixture.sendDisabled = true;
+    expect(renderInput()().canSend).toBe(false);
+
+    fixture.sendDisabled = false;
+    expect(renderInput({ disabled: true })().canSend).toBe(false);
+
+    fixture.threadDisabled = true;
+    expect(renderInput()().canSend).toBe(false);
+
+    fixture.threadDisabled = false;
+    fixture.dictationInputDisabled = true;
+    expect(renderInput()().canSend).toBe(false);
+  });
+
+  it("forwards send options to the composer action", () => {
+    renderInput()().send({ steer: true });
+    expect(composerSend).toHaveBeenCalledWith({ steer: true });
+  });
+
+  it("does not send while send is unavailable or the input is disabled", () => {
+    fixture.sendDisabled = true;
+    renderInput()().send();
+    expect(composerSend).not.toHaveBeenCalled();
+
+    fixture.sendDisabled = false;
+    renderInput({ disabled: true })().send();
+    expect(composerSend).not.toHaveBeenCalled();
+
+    fixture.threadDisabled = true;
+    renderInput()().send();
+    expect(composerSend).not.toHaveBeenCalled();
+
+    fixture.threadDisabled = false;
+    fixture.dictationInputDisabled = true;
+    renderInput()().send();
+    expect(composerSend).not.toHaveBeenCalled();
+  });
+});
+
+describe("unstable_useTriggerPopoverAriaProps", () => {
+  it("is empty when no popover is active", () => {
+    expect(renderAria()()).toEqual({});
+  });
+
+  it("describes the active popover combobox relationship", () => {
+    fixture.activeAria = { popoverId: "pop-1", highlightedItemId: "item-2" };
+    expect(renderAria()()).toEqual({
+      "aria-controls": "pop-1",
+      "aria-expanded": true,
+      "aria-haspopup": "listbox",
+      "aria-activedescendant": "item-2",
+    });
+  });
+
+  it("emits an undefined aria-activedescendant when nothing is highlighted", () => {
+    fixture.activeAria = { popoverId: "pop-1" };
+    const props = renderAria()();
+    expect(props).toHaveProperty("aria-activedescendant", undefined);
+    expect(props["aria-controls"]).toBe("pop-1");
+  });
+});

package/src/unstable/useComposerInput.ts

@@ -0,0 +1,126 @@
+"use client";
+
+import { useCallback } from "react";
+import { useAui } from "@assistant-ui/store";
+import { flushTapSync } from "@assistant-ui/tap";
+import { useComposerSend } from "@assistant-ui/core/react";
+import type { ComposerSendOptions } from "@assistant-ui/core/store";
+import {
+  type TriggerPopoverAriaProps,
+  useComposerInputDisabled,
+  useComposerInputValue,
+  useTriggerPopoverAriaProps,
+} from "../primitives/composer/useComposerInputState";
+
+export type Unstable_UseComposerInputOptions = {
+  /**
+   * Disables the input in addition to the composer's own disabled sources
+   * (thread disabled, active dictation). When disabled, `isDisabled` is `true`
+   * and `canSend` is `false`.
+   */
+  disabled?: boolean | undefined;
+};
+
+export type Unstable_ComposerInput = {
+  /** Current composer text, or `""` when the composer is not editing. */
+  value: string;
+  /**
+   * Writes `text` into the composer, mirroring `ComposerPrimitive.Input`:
+   * a no-op unless the composer is editing, committed via `flushTapSync` so the
+   * controlled value stays in sync within the same tick.
+   */
+  setText(text: string): void;
+  /**
+   * Sends the current message when `canSend` is `true`; otherwise a no-op.
+   * Accepts the same options as the composer send action.
+   */
+  send(options?: ComposerSendOptions): void;
+  /**
+   * Whether the input is disabled, combining the `disabled` option with the
+   * composer's own disabled sources (thread disabled, active dictation).
+   */
+  isDisabled: boolean;
+  /**
+   * Whether a send is currently available. Matches `ComposerPrimitive.Send`
+   * gating (non-empty editing composer, not running without queue support) and
+   * is additionally `false` while `isDisabled`.
+   */
+  canSend: boolean;
+};
+
+/**
+ * @deprecated Under active development and might change without notice.
+ *
+ * Headless bridge to the composer's text value and send action, for building a
+ * custom composer input without `ComposerPrimitive.Input`. It is a thin bridge,
+ * not a second input: it does not own keyboard behavior, autosize, IME or
+ * contentEditable sync, paste/drop attachments, focus management, or rich-text
+ * state. Spread `unstable_useTriggerPopoverAriaProps()` onto your element for
+ * trigger-popover combobox semantics.
+ *
+ * @example
+ * ```tsx
+ * const { value, setText, send, isDisabled, canSend } = unstable_useComposerInput();
+ * <textarea
+ *   value={value}
+ *   disabled={isDisabled}
+ *   onChange={(e) => setText(e.target.value)}
+ *   onKeyDown={(e) => {
+ *     if (e.key === "Enter" && !e.shiftKey && canSend) {
+ *       e.preventDefault();
+ *       send();
+ *     }
+ *   }}
+ * />
+ * ```
+ */
+export function unstable_useComposerInput(
+  options?: Unstable_UseComposerInputOptions,
+): Unstable_ComposerInput {
+  const aui = useAui();
+  const value = useComposerInputValue();
+  const isDisabled = useComposerInputDisabled(options?.disabled);
+
+  const setText = useCallback(
+    (text: string) => {
+      if (!aui.composer().getState().isEditing) return;
+      flushTapSync(() => {
+        aui.composer().setText(text);
+      });
+    },
+    [aui],
+  );
+
+  const { send: rawSend, disabled: sendDisabled } = useComposerSend();
+  const canSend = !sendDisabled && !isDisabled;
+  const send = useCallback(
+    (sendOptions?: ComposerSendOptions) => {
+      if (!canSend) return;
+      rawSend(sendOptions);
+    },
+    [canSend, rawSend],
+  );
+
+  return { value, setText, send, isDisabled, canSend };
+}
+
+export type Unstable_TriggerPopoverAriaProps = TriggerPopoverAriaProps;
+
+/**
+ * @deprecated Under active development and might change without notice.
+ *
+ * ARIA combobox attributes for the focused element (typically the composer
+ * input) describing the open trigger popover, per the WAI-ARIA editable
+ * combobox pattern. Returns an empty object outside a `TriggerPopoverRoot` or
+ * when no popover is open. Spread these last so they take precedence over any
+ * matching ARIA props you set yourself, mirroring `ComposerPrimitive.Input`.
+ *
+ * @example
+ * ```tsx
+ * const aria = unstable_useTriggerPopoverAriaProps();
+ * <textarea {...aria} />
+ * ```
+ */
+export function unstable_useTriggerPopoverAriaProps(): Unstable_TriggerPopoverAriaProps {
+  return useTriggerPopoverAriaProps();
+}