feat: useRemoteThreadListRuntime (#1286)

* feat: useRemoteThreadListRuntime * Update packages/react/src/runtimes/remote-thread-list/EMPTY_THREAD_CORE.tsx Co-authored-by: greptile-apps[bot] <165735046+greptile-apps[bot]@users.noreply.github.com> * review fixes * Update packages/react/src/runtimes/remote-thread-list/RemoteThreadListThreadListRuntimeCore.tsx Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> * Update packages/react/src/runtimes/remote-thread-list/RemoteThreadListThreadListRuntimeCore.tsx Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> --------- Co-authored-by: greptile-apps[bot] <165735046+greptile-apps[bot]@users.noreply.github.com> Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
Yonom · Jan 2, 2025 · d6b3b79 · d6b3b79
1 parent 5c6b3f7
commit d6b3b79
Show file tree

Hide file tree

Showing 22 changed files with 956 additions and 44 deletions.
diff --git a/.changeset/strong-kids-brush.md b/.changeset/strong-kids-brush.md
@@ -0,0 +1,5 @@
+---
+"@assistant-ui/react": patch
+---
+
+feat: useRemoteThreadListRuntime
diff --git a/packages/react-playground/src/lib/playground-runtime.ts b/packages/react-playground/src/lib/playground-runtime.ts
@@ -53,6 +53,7 @@ const makeModelConfigStore = () =>
 type PlaygroundThreadFactory = () => PlaygroundThreadRuntimeCore;
 
 const EMPTY_ARRAY = [] as never[];
+const RESOLVED_PROMISE = Promise.resolve();
 
 class PlaygroundThreadListRuntimeCore
   implements INTERNAL.ThreadListRuntimeCore
@@ -79,6 +80,10 @@ class PlaygroundThreadListRuntimeCore
     this._mainThread = this.threadFactory();
   }
 
+  public getLoadThreadsPromise(): Promise<void> {
+    return RESOLVED_PROMISE;
+  }
+
   public getMainThreadRuntimeCore() {
     return this._mainThread;
   }
@@ -88,7 +93,7 @@ class PlaygroundThreadListRuntimeCore
 
     return {
       threadId: "default",
-      state: "regular",
+      status: "regular",
       runtime: this._mainThread,
     } as const;
   }

diff --git a/packages/react/src/api/AssistantRuntime.ts b/packages/react/src/api/AssistantRuntime.ts
@@ -41,11 +41,7 @@ export type AssistantRuntime = {
   registerModelConfigProvider(provider: ModelConfigProvider): Unsubscribe;
 };
 
-export class AssistantRuntimeImpl
-  implements
-    Omit<AssistantRuntimeCore, "thread" | "threadList">,
-    AssistantRuntime
-{
+export class AssistantRuntimeImpl implements AssistantRuntime {
   public readonly threadList;
   public readonly _thread: ThreadRuntime;
 
@@ -66,7 +62,7 @@ export class AssistantRuntimeImpl
         getState: () => _core.threadList.getMainThreadRuntimeCore(),
         subscribe: (callback) => _core.threadList.subscribe(callback),
       }),
-      this.threadList.mainThreadListItem, // TODO capture "main" threadListItem from context around useLocalRuntime / useExternalStoreRuntime
+      this.threadList.mainItem, // TODO capture "main" threadListItem from context around useLocalRuntime / useExternalStoreRuntime
     );
   }
 

diff --git a/packages/react/src/api/ThreadListItemRuntime.ts b/packages/react/src/api/ThreadListItemRuntime.ts
@@ -9,13 +9,14 @@ export type ThreadListItemState = {
   readonly isMain: boolean;
 
   readonly id: string;
+  readonly remoteId: string | undefined;
 
   /**
    * @deprecated This field was renamed to `id`. This field will be removed in 0.8.0.
    */
   readonly threadId: string;
 
-  readonly state: "archived" | "regular" | "new" | "deleted";
+  readonly status: "archived" | "regular" | "new" | "deleted";
   readonly title?: string | undefined;
 };
 

diff --git a/packages/react/src/api/ThreadListRuntime.ts b/packages/react/src/api/ThreadListRuntime.ts
@@ -21,10 +21,10 @@ export type ThreadListRuntime = {
 
   subscribe(callback: () => void): Unsubscribe;
 
-  readonly mainThreadListItem: ThreadListItemRuntime;
-  getThreadListItemById(threadId: string): ThreadListItemRuntime;
-  getThreadListItemByIndex(idx: number): ThreadListItemRuntime;
-  getThreadListArchivedItemByIndex(idx: number): ThreadListItemRuntime;
+  readonly mainItem: ThreadListItemRuntime;
+  getItemById(threadId: string): ThreadListItemRuntime;
+  getItemByIndex(idx: number): ThreadListItemRuntime;
+  getArchivedItemByIndex(idx: number): ThreadListItemRuntime;
 };
 
 const getThreadListState = (
@@ -48,9 +48,10 @@ const getThreadListItemState = (
   if (!threadData) return SKIP_UPDATE;
   return {
     id: threadData.threadId,
+    remoteId: threadData.remoteId,
     threadId: threadData.threadId, // TODO remove in 0.8.0
     title: threadData.title,
-    state: threadData.state,
+    status: threadData.status,
     isMain: threadData.threadId === threadList.mainThreadId,
   };
 };
@@ -93,11 +94,11 @@ export class ThreadListRuntimeImpl implements ThreadListRuntime {
 
   private _mainThreadListItemRuntime;
 
-  public get mainThreadListItem() {
+  public get mainItem() {
     return this._mainThreadListItemRuntime;
   }
 
-  public getThreadListItemByIndex(idx: number) {
+  public getItemByIndex(idx: number) {
     return new ThreadListItemRuntimeImpl(
       new ShallowMemoizeSubject({
         path: {
@@ -113,7 +114,7 @@ export class ThreadListRuntimeImpl implements ThreadListRuntime {
     );
   }
 
-  public getThreadListArchivedItemByIndex(idx: number) {
+  public getArchivedItemByIndex(idx: number) {
     return new ThreadListItemRuntimeImpl(
       new ShallowMemoizeSubject({
         path: {
@@ -132,7 +133,7 @@ export class ThreadListRuntimeImpl implements ThreadListRuntime {
     );
   }
 
-  public getThreadListItemById(threadId: string) {
+  public getItemById(threadId: string) {
     return new ThreadListItemRuntimeImpl(
       new ShallowMemoizeSubject({
         path: {

diff --git a/packages/react/src/api/ThreadRuntime.ts b/packages/react/src/api/ThreadRuntime.ts
@@ -215,11 +215,11 @@ export class ThreadRuntimeImpl implements ThreadRuntime {
     return this._threadBinding.path;
   }
 
-  public unstable_getCore() {
-    return this._threadBinding.getState();
+  public get __internal_threadBinding() {
+    return this._threadBinding;
   }
 
-  private _threadBinding: ThreadRuntimeCoreBinding & {
+  private readonly _threadBinding: ThreadRuntimeCoreBinding & {
     getStateState(): ThreadState;
   };
 

diff --git a/packages/react/src/context/providers/AssistantRuntimeProvider.tsx b/packages/react/src/context/providers/AssistantRuntimeProvider.tsx
@@ -8,6 +8,7 @@ import { ThreadRuntimeProvider } from "./ThreadRuntimeProvider";
 import { AssistantRuntime } from "../../api/AssistantRuntime";
 import { create } from "zustand";
 import { writableStore } from "../ReadonlyStore";
+import { AssistantRuntimeCore } from "../../runtimes/core/AssistantRuntimeCore";
 
 export namespace AssistantRuntimeProvider {
   export type Props = PropsWithChildren<{
@@ -45,6 +46,16 @@ const useThreadListStore = (runtime: AssistantRuntime) => {
   return store;
 };
 
+const DEFAULT_RENDER_COMPONENT: FC<PropsWithChildren> = ({ children }) =>
+  children;
+
+const getRenderComponent = (runtime: AssistantRuntime) => {
+  return (
+    (runtime as { _core?: AssistantRuntimeCore })._core
+      ?.__internal_RenderComponent ?? DEFAULT_RENDER_COMPONENT
+  );
+};
+
 export const AssistantRuntimeProviderImpl: FC<
   AssistantRuntimeProvider.Props
 > = ({ children, runtime }) => {
@@ -59,14 +70,18 @@ export const AssistantRuntimeProviderImpl: FC<
     };
   }, [useAssistantRuntime, useToolUIs, useThreadList]);
 
+  const RenderComponent = getRenderComponent(runtime);
+
   return (
     <AssistantContext.Provider value={context}>
-      <ThreadRuntimeProvider
-        runtime={runtime.thread}
-        listItemRuntime={runtime.threadList.mainThreadListItem}
-      >
-        {children}
-      </ThreadRuntimeProvider>
+      <RenderComponent>
+        <ThreadRuntimeProvider
+          runtime={runtime.thread}
+          listItemRuntime={runtime.threadList.mainItem}
+        >
+          {children}
+        </ThreadRuntimeProvider>
+      </RenderComponent>
     </AssistantContext.Provider>
   );
 };

diff --git a/packages/react/src/primitives/threadList/ThreadListItems.tsx b/packages/react/src/primitives/threadList/ThreadListItems.tsx
@@ -28,11 +28,9 @@ const ThreadListItemImpl: FC<ThreadListItemProps> = ({
   const runtime = useMemo(
     () =>
       archived
-        ? assistantRuntime.threadList.getThreadListArchivedItemByIndex(
-            partIndex,
-          )
-        : assistantRuntime.threadList.getThreadListItemByIndex(partIndex),
-    [assistantRuntime, partIndex],
+        ? assistantRuntime.threadList.getArchivedItemByIndex(partIndex)
+        : assistantRuntime.threadList.getItemByIndex(partIndex),
+    [assistantRuntime, partIndex, archived],
   );
 
   const ThreadListItemComponent = components.ThreadListItem;

diff --git a/packages/react/src/runtimes/core/AssistantRuntimeCore.tsx b/packages/react/src/runtimes/core/AssistantRuntimeCore.tsx
@@ -1,3 +1,4 @@
+import { PropsWithChildren } from "react";
 import type { ModelConfigProvider } from "../../types/ModelConfigTypes";
 import type { Unsubscribe } from "../../types/Unsubscribe";
 import { ThreadListRuntimeCore } from "./ThreadListRuntimeCore";
@@ -6,4 +7,6 @@ export type AssistantRuntimeCore = {
   readonly threadList: ThreadListRuntimeCore;
 
   registerModelConfigProvider: (provider: ModelConfigProvider) => Unsubscribe;
+
+  __internal_RenderComponent?: React.FC<PropsWithChildren>;
 };
diff --git a/packages/react/src/runtimes/core/ThreadListRuntimeCore.tsx b/packages/react/src/runtimes/core/ThreadListRuntimeCore.tsx
@@ -3,7 +3,9 @@ import { ThreadRuntimeCore } from "./ThreadRuntimeCore";
 
 type ThreadListItemCoreState = {
   readonly threadId: string;
-  readonly state: "archived" | "regular" | "new" | "deleted";
+  readonly remoteId?: string;
+
+  readonly status: "archived" | "regular" | "new" | "deleted";
   readonly title?: string | undefined;
 
   readonly runtime?: ThreadRuntimeCore | undefined;
@@ -22,7 +24,7 @@ export type ThreadListRuntimeCore = {
   switchToThread(threadId: string): Promise<void>;
   switchToNewThread(): Promise<void>;
 
-  // getLoadThreadsPromise(): Promise<void>;
+  getLoadThreadsPromise(): Promise<void>;
   // getLoadArchivedThreadsPromise(): Promise<void>;
 
   rename(threadId: string, newTitle: string): Promise<void>;

diff --git a/packages/react/src/runtimes/external-store/ExternalStoreAdapter.tsx b/packages/react/src/runtimes/external-store/ExternalStoreAdapter.tsx
@@ -10,7 +10,7 @@ import { SpeechSynthesisAdapter } from "../speech/SpeechAdapterTypes";
 import { ThreadMessageLike } from "./ThreadMessageLike";
 
 export type ExternalStoreThreadData<TState extends "regular" | "archived"> = {
-  state: TState;
+  status: TState;
   threadId: string;
   title?: string | undefined;
 };

diff --git a/packages/react/src/runtimes/external-store/ExternalStoreThreadListRuntimeCore.tsx b/packages/react/src/runtimes/external-store/ExternalStoreThreadListRuntimeCore.tsx
@@ -13,8 +13,9 @@ const DEFAULT_THREAD_ID = "DEFAULT_THREAD_ID";
 const DEFAULT_THREADS = Object.freeze([DEFAULT_THREAD_ID]);
 const DEFAULT_THREAD: ExternalStoreThreadData<"regular"> = Object.freeze({
   threadId: DEFAULT_THREAD_ID,
-  state: "regular",
+  status: "regular",
 });
+const RESOLVED_PROMISE = Promise.resolve();
 
 export class ExternalStoreThreadListRuntimeCore
   implements ThreadListRuntimeCore
@@ -35,6 +36,10 @@ export class ExternalStoreThreadListRuntimeCore
     return this._archivedThreads;
   }
 
+  public getLoadThreadsPromise() {
+    return RESOLVED_PROMISE;
+  }
+
   private _mainThread: ExternalStoreThreadRuntimeCore;
 
   public get mainThreadId() {

diff --git a/packages/react/src/runtimes/index.ts b/packages/react/src/runtimes/index.ts
@@ -1,5 +1,6 @@
 export * from "./core";
 export * from "./local";
+// export * from "./remote-thread-list";
 export * from "./edge";
 export * from "./external-store";
 export * from "./dangerous-in-browser";

diff --git a/packages/react/src/runtimes/local/LocalThreadListRuntimeCore.tsx b/packages/react/src/runtimes/local/LocalThreadListRuntimeCore.tsx
@@ -9,13 +9,14 @@ export type ThreadListAdapter = {
 
 export type LocalThreadData = {
   readonly runtime: LocalThreadRuntimeCore;
-  readonly state: "new" | "regular" | "archived";
+  readonly status: "new" | "regular" | "archived";
   readonly threadId: string;
   readonly title?: string | undefined;
 };
 
 export type LocalThreadFactory = () => LocalThreadRuntimeCore;
 
+const RESOLVED_PROMISE = Promise.resolve();
 export class LocalThreadListRuntimeCore implements ThreadListRuntimeCore {
   private _threadData = new Map<string, LocalThreadData>();
   private _threadIds: readonly string[] = [];
@@ -51,6 +52,10 @@ export class LocalThreadListRuntimeCore implements ThreadListRuntimeCore {
     return result;
   }
 
+  public getLoadThreadsPromise(): Promise<void> {
+    return RESOLVED_PROMISE;
+  }
+
   public getItemById(threadId: string) {
     return this._threadData.get(threadId);
   }
@@ -61,7 +66,7 @@ export class LocalThreadListRuntimeCore implements ThreadListRuntimeCore {
     const data = this._threadData.get(threadId);
     if (!data) throw new Error("Thread not found");
 
-    if (data.state === "archived") await this.unarchive(threadId);
+    if (data.status === "archived") await this.unarchive(threadId);
 
     this._mainThreadId = data.threadId;
     this._notifySubscribers();
@@ -84,7 +89,7 @@ export class LocalThreadListRuntimeCore implements ThreadListRuntimeCore {
       });
       this._threadData.set(threadId, {
         runtime,
-        state: "new",
+        status: "new",
         threadId,
       });
       this._newThreadId = threadId;
@@ -101,7 +106,7 @@ export class LocalThreadListRuntimeCore implements ThreadListRuntimeCore {
     const data = this._threadData.get(threadId);
     if (!data) throw new Error("Thread not found");
 
-    const { state: lastState } = data;
+    const { status: lastState } = data;
     if (lastState === newState) return;
 
     // lastState
@@ -147,7 +152,7 @@ export class LocalThreadListRuntimeCore implements ThreadListRuntimeCore {
     if (newState !== "deleted") {
       this._threadData.set(threadId, {
         ...data,
-        state: newState,
+        status: newState,
       });
     }
 
@@ -181,7 +186,7 @@ export class LocalThreadListRuntimeCore implements ThreadListRuntimeCore {
   public archive(threadId: string): Promise<void> {
     const data = this._threadData.get(threadId);
     if (!data) throw new Error("Thread not found");
-    if (data.state !== "regular")
+    if (data.status !== "regular")
       throw new Error("Thread is not yet initialized or already archived");
 
     this._stateOp(threadId, "archived");
@@ -191,7 +196,7 @@ export class LocalThreadListRuntimeCore implements ThreadListRuntimeCore {
   public unarchive(threadId: string): Promise<void> {
     const data = this._threadData.get(threadId);
     if (!data) throw new Error("Thread not found");
-    if (data.state !== "archived") throw new Error("Thread is not archived");
+    if (data.status !== "archived") throw new Error("Thread is not archived");
 
     this._stateOp(threadId, "regular");
     return Promise.resolve();
@@ -200,8 +205,8 @@ export class LocalThreadListRuntimeCore implements ThreadListRuntimeCore {
   public delete(threadId: string): Promise<void> {
     const data = this._threadData.get(threadId);
     if (!data) throw new Error("Thread not found");
-    if (data.state !== "regular" && data.state !== "archived")
-      throw new Error("Thread is not yet initalized");
+    if (data.status !== "regular" && data.status !== "archived")
+      throw new Error("Thread is not yet initialized");
 
     this._stateOp(threadId, "deleted");
     return Promise.resolve();