@assistant-ui/react 0.10.50 → 0.11.0

package/src/client/ThreadListItemClient.ts

@@ -0,0 +1,88 @@
+import { resource, tapEffect } from "@assistant-ui/tap";
+import {
+  ThreadListItemEventType,
+  ThreadListItemRuntime,
+} from "../api/ThreadListItemRuntime";
+import { ThreadListItemStatus, Unsubscribe } from "../types";
+import { tapApi } from "../utils/tap-store";
+import { tapSubscribable } from "./util-hooks/tapSubscribable";
+import { EventManagerActions } from "./EventManagerClient";
+
+export type ThreadListItemClientState = {
+  readonly id: string;
+  readonly remoteId: string | undefined;
+  readonly externalId: string | undefined;
+  readonly title?: string | undefined;
+  readonly status: ThreadListItemStatus;
+};
+
+export type ThreadListItemClientActions = {
+  switchTo(): void;
+  rename(newTitle: string): void;
+  archive(): void;
+  unarchive(): void;
+  delete(): void;
+  generateTitle(): void;
+  initialize(): Promise<{ remoteId: string; externalId: string | undefined }>;
+  detach(): void;
+
+  /** @internal */
+  __internal_getRuntime(): ThreadListItemRuntime;
+};
+
+export const ThreadListItemClient = resource(
+  ({
+    runtime,
+    events,
+  }: {
+    runtime: ThreadListItemRuntime;
+    events: EventManagerActions;
+  }) => {
+    const runtimeState = tapSubscribable(runtime);
+
+    // Bind thread list item events to event manager
+    tapEffect(() => {
+      const unsubscribers: Unsubscribe[] = [];
+
+      // Subscribe to thread list item events
+      const threadListItemEvents: ThreadListItemEventType[] = [
+        "switched-to",
+        "switched-away",
+      ];
+
+      for (const event of threadListItemEvents) {
+        const unsubscribe = runtime.unstable_on(event, () => {
+          events.emit(`thread-list-item.${event}`, {
+            threadId: runtime.getState()!.id,
+          });
+        });
+        unsubscribers.push(unsubscribe);
+      }
+
+      return () => {
+        for (const unsub of unsubscribers) unsub();
+      };
+    }, [runtime, events]);
+
+    const api = tapApi<ThreadListItemClientState, ThreadListItemClientActions>(
+      runtimeState,
+      {
+        switchTo: runtime.switchTo,
+        rename: runtime.rename,
+        archive: runtime.archive,
+        unarchive: runtime.unarchive,
+        delete: runtime.delete,
+        generateTitle: runtime.generateTitle,
+        initialize: runtime.initialize,
+        detach: runtime.detach,
+        __internal_getRuntime: () => runtime,
+      },
+    );
+
+    return {
+      state: runtimeState,
+      api,
+      key: runtimeState.id,
+    };
+  },
+);

package/src/client/util-hooks/tapLookupResources.ts

@@ -0,0 +1,31 @@
+import { ResourceElement, tapResources } from "@assistant-ui/tap";
+import { ActionsObject } from "../../utils/tap-store";
+import { StoreApi } from "../../utils/tap-store/tap-store-api";
+
+export const tapLookupResources = <TState, TActions extends ActionsObject>(
+  elements: ResourceElement<{
+    key: string | undefined;
+    state: TState;
+    api: StoreApi<TState, TActions>;
+  }>[],
+) => {
+  const resources = tapResources(elements);
+
+  return {
+    state: resources.map((r) => r.state),
+    api: (lookup: { index: number } | { key: string }) => {
+      const value =
+        "index" in lookup
+          ? resources[lookup.index]?.api
+          : resources.find((r) => r.key === lookup.key)?.api;
+
+      if (!value) {
+        throw new Error(
+          `tapLookupResources: Resource not found for lookup: ${JSON.stringify(lookup)}`,
+        );
+      }
+
+      return value;
+    },
+  };
+};

package/src/client/util-hooks/tapSubscribable.ts

@@ -0,0 +1,16 @@
+import { tapState, tapEffect } from "@assistant-ui/tap";
+import { SubscribableWithState } from "../../api/subscribable/Subscribable";
+
+export const tapSubscribable = <T>(
+  subscribable: Omit<SubscribableWithState<T, any>, "path">,
+) => {
+  const [, setState] = tapState(subscribable.getState);
+  tapEffect(() => {
+    setState(subscribable.getState());
+    return subscribable.subscribe(() => {
+      setState(subscribable.getState());
+    });
+  }, [subscribable]);
+
+  return subscribable.getState();
+};

package/src/cloud/AssistantCloudThreadHistoryAdapter.tsx

@@ -1,10 +1,8 @@
 import { RefObject, useState } from "react";
-import { useThreadListItemRuntime } from "../context";
 import { ThreadHistoryAdapter } from "../runtimes/adapters/thread-history/ThreadHistoryAdapter";
 import { ExportedMessageRepositoryItem } from "../runtimes/utils/MessageRepository";
 import { AssistantCloud } from "assistant-cloud";
 import { auiV0Decode, auiV0Encode } from "./auiV0";
-import { ThreadListItemRuntime } from "../api";
 import {
   MessageFormatAdapter,
   MessageFormatItem,
@@ -13,6 +11,11 @@ import {
 } from "../runtimes/adapters/thread-history/MessageFormatAdapter";
 import { GenericThreadHistoryAdapter } from "../runtimes/adapters/thread-history/ThreadHistoryAdapter";
 import { ReadonlyJSONObject } from "assistant-stream/utils";
+import {
+  AssistantApi,
+  useAssistantApi,
+} from "../context/react/AssistantApiContext";
+import { ThreadListItemRuntime } from "../api";
 
 // Global WeakMap to store message ID mappings across adapter instances
 const globalMessageIdMapping = new WeakMap<
@@ -55,14 +58,23 @@ class FormattedThreadHistoryAdapter<TMessage, TStorageFormat>
 class AssistantCloudThreadHistoryAdapter implements ThreadHistoryAdapter {
   constructor(
     private cloudRef: RefObject<AssistantCloud>,
-    private threadListItemRuntime: ThreadListItemRuntime,
+    private store: AssistantApi,
   ) {}
 
   private get _getIdForLocalId(): Record<string, string | Promise<string>> {
-    if (!globalMessageIdMapping.has(this.threadListItemRuntime)) {
-      globalMessageIdMapping.set(this.threadListItemRuntime, {});
+    if (
+      !globalMessageIdMapping.has(
+        this.store.threadListItem().__internal_getRuntime(),
+      )
+    ) {
+      globalMessageIdMapping.set(
+        this.store.threadListItem().__internal_getRuntime(),
+        {},
+      );
     }
-    return globalMessageIdMapping.get(this.threadListItemRuntime)!;
+    return globalMessageIdMapping.get(
+      this.store.threadListItem().__internal_getRuntime(),
+    )!;
   }
 
   withFormat<TMessage, TStorageFormat>(
@@ -72,7 +84,7 @@ class AssistantCloudThreadHistoryAdapter implements ThreadHistoryAdapter {
   }
 
   async append({ parentId, message }: ExportedMessageRepositoryItem) {
-    const { remoteId } = await this.threadListItemRuntime.initialize();
+    const { remoteId } = await this.store.threadListItem().initialize();
     const task = this.cloudRef.current.threads.messages
       .create(remoteId, {
         parent_id: parentId
@@ -92,7 +104,7 @@ class AssistantCloudThreadHistoryAdapter implements ThreadHistoryAdapter {
   }
 
   async load() {
-    const remoteId = this.threadListItemRuntime.getState().remoteId;
+    const remoteId = this.store.threadListItem().getState().remoteId;
     if (!remoteId) return { messages: [] };
     const { messages } = await this.cloudRef.current.threads.messages.list(
       remoteId,
@@ -118,7 +130,7 @@ class AssistantCloudThreadHistoryAdapter implements ThreadHistoryAdapter {
     format: string,
     content: T,
   ) {
-    const { remoteId } = await this.threadListItemRuntime.initialize();
+    const { remoteId } = await this.store.threadListItem().initialize();
 
     const task = this.cloudRef.current.threads.messages
       .create(remoteId, {
@@ -144,7 +156,7 @@ class AssistantCloudThreadHistoryAdapter implements ThreadHistoryAdapter {
       message: MessageStorageEntry<TStorageFormat>,
     ) => MessageFormatItem<TMessage>,
   ): Promise<MessageFormatRepository<TMessage>> {
-    const remoteId = this.threadListItemRuntime.getState().remoteId;
+    const remoteId = this.store.threadListItem().getState().remoteId;
     if (!remoteId) return { messages: [] };
 
     const { messages } = await this.cloudRef.current.threads.messages.list(
@@ -173,10 +185,9 @@ class AssistantCloudThreadHistoryAdapter implements ThreadHistoryAdapter {
 export const useAssistantCloudThreadHistoryAdapter = (
   cloudRef: RefObject<AssistantCloud>,
 ): ThreadHistoryAdapter => {
-  const threadListItemRuntime = useThreadListItemRuntime();
+  const store = useAssistantApi();
   const [adapter] = useState(
-    () =>
-      new AssistantCloudThreadHistoryAdapter(cloudRef, threadListItemRuntime),
+    () => new AssistantCloudThreadHistoryAdapter(cloudRef, store),
   );
 
   return adapter;

package/src/context/providers/AssistantRuntimeProvider.tsx

@@ -1,23 +1,14 @@
 "use client";
 
-import {
-  FC,
-  PropsWithChildren,
-  memo,
-  useEffect,
-  useMemo,
-  useState,
-} from "react";
-import { AssistantContext } from "../react/AssistantContext";
-import { makeAssistantToolUIsStore } from "../stores/AssistantToolUIs";
-import { ThreadRuntimeProvider } from "./ThreadRuntimeProvider";
+import { FC, memo, PropsWithChildren } from "react";
+import { AssistantApiProvider } from "../react/AssistantApiContext";
 import { AssistantRuntime } from "../../api/AssistantRuntime";
-import { create } from "zustand";
-import { writableStore } from "../ReadonlyStore";
 import { AssistantRuntimeCore } from "../../runtimes/core/AssistantRuntimeCore";
-import { ensureBinding } from "../react/utils/ensureBinding";
+import { useAssistantRuntimeClient } from "../../client/AssistantRuntimeClient";
 
-export namespace AssistantRuntimeProvider {
+import { ThreadViewportProvider } from "./ThreadViewportProvider";
+
+export namespace AssistantProvider {
   export type Props = PropsWithChildren<{
     /**
      * The runtime to provide to the rest of your app.
@@ -26,52 +17,37 @@ export namespace AssistantRuntimeProvider {
   }>;
 }
 
-const useAssistantRuntimeStore = (runtime: AssistantRuntime) => {
-  const [store] = useState(() => create(() => runtime));
-
-  useEffect(() => {
-    ensureBinding(runtime);
-    ensureBinding(runtime.threads);
-
-    writableStore(store).setState(runtime, true);
-  }, [runtime, store]);
-
-  return store;
-};
-
-const useAssistantToolUIsStore = () => {
-  return useMemo(() => makeAssistantToolUIsStore(), []);
-};
-
 const getRenderComponent = (runtime: AssistantRuntime) => {
   return (runtime as { _core?: AssistantRuntimeCore })._core?.RenderComponent;
 };
 
-export const AssistantRuntimeProviderImpl: FC<
-  AssistantRuntimeProvider.Props
-> = ({ children, runtime }) => {
-  const useAssistantRuntime = useAssistantRuntimeStore(runtime);
-  const useToolUIs = useAssistantToolUIsStore();
-  const [context] = useState(() => {
-    return {
-      useToolUIs,
-      useAssistantRuntime,
-    };
-  });
+export const AssistantRuntimeProviderImpl: FC<AssistantProvider.Props> = ({
+  children,
+  runtime,
+}) => {
+  const api = useAssistantRuntimeClient(runtime);
 
   const RenderComponent = getRenderComponent(runtime);
 
   return (
-    <AssistantContext.Provider value={context}>
+    <AssistantProvider api={api}>
       {RenderComponent && <RenderComponent />}
-      <ThreadRuntimeProvider
-        runtime={runtime.thread}
-        listItemRuntime={runtime.threads.mainItem}
-      >
-        {children}
-      </ThreadRuntimeProvider>
-    </AssistantContext.Provider>
+
+      {children}
+    </AssistantProvider>
   );
 };
 
 export const AssistantRuntimeProvider = memo(AssistantRuntimeProviderImpl);
+
+const AssistantProvider: FC<
+  PropsWithChildren<{ api: ReturnType<typeof useAssistantRuntimeClient> }>
+> = ({ children, api }) => {
+  return (
+    <AssistantApiProvider api={api}>
+      {/* TODO temporarily allow accessing viewport state from outside the viewport */}
+      {/* TODO figure out if this behavior should be deprecated, since it is quite hacky */}
+      <ThreadViewportProvider>{children}</ThreadViewportProvider>
+    </AssistantApiProvider>
+  );
+};

package/src/context/providers/AttachmentProvider.tsx

@@ -0,0 +1,48 @@
+"use client";
+
+import { useMemo, type FC, type PropsWithChildren } from "react";
+
+import {
+  AssistantApi,
+  AssistantApiProvider,
+  useAssistantApi,
+  createAssistantApiField,
+} from "../react/AssistantApiContext";
+
+export const MessageAttachmentByIndexProvider: FC<
+  PropsWithChildren<{
+    index: number;
+  }>
+> = ({ index, children }) => {
+  const api = useAssistantApi();
+  const api2 = useMemo(() => {
+    return {
+      attachment: createAssistantApiField({
+        source: "message",
+        query: { type: "index", index },
+        get: () => api.message().attachment({ index }),
+      }),
+    } satisfies Partial<AssistantApi>;
+  }, [api, index]);
+
+  return <AssistantApiProvider api={api2}>{children}</AssistantApiProvider>;
+};
+
+export const ComposerAttachmentByIndexProvider: FC<
+  PropsWithChildren<{
+    index: number;
+  }>
+> = ({ index, children }) => {
+  const api = useAssistantApi();
+  const api2 = useMemo(() => {
+    return {
+      attachment: createAssistantApiField({
+        source: "composer",
+        query: { type: "index", index },
+        get: () => api.composer().attachment({ index }),
+      }),
+    } satisfies Partial<AssistantApi>;
+  }, [api, index]);
+
+  return <AssistantApiProvider api={api2}>{children}</AssistantApiProvider>;
+};

package/src/context/providers/MessageProvider.tsx

@@ -0,0 +1,57 @@
+"use client";
+
+import { useMemo, type FC, type PropsWithChildren } from "react";
+import {
+  AssistantApi,
+  AssistantApiProvider,
+  useAssistantApi,
+  createAssistantApiField,
+} from "../react/AssistantApiContext";
+import { AssistantEvents, AssistantEventSelector } from "../../types";
+import { Unsubscribe } from "@assistant-ui/tap";
+import {
+  checkEventScope,
+  normalizeEventSelector,
+} from "../../types/EventTypes";
+
+export const MessageByIndexProvider: FC<
+  PropsWithChildren<{
+    index: number;
+  }>
+> = ({ index, children }) => {
+  const api = useAssistantApi();
+  const api2 = useMemo(() => {
+    const getMessage = () => api.thread().message({ index });
+    return {
+      message: createAssistantApiField({
+        source: "thread",
+        query: { type: "index", index },
+        get: () => getMessage(),
+      }),
+      composer: createAssistantApiField({
+        source: "message",
+        query: {},
+        get: () => getMessage().composer,
+      }),
+      on<TEvent extends keyof AssistantEvents>(
+        selector: AssistantEventSelector<TEvent>,
+        callback: (e: AssistantEvents[TEvent]) => void,
+      ): Unsubscribe {
+        const { event, scope } = normalizeEventSelector(selector);
+        if (
+          !checkEventScope("composer", scope, event) &&
+          !checkEventScope("message", scope, event)
+        )
+          return api.on(selector, callback);
+
+        return api.on({ scope: "thread", event }, (e) => {
+          if (e.messageId === getMessage().getState().id) {
+            callback(e);
+          }
+        });
+      },
+    } satisfies Partial<AssistantApi>;
+  }, [api, index]);
+
+  return <AssistantApiProvider api={api2}>{children}</AssistantApiProvider>;
+};

package/src/context/providers/PartProvider.tsx

@@ -0,0 +1,28 @@
+"use client";
+
+import { useMemo, type FC, type PropsWithChildren } from "react";
+import {
+  AssistantApi,
+  AssistantApiProvider,
+  useAssistantApi,
+  createAssistantApiField,
+} from "../react/AssistantApiContext";
+
+export const PartByIndexProvider: FC<
+  PropsWithChildren<{
+    index: number;
+  }>
+> = ({ index, children }) => {
+  const api = useAssistantApi();
+  const api2 = useMemo(() => {
+    return {
+      part: createAssistantApiField({
+        source: "message",
+        query: { type: "index", index },
+        get: () => api.message().part({ index }),
+      }),
+    } satisfies Partial<AssistantApi>;
+  }, [api, index]);
+
+  return <AssistantApiProvider api={api2}>{children}</AssistantApiProvider>;
+};

package/src/context/providers/TextMessagePartProvider.tsx

@@ -1,90 +1,65 @@
 "use client";
 
-import { FC, PropsWithChildren, useEffect, useState } from "react";
-import { create, StoreApi, UseBoundStore } from "zustand";
+import { useMemo, type FC, type PropsWithChildren } from "react";
 import {
-  MessagePartContext,
-  MessagePartContextValue,
-} from "../react/MessagePartContext";
-import { MessagePartStatus } from "../../types/AssistantTypes";
-import { writableStore } from "../ReadonlyStore";
+  AssistantApiProvider,
+  AssistantApi,
+  createAssistantApiField,
+} from "../react/AssistantApiContext";
 import {
-  MessagePartRuntimeImpl,
-  MessagePartState,
-} from "../../api/MessagePartRuntime";
-import { ensureBinding } from "../react/utils/ensureBinding";
+  MessagePartClientActions,
+  MessagePartClientState,
+} from "../../client/MessagePartClient";
+import { resource, tapMemo } from "@assistant-ui/tap";
+import { useResource } from "@assistant-ui/tap/react";
+import { asStore, tapApi } from "../../utils/tap-store";
 
-export namespace TextMessagePartProvider {
-  export type Props = PropsWithChildren<{
-    text: string;
-    isRunning?: boolean | undefined;
-  }>;
-}
-
-const COMPLETE_STATUS: MessagePartStatus = {
-  type: "complete",
-};
-
-const RUNNING_STATUS: MessagePartStatus = {
-  type: "running",
-};
-
-export const TextMessagePartProvider: FC<TextMessagePartProvider.Props> = ({
-  children,
-  text,
-  isRunning,
-}) => {
-  const [context] = useState<
-    MessagePartContextValue & {
-      useMessagePart: UseBoundStore<
-        StoreApi<MessagePartState & { type: "text" }>
-      >;
-    }
-  >(() => {
-    const useMessagePart = create<MessagePartState & { type: "text" }>(() => ({
-      status: isRunning ? RUNNING_STATUS : COMPLETE_STATUS,
-      type: "text",
-      text,
-    }));
-
-    const MessagePartRuntime = new MessagePartRuntimeImpl({
-      path: {
-        ref: "text",
-        threadSelector: { type: "main" },
-        messageSelector: { type: "messageId", messageId: "" },
-        messagePartSelector: { type: "index", index: 0 },
-      },
-      getState: useMessagePart.getState,
-      subscribe: useMessagePart.subscribe,
-    });
-    ensureBinding(MessagePartRuntime);
-
-    const useMessagePartRuntime = create(() => MessagePartRuntime);
+const TextMessagePartActions = new Proxy({} as MessagePartClientActions, {
+  get() {
+    throw new Error("Not implemented");
+  },
+});
 
-    return { useMessagePartRuntime, useMessagePart };
-  });
-
-  useEffect(() => {
-    const state = context.useMessagePart.getState();
-    const textUpdated = state.text !== text;
-    const targetStatus = isRunning ? RUNNING_STATUS : COMPLETE_STATUS;
-    const statusUpdated = state.status !== targetStatus;
-
-    if (!textUpdated && !statusUpdated) return;
-
-    writableStore(context.useMessagePart).setState(
-      {
+const TextMessagePartClient = resource(
+  ({ text, isRunning }: { text: string; isRunning: boolean }) => {
+    const state = tapMemo<MessagePartClientState>(
+      () => ({
         type: "text",
         text,
-        status: targetStatus,
-      } satisfies MessagePartState,
-      true,
+        status: isRunning ? { type: "running" } : { type: "complete" },
+      }),
+      [text, isRunning],
     );
-  }, [context, isRunning, text]);
 
-  return (
-    <MessagePartContext.Provider value={context}>
-      {children}
-    </MessagePartContext.Provider>
+    const api = tapApi(state, TextMessagePartActions);
+
+    return {
+      state,
+      api,
+    };
+  },
+);
+
+export const TextMessagePartProvider: FC<
+  PropsWithChildren<{
+    text: string;
+    isRunning?: boolean;
+  }>
+> = ({ text, isRunning = false, children }) => {
+  const store = useResource(
+    asStore(TextMessagePartClient({ text, isRunning })),
   );
+  const api = useMemo(() => {
+    return {
+      part: createAssistantApiField({
+        source: "root",
+        query: {},
+        get: () => store.getApi(),
+      }),
+      subscribe: store.subscribe,
+      // flushSync: store.flushSync,
+    } satisfies Partial<AssistantApi>;
+  }, [store]);
+
+  return <AssistantApiProvider api={api}>{children}</AssistantApiProvider>;
 };