@assistant-ui/core 0.3.16 → 0.3.18

package/src/store/clients/suggestions.test.ts

@@ -1,9 +1,68 @@
 import { useState } from "react";
 import { createTapRoot, flushTapSync, useResource } from "@assistant-ui/tap";
 import { describe, expect, it } from "vitest";
-import { Suggestions, type SuggestionConfig } from "./suggestions";
+import type { ThreadSuggestion } from "../../runtime/interfaces/thread-runtime-core";
+import {
+  Suggestions,
+  ThreadSuggestions,
+  type SuggestionConfig,
+} from "./suggestions";
 
 describe("Suggestions", () => {
+  it("keeps equal inline string suggestions stable across owner renders", () => {
+    let rerender!: () => void;
+    const root = createTapRoot(function SuggestionsRoot() {
+      const [, setTick] = useState(0);
+      rerender = () => setTick((tick) => tick + 1);
+      return useResource(Suggestions(["account-a", "account-b"]));
+    });
+
+    try {
+      const firstState = root.getValue().getState();
+      const firstSuggestion = root
+        .getValue()
+        .suggestion({ index: 0 })
+        .getState();
+
+      flushTapSync(rerender);
+
+      expect(root.getValue().getState()).toBe(firstState);
+      expect(root.getValue().suggestion({ index: 0 }).getState()).toBe(
+        firstSuggestion,
+      );
+    } finally {
+      root.unmount();
+    }
+  });
+
+  it("keeps equal inline object suggestions stable across owner renders", () => {
+    let rerender!: () => void;
+    const root = createTapRoot(function SuggestionsRoot() {
+      const [, setTick] = useState(0);
+      rerender = () => setTick((tick) => tick + 1);
+      return useResource(
+        Suggestions([{ title: "Title", label: "Label", prompt: "Prompt" }]),
+      );
+    });
+
+    try {
+      const firstState = root.getValue().getState();
+      const firstSuggestion = root
+        .getValue()
+        .suggestion({ index: 0 })
+        .getState();
+
+      flushTapSync(rerender);
+
+      expect(root.getValue().getState()).toBe(firstState);
+      expect(root.getValue().suggestion({ index: 0 }).getState()).toBe(
+        firstSuggestion,
+      );
+    } finally {
+      root.unmount();
+    }
+  });
+
   it("updates when the configured suggestions change", () => {
     let setSuggestions!: (suggestions: SuggestionConfig[]) => void;
     const root = createTapRoot(function SuggestionsRoot() {
@@ -28,4 +87,139 @@ describe("Suggestions", () => {
       root.unmount();
     }
   });
+
+  it("reuses unchanged suggestion state when one entry changes", () => {
+    let setSuggestions!: (suggestions: SuggestionConfig[]) => void;
+    const root = createTapRoot(function SuggestionsRoot() {
+      const [suggestions, setValue] = useState<SuggestionConfig[]>([
+        { title: "Title A", label: "Label A", prompt: "Prompt A" },
+        { title: "Title B", label: "Label B", prompt: "Prompt B" },
+      ]);
+      setSuggestions = setValue;
+      return useResource(Suggestions(suggestions));
+    });
+
+    try {
+      const firstState = root.getValue().getState();
+      const unchangedSuggestion = root
+        .getValue()
+        .suggestion({ index: 1 })
+        .getState();
+
+      flushTapSync(() =>
+        setSuggestions([
+          { title: "Changed", label: "Label A", prompt: "Prompt A" },
+          { title: "Title B", label: "Label B", prompt: "Prompt B" },
+        ]),
+      );
+
+      expect(root.getValue().getState()).not.toBe(firstState);
+      expect(root.getValue().getState().suggestions[0]?.title).toBe("Changed");
+      expect(root.getValue().suggestion({ index: 1 }).getState()).toBe(
+        unchangedSuggestion,
+      );
+    } finally {
+      root.unmount();
+    }
+  });
+});
+
+describe("ThreadSuggestions", () => {
+  it("keeps equal runtime suggestions stable across owner renders", () => {
+    let rerender!: () => void;
+    const root = createTapRoot(function ThreadSuggestionsRoot() {
+      const [, setTick] = useState(0);
+      rerender = () => setTick((tick) => tick + 1);
+      return useResource(ThreadSuggestions([{ prompt: "Prompt" }]));
+    });
+
+    try {
+      const firstState = root.getValue().getState();
+      const firstSuggestion = root
+        .getValue()
+        .suggestion({ index: 0 })
+        .getState();
+
+      flushTapSync(rerender);
+
+      expect(root.getValue().getState()).toBe(firstState);
+      expect(root.getValue().suggestion({ index: 0 }).getState()).toBe(
+        firstSuggestion,
+      );
+    } finally {
+      root.unmount();
+    }
+  });
+
+  it("drops sparse holes before the per-suggestion lookup", () => {
+    let setSuggestions!: (suggestions: ThreadSuggestion[]) => void;
+    const root = createTapRoot(function ThreadSuggestionsRoot() {
+      const [suggestions, setValue] = useState<ThreadSuggestion[]>([
+        { prompt: "Prompt A" },
+        { prompt: "Prompt B" },
+      ]);
+      setSuggestions = setValue;
+      return useResource(ThreadSuggestions(suggestions));
+    });
+
+    try {
+      const sparse: ThreadSuggestion[] = new Array(2);
+      sparse[1] = { prompt: "Prompt B" };
+      flushTapSync(() => setSuggestions(sparse));
+
+      const state = root.getValue().getState();
+      const expected = { title: "Prompt B", label: "", prompt: "Prompt B" };
+      expect(state.suggestions).toEqual([expected]);
+      expect(Object.keys(state.suggestions)).toEqual(["0"]);
+      const firstSuggestion = root
+        .getValue()
+        .suggestion({ index: 0 })
+        .getState();
+      expect(firstSuggestion).toEqual(expected);
+
+      // An equivalent sparse update keeps both identities stable.
+      const sparseAgain: ThreadSuggestion[] = new Array(2);
+      sparseAgain[1] = { prompt: "Prompt B" };
+      flushTapSync(() => setSuggestions(sparseAgain));
+
+      expect(root.getValue().getState()).toBe(state);
+      expect(root.getValue().suggestion({ index: 0 }).getState()).toBe(
+        firstSuggestion,
+      );
+    } finally {
+      root.unmount();
+    }
+  });
+
+  it("reuses unchanged suggestion state when one entry changes", () => {
+    let setSuggestions!: (suggestions: ThreadSuggestion[]) => void;
+    const root = createTapRoot(function ThreadSuggestionsRoot() {
+      const [suggestions, setValue] = useState<ThreadSuggestion[]>([
+        { prompt: "Prompt A" },
+        { prompt: "Prompt B" },
+      ]);
+      setSuggestions = setValue;
+      return useResource(ThreadSuggestions(suggestions));
+    });
+
+    try {
+      const firstState = root.getValue().getState();
+      const unchangedSuggestion = root
+        .getValue()
+        .suggestion({ index: 1 })
+        .getState();
+
+      flushTapSync(() =>
+        setSuggestions([{ prompt: "Changed" }, { prompt: "Prompt B" }]),
+      );
+
+      expect(root.getValue().getState()).not.toBe(firstState);
+      expect(root.getValue().getState().suggestions[0]?.prompt).toBe("Changed");
+      expect(root.getValue().suggestion({ index: 1 }).getState()).toBe(
+        unchangedSuggestion,
+      );
+    } finally {
+      root.unmount();
+    }
+  });
 });

package/src/store/clients/suggestions.ts

@@ -2,6 +2,7 @@ import { useMemo } from "react";
 import { resource, withKey } from "@assistant-ui/tap";
 import type { ClientOutput } from "@assistant-ui/store";
 import { useClientLookup } from "@assistant-ui/store/client";
+import { shallowEqual } from "@assistant-ui/store/internal";
 import type { SuggestionsState } from "../scopes/suggestions";
 import type { SuggestionState } from "../scopes/suggestion";
 import type { ThreadSuggestion } from "../../runtime/interfaces/thread-runtime-core";
@@ -10,6 +11,34 @@ export type SuggestionConfig =
   | string
   | { title: string; label: string; prompt: string };
 
+const useStableSuggestionsState = (
+  next: SuggestionsState,
+): SuggestionsState => {
+  const cell = useMemo(() => ({}) as { state?: SuggestionsState }, []);
+  const previous = cell.state;
+
+  // forEach skips array holes, so a sparse caller array normalizes to a dense
+  // list here, before the per-suggestion resource lookup indexes every slot.
+  const suggestions: SuggestionState[] = [];
+  next.suggestions.forEach((suggestion) => {
+    // Probed at the compacted destination index, not the sparse source index,
+    // so an equivalent hole-containing update keeps reusing prior identities.
+    const previousSuggestion = previous?.suggestions[suggestions.length];
+    suggestions.push(
+      previousSuggestion && shallowEqual(previousSuggestion, suggestion)
+        ? previousSuggestion
+        : suggestion,
+    );
+  });
+  const state =
+    previous && shallowEqual(suggestions, previous.suggestions)
+      ? previous
+      : { suggestions };
+
+  cell.state = state;
+  return state;
+};
+
 const useSuggestionClient = (
   state: SuggestionState,
 ): ClientOutput<"suggestion"> => {
@@ -21,8 +50,9 @@ const useSuggestionClient = (
 const SuggestionClient = resource(useSuggestionClient);
 
 const useSuggestionsClient = (
-  state: SuggestionsState,
+  nextState: SuggestionsState,
 ): ClientOutput<"suggestions"> => {
+  const state = useStableSuggestionsState(nextState);
   const suggestionClients = useClientLookup(
     state.suggestions.map((suggestion, index) =>
       withKey(index, SuggestionClient(suggestion), [suggestion]),
@@ -40,27 +70,13 @@ const useSuggestionsClient = (
 const useStaticSuggestions = (
   suggestions?: SuggestionConfig[],
 ): ClientOutput<"suggestions"> => {
-  const state = useMemo<SuggestionsState>(
-    () => ({
-      suggestions: (suggestions ?? []).map((s) => {
-        if (typeof s === "string") {
-          return {
-            title: s,
-            label: "",
-            prompt: s,
-          };
-        }
-        return {
-          title: s.title,
-          label: s.label,
-          prompt: s.prompt,
-        };
-      }),
-    }),
-    [suggestions],
-  );
-
-  return useSuggestionsClient(state);
+  return useSuggestionsClient({
+    suggestions: (suggestions ?? []).map((s) =>
+      typeof s === "string"
+        ? { title: s, label: "", prompt: s }
+        : { title: s.title, label: s.label, prompt: s.prompt },
+    ),
+  });
 };
 
 export const Suggestions = resource(useStaticSuggestions);
@@ -68,18 +84,13 @@ export const Suggestions = resource(useStaticSuggestions);
 const useThreadSuggestions = (
   suggestions: readonly ThreadSuggestion[],
 ): ClientOutput<"suggestions"> => {
-  const state = useMemo<SuggestionsState>(
-    () => ({
-      suggestions: suggestions.map((s) => ({
-        title: s.title ?? s.prompt,
-        label: s.label ?? "",
-        prompt: s.prompt,
-      })),
-    }),
-    [suggestions],
-  );
-
-  return useSuggestionsClient(state);
+  return useSuggestionsClient({
+    suggestions: suggestions.map((s) => ({
+      title: s.title ?? s.prompt,
+      label: s.label ?? "",
+      prompt: s.prompt,
+    })),
+  });
 };
 
 export const ThreadSuggestions = resource(useThreadSuggestions);

package/src/store/index.ts

@@ -108,6 +108,10 @@ export {
   createRuntimeExtrasBrand,
   type RuntimeExtrasBrand,
 } from "../runtime/utils/runtime-extras-brand";
+export {
+  resolveToolCallText,
+  type ToolCallText,
+} from "../model-context/tool-call-text";
 export { defineToolkit } from "../react/model-context/define-toolkit";
 export {
   defineMcpToolkit,

package/src/store/internal.ts

@@ -15,7 +15,9 @@ export {
   composerCancelDisabled,
   composerInputDisabled,
   composerSendDisabled,
+  messageErrorText,
   suggestionTriggerDisabled,
+  threadListLoadMoreDisabled,
 } from "./primitive-predicates";
 export { isDevelopment } from "./env";
 export { useThreadSelectionEvents } from "./clients/thread-selection-events";

package/src/store/primitive-predicates.ts

@@ -1,3 +1,7 @@
+import type {
+  ReadonlyJSONArray,
+  ReadonlyJSONObject,
+} from "assistant-stream/utils";
 import type { AssistantState } from "@assistant-ui/store";
 
 /**
@@ -41,3 +45,34 @@ export const suggestionTriggerDisabled = (
 ): boolean =>
   s.thread.isDisabled ||
   (send && s.thread.isRunning && !s.thread.capabilities.queue);
+
+export const messageErrorText = (
+  s: AssistantState,
+):
+  | string
+  | number
+  | boolean
+  | ReadonlyJSONObject
+  | ReadonlyJSONArray
+  | undefined => {
+  if (
+    s.message.status?.type !== "incomplete" ||
+    s.message.status.reason !== "error"
+  ) {
+    return undefined;
+  }
+  const error = s.message.status.error;
+  if (typeof error === "string") return error;
+  if (
+    typeof error === "object" &&
+    error !== null &&
+    "message" in error &&
+    typeof error.message === "string"
+  ) {
+    return error.message;
+  }
+  return error ?? "An error occurred";
+};
+
+export const threadListLoadMoreDisabled = (s: AssistantState): boolean =>
+  !s.threads.hasMore || s.threads.isLoading || s.threads.isLoadingMore;

package/src/store/runtime-clients/composer-runtime-client.ts

@@ -1,5 +1,5 @@
 import type { Unsubscribe } from "../../types/unsubscribe";
-import { useMemo, useEffect } from "react";
+import { useMemo, useEffect, useRef } from "react";
 import { useResource, resource, withKey } from "@assistant-ui/tap";
 import type { ClientOutput } from "@assistant-ui/store";
 import { useAssistantEmit, useClientLookup } from "@assistant-ui/store/client";
@@ -59,28 +59,48 @@ const useComposerClient = ({
   threadIdRef,
   messageIdRef,
   runtime,
+  isSuggestion,
 }: {
   threadIdRef: { current: string };
   messageIdRef?: { current: string };
   runtime: ComposerRuntime;
+  isSuggestion?: ((text: string) => boolean) | undefined;
 }): ClientOutput<"composer"> => {
   const runtimeState = useSubscribable(runtime);
   const emit = useAssistantEmit();
+  const pendingSuggestion = useRef(false);
 
   // Bind composer events to event manager
   useEffect(() => {
     const unsubscribers: Unsubscribe[] = [];
 
     // Subscribe to composer events
-    for (const event of ["send", "attachmentAdd"] as const) {
-      const unsubscribe = runtime.unstable_on(event, () => {
-        emit(`composer.${event}`, {
+    const sendUnsubscribe = runtime.unstable_on("send", (payload) => {
+      const suggestion = pendingSuggestion.current;
+      pendingSuggestion.current = false;
+      emit("composer.send", {
+        threadId: threadIdRef.current,
+        ...(messageIdRef && { messageId: messageIdRef.current }),
+        chars: payload.chars,
+        attachments: payload.attachments,
+        ...(suggestion ? { suggestion: true } : undefined),
+      });
+    });
+    unsubscribers.push(sendUnsubscribe);
+
+    const attachmentUnsubscribe = runtime.unstable_on(
+      "attachmentAdd",
+      (payload) => {
+        emit("composer.attachmentAdd", {
           threadId: threadIdRef.current,
           ...(messageIdRef && { messageId: messageIdRef.current }),
+          ...(payload.contentType
+            ? { contentType: payload.contentType }
+            : undefined),
         });
-      });
-      unsubscribers.push(unsubscribe);
-    }
+      },
+    );
+    unsubscribers.push(attachmentUnsubscribe);
 
     unsubscribers.push(
       runtime.unstable_on("attachmentAddError", (payload) => {
@@ -91,6 +111,9 @@ const useComposerClient = ({
           ...(payload.attachmentId && { attachmentId: payload.attachmentId }),
           reason: payload.reason,
           message: payload.message,
+          ...(payload.contentType
+            ? { contentType: payload.contentType }
+            : undefined),
         });
       }),
     );
@@ -153,8 +176,18 @@ const useComposerClient = ({
     addAttachment: runtime.addAttachment,
     reset: runtime.reset,
     clearAttachments: runtime.clearAttachments,
-    send: runtime.send,
-    cancel: runtime.cancel,
+    send: (options) => {
+      const state = runtime.getState();
+      pendingSuggestion.current =
+        state.canSend && (isSuggestion?.(state.text) ?? false);
+      runtime.send(options);
+    },
+    cancel: () => {
+      if (!messageIdRef && runtime.getState().canCancel) {
+        emit("composer.cancel", { threadId: threadIdRef.current });
+      }
+      runtime.cancel();
+    },
     beginEdit:
       (runtime as EditComposerRuntime).beginEdit ??
       (() => {

package/src/store/runtime-clients/message-runtime-client.ts

@@ -1,7 +1,11 @@
-import { useMemo, useState } from "react";
+import { useEffect, useMemo, useRef, useState } from "react";
 import { useResource, withKey, resource } from "@assistant-ui/tap";
 import type { ClientOutput } from "@assistant-ui/store";
-import { useClientLookup, useClientResource } from "@assistant-ui/store/client";
+import {
+  useAssistantEmit,
+  useClientLookup,
+  useClientResource,
+} from "@assistant-ui/store/client";
 import type { MessageRuntime } from "../../runtime/api/message-runtime";
 import { useSubscribable } from "./useSubscribable";
 import { liveRef } from "./liveRef";
@@ -47,11 +51,14 @@ const MessagePartByIndex = resource(useMessagePartByIndex);
 const useMessageClient = ({
   runtime,
   threadIdRef,
+  threadId,
 }: {
   runtime: MessageRuntime;
   threadIdRef: { current: string };
+  threadId: string;
 }): ClientOutput<"message"> => {
   const runtimeState = useSubscribable(runtime);
+  const emit = useAssistantEmit();
 
   const [isCopiedState, setIsCopied] = useState(false);
   const [isHoveringState, setIsHovering] = useState(false);
@@ -60,6 +67,33 @@ const useMessageClient = ({
     () => liveRef(() => runtime.getState().id),
     [runtime],
   );
+  const previousStatus = useRef(runtimeState.status);
+  const emitMessageEvent = (
+    event:
+      | "message.reload"
+      | "message.speak"
+      | "message.branchSwitched"
+      | "message.copied",
+  ) => {
+    emit(event, { threadId, messageId: runtime.getState().id });
+  };
+
+  useEffect(() => {
+    const status = runtimeState.status;
+    const previous = previousStatus.current;
+    previousStatus.current = status;
+    if (
+      status?.type === "incomplete" &&
+      status.reason === "error" &&
+      (previous?.type !== "incomplete" || previous.reason !== "error")
+    ) {
+      emit("message.error", {
+        threadId,
+        messageId: runtimeState.id,
+        reason: "error",
+      });
+    }
+  }, [runtimeState.status, runtimeState.id, emit, threadId]);
 
   const composer = useClientResource(
     ComposerClient({
@@ -114,11 +148,20 @@ const useMessageClient = ({
     composer: () => composer.methods,
 
     delete: () => runtime.delete(),
-    reload: (config) => runtime.reload(config),
-    speak: () => runtime.speak(),
+    reload: (config) => {
+      emitMessageEvent("message.reload");
+      return runtime.reload(config);
+    },
+    speak: () => {
+      emitMessageEvent("message.speak");
+      return runtime.speak();
+    },
     stopSpeaking: () => runtime.stopSpeaking(),
     submitFeedback: (feedback) => runtime.submitFeedback(feedback),
-    switchToBranch: (options) => runtime.switchToBranch(options),
+    switchToBranch: (options) => {
+      emitMessageEvent("message.branchSwitched");
+      return runtime.switchToBranch(options);
+    },
     getCopyText: () => runtime.unstable_getCopyText(),
     part: (selector) => {
       if ("index" in selector) {
@@ -136,7 +179,12 @@ const useMessageClient = ({
       }
     },
 
-    setIsCopied,
+    setIsCopied: (value) => {
+      if (value) {
+        emitMessageEvent("message.copied");
+      }
+      setIsCopied(value);
+    },
     setIsHovering,
 
     __internal_getRuntime: () => runtime,

package/src/store/runtime-clients/thread-list-item-runtime-client.ts

@@ -52,8 +52,10 @@ const useThreadListItemClient = ({
     unarchive: () =>
       handleThreadListAction("unarchive", () => runtime.unarchive()),
     delete: () => handleThreadListAction("delete", () => runtime.delete()),
-    generateTitle: () =>
-      handleThreadListAction("generate title", () => runtime.generateTitle()),
+    generateTitle: (options) =>
+      handleThreadListAction("generate title", () =>
+        runtime.generateTitle(options),
+      ),
     initialize: runtime.initialize,
     detach: runtime.detach,
     __internal_getRuntime: () => runtime,

package/src/store/runtime-clients/thread-list-runtime-client.ts

@@ -1,7 +1,11 @@
-import { useMemo } from "react";
+import { useEffect, useMemo } from "react";
 import { useResource, withKey, resource } from "@assistant-ui/tap";
 import type { ClientOutput } from "@assistant-ui/store";
-import { useClientLookup, useClientResource } from "@assistant-ui/store/client";
+import {
+  useAssistantEmit,
+  useClientLookup,
+  useClientResource,
+} from "@assistant-ui/store/client";
 import { useThreadSelectionEvents } from "../clients/thread-selection-events";
 import type { ThreadListRuntime } from "../../runtime/api/thread-list-runtime";
 import type { AssistantRuntime } from "../../runtime/api/assistant-runtime";
@@ -44,6 +48,16 @@ const useThreadListClient = ({
   const runtimeState = useSubscribable(runtime);
   useThreadSelectionEvents(runtimeState.mainThreadId);
 
+  const emit = useAssistantEmit();
+  useEffect(
+    () =>
+      runtime.unstable_subscribeThreadEvents(({ threadId, type }) => {
+        if (threadId === runtime.getState().mainThreadId) return;
+        emit(`thread.${type}`, { threadId });
+      }),
+    [runtime, emit],
+  );
+
   const main = useClientResource(
     ThreadClient({
       runtime: runtime.main,
@@ -68,6 +82,7 @@ const useThreadListClient = ({
       mainThreadId: runtimeState.mainThreadId,
       newThreadId: runtimeState.newThreadId ?? null,
       isLoading: runtimeState.isLoading,
+      loadError: runtimeState.loadError,
       isLoadingMore: runtimeState.isLoadingMore,
       hasMore: runtimeState.hasMore,
       threadIds: runtimeState.threadIds,