@assistant-ui/react 0.7.64 → 0.7.66

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

@@ -4,7 +4,7 @@ import { ThreadListRuntimeCore } from "../core/ThreadListRuntimeCore";
 import { generateId } from "../../internal";
 import {
   RemoteThreadInitializeResponse,
-  RemoteThreadListAdapter,
+  RemoteThreadListOptions,
 } from "./types";
 import { RemoteThreadListHookInstanceManager } from "./RemoteThreadListHookInstanceManager";
 import { BaseSubscribable } from "./BaseSubscribable";
@@ -12,7 +12,7 @@ import { EMPTY_THREAD_CORE } from "./EMPTY_THREAD_CORE";
 import { OptimisticState } from "./OptimisticState";
 import { FC, Fragment, useEffect, useId } from "react";
 import { create } from "zustand";
-import { AssistantStream, AssistantMessageStream } from "assistant-stream";
+import { AssistantMessageStream } from "assistant-stream";
 import { ModelContextProvider } from "../../model-context";
 import { RuntimeAdapterProvider } from "../adapters/RuntimeAdapterProvider";
 
@@ -141,7 +141,7 @@ export class RemoteThreadListThreadListRuntimeCore
   extends BaseSubscribable
   implements ThreadListRuntimeCore
 {
-  private _adapter!: RemoteThreadListAdapter;
+  private _options!: RemoteThreadListOptions;
   private readonly _hookManager: RemoteThreadListHookInstanceManager;
 
   private _loadThreadsPromise: Promise<void> | undefined;
@@ -161,7 +161,7 @@ export class RemoteThreadListThreadListRuntimeCore
     if (!this._loadThreadsPromise) {
       this._loadThreadsPromise = this._state
         .optimisticUpdate({
-          execute: () => this._adapter.list(),
+          execute: () => this._options.adapter.list(),
           loading: (state) => {
             return {
               ...state,
@@ -228,43 +228,40 @@ export class RemoteThreadListThreadListRuntimeCore
   }
 
   constructor(
-    adapter: RemoteThreadListAdapter,
+    options: RemoteThreadListOptions,
     private readonly contextProvider: ModelContextProvider,
   ) {
     super();
 
     this._state.subscribe(() => this._notifySubscribers());
     this._hookManager = new RemoteThreadListHookInstanceManager(
-      adapter.runtimeHook,
+      options.runtimeHook,
     );
     this.useProvider = create(() => ({
-      Provider: adapter.unstable_Provider ?? Fragment,
+      Provider: options.adapter.unstable_Provider ?? Fragment,
     }));
-    this.__internal_setAdapter(adapter);
+    this.__internal_setOptions(options);
 
     this.switchToNewThread();
   }
 
   private useProvider;
 
-  public __internal_setAdapter(adapter: RemoteThreadListAdapter) {
-    if (this._adapter === adapter) return;
+  public __internal_setOptions(options: RemoteThreadListOptions) {
+    if (this._options === options) return;
 
-    this._adapter = adapter;
+    this._options = options;
 
-    const Provider = adapter.unstable_Provider ?? Fragment;
+    const Provider = options.adapter.unstable_Provider ?? Fragment;
     if (Provider !== this.useProvider.getState().Provider) {
       this.useProvider.setState({ Provider }, true);
     }
 
-    this._hookManager.setRuntimeHook(adapter.runtimeHook);
+    this._hookManager.setRuntimeHook(options.runtimeHook);
   }
 
-  public __internal_bindAdapter() {
+  public __internal_load() {
     this.getLoadThreadsPromise(); // begin loading on initial bind
-    return this._adapter.subscribe?.({
-      onGenerateTitle: this._onGenerateTitle,
-    });
   }
 
   public get threadIds() {
@@ -368,7 +365,7 @@ export class RemoteThreadListThreadListRuntimeCore
 
     return this._state.optimisticUpdate({
       execute: () => {
-        return this._adapter.initialize(threadId);
+        return this._options.adapter.initialize(threadId);
       },
       optimistic: (state) => {
         return updateStatusReducer(state, threadId, "regular");
@@ -411,15 +408,17 @@ export class RemoteThreadListThreadListRuntimeCore
     });
   };
 
-  private _onGenerateTitle = async (
-    remoteId: string,
-    begin: () => Promise<AssistantStream>,
-  ) => {
-    const data = this.getItemById(remoteId);
+  public generateTitle = async (threadId: string) => {
+    const data = this.getItemById(threadId);
     if (!data) throw new Error("Thread not found");
     if (data.status === "new") throw new Error("Thread is not yet initialized");
 
-    const stream = await begin();
+    const { remoteId } = await data.initializeTask;
+    const messages = this.getThreadRuntimeCore(threadId).messages;
+    const stream = await this._options.adapter.generateTitle(
+      remoteId,
+      messages,
+    );
     const messageStream = AssistantMessageStream.fromAssistantStream(stream);
     for await (const result of messageStream) {
       const newTitle =
@@ -447,7 +446,7 @@ export class RemoteThreadListThreadListRuntimeCore
     return this._state.optimisticUpdate({
       execute: async () => {
         const { remoteId } = await data.initializeTask;
-        return this._adapter.rename(remoteId, newTitle);
+        return this._options.adapter.rename(remoteId, newTitle);
       },
       optimistic: (state) => {
         const data = getThreadData(state, threadIdOrRemoteId);
@@ -484,7 +483,7 @@ export class RemoteThreadListThreadListRuntimeCore
       execute: async () => {
         await this._ensureThreadIsNotMain(data.threadId);
         const { remoteId } = await data.initializeTask;
-        return this._adapter.archive(remoteId);
+        return this._options.adapter.archive(remoteId);
       },
       optimistic: (state) => {
         return updateStatusReducer(state, data.threadId, "archived");
@@ -501,7 +500,7 @@ export class RemoteThreadListThreadListRuntimeCore
       execute: async () => {
         try {
           const { remoteId } = await data.initializeTask;
-          return await this._adapter.unarchive(remoteId);
+          return await this._options.adapter.unarchive(remoteId);
         } catch (error) {
           await this._ensureThreadIsNotMain(data.threadId);
           throw error;
@@ -523,7 +522,7 @@ export class RemoteThreadListThreadListRuntimeCore
       execute: async () => {
         await this._ensureThreadIsNotMain(data.threadId);
         const { remoteId } = await data.initializeTask;
-        return await this._adapter.delete(remoteId);
+        return await this._options.adapter.delete(remoteId);
       },
       optimistic: (state) => {
         return updateStatusReducer(state, data.threadId, "deleted");

package/src/runtimes/remote-thread-list/adapter/cloud.tsx

@@ -0,0 +1,99 @@
+import {
+  FC,
+  PropsWithChildren,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+} from "react";
+import { AssistantCloud } from "../../../cloud";
+import { RemoteThreadListAdapter } from "../types";
+import { useAssistantCloudThreadHistoryAdapter } from "../../../cloud/AssistantCloudThreadHistoryAdapter";
+import { RuntimeAdapterProvider } from "../../adapters/RuntimeAdapterProvider";
+import { toCoreMessages } from "../../edge";
+import { InMemoryThreadListAdapter } from "./in-memory";
+
+type ThreadData = {
+  externalId: string;
+};
+type CloudThreadListAdapterOptions = {
+  cloud?: AssistantCloud | undefined;
+
+  create?(): Promise<ThreadData>;
+  delete?(threadId: string): Promise<void>;
+};
+
+export const useCloudThreadListAdapter = (
+  adapter: CloudThreadListAdapterOptions,
+): RemoteThreadListAdapter => {
+  const adapterRef = useRef(adapter);
+  useEffect(() => {
+    adapterRef.current = adapter;
+  }, [adapter]);
+
+  const cloud = adapter.cloud;
+  if (!cloud) return new InMemoryThreadListAdapter();
+
+  return {
+    list: async () => {
+      const { threads } = await cloud.threads.list();
+      return {
+        threads: threads.map((t) => ({
+          status: t.is_archived ? "archived" : "regular",
+          remoteId: t.id,
+          title: t.title,
+          externalId: t.external_id ?? undefined,
+        })),
+      };
+    },
+
+    initialize: async () => {
+      const createTask = adapter.create?.() ?? Promise.resolve();
+      const t = await createTask;
+      const external_id = t ? t.externalId : undefined;
+      const { thread_id: remoteId } = await cloud.threads.create({
+        last_message_at: new Date(),
+        external_id,
+      });
+
+      return { externalId: external_id, remoteId: remoteId };
+    },
+
+    rename: async (threadId, newTitle) => {
+      return cloud.threads.update(threadId, { title: newTitle });
+    },
+    archive: async (threadId) => {
+      return cloud.threads.update(threadId, { is_archived: true });
+    },
+    unarchive: async (threadId) => {
+      return cloud.threads.update(threadId, { is_archived: false });
+    },
+    delete: async (threadId) => {
+      await adapter.delete?.(threadId);
+      return cloud.threads.delete(threadId);
+    },
+
+    generateTitle: async (threadId, messages) => {
+      return cloud.runs.stream({
+        thread_id: threadId,
+        assistant_id: "system/thread_title",
+        messages: toCoreMessages(messages),
+      });
+    },
+
+    unstable_Provider: useCallback<FC<PropsWithChildren>>(({ children }) => {
+      const history = useAssistantCloudThreadHistoryAdapter({
+        get current() {
+          return adapterRef.current.cloud!;
+        },
+      });
+      const adapters = useMemo(() => ({ history }), [history]);
+
+      return (
+        <RuntimeAdapterProvider adapters={adapters}>
+          {children}
+        </RuntimeAdapterProvider>
+      );
+    }, []),
+  };
+};

package/src/runtimes/remote-thread-list/adapter/in-memory.tsx

@@ -0,0 +1,43 @@
+import {
+  AssistantStream,
+  AssistantStreamChunk,
+} from "@assistant-ui/assistant-stream";
+import {
+  RemoteThreadInitializeResponse,
+  RemoteThreadListAdapter,
+  RemoteThreadListResponse,
+} from "../types";
+
+export class InMemoryThreadListAdapter implements RemoteThreadListAdapter {
+  list(): Promise<RemoteThreadListResponse> {
+    return Promise.resolve({
+      threads: [],
+    });
+  }
+
+  rename(): Promise<void> {
+    return Promise.resolve();
+  }
+
+  archive(): Promise<void> {
+    return Promise.resolve();
+  }
+
+  unarchive(): Promise<void> {
+    return Promise.resolve();
+  }
+
+  delete(): Promise<void> {
+    return Promise.resolve();
+  }
+
+  initialize(threadId: string): Promise<RemoteThreadInitializeResponse> {
+    return Promise.resolve({ remoteId: threadId, externalId: undefined });
+  }
+
+  generateTitle(): Promise<AssistantStream> {
+    return Promise.resolve(
+      new AssistantStream(new ReadableStream<AssistantStreamChunk>()),
+    );
+  }
+}

package/src/runtimes/remote-thread-list/index.ts

@@ -1,5 +1,4 @@
 export { useRemoteThreadListRuntime as unstable_useRemoteThreadListRuntime } from "./useRemoteThreadListRuntime";
-export type {
-  RemoteThreadListAdapter as unstable_RemoteThreadListAdapter,
-  RemoteThreadListSubscriber as unstable_RemoteThreadListSubscriber,
-} from "./types";
+export type { RemoteThreadListAdapter as unstable_RemoteThreadListAdapter } from "./types";
+
+export { InMemoryThreadListAdapter as unstable_InMemoryThreadListAdapter } from "./adapter/in-memory";

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

@@ -1,7 +1,7 @@
 import { ComponentType, PropsWithChildren } from "react";
 import { AssistantRuntime } from "../../api";
-import { Unsubscribe } from "../../types";
 import { AssistantStream } from "assistant-stream";
+import { ThreadMessage } from "../../types";
 
 export type RemoteThreadInitializeResponse = {
   remoteId: string;
@@ -19,16 +19,7 @@ export type RemoteThreadListResponse = {
   threads: RemoteThreadMetadata[];
 };
 
-export type RemoteThreadListSubscriber = {
-  onGenerateTitle: (
-    threadId: string,
-    begin: () => Promise<AssistantStream>,
-  ) => void;
-};
-
 export type RemoteThreadListAdapter = {
-  runtimeHook: () => AssistantRuntime;
-
   list(): Promise<RemoteThreadListResponse>;
 
   rename(remoteId: string, newTitle: string): Promise<void>;
@@ -36,8 +27,15 @@ export type RemoteThreadListAdapter = {
   unarchive(remoteId: string): Promise<void>;
   delete(remoteId: string): Promise<void>;
   initialize(threadId: string): Promise<RemoteThreadInitializeResponse>;
-
-  subscribe?(subscriber: RemoteThreadListSubscriber): Unsubscribe;
+  generateTitle(
+    remoteId: string,
+    unstable_messages: readonly ThreadMessage[],
+  ): Promise<AssistantStream>;
 
   unstable_Provider?: ComponentType<PropsWithChildren>;
 };
+
+export type RemoteThreadListOptions = {
+  runtimeHook: () => AssistantRuntime;
+  adapter: RemoteThreadListAdapter;
+};

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

@@ -3,7 +3,7 @@
 import { useState, useEffect, useMemo } from "react";
 import { BaseAssistantRuntimeCore } from "../core/BaseAssistantRuntimeCore";
 import { RemoteThreadListThreadListRuntimeCore } from "./RemoteThreadListThreadListRuntimeCore";
-import { RemoteThreadListAdapter } from "./types";
+import { RemoteThreadListOptions } from "./types";
 import { AssistantRuntimeImpl } from "../../internal";
 import { AssistantRuntimeCore } from "../core/AssistantRuntimeCore";
 
@@ -13,10 +13,10 @@ class RemoteThreadListRuntimeCore
 {
   public readonly threads;
 
-  constructor(adapter: RemoteThreadListAdapter) {
+  constructor(options: RemoteThreadListOptions) {
     super();
     this.threads = new RemoteThreadListThreadListRuntimeCore(
-      adapter,
+      options,
       this._contextProvider,
     );
   }
@@ -27,12 +27,12 @@ class RemoteThreadListRuntimeCore
 }
 
 export const useRemoteThreadListRuntime = (
-  adapter: RemoteThreadListAdapter,
+  options: RemoteThreadListOptions,
 ) => {
-  const [runtime] = useState(() => new RemoteThreadListRuntimeCore(adapter));
+  const [runtime] = useState(() => new RemoteThreadListRuntimeCore(options));
   useEffect(() => {
-    runtime.threads.__internal_setAdapter(adapter);
-    return runtime.threads.__internal_bindAdapter();
-  }, [runtime, adapter]);
+    runtime.threads.__internal_setOptions(options);
+    runtime.threads.__internal_load();
+  }, [runtime, options]);
   return useMemo(() => AssistantRuntimeImpl.create(runtime), [runtime]);
 };

package/src/utils/hooks/useOnResizeContent.tsx

@@ -11,31 +11,17 @@ export const useOnResizeContent = (callback: () => void) => {
         callbackRef();
       });
 
-      const mutationObserver = new MutationObserver((mutations) => {
-        for (const mutation of mutations) {
-          for (const node of mutation.addedNodes) {
-            if (node instanceof Element) {
-              resizeObserver.observe(node);
-            }
-          }
-
-          for (const node of mutation.removedNodes) {
-            if (node instanceof Element) {
-              resizeObserver.unobserve(node);
-            }
-          }
-        }
-
+      const mutationObserver = new MutationObserver(() => {
         callbackRef();
       });
 
       resizeObserver.observe(el);
-      mutationObserver.observe(el, { childList: true });
-
-      // Observe existing children
-      for (const child of el.children) {
-        resizeObserver.observe(child);
-      }
+      mutationObserver.observe(el, {
+        childList: true,
+        subtree: true,
+        attributes: true,
+        characterData: true,
+      });
 
       return () => {
         resizeObserver.disconnect();