@assistant-ui/react 0.15.17 → 0.15.19

package/src/primitives/composer/trigger/TriggerPopoverBehavior.test.tsx

@@ -0,0 +1,109 @@
+// @vitest-environment jsdom
+
+import { Suspense, type ReactNode } from "react";
+import { render, waitFor } from "@testing-library/react";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import type { Unstable_TriggerItem } from "@assistant-ui/core";
+import type { TriggerBehavior } from "./triggerSelectionResource";
+
+const mocks = vi.hoisted(() => ({ register: vi.fn() }));
+
+vi.mock("./TriggerPopover", async (importOriginal) => ({
+  ...(await importOriginal<typeof import("./TriggerPopover")>()),
+  useTriggerBehaviorRegistration: () => ({ register: mocks.register }),
+}));
+
+import { ComposerPrimitiveTriggerPopoverAction } from "./TriggerPopoverAction";
+import { ComposerPrimitiveTriggerPopoverDirective } from "./TriggerPopoverDirective";
+
+const item: Unstable_TriggerItem = {
+  id: "item-1",
+  type: "test",
+  label: "Item",
+};
+
+const verifyCommittedCallback = async (
+  renderBehavior: (callback: (item: Unstable_TriggerItem) => void) => ReactNode,
+  invoke: (behavior: TriggerBehavior) => void,
+) => {
+  let behavior: TriggerBehavior | undefined;
+  mocks.register.mockImplementation((next: TriggerBehavior) => {
+    behavior = next;
+    return () => {};
+  });
+
+  let suspend = false;
+  const suspended = new Promise<never>(() => {});
+  const renderProbe = vi.fn();
+  const Suspender = () => {
+    if (suspend) throw suspended;
+    return null;
+  };
+  const Probe = () => {
+    renderProbe();
+    return null;
+  };
+  const View = ({
+    callback,
+  }: {
+    callback: (item: Unstable_TriggerItem) => void;
+  }) => (
+    <Suspense fallback={null}>
+      {renderBehavior(callback)}
+      <Probe />
+      <Suspender />
+    </Suspense>
+  );
+
+  const committed = vi.fn();
+  const abandoned = vi.fn();
+  const view = render(<View callback={committed} />);
+
+  await waitFor(() => expect(behavior).toBeDefined());
+  renderProbe.mockClear();
+
+  suspend = true;
+  view.rerender(<View callback={abandoned} />);
+  await waitFor(() => expect(renderProbe).toHaveBeenCalled());
+
+  invoke(behavior!);
+  expect(committed).toHaveBeenCalledExactlyOnceWith(item);
+  expect(abandoned).not.toHaveBeenCalled();
+
+  suspend = false;
+  view.rerender(<View callback={abandoned} />);
+  invoke(behavior!);
+  expect(abandoned).toHaveBeenCalledExactlyOnceWith(item);
+};
+
+describe("TriggerPopover behavior callbacks", () => {
+  beforeEach(() => {
+    mocks.register.mockReset();
+  });
+
+  it("keeps the committed action callback during abandoned renders", async () => {
+    await verifyCommittedCallback(
+      (onExecute) => (
+        <ComposerPrimitiveTriggerPopoverAction onExecute={onExecute} />
+      ),
+      (behavior) => {
+        if (behavior.kind !== "action") throw new Error("Expected action");
+        behavior.onExecute(item);
+      },
+    );
+  });
+
+  it("keeps the committed directive callback during abandoned renders", async () => {
+    await verifyCommittedCallback(
+      (onInserted) => (
+        <ComposerPrimitiveTriggerPopoverDirective onInserted={onInserted} />
+      ),
+      (behavior) => {
+        if (behavior.kind !== "directive") {
+          throw new Error("Expected directive");
+        }
+        behavior.onInserted?.(item);
+      },
+    );
+  });
+});

package/src/primitives/composer/trigger/TriggerPopoverDirective.tsx

@@ -5,7 +5,7 @@ import type {
   Unstable_TriggerItem,
 } from "@assistant-ui/core";
 import { unstable_defaultDirectiveFormatter } from "@assistant-ui/core";
-import { useEffect, useRef, type FC } from "react";
+import { useEffect, useInsertionEffect, useRef, type FC } from "react";
 import { useTriggerBehaviorRegistration } from "./TriggerPopover";
 import type { TriggerBehavior } from "./triggerSelectionResource";
 
@@ -39,7 +39,9 @@ export const ComposerPrimitiveTriggerPopoverDirective: FC<
 > = ({ formatter, onInserted }) => {
   const { register } = useTriggerBehaviorRegistration();
   const onInsertedRef = useRef(onInserted);
-  onInsertedRef.current = onInserted;
+  useInsertionEffect(() => {
+    onInsertedRef.current = onInserted;
+  }, [onInserted]);
 
   useEffect(() => {
     const behavior: TriggerBehavior = {

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

@@ -0,0 +1,52 @@
+import { describe, it, expect } from "vitest";
+import { matchesTriggerItemQuery } from "./matchesTriggerItemQuery";
+import type { Unstable_TriggerItem } from "@assistant-ui/core";
+
+const item = (
+  overrides: Partial<Unstable_TriggerItem>,
+): Unstable_TriggerItem => ({
+  id: "summarize",
+  type: "command",
+  label: "Summarize",
+  ...overrides,
+});
+
+describe("matchesTriggerItemQuery", () => {
+  it("matches every item on an empty query", () => {
+    expect(matchesTriggerItemQuery(item({}), "")).toBe(true);
+  });
+
+  it("matches case-insensitively against the id", () => {
+    expect(
+      matchesTriggerItemQuery(item({ id: "SummArize", label: "y" }), "marize"),
+    ).toBe(true);
+  });
+
+  it("matches case-insensitively against the label", () => {
+    expect(
+      matchesTriggerItemQuery(
+        item({ id: "x", label: "Translate Text" }),
+        "late",
+      ),
+    ).toBe(true);
+  });
+
+  it("matches against the description when present", () => {
+    expect(
+      matchesTriggerItemQuery(
+        item({ id: "x", label: "y", description: "Condense the thread" }),
+        "condense",
+      ),
+    ).toBe(true);
+  });
+
+  it("does not match when no field contains the query", () => {
+    expect(
+      matchesTriggerItemQuery(item({ description: "nothing here" }), "zzz"),
+    ).toBe(false);
+  });
+
+  it("does not throw on items without a description", () => {
+    expect(matchesTriggerItemQuery(item({}), "zzz")).toBe(false);
+  });
+});

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

@@ -0,0 +1,13 @@
+import type { Unstable_TriggerItem } from "@assistant-ui/core";
+
+export function matchesTriggerItemQuery(
+  item: Unstable_TriggerItem,
+  lowerQuery: string,
+): boolean {
+  if (!lowerQuery) return true;
+  return (
+    item.id.toLowerCase().includes(lowerQuery) ||
+    item.label.toLowerCase().includes(lowerQuery) ||
+    (item.description?.toLowerCase().includes(lowerQuery) ?? false)
+  );
+}

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

@@ -1,4 +1,4 @@
-import { useEffect, useEffectEvent, useState } from "react";
+import { useEffectEvent, useState } from "react";
 import { resource } from "@assistant-ui/tap";
 import type {
   Unstable_TriggerCategory,
@@ -58,14 +58,20 @@ const useTriggerKeyboardResource = ({
   close: () => void;
 }): TriggerKeyboardResourceOutput => {
   const [highlightedIndex, setHighlightedIndex] = useState(0);
+  const [highlightScope, setHighlightScope] = useState({
+    navigableList,
+    isSearchMode,
+    activeCategoryId,
+  });
 
-  useEffect(() => {
-    setHighlightedIndex(0);
-  }, [navigableList]);
-
-  useEffect(() => {
+  if (
+    highlightScope.navigableList !== navigableList ||
+    highlightScope.isSearchMode !== isSearchMode ||
+    highlightScope.activeCategoryId !== activeCategoryId
+  ) {
+    setHighlightScope({ navigableList, isSearchMode, activeCategoryId });
     setHighlightedIndex(0);
-  }, [isSearchMode, activeCategoryId]);
+  }
 
   const highlightIndex = useEffectEvent((index: number) => {
     if (index < 0 || index >= navigableList.length) return;

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

@@ -1,18 +1,11 @@
-import { useEffect, useEffectEvent, useMemo, useState } from "react";
+import { useEffectEvent, useMemo, useState } from "react";
 import { resource } from "@assistant-ui/tap";
 import type {
   Unstable_TriggerAdapter,
   Unstable_TriggerCategory,
   Unstable_TriggerItem,
 } from "@assistant-ui/core";
-
-function matchesQuery(item: Unstable_TriggerItem, lower: string): boolean {
-  return (
-    item.id.toLowerCase().includes(lower) ||
-    item.label.toLowerCase().includes(lower) ||
-    (item.description?.toLowerCase().includes(lower) ?? false)
-  );
-}
+import { matchesTriggerItemQuery } from "./matchesTriggerItemQuery";
 
 export type TriggerNavigationResourceOutput = {
   /** Filtered categories visible in the list (empty in search mode). */
@@ -48,10 +41,12 @@ const useTriggerNavigationResource = ({
   open: boolean;
 }): TriggerNavigationResourceOutput => {
   const [activeCategoryId, setActiveCategoryId] = useState<string | null>(null);
+  const [wasOpen, setWasOpen] = useState(open);
 
-  useEffect(() => {
+  if (wasOpen !== open) {
+    setWasOpen(open);
     if (!open) setActiveCategoryId(null);
-  }, [open]);
+  }
 
   const categories = useMemo<readonly Unstable_TriggerCategory[]>(() => {
     if (!open || !adapter) return [];
@@ -76,7 +71,7 @@ const useTriggerNavigationResource = ({
     const lower = query.toLowerCase();
     for (const cat of categories) {
       for (const item of adapter.categoryItems(cat.id)) {
-        if (matchesQuery(item, lower)) {
+        if (matchesTriggerItemQuery(item, lower)) {
           all.push(item);
         }
       }
@@ -97,7 +92,7 @@ const useTriggerNavigationResource = ({
     if (isSearchMode) return searchResults ?? [];
     if (!query) return allItems;
     const lower = query.toLowerCase();
-    return allItems.filter((item) => matchesQuery(item, lower));
+    return allItems.filter((item) => matchesTriggerItemQuery(item, lower));
   }, [allItems, query, isSearchMode, searchResults]);
 
   const navigableList = useMemo(() => {

package/src/primitives/message/MessageParts.tsx

@@ -43,29 +43,9 @@ export const MessagePrimitiveParts: FC<MessagePrimitiveParts.Props> = (
   const { components, ...rest } = props;
   const merged = components
     ? {
+        ...components,
         Text: components.Text ?? webDefaultComponents.Text,
         Image: components.Image ?? webDefaultComponents.Image,
-        Reasoning:
-          components.Reasoning ?? messagePartsDefaultComponents.Reasoning,
-        Source: components.Source ?? messagePartsDefaultComponents.Source,
-        File: components.File ?? messagePartsDefaultComponents.File,
-        Unstable_Audio:
-          components.Unstable_Audio ??
-          messagePartsDefaultComponents.Unstable_Audio,
-        ...("ChainOfThought" in components
-          ? { ChainOfThought: components.ChainOfThought }
-          : {
-              tools: components.tools,
-              data: components.data,
-              ToolGroup:
-                components.ToolGroup ?? messagePartsDefaultComponents.ToolGroup,
-              ReasoningGroup:
-                components.ReasoningGroup ??
-                messagePartsDefaultComponents.ReasoningGroup,
-            }),
-        Empty: components.Empty,
-        Quote: components.Quote,
-        generativeUI: components.generativeUI,
       }
     : webDefaultComponents;
 

package/src/primitives/message/MessagePartsGrouped.test.tsx

@@ -0,0 +1,93 @@
+// @vitest-environment jsdom
+
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+import type { ThreadMessageLike } from "@assistant-ui/core";
+import {
+  AssistantRuntimeProvider,
+  useExternalStoreRuntime,
+} from "@assistant-ui/core/react";
+import { ThreadPrimitiveMessageByIndex } from "../thread/ThreadMessages";
+import { MessagePrimitiveUnstable_PartsGroupedByParentId } from "./MessagePartsGrouped";
+
+const Message = () => (
+  <MessagePrimitiveUnstable_PartsGroupedByParentId
+    components={{
+      Text: ({ text }) => <span>{text}</span>,
+      Group: ({ groupKey, indices, children }) => (
+        <section
+          data-testid="group"
+          data-parent={groupKey}
+          data-indices={indices.join(",")}
+        >
+          {children}
+        </section>
+      ),
+    }}
+  />
+);
+
+const Example = ({ content }: { content: ThreadMessageLike["content"] }) => {
+  const messages: ThreadMessageLike[] = [
+    { id: "message", role: "assistant", content },
+  ];
+  const runtime = useExternalStoreRuntime({
+    messages,
+    convertMessage: (message) => message,
+    onNew: async () => {},
+  });
+  return (
+    <AssistantRuntimeProvider runtime={runtime}>
+      <ThreadPrimitiveMessageByIndex index={0} components={{ Message }} />
+    </AssistantRuntimeProvider>
+  );
+};
+
+describe("MessagePrimitive.Unstable_PartsGroupedByParentId", () => {
+  it("keeps parent IDs separate from ungrouped parts across content updates", () => {
+    const { rerender } = render(
+      <Example
+        content={[
+          { type: "text", text: "standalone" },
+          { type: "text", text: "child", parentId: "__ungrouped_0" },
+        ]}
+      />,
+    );
+    expect(
+      screen.getAllByTestId("group").map((group) => ({
+        parent: group.getAttribute("data-parent"),
+        indices: group.getAttribute("data-indices"),
+        text: group.textContent,
+      })),
+    ).toEqual([
+      { parent: null, indices: "0", text: "standalone" },
+      { parent: "__ungrouped_0", indices: "1", text: "child" },
+    ]);
+
+    rerender(
+      <Example
+        content={[
+          { type: "text", text: "first", parentId: "__ungrouped_parent" },
+          { type: "text", text: "standalone" },
+          { type: "text", text: "last", parentId: "__ungrouped_parent" },
+          { type: "text", text: "numeric", parentId: "1" },
+          { type: "text", text: "empty", parentId: "" },
+          { type: "text", text: "trailing" },
+        ]}
+      />,
+    );
+    expect(
+      screen.getAllByTestId("group").map((group) => ({
+        parent: group.getAttribute("data-parent"),
+        indices: group.getAttribute("data-indices"),
+        text: group.textContent,
+      })),
+    ).toEqual([
+      { parent: "__ungrouped_parent", indices: "0,2", text: "firstlast" },
+      { parent: null, indices: "1", text: "standalone" },
+      { parent: "1", indices: "3", text: "numeric" },
+      { parent: "", indices: "4", text: "empty" },
+      { parent: null, indices: "5", text: "trailing" },
+    ]);
+  });
+});

package/src/primitives/message/MessagePartsGrouped.tsx

@@ -44,7 +44,7 @@ const groupMessagePartsByParentId: GroupingFunction = (
   parts: readonly any[],
 ): MessagePartGroup[] => {
   // Map maintains insertion order, so groups appear in order of first occurrence
-  const groupMap = new Map<string, number[]>();
+  const groupMap = new Map<string | number, number[]>();
 
   // Process each part in order
   for (let i = 0; i < parts.length; i++) {
@@ -52,7 +52,7 @@ const groupMessagePartsByParentId: GroupingFunction = (
     const parentId = part?.parentId as string | undefined;
 
     // For parts without parentId, assign a unique group ID to maintain their position
-    const groupId = parentId ?? `__ungrouped_${i}`;
+    const groupId = parentId ?? i;
 
     // Get or create the indices array for this group
     const indices = groupMap.get(groupId) ?? [];
@@ -64,7 +64,7 @@ const groupMessagePartsByParentId: GroupingFunction = (
   const groups: MessagePartGroup[] = [];
   for (const [groupId, indices] of groupMap) {
     // Extract parentId (undefined for ungrouped parts)
-    const groupKey = groupId.startsWith("__ungrouped_") ? undefined : groupId;
+    const groupKey = typeof groupId === "string" ? groupId : undefined;
     groups.push({ groupKey, indices });
   }
 
@@ -94,15 +94,15 @@ export namespace MessagePrimitiveUnstable_PartsGrouped {
      * ```tsx
      * // Group by parent ID (default behavior)
      * groupingFunction={(parts) => {
-     *   const groups = new Map<string, number[]>();
+     *   const groups = new Map<string | number, number[]>();
      *   parts.forEach((part, i) => {
-     *     const key = part.parentId ?? `__ungrouped_${i}`;
+     *     const key = part.parentId ?? i;
      *     const indices = groups.get(key) ?? [];
      *     indices.push(i);
      *     groups.set(key, indices);
      *   });
      *   return Array.from(groups.entries()).map(([key, indices]) => ({
-     *     key: key.startsWith("__ungrouped_") ? undefined : key,
+     *     groupKey: typeof key === "string" ? key : undefined,
      *     indices
      *   }));
      * }}

package/src/primitives/messagePart/MessagePartText.test.tsx

@@ -0,0 +1,69 @@
+// @vitest-environment jsdom
+
+import { createRef } from "react";
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+import { TextMessagePartProvider } from "../../context/providers/TextMessagePartProvider";
+import { MessagePartPrimitiveText } from "./MessagePartText";
+
+describe("MessagePartPrimitive.Text", () => {
+  it("renders text in the supplied element and composes its props and refs", () => {
+    const ref = createRef<HTMLSpanElement>();
+    const targetRef = createRef<HTMLElement>();
+    const { rerender } = render(
+      <TextMessagePartProvider text="Hello">
+        <MessagePartPrimitiveText
+          smooth={false}
+          render={<mark ref={targetRef} className="target" />}
+          className="text"
+          ref={ref}
+        />
+      </TextMessagePartProvider>,
+    );
+
+    const text = screen.getByText("Hello");
+    expect(text.tagName).toBe("MARK");
+    expect(text.classList.contains("target")).toBe(true);
+    expect(text.classList.contains("text")).toBe(true);
+    expect(text.getAttribute("data-status")).toBe("complete");
+    expect(text.hasAttribute("render")).toBe(false);
+    expect(ref.current).toBe(text);
+    expect(targetRef.current).toBe(text);
+
+    rerender(
+      <TextMessagePartProvider text="Hello again" isRunning>
+        <MessagePartPrimitiveText smooth={false} render={<mark />} />
+      </TextMessagePartProvider>,
+    );
+
+    const updated = screen.getByText("Hello again");
+    expect(updated.tagName).toBe("MARK");
+    expect(updated.getAttribute("data-status")).toBe("running");
+  });
+
+  it("keeps the default span and explicit component behavior", () => {
+    const spanRef = createRef<HTMLSpanElement>();
+    const componentRef = createRef<HTMLElement>();
+    render(
+      <TextMessagePartProvider text="Hello">
+        <MessagePartPrimitiveText ref={spanRef} />
+        <MessagePartPrimitiveText component="p" ref={componentRef} />
+        <MessagePartPrimitiveText component="p" render={<mark />} />
+        <MessagePartPrimitiveText component="p" render={undefined} />
+      </TextMessagePartProvider>,
+    );
+
+    expect(spanRef.current?.tagName).toBe("SPAN");
+    expect(spanRef.current?.getAttribute("data-status")).toBe("complete");
+    expect(componentRef.current?.tagName).toBe("P");
+    expect(screen.getAllByText("Hello").map((text) => text.tagName)).toEqual([
+      "SPAN",
+      "P",
+      "MARK",
+      "P",
+    ]);
+    expect(
+      screen.getByText("Hello", { selector: "mark" }).hasAttribute("render"),
+    ).toBe(false);
+  });
+});

package/src/primitives/messagePart/MessagePartText.tsx

@@ -1,11 +1,12 @@
 "use client";
 
-import type { Primitive } from "../../utils/Primitive";
+import { Primitive, renderSlot } from "../../utils/Primitive";
 import {
   type ComponentRef,
   forwardRef,
   type ComponentPropsWithoutRef,
   type ElementType,
+  isValidElement,
 } from "react";
 import { useMessagePartText } from "./useMessagePartText";
 import { useSmooth, type SmoothOptions } from "../../utils/smooth/useSmooth";
@@ -26,6 +27,7 @@ export namespace MessagePartPrimitiveText {
     smooth?: boolean | SmoothOptions;
     /**
      * The HTML element or React component to render as.
+     * Ignored when a valid `render` element is supplied.
      * @default "span"
      */
     component?: ElementType;
@@ -51,14 +53,25 @@ export namespace MessagePartPrimitiveText {
 export const MessagePartPrimitiveText = forwardRef<
   MessagePartPrimitiveText.Element,
   MessagePartPrimitiveText.Props
->(({ smooth = true, component: Component = "span", ...rest }, forwardedRef) => {
-  const { text, status } = useSmooth(useMessagePartText(), smooth);
+>(
+  (
+    { smooth = true, component: Component = Primitive.span, render, ...rest },
+    forwardedRef,
+  ) => {
+    const { text, status } = useSmooth(useMessagePartText(), smooth);
 
-  return (
-    <Component data-status={status.type} {...rest} ref={forwardedRef}>
-      {text}
-    </Component>
-  );
-});
+    const mergedProps = {
+      "data-status": status.type,
+      ...rest,
+      ref: forwardedRef,
+    };
+
+    if (render && isValidElement(render)) {
+      return renderSlot(render, text, mergedProps);
+    }
+
+    return <Component {...mergedProps}>{text}</Component>;
+  },
+);
 
 MessagePartPrimitiveText.displayName = "MessagePartPrimitive.Text";