@assistant-ui/core 0.2.12 → 0.2.15

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

@@ -15,28 +15,30 @@ import type { QueueItemState } from "../scopes/queue-item";
 import { AttachmentRuntimeClient } from "./attachment-runtime-client";
 import { useSubscribable } from "./useSubscribable";
 
-const ComposerAttachmentClientByIndex = resource(
-  function ComposerAttachmentClientByIndex({
-    runtime,
-    index,
-  }: {
-    runtime: ComposerRuntime;
-    index: number;
-  }) {
-    const attachmentRuntime = useMemo(
-      () => runtime.getAttachmentByIndex(index),
-      [runtime, index],
-    );
+const useComposerAttachmentClientByIndex = ({
+  runtime,
+  index,
+}: {
+  runtime: ComposerRuntime;
+  index: number;
+}) => {
+  const attachmentRuntime = useMemo(
+    () => runtime.getAttachmentByIndex(index),
+    [runtime, index],
+  );
 
-    return useResource(
-      AttachmentRuntimeClient({
-        runtime: attachmentRuntime,
-      }),
-    );
-  },
+  return useResource(
+    AttachmentRuntimeClient({
+      runtime: attachmentRuntime,
+    }),
+  );
+};
+
+const ComposerAttachmentClientByIndex = resource(
+  useComposerAttachmentClientByIndex,
 );
 
-const QueueItemClient = resource(function QueueItemClient({
+const useQueueItemClient = ({
   item,
   onSteer,
   onRemove,
@@ -44,15 +46,17 @@ const QueueItemClient = resource(function QueueItemClient({
   item: QueueItemState;
   onSteer: () => void;
   onRemove: () => void;
-}): ClientOutput<"queueItem"> {
+}): ClientOutput<"queueItem"> => {
   return {
     getState: () => item,
     steer: onSteer,
     remove: onRemove,
   };
-});
+};
+
+const QueueItemClient = resource(useQueueItemClient);
 
-export const ComposerClient = resource(function ComposerClient({
+const useComposerClient = ({
   threadIdRef,
   messageIdRef,
   runtime,
@@ -60,7 +64,7 @@ export const ComposerClient = resource(function ComposerClient({
   threadIdRef: { current: string };
   messageIdRef?: { current: string };
   runtime: ComposerRuntime;
-}): ClientOutput<"composer"> {
+}): ClientOutput<"composer"> => {
   const runtimeState = useSubscribable(runtime);
   const emit = useAssistantEmit();
 
@@ -98,33 +102,30 @@ export const ComposerClient = resource(function ComposerClient({
   }, [runtime, emit, threadIdRef, messageIdRef]);
 
   const attachments = useClientLookup(
-    () =>
-      runtimeState.attachments.map((attachment, idx) =>
-        withKey(
-          attachment.id,
-          ComposerAttachmentClientByIndex({
-            runtime,
-            index: idx,
-          }),
-        ),
+    runtimeState.attachments.map((attachment, idx) =>
+      withKey(
+        attachment.id,
+        ComposerAttachmentClientByIndex({
+          runtime,
+          index: idx,
+        }),
+        [runtime, idx],
       ),
-    [runtimeState.attachments, runtime],
+    ),
   );
 
   const queue = runtimeState.queue;
   const queueItems = useClientLookup(
-    () =>
-      queue.map((item) =>
-        withKey(
-          item.id,
-          QueueItemClient({
-            item,
-            onSteer: () => runtime.steerQueueItem(item.id),
-            onRemove: () => runtime.removeQueueItem(item.id),
-          }),
-        ),
+    queue.map((item) =>
+      withKey(
+        item.id,
+        QueueItemClient({
+          item,
+          onSteer: () => runtime.steerQueueItem(item.id),
+          onRemove: () => runtime.removeQueueItem(item.id),
+        }),
       ),
-    [queue, runtime],
+    ),
   );
 
   const state = useMemo<ComposerState>(() => {
@@ -173,4 +174,6 @@ export const ComposerClient = resource(function ComposerClient({
     queueItem: (selector) => queueItems.get(selector),
     __internal_getRuntime: () => runtime,
   };
-});
+};
+
+export const ComposerClient = resource(useComposerClient);

package/src/store/runtime-clients/liveRef.ts

@@ -0,0 +1,5 @@
+export const liveRef = <T>(get: () => T): { readonly current: T } => ({
+  get current() {
+    return get();
+  },
+});

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

@@ -3,11 +3,11 @@ import type { ClientOutput } from "@assistant-ui/store";
 import type { MessagePartRuntime } from "../../runtime/api/message-part-runtime";
 import { useSubscribable } from "./useSubscribable";
 
-export const MessagePartClient = resource(function MessagePartClient({
+const useMessagePartClient = ({
   runtime,
 }: {
   runtime: MessagePartRuntime;
-}): ClientOutput<"part"> {
+}): ClientOutput<"part"> => {
   const state = useSubscribable(runtime);
 
   return {
@@ -18,4 +18,6 @@ export const MessagePartClient = resource(function MessagePartClient({
       runtime.respondToToolApproval(response),
     __internal_getRuntime: () => runtime,
   };
-});
+};
+
+export const MessagePartClient = resource(useMessagePartClient);

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

@@ -7,59 +7,60 @@ import {
 } from "@assistant-ui/store";
 import type { MessageRuntime } from "../../runtime/api/message-runtime";
 import { useSubscribable } from "./useSubscribable";
+import { liveRef } from "./liveRef";
 import { ComposerClient } from "./composer-runtime-client";
 import { MessagePartClient } from "./message-part-runtime-client";
 import type { MessageState } from "../scopes/message";
 import { AttachmentRuntimeClient } from "./attachment-runtime-client";
 
+const useMessageAttachmentClientByIndex = ({
+  runtime,
+  index,
+}: {
+  runtime: MessageRuntime;
+  index: number;
+}) => {
+  const attachmentRuntime = useMemo(
+    () => runtime.getAttachmentByIndex(index),
+    [runtime, index],
+  );
+  return useResource(AttachmentRuntimeClient({ runtime: attachmentRuntime }));
+};
+
 const MessageAttachmentClientByIndex = resource(
-  function MessageAttachmentClientByIndex({
-    runtime,
-    index,
-  }: {
-    runtime: MessageRuntime;
-    index: number;
-  }) {
-    const attachmentRuntime = useMemo(
-      () => runtime.getAttachmentByIndex(index),
-      [runtime, index],
-    );
-    return useResource(AttachmentRuntimeClient({ runtime: attachmentRuntime }));
-  },
+  useMessageAttachmentClientByIndex,
 );
 
-const MessagePartByIndex = resource(function MessagePartByIndex({
+const useMessagePartByIndex = ({
   runtime,
   index,
 }: {
   runtime: MessageRuntime;
   index: number;
-}) {
+}) => {
   const partRuntime = useMemo(
     () => runtime.getMessagePartByIndex(index),
     [runtime, index],
   );
   return useResource(MessagePartClient({ runtime: partRuntime }));
-});
+};
+
+const MessagePartByIndex = resource(useMessagePartByIndex);
 
-export const MessageClient = resource(function MessageClient({
+const useMessageClient = ({
   runtime,
   threadIdRef,
 }: {
   runtime: MessageRuntime;
   threadIdRef: { current: string };
-}): ClientOutput<"message"> {
+}): ClientOutput<"message"> => {
   const runtimeState = useSubscribable(runtime);
 
   const [isCopiedState, setIsCopied] = useState(false);
   const [isHoveringState, setIsHovering] = useState(false);
 
   const messageIdRef = useMemo(
-    () => ({
-      get current() {
-        return runtime.getState().id;
-      },
-    }),
+    () => liveRef(() => runtime.getState().id),
     [runtime],
   );
 
@@ -71,27 +72,25 @@ export const MessageClient = resource(function MessageClient({
     }),
   );
   const parts = useClientLookup(
-    () =>
-      runtimeState.content.map((part, idx) =>
-        withKey(
-          "toolCallId" in part && part.toolCallId != null
-            ? `toolCallId-${part.toolCallId}`
-            : `index-${idx}`,
-          MessagePartByIndex({ runtime, index: idx }),
-        ),
+    runtimeState.content.map((part, idx) =>
+      withKey(
+        "toolCallId" in part && part.toolCallId != null
+          ? `toolCallId-${part.toolCallId}`
+          : `index-${idx}`,
+        MessagePartByIndex({ runtime, index: idx }),
+        [runtime, idx],
       ),
-    [runtimeState.content, runtime],
+    ),
   );
 
   const attachments = useClientLookup(
-    () =>
-      (runtimeState.attachments ?? []).map((attachment, idx) =>
-        withKey(
-          attachment.id,
-          MessageAttachmentClientByIndex({ runtime, index: idx }),
-        ),
+    (runtimeState.attachments ?? []).map((attachment, idx) =>
+      withKey(
+        attachment.id,
+        MessageAttachmentClientByIndex({ runtime, index: idx }),
+        [runtime, idx],
       ),
-    [runtimeState.attachments, runtime],
+    ),
   );
 
   const state = useMemo<MessageState>(() => {
@@ -117,6 +116,7 @@ export const MessageClient = resource(function MessageClient({
 
     composer: () => composer.methods,
 
+    delete: () => runtime.delete(),
     reload: (config) => runtime.reload(config),
     speak: () => runtime.speak(),
     stopSpeaking: () => runtime.stopSpeaking(),
@@ -144,4 +144,6 @@ export const MessageClient = resource(function MessageClient({
 
     __internal_getRuntime: () => runtime,
   };
-});
+};
+
+export const MessageClient = resource(useMessageClient);

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

@@ -8,11 +8,11 @@ import type {
 } from "../../runtime/api/thread-list-item-runtime";
 import { useSubscribable } from "./useSubscribable";
 
-export const ThreadListItemClient = resource(function ThreadListItemClient({
+const useThreadListItemClient = ({
   runtime,
 }: {
   runtime: ThreadListItemRuntime;
-}): ClientOutput<"threadListItem"> {
+}): ClientOutput<"threadListItem"> => {
   const state = useSubscribable(runtime);
   const emit = useAssistantEmit();
 
@@ -53,4 +53,6 @@ export const ThreadListItemClient = resource(function ThreadListItemClient({
     detach: runtime.detach,
     __internal_getRuntime: () => runtime,
   };
-});
+};
+
+export const ThreadListItemClient = resource(useThreadListItemClient);

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

@@ -12,13 +12,13 @@ import { ThreadListItemClient } from "./thread-list-item-runtime-client";
 import { ThreadClient } from "./thread-runtime-client";
 import type { ThreadsState } from "../scopes/threads";
 
-const ThreadListItemClientById = resource(function ThreadListItemClientById({
+const useThreadListItemClientById = ({
   runtime,
   id,
 }: {
   runtime: ThreadListRuntime;
   id: string;
-}) {
+}) => {
   const threadListItemRuntime = useMemo(
     () => runtime.getItemById(id),
     [runtime, id],
@@ -28,15 +28,17 @@ const ThreadListItemClientById = resource(function ThreadListItemClientById({
       runtime: threadListItemRuntime,
     }),
   );
-});
+};
 
-export const ThreadListClient = resource(function ThreadListClient({
+const ThreadListItemClientById = resource(useThreadListItemClientById);
+
+const useThreadListClient = ({
   runtime,
   __internal_assistantRuntime,
 }: {
   runtime: ThreadListRuntime;
   __internal_assistantRuntime: AssistantRuntime;
-}): ClientOutput<"threads"> {
+}): ClientOutput<"threads"> => {
   const runtimeState = useSubscribable(runtime);
 
   const main = useClientResource(
@@ -45,11 +47,9 @@ export const ThreadListClient = resource(function ThreadListClient({
     }),
   );
   const threadItems = useClientLookup(
-    () =>
-      Object.keys(runtimeState.threadItems).map((id) =>
-        withKey(id, ThreadListItemClientById({ runtime, id })),
-      ),
-    [runtimeState.threadItems, runtime],
+    Object.keys(runtimeState.threadItems).map((id) =>
+      withKey(id, ThreadListItemClientById({ runtime, id }), [runtime, id]),
+    ),
   );
 
   const state = useMemo<ThreadsState>(() => {
@@ -96,4 +96,6 @@ export const ThreadListClient = resource(function ThreadListClient({
     loadMore: () => runtime.loadMore(),
     __internal_getAssistantRuntime: () => __internal_assistantRuntime,
   };
-});
+};
+
+export const ThreadListClient = resource(useThreadListClient);

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

@@ -3,6 +3,7 @@ import type { ThreadRuntimeEventType } from "../../runtime/interfaces/thread-run
 import type { ThreadRuntime } from "../../runtime/api/thread-runtime";
 import { useMemo, useEffect, RefObject } from "react";
 import { useResource, resource, withKey } from "@assistant-ui/tap";
+import { liveRef } from "./liveRef";
 import {
   type ClientOutput,
   useAssistantEmit,
@@ -14,7 +15,7 @@ import { MessageClient } from "./message-runtime-client";
 import { useSubscribable } from "./useSubscribable";
 import type { ThreadState } from "../scopes/thread";
 
-const MessageClientById = resource(function MessageClientById({
+const useMessageClientById = ({
   runtime,
   id,
   threadIdRef,
@@ -22,20 +23,22 @@ const MessageClientById = resource(function MessageClientById({
   runtime: ThreadRuntime;
   id: string;
   threadIdRef: RefObject<string>;
-}) {
+}) => {
   const messageRuntime = useMemo(
     () => runtime.getMessageById(id),
     [runtime, id],
   );
 
   return useResource(MessageClient({ runtime: messageRuntime, threadIdRef }));
-});
+};
 
-export const ThreadClient = resource(function ThreadClient({
+const MessageClientById = resource(useMessageClientById);
+
+const useThreadClient = ({
   runtime,
 }: {
   runtime: ThreadRuntime;
-}): ClientOutput<"thread"> {
+}): ClientOutput<"thread"> => {
   const runtimeState = useSubscribable(runtime);
   const emit = useAssistantEmit();
 
@@ -65,11 +68,7 @@ export const ThreadClient = resource(function ThreadClient({
   }, [runtime, emit]);
 
   const threadIdRef = useMemo(
-    () => ({
-      get current() {
-        return runtime.getState()!.threadId;
-      },
-    }),
+    () => liveRef(() => runtime.getState()!.threadId),
     [runtime],
   );
 
@@ -80,11 +79,13 @@ export const ThreadClient = resource(function ThreadClient({
     }),
   );
   const messages = useClientLookup(
-    () =>
-      runtimeState.messages.map((m) =>
-        withKey(m.id, MessageClientById({ runtime, id: m.id, threadIdRef })),
-      ),
-    [runtimeState.messages, runtime, threadIdRef],
+    runtimeState.messages.map((m) =>
+      withKey(m.id, MessageClientById({ runtime, id: m.id, threadIdRef }), [
+        runtime,
+        m.id,
+        threadIdRef,
+      ]),
+    ),
   );
 
   const state = useMemo<ThreadState>(() => {
@@ -109,6 +110,7 @@ export const ThreadClient = resource(function ThreadClient({
     getState: () => state,
     composer: () => composer.methods,
     append: runtime.append,
+    deleteMessage: runtime.deleteMessage,
     startRun: runtime.startRun,
     resumeRun: runtime.resumeRun,
     cancelRun: runtime.cancelRun,
@@ -132,4 +134,6 @@ export const ThreadClient = resource(function ThreadClient({
     },
     __internal_getRuntime: () => runtime,
   };
-});
+};
+
+export const ThreadClient = resource(useThreadClient);

package/src/store/runtime-clients/useSubscribable.ts

@@ -1,16 +1,8 @@
-import { useState, useEffect } from "react";
+import { useSyncExternalStore } from "react";
 import type { SubscribableWithState } from "../../subscribable/subscribable";
 
 export const useSubscribable = <T>(
   subscribable: Omit<SubscribableWithState<T, any>, "path">,
 ) => {
-  const [, setState] = useState(subscribable.getState);
-  useEffect(() => {
-    setState(subscribable.getState());
-    return subscribable.subscribe(() => {
-      setState(subscribable.getState());
-    });
-  }, [subscribable]);
-
-  return subscribable.getState();
+  return useSyncExternalStore(subscribable.subscribe, subscribable.getState);
 };

package/src/store/scopes/message.ts

@@ -42,6 +42,7 @@ export type MessageMethods = {
    */
   getState(): MessageState;
   composer(): ComposerMethods;
+  delete(): void | Promise<void>;
   reload(config?: { runConfig?: RunConfig }): void;
   /** @deprecated This API is still under active development and might change without notice. */
   speak(): void;

package/src/store/scopes/part.ts

@@ -2,6 +2,7 @@ import type { ToolResponse } from "assistant-stream";
 import type {
   ThreadUserMessagePart,
   ThreadAssistantMessagePart,
+  ToolApprovalResponse,
   ToolCallMessagePartStatus,
 } from "../../types/message";
 import type { MessagePartStatus } from "../../types/message";
@@ -27,9 +28,11 @@ export type PartMethods = {
    */
   resumeToolCall(payload: unknown): void;
   /**
-   * Respond to a server-side tool approval gate. The approval id is read from the part.
+   * Respond to a server-side tool approval gate. The approval id is read from
+   * the part. Accepts a boolean decision or the id of one of the approval's
+   * options.
    */
-  respondToToolApproval(response: { approved: boolean; reason?: string }): void;
+  respondToToolApproval(response: ToolApprovalResponse): void;
   __internal_getRuntime?(): MessagePartRuntime;
 };
 

package/src/store/scopes/thread-list-item.ts

@@ -6,6 +6,7 @@ export type ThreadListItemState = {
   readonly remoteId: string | undefined;
   readonly externalId: string | undefined;
   readonly title?: string | undefined;
+  readonly lastMessageAt?: Date | undefined;
   readonly status: ThreadListItemStatus;
   readonly custom?: Record<string, unknown> | undefined;
 };

package/src/store/scopes/thread.ts

@@ -88,6 +88,7 @@ export type ThreadMethods = {
    * ```
    */
   append(message: CreateAppendMessage): void;
+  deleteMessage(messageId: string): void | Promise<void>;
   /**
    * Start a new run with the given configuration.
    * @param config The configuration for starting the run

package/src/tests/external-store-thread-runtime-core.test.ts

@@ -49,6 +49,15 @@ describe("ExternalStoreThreadRuntimeCore - state reference stability", () => {
       expect(runtime.capabilities).not.toBe(capsBefore);
     });
 
+    it("enables delete when setMessages is provided", () => {
+      const runtime = new ExternalStoreThreadRuntimeCore(
+        mockContextProvider,
+        makeStore({ setMessages: vi.fn() }),
+      );
+
+      expect(runtime.capabilities.delete).toBe(true);
+    });
+
     it("should maintain stable reference across repeated setAdapter calls", () => {
       const runtime = new ExternalStoreThreadRuntimeCore(
         mockContextProvider,
@@ -152,6 +161,54 @@ describe("ExternalStoreThreadRuntimeCore - state reference stability", () => {
 
     expect(runtime.capabilities).toBe(capsBefore);
   });
+
+  describe("deleteMessage", () => {
+    it("removes only the selected message", async () => {
+      const setMessages = vi.fn();
+      const runtime = new ExternalStoreThreadRuntimeCore(
+        mockContextProvider,
+        makeStore({
+          messages: [
+            {
+              id: "u1",
+              role: "user",
+              content: [{ type: "text", text: "first" }],
+            },
+            {
+              id: "a1",
+              role: "assistant",
+              content: [{ type: "text", text: "answer" }],
+            },
+            {
+              id: "u2",
+              role: "user",
+              content: [{ type: "text", text: "second" }],
+            },
+          ],
+          setMessages,
+        }),
+      );
+
+      await runtime.deleteMessage("a1");
+
+      expect(setMessages).toHaveBeenCalledWith([
+        expect.objectContaining({ id: "u1" }),
+        expect.objectContaining({ id: "u2" }),
+      ]);
+    });
+
+    it("delegates to onDelete when provided", async () => {
+      const onDelete = vi.fn();
+      const runtime = new ExternalStoreThreadRuntimeCore(
+        mockContextProvider,
+        makeStore({ onDelete }),
+      );
+
+      await runtime.deleteMessage("m1");
+
+      expect(onDelete).toHaveBeenCalledWith("m1");
+    });
+  });
 });
 describe("ExternalStoreThreadRuntimeCore - optimistic message reconciliation", () => {
   type Raw = {