@assistant-ui/react 0.7.38 → 0.7.39

package/src/primitives/assistantModal/AssistantModalAnchor.tsx

@@ -1,11 +1,11 @@
 "use client";
 
-import { ComponentPropsWithoutRef, ElementRef, forwardRef } from "react";
+import { ComponentPropsWithoutRef, ComponentRef, forwardRef } from "react";
 import * as PopoverPrimitive from "@radix-ui/react-popover";
 import { ScopedProps, usePopoverScope } from "./scope";
 
 export namespace AssistantModalPrimitiveAnchor {
-  export type Element = ElementRef<typeof PopoverPrimitive.Anchor>;
+  export type Element = ComponentRef<typeof PopoverPrimitive.Anchor>;
   export type Props = ComponentPropsWithoutRef<typeof PopoverPrimitive.Anchor>;
 }
 

package/src/primitives/assistantModal/AssistantModalContent.tsx

@@ -1,12 +1,12 @@
 "use client";
 
-import { ComponentPropsWithoutRef, ElementRef, forwardRef } from "react";
+import { ComponentPropsWithoutRef, ComponentRef, forwardRef } from "react";
 import * as PopoverPrimitive from "@radix-ui/react-popover";
 import { ScopedProps, usePopoverScope } from "./scope";
 import { composeEventHandlers } from "@radix-ui/primitive";
 
 export namespace AssistantModalPrimitiveContent {
-  export type Element = ElementRef<typeof PopoverPrimitive.Content>;
+  export type Element = ComponentRef<typeof PopoverPrimitive.Content>;
   export type Props = ComponentPropsWithoutRef<
     typeof PopoverPrimitive.Content
   > & {

package/src/primitives/assistantModal/AssistantModalTrigger.tsx

@@ -1,9 +1,9 @@
-import { ComponentPropsWithoutRef, ElementRef, forwardRef } from "react";
+import { ComponentPropsWithoutRef, ComponentRef, forwardRef } from "react";
 import * as PopoverPrimitive from "@radix-ui/react-popover";
 import { ScopedProps, usePopoverScope } from "./scope";
 
 export namespace AssistantModalPrimitiveTrigger {
-  export type Element = ElementRef<typeof PopoverPrimitive.Trigger>;
+  export type Element = ComponentRef<typeof PopoverPrimitive.Trigger>;
   export type Props = ComponentPropsWithoutRef<typeof PopoverPrimitive.Trigger>;
 }
 

package/src/primitives/assistantModal/scope.tsx

@@ -1,5 +1,5 @@
 import * as PopoverPrimitive from "@radix-ui/react-popover";
 import type { Scope } from "@radix-ui/react-context";
 
-export type ScopedProps<P> = P & { __scopeAssistantModal?: Scope };
 export const usePopoverScope = PopoverPrimitive.createPopoverScope();
+export type ScopedProps<P> = P & { __scopeAssistantModal?: Scope };

package/src/primitives/attachment/AttachmentRoot.tsx

@@ -1,10 +1,10 @@
 import { Primitive } from "@radix-ui/react-primitive";
-import { ComponentPropsWithoutRef, ElementRef, forwardRef } from "react";
+import { ComponentPropsWithoutRef, ComponentRef, forwardRef } from "react";
 
 type PrimitiveDivProps = ComponentPropsWithoutRef<typeof Primitive.div>;
 
 export namespace AttachmentPrimitiveRoot {
-  export type Element = ElementRef<typeof Primitive.div>;
+  export type Element = ComponentRef<typeof Primitive.div>;
   export type Props = PrimitiveDivProps;
 }
 

package/src/primitives/attachment/AttachmentThumb.tsx

@@ -1,13 +1,13 @@
 "use client";
 
-import { ComponentPropsWithoutRef, forwardRef, type ElementRef } from "react";
+import { ComponentPropsWithoutRef, forwardRef, type ComponentRef } from "react";
 import { useAttachment } from "../../context/react/AttachmentContext";
 import { Primitive } from "@radix-ui/react-primitive";
 
 type PrimitiveDivProps = ComponentPropsWithoutRef<typeof Primitive.div>;
 
 export namespace AttachmentPrimitiveThumb {
-  export type Element = ElementRef<typeof Primitive.div>;
+  export type Element = ComponentRef<typeof Primitive.div>;
   export type Props = PrimitiveDivProps;
 }
 

package/src/primitives/branchPicker/BranchPickerRoot.tsx

@@ -1,9 +1,9 @@
 import { Primitive } from "@radix-ui/react-primitive";
-import { type ElementRef, forwardRef, ComponentPropsWithoutRef } from "react";
+import { type ComponentRef, forwardRef, ComponentPropsWithoutRef } from "react";
 import { If } from "../message";
 
 export namespace BranchPickerPrimitiveRoot {
-  export type Element = ElementRef<typeof Primitive.div>;
+  export type Element = ComponentRef<typeof Primitive.div>;
   export type Props = ComponentPropsWithoutRef<typeof Primitive.div> & {
     hideWhenSingleBranch?: boolean | undefined;
   };

package/src/primitives/composer/ComposerRoot.tsx

@@ -3,7 +3,7 @@
 import { composeEventHandlers } from "@radix-ui/primitive";
 import { Primitive } from "@radix-ui/react-primitive";
 import {
-  type ElementRef,
+  type ComponentRef,
   type FormEvent,
   forwardRef,
   ComponentPropsWithoutRef,
@@ -11,7 +11,7 @@ import {
 import { useComposerSend } from "../../primitive-hooks/composer/useComposerSend";
 
 export namespace ComposerPrimitiveRoot {
-  export type Element = ElementRef<typeof Primitive.form>;
+  export type Element = ComponentRef<typeof Primitive.form>;
   export type Props = ComponentPropsWithoutRef<typeof Primitive.form>;
 }
 

package/src/primitives/contentPart/ContentPartImage.tsx

@@ -1,11 +1,11 @@
 "use client";
 
 import { Primitive } from "@radix-ui/react-primitive";
-import { type ElementRef, forwardRef, ComponentPropsWithoutRef } from "react";
+import { type ComponentRef, forwardRef, ComponentPropsWithoutRef } from "react";
 import { useContentPartImage } from "../../primitive-hooks/contentPart/useContentPartImage";
 
 export namespace ContentPartPrimitiveImage {
-  export type Element = ElementRef<typeof Primitive.img>;
+  export type Element = ComponentRef<typeof Primitive.img>;
   export type Props = ComponentPropsWithoutRef<typeof Primitive.img>;
 }
 

package/src/primitives/contentPart/ContentPartText.tsx

@@ -2,7 +2,7 @@
 
 import { Primitive } from "@radix-ui/react-primitive";
 import {
-  type ElementRef,
+  type ComponentRef,
   forwardRef,
   ComponentPropsWithoutRef,
   ElementType,
@@ -11,7 +11,7 @@ import { useContentPartText } from "../../primitive-hooks/contentPart/useContent
 import { useSmooth } from "../../utils/smooth/useSmooth";
 
 export namespace ContentPartPrimitiveText {
-  export type Element = ElementRef<typeof Primitive.span>;
+  export type Element = ComponentRef<typeof Primitive.span>;
   export type Props = Omit<
     ComponentPropsWithoutRef<typeof Primitive.span>,
     "children" | "asChild"

package/src/primitives/message/MessageRoot.tsx

@@ -2,7 +2,7 @@
 
 import { Primitive } from "@radix-ui/react-primitive";
 import {
-  type ElementRef,
+  type ComponentRef,
   forwardRef,
   ComponentPropsWithoutRef,
   useCallback,
@@ -40,7 +40,7 @@ const useIsHoveringRef = () => {
 };
 
 export namespace MessagePrimitiveRoot {
-  export type Element = ElementRef<typeof Primitive.div>;
+  export type Element = ComponentRef<typeof Primitive.div>;
   export type Props = ComponentPropsWithoutRef<typeof Primitive.div>;
 }
 

package/src/primitives/thread/ThreadRoot.tsx

@@ -1,8 +1,8 @@
 import { Primitive } from "@radix-ui/react-primitive";
-import { type ElementRef, forwardRef, ComponentPropsWithoutRef } from "react";
+import { type ComponentRef, forwardRef, ComponentPropsWithoutRef } from "react";
 
 export namespace ThreadPrimitiveRoot {
-  export type Element = ElementRef<typeof Primitive.div>;
+  export type Element = ComponentRef<typeof Primitive.div>;
   export type Props = ComponentPropsWithoutRef<typeof Primitive.div>;
 }
 

package/src/primitives/thread/ThreadViewport.tsx

@@ -2,11 +2,11 @@
 
 import { useComposedRefs } from "@radix-ui/react-compose-refs";
 import { Primitive } from "@radix-ui/react-primitive";
-import { type ElementRef, forwardRef, ComponentPropsWithoutRef } from "react";
+import { type ComponentRef, forwardRef, ComponentPropsWithoutRef } from "react";
 import { useThreadViewportAutoScroll } from "../../primitive-hooks/thread/useThreadViewportAutoScroll";
 
 export namespace ThreadPrimitiveViewport {
-  export type Element = ElementRef<typeof Primitive.div>;
+  export type Element = ComponentRef<typeof Primitive.div>;
   export type Props = ComponentPropsWithoutRef<typeof Primitive.div> &
     useThreadViewportAutoScroll.Options;
 }

package/src/primitives/threadListItem/ThreadListItemRoot.tsx

@@ -1,13 +1,13 @@
 "use client";
 
 import { Primitive } from "@radix-ui/react-primitive";
-import { type ElementRef, forwardRef, ComponentPropsWithoutRef } from "react";
+import { type ComponentRef, forwardRef, ComponentPropsWithoutRef } from "react";
 import { useThreadListItem } from "../../context/react/ThreadListItemContext";
 
 type PrimitiveDivProps = ComponentPropsWithoutRef<typeof Primitive.div>;
 
 export namespace ThreadListItemPrimitiveRoot {
-  export type Element = ElementRef<typeof Primitive.div>;
+  export type Element = ComponentRef<typeof Primitive.div>;
   export type Props = PrimitiveDivProps;
 }
 

package/src/runtimes/local/LocalThreadListRuntimeCore.tsx

@@ -132,11 +132,11 @@ export class LocalThreadListRuntimeCore implements ThreadListRuntimeCore {
     // newState
     switch (newState) {
       case "regular":
-        this._threadIds = [...this._threadIds, data.threadId];
+        this._threadIds = [data.threadId, ...this._threadIds];
         break;
 
       case "archived":
-        this._archivedThreadIds = [...this._archivedThreadIds, data.threadId];
+        this._archivedThreadIds = [data.threadId, ...this._archivedThreadIds];
         break;
 
       case "deleted":

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

@@ -1,6 +1,15 @@
 "use client";
 
-import { FC, useCallback, useRef, useEffect, memo, useMemo } from "react";
+import {
+  FC,
+  useCallback,
+  useRef,
+  useEffect,
+  memo,
+  useMemo,
+  PropsWithChildren,
+  ComponentType,
+} from "react";
 import { UseBoundStore, StoreApi, create } from "zustand";
 import { useAssistantRuntime } from "../../context";
 import { ThreadListItemRuntimeProvider } from "../../context/providers/ThreadListItemRuntimeProvider";
@@ -104,31 +113,38 @@ export class RemoteThreadListHookInstanceManager extends BaseSubscribable {
     return null;
   };
 
-  private _OuterActiveThreadProvider: FC<{ threadId: string }> = memo(
-    ({ threadId }) => {
-      const assistantRuntime = useAssistantRuntime();
-      const threadListItemRuntime = useMemo(
-        () => assistantRuntime.threadList.getItemById(threadId),
-        [assistantRuntime, threadId],
-      );
-
-      return (
-        <ThreadListItemRuntimeProvider runtime={threadListItemRuntime}>
+  private _OuterActiveThreadProvider: FC<{
+    threadId: string;
+    provider: ComponentType<PropsWithChildren>;
+  }> = memo(({ threadId, provider: Provider }) => {
+    const assistantRuntime = useAssistantRuntime();
+    const threadListItemRuntime = useMemo(
+      () => assistantRuntime.threadList.getItemById(threadId),
+      [assistantRuntime, threadId],
+    );
+
+    return (
+      <ThreadListItemRuntimeProvider runtime={threadListItemRuntime}>
+        <Provider>
           <this._InnerActiveThreadProvider />
-        </ThreadListItemRuntimeProvider>
-      );
-    },
-  );
-
-  public __internal_RenderThreadRuntimes: FC = () => {
+        </Provider>
+      </ThreadListItemRuntimeProvider>
+    );
+  });
+
+  public __internal_RenderThreadRuntimes: FC<{
+    provider: ComponentType<PropsWithChildren>;
+  }> = ({ provider }) => {
     this.useAliveThreadsKeysChanged(); // trigger re-render on alive threads change
 
-    return [
-      ...this.instances
-        .keys()
-        .map((threadId) => (
-          <this._OuterActiveThreadProvider key={threadId} threadId={threadId} />
-        )),
-    ];
+    return this.instances
+      .keys()
+      .map((threadId) => (
+        <this._OuterActiveThreadProvider
+          key={threadId}
+          threadId={threadId}
+          provider={provider}
+        />
+      ));
   };
 }

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

@@ -2,14 +2,17 @@
 
 import { ThreadListRuntimeCore } from "../core/ThreadListRuntimeCore";
 import { generateId } from "../../internal";
-import { RemoteThreadListAdapter } from "./types";
+import {
+  RemoteThreadInitializeResponse,
+  RemoteThreadListAdapter,
+} from "./types";
 import { RemoteThreadListHookInstanceManager } from "./RemoteThreadListHookInstanceManager";
 import { BaseSubscribable } from "./BaseSubscribable";
 import { EMPTY_THREAD_CORE } from "./EMPTY_THREAD_CORE";
 import { OptimisticState } from "./OptimisticState";
 import { FC, Fragment, useEffect, useId } from "react";
 import { create } from "zustand";
-import { CloudInitializeResponse } from "./cloud/CloudContext";
+import { AssistantStream, AssistantMessageStream } from "assistant-stream";
 
 type RemoteThreadData =
   | {
@@ -128,10 +131,9 @@ export class RemoteThreadListThreadListRuntimeCore
   implements ThreadListRuntimeCore
 {
   private _adapter!: RemoteThreadListAdapter;
-  private _disposeOldAdapter?: () => void;
   private readonly _hookManager: RemoteThreadListHookInstanceManager;
 
-  private readonly _loadThreadsPromise: Promise<void>;
+  private _loadThreadsPromise: Promise<void> | undefined;
 
   private _mainThreadId!: string;
   private readonly _state = new OptimisticState<RemoteThreadState>({
@@ -144,6 +146,69 @@ export class RemoteThreadListThreadListRuntimeCore
   });
 
   public getLoadThreadsPromise() {
+    // TODO this needs to be cached in case this promise is loaded during suspense
+    if (!this._loadThreadsPromise) {
+      this._loadThreadsPromise = this._state
+        .optimisticUpdate({
+          execute: () => this._adapter.list(),
+          loading: (state) => {
+            return {
+              ...state,
+              isLoading: true,
+            };
+          },
+          then: (state, l) => {
+            const newThreadIds = [];
+            const newArchivedThreadIds = [];
+            const newThreadIdMap = {} as Record<string, THREAD_MAPPING_ID>;
+            const newThreadData = {} as Record<
+              THREAD_MAPPING_ID,
+              RemoteThreadData
+            >;
+
+            for (const thread of l.threads) {
+              switch (thread.status) {
+                case "regular":
+                  newThreadIds.push(thread.remoteId);
+                  break;
+                case "archived":
+                  newArchivedThreadIds.push(thread.remoteId);
+                  break;
+                default: {
+                  const _exhaustiveCheck: never = thread.status;
+                  throw new Error(`Unsupported state: ${_exhaustiveCheck}`);
+                }
+              }
+
+              const mappingId = createThreadMappingId(thread.remoteId);
+              newThreadIdMap[thread.remoteId] = mappingId;
+              newThreadData[mappingId] = {
+                threadId: thread.remoteId,
+                remoteId: thread.remoteId,
+                externalId: thread.externalId,
+                status: thread.status,
+                title: thread.title,
+              };
+            }
+
+            return {
+              ...state,
+              threadIds: newThreadIds,
+              archivedThreadIds: newArchivedThreadIds,
+              threadIdMap: {
+                ...state.threadIdMap,
+                ...newThreadIdMap,
+              },
+              threadData: {
+                ...state.threadData,
+                ...newThreadData,
+              },
+            };
+          },
+        })
+        .then(() => {});
+    }
+
     return this._loadThreadsPromise;
   }
 
@@ -159,66 +224,6 @@ export class RemoteThreadListThreadListRuntimeCore
     }));
     this.__internal_setAdapter(adapter);
 
-    this._loadThreadsPromise = this._state
-      .optimisticUpdate({
-        execute: () => adapter.list(),
-        loading: (state) => {
-          return {
-            ...state,
-            isLoading: true,
-          };
-        },
-        then: (state, l) => {
-          const newThreadIds = [];
-          const newArchivedThreadIds = [];
-          const newThreadIdMap = {} as Record<string, THREAD_MAPPING_ID>;
-          const newThreadData = {} as Record<
-            THREAD_MAPPING_ID,
-            RemoteThreadData
-          >;
-
-          for (const thread of l.threads) {
-            switch (thread.status) {
-              case "regular":
-                newThreadIds.push(thread.remoteId);
-                break;
-              case "archived":
-                newArchivedThreadIds.push(thread.remoteId);
-                break;
-              default: {
-                const _exhaustiveCheck: never = thread.status;
-                throw new Error(`Unsupported state: ${_exhaustiveCheck}`);
-              }
-            }
-
-            const mappingId = createThreadMappingId(thread.remoteId);
-            newThreadIdMap[thread.remoteId] = mappingId;
-            newThreadData[mappingId] = {
-              threadId: thread.remoteId,
-              remoteId: thread.remoteId,
-              externalId: thread.externalId,
-              status: thread.status,
-              title: thread.title,
-            };
-          }
-
-          return {
-            ...state,
-            threadIds: newThreadIds,
-            archivedThreadIds: newArchivedThreadIds,
-            threadIdMap: {
-              ...state.threadIdMap,
-              ...newThreadIdMap,
-            },
-            threadData: {
-              ...state.threadData,
-              ...newThreadData,
-            },
-          };
-        },
-      })
-      .then(() => {});
-
     this.switchToNewThread();
   }
 
@@ -228,8 +233,6 @@ export class RemoteThreadListThreadListRuntimeCore
     if (this._adapter === adapter) return;
 
     this._adapter = adapter;
-    this._disposeOldAdapter?.();
-    this._disposeOldAdapter = this._adapter.onInitialize(this._onInitialize);
 
     const Provider = adapter.unstable_Provider ?? Fragment;
     if (Provider !== this.useProvider.getState().Provider) {
@@ -239,6 +242,14 @@ export class RemoteThreadListThreadListRuntimeCore
     this._hookManager.setRuntimeHook(adapter.runtimeHook);
   }
 
+  public __internal_bindAdapter() {
+    this.getLoadThreadsPromise(); // begin loading on initial bind
+    return this._adapter.subscribe({
+      onInitialize: this._onInitialize,
+      onGenerateTitle: this._onGenerateTitle,
+    });
+  }
+
   public get threadIds() {
     return this._state.value.threadIds;
   }
@@ -321,16 +332,16 @@ export class RemoteThreadListThreadListRuntimeCore
     return this.switchToThread(threadId);
   }
 
-  private _onInitialize = async (task: Promise<CloudInitializeResponse>) => {
-    const threadId = this._state.value.newThreadId;
-    if (!threadId)
-      throw new Error(
-        "ThreadListAdapter called onInitialize before switching to new thread",
-      );
+  private _onInitialize = async (
+    threadId: string,
+    begin: () => Promise<RemoteThreadInitializeResponse>,
+  ) => {
+    if (this._state.value.newThreadId !== threadId)
+      throw new Error("The provided thread is already initialized");
 
     await this._state.optimisticUpdate({
       execute: () => {
-        return task;
+        return begin();
       },
       optimistic: (state) => {
         return updateStatusReducer(state, threadId, "regular");
@@ -339,7 +350,7 @@ export class RemoteThreadListThreadListRuntimeCore
         const data = getThreadData(state, threadId);
         if (!data) return state;
 
-        const mappingId = createThreadMappingId(remoteId);
+        const mappingId = createThreadMappingId(threadId);
         return {
           ...state,
           threadIdMap: {
@@ -359,6 +370,34 @@ export class RemoteThreadListThreadListRuntimeCore
     });
   };
 
+  private _onGenerateTitle = async (
+    remoteId: string,
+    begin: () => Promise<AssistantStream>,
+  ) => {
+    const data = this.getItemById(remoteId);
+    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 messageStream = AssistantMessageStream.fromAssistantStream(stream);
+    for await (const result of messageStream) {
+      const newTitle =
+        result.content.filter((c) => c.type === "text")[0]?.text ??
+        "New Thread";
+      const state = this._state.baseValue;
+      this._state.update({
+        ...state,
+        threadData: {
+          ...state.threadData,
+          [data.threadId]: {
+            ...data,
+            title: newTitle,
+          },
+        },
+      });
+    }
+  };
+
   public rename(threadIdOrRemoteId: string, newTitle: string): Promise<void> {
     const data = this.getItemById(threadIdOrRemoteId);
     if (!data) throw new Error("Thread not found");
@@ -467,12 +506,12 @@ export class RemoteThreadListThreadListRuntimeCore
     const { Provider } = this.useProvider();
 
     return (
-      <Provider>
-        {(boundIds.length === 0 || boundIds[0] === id) && (
-          // only render if the component is the first one mounted
-          <this._hookManager.__internal_RenderThreadRuntimes />
-        )}
-      </Provider>
+      (boundIds.length === 0 || boundIds[0] === id) && (
+        // only render if the component is the first one mounted
+        <this._hookManager.__internal_RenderThreadRuntimes
+          provider={Provider}
+        />
+      )
     );
   };
 }

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

@@ -1,10 +1,12 @@
 import { AssistantCloudAPI, AssistantCloudConfig } from "./AssistantCloudAPI";
 import { AssistantCloudAuthTokens } from "./AssistantCloudAuthTokens";
+import { AssistantCloudRuns } from "./AssistantCloudRuns";
 import { AssistantCloudThreads } from "./AssistantCloudThreads";
 
 export class AssistantCloud {
   public readonly threads;
   public readonly auth;
+  public readonly runs;
 
   constructor(config: AssistantCloudConfig) {
     const api = new AssistantCloudAPI(config);
@@ -12,5 +14,6 @@ export class AssistantCloud {
     this.auth = {
       tokens: new AssistantCloudAuthTokens(api),
     };
+    this.runs = new AssistantCloudRuns(api);
   }
 }