@assistant-ui/react 0.11.35 → 0.11.37

package/src/context/react/AssistantApiContext.tsx

@@ -8,6 +8,7 @@ import {
   useMemo,
   useEffect,
 } from "react";
+import { useResource } from "@assistant-ui/tap/react";
 
 import { ToolUIApi, ToolUIState, ToolUIMeta } from "../../client/types/ToolUI";
 import {
@@ -32,8 +33,6 @@ import {
   AttachmentClientState,
 } from "../../client/types/Attachment";
 import { Unsubscribe } from "@assistant-ui/tap";
-import { ModelContextProvider } from "../../model-context";
-import { AssistantRuntime } from "../../legacy-runtime/runtime/AssistantRuntime";
 import {
   AssistantEvent,
   AssistantEventCallback,
@@ -50,6 +49,15 @@ import {
   AssistantClientProps,
   useAssistantClient,
 } from "../../client/AssistantClient";
+import { ToolsApi, ToolsMeta } from "../../client/types/Tools";
+import {
+  ModelContextApi,
+  ModelContextMeta,
+} from "../../client/types/ModelContext";
+import {
+  DerivedScopes,
+  DerivedScopesInput,
+} from "../../utils/tap-store/derived-scopes";
 
 export type AssistantState = {
   readonly threads: ThreadListClientState;
@@ -63,7 +71,7 @@ export type AssistantState = {
   readonly attachment: AttachmentClientState;
 };
 
-type AssistantApiField<
+export type AssistantApiField<
   TApi,
   TMeta extends { source: string | null; query: any },
 > = (() => TApi) & (TMeta | { source: null; query: Record<string, never> });
@@ -115,6 +123,8 @@ type AttachmentMeta = {
 export type AssistantApi = {
   threads: AssistantApiField<ThreadListClientApi, ThreadsMeta>;
   toolUIs: AssistantApiField<ToolUIApi, ToolUIMeta>;
+  tools: AssistantApiField<ToolsApi, ToolsMeta>;
+  modelContext: AssistantApiField<ModelContextApi, ModelContextMeta>;
   threadListItem: AssistantApiField<
     ThreadListItemClientApi,
     ThreadListItemMeta
@@ -132,11 +142,6 @@ export type AssistantApi = {
     event: AssistantEventSelector<TEvent>,
     callback: AssistantEventCallback<TEvent>,
   ): Unsubscribe;
-
-  // temp
-  registerModelContextProvider(provider: ModelContextProvider): void;
-  /** @internal */
-  __internal_getRuntime?(): AssistantRuntime;
 };
 
 export const createAssistantApiField = <
@@ -170,6 +175,22 @@ const AssistantApiContext = createContext<AssistantApi>({
       throw new Error("ToolUIs is only available inside <AssistantProvider />");
     },
   }),
+  tools: createAssistantApiField({
+    source: null,
+    query: {},
+    get: (): never => {
+      throw new Error("Tools is only available inside <AssistantProvider />");
+    },
+  }),
+  modelContext: createAssistantApiField({
+    source: null,
+    query: {},
+    get: (): never => {
+      throw new Error(
+        "ModelContext is only available inside <AssistantProvider />",
+      );
+    },
+  }),
   threadListItem: createAssistantApiField({
     source: null,
     query: {},
@@ -229,25 +250,47 @@ const AssistantApiContext = createContext<AssistantApi>({
     const { scope } = normalizeEventSelector(selector);
     throw new Error(`Event scope is not available in this component: ${scope}`);
   },
-
-  registerModelContextProvider: () => {
-    throw new Error(
-      "Registering model context providers is only available inside <AssistantProvider />",
-    );
-  },
 });
 
-const useAssistantApiImpl = (): AssistantApi => {
+export const useAssistantApiImpl = (): AssistantApi => {
   return useContext(AssistantApiContext);
 };
 
+/**
+ * Hook to extend the current AssistantApi with additional derived scope fields and special callbacks.
+ * This merges the derived fields with the existing API from context.
+ * Fields are automatically memoized based on source and query changes.
+ * Special callbacks (on, subscribe, flushSync) use the useEffectEvent pattern to always access latest values.
+ *
+ * @param scopes - Record of field names to DerivedScope resource elements, plus optional special callbacks
+ * @returns The merged AssistantApi
+ *
+ * @example
+ * ```tsx
+ * const api = useExtendedAssistantApi({
+ *   message: DerivedScope({
+ *     source: "root",
+ *     query: {},
+ *     get: () => messageApi,
+ *   }),
+ *   on: (selector, callback) => {
+ *     // Custom event filtering logic
+ *   },
+ * });
+ * ```
+ */
+export const useExtendedAssistantApi = (
+  scopes: DerivedScopesInput,
+): AssistantApi => {
+  const baseApi = useAssistantApiImpl();
+  const partialApi = useResource(DerivedScopes(scopes));
+  return useMemo(() => extendApi(baseApi, partialApi), [baseApi, partialApi]);
+};
+
 const useExtendedAssistantApiImpl = (
   config: AssistantClientProps,
 ): AssistantApi => {
-  const api = useAssistantApiImpl();
-  const api2 = useAssistantClient(config);
-  const extendedApi = useMemo(() => extendApi(api, api2), [api, api2]);
-  return extendedApi;
+  return useAssistantClient(config);
 };
 
 export function useAssistantApi(): AssistantApi;
@@ -293,7 +336,7 @@ const mergeFnsWithUnsubscribe = <TArgs extends Array<unknown>>(
   };
 };
 
-const extendApi = (
+export const extendApi = (
   api: AssistantApi,
   api2: Partial<AssistantApi>,
 ): AssistantApi => {
@@ -311,18 +354,15 @@ const extendApi = (
 };
 
 export const AssistantProvider: FC<
-  PropsWithChildren<{ api: Partial<AssistantApi>; devToolsVisible?: boolean }>
-> = ({ api: api2, children, devToolsVisible = true }) => {
-  const api = useAssistantApi();
-  const extendedApi = useMemo(() => extendApi(api, api2), [api, api2]);
-
+  PropsWithChildren<{ api: AssistantApi; devToolsVisible?: boolean }>
+> = ({ api, children, devToolsVisible = true }) => {
   useEffect(() => {
-    if (!devToolsVisible || !api2.subscribe) return undefined;
-    return DevToolsProviderApi.register(api2);
-  }, [api2, devToolsVisible]);
+    if (!devToolsVisible || !api.subscribe) return undefined;
+    return DevToolsProviderApi.register(api);
+  }, [api, devToolsVisible]);
 
   return (
-    <AssistantApiContext.Provider value={extendedApi}>
+    <AssistantApiContext.Provider value={api}>
       {/* TODO temporarily allow accessing viewport state from outside the viewport */}
       {/* TODO figure out if this behavior should be deprecated, since it is quite hacky */}
       <ThreadViewportProvider>{children}</ThreadViewportProvider>

package/src/context/react/index.ts

@@ -2,7 +2,11 @@
 // TODO createContextStoreHook does not work well with server-side nextjs bundler
 // use client necessary here for now
 
-export { useAssistantApi, type AssistantApi } from "./AssistantApiContext";
+export {
+  useAssistantApi,
+  useExtendedAssistantApi,
+  type AssistantApi,
+} from "./AssistantApiContext";
 export { useAssistantState } from "./hooks/useAssistantState";
 export { useAssistantEvent } from "./hooks/useAssistantEvent";
 

package/src/legacy-runtime/AssistantRuntimeProvider.tsx

@@ -1,11 +1,13 @@
 "use client";
 
 import { FC, memo, PropsWithChildren } from "react";
-import { AssistantProvider } from "../context/react/AssistantApiContext";
+import {
+  AssistantProvider,
+  useAssistantApi,
+} from "../context/react/AssistantApiContext";
 import { AssistantRuntime } from "./runtime/AssistantRuntime";
 import { AssistantRuntimeCore } from "./runtime-cores/core/AssistantRuntimeCore";
-import { useAssistantClient } from "../client/AssistantClient";
-import { ThreadListClient } from "./client/ThreadListRuntimeClient";
+import { RuntimeAdapter } from "./RuntimeAdapter";
 
 export namespace AssistantProvider {
   export type Props = PropsWithChildren<{
@@ -24,12 +26,8 @@ export const AssistantRuntimeProviderImpl: FC<AssistantProvider.Props> = ({
   children,
   runtime,
 }) => {
-  const api = useAssistantClient({
-    threads: ThreadListClient({
-      runtime: runtime.threads,
-    }),
-    registerModelContextProvider: runtime.registerModelContextProvider,
-    __internal_runtime: runtime,
+  const api = useAssistantApi({
+    threads: RuntimeAdapter(runtime),
   });
 
   const RenderComponent = getRenderComponent(runtime);

package/src/legacy-runtime/RuntimeAdapter.ts

@@ -0,0 +1,19 @@
+import { resource, tapEffect, tapInlineResource } from "@assistant-ui/tap";
+import type { AssistantRuntime } from "./runtime/AssistantRuntime";
+import { ThreadListClient } from "./client/ThreadListRuntimeClient";
+import { tapModelContext } from "../client/ModelContext";
+
+export const RuntimeAdapter = resource((runtime: AssistantRuntime) => {
+  const modelContext = tapModelContext();
+
+  tapEffect(() => {
+    return runtime.registerModelContextProvider(modelContext);
+  }, [runtime, modelContext]);
+
+  return tapInlineResource(
+    ThreadListClient({
+      runtime: runtime.threads,
+      __internal_assistantRuntime: runtime,
+    }),
+  );
+});

package/src/legacy-runtime/client/ThreadListRuntimeClient.ts

@@ -9,6 +9,7 @@ import {
   ThreadListClientState,
   ThreadListClientApi,
 } from "../../client/types/ThreadList";
+import type { AssistantRuntime } from "../runtime/AssistantRuntime";
 
 const ThreadListItemClientById = resource(
   ({ runtime, id }: { runtime: ThreadListRuntime; id: string }) => {
@@ -25,7 +26,13 @@ const ThreadListItemClientById = resource(
 );
 
 export const ThreadListClient = resource(
-  ({ runtime }: { runtime: ThreadListRuntime }) => {
+  ({
+    runtime,
+    __internal_assistantRuntime,
+  }: {
+    runtime: ThreadListRuntime;
+    __internal_assistantRuntime: AssistantRuntime;
+  }) => {
     const runtimeState = tapSubscribable(runtime);
 
     const main = tapInlineResource(
@@ -80,6 +87,8 @@ export const ThreadListClient = resource(
       switchToNewThread: () => {
         runtime.switchToNewThread();
       },
+
+      __internal_getAssistantRuntime: () => __internal_assistantRuntime,
     });
   },
 );

package/src/legacy-runtime/hooks/AssistantContext.ts

@@ -6,6 +6,8 @@ import type { ThreadListRuntime } from "../runtime/ThreadListRuntime";
 import { createStateHookForRuntime } from "../../context/react/utils/createStateHookForRuntime";
 
 /**
+ * @deprecated Use `useAssistantApi()` instead. See migration guide: https://docs.assistant-ui.com/docs/migrations/v0-12
+ *
  * Hook to access the AssistantRuntime from the current context.
  *
  * The AssistantRuntime provides access to the top-level assistant state and actions,
@@ -17,13 +19,21 @@ import { createStateHookForRuntime } from "../../context/react/utils/createState
  *
  * @example
  * ```tsx
+ * // Before:
  * function MyComponent() {
  *   const runtime = useAssistantRuntime();
- *
  *   const handleNewThread = () => {
  *     runtime.switchToNewThread();
  *   };
+ *   return <button onClick={handleNewThread}>New Thread</button>;
+ * }
  *
+ * // After:
+ * function MyComponent() {
+ *   const api = useAssistantApi();
+ *   const handleNewThread = () => {
+ *     api.threads().switchToNewThread();
+ *   };
  *   return <button onClick={handleNewThread}>New Thread</button>;
  * }
  * ```
@@ -38,7 +48,7 @@ export function useAssistantRuntime(options?: {
   optional?: boolean | undefined;
 }) {
   const api = useAssistantApi();
-  const runtime = api.__internal_getRuntime?.() ?? null;
+  const runtime = api.threads().__internal_getAssistantRuntime?.() ?? null;
 
   if (!runtime && !options?.optional) {
     throw new Error("AssistantRuntime is not available");
@@ -50,4 +60,8 @@ export function useAssistantRuntime(options?: {
 const useThreadListRuntime = (opt: {
   optional: boolean | undefined;
 }): ThreadListRuntime | null => useAssistantRuntime(opt)?.threads ?? null;
+
+/**
+ * @deprecated Use `useAssistantState(({ threads }) => threads)` instead. See migration guide: https://docs.assistant-ui.com/docs/migrations/v0-12
+ */
 export const useThreadList = createStateHookForRuntime(useThreadListRuntime);

package/src/legacy-runtime/hooks/AttachmentContext.ts

@@ -4,6 +4,9 @@ import { AttachmentRuntime } from "../runtime/AttachmentRuntime";
 import { createStateHookForRuntime } from "../../context/react/utils/createStateHookForRuntime";
 import { useAssistantApi, useAssistantState } from "../../context/react";
 
+/**
+ * @deprecated Use `useAssistantApi()` with `api.attachment()` instead. See migration guide: https://docs.assistant-ui.com/docs/migrations/v0-12
+ */
 export function useAttachmentRuntime(options?: {
   optional?: false | undefined;
 }): AttachmentRuntime;
@@ -80,6 +83,9 @@ export function useMessageAttachmentRuntime(options?: {
   return attachmentRuntime as AttachmentRuntime<"message">;
 }
 
+/**
+ * @deprecated Use `useAssistantState(({ attachment }) => attachment)` instead. See migration guide: https://docs.assistant-ui.com/docs/migrations/v0-12
+ */
 export const useAttachment = createStateHookForRuntime(useAttachmentRuntime);
 
 export const useThreadComposerAttachment = createStateHookForRuntime(

package/src/legacy-runtime/hooks/ComposerContext.ts

@@ -5,6 +5,8 @@ import { ComposerRuntime } from "../runtime/ComposerRuntime";
 import { createStateHookForRuntime } from "../../context/react/utils/createStateHookForRuntime";
 
 /**
+ * @deprecated Use `useAssistantApi()` with `api.composer()` instead. See migration guide: https://docs.assistant-ui.com/docs/migrations/v0-12
+ *
  * Hook to access the ComposerRuntime from the current context.
  *
  * The ComposerRuntime provides access to composer state and actions for message
@@ -18,21 +20,42 @@ import { createStateHookForRuntime } from "../../context/react/utils/createState
  *
  * @example
  * ```tsx
+ * // Before:
  * function ComposerActions() {
  *   const runtime = useComposerRuntime();
- *
  *   const handleSend = () => {
  *     if (runtime.getState().canSend) {
  *       runtime.send();
  *     }
  *   };
- *
  *   const handleCancel = () => {
  *     if (runtime.getState().canCancel) {
  *       runtime.cancel();
  *     }
  *   };
+ *   return (
+ *     <div>
+ *       <button onClick={handleSend}>Send</button>
+ *       <button onClick={handleCancel}>Cancel</button>
+ *     </div>
+ *   );
+ * }
  *
+ * // After:
+ * function ComposerActions() {
+ *   const api = useAssistantApi();
+ *   const canSend = useAssistantState(({ composer }) => composer.canSend);
+ *   const canCancel = useAssistantState(({ composer }) => composer.canCancel);
+ *   const handleSend = () => {
+ *     if (canSend) {
+ *       api.composer().send();
+ *     }
+ *   };
+ *   const handleCancel = () => {
+ *     if (canCancel) {
+ *       api.composer().cancel();
+ *     }
+ *   };
  *   return (
  *     <div>
  *       <button onClick={handleSend}>Send</button>
@@ -64,6 +87,8 @@ export function useComposerRuntime(options?: {
 }
 
 /**
+ * @deprecated Use `useAssistantState(({ composer }) => composer)` instead. See migration guide: https://docs.assistant-ui.com/docs/migrations/v0-12
+ *
  * Hook to access the current composer state.
  *
  * This hook provides reactive access to the composer's state, including text content,
@@ -74,11 +99,25 @@ export function useComposerRuntime(options?: {
  *
  * @example
  * ```tsx
+ * // Before:
  * function ComposerStatus() {
  *   const text = useComposer((state) => state.text);
  *   const canSend = useComposer((state) => state.canSend);
  *   const attachmentCount = useComposer((state) => state.attachments.length);
+ *   return (
+ *     <div>
+ *       Text: {text.length} chars,
+ *       Attachments: {attachmentCount},
+ *       Can send: {canSend}
+ *     </div>
+ *   );
+ * }
  *
+ * // After:
+ * function ComposerStatus() {
+ *   const text = useAssistantState(({ composer }) => composer.text);
+ *   const canSend = useAssistantState(({ composer }) => composer.canSend);
+ *   const attachmentCount = useAssistantState(({ composer }) => composer.attachments.length);
  *   return (
  *     <div>
  *       Text: {text.length} chars,

package/src/legacy-runtime/hooks/MessageContext.ts

@@ -6,6 +6,8 @@ import { createStateHookForRuntime } from "../../context/react/utils/createState
 import { EditComposerRuntime } from "../runtime";
 
 /**
+ * @deprecated Use `useAssistantApi()` with `api.message()` instead. See migration guide: https://docs.assistant-ui.com/docs/migrations/v0-12
+ *
  * Hook to access the MessageRuntime from the current context.
  *
  * The MessageRuntime provides access to message-level state and actions,
@@ -17,17 +19,32 @@ import { EditComposerRuntime } from "../runtime";
  *
  * @example
  * ```tsx
+ * // Before:
  * function MessageActions() {
  *   const runtime = useMessageRuntime();
- *
  *   const handleReload = () => {
  *     runtime.reload();
  *   };
- *
  *   const handleEdit = () => {
  *     runtime.startEdit();
  *   };
+ *   return (
+ *     <div>
+ *       <button onClick={handleReload}>Reload</button>
+ *       <button onClick={handleEdit}>Edit</button>
+ *     </div>
+ *   );
+ * }
  *
+ * // After:
+ * function MessageActions() {
+ *   const api = useAssistantApi();
+ *   const handleReload = () => {
+ *     api.message().reload();
+ *   };
+ *   const handleEdit = () => {
+ *     api.message().startEdit();
+ *   };
  *   return (
  *     <div>
  *       <button onClick={handleReload}>Reload</button>
@@ -59,6 +76,8 @@ export function useMessageRuntime(options?: {
 }
 
 /**
+ * @deprecated Use `useAssistantState(({ message }) => message)` instead. See migration guide: https://docs.assistant-ui.com/docs/migrations/v0-12
+ *
  * Hook to access the current message state.
  *
  * This hook provides reactive access to the message's state, including content,
@@ -69,11 +88,23 @@ export function useMessageRuntime(options?: {
  *
  * @example
  * ```tsx
+ * // Before:
  * function MessageContent() {
  *   const role = useMessage((state) => state.role);
  *   const content = useMessage((state) => state.content);
  *   const isLoading = useMessage((state) => state.status.type === "running");
+ *   return (
+ *     <div className={`message-${role}`}>
+ *       {isLoading ? "Loading..." : content.map(part => part.text).join("")}
+ *     </div>
+ *   );
+ * }
  *
+ * // After:
+ * function MessageContent() {
+ *   const role = useAssistantState(({ message }) => message.role);
+ *   const content = useAssistantState(({ message }) => message.content);
+ *   const isLoading = useAssistantState(({ message }) => message.status.type === "running");
  *   return (
  *     <div className={`message-${role}`}>
  *       {isLoading ? "Loading..." : content.map(part => part.text).join("")}
@@ -87,6 +118,10 @@ export const useMessage = createStateHookForRuntime(useMessageRuntime);
 const useEditComposerRuntime = (opt: {
   optional: boolean | undefined;
 }): EditComposerRuntime | null => useMessageRuntime(opt)?.composer ?? null;
+
+/**
+ * @deprecated Use `useAssistantState(({ message }) => message.composer)` instead. See migration guide: https://docs.assistant-ui.com/docs/migrations/v0-12
+ */
 export const useEditComposer = createStateHookForRuntime(
   useEditComposerRuntime,
 );

package/src/legacy-runtime/hooks/MessagePartContext.ts

@@ -4,6 +4,9 @@ import { MessagePartRuntime } from "../runtime/MessagePartRuntime";
 import { createStateHookForRuntime } from "../../context/react/utils/createStateHookForRuntime";
 import { useAssistantApi, useAssistantState } from "../../context/react";
 
+/**
+ * @deprecated Use `useAssistantApi()` with `api.part()` instead. See migration guide: https://docs.assistant-ui.com/docs/migrations/v0-12
+ */
 export function useMessagePartRuntime(options?: {
   optional?: false | undefined;
 }): MessagePartRuntime;
@@ -23,4 +26,7 @@ export function useMessagePartRuntime(options?: {
   return runtime;
 }
 
+/**
+ * @deprecated Use `useAssistantState(({ part }) => part)` instead. See migration guide: https://docs.assistant-ui.com/docs/migrations/v0-12
+ */
 export const useMessagePart = createStateHookForRuntime(useMessagePartRuntime);

package/src/legacy-runtime/hooks/ThreadContext.ts

@@ -12,6 +12,8 @@ import {
 } from "../../context/react";
 
 /**
+ * @deprecated Use `useAssistantApi()` with `api.thread()` instead. See migration guide: https://docs.assistant-ui.com/docs/migrations/v0-12
+ *
  * Hook to access the ThreadRuntime from the current context.
  *
  * The ThreadRuntime provides access to thread-level state and actions,
@@ -23,13 +25,21 @@ import {
  *
  * @example
  * ```tsx
+ * // Before:
  * function MyComponent() {
  *   const runtime = useThreadRuntime();
- *
  *   const handleSendMessage = (text: string) => {
  *     runtime.append({ role: "user", content: [{ type: "text", text }] });
  *   };
+ *   return <button onClick={() => handleSendMessage("Hello!")}>Send</button>;
+ * }
  *
+ * // After:
+ * function MyComponent() {
+ *   const api = useAssistantApi();
+ *   const handleSendMessage = (text: string) => {
+ *     api.thread().append({ role: "user", content: [{ type: "text", text }] });
+ *   };
  *   return <button onClick={() => handleSendMessage("Hello!")}>Send</button>;
  * }
  * ```
@@ -52,6 +62,8 @@ export function useThreadRuntime(options?: { optional?: boolean | undefined }) {
 }
 
 /**
+ * @deprecated Use `useAssistantState(({ thread }) => thread)` instead. See migration guide: https://docs.assistant-ui.com/docs/migrations/v0-12
+ *
  * Hook to access the current thread state.
  *
  * This hook provides reactive access to the thread's state, including messages,
@@ -62,10 +74,17 @@ export function useThreadRuntime(options?: { optional?: boolean | undefined }) {
  *
  * @example
  * ```tsx
+ * // Before:
  * function ThreadStatus() {
  *   const isRunning = useThread((state) => state.isRunning);
  *   const messageCount = useThread((state) => state.messages.length);
+ *   return <div>Running: {isRunning}, Messages: {messageCount}</div>;
+ * }
  *
+ * // After:
+ * function ThreadStatus() {
+ *   const isRunning = useAssistantState(({ thread }) => thread.isRunning);
+ *   const messageCount = useAssistantState(({ thread }) => thread.messages.length);
  *   return <div>Running: {isRunning}, Messages: {messageCount}</div>;
  * }
  * ```
@@ -75,10 +94,17 @@ export const useThread = createStateHookForRuntime(useThreadRuntime);
 const useThreadComposerRuntime = (opt: {
   optional: boolean | undefined;
 }): ThreadComposerRuntime | null => useThreadRuntime(opt)?.composer ?? null;
+
+/**
+ * @deprecated Use `useAssistantState(({ thread }) => thread.composer)` instead. See migration guide: https://docs.assistant-ui.com/docs/migrations/v0-12
+ */
 export const useThreadComposer = createStateHookForRuntime(
   useThreadComposerRuntime,
 );
 
+/**
+ * @deprecated Use `useAssistantState(({ thread }) => thread.modelContext)` instead. See migration guide: https://docs.assistant-ui.com/docs/migrations/v0-12
+ */
 export function useThreadModelContext(options?: {
   optional?: false | undefined;
 }): ModelContext;

package/src/legacy-runtime/hooks/ThreadListItemContext.ts

@@ -4,6 +4,9 @@ import { ThreadListItemRuntime } from "../runtime/ThreadListItemRuntime";
 import { createStateHookForRuntime } from "../../context/react/utils/createStateHookForRuntime";
 import { useAssistantApi, useAssistantState } from "../../context/react";
 
+/**
+ * @deprecated Use `useAssistantApi()` with `api.threadListItem()` instead. See migration guide: https://docs.assistant-ui.com/docs/migrations/v0-12
+ */
 export function useThreadListItemRuntime(options?: {
   optional?: false | undefined;
 }): ThreadListItemRuntime;
@@ -25,6 +28,9 @@ export function useThreadListItemRuntime(options?: {
   return runtime;
 }
 
+/**
+ * @deprecated Use `useAssistantState(({ threadListItem }) => threadListItem)` instead. See migration guide: https://docs.assistant-ui.com/docs/migrations/v0-12
+ */
 export const useThreadListItem = createStateHookForRuntime(
   useThreadListItemRuntime,
 );

package/src/legacy-runtime/runtime-cores/core/AssistantRuntimeCore.tsx

@@ -7,6 +7,7 @@ export type AssistantRuntimeCore = {
   readonly threads: ThreadListRuntimeCore;
 
   registerModelContextProvider: (provider: ModelContextProvider) => Unsubscribe;
+  getModelContextProvider: () => ModelContextProvider;
 
   /**
    * EXPERIMENTAL: A component that is rendered inside the AssistantRuntimeProvider.

package/src/legacy-runtime/runtime-cores/core/BaseAssistantRuntimeCore.tsx

@@ -13,4 +13,8 @@ export abstract class BaseAssistantRuntimeCore implements AssistantRuntimeCore {
   ): Unsubscribe {
     return this._contextProvider.registerModelContextProvider(provider);
   }
+
+  public getModelContextProvider(): ModelContextProvider {
+    return this._contextProvider;
+  }
 }

package/src/legacy-runtime/runtime-cores/external-store/ExternalStoreThreadListRuntimeCore.tsx

@@ -212,8 +212,10 @@ export class ExternalStoreThreadListRuntimeCore
     onDelete(threadId);
   }
 
-  public initialize(): never {
-    throw new Error("Method not implemented.");
+  public initialize(
+    threadId: string,
+  ): Promise<{ remoteId: string; externalId: string | undefined }> {
+    return Promise.resolve({ remoteId: threadId, externalId: undefined });
   }
 
   public generateTitle(): never {

package/src/legacy-runtime/runtime-cores/external-store/ExternalStoreThreadRuntimeCore.tsx

@@ -162,7 +162,13 @@ export class ExternalStoreThreadRuntimeCore
             if (!store.convertMessage) return m;
 
             const isLast = idx === store.messages!.length - 1;
-            const autoStatus = getAutoStatus(isLast, isRunning, false, false);
+            const autoStatus = getAutoStatus(
+              isLast,
+              isRunning,
+              false,
+              false,
+              undefined,
+            );
 
             if (
               cache &&