@assistant-ui/react 0.14.28 → 0.15.0

package/src/primitives/composer/ComposerInput.tsx

@@ -208,7 +208,7 @@ export const ComposerPrimitiveInput = forwardRef<
 
       if (!cancelOnEscape) return;
 
-      const composer = aui.composer();
+      const composer = aui.composer;
       if (composer.getState().canCancel) {
         composer.cancel();
         e.preventDefault();
@@ -229,7 +229,7 @@ export const ComposerPrimitiveInput = forwardRef<
       }
 
       if (e.key === "Enter") {
-        const threadState = aui.thread().getState();
+        const threadState = aui.thread.getState();
         const hasQueue = threadState.capabilities.queue;
 
         // Steer hotkey: Cmd/Ctrl+Shift+Enter (respects submitMode="none" and canSend)
@@ -238,10 +238,10 @@ export const ComposerPrimitiveInput = forwardRef<
           (e.ctrlKey || e.metaKey) &&
           hasQueue &&
           declaredSubmitMode !== "none" &&
-          aui.composer().getState().canSend
+          aui.composer.getState().canSend
         ) {
           e.preventDefault();
-          aui.composer().send({ steer: true });
+          aui.composer.send({ steer: true });
           return;
         }
 
@@ -267,18 +267,20 @@ export const ComposerPrimitiveInput = forwardRef<
 
     const handlePaste = async (e: ClipboardEvent<HTMLTextAreaElement>) => {
       if (!addAttachmentOnPaste) return;
-      const threadCapabilities = aui.thread().getState().capabilities;
+      const threadCapabilities = aui.thread.getState().capabilities;
       const files = Array.from(e.clipboardData?.files || []);
 
       if (threadCapabilities.attachments && files.length > 0) {
-        try {
-          e.preventDefault();
-          await Promise.all(
-            files.map((file) => aui.composer().addAttachment(file)),
-          );
-        } catch (error) {
-          console.error("Error adding attachment:", error);
-        }
+        e.preventDefault();
+        await Promise.all(
+          files.map(async (file) => {
+            try {
+              await aui.composer.addAttachment(file);
+            } catch {
+              // The composer runtime emits composer.attachmentAddError before rejecting.
+            }
+          }),
+        );
       }
     };
 
@@ -317,7 +319,7 @@ export const ComposerPrimitiveInput = forwardRef<
 
     useOnScrollToBottom(() => {
       if (
-        aui.composer().getState().type === "thread" &&
+        aui.composer.getState().type === "thread" &&
         unstable_focusOnScrollToBottom
       ) {
         focus();
@@ -326,7 +328,7 @@ export const ComposerPrimitiveInput = forwardRef<
 
     useEffect(() => {
       if (
-        aui.composer().getState().type !== "thread" ||
+        aui.composer.getState().type !== "thread" ||
         !unstable_focusOnRunStart
       )
         return undefined;
@@ -336,7 +338,7 @@ export const ComposerPrimitiveInput = forwardRef<
 
     useEffect(() => {
       if (
-        aui.composer().getState().type !== "thread" ||
+        aui.composer.getState().type !== "thread" ||
         !unstable_focusOnThreadSwitched
       )
         return undefined;
@@ -360,7 +362,7 @@ export const ComposerPrimitiveInput = forwardRef<
       onChange: composeEventHandlers(
         onChange,
         (e: React.ChangeEvent<HTMLTextAreaElement>) => {
-          if (!aui.composer().getState().isEditing) return;
+          if (!aui.composer.getState().isEditing) return;
           const nativeIsComposing =
             (e.nativeEvent as { isComposing?: boolean }).isComposing === true;
           // recover stuck compositionRef when the browser drops compositionend
@@ -370,7 +372,7 @@ export const ComposerPrimitiveInput = forwardRef<
           const isComposing = nativeIsComposing || compositionRef.current;
           // keep controlled value in sync mid-IME so react does not reset the textarea to a stale value
           flushTapSync(() => {
-            aui.composer().setText(e.target.value);
+            aui.composer.setText(e.target.value);
           });
           if (isComposing) return;
           const pos = e.target.selectionStart ?? e.target.value.length;
@@ -394,10 +396,10 @@ export const ComposerPrimitiveInput = forwardRef<
           .onCompositionEnd,
         (e: React.CompositionEvent<HTMLTextAreaElement>) => {
           compositionRef.current = false;
-          if (!aui.composer().getState().isEditing) return;
+          if (!aui.composer.getState().isEditing) return;
           const target = e.target as HTMLTextAreaElement;
           flushTapSync(() => {
-            aui.composer().setText(target.value);
+            aui.composer.setText(target.value);
           });
           const pos = target.selectionStart ?? target.value.length;
           if (pluginRegistry) {

package/src/primitives/composer/ComposerQuote.tsx

@@ -93,7 +93,7 @@ export const ComposerPrimitiveQuoteDismiss = forwardRef<
 >(({ onClick, ...props }, forwardedRef) => {
   const aui = useAui();
   const handleDismiss = useCallback(() => {
-    aui.composer().setQuote(undefined);
+    aui.composer.setQuote(undefined);
   }, [aui]);
 
   return (

package/src/primitives/composer/ComposerStopDictation.ts

@@ -14,7 +14,7 @@ const useComposerStopDictation = () => {
   const isDictating = useAuiState((s) => s.composer.dictation != null);
 
   const callback = useCallback(() => {
-    aui.composer().stopDictation();
+    aui.composer.stopDictation();
   }, [aui]);
 
   if (!isDictating) return null;

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

@@ -72,7 +72,7 @@ const useTriggerSelectionResource = ({
       return;
     }
 
-    const currentText = aui.composer().getState().text;
+    const currentText = aui.composer.getState().text;
     const before = currentText.slice(0, trigger.offset);
     const after = currentText.slice(
       trigger.offset + triggerChar.length + trigger.query.length,
@@ -80,11 +80,9 @@ const useTriggerSelectionResource = ({
 
     const insertDirective = () => {
       const directive = behavior.formatter.serialize(item);
-      aui
-        .composer()
-        .setText(
-          before + directive + (after.startsWith(" ") ? after : ` ${after}`),
-        );
+      aui.composer.setText(
+        before + directive + (after.startsWith(" ") ? after : ` ${after}`),
+      );
     };
 
     if (behavior.kind === "directive") {
@@ -92,9 +90,9 @@ const useTriggerSelectionResource = ({
       behavior.onInserted?.(item);
     } else {
       if (behavior.removeOnExecute) {
-        aui
-          .composer()
-          .setText(before + (after.startsWith(" ") ? after.slice(1) : after));
+        aui.composer.setText(
+          before + (after.startsWith(" ") ? after.slice(1) : after),
+        );
       } else {
         // Leave directive chip in the composer as an audit trail
         insertDirective();

package/src/primitives/message/MessagePartsGrouped.tsx

@@ -230,11 +230,9 @@ const ToolUIDisplay = ({
 }: {
   Fallback: ToolCallMessagePartComponent | undefined;
 } & ToolCallMessagePartProps) => {
-  const Render = useAuiState((s) => {
-    const Render = s.tools.tools[props.toolName] ?? Fallback;
-    if (Array.isArray(Render)) return Render[0] ?? Fallback;
-    return Render;
-  });
+  const Render = useAuiState(
+    (s) => s.tools.toolUIs[props.toolName]?.[0]?.render ?? Fallback,
+  );
   if (!Render) return null;
   return <Render {...props} />;
 };
@@ -292,9 +290,9 @@ const MessagePartComponent: FC<MessagePartComponentProps> = ({
 
   const type = part.type;
   if (type === "tool-call") {
-    const addResult = aui.part().addToolResult;
-    const resume = aui.part().resumeToolCall;
-    const respondToApproval = aui.part().respondToToolApproval;
+    const addResult = aui.part.addToolResult;
+    const resume = aui.part.resumeToolCall;
+    const respondToApproval = aui.part.respondToToolApproval;
     if ("Override" in tools)
       return (
         <tools.Override

package/src/primitives/message/MessageRoot.tsx

@@ -23,7 +23,7 @@ type ThreadViewportStore = NonNullable<
 
 const useIsHoveringRef = () => {
   const aui = useAui();
-  const message = useAuiState(() => aui.message());
+  const message = useAuiState(() => aui.message);
 
   const callbackRef = useCallback(
     (el: HTMLElement) => {

package/src/primitives/queueItem/QueueItemRemove.ts

@@ -12,7 +12,7 @@ const useQueueItemRemove = () => {
   const aui = useAui();
 
   const callback = useCallback(() => {
-    aui.queueItem().remove();
+    aui.queueItem.remove();
   }, [aui]);
 
   return callback;

package/src/primitives/queueItem/QueueItemSteer.ts

@@ -12,7 +12,7 @@ const useQueueItemSteer = () => {
   const aui = useAui();
 
   const callback = useCallback(() => {
-    aui.queueItem().steer();
+    aui.queueItem.steer();
   }, [aui]);
 
   return callback;

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/suggestion/SuggestionTrigger.ts

@@ -34,24 +34,24 @@ const useSuggestionTrigger = ({
   const resolvedSend = send ?? false;
 
   const callback = useCallback(() => {
-    const isRunning = aui.thread().getState().isRunning;
+    const isRunning = aui.thread.getState().isRunning;
 
     if (resolvedSend && !isRunning) {
-      aui.thread().append({
+      aui.thread.append({
         content: [{ type: "text", text: prompt }],
-        runConfig: aui.composer().getState().runConfig,
+        runConfig: aui.composer.getState().runConfig,
       });
       if (clearComposer) {
-        aui.composer().setText("");
+        aui.composer.setText("");
       }
     } else {
       if (clearComposer) {
-        aui.composer().setText(prompt);
+        aui.composer.setText(prompt);
       } else {
-        const currentText = aui.composer().getState().text;
-        aui
-          .composer()
-          .setText(currentText.trim() ? `${currentText} ${prompt}` : prompt);
+        const currentText = aui.composer.getState().text;
+        aui.composer.setText(
+          currentText.trim() ? `${currentText} ${prompt}` : prompt,
+        );
       }
     }
   }, [aui, resolvedSend, clearComposer, prompt]);

package/src/tests/DataRenderers.test.tsx

@@ -0,0 +1,212 @@
+// @vitest-environment jsdom
+
+// Data part rendering contract: global renderers > global fallbacks >
+// inline `components.data` config, exercised through the real store.
+
+import { render, screen, waitFor } from "@testing-library/react";
+import {
+  useEffect,
+  type FC,
+  type PropsWithChildren,
+  type ReactNode,
+} from "react";
+import { describe, expect, it } from "vitest";
+import { useAui } from "@assistant-ui/store";
+import { AssistantRuntimeProvider } from "../context";
+import * as MessagePrimitive from "../primitives/message";
+import * as ThreadPrimitive from "../primitives/thread";
+import { useLocalRuntime } from "../legacy-runtime/runtime-cores/local/useLocalRuntime";
+import {
+  useAssistantDataUI,
+  type ChatModelAdapter,
+  type DataMessagePartComponent,
+  type ThreadMessageLike,
+} from "../index";
+
+const noOpAdapter: ChatModelAdapter = {
+  async *run() {},
+};
+
+const dataMessages = (name: string): ThreadMessageLike[] => [
+  {
+    role: "assistant",
+    content: [{ type: "data", name, data: { value: 42 } }],
+    status: { type: "complete", reason: "stop" },
+  },
+];
+
+const labeled =
+  (label: string): DataMessagePartComponent =>
+  ({ name, data }) => (
+    <span data-testid={label}>
+      {name}:{(data as { value: number }).value}
+    </span>
+  );
+
+const RuntimeProvider: FC<
+  PropsWithChildren<{ messages: ThreadMessageLike[] }>
+> = ({ children, messages }) => {
+  const runtime = useLocalRuntime(noOpAdapter, { initialMessages: messages });
+  return (
+    <AssistantRuntimeProvider runtime={runtime}>
+      {children}
+    </AssistantRuntimeProvider>
+  );
+};
+
+const GlobalDataUI: FC<{ name: string; render: DataMessagePartComponent }> = ({
+  name,
+  render,
+}) => {
+  useAssistantDataUI({ name, render });
+  return null;
+};
+
+const GlobalFallbackDataUI: FC<{ render: DataMessagePartComponent }> = ({
+  render,
+}) => {
+  const aui = useAui();
+  useEffect(() => aui.dataRenderers.setFallbackDataUI(render), [aui, render]);
+  return null;
+};
+
+const renderThread = (
+  messages: ThreadMessageLike[],
+  Message: FC,
+  extra?: ReactNode,
+) =>
+  render(
+    <RuntimeProvider messages={messages}>
+      {extra}
+      <ThreadPrimitive.Messages components={{ Message }} />
+    </RuntimeProvider>,
+  );
+
+describe("data part rendering", () => {
+  it("renders a data part via the inline by_name config with its name and data", async () => {
+    const Message: FC = () => (
+      <MessagePrimitive.Parts
+        components={{ data: { by_name: { chart: labeled("inline") } } }}
+      />
+    );
+
+    renderThread(dataMessages("chart"), Message);
+
+    await waitFor(() => {
+      expect(screen.getByTestId("inline").textContent).toBe("chart:42");
+    });
+  });
+
+  it("uses the inline Fallback for unmatched names and renders nothing without one", async () => {
+    const Message: FC = () => (
+      <div data-testid="host">
+        <MessagePrimitive.Parts
+          components={{
+            data: { by_name: { other: labeled("named") } },
+          }}
+        />
+      </div>
+    );
+
+    renderThread(dataMessages("chart"), Message);
+    await waitFor(() => {
+      expect(screen.getByTestId("host").textContent).toBe("");
+    });
+
+    const MessageWithFallback: FC = () => (
+      <MessagePrimitive.Parts
+        components={{
+          data: {
+            by_name: { other: labeled("named") },
+            Fallback: labeled("inline-fallback"),
+          },
+        }}
+      />
+    );
+    renderThread(dataMessages("chart"), MessageWithFallback);
+    await waitFor(() => {
+      expect(screen.getByTestId("inline-fallback").textContent).toBe(
+        "chart:42",
+      );
+    });
+  });
+
+  it("prefers a globally registered renderer over the inline by_name config", async () => {
+    const Message: FC = () => (
+      <MessagePrimitive.Parts
+        components={{ data: { by_name: { chart: labeled("inline") } } }}
+      />
+    );
+
+    renderThread(
+      dataMessages("chart"),
+      Message,
+      <GlobalDataUI name="chart" render={labeled("global")} />,
+    );
+
+    await waitFor(() => {
+      expect(screen.getByTestId("global").textContent).toBe("chart:42");
+    });
+    expect(screen.queryByTestId("inline")).toBeNull();
+  });
+
+  it("resolves global fallbacks above inline fallbacks but below named matches", async () => {
+    const Message: FC = () => (
+      <MessagePrimitive.Parts
+        components={{ data: { Fallback: labeled("inline-fallback") } }}
+      />
+    );
+
+    renderThread(
+      dataMessages("chart"),
+      Message,
+      <GlobalFallbackDataUI render={labeled("global-fallback")} />,
+    );
+    await waitFor(() => {
+      expect(screen.getByTestId("global-fallback").textContent).toBe(
+        "chart:42",
+      );
+    });
+    expect(screen.queryByTestId("inline-fallback")).toBeNull();
+
+    renderThread(
+      dataMessages("chart"),
+      Message,
+      <>
+        <GlobalFallbackDataUI render={labeled("global-fallback-2")} />
+        <GlobalDataUI name="chart" render={labeled("global-named")} />
+      </>,
+    );
+    await waitFor(() => {
+      expect(screen.getByTestId("global-named").textContent).toBe("chart:42");
+    });
+  });
+
+  it("restores the inline renderer when the registering component unmounts", async () => {
+    const Message: FC = () => (
+      <MessagePrimitive.Parts
+        components={{ data: { by_name: { chart: labeled("inline") } } }}
+      />
+    );
+
+    const view = render(
+      <RuntimeProvider messages={dataMessages("chart")}>
+        <GlobalDataUI name="chart" render={labeled("global")} />
+        <ThreadPrimitive.Messages components={{ Message }} />
+      </RuntimeProvider>,
+    );
+    await waitFor(() => {
+      expect(screen.getByTestId("global")).toBeTruthy();
+    });
+
+    view.rerender(
+      <RuntimeProvider messages={dataMessages("chart")}>
+        <ThreadPrimitive.Messages components={{ Message }} />
+      </RuntimeProvider>,
+    );
+    await waitFor(() => {
+      expect(screen.getByTestId("inline").textContent).toBe("chart:42");
+    });
+    expect(screen.queryByTestId("global")).toBeNull();
+  });
+});

package/src/tests/RemoteThreadListRuntime.adapterProvider.test.tsx

@@ -67,17 +67,7 @@ const wrapInRuntimeAdapterProvider = (
   };
 
 describe("RemoteThreadListAdapter.unstable_Provider", () => {
-  it("makes RuntimeAdapterProvider context visible to the runtime hook", async () => {
-    const capture: { adapters: CapturedAdapters } = { adapters: null };
-    const adapter = makeAdapter({
-      unstable_Provider: wrapInRuntimeAdapterProvider(dummyHistory),
-    });
-    await renderAndWaitForBinder(adapter, capture);
-
-    expect(capture.adapters?.history).toBe(dummyHistory);
-  });
-
-  it("preserves modelContext from the outer runtime-core RuntimeAdapterProvider", async () => {
+  it("makes Provider context visible to the runtime hook while preserving outer modelContext", async () => {
     const capture: { adapters: CapturedAdapters } = { adapters: null };
     const adapter = makeAdapter({
       unstable_Provider: wrapInRuntimeAdapterProvider(dummyHistory),

package/src/tests/RemoteThreadListRuntime.deferredProvider.test.tsx

@@ -6,9 +6,9 @@ import { afterEach, describe, expect, it, vi } from "vitest";
 import { useRemoteThreadListRuntime } from "@assistant-ui/core/react";
 import { makeAdapter } from "./remote-thread-list-test-helpers";
 import type { AssistantRuntime } from "@assistant-ui/core";
+import { useAui } from "@assistant-ui/store";
 import { AssistantRuntimeProvider } from "../context";
 import { useLocalRuntime } from "../legacy-runtime/runtime-cores/local/useLocalRuntime";
-import { useAssistantRuntime } from "../legacy-runtime/hooks/AssistantContext";
 import type { ChatModelAdapter, RemoteThreadListAdapter } from "../index";
 
 const noOpAdapter: ChatModelAdapter = {
@@ -34,8 +34,8 @@ const RuntimeProvider: FC<
 const RuntimeCapture: FC<{
   runtimeRef: { current: AssistantRuntime | null };
 }> = ({ runtimeRef }) => {
-  const runtime = useAssistantRuntime();
-  runtimeRef.current = runtime;
+  const aui = useAui();
+  runtimeRef.current = aui.threads.__internal_getAssistantRuntime?.() ?? null;
   return null;
 };