@assistant-ui/react 0.10.50 → 0.11.0

package/src/runtimes/remote-thread-list/RemoteThreadListHookInstanceManager.tsx

@@ -7,17 +7,15 @@ import {
   useRef,
   useEffect,
   memo,
-  useMemo,
   PropsWithChildren,
   ComponentType,
 } from "react";
 import { UseBoundStore, StoreApi, create } from "zustand";
-import { useAssistantRuntime } from "../../context";
-import { ThreadListItemRuntimeProvider } from "../../context/providers/ThreadListItemRuntimeProvider";
 import {
-  useThreadListItem,
-  useThreadListItemRuntime,
-} from "../../context/react/ThreadListItemContext";
+  useAssistantState,
+  useAssistantApi,
+  ThreadListItemByIdProvider,
+} from "../../context";
 import { ThreadRuntimeCore, ThreadRuntimeImpl } from "../../internal";
 import { BaseSubscribable } from "./BaseSubscribable";
 import { AssistantRuntime } from "../../api";
@@ -82,7 +80,7 @@ export class RemoteThreadListHookInstanceManager extends BaseSubscribable {
   }
 
   private _InnerActiveThreadProvider: FC = () => {
-    const { id } = useThreadListItem();
+    const id = useAssistantState(({ threadListItem }) => threadListItem.id);
 
     const { useRuntime } = this.useRuntimeHook();
     const runtime = useRuntime();
@@ -114,21 +112,22 @@ export class RemoteThreadListHookInstanceManager extends BaseSubscribable {
     }, [threadBinding, updateRuntime]);
 
     // auto initialize thread
-    const threadListItemRuntime = useThreadListItemRuntime();
+    const api = useAssistantApi();
     useEffect(() => {
       return runtime.threads.main.unstable_on("initialize", () => {
-        if (threadListItemRuntime.getState().status === "new") {
-          threadListItemRuntime.initialize();
+        const state = api.threadListItem().getState();
+        if (state.status === "new") {
+          api.threadListItem().initialize();
 
           // auto generate a title after first run
           const dispose = runtime.thread.unstable_on("run-end", () => {
             dispose();
 
-            threadListItemRuntime.generateTitle();
+            api.threadListItem().generateTitle();
           });
         }
       });
-    }, [runtime, threadListItemRuntime]);
+    }, [runtime, api]);
 
     return null;
   };
@@ -138,18 +137,14 @@ export class RemoteThreadListHookInstanceManager extends BaseSubscribable {
     provider: ComponentType<PropsWithChildren>;
     // eslint-disable-next-line react/display-name
   }> = memo(({ threadId, provider: Provider }) => {
-    const assistantRuntime = useAssistantRuntime();
-    const threadListItemRuntime = useMemo(
-      () => assistantRuntime.threads.getItemById(threadId),
-      [assistantRuntime, threadId],
-    );
+    // Runtime is provided by ThreadListItemByIdProvider
 
     return (
-      <ThreadListItemRuntimeProvider runtime={threadListItemRuntime}>
+      <ThreadListItemByIdProvider id={threadId}>
         <Provider>
           <this._InnerActiveThreadProvider />
         </Provider>
-      </ThreadListItemRuntimeProvider>
+      </ThreadListItemByIdProvider>
     );
   });
 

package/src/runtimes/remote-thread-list/RemoteThreadListThreadListRuntimeCore.tsx

@@ -18,22 +18,22 @@ import { RuntimeAdapterProvider } from "../adapters/RuntimeAdapterProvider";
 
 type RemoteThreadData =
   | {
-      readonly threadId: string;
-      readonly remoteId?: undefined;
-      readonly externalId?: undefined;
+      readonly id: string;
+      readonly remoteId: undefined;
+      readonly externalId: undefined;
       readonly status: "new";
       readonly title: undefined;
     }
   | {
-      readonly threadId: string;
+      readonly id: string;
       readonly initializeTask: Promise<RemoteThreadInitializeResponse>;
-      readonly remoteId?: undefined;
-      readonly externalId?: undefined;
+      readonly remoteId: undefined;
+      readonly externalId: undefined;
       readonly status: "regular" | "archived";
       readonly title?: string | undefined;
     }
   | {
-      readonly threadId: string;
+      readonly id: string;
       readonly initializeTask: Promise<RemoteThreadInitializeResponse>;
       readonly remoteId: string;
       readonly externalId: string | undefined;
@@ -72,7 +72,7 @@ const updateStatusReducer = (
   const data = getThreadData(state, threadIdOrRemoteId);
   if (!data) return state;
 
-  const { threadId, remoteId, status: lastStatus } = data;
+  const { id, remoteId, status: lastStatus } = data;
   if (lastStatus === newStatus) return state;
 
   const newState = { ...state };
@@ -83,11 +83,11 @@ const updateStatusReducer = (
       newState.newThreadId = undefined;
       break;
     case "regular":
-      newState.threadIds = newState.threadIds.filter((t) => t !== threadId);
+      newState.threadIds = newState.threadIds.filter((t) => t !== id);
       break;
     case "archived":
       newState.archivedThreadIds = newState.archivedThreadIds.filter(
-        (t) => t !== threadId,
+        (t) => t !== id,
       );
       break;
 
@@ -100,20 +100,20 @@ const updateStatusReducer = (
   // newStatus
   switch (newStatus) {
     case "regular":
-      newState.threadIds = [threadId, ...newState.threadIds];
+      newState.threadIds = [id, ...newState.threadIds];
       break;
 
     case "archived":
-      newState.archivedThreadIds = [threadId, ...newState.archivedThreadIds];
+      newState.archivedThreadIds = [id, ...newState.archivedThreadIds];
       break;
 
     case "deleted":
       newState.threadData = Object.fromEntries(
-        Object.entries(newState.threadData).filter(([key]) => key !== threadId),
+        Object.entries(newState.threadData).filter(([key]) => key !== id),
       );
       newState.threadIdMap = Object.fromEntries(
         Object.entries(newState.threadIdMap).filter(
-          ([key]) => key !== threadId && key !== remoteId,
+          ([key]) => key !== id && key !== remoteId,
         ),
       );
       break;
@@ -127,7 +127,7 @@ const updateStatusReducer = (
   if (newStatus !== "deleted") {
     newState.threadData = {
       ...newState.threadData,
-      [threadId]: {
+      [id]: {
         ...data,
         status: newStatus,
       },
@@ -156,6 +156,10 @@ export class RemoteThreadListThreadListRuntimeCore
     threadData: {},
   });
 
+  public get threadData() {
+    return this._state.value.threadData;
+  }
+
   public getLoadThreadsPromise() {
     // TODO this needs to be cached in case this promise is loaded during suspense
     if (!this._loadThreadsPromise) {
@@ -194,7 +198,7 @@ export class RemoteThreadListThreadListRuntimeCore
               const mappingId = createThreadMappingId(thread.remoteId);
               newThreadIdMap[thread.remoteId] = mappingId;
               newThreadData[mappingId] = {
-                threadId: thread.remoteId,
+                id: thread.remoteId,
                 remoteId: thread.remoteId,
                 externalId: thread.externalId,
                 status: thread.status,
@@ -294,7 +298,7 @@ export class RemoteThreadListThreadListRuntimeCore
     const data = this.getItemById(threadIdOrRemoteId);
     if (!data) throw new Error("Thread not found");
 
-    const result = this._hookManager.getThreadRuntimeCore(data.threadId);
+    const result = this._hookManager.getThreadRuntimeCore(data.id);
     if (!result) throw new Error("Thread not found");
     return result;
   }
@@ -307,17 +311,17 @@ export class RemoteThreadListThreadListRuntimeCore
     const data = this.getItemById(threadIdOrRemoteId);
     if (!data) throw new Error("Thread not found");
 
-    if (this._mainThreadId === data.threadId) return;
+    if (this._mainThreadId === data.id) return;
 
-    const task = this._hookManager.startThreadRuntime(data.threadId);
+    const task = this._hookManager.startThreadRuntime(data.id);
     if (this.mainThreadId !== undefined) {
       await task;
     } else {
       task.then(() => this._notifySubscribers());
     }
 
-    if (data.status === "archived") await this.unarchive(data.threadId);
-    this._mainThreadId = data.threadId;
+    if (data.status === "archived") await this.unarchive(data.id);
+    this._mainThreadId = data.id;
 
     this._notifySubscribers();
   }
@@ -332,31 +336,34 @@ export class RemoteThreadListThreadListRuntimeCore
     }
 
     const state = this._state.value;
-    let threadId: string | undefined = this._state.value.newThreadId;
-    if (threadId === undefined) {
+    let id: string | undefined = this._state.value.newThreadId;
+    if (id === undefined) {
       do {
-        threadId = `__LOCALID_${generateId()}`;
-      } while (state.threadIdMap[threadId]);
+        id = `__LOCALID_${generateId()}`;
+      } while (state.threadIdMap[id]);
 
-      const mappingId = createThreadMappingId(threadId);
+      const mappingId = createThreadMappingId(id);
       this._state.update({
         ...state,
-        newThreadId: threadId,
+        newThreadId: id,
         threadIdMap: {
           ...state.threadIdMap,
-          [threadId]: mappingId,
+          [id]: mappingId,
         },
         threadData: {
           ...state.threadData,
-          [threadId]: {
+          [mappingId]: {
             status: "new",
-            threadId,
-          },
+            id,
+            remoteId: undefined,
+            externalId: undefined,
+            title: undefined,
+          } satisfies RemoteThreadData,
         },
       });
     }
 
-    return this.switchToThread(threadId);
+    return this.switchToThread(id);
   }
 
   public initialize = async (threadId: string) => {
@@ -419,7 +426,7 @@ export class RemoteThreadListThreadListRuntimeCore
 
     const { remoteId } = await data.initializeTask;
 
-    const runtimeCore = this._hookManager.getThreadRuntimeCore(data.threadId);
+    const runtimeCore = this._hookManager.getThreadRuntimeCore(data.id);
     if (!runtimeCore) return; // thread is no longer running
 
     const messages = runtimeCore.messages;
@@ -435,7 +442,7 @@ export class RemoteThreadListThreadListRuntimeCore
         ...state,
         threadData: {
           ...state.threadData,
-          [data.threadId]: {
+          [data.id]: {
             ...data,
             title: newTitle,
           },
@@ -462,7 +469,7 @@ export class RemoteThreadListThreadListRuntimeCore
           ...state,
           threadData: {
             ...state.threadData,
-            [data.threadId]: {
+            [data.id]: {
               ...data,
               title: newTitle,
             },
@@ -489,12 +496,12 @@ export class RemoteThreadListThreadListRuntimeCore
 
     return this._state.optimisticUpdate({
       execute: async () => {
-        await this._ensureThreadIsNotMain(data.threadId);
+        await this._ensureThreadIsNotMain(data.id);
         const { remoteId } = await data.initializeTask;
         return this._options.adapter.archive(remoteId);
       },
       optimistic: (state) => {
-        return updateStatusReducer(state, data.threadId, "archived");
+        return updateStatusReducer(state, data.id, "archived");
       },
     });
   }
@@ -510,12 +517,12 @@ export class RemoteThreadListThreadListRuntimeCore
           const { remoteId } = await data.initializeTask;
           return await this._options.adapter.unarchive(remoteId);
         } catch (error) {
-          await this._ensureThreadIsNotMain(data.threadId);
+          await this._ensureThreadIsNotMain(data.id);
           throw error;
         }
       },
       optimistic: (state) => {
-        return updateStatusReducer(state, data.threadId, "regular");
+        return updateStatusReducer(state, data.id, "regular");
       },
     });
   }
@@ -528,12 +535,12 @@ export class RemoteThreadListThreadListRuntimeCore
 
     return this._state.optimisticUpdate({
       execute: async () => {
-        await this._ensureThreadIsNotMain(data.threadId);
+        await this._ensureThreadIsNotMain(data.id);
         const { remoteId } = await data.initializeTask;
         return await this._options.adapter.delete(remoteId);
       },
       optimistic: (state) => {
-        return updateStatusReducer(state, data.threadId, "deleted");
+        return updateStatusReducer(state, data.id, "deleted");
       },
     });
   }
@@ -544,8 +551,8 @@ export class RemoteThreadListThreadListRuntimeCore
     if (data.status !== "regular" && data.status !== "archived")
       throw new Error("Thread is not yet initialized");
 
-    await this._ensureThreadIsNotMain(data.threadId);
-    this._hookManager.stopThreadRuntime(data.threadId);
+    await this._ensureThreadIsNotMain(data.id);
+    this._hookManager.stopThreadRuntime(data.id);
   }
 
   private useBoundIds = create<string[]>(() => []);

package/src/types/EventTypes.ts

@@ -0,0 +1,92 @@
+export type EventSource<
+  T extends keyof AssistantEvents = keyof AssistantEvents,
+> = T extends `${infer Source}.${string}` ? Source : never;
+
+type ScopeConfig = {
+  composer: "thread" | "message";
+  thread: never;
+  "thread-list-item": never;
+};
+
+export type SourceByScope<
+  TScope extends AssistantEventScope<keyof AssistantEvents>,
+> =
+  | (TScope extends "*" ? EventSource : never)
+  | (TScope extends keyof ScopeConfig ? TScope : never)
+  | {
+      [K in keyof ScopeConfig]: TScope extends ScopeConfig[K] ? K : never;
+    }[keyof ScopeConfig];
+
+export type AssistantEventScope<TEvent extends keyof AssistantEvents> =
+  | "*"
+  | EventSource<TEvent>
+  | ScopeConfig[EventSource<TEvent>];
+
+export type AssistantEventSelector<TEvent extends keyof AssistantEvents> =
+  | TEvent
+  | {
+      scope: AssistantEventScope<TEvent>;
+      event: TEvent;
+    };
+
+export type AssistantEvents = {
+  // Thread events (from ThreadRuntimeEventType)
+  "thread.run-start": {
+    threadId: string;
+  };
+  "thread.run-end": {
+    threadId: string;
+  };
+  "thread.initialize": {
+    threadId: string;
+  };
+  "thread.model-context-update": {
+    threadId: string;
+  };
+
+  // Composer events (from ComposerRuntimeEventType)
+  "composer.send": {
+    threadId: string;
+    messageId?: string;
+  };
+  "composer.attachment-add": {
+    threadId: string;
+    messageId?: string;
+  };
+
+  // Thread list item events (from ThreadListItemEventType)
+  "thread-list-item.switched-to": {
+    threadId: string;
+  };
+  "thread-list-item.switched-away": {
+    threadId: string;
+  };
+};
+
+export const normalizeEventSelector = <TEvent extends keyof AssistantEvents>(
+  selector: AssistantEventSelector<TEvent>,
+) => {
+  if (typeof selector === "string") {
+    const source = selector.split(".")[0] as AssistantEventScope<TEvent>;
+    return {
+      scope: source,
+      event: selector,
+    };
+  }
+
+  return {
+    scope: selector.scope,
+    event: selector.event,
+  };
+};
+
+export const checkEventScope = <
+  TEvent extends keyof AssistantEvents,
+  TExpectedScope extends AssistantEventScope<keyof AssistantEvents>,
+>(
+  expectedScope: TExpectedScope,
+  scope: AssistantEventScope<TEvent>,
+  _event: TEvent,
+): _event is Extract<TEvent, `${SourceByScope<TExpectedScope>}.${string}`> => {
+  return scope === expectedScope;
+};

package/src/types/index.ts

@@ -91,3 +91,9 @@ export type {
 export type { ThreadListItemStatus } from "../api/ThreadListItemRuntime";
 
 export type { Unsubscribe } from "./Unsubscribe";
+
+export type {
+  AssistantEventScope,
+  AssistantEventSelector,
+  AssistantEvents,
+} from "./EventTypes";

package/src/utils/smooth/SmoothContext.tsx

@@ -15,7 +15,7 @@ import {
   MessagePartStatus,
   ToolCallMessagePartStatus,
 } from "../../types/AssistantTypes";
-import { useMessagePartRuntime } from "../../context/react/MessagePartContext";
+import { useAssistantApi } from "../../context";
 import { createContextStoreHook } from "../../context/react/utils/createContextStoreHook";
 
 type SmoothContextValue = {
@@ -35,10 +35,10 @@ const makeSmoothContext = (
 
 export const SmoothContextProvider: FC<PropsWithChildren> = ({ children }) => {
   const outer = useSmoothContext({ optional: true });
-  const MessagePartRuntime = useMessagePartRuntime();
+  const api = useAssistantApi();
 
   const [context] = useState(() =>
-    makeSmoothContext(MessagePartRuntime.getState().status),
+    makeSmoothContext(api.part().getState().status),
   );
 
   // do not wrap if there is an outer SmoothContextProvider

package/src/utils/smooth/useSmooth.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { useEffect, useMemo, useRef, useState } from "react";
-import { useMessage } from "../../context";
+import { useAssistantState } from "../../context";
 import {
   MessagePartStatus,
   ReasoningMessagePart,
@@ -75,10 +75,7 @@ export const useSmooth = (
   smooth: boolean = false,
 ): MessagePartState & (TextMessagePart | ReasoningMessagePart) => {
   const { text } = state;
-  const id = useMessage({
-    optional: true,
-    selector: (m: { id: string }) => m.id,
-  });
+  const id = useAssistantState(({ message }) => message.id);
 
   const idRef = useRef(id);
   const [displayedText, setDisplayedText] = useState(text);

package/src/utils/tap-store/index.ts

@@ -0,0 +1,2 @@
+export { type Store, asStore } from "./store";
+export { tapApi, type ActionsObject } from "./tap-store-api";

package/src/utils/tap-store/store.ts

@@ -0,0 +1,51 @@
+import {
+  tapMemo,
+  tapEffect,
+  ResourceElement,
+  resource,
+  createResource,
+  Unsubscribe,
+} from "@assistant-ui/tap";
+import { StoreApi } from "./tap-store-api";
+
+export interface Store<TState, TActions> {
+  getApi(): StoreApi<TState, TActions>;
+
+  /**
+   * Subscribe to the store.
+   */
+  subscribe(listener: () => void): Unsubscribe;
+
+  /**
+   * Synchronously flush all the updates to the store.
+   */
+  flushSync(): void;
+}
+
+export const asStore = resource(
+  <TState, TActions, TProps>(
+    element: ResourceElement<
+      {
+        api: StoreApi<TState, TActions>;
+      },
+      TProps
+    >,
+  ): Store<TState, TActions> => {
+    const resource = tapMemo(
+      () => createResource(element, true),
+      [element.type],
+    );
+
+    tapEffect(() => {
+      resource.updateInput(element.props);
+    });
+
+    return tapMemo<Store<TState, TActions>>(() => {
+      return {
+        getApi: () => resource.getState().api,
+        subscribe: resource.subscribe,
+        flushSync: resource.flushSync,
+      };
+    }, [resource]);
+  },
+);

package/src/utils/tap-store/tap-store-api.ts

@@ -0,0 +1,75 @@
+import { tapEffect, tapMemo, tapRef } from "@assistant-ui/tap";
+
+export interface ActionsObject {
+  [key: string]: ((...args: any[]) => any) | ActionsObject;
+}
+
+export type StoreApi<TState, TActions> = TActions & {
+  getState(): TState;
+};
+
+class ReadonlyStoreApiHandler<TState, TActions>
+  implements ProxyHandler<StoreApi<TState, TActions>>
+{
+  constructor(
+    private readonly getState: () => TState,
+    private readonly getActions: () => TActions,
+  ) {}
+
+  get(_: unknown, prop: string | symbol) {
+    if (prop === "getState") return this.getState;
+    return this.getActions()[prop as keyof TActions];
+  }
+
+  ownKeys(): ArrayLike<string | symbol> {
+    return ["getState", ...Object.keys(this.getActions() as object)];
+  }
+
+  has(_: unknown, prop: string | symbol) {
+    if (prop === "getState") return true;
+    return prop in (this.getActions() as object);
+  }
+
+  getOwnPropertyDescriptor(_: unknown, prop: string | symbol) {
+    if (prop === "getState")
+      return {
+        enumerable: true,
+        configurable: false,
+        get: this.getState,
+      };
+
+    return Object.getOwnPropertyDescriptor(this.getActions(), prop);
+  }
+
+  set() {
+    return false;
+  }
+  defineProperty() {
+    return false;
+  }
+  deleteProperty() {
+    return false;
+  }
+}
+
+export const tapApi = <TState, TActions extends ActionsObject>(
+  state: TState,
+  actions: TActions,
+) => {
+  const ref = tapRef(() => ({ state, actions }));
+  tapEffect(() => {
+    ref.current = { state, actions };
+  });
+
+  return tapMemo(
+    () =>
+      new Proxy<StoreApi<TState, TActions>>(
+        {} as StoreApi<TState, TActions>,
+        new ReadonlyStoreApiHandler(
+          () => ref.current.state,
+          () => ref.current.actions,
+        ),
+      ),
+    [],
+  );
+};

package/src/utils/useToolArgsFieldStatus.tsx

@@ -1,18 +1,18 @@
 import { getPartialJsonObjectFieldState } from "assistant-stream/utils";
-import { useMessagePart } from "../context";
+import { useAssistantState } from "../context";
 
 const COMPLETE_STATUS = { type: "complete" };
 
 export const useToolArgsFieldStatus = (fieldPath: (string | number)[]) => {
-  return useMessagePart((t) => {
-    if (t.type !== "tool-call")
+  return useAssistantState(({ part }) => {
+    if (part.type !== "tool-call")
       throw new Error(
         "useToolArgsFieldStatus can only be used inside tool-call message parts",
       );
 
-    const state = getPartialJsonObjectFieldState(t.args, fieldPath);
-    if (state === "complete" || t.status.type === "requires-action")
+    const state = getPartialJsonObjectFieldState(part.args, fieldPath);
+    if (state === "complete" || part.status?.type === "requires-action")
       return COMPLETE_STATUS;
-    return t.status;
+    return part.status;
   });
 };

package/dist/context/providers/AttachmentRuntimeProvider.d.ts

@@ -1,9 +0,0 @@
-import { type FC, type PropsWithChildren } from "react";
-import { AttachmentRuntime } from "../../api/AttachmentRuntime";
-export declare namespace AttachmentRuntimeProvider {
-    type Props = PropsWithChildren<{
-        runtime: AttachmentRuntime;
-    }>;
-}
-export declare const AttachmentRuntimeProvider: FC<AttachmentRuntimeProvider.Props>;
-//# sourceMappingURL=AttachmentRuntimeProvider.d.ts.map

package/dist/context/providers/AttachmentRuntimeProvider.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"AttachmentRuntimeProvider.d.ts","sourceRoot":"","sources":["../../../src/context/providers/AttachmentRuntimeProvider.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,EAAE,EAAE,KAAK,iBAAiB,EAAuB,MAAM,OAAO,CAAC;AAI7E,OAAO,EAAE,iBAAiB,EAAE,MAAM,6BAA6B,CAAC;AAGhE,yBAAiB,yBAAyB,CAAC;IACzC,KAAY,KAAK,GAAG,iBAAiB,CAAC;QACpC,OAAO,EAAE,iBAAiB,CAAC;KAC5B,CAAC,CAAC;CACJ;AAcD,eAAO,MAAM,yBAAyB,EAAE,EAAE,CAAC,yBAAyB,CAAC,KAAK,CAgBzE,CAAC"}