@assistant-ui/core 0.2.10 → 0.2.11

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

@@ -1,33 +1,34 @@
 import type { Unsubscribe } from "../../types/unsubscribe";
-import {
-  resource,
-  tapMemo,
-  tapEffect,
-  tapResource,
-  type tapRef,
-  withKey,
-} from "@assistant-ui/tap";
+import { useMemo, useEffect } from "react";
+import { useResource, resource, withKey } from "@assistant-ui/tap";
 import {
   type ClientOutput,
-  tapAssistantEmit,
-  tapClientLookup,
+  useAssistantEmit,
+  useClientLookup,
 } from "@assistant-ui/store";
 import type {
   ComposerRuntime,
   EditComposerRuntime,
 } from "../../runtime/api/composer-runtime";
 import type { ComposerState } from "../scopes/composer";
+import type { QueueItemState } from "../scopes/queue-item";
 import { AttachmentRuntimeClient } from "./attachment-runtime-client";
-import { tapSubscribable } from "./tap-subscribable";
+import { useSubscribable } from "./useSubscribable";
 
 const ComposerAttachmentClientByIndex = resource(
-  ({ runtime, index }: { runtime: ComposerRuntime; index: number }) => {
-    const attachmentRuntime = tapMemo(
+  function ComposerAttachmentClientByIndex({
+    runtime,
+    index,
+  }: {
+    runtime: ComposerRuntime;
+    index: number;
+  }) {
+    const attachmentRuntime = useMemo(
       () => runtime.getAttachmentByIndex(index),
       [runtime, index],
     );
 
-    return tapResource(
+    return useResource(
       AttachmentRuntimeClient({
         runtime: attachmentRuntime,
       }),
@@ -35,113 +36,141 @@ const ComposerAttachmentClientByIndex = resource(
   },
 );
 
-export const ComposerClient = resource(
-  ({
-    threadIdRef,
-    messageIdRef,
-    runtime,
-  }: {
-    threadIdRef: tapRef.RefObject<string>;
-    messageIdRef?: tapRef.RefObject<string>;
-    runtime: ComposerRuntime;
-  }): ClientOutput<"composer"> => {
-    const runtimeState = tapSubscribable(runtime);
-    const emit = tapAssistantEmit();
+const QueueItemClient = resource(function QueueItemClient({
+  item,
+  onSteer,
+  onRemove,
+}: {
+  item: QueueItemState;
+  onSteer: () => void;
+  onRemove: () => void;
+}): ClientOutput<"queueItem"> {
+  return {
+    getState: () => item,
+    steer: onSteer,
+    remove: onRemove,
+  };
+});
+
+export const ComposerClient = resource(function ComposerClient({
+  threadIdRef,
+  messageIdRef,
+  runtime,
+}: {
+  threadIdRef: { current: string };
+  messageIdRef?: { current: string };
+  runtime: ComposerRuntime;
+}): ClientOutput<"composer"> {
+  const runtimeState = useSubscribable(runtime);
+  const emit = useAssistantEmit();
 
-    // Bind composer events to event manager
-    tapEffect(() => {
-      const unsubscribers: Unsubscribe[] = [];
+  // 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}`, {
-            threadId: threadIdRef.current,
-            ...(messageIdRef && { messageId: messageIdRef.current }),
-          });
+    // Subscribe to composer events
+    for (const event of ["send", "attachmentAdd"] as const) {
+      const unsubscribe = runtime.unstable_on(event, () => {
+        emit(`composer.${event}`, {
+          threadId: threadIdRef.current,
+          ...(messageIdRef && { messageId: messageIdRef.current }),
         });
-        unsubscribers.push(unsubscribe);
-      }
+      });
+      unsubscribers.push(unsubscribe);
+    }
 
-      unsubscribers.push(
-        runtime.unstable_on("attachmentAddError", (payload) => {
-          // payload.error omitted: raw Error is not store-serializable; use runtime.unstable_on for it.
-          emit("composer.attachmentAddError", {
-            threadId: threadIdRef.current,
-            ...(messageIdRef && { messageId: messageIdRef.current }),
-            ...(payload.attachmentId && { attachmentId: payload.attachmentId }),
-            reason: payload.reason,
-            message: payload.message,
-          });
-        }),
-      );
+    unsubscribers.push(
+      runtime.unstable_on("attachmentAddError", (payload) => {
+        // payload.error omitted: raw Error is not store-serializable; use runtime.unstable_on for it.
+        emit("composer.attachmentAddError", {
+          threadId: threadIdRef.current,
+          ...(messageIdRef && { messageId: messageIdRef.current }),
+          ...(payload.attachmentId && { attachmentId: payload.attachmentId }),
+          reason: payload.reason,
+          message: payload.message,
+        });
+      }),
+    );
 
-      return () => {
-        for (const unsub of unsubscribers) unsub();
-      };
-    }, [runtime, emit, threadIdRef, messageIdRef]);
+    return () => {
+      for (const unsub of unsubscribers) unsub();
+    };
+  }, [runtime, emit, threadIdRef, messageIdRef]);
 
-    const attachments = tapClientLookup(
-      () =>
-        runtimeState.attachments.map((attachment, idx) =>
-          withKey(
-            attachment.id,
-            ComposerAttachmentClientByIndex({
-              runtime,
-              index: idx,
-            }),
-          ),
+  const attachments = useClientLookup(
+    () =>
+      runtimeState.attachments.map((attachment, idx) =>
+        withKey(
+          attachment.id,
+          ComposerAttachmentClientByIndex({
+            runtime,
+            index: idx,
+          }),
         ),
-      [runtimeState.attachments, runtime],
-    );
+      ),
+    [runtimeState.attachments, runtime],
+  );
 
-    const state = tapMemo<ComposerState>(() => {
-      return {
-        text: runtimeState.text,
-        role: runtimeState.role,
-        attachments: attachments.state,
-        runConfig: runtimeState.runConfig,
-        isEditing: runtimeState.isEditing,
-        canCancel: runtimeState.canCancel,
-        canSend: runtimeState.canSend,
-        attachmentAccept: runtimeState.attachmentAccept,
-        isEmpty: runtimeState.isEmpty,
-        type: runtimeState.type ?? "thread",
-        dictation: runtimeState.dictation,
-        quote: runtimeState.quote,
-        queue: [],
-      };
-    }, [runtimeState, attachments.state]);
+  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, runtime],
+  );
 
+  const state = useMemo<ComposerState>(() => {
     return {
-      getState: () => state,
-      setText: runtime.setText,
-      setRole: runtime.setRole,
-      setRunConfig: runtime.setRunConfig,
-      addAttachment: runtime.addAttachment,
-      reset: runtime.reset,
-      clearAttachments: runtime.clearAttachments,
-      send: runtime.send,
-      cancel: runtime.cancel,
-      beginEdit:
-        (runtime as EditComposerRuntime).beginEdit ??
-        (() => {
-          throw new Error("beginEdit is not supported in this runtime");
-        }),
-      startDictation: runtime.startDictation,
-      stopDictation: runtime.stopDictation,
-      setQuote: runtime.setQuote,
-      attachment: (selector) => {
-        if ("id" in selector) {
-          return attachments.get({ key: selector.id });
-        } else {
-          return attachments.get(selector);
-        }
-      },
-      queueItem: () => {
-        throw new Error("Queue is not supported in this runtime");
-      },
-      __internal_getRuntime: () => runtime,
+      text: runtimeState.text,
+      role: runtimeState.role,
+      attachments: attachments.state,
+      runConfig: runtimeState.runConfig,
+      isEditing: runtimeState.isEditing,
+      canCancel: runtimeState.canCancel,
+      canSend: runtimeState.canSend,
+      attachmentAccept: runtimeState.attachmentAccept,
+      isEmpty: runtimeState.isEmpty,
+      type: runtimeState.type ?? "thread",
+      dictation: runtimeState.dictation,
+      quote: runtimeState.quote,
+      queue,
     };
-  },
-);
+  }, [runtimeState, attachments.state, queue]);
+
+  return {
+    getState: () => state,
+    setText: runtime.setText,
+    setRole: runtime.setRole,
+    setRunConfig: runtime.setRunConfig,
+    addAttachment: runtime.addAttachment,
+    reset: runtime.reset,
+    clearAttachments: runtime.clearAttachments,
+    send: runtime.send,
+    cancel: runtime.cancel,
+    beginEdit:
+      (runtime as EditComposerRuntime).beginEdit ??
+      (() => {
+        throw new Error("beginEdit is not supported in this runtime");
+      }),
+    startDictation: runtime.startDictation,
+    stopDictation: runtime.stopDictation,
+    setQuote: runtime.setQuote,
+    attachment: (selector) => {
+      if ("id" in selector) {
+        return attachments.get({ key: selector.id });
+      } else {
+        return attachments.get(selector);
+      }
+    },
+    queueItem: (selector) => queueItems.get(selector),
+    __internal_getRuntime: () => runtime,
+  };
+});

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

@@ -1,19 +1,21 @@
 import { resource } from "@assistant-ui/tap";
 import type { ClientOutput } from "@assistant-ui/store";
 import type { MessagePartRuntime } from "../../runtime/api/message-part-runtime";
-import { tapSubscribable } from "./tap-subscribable";
+import { useSubscribable } from "./useSubscribable";
 
-export const MessagePartClient = resource(
-  ({ runtime }: { runtime: MessagePartRuntime }): ClientOutput<"part"> => {
-    const state = tapSubscribable(runtime);
+export const MessagePartClient = resource(function MessagePartClient({
+  runtime,
+}: {
+  runtime: MessagePartRuntime;
+}): ClientOutput<"part"> {
+  const state = useSubscribable(runtime);
 
-    return {
-      getState: () => state,
-      addToolResult: (result) => runtime.addToolResult(result),
-      resumeToolCall: (payload) => runtime.resumeToolCall(payload),
-      respondToToolApproval: (response) =>
-        runtime.respondToToolApproval(response),
-      __internal_getRuntime: () => runtime,
-    };
-  },
-);
+  return {
+    getState: () => state,
+    addToolResult: (result) => runtime.addToolResult(result),
+    resumeToolCall: (payload) => runtime.resumeToolCall(payload),
+    respondToToolApproval: (response) =>
+      runtime.respondToToolApproval(response),
+    __internal_getRuntime: () => runtime,
+  };
+});

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

@@ -1,145 +1,147 @@
-import {
-  withKey,
-  resource,
-  tapResource,
-  tapMemo,
-  tapState,
-  type tapRef,
-} from "@assistant-ui/tap";
+import { useMemo, useState } from "react";
+import { useResource, withKey, resource } from "@assistant-ui/tap";
 import {
   type ClientOutput,
-  tapClientLookup,
-  tapClientResource,
+  useClientLookup,
+  useClientResource,
 } from "@assistant-ui/store";
 import type { MessageRuntime } from "../../runtime/api/message-runtime";
-import { tapSubscribable } from "./tap-subscribable";
+import { useSubscribable } from "./useSubscribable";
 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 MessageAttachmentClientByIndex = resource(
-  ({ runtime, index }: { runtime: MessageRuntime; index: number }) => {
-    const attachmentRuntime = tapMemo(
+  function MessageAttachmentClientByIndex({
+    runtime,
+    index,
+  }: {
+    runtime: MessageRuntime;
+    index: number;
+  }) {
+    const attachmentRuntime = useMemo(
       () => runtime.getAttachmentByIndex(index),
       [runtime, index],
     );
-    return tapResource(AttachmentRuntimeClient({ runtime: attachmentRuntime }));
-  },
-);
-
-const MessagePartByIndex = resource(
-  ({ runtime, index }: { runtime: MessageRuntime; index: number }) => {
-    const partRuntime = tapMemo(
-      () => runtime.getMessagePartByIndex(index),
-      [runtime, index],
-    );
-    return tapResource(MessagePartClient({ runtime: partRuntime }));
+    return useResource(AttachmentRuntimeClient({ runtime: attachmentRuntime }));
   },
 );
 
-export const MessageClient = resource(
-  ({
-    runtime,
-    threadIdRef,
-  }: {
-    runtime: MessageRuntime;
-    threadIdRef: tapRef.RefObject<string>;
-  }): ClientOutput<"message"> => {
-    const runtimeState = tapSubscribable(runtime);
-
-    const [isCopiedState, setIsCopied] = tapState(false);
-    const [isHoveringState, setIsHovering] = tapState(false);
-
-    const messageIdRef = tapMemo(
-      () => ({
-        get current() {
-          return runtime.getState().id;
-        },
-      }),
-      [runtime],
-    );
-
-    const composer = tapClientResource(
-      ComposerClient({
-        runtime: runtime.composer,
-        threadIdRef,
-        messageIdRef,
-      }),
-    );
-    const parts = tapClientLookup(
-      () =>
-        runtimeState.content.map((part, idx) =>
-          withKey(
-            "toolCallId" in part && part.toolCallId != null
-              ? `toolCallId-${part.toolCallId}`
-              : `index-${idx}`,
-            MessagePartByIndex({ runtime, index: idx }),
-          ),
+const MessagePartByIndex = resource(function MessagePartByIndex({
+  runtime,
+  index,
+}: {
+  runtime: MessageRuntime;
+  index: number;
+}) {
+  const partRuntime = useMemo(
+    () => runtime.getMessagePartByIndex(index),
+    [runtime, index],
+  );
+  return useResource(MessagePartClient({ runtime: partRuntime }));
+});
+
+export const MessageClient = resource(function MessageClient({
+  runtime,
+  threadIdRef,
+}: {
+  runtime: MessageRuntime;
+  threadIdRef: { current: string };
+}): 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;
+      },
+    }),
+    [runtime],
+  );
+
+  const composer = useClientResource(
+    ComposerClient({
+      runtime: runtime.composer,
+      threadIdRef,
+      messageIdRef,
+    }),
+  );
+  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, runtime],
-    );
-
-    const attachments = tapClientLookup(
-      () =>
-        (runtimeState.attachments ?? []).map((attachment, idx) =>
-          withKey(
-            attachment.id,
-            MessageAttachmentClientByIndex({ runtime, index: idx }),
-          ),
+      ),
+    [runtimeState.content, runtime],
+  );
+
+  const attachments = useClientLookup(
+    () =>
+      (runtimeState.attachments ?? []).map((attachment, idx) =>
+        withKey(
+          attachment.id,
+          MessageAttachmentClientByIndex({ runtime, index: idx }),
         ),
-      [runtimeState.attachments, runtime],
-    );
-
-    const state = tapMemo<MessageState>(() => {
-      return {
-        ...(runtimeState as MessageState),
-
-        parts: parts.state,
-        composer: composer.state,
-
-        isCopied: isCopiedState,
-        isHovering: isHoveringState,
-      };
-    }, [
-      runtimeState,
-      parts.state,
-      composer.state,
-      isCopiedState,
-      isHoveringState,
-    ]);
+      ),
+    [runtimeState.attachments, runtime],
+  );
 
+  const state = useMemo<MessageState>(() => {
     return {
-      getState: () => state,
-
-      composer: () => composer.methods,
-
-      reload: (config) => runtime.reload(config),
-      speak: () => runtime.speak(),
-      stopSpeaking: () => runtime.stopSpeaking(),
-      submitFeedback: (feedback) => runtime.submitFeedback(feedback),
-      switchToBranch: (options) => runtime.switchToBranch(options),
-      getCopyText: () => runtime.unstable_getCopyText(),
-      part: (selector) => {
-        if ("index" in selector) {
-          return parts.get({ index: selector.index });
-        } else {
-          return parts.get({ key: `toolCallId-${selector.toolCallId}` });
-        }
-      },
-
-      attachment: (selector) => {
-        if ("id" in selector) {
-          return attachments.get({ key: selector.id });
-        } else {
-          return attachments.get(selector);
-        }
-      },
+      ...(runtimeState as MessageState),
 
-      setIsCopied,
-      setIsHovering,
+      parts: parts.state,
+      composer: composer.state,
 
-      __internal_getRuntime: () => runtime,
+      isCopied: isCopiedState,
+      isHovering: isHoveringState,
     };
-  },
-);
+  }, [
+    runtimeState,
+    parts.state,
+    composer.state,
+    isCopiedState,
+    isHoveringState,
+  ]);
+
+  return {
+    getState: () => state,
+
+    composer: () => composer.methods,
+
+    reload: (config) => runtime.reload(config),
+    speak: () => runtime.speak(),
+    stopSpeaking: () => runtime.stopSpeaking(),
+    submitFeedback: (feedback) => runtime.submitFeedback(feedback),
+    switchToBranch: (options) => runtime.switchToBranch(options),
+    getCopyText: () => runtime.unstable_getCopyText(),
+    part: (selector) => {
+      if ("index" in selector) {
+        return parts.get({ index: selector.index });
+      } else {
+        return parts.get({ key: `toolCallId-${selector.toolCallId}` });
+      }
+    },
+
+    attachment: (selector) => {
+      if ("id" in selector) {
+        return attachments.get({ key: selector.id });
+      } else {
+        return attachments.get(selector);
+      }
+    },
+
+    setIsCopied,
+    setIsHovering,
+
+    __internal_getRuntime: () => runtime,
+  };
+});