@assistant-ui/react 0.7.38 → 0.7.40

package/package.json

@@ -29,7 +29,7 @@
     "conversational-ui",
     "conversational-ai"
   ],
-  "version": "0.7.38",
+  "version": "0.7.40",
   "license": "MIT",
   "exports": {
     ".": {
@@ -80,13 +80,14 @@
     "class-variance-authority": "^0.7.1",
     "classnames": "^2.5.1",
     "json-schema": "^0.4.0",
-    "lucide-react": "^0.471.0",
+    "lucide-react": "^0.473.0",
     "nanoid": "^5.0.9",
     "react-textarea-autosize": "^8.5.7",
     "secure-json-parse": "^3.0.2",
     "zod": "^3.24.1",
     "zod-to-json-schema": "^3.24.1",
-    "zustand": "^5.0.3"
+    "zustand": "^5.0.3",
+    "assistant-stream": "^0.0.18"
   },
   "peerDependencies": {
     "@types/react": "*",
@@ -108,21 +109,17 @@
   },
   "devDependencies": {
     "@types/json-schema": "^7.0.15",
-    "@types/node": "^22.10.5",
+    "@types/node": "^22.10.7",
     "autoprefixer": "^10.4.20",
-    "esbuild-plugin-file-path-extensions": "^2.1.4",
     "eslint": "^9",
-    "eslint-config-next": "15.1.4",
-    "postcss": "^8.4.49",
-    "postcss-js": "^4.0.1",
-    "postcss-nested": "^7.0.2",
+    "eslint-config-next": "15.1.5",
+    "postcss": "^8.5.1",
     "tailwindcss": "^3.4.17",
     "tailwindcss-animate": "^1.0.7",
-    "tsup": "8.3.5",
     "tsx": "^4.19.2",
-    "@assistant-ui/tailwindcss-transformer": "0.1.0",
     "@assistant-ui/tsbuildutils": "^0.0.1",
-    "@assistant-ui/tsconfig": "0.0.0"
+    "@assistant-ui/tsconfig": "0.0.0",
+    "@assistant-ui/tailwindcss-transformer": "0.1.0"
   },
   "publishConfig": {
     "access": "public",

package/src/primitives/actionBar/ActionBarRoot.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { Primitive } from "@radix-ui/react-primitive";
-import { type ElementRef, forwardRef, ComponentPropsWithoutRef } from "react";
+import { type ComponentRef, forwardRef, ComponentPropsWithoutRef } from "react";
 import {
   useActionBarFloatStatus,
   HideAndFloatStatus,
@@ -11,7 +11,7 @@ import {
 type PrimitiveDivProps = ComponentPropsWithoutRef<typeof Primitive.div>;
 
 export namespace ActionBarPrimitiveRoot {
-  export type Element = ElementRef<typeof Primitive.div>;
+  export type Element = ComponentRef<typeof Primitive.div>;
   export type Props = PrimitiveDivProps & UseActionBarFloatStatusProps;
 }
 

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,13 +1,24 @@
 "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";
 import { useThreadListItem } from "../../context/react/ThreadListItemContext";
 import { ThreadRuntimeCore, ThreadRuntimeImpl } from "../../internal";
 import { BaseSubscribable } from "./BaseSubscribable";
-import { RemoteThreadListHook } from "./types";
+import { AssistantRuntime } from "../../api";
+
+type RemoteThreadListHook = () => AssistantRuntime;
 
 type RemoteThreadListHookInstance = {
   runtime?: ThreadRuntimeCore;
@@ -104,31 +115,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}
+        />
+      )
     );
   };
 }