@assistant-ui/react 0.7.45 → 0.7.47

package/src/api/ThreadListItemRuntime.ts

@@ -55,6 +55,18 @@ export class ThreadListItemRuntimeImpl implements ThreadListItemRuntime {
     private _threadListBinding: ThreadListRuntimeCoreBinding,
   ) {}
 
+  protected __internal_bindMethods() {
+    this.switchTo = this.switchTo.bind(this);
+    this.rename = this.rename.bind(this);
+    this.archive = this.archive.bind(this);
+    this.unarchive = this.unarchive.bind(this);
+    this.delete = this.delete.bind(this);
+    this.initialize = this.initialize.bind(this);
+    this.subscribe = this.subscribe.bind(this);
+    this.unstable_on = this.unstable_on.bind(this);
+    this.getState = this.getState.bind(this);
+  }
+
   public getState(): ThreadListItemState {
     return this._core.getState();
   }

package/src/api/ThreadListRuntime.ts

@@ -116,6 +116,17 @@ export class ThreadListRuntimeImpl implements ThreadListRuntime {
     );
   }
 
+  protected __internal_bindMethods() {
+    this.switchToThread = this.switchToThread.bind(this);
+    this.switchToNewThread = this.switchToNewThread.bind(this);
+    this.getState = this.getState.bind(this);
+    this.subscribe = this.subscribe.bind(this);
+    this.getById = this.getById.bind(this);
+    this.getItemById = this.getItemById.bind(this);
+    this.getItemByIndex = this.getItemByIndex.bind(this);
+    this.getArchivedItemByIndex = this.getArchivedItemByIndex.bind(this);
+  }
+
   public switchToThread(threadId: string): Promise<void> {
     return this._core.switchToThread(threadId);
   }

package/src/api/ThreadRuntime.ts

@@ -286,6 +286,21 @@ export class ThreadRuntimeImpl implements ThreadRuntime {
     );
   }
 
+  protected __internal_bindMethods() {
+    this.append = this.append.bind(this);
+    this.startRun = this.startRun.bind(this);
+    this.cancelRun = this.cancelRun.bind(this);
+    this.stopSpeaking = this.stopSpeaking.bind(this);
+    this.export = this.export.bind(this);
+    this.import = this.import.bind(this);
+    this.getMesssageByIndex = this.getMesssageByIndex.bind(this);
+    this.getMesssageById = this.getMesssageById.bind(this);
+    this.subscribe = this.subscribe.bind(this);
+    this.unstable_on = this.unstable_on.bind(this);
+    this.getModelConfig = this.getModelConfig.bind(this);
+    this.getState = this.getState.bind(this);
+  }
+
   public readonly composer;
 
   public getState() {
@@ -324,10 +339,6 @@ export class ThreadRuntimeImpl implements ThreadRuntime {
     return this._threadBinding.getState().stopSpeaking();
   }
 
-  public getSubmittedFeedback(messageId: string) {
-    return this._threadBinding.getState().getSubmittedFeedback(messageId);
-  }
-
   public export() {
     return this._threadBinding.getState().export();
   }

package/src/context/providers/AssistantRuntimeProvider.tsx

@@ -15,6 +15,7 @@ import { AssistantRuntime } from "../../api/AssistantRuntime";
 import { create } from "zustand";
 import { writableStore } from "../ReadonlyStore";
 import { AssistantRuntimeCore } from "../../runtimes/core/AssistantRuntimeCore";
+import { ensureBinding } from "../react/utils/ensureBinding";
 
 export namespace AssistantRuntimeProvider {
   export type Props = PropsWithChildren<{
@@ -29,6 +30,8 @@ const useAssistantRuntimeStore = (runtime: AssistantRuntime) => {
   const [store] = useState(() => create(() => runtime));
 
   useEffect(() => {
+    ensureBinding(runtime);
+ 
     writableStore(store).setState(runtime, true);
   }, [runtime, store]);
 
@@ -39,19 +42,6 @@ const useAssistantToolUIsStore = () => {
   return useMemo(() => makeAssistantToolUIsStore(), []);
 };
 
-const useThreadListStore = (runtime: AssistantRuntime) => {
-  const [store] = useState(() => create(() => runtime.threadList.getState()));
-
-  useEffect(() => {
-    const updateState = () =>
-      writableStore(store).setState(runtime.threadList.getState(), true);
-    updateState();
-    return runtime.threadList.subscribe(updateState);
-  }, [runtime, store]);
-
-  return store;
-};
-
 const getRenderComponent = (runtime: AssistantRuntime) => {
   return (runtime as { _core?: AssistantRuntimeCore })._core?.RenderComponent;
 };
@@ -61,14 +51,12 @@ export const AssistantRuntimeProviderImpl: FC<
 > = ({ children, runtime }) => {
   const useAssistantRuntime = useAssistantRuntimeStore(runtime);
   const useToolUIs = useAssistantToolUIsStore();
-  const useThreadList = useThreadListStore(runtime);
-  const context = useMemo(() => {
+  const [context] = useState(() => {
     return {
       useToolUIs,
       useAssistantRuntime,
-      useThreadList,
     };
-  }, [useAssistantRuntime, useToolUIs, useThreadList]);
+  });
 
   const RenderComponent = getRenderComponent(runtime);
 

package/src/context/providers/AttachmentRuntimeProvider.tsx

@@ -1,16 +1,11 @@
 "use client";
 
-import {
-  type FC,
-  type PropsWithChildren,
-  useEffect,
-  useMemo,
-  useState,
-} from "react";
+import { type FC, type PropsWithChildren, useEffect, useState } from "react";
 import { create } from "zustand";
 import { AttachmentContext } from "../react/AttachmentContext";
 import { writableStore } from "../ReadonlyStore";
 import { AttachmentRuntime } from "../../api/AttachmentRuntime";
+import { ensureBinding } from "../react/utils/ensureBinding";
 
 export namespace AttachmentRuntimeProvider {
   export type Props = PropsWithChildren<{
@@ -22,18 +17,9 @@ const useAttachmentRuntimeStore = (runtime: AttachmentRuntime) => {
   const [store] = useState(() => create(() => runtime));
 
   useEffect(() => {
-    writableStore(store).setState(runtime, true);
-  }, [runtime, store]);
+    ensureBinding(runtime);
 
-  return store;
-};
-const useAttachmentStore = (runtime: AttachmentRuntime) => {
-  const [store] = useState(() => create(() => runtime.getState()));
-  useEffect(() => {
-    const updateState = () =>
-      writableStore(store).setState(runtime.getState(), true);
-    updateState();
-    return runtime.subscribe(updateState);
+    writableStore(store).setState(runtime, true);
   }, [runtime, store]);
 
   return store;
@@ -44,15 +30,11 @@ export const AttachmentRuntimeProvider: FC<AttachmentRuntimeProvider.Props> = ({
   children,
 }) => {
   const useAttachmentRuntime = useAttachmentRuntimeStore(runtime);
-  const useAttachment = useAttachmentStore(runtime);
-  const source = useAttachment((s) => s.source);
-  const context = useMemo(() => {
+  const [context] = useState(() => {
     return {
-      source,
       useAttachmentRuntime,
-      useAttachment,
     };
-  }, [useAttachmentRuntime, useAttachment]);
+  });
 
   return (
     <AttachmentContext.Provider value={context}>

package/src/context/providers/ContentPartRuntimeProvider.tsx

@@ -6,6 +6,7 @@ import { ContentPartContext } from "../react/ContentPartContext";
 import type { ContentPartContextValue } from "../react/ContentPartContext";
 import { writableStore } from "../ReadonlyStore";
 import { ContentPartRuntime } from "../../api/ContentPartRuntime";
+import { ensureBinding } from "../react/utils/ensureBinding";
 
 export namespace ContentPartRuntimeProvider {
   export type Props = PropsWithChildren<{
@@ -17,19 +18,9 @@ const useContentPartRuntimeStore = (runtime: ContentPartRuntime) => {
   const [store] = useState(() => create(() => runtime));
 
   useEffect(() => {
-    writableStore(store).setState(runtime, true);
-  }, [runtime, store]);
+    ensureBinding(runtime);
 
-  return store;
-};
-
-export const useContentPartStore = (runtime: ContentPartRuntime) => {
-  const [store] = useState(() => create(() => runtime.getState()));
-  useEffect(() => {
-    const updateState = () =>
-      writableStore(store).setState(runtime.getState(), true);
-    updateState();
-    return runtime.subscribe(updateState);
+    writableStore(store).setState(runtime, true);
   }, [runtime, store]);
 
   return store;
@@ -39,9 +30,8 @@ export const ContentPartRuntimeProvider: FC<
   ContentPartRuntimeProvider.Props
 > = ({ runtime, children }) => {
   const useContentPartRuntime = useContentPartRuntimeStore(runtime);
-  const useContentPart = useContentPartStore(runtime);
   const [context] = useState<ContentPartContextValue>(() => {
-    return { useContentPartRuntime, useContentPart };
+    return { useContentPartRuntime };
   });
 
   return (

package/src/context/providers/MessageRuntimeProvider.tsx

@@ -5,8 +5,9 @@ import { create } from "zustand";
 import { MessageContext } from "../react/MessageContext";
 import type { MessageContextValue } from "../react/MessageContext";
 import { makeMessageUtilsStore } from "../stores/MessageUtils";
-import { ReadonlyStore, writableStore } from "../ReadonlyStore";
+import { writableStore } from "../ReadonlyStore";
 import { MessageRuntime } from "../../api/MessageRuntime";
+import { ensureBinding } from "../react/utils/ensureBinding";
 
 export namespace MessageRuntimeProvider {
   export type Props = PropsWithChildren<{
@@ -18,19 +19,9 @@ const useMessageRuntimeStore = (runtime: MessageRuntime) => {
   const [store] = useState(() => create(() => runtime));
 
   useEffect(() => {
-    writableStore(store).setState(runtime, true);
-  }, [runtime, store]);
+    ensureBinding(runtime);
 
-  return store;
-};
-
-const useMessageStore = (runtime: MessageRuntime) => {
-  const [store] = useState(() => create(() => runtime.getState()));
-  useEffect(() => {
-    const updateState = () =>
-      writableStore(store).setState(runtime.getState(), true);
-    updateState();
-    return runtime.subscribe(updateState);
+    writableStore(store).setState(runtime, true);
   }, [runtime, store]);
 
   return store;
@@ -41,31 +32,14 @@ const useMessageUtilsStore = () => {
   return store;
 };
 
-const useEditComposerStore = (
-  useMessageRuntime: ReadonlyStore<MessageRuntime>,
-) => {
-  const runtime = useMessageRuntime.getState().composer;
-  const [store] = useState(() => create(() => runtime.getState()));
-
-  useEffect(() => {
-    const updateState = () => writableStore(store).setState(runtime.getState());
-    updateState();
-    return runtime.subscribe(updateState);
-  }, [runtime, store]);
-
-  return store;
-};
-
 export const MessageRuntimeProvider: FC<MessageRuntimeProvider.Props> = ({
   runtime,
   children,
 }) => {
   const useMessageRuntime = useMessageRuntimeStore(runtime);
-  const useMessage = useMessageStore(runtime);
   const useMessageUtils = useMessageUtilsStore();
-  const useEditComposer = useEditComposerStore(useMessageRuntime);
   const [context] = useState<MessageContextValue>(() => {
-    return { useMessageRuntime, useMessage, useMessageUtils, useEditComposer };
+    return { useMessageRuntime, useMessageUtils };
   });
 
   return (

package/src/context/providers/TextContentPartProvider.tsx

@@ -1,17 +1,18 @@
 "use client";
 
 import { FC, PropsWithChildren, useEffect, useState } from "react";
-import { create } from "zustand";
+import { create, StoreApi, UseBoundStore } from "zustand";
 import {
   ContentPartContext,
   ContentPartContextValue,
 } from "../react/ContentPartContext";
-import { ContentPartStatus, TextContentPart } from "../../types/AssistantTypes";
+import { ContentPartStatus } from "../../types/AssistantTypes";
 import { writableStore } from "../ReadonlyStore";
 import {
   ContentPartRuntimeImpl,
   ContentPartState,
 } from "../../api/ContentPartRuntime";
+import { ensureBinding } from "../react/utils/ensureBinding";
 
 export namespace TextContentPartProvider {
   export type Props = PropsWithChildren<{
@@ -33,36 +34,39 @@ export const TextContentPartProvider: FC<TextContentPartProvider.Props> = ({
   text,
   isRunning,
 }) => {
-  const [context] = useState<ContentPartContextValue>(() => {
-    const useContentPart = create<ContentPartState>(() => ({
+  const [context] = useState<
+    ContentPartContextValue & {
+      useContentPart: UseBoundStore<
+        StoreApi<ContentPartState & { type: "text" }>
+      >;
+    }
+  >(() => {
+    const useContentPart = create<ContentPartState & { type: "text" }>(() => ({
       status: isRunning ? RUNNING_STATUS : COMPLETE_STATUS,
       type: "text",
       text,
     }));
 
-    const useContentPartRuntime = create(
-      () =>
-        new ContentPartRuntimeImpl({
-          path: {
-            ref: "text",
-            threadSelector: { type: "main" },
-            messageSelector: { type: "messageId", messageId: "" },
-            contentPartSelector: { type: "index", index: 0 },
-          },
-          getState: useContentPart.getState,
-          subscribe: useContentPart.subscribe,
-        }),
-    );
+    const contentPartRuntime = new ContentPartRuntimeImpl({
+      path: {
+        ref: "text",
+        threadSelector: { type: "main" },
+        messageSelector: { type: "messageId", messageId: "" },
+        contentPartSelector: { type: "index", index: 0 },
+      },
+      getState: useContentPart.getState,
+      subscribe: useContentPart.subscribe,
+    });
+    ensureBinding(contentPartRuntime);
+
+    const useContentPartRuntime = create(() => contentPartRuntime);
 
     return { useContentPartRuntime, useContentPart };
   });
 
   useEffect(() => {
-    const state = context.useContentPart.getState() as ContentPartState & {
-      type: "text";
-    };
-
-    const textUpdated = (state as TextContentPart).text !== text;
+    const state = context.useContentPart.getState();
+    const textUpdated = state.text !== text;
     const targetStatus = isRunning ? RUNNING_STATUS : COMPLETE_STATUS;
     const statusUpdated = state.status !== targetStatus;
 

package/src/context/providers/ThreadListItemRuntimeProvider.tsx

@@ -8,6 +8,7 @@ import {
 } from "../react/ThreadListItemContext";
 import { writableStore } from "../ReadonlyStore";
 import { ThreadListItemRuntime } from "../../api/ThreadListItemRuntime";
+import { ensureBinding } from "../react/utils/ensureBinding";
 
 export namespace ThreadListItemRuntimeProvider {
   export type Props = PropsWithChildren<{
@@ -19,31 +20,19 @@ const useThreadListItemRuntimeStore = (runtime: ThreadListItemRuntime) => {
   const [store] = useState(() => create(() => runtime));
 
   useEffect(() => {
+    ensureBinding(runtime);
     writableStore(store).setState(runtime, true);
   }, [runtime, store]);
 
   return store;
 };
 
-export const useThreadListItemStore = (runtime: ThreadListItemRuntime) => {
-  const [store] = useState(() => create(() => runtime.getState()));
-  useEffect(() => {
-    const updateState = () =>
-      writableStore(store).setState(runtime.getState(), true);
-    updateState();
-    return runtime.subscribe(updateState);
-  }, [runtime, store]);
-
-  return store;
-};
-
 export const ThreadListItemRuntimeProvider: FC<
   ThreadListItemRuntimeProvider.Props
 > = ({ runtime, children }) => {
   const useThreadListItemRuntime = useThreadListItemRuntimeStore(runtime);
-  const useThreadListItem = useThreadListItemStore(runtime);
   const [context] = useState<ThreadListItemContextValue>(() => {
-    return { useThreadListItemRuntime, useThreadListItem };
+    return { useThreadListItemRuntime };
   });
 
   return (

package/src/context/providers/ThreadRuntimeProvider.tsx

@@ -1,16 +1,16 @@
 "use client";
 
 import type { FC, PropsWithChildren } from "react";
-import { useEffect, useMemo, useState } from "react";
+import { useEffect, useState } from "react";
 import type { ThreadContextValue } from "../react/ThreadContext";
 import { ThreadContext } from "../react/ThreadContext";
 import { makeThreadViewportStore } from "../stores/ThreadViewport";
 import { writableStore } from "../ReadonlyStore";
 import { ThreadRuntime } from "../../api/ThreadRuntime";
 import { create } from "zustand";
-import { ThreadComposerRuntime } from "../../api/ComposerRuntime";
 import { ThreadListItemRuntime } from "../../api/ThreadListItemRuntime";
 import { ThreadListItemRuntimeProvider } from "./ThreadListItemRuntimeProvider";
+import { ensureBinding } from "../react/utils/ensureBinding";
 
 type ThreadProviderProps = {
   listItemRuntime: ThreadListItemRuntime;
@@ -21,32 +21,10 @@ const useThreadRuntimeStore = (runtime: ThreadRuntime) => {
   const [store] = useState(() => create(() => runtime));
 
   useEffect(() => {
-    writableStore(store).setState(runtime, true);
-  }, [runtime, store]);
-
-  return store;
-};
-
-const useThreadStore = (runtime: ThreadRuntime) => {
-  const [store] = useState(() => create(() => runtime.getState()));
-  useEffect(() => {
-    const updateState = () =>
-      writableStore(store).setState(runtime.getState(), true);
-    updateState();
-    return runtime.subscribe(updateState);
-  }, [runtime, store]);
-
-  return store;
-};
+    ensureBinding(runtime);
+    ensureBinding(runtime.composer);
 
-const useThreadComposerStore = (runtime: ThreadComposerRuntime) => {
-  const [store] = useState(() => create(() => runtime.getState()));
-
-  useEffect(() => {
-    const updateState = () =>
-      writableStore(store).setState(runtime.getState(), true);
-    updateState();
-    return runtime.subscribe(updateState);
+    writableStore(store).setState(runtime, true);
   }, [runtime, store]);
 
   return store;
@@ -56,19 +34,15 @@ export const ThreadRuntimeProvider: FC<
   PropsWithChildren<ThreadProviderProps>
 > = ({ children, listItemRuntime: threadListItemRuntime, runtime }) => {
   const useThreadRuntime = useThreadRuntimeStore(runtime);
-  const useThread = useThreadStore(runtime);
-  const useThreadComposer = useThreadComposerStore(runtime.composer);
 
-  const context = useMemo<ThreadContextValue>(() => {
+  const [context] = useState<ThreadContextValue>(() => {
     const useViewport = makeThreadViewportStore();
 
     return {
-      useThread,
       useThreadRuntime,
-      useComposer: useThreadComposer,
       useViewport,
     };
-  }, [useThread, useThreadRuntime, useThreadComposer]);
+  });
 
   return (
     <ThreadListItemRuntimeProvider runtime={threadListItemRuntime}>

package/src/context/react/AssistantContext.ts

@@ -7,12 +7,12 @@ import { createContextHook } from "./utils/createContextHook";
 import { createContextStoreHook } from "./utils/createContextStoreHook";
 import { UseBoundStore } from "zustand";
 import { AssistantRuntime } from "../../api/AssistantRuntime";
-import { ThreadListState } from "../../api/ThreadListRuntime";
+import { ThreadListRuntime } from "../../api/ThreadListRuntime";
+import { createStateHookForRuntime } from "./utils/createStateHookForRuntime";
 
 export type AssistantContextValue = {
-  useToolUIs: UseBoundStore<ReadonlyStore<AssistantToolUIsState>>;
   useAssistantRuntime: UseBoundStore<ReadonlyStore<AssistantRuntime>>;
-  useThreadList: UseBoundStore<ReadonlyStore<ThreadListState>>;
+  useToolUIs: UseBoundStore<ReadonlyStore<AssistantToolUIsState>>;
 };
 
 export const AssistantContext = createContext<AssistantContextValue | null>(
@@ -43,7 +43,7 @@ export const { useToolUIs, useToolUIsStore } = createContextStoreHook(
   "useToolUIs",
 );
 
-export const { useThreadList } = createContextStoreHook(
-  useAssistantContext,
-  "useThreadList",
-);
+const useThreadListRuntime = (opt: {
+  optional: boolean | undefined;
+}): ThreadListRuntime | null => useAssistantRuntime(opt)?.threads ?? null;
+export const useThreadList = createStateHookForRuntime(useThreadListRuntime);