@assistant-ui/react 0.12.10 → 0.12.11

package/src/primitives/message/MessageParts.tsx

@@ -17,6 +17,8 @@ import { MessagePartPrimitiveText } from "../messagePart/MessagePartText";
 import { MessagePartPrimitiveImage } from "../messagePart/MessagePartImage";
 import type {
   Unstable_AudioMessagePartComponent,
+  DataMessagePartComponent,
+  DataMessagePartProps,
   EmptyMessagePartComponent,
   TextMessagePartComponent,
   ImageMessagePartComponent,
@@ -28,7 +30,7 @@ import type {
   ReasoningGroupComponent,
 } from "../../types/MessagePartComponentTypes";
 import { MessagePartPrimitiveInProgress } from "../messagePart/MessagePartInProgress";
-import { MessagePartStatus } from "../../types/AssistantTypes";
+import type { MessagePartStatus } from "@assistant-ui/core";
 import { useShallow } from "zustand/shallow";
 
 type MessagePartRange =
@@ -145,6 +147,13 @@ const useMessagePartsGroups = (
 };
 
 export namespace MessagePrimitiveParts {
+  type DataConfig = {
+    /** Map data event names to specific components */
+    by_name?: Record<string, DataMessagePartComponent | undefined> | undefined;
+    /** Fallback component for unmatched data events */
+    Fallback?: DataMessagePartComponent | undefined;
+  };
+
   type BaseComponents = {
     /** Component for rendering empty messages */
     Empty?: EmptyMessagePartComponent | undefined;
@@ -158,6 +167,8 @@ export namespace MessagePrimitiveParts {
     File?: FileMessagePartComponent | undefined;
     /** Component for rendering audio content (experimental) */
     Unstable_Audio?: Unstable_AudioMessagePartComponent | undefined;
+    /** Configuration for data part rendering */
+    data?: DataConfig | undefined;
   };
 
   type ToolsConfig =
@@ -330,6 +341,21 @@ const ToolUIDisplay = ({
   return <Render {...props} />;
 };
 
+const DataUIDisplay = ({
+  Fallback,
+  ...props
+}: {
+  Fallback: DataMessagePartComponent | undefined;
+} & DataMessagePartProps) => {
+  const Render = useAuiState((s) => {
+    const Render = s.dataRenderers.renderers[props.name] ?? Fallback;
+    if (Array.isArray(Render)) return Render[0] ?? Fallback;
+    return Render;
+  });
+  if (!Render) return null;
+  return <Render {...props} />;
+};
+
 const defaultComponents = {
   Text: () => (
     <p style={{ whiteSpace: "pre-line" }}>
@@ -361,6 +387,7 @@ export const MessagePartComponent: FC<MessagePartComponentProps> = ({
     File = defaultComponents.File,
     Unstable_Audio: Audio = defaultComponents.Unstable_Audio,
     tools = {},
+    data,
   } = {},
 }) => {
   const aui = useAui();
@@ -405,8 +432,10 @@ export const MessagePartComponent: FC<MessagePartComponentProps> = ({
     case "audio":
       return <Audio {...part} />;
 
-    case "data":
-      return null;
+    case "data": {
+      const Data = data?.by_name?.[part.name] ?? data?.Fallback;
+      return <DataUIDisplay {...part} Fallback={Data} />;
+    }
 
     default:
       const unhandledType: never = type;
@@ -456,6 +485,7 @@ export const MessagePrimitivePartByIndex: FC<MessagePrimitivePartByIndex.Props>
       prev.components?.File === next.components?.File &&
       prev.components?.Unstable_Audio === next.components?.Unstable_Audio &&
       prev.components?.tools === next.components?.tools &&
+      prev.components?.data === next.components?.data &&
       prev.components?.ToolGroup === next.components?.ToolGroup &&
       prev.components?.ReasoningGroup === next.components?.ReasoningGroup,
   );

package/src/primitives/message/MessagePartsGrouped.tsx

@@ -16,6 +16,8 @@ import { MessagePartPrimitiveText } from "../messagePart/MessagePartText";
 import { MessagePartPrimitiveImage } from "../messagePart/MessagePartImage";
 import type {
   Unstable_AudioMessagePartComponent,
+  DataMessagePartComponent,
+  DataMessagePartProps,
   EmptyMessagePartComponent,
   TextMessagePartComponent,
   ImageMessagePartComponent,
@@ -26,7 +28,7 @@ import type {
   ReasoningMessagePartComponent,
 } from "../../types/MessagePartComponentTypes";
 import { MessagePartPrimitiveInProgress } from "../messagePart/MessagePartInProgress";
-import { MessagePartStatus } from "../../types/AssistantTypes";
+import type { MessagePartStatus } from "@assistant-ui/core";
 
 type MessagePartGroup = {
   groupKey: string | undefined;
@@ -153,6 +155,17 @@ export namespace MessagePrimitiveUnstable_PartsGrouped {
           File?: FileMessagePartComponent | undefined;
           /** Component for rendering audio content (experimental) */
           Unstable_Audio?: Unstable_AudioMessagePartComponent | undefined;
+          /** Configuration for data part rendering */
+          data?:
+            | {
+                /** Map data event names to specific components */
+                by_name?:
+                  | Record<string, DataMessagePartComponent | undefined>
+                  | undefined;
+                /** Fallback component for unmatched data events */
+                Fallback?: DataMessagePartComponent | undefined;
+              }
+            | undefined;
           /** Configuration for tool call rendering */
           tools?:
             | {
@@ -228,6 +241,21 @@ const ToolUIDisplay = ({
   return <Render {...props} />;
 };
 
+const DataUIDisplay = ({
+  Fallback,
+  ...props
+}: {
+  Fallback: DataMessagePartComponent | undefined;
+} & DataMessagePartProps) => {
+  const Render = useAuiState((s) => {
+    const Render = s.dataRenderers.renderers[props.name] ?? Fallback;
+    if (Array.isArray(Render)) return Render[0] ?? Fallback;
+    return Render;
+  });
+  if (!Render) return null;
+  return <Render {...props} />;
+};
+
 const defaultComponents = {
   Text: () => (
     <p style={{ whiteSpace: "pre-line" }}>
@@ -258,6 +286,7 @@ const MessagePartComponent: FC<MessagePartComponentProps> = ({
     File = defaultComponents.File,
     Unstable_Audio: Audio = defaultComponents.Unstable_Audio,
     tools = {},
+    data,
   } = {},
 }) => {
   const aui = useAui();
@@ -302,8 +331,10 @@ const MessagePartComponent: FC<MessagePartComponentProps> = ({
     case "audio":
       return <Audio {...part} />;
 
-    case "data":
-      return null;
+    case "data": {
+      const Data = data?.by_name?.[part.name] ?? data?.Fallback;
+      return <DataUIDisplay {...part} Fallback={Data} />;
+    }
 
     default:
       const unhandledType: never = type;
@@ -335,6 +366,7 @@ const MessagePart = memo(
     prev.components?.File === next.components?.File &&
     prev.components?.Unstable_Audio === next.components?.Unstable_Audio &&
     prev.components?.tools === next.components?.tools &&
+    prev.components?.data === next.components?.data &&
     prev.components?.Group === next.components?.Group,
 );
 

package/src/primitives/messagePart/{useMessagePartData.tsx → useMessagePartData.ts}

@@ -1,7 +1,7 @@
 "use client";
 
+import type { DataMessagePart } from "@assistant-ui/core";
 import { useAuiState } from "@assistant-ui/store";
-import { DataMessagePart } from "../../types";
 
 export const useMessagePartData = <T = any>(name?: string) => {
   const part = useAuiState((s) => {

package/src/primitives/messagePart/{useMessagePartFile.tsx → useMessagePartFile.ts}

@@ -1,8 +1,7 @@
 "use client";
 
-import { MessagePartState } from "../../legacy-runtime/runtime/MessagePartRuntime";
+import type { FileMessagePart, MessagePartState } from "@assistant-ui/core";
 import { useAuiState } from "@assistant-ui/store";
-import { FileMessagePart } from "../../types";
 
 export const useMessagePartFile = () => {
   const file = useAuiState((s) => {

package/src/primitives/messagePart/{useMessagePartImage.tsx → useMessagePartImage.ts}

@@ -1,8 +1,7 @@
 "use client";
 
-import { MessagePartState } from "../../legacy-runtime/runtime/MessagePartRuntime";
+import type { ImageMessagePart, MessagePartState } from "@assistant-ui/core";
 import { useAuiState } from "@assistant-ui/store";
-import { ImageMessagePart } from "../../types";
 
 export const useMessagePartImage = () => {
   const image = useAuiState((s) => {

package/src/primitives/messagePart/{useMessagePartReasoning.tsx → useMessagePartReasoning.ts}

@@ -1,8 +1,10 @@
 "use client";
 
-import { MessagePartState } from "../../legacy-runtime/runtime/MessagePartRuntime";
+import type {
+  ReasoningMessagePart,
+  MessagePartState,
+} from "@assistant-ui/core";
 import { useAuiState } from "@assistant-ui/store";
-import { ReasoningMessagePart } from "../../types";
 
 export const useMessagePartReasoning = () => {
   const text = useAuiState((s) => {

package/src/primitives/messagePart/{useMessagePartSource.tsx → useMessagePartSource.ts}

@@ -1,8 +1,7 @@
 "use client";
 
-import type { MessagePartState } from "../../legacy-runtime/runtime/MessagePartRuntime";
+import type { SourceMessagePart, MessagePartState } from "@assistant-ui/core";
 import { useAuiState } from "@assistant-ui/store";
-import { SourceMessagePart } from "../../types";
 
 export const useMessagePartSource = () => {
   const source = useAuiState((s) => {

package/src/primitives/messagePart/{useMessagePartText.tsx → useMessagePartText.ts}

@@ -1,8 +1,11 @@
 "use client";
 
-import { MessagePartState } from "../../legacy-runtime/runtime/MessagePartRuntime";
+import type {
+  TextMessagePart,
+  ReasoningMessagePart,
+  MessagePartState,
+} from "@assistant-ui/core";
 import { useAuiState } from "@assistant-ui/store";
-import { TextMessagePart, ReasoningMessagePart } from "../../types";
 
 export const useMessagePartText = () => {
   const text = useAuiState((s) => {

package/src/primitives/selectionToolbar/SelectionToolbarQuote.tsx

@@ -40,7 +40,7 @@ export const SelectionToolbarPrimitiveQuote = forwardRef<
   const handleClick = useCallback(() => {
     if (!info) return;
 
-    aui.thread().composer.setQuote({
+    aui.thread().composer().setQuote({
       text: info.text,
       messageId: info.messageId,
     });

package/src/primitives/thread/ThreadMessages.tsx

@@ -1,9 +1,9 @@
 "use client";
 
+import type { ThreadMessage as ThreadMessageType } from "@assistant-ui/core";
 import { type ComponentType, type FC, memo, useMemo } from "react";
 import { useAuiState } from "@assistant-ui/store";
 import { MessageByIndexProvider } from "../../context/providers";
-import { ThreadMessage as ThreadMessageType } from "../../types";
 
 export namespace ThreadPrimitiveMessages {
   export type Props = {

package/src/primitives/threadListItem/ThreadListItemTitle.test.tsx

@@ -0,0 +1,52 @@
+import { describe, expect, it, vi } from "vitest";
+import { renderToStaticMarkup } from "react-dom/server";
+import type { ReactNode } from "react";
+import { ThreadListItemPrimitiveTitle } from "./ThreadListItemTitle";
+
+const mockUseAuiState = vi.fn();
+type UseAuiStateSelector = Parameters<
+  typeof import("@assistant-ui/store")["useAuiState"]
+>[0];
+
+vi.mock("@assistant-ui/store", () => ({
+  useAuiState: (selector: UseAuiStateSelector) => mockUseAuiState(selector),
+}));
+
+const renderTitle = (
+  title: string | undefined,
+  fallback: ReactNode = "New Chat",
+) => {
+  mockUseAuiState.mockImplementation((selector: UseAuiStateSelector) =>
+    selector({ threadListItem: { title } } as never),
+  );
+
+  return renderToStaticMarkup(
+    <ThreadListItemPrimitiveTitle fallback={fallback} />,
+  );
+};
+
+describe("ThreadListItemPrimitiveTitle", () => {
+  it("renders the thread title text", () => {
+    const html = renderTitle("Weather Inquiry for San Francisco");
+
+    expect(html).toBe("Weather Inquiry for San Francisco");
+  });
+
+  it("renders fallback text when title is missing", () => {
+    const html = renderTitle(undefined, "New Chat");
+
+    expect(html).toBe("New Chat");
+  });
+
+  it("renders fallback text when title is an empty string", () => {
+    const html = renderTitle("", "New Chat");
+
+    expect(html).toBe("New Chat");
+  });
+
+  it("renders ReactNode fallback content", () => {
+    const html = renderTitle(undefined, <em>New Chat</em>);
+
+    expect(html).toBe("<em>New Chat</em>");
+  });
+});

package/src/tests/BaseComposerRuntimeCore.test.ts

@@ -0,0 +1,318 @@
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { BaseComposerRuntimeCore } from "../legacy-runtime/runtime-cores/composer/BaseComposerRuntimeCore";
+import type { AttachmentAdapter } from "../legacy-runtime/runtime-cores/adapters/attachment";
+import type { DictationAdapter } from "../legacy-runtime/runtime-cores/adapters/speech/SpeechAdapterTypes";
+import type { AppendMessage, PendingAttachment } from "@assistant-ui/core";
+
+class TestComposerCore extends BaseComposerRuntimeCore {
+  private _attachmentAdapter: AttachmentAdapter | undefined;
+  private _dictationAdapter: DictationAdapter | undefined;
+  public sentMessages: Array<Omit<AppendMessage, "parentId" | "sourceId">> = [];
+  public cancelCalled = false;
+
+  protected getAttachmentAdapter() {
+    return this._attachmentAdapter;
+  }
+  protected getDictationAdapter() {
+    return this._dictationAdapter;
+  }
+
+  setAttachmentAdapter(adapter: AttachmentAdapter | undefined) {
+    this._attachmentAdapter = adapter;
+  }
+
+  setDictationAdapter(adapter: DictationAdapter | undefined) {
+    this._dictationAdapter = adapter;
+  }
+
+  get canCancel() {
+    return false;
+  }
+
+  protected handleSend(message: Omit<AppendMessage, "parentId" | "sourceId">) {
+    this.sentMessages.push(message);
+  }
+
+  protected handleCancel() {
+    this.cancelCalled = true;
+  }
+}
+
+const makePendingAttachment = (
+  id: string,
+  name = "file.txt",
+): PendingAttachment => ({
+  id,
+  type: "file",
+  name,
+  contentType: "text/plain",
+  file: new File(["content"], name),
+  status: { type: "requires-action", reason: "composer-send" },
+});
+
+describe("BaseComposerRuntimeCore", () => {
+  let composer: TestComposerCore;
+
+  beforeEach(() => {
+    composer = new TestComposerCore();
+  });
+
+  it("sets and gets text", () => {
+    composer.setText("hello");
+    expect(composer.text).toBe("hello");
+  });
+
+  it("setText does not notify when value unchanged", () => {
+    composer.setText("same");
+    const listener = vi.fn();
+    composer.subscribe(listener);
+
+    composer.setText("same");
+    expect(listener).not.toHaveBeenCalled();
+  });
+
+  it("isEmpty returns true when no text and no attachments", () => {
+    expect(composer.isEmpty).toBe(true);
+  });
+
+  it("isEmpty returns false when text is present", () => {
+    composer.setText("hi");
+    expect(composer.isEmpty).toBe(false);
+  });
+
+  it("isEmpty returns true for whitespace-only text", () => {
+    composer.setText("   ");
+    expect(composer.isEmpty).toBe(true);
+  });
+
+  it("sets and gets role", () => {
+    composer.setRole("assistant");
+    expect(composer.role).toBe("assistant");
+  });
+
+  it("setRole does not notify when value unchanged", () => {
+    composer.setRole("user");
+    const listener = vi.fn();
+    composer.subscribe(listener);
+
+    composer.setRole("user");
+    expect(listener).not.toHaveBeenCalled();
+  });
+
+  it("sets and gets runConfig", () => {
+    const config = { custom: { model: "gpt-4" } };
+    composer.setRunConfig(config);
+    expect(composer.runConfig).toBe(config);
+  });
+
+  it("sets and gets quote", () => {
+    const quote = { text: "some quote", messageId: "msg-1" };
+    composer.setQuote(quote);
+    expect(composer.quote).toBe(quote);
+  });
+
+  it("setQuote does not notify when value unchanged", () => {
+    const quote = { text: "q", messageId: "m1" };
+    composer.setQuote(quote);
+    const listener = vi.fn();
+    composer.subscribe(listener);
+
+    composer.setQuote(quote);
+    expect(listener).not.toHaveBeenCalled();
+  });
+
+  it("reset clears text, attachments, role, runConfig, and quote", async () => {
+    composer.setText("hello");
+    composer.setRole("assistant");
+    composer.setRunConfig({ custom: { k: "v" } });
+    composer.setQuote({ text: "q", messageId: "m1" });
+
+    await composer.reset();
+
+    expect(composer.text).toBe("");
+    expect(composer.role).toBe("user");
+    expect(composer.runConfig).toEqual({});
+    expect(composer.quote).toBeUndefined();
+    expect(composer.attachments).toEqual([]);
+  });
+
+  it("reset does nothing when already in default state", async () => {
+    const listener = vi.fn();
+    composer.subscribe(listener);
+
+    await composer.reset();
+    expect(listener).not.toHaveBeenCalled();
+  });
+
+  it("send constructs message with text content and fires send event", async () => {
+    composer.setText("hello world");
+
+    await composer.send();
+
+    expect(composer.sentMessages).toHaveLength(1);
+    const msg = composer.sentMessages[0]!;
+    expect(msg.role).toBe("user");
+    expect(msg.content).toEqual([{ type: "text", text: "hello world" }]);
+    expect(msg.attachments).toEqual([]);
+  });
+
+  it("send clears text and attachments after sending", async () => {
+    composer.setText("hello");
+
+    await composer.send();
+
+    expect(composer.text).toBe("");
+    expect(composer.attachments).toEqual([]);
+  });
+
+  it("send includes quote in metadata and clears it", async () => {
+    const quote = { text: "quoted", messageId: "m1" };
+    composer.setText("reply");
+    composer.setQuote(quote);
+
+    await composer.send();
+
+    const msg = composer.sentMessages[0]!;
+    expect(msg.metadata).toEqual({ custom: { quote } });
+    expect(composer.quote).toBeUndefined();
+  });
+
+  it("send with empty text produces empty content array", async () => {
+    await composer.send();
+
+    expect(composer.sentMessages).toHaveLength(1);
+    expect(composer.sentMessages[0]!.content).toEqual([]);
+  });
+
+  it("addAttachment throws when no adapter", async () => {
+    const file = new File(["data"], "test.txt");
+    await expect(composer.addAttachment(file)).rejects.toThrow(
+      "Attachments are not supported",
+    );
+  });
+
+  it("addAttachment adds via adapter", async () => {
+    const pending = makePendingAttachment("att-1", "test.txt");
+    const adapter: AttachmentAdapter = {
+      accept: "text/*",
+      add: vi.fn().mockResolvedValue(pending),
+      remove: vi.fn().mockResolvedValue(undefined),
+      send: vi.fn(),
+    };
+    composer.setAttachmentAdapter(adapter);
+
+    await composer.addAttachment(new File(["data"], "test.txt"));
+
+    expect(composer.attachments).toHaveLength(1);
+    expect(composer.attachments[0]!.id).toBe("att-1");
+  });
+
+  it("removeAttachment removes via adapter", async () => {
+    const pending = makePendingAttachment("att-1");
+    const adapter: AttachmentAdapter = {
+      accept: "*",
+      add: vi.fn().mockResolvedValue(pending),
+      remove: vi.fn().mockResolvedValue(undefined),
+      send: vi.fn(),
+    };
+    composer.setAttachmentAdapter(adapter);
+
+    await composer.addAttachment(new File([""], "f.txt"));
+    expect(composer.attachments).toHaveLength(1);
+
+    await composer.removeAttachment("att-1");
+    expect(composer.attachments).toHaveLength(0);
+    expect(adapter.remove).toHaveBeenCalledWith(pending);
+  });
+
+  it("removeAttachment throws for unknown id", async () => {
+    const adapter: AttachmentAdapter = {
+      accept: "*",
+      add: vi.fn(),
+      remove: vi.fn(),
+      send: vi.fn(),
+    };
+    composer.setAttachmentAdapter(adapter);
+
+    await expect(composer.removeAttachment("nonexistent")).rejects.toThrow(
+      "Attachment not found",
+    );
+  });
+
+  it("unstable_on registers event listener for send", async () => {
+    const callback = vi.fn();
+    composer.unstable_on("send", callback);
+
+    composer.setText("test");
+    await composer.send();
+
+    expect(callback).toHaveBeenCalledTimes(1);
+  });
+
+  it("unstable_on unsubscribe stops notifications", async () => {
+    const callback = vi.fn();
+    const unsub = composer.unstable_on("send", callback);
+    unsub();
+
+    composer.setText("test");
+    await composer.send();
+
+    expect(callback).not.toHaveBeenCalled();
+  });
+
+  it("unstable_on fires attachmentAdd event", async () => {
+    const callback = vi.fn();
+    composer.unstable_on("attachmentAdd", callback);
+
+    const pending = makePendingAttachment("att-1");
+    const adapter: AttachmentAdapter = {
+      accept: "*",
+      add: vi.fn().mockResolvedValue(pending),
+      remove: vi.fn(),
+      send: vi.fn(),
+    };
+    composer.setAttachmentAdapter(adapter);
+
+    await composer.addAttachment(new File([""], "f.txt"));
+    expect(callback).toHaveBeenCalledTimes(1);
+  });
+
+  it("isEditing is always true", () => {
+    expect(composer.isEditing).toBe(true);
+  });
+
+  it("attachmentAccept returns adapter accept or default", () => {
+    expect(composer.attachmentAccept).toBe("*");
+
+    const adapter: AttachmentAdapter = {
+      accept: "image/*",
+      add: vi.fn(),
+      remove: vi.fn(),
+      send: vi.fn(),
+    };
+    composer.setAttachmentAdapter(adapter);
+    expect(composer.attachmentAccept).toBe("image/*");
+  });
+
+  it("cancel delegates to handleCancel", () => {
+    composer.cancel();
+    expect(composer.cancelCalled).toBe(true);
+  });
+
+  it("subscribe notifies on text change", () => {
+    const listener = vi.fn();
+    composer.subscribe(listener);
+
+    composer.setText("new");
+    expect(listener).toHaveBeenCalledTimes(1);
+  });
+
+  it("subscribe returns working unsubscribe function", () => {
+    const listener = vi.fn();
+    const unsub = composer.subscribe(listener);
+    unsub();
+
+    composer.setText("change");
+    expect(listener).not.toHaveBeenCalled();
+  });
+});

package/src/tests/BaseSubscribable.test.ts

@@ -0,0 +1,54 @@
+import { describe, expect, it, vi, beforeEach } from "vitest";
+import { BaseSubscribable } from "@assistant-ui/core/internal";
+
+class TestSubscribable extends BaseSubscribable {
+  public notify() {
+    this._notifySubscribers();
+  }
+}
+
+describe("BaseSubscribable", () => {
+  let subscribable: TestSubscribable;
+
+  beforeEach(() => {
+    subscribable = new TestSubscribable();
+  });
+
+  it("subscribe registers a callback that is called on notify", () => {
+    const callback = vi.fn();
+    subscribable.subscribe(callback);
+    subscribable.notify();
+    expect(callback).toHaveBeenCalledOnce();
+  });
+
+  it("unsubscribe stops notifications", () => {
+    const callback = vi.fn();
+    const unsub = subscribable.subscribe(callback);
+    unsub();
+    subscribable.notify();
+    expect(callback).not.toHaveBeenCalled();
+  });
+
+  it("multiple subscribers all get notified", () => {
+    const cb1 = vi.fn();
+    const cb2 = vi.fn();
+    subscribable.subscribe(cb1);
+    subscribable.subscribe(cb2);
+    subscribable.notify();
+    expect(cb1).toHaveBeenCalledOnce();
+    expect(cb2).toHaveBeenCalledOnce();
+  });
+
+  it("subscribe returns an unsubscribe function", () => {
+    const cb1 = vi.fn();
+    const cb2 = vi.fn();
+    const unsub1 = subscribable.subscribe(cb1);
+    subscribable.subscribe(cb2);
+
+    unsub1();
+    subscribable.notify();
+
+    expect(cb1).not.toHaveBeenCalled();
+    expect(cb2).toHaveBeenCalledOnce();
+  });
+});