@assistant-ui/react 0.2.0 → 0.2.2

package/dist/index.mjs

@@ -4,179 +4,6 @@ var __export = (target, all) => {
     __defProp(target, name, { get: all[name], enumerable: true });
 };
 
-// src/primitive-hooks/actionBar/useActionBarCopy.tsx
-import { useCallback } from "react";
-
-// src/context/react/MessageContext.ts
-import { createContext, useContext } from "react";
-var MessageContext = createContext(null);
-var useMessageContext = () => {
-  const context = useContext(MessageContext);
-  if (!context)
-    throw new Error(
-      "This component can only be used inside a component passed to <ThreadPrimitive.Messages components={...} />."
-    );
-  return context;
-};
-
-// src/utils/combined/useCombinedStore.ts
-import { useMemo } from "react";
-
-// src/utils/combined/createCombinedStore.ts
-import { useSyncExternalStore } from "react";
-var createCombinedStore = (stores) => {
-  const subscribe = (callback) => {
-    const unsubscribes = stores.map((store) => store.subscribe(callback));
-    return () => {
-      for (const unsub of unsubscribes) {
-        unsub();
-      }
-    };
-  };
-  return (selector) => {
-    const getSnapshot = () => selector(...stores.map((store) => store.getState()));
-    return useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
-  };
-};
-
-// src/utils/combined/useCombinedStore.ts
-var useCombinedStore = (stores, selector) => {
-  const useCombined = useMemo(() => createCombinedStore(stores), stores);
-  return useCombined(selector);
-};
-
-// src/utils/getMessageText.tsx
-var getMessageText = (message) => {
-  const textParts = message.content.filter(
-    (part) => part.type === "text"
-  );
-  return textParts.map((part) => part.text).join("\n\n");
-};
-
-// src/primitive-hooks/actionBar/useActionBarCopy.tsx
-var useActionBarCopy = ({
-  copiedDuration = 3e3
-} = {}) => {
-  const { useMessage, useMessageUtils, useEditComposer } = useMessageContext();
-  const hasCopyableContent = useCombinedStore(
-    [useMessage, useEditComposer],
-    (m, c) => {
-      return !c.isEditing && m.message.content.some((c2) => c2.type === "text");
-    }
-  );
-  const callback = useCallback(() => {
-    const { message } = useMessage.getState();
-    const { setIsCopied } = useMessageUtils.getState();
-    const { isEditing, value: composerValue } = useEditComposer.getState();
-    const valueToCopy = isEditing ? composerValue : getMessageText(message);
-    navigator.clipboard.writeText(valueToCopy);
-    setIsCopied(true);
-    setTimeout(() => setIsCopied(false), copiedDuration);
-  }, [useMessage, useMessageUtils, useEditComposer, copiedDuration]);
-  if (!hasCopyableContent) return null;
-  return callback;
-};
-
-// src/primitive-hooks/actionBar/useActionBarEdit.tsx
-import { useCallback as useCallback2 } from "react";
-var useActionBarEdit = () => {
-  const { useMessage, useEditComposer } = useMessageContext();
-  const disabled = useCombinedStore(
-    [useMessage, useEditComposer],
-    (m, c) => m.message.role !== "user" || c.isEditing
-  );
-  const callback = useCallback2(() => {
-    const { edit } = useEditComposer.getState();
-    edit();
-  }, [useEditComposer]);
-  if (disabled) return null;
-  return callback;
-};
-
-// src/primitive-hooks/actionBar/useActionBarReload.tsx
-import { useCallback as useCallback3 } from "react";
-
-// src/context/react/ThreadContext.ts
-import { createContext as createContext2, useContext as useContext2 } from "react";
-var ThreadContext = createContext2(null);
-var useThreadContext = () => {
-  const context = useContext2(ThreadContext);
-  if (!context)
-    throw new Error(
-      "This component must be used within an AssistantRuntimeProvider."
-    );
-  return context;
-};
-
-// src/primitive-hooks/actionBar/useActionBarReload.tsx
-var useActionBarReload = () => {
-  const { useThread, useThreadActions, useComposer, useViewport } = useThreadContext();
-  const { useMessage } = useMessageContext();
-  const disabled = useCombinedStore(
-    [useThread, useMessage],
-    (t, m) => t.isRunning || m.message.role !== "assistant"
-  );
-  const callback = useCallback3(() => {
-    const { parentId } = useMessage.getState();
-    useThreadActions.getState().startRun(parentId);
-    useViewport.getState().scrollToBottom();
-    useComposer.getState().focus();
-  }, [useThreadActions, useComposer, useViewport, useMessage]);
-  if (disabled) return null;
-  return callback;
-};
-
-// src/primitive-hooks/branchPicker/useBranchPickerCount.tsx
-var useBranchPickerCount = () => {
-  const { useMessage } = useMessageContext();
-  const branchCount = useMessage((s) => s.branches.length);
-  return branchCount;
-};
-
-// src/primitive-hooks/branchPicker/useBranchPickerNext.tsx
-import { useCallback as useCallback4 } from "react";
-var useBranchPickerNext = () => {
-  const { useThreadActions } = useThreadContext();
-  const { useMessage, useEditComposer } = useMessageContext();
-  const disabled = useCombinedStore(
-    [useMessage, useEditComposer],
-    (m, c) => c.isEditing || m.branches.indexOf(m.message.id) + 1 >= m.branches.length
-  );
-  const callback = useCallback4(() => {
-    const { message, branches } = useMessage.getState();
-    useThreadActions.getState().switchToBranch(branches[branches.indexOf(message.id) + 1]);
-  }, [useThreadActions, useMessage]);
-  if (disabled) return null;
-  return callback;
-};
-
-// src/primitive-hooks/branchPicker/useBranchPickerNumber.tsx
-var useBranchPickerNumber = () => {
-  const { useMessage } = useMessageContext();
-  const branchIdx = useMessage((s) => s.branches.indexOf(s.message.id));
-  return branchIdx + 1;
-};
-
-// src/primitive-hooks/branchPicker/useBranchPickerPrevious.tsx
-import { useCallback as useCallback5 } from "react";
-var useBranchPickerPrevious = () => {
-  const { useThreadActions } = useThreadContext();
-  const { useMessage, useEditComposer } = useMessageContext();
-  const disabled = useCombinedStore(
-    [useMessage, useEditComposer],
-    (m, c) => c.isEditing || m.branches.indexOf(m.message.id) <= 0
-  );
-  const callback = useCallback5(() => {
-    const { message, branches } = useMessage.getState();
-    useThreadActions.getState().switchToBranch(branches[branches.indexOf(message.id) - 1]);
-  }, [useThreadActions, useMessage]);
-  if (disabled) return null;
-  return callback;
-};
-
-// src/primitive-hooks/composer/useComposerCancel.tsx
-import { useCallback as useCallback6 } from "react";
-
 // src/context/providers/AssistantRuntimeProvider.tsx
 import { memo } from "react";
 
@@ -184,12 +11,12 @@ import { memo } from "react";
 import { useEffect as useEffect2, useInsertionEffect as useInsertionEffect2, useRef as useRef2, useState as useState2 } from "react";
 
 // src/context/react/AssistantContext.ts
-import { createContext as createContext3, useContext as useContext3 } from "react";
-var AssistantContext = createContext3(
+import { createContext, useContext } from "react";
+var AssistantContext = createContext(
   null
 );
 var useAssistantContext = () => {
-  const context = useContext3(AssistantContext);
+  const context = useContext(AssistantContext);
   if (!context)
     throw new Error(
       "This component must be used within an AssistantRuntimeProvider."
@@ -288,7 +115,26 @@ var makeAssistantToolUIsStore = () => create2((set) => {
 });
 
 // src/context/providers/ThreadProvider.tsx
-import { useEffect, useInsertionEffect, useRef, useState } from "react";
+import {
+  useCallback,
+  useEffect,
+  useInsertionEffect,
+  useRef,
+  useState,
+  useSyncExternalStore
+} from "react";
+
+// src/context/react/ThreadContext.ts
+import { createContext as createContext2, useContext as useContext2 } from "react";
+var ThreadContext = createContext2(null);
+var useThreadContext = () => {
+  const context = useContext2(ThreadContext);
+  if (!context)
+    throw new Error(
+      "This component must be used within an AssistantRuntimeProvider."
+    );
+  return context;
+};
 
 // src/context/stores/Composer.ts
 import { create as create3 } from "zustand";
@@ -417,13 +263,29 @@ var ThreadProvider = ({
     onRuntimeUpdate();
     return runtime.subscribe(onRuntimeUpdate);
   }, [context, runtime]);
-  const RuntimeSynchronizer = runtime.unstable_synchronizer;
+  const subscribe = useCallback(
+    (c) => runtime.subscribe(c),
+    [runtime]
+  );
+  const RuntimeSynchronizer = useSyncExternalStore(
+    subscribe,
+    () => runtime.unstable_synchronizer,
+    () => void 0
+  );
   return /* @__PURE__ */ jsxs(ThreadContext.Provider, { value: context, children: [
     RuntimeSynchronizer && /* @__PURE__ */ jsx(RuntimeSynchronizer, {}),
     children
   ] });
 };
 
+// src/context/stores/AssistantActions.tsx
+import { create as create7 } from "zustand";
+var makeAssistantActionsStore = (runtimeRef) => create7(
+  () => Object.freeze({
+    switchToThread: () => runtimeRef.current.switchToThread(null)
+  })
+);
+
 // src/context/providers/AssistantProvider.tsx
 import { jsx as jsx2 } from "react/jsx-runtime";
 var AssistantProvider = ({ children, runtime }) => {
@@ -434,7 +296,8 @@ var AssistantProvider = ({ children, runtime }) => {
   const [context] = useState2(() => {
     const useModelConfig = makeAssistantModelConfigStore();
     const useToolUIs = makeAssistantToolUIsStore();
-    return { useModelConfig, useToolUIs };
+    const useAssistantActions = makeAssistantActionsStore(runtimeRef);
+    return { useModelConfig, useToolUIs, useAssistantActions };
   });
   const getModelCOnfig = context.useModelConfig((c) => c.getModelConfig);
   useEffect2(() => {
@@ -448,41 +311,311 @@ import { jsx as jsx3 } from "react/jsx-runtime";
 var AssistantRuntimeProviderImpl = ({ children, runtime }) => {
   return /* @__PURE__ */ jsx3(AssistantProvider, { runtime, children });
 };
-var AssistantRuntimeProvider = memo(AssistantRuntimeProviderImpl);
+var AssistantRuntimeProvider = memo(AssistantRuntimeProviderImpl);
+
+// src/context/react/ComposerContext.ts
+import { useContext as useContext4, useMemo } from "react";
+
+// src/context/react/MessageContext.ts
+import { createContext as createContext3, useContext as useContext3 } from "react";
+var MessageContext = createContext3(null);
+var useMessageContext = () => {
+  const context = useContext3(MessageContext);
+  if (!context)
+    throw new Error(
+      "This component can only be used inside a component passed to <ThreadPrimitive.Messages components={...} />."
+    );
+  return context;
+};
+
+// src/context/react/ComposerContext.ts
+var useComposerContext = () => {
+  const { useComposer } = useThreadContext();
+  const { useEditComposer } = useContext4(MessageContext) ?? {};
+  return useMemo(
+    () => ({
+      useComposer: useEditComposer ?? useComposer,
+      type: useEditComposer ? "edit" : "new"
+    }),
+    [useEditComposer, useComposer]
+  );
+};
+
+// src/context/react/ContentPartContext.ts
+import { createContext as createContext4, useContext as useContext5 } from "react";
+var ContentPartContext = createContext4(
+  null
+);
+var useContentPartContext = () => {
+  const context = useContext5(ContentPartContext);
+  if (!context)
+    throw new Error(
+      "This component can only be used inside a component passed to <MessagePrimitive.Content components={...} >."
+    );
+  return context;
+};
+
+// src/hooks/useAppendMessage.tsx
+import { useCallback as useCallback2 } from "react";
+var toAppendMessage = (useThread, message) => {
+  if (typeof message === "string") {
+    return {
+      parentId: useThread.getState().messages.at(-1)?.id ?? null,
+      role: "user",
+      content: [{ type: "text", text: message }]
+    };
+  }
+  return {
+    parentId: message.parentId ?? useThread.getState().messages.at(-1)?.id ?? null,
+    role: message.role ?? "user",
+    content: message.content
+  };
+};
+var useAppendMessage = () => {
+  const { useThread, useThreadActions, useViewport, useComposer } = useThreadContext();
+  const append = useCallback2(
+    (message) => {
+      const appendMessage = toAppendMessage(useThread, message);
+      useThreadActions.getState().append(appendMessage);
+      useViewport.getState().scrollToBottom();
+      useComposer.getState().focus();
+    },
+    [useThread, useThreadActions, useViewport, useComposer]
+  );
+  return append;
+};
+
+// src/hooks/useSwitchToNewThread.tsx
+import { useCallback as useCallback3 } from "react";
+var useSwitchToNewThread = () => {
+  const { useAssistantActions } = useAssistantContext();
+  const { useComposer } = useThreadContext();
+  const switchToNewThread = useCallback3(() => {
+    useAssistantActions.getState().switchToThread(null);
+    useComposer.getState().focus();
+  }, [useAssistantActions, useComposer]);
+  return switchToNewThread;
+};
+
+// src/model-config/useAssistantTool.tsx
+import { useEffect as useEffect3 } from "react";
+var useAssistantTool = (tool) => {
+  const { useModelConfig, useToolUIs } = useAssistantContext();
+  const registerModelConfigProvider = useModelConfig(
+    (s) => s.registerModelConfigProvider
+  );
+  const setToolUI = useToolUIs((s) => s.setToolUI);
+  useEffect3(() => {
+    const { toolName, render, ...rest } = tool;
+    const config = {
+      tools: {
+        [tool.toolName]: rest
+      }
+    };
+    const unsub1 = registerModelConfigProvider(() => config);
+    const unsub2 = render ? setToolUI(toolName, render) : void 0;
+    return () => {
+      unsub1();
+      unsub2?.();
+    };
+  }, [registerModelConfigProvider, setToolUI, tool]);
+};
+
+// src/model-config/makeAssistantTool.tsx
+var makeAssistantTool = (tool) => {
+  const Tool = () => {
+    useAssistantTool(tool);
+    return null;
+  };
+  return Tool;
+};
+
+// src/model-config/useAssistantToolUI.tsx
+import { useEffect as useEffect4 } from "react";
+var useAssistantToolUI = (tool) => {
+  const { useToolUIs } = useAssistantContext();
+  const setToolUI = useToolUIs((s) => s.setToolUI);
+  useEffect4(() => {
+    if (!tool) return;
+    const { toolName, render } = tool;
+    return setToolUI(toolName, render);
+  }, [setToolUI, tool]);
+};
+
+// src/model-config/makeAssistantToolUI.tsx
+var makeAssistantToolUI = (tool) => {
+  const ToolUI = () => {
+    useAssistantToolUI(tool);
+    return null;
+  };
+  return ToolUI;
+};
+
+// src/model-config/useAssistantInstructions.tsx
+import { useEffect as useEffect5 } from "react";
+var useAssistantInstructions = (instruction) => {
+  const { useModelConfig } = useAssistantContext();
+  const registerModelConfigProvider = useModelConfig(
+    (s) => s.registerModelConfigProvider
+  );
+  useEffect5(() => {
+    const config = {
+      system: instruction
+    };
+    return registerModelConfigProvider(() => config);
+  }, [registerModelConfigProvider, instruction]);
+};
+
+// src/primitive-hooks/actionBar/useActionBarCopy.tsx
+import { useCallback as useCallback4 } from "react";
+
+// src/utils/combined/useCombinedStore.ts
+import { useMemo as useMemo2 } from "react";
+
+// src/utils/combined/createCombinedStore.ts
+import { useSyncExternalStore as useSyncExternalStore2 } from "react";
+var createCombinedStore = (stores) => {
+  const subscribe = (callback) => {
+    const unsubscribes = stores.map((store) => store.subscribe(callback));
+    return () => {
+      for (const unsub of unsubscribes) {
+        unsub();
+      }
+    };
+  };
+  return (selector) => {
+    const getSnapshot = () => selector(...stores.map((store) => store.getState()));
+    return useSyncExternalStore2(subscribe, getSnapshot, getSnapshot);
+  };
+};
+
+// src/utils/combined/useCombinedStore.ts
+var useCombinedStore = (stores, selector) => {
+  const useCombined = useMemo2(() => createCombinedStore(stores), stores);
+  return useCombined(selector);
+};
+
+// src/utils/getMessageText.tsx
+var getMessageText = (message) => {
+  const textParts = message.content.filter(
+    (part) => part.type === "text"
+  );
+  return textParts.map((part) => part.text).join("\n\n");
+};
+
+// src/primitive-hooks/actionBar/useActionBarCopy.tsx
+var useActionBarCopy = ({
+  copiedDuration = 3e3
+} = {}) => {
+  const { useMessage, useMessageUtils, useEditComposer } = useMessageContext();
+  const hasCopyableContent = useCombinedStore(
+    [useMessage, useEditComposer],
+    (m, c) => {
+      return !c.isEditing && m.message.content.some((c2) => c2.type === "text");
+    }
+  );
+  const callback = useCallback4(() => {
+    const { message } = useMessage.getState();
+    const { setIsCopied } = useMessageUtils.getState();
+    const { isEditing, value: composerValue } = useEditComposer.getState();
+    const valueToCopy = isEditing ? composerValue : getMessageText(message);
+    navigator.clipboard.writeText(valueToCopy);
+    setIsCopied(true);
+    setTimeout(() => setIsCopied(false), copiedDuration);
+  }, [useMessage, useMessageUtils, useEditComposer, copiedDuration]);
+  if (!hasCopyableContent) return null;
+  return callback;
+};
+
+// src/primitive-hooks/actionBar/useActionBarEdit.tsx
+import { useCallback as useCallback5 } from "react";
+var useActionBarEdit = () => {
+  const { useMessage, useEditComposer } = useMessageContext();
+  const disabled = useCombinedStore(
+    [useMessage, useEditComposer],
+    (m, c) => m.message.role !== "user" || c.isEditing
+  );
+  const callback = useCallback5(() => {
+    const { edit } = useEditComposer.getState();
+    edit();
+  }, [useEditComposer]);
+  if (disabled) return null;
+  return callback;
+};
+
+// src/primitive-hooks/actionBar/useActionBarReload.tsx
+import { useCallback as useCallback6 } from "react";
+var useActionBarReload = () => {
+  const { useThread, useThreadActions, useComposer, useViewport } = useThreadContext();
+  const { useMessage } = useMessageContext();
+  const disabled = useCombinedStore(
+    [useThread, useMessage],
+    (t, m) => t.isRunning || m.message.role !== "assistant"
+  );
+  const callback = useCallback6(() => {
+    const { parentId } = useMessage.getState();
+    useThreadActions.getState().startRun(parentId);
+    useViewport.getState().scrollToBottom();
+    useComposer.getState().focus();
+  }, [useThreadActions, useComposer, useViewport, useMessage]);
+  if (disabled) return null;
+  return callback;
+};
+
+// src/primitive-hooks/branchPicker/useBranchPickerCount.tsx
+var useBranchPickerCount = () => {
+  const { useMessage } = useMessageContext();
+  const branchCount = useMessage((s) => s.branches.length);
+  return branchCount;
+};
+
+// src/primitive-hooks/branchPicker/useBranchPickerNext.tsx
+import { useCallback as useCallback7 } from "react";
+var useBranchPickerNext = () => {
+  const { useThreadActions } = useThreadContext();
+  const { useMessage, useEditComposer } = useMessageContext();
+  const disabled = useCombinedStore(
+    [useMessage, useEditComposer],
+    (m, c) => c.isEditing || m.branches.indexOf(m.message.id) + 1 >= m.branches.length
+  );
+  const callback = useCallback7(() => {
+    const { message, branches } = useMessage.getState();
+    useThreadActions.getState().switchToBranch(branches[branches.indexOf(message.id) + 1]);
+  }, [useThreadActions, useMessage]);
+  if (disabled) return null;
+  return callback;
+};
 
-// src/context/react/ComposerContext.ts
-import { useContext as useContext4, useMemo as useMemo2 } from "react";
-var useComposerContext = () => {
-  const { useComposer } = useThreadContext();
-  const { useEditComposer } = useContext4(MessageContext) ?? {};
-  return useMemo2(
-    () => ({
-      useComposer: useEditComposer ?? useComposer,
-      type: useEditComposer ? "edit" : "new"
-    }),
-    [useEditComposer, useComposer]
-  );
+// src/primitive-hooks/branchPicker/useBranchPickerNumber.tsx
+var useBranchPickerNumber = () => {
+  const { useMessage } = useMessageContext();
+  const branchIdx = useMessage((s) => s.branches.indexOf(s.message.id));
+  return branchIdx + 1;
 };
 
-// src/context/react/ContentPartContext.ts
-import { createContext as createContext4, useContext as useContext5 } from "react";
-var ContentPartContext = createContext4(
-  null
-);
-var useContentPartContext = () => {
-  const context = useContext5(ContentPartContext);
-  if (!context)
-    throw new Error(
-      "This component can only be used inside a component passed to <MessagePrimitive.Content components={...} >."
-    );
-  return context;
+// src/primitive-hooks/branchPicker/useBranchPickerPrevious.tsx
+import { useCallback as useCallback8 } from "react";
+var useBranchPickerPrevious = () => {
+  const { useThreadActions } = useThreadContext();
+  const { useMessage, useEditComposer } = useMessageContext();
+  const disabled = useCombinedStore(
+    [useMessage, useEditComposer],
+    (m, c) => c.isEditing || m.branches.indexOf(m.message.id) <= 0
+  );
+  const callback = useCallback8(() => {
+    const { message, branches } = useMessage.getState();
+    useThreadActions.getState().switchToBranch(branches[branches.indexOf(message.id) - 1]);
+  }, [useThreadActions, useMessage]);
+  if (disabled) return null;
+  return callback;
 };
 
 // src/primitive-hooks/composer/useComposerCancel.tsx
+import { useCallback as useCallback9 } from "react";
 var useComposerCancel = () => {
   const { useComposer } = useComposerContext();
   const disabled = useComposer((c) => !c.isEditing);
-  const callback = useCallback6(() => {
+  const callback = useCallback9(() => {
     const { cancel } = useComposer.getState();
     cancel();
   }, [useComposer]);
@@ -501,12 +634,12 @@ var useComposerIf = (props) => {
 };
 
 // src/primitive-hooks/composer/useComposerSend.tsx
-import { useCallback as useCallback7 } from "react";
+import { useCallback as useCallback10 } from "react";
 var useComposerSend = () => {
   const { useViewport, useComposer: useNewComposer } = useThreadContext();
   const { useComposer } = useComposerContext();
   const disabled = useComposer((c) => !c.isEditing || c.value.length === 0);
-  const callback = useCallback7(() => {
+  const callback = useCallback10(() => {
     const composerState = useComposer.getState();
     if (!composerState.isEditing) return;
     composerState.send();
@@ -602,11 +735,11 @@ var useThreadEmpty = () => {
 };
 
 // src/primitive-hooks/thread/useThreadScrollToBottom.tsx
-import { useCallback as useCallback8 } from "react";
+import { useCallback as useCallback11 } from "react";
 var useThreadScrollToBottom = () => {
   const { useComposer, useViewport } = useThreadContext();
   const isAtBottom = useViewport((s) => s.isAtBottom);
-  const handleScrollToBottom = useCallback8(() => {
+  const handleScrollToBottom = useCallback11(() => {
     useViewport.getState().scrollToBottom();
     useComposer.getState().focus();
   }, [useViewport, useComposer]);
@@ -615,14 +748,14 @@ var useThreadScrollToBottom = () => {
 };
 
 // src/primitive-hooks/thread/useThreadSuggestion.tsx
-import { useCallback as useCallback9 } from "react";
+import { useCallback as useCallback12 } from "react";
 var useThreadSuggestion = ({
   prompt,
   autoSend
 }) => {
   const { useThread, useComposer } = useThreadContext();
   const disabled = useThread((t) => t.isRunning);
-  const callback = useCallback9(() => {
+  const callback = useCallback12(() => {
     const thread = useThread.getState();
     const composer = useComposer.getState();
     composer.setValue(prompt);
@@ -637,16 +770,17 @@ var useThreadSuggestion = ({
 // src/primitives/actionBar/index.ts
 var actionBar_exports = {};
 __export(actionBar_exports, {
-  Copy: () => ActionBarCopy,
-  Edit: () => ActionBarEdit,
-  Reload: () => ActionBarReload,
-  Root: () => ActionBarRoot
+  Copy: () => ActionBarPrimitiveCopy,
+  Edit: () => ActionBarPrimitiveEdit,
+  Reload: () => ActionBarPrimitiveReload,
+  Root: () => ActionBarPrimitiveRoot
 });
 
 // src/primitives/actionBar/ActionBarRoot.tsx
 import { Primitive } from "@radix-ui/react-primitive";
 import { forwardRef } from "react";
-import { jsx as jsx4 } from "react/jsx-runtime";
+
+// src/primitives/actionBar/useActionBarFloatStatus.tsx
 var useActionBarFloatStatus = ({
   hideWhenRunning,
   autohide,
@@ -667,7 +801,10 @@ var useActionBarFloatStatus = ({
     }
   );
 };
-var ActionBarRoot = forwardRef(({ hideWhenRunning, autohide, autohideFloat, ...rest }, ref) => {
+
+// src/primitives/actionBar/ActionBarRoot.tsx
+import { jsx as jsx4 } from "react/jsx-runtime";
+var ActionBarPrimitiveRoot = forwardRef(({ hideWhenRunning, autohide, autohideFloat, ...rest }, ref) => {
   const hideAndfloatStatus = useActionBarFloatStatus({
     hideWhenRunning,
     autohide,
@@ -683,7 +820,7 @@ var ActionBarRoot = forwardRef(({ hideWhenRunning, autohide, autohideFloat, ...r
     }
   );
 });
-ActionBarRoot.displayName = "ActionBarRoot";
+ActionBarPrimitiveRoot.displayName = "ActionBarPrimitive.Root";
 
 // src/utils/createActionButton.tsx
 import { composeEventHandlers } from "@radix-ui/primitive";
@@ -711,52 +848,55 @@ var createActionButton = (displayName, useActionButton) => {
 };
 
 // src/primitives/actionBar/ActionBarCopy.tsx
-var ActionBarCopy = createActionButton(
-  "ActionBarCopy",
+var ActionBarPrimitiveCopy = createActionButton(
+  "ActionBarPrimitive.Copy",
   useActionBarCopy
 );
 
 // src/primitives/actionBar/ActionBarReload.tsx
-var ActionBarReload = createActionButton(
-  "ActionBarReload",
+var ActionBarPrimitiveReload = createActionButton(
+  "ActionBarPrimitive.Reload",
   useActionBarReload
 );
 
 // src/primitives/actionBar/ActionBarEdit.tsx
-var ActionBarEdit = createActionButton(
-  "ActionBarEdit",
+var ActionBarPrimitiveEdit = createActionButton(
+  "ActionBarPrimitive.Edit",
   useActionBarEdit
 );
 
 // src/primitives/assistantModal/index.ts
 var assistantModal_exports = {};
 __export(assistantModal_exports, {
-  Content: () => AssistantModalContent,
-  Root: () => AssistantModalRoot,
-  Trigger: () => AssistantModalTrigger
+  Content: () => AssistantModalPrimitiveContent,
+  Root: () => AssistantModalPrimitiveRoot,
+  Trigger: () => AssistantModalPrimitiveTrigger
 });
 
 // src/primitives/assistantModal/AssistantModalRoot.tsx
 import { useState as useState3 } from "react";
-import * as PopoverPrimitive from "@radix-ui/react-popover";
+import * as PopoverPrimitive2 from "@radix-ui/react-popover";
 import { composeEventHandlers as composeEventHandlers2 } from "@radix-ui/primitive";
 
 // src/utils/hooks/useOnComposerFocus.tsx
 import { useCallbackRef } from "@radix-ui/react-use-callback-ref";
-import { useEffect as useEffect3 } from "react";
+import { useEffect as useEffect6 } from "react";
 var useOnComposerFocus = (callback) => {
   const callbackRef = useCallbackRef(callback);
   const { useComposer } = useThreadContext();
-  useEffect3(() => {
+  useEffect6(() => {
     return useComposer.getState().onFocus(() => {
       callbackRef();
     });
   }, [useComposer, callbackRef]);
 };
 
+// src/primitives/assistantModal/scope.tsx
+import * as PopoverPrimitive from "@radix-ui/react-popover";
+var usePopoverScope = PopoverPrimitive.createPopoverScope();
+
 // src/primitives/assistantModal/AssistantModalRoot.tsx
 import { jsx as jsx6 } from "react/jsx-runtime";
-var usePopoverScope = PopoverPrimitive.createPopoverScope();
 var useAssistantModalOpenState = (defaultOpen = false) => {
   const state = useState3(defaultOpen);
   const [, setOpen] = state;
@@ -765,7 +905,7 @@ var useAssistantModalOpenState = (defaultOpen = false) => {
   });
   return state;
 };
-var AssistantModalRoot = ({
+var AssistantModalPrimitiveRoot = ({
   __scopeAssistantModal,
   defaultOpen,
   open,
@@ -775,7 +915,7 @@ var AssistantModalRoot = ({
   const scope = usePopoverScope(__scopeAssistantModal);
   const [modalOpen, setOpen] = useAssistantModalOpenState(defaultOpen);
   return /* @__PURE__ */ jsx6(
-    PopoverPrimitive.Root,
+    PopoverPrimitive2.Root,
     {
       ...scope,
       open: open === void 0 ? modalOpen : open,
@@ -784,26 +924,29 @@ var AssistantModalRoot = ({
     }
   );
 };
-AssistantModalRoot.displayName = "AssistantModalRoot";
+AssistantModalPrimitiveRoot.displayName = "AssistantModalPrimitive.Root";
 
 // src/primitives/assistantModal/AssistantModalTrigger.tsx
 import { forwardRef as forwardRef3 } from "react";
-import * as PopoverPrimitive2 from "@radix-ui/react-popover";
+import * as PopoverPrimitive3 from "@radix-ui/react-popover";
 import { jsx as jsx7 } from "react/jsx-runtime";
-var AssistantModalTrigger = forwardRef3(
-  ({ __scopeAssistantModal, ...rest }, ref) => {
+var AssistantModalPrimitiveTrigger = forwardRef3(
+  ({
+    __scopeAssistantModal,
+    ...rest
+  }, ref) => {
     const scope = usePopoverScope(__scopeAssistantModal);
-    return /* @__PURE__ */ jsx7(PopoverPrimitive2.Trigger, { ...scope, ...rest, ref });
+    return /* @__PURE__ */ jsx7(PopoverPrimitive3.Trigger, { ...scope, ...rest, ref });
   }
 );
-AssistantModalTrigger.displayName = "AssistantModalTrigger";
+AssistantModalPrimitiveTrigger.displayName = "AssistantModalPrimitive.Trigger";
 
 // src/primitives/assistantModal/AssistantModalContent.tsx
 import { forwardRef as forwardRef4 } from "react";
-import * as PopoverPrimitive3 from "@radix-ui/react-popover";
+import * as PopoverPrimitive4 from "@radix-ui/react-popover";
 import { composeEventHandlers as composeEventHandlers3 } from "@radix-ui/primitive";
 import { jsx as jsx8 } from "react/jsx-runtime";
-var AssistantModalContent = forwardRef4(
+var AssistantModalPrimitiveContent = forwardRef4(
   ({
     __scopeAssistantModal,
     side,
@@ -813,8 +956,8 @@ var AssistantModalContent = forwardRef4(
     ...props
   }, forwardedRef) => {
     const scope = usePopoverScope(__scopeAssistantModal);
-    return /* @__PURE__ */ jsx8(PopoverPrimitive3.Portal, { ...scope, children: /* @__PURE__ */ jsx8(
-      PopoverPrimitive3.Content,
+    return /* @__PURE__ */ jsx8(PopoverPrimitive4.Portal, { ...scope, children: /* @__PURE__ */ jsx8(
+      PopoverPrimitive4.Content,
       {
         ...scope,
         ...props,
@@ -829,43 +972,45 @@ var AssistantModalContent = forwardRef4(
     ) });
   }
 );
-AssistantModalContent.displayName = "AssistantModalContent";
+AssistantModalPrimitiveContent.displayName = "AssistantModalPrimitive.Content";
 
 // src/primitives/branchPicker/index.ts
 var branchPicker_exports = {};
 __export(branchPicker_exports, {
-  Count: () => BranchPickerCount,
-  Next: () => BranchPickerNext,
-  Number: () => BranchPickerNumber,
+  Count: () => BranchPickerPrimitiveCount,
+  Next: () => BranchPickerPrimitiveNext,
+  Number: () => BranchPickerPrimitiveNumber,
   Previous: () => BranchPickerPrevious,
-  Root: () => BranchPickerRoot
+  Root: () => BranchPickerPrimitiveRoot
 });
 
 // src/primitives/branchPicker/BranchPickerNext.tsx
-var BranchPickerNext = createActionButton(
-  "BranchPickerNext",
+var BranchPickerPrimitiveNext = createActionButton(
+  "BranchPickerPrimitive.Next",
   useBranchPickerNext
 );
 
 // src/primitives/branchPicker/BranchPickerPrevious.tsx
 var BranchPickerPrevious = createActionButton(
-  "BranchPickerPrevious",
+  "BranchPickerPrimitive.Previous",
   useBranchPickerPrevious
 );
 
 // src/primitives/branchPicker/BranchPickerCount.tsx
 import { Fragment, jsx as jsx9 } from "react/jsx-runtime";
-var BranchPickerCount = () => {
+var BranchPickerPrimitiveCount = () => {
   const branchCount = useBranchPickerCount();
   return /* @__PURE__ */ jsx9(Fragment, { children: branchCount });
 };
+BranchPickerPrimitiveCount.displayName = "BranchPickerPrimitive.Count";
 
 // src/primitives/branchPicker/BranchPickerNumber.tsx
 import { Fragment as Fragment2, jsx as jsx10 } from "react/jsx-runtime";
-var BranchPickerNumber = () => {
+var BranchPickerPrimitiveNumber = () => {
   const branchNumber = useBranchPickerNumber();
   return /* @__PURE__ */ jsx10(Fragment2, { children: branchNumber });
 };
+BranchPickerPrimitiveNumber.displayName = "BranchPickerPrimitive.Number";
 
 // src/primitives/branchPicker/BranchPickerRoot.tsx
 import { Primitive as Primitive6 } from "@radix-ui/react-primitive";
@@ -874,10 +1019,10 @@ import { forwardRef as forwardRef8 } from "react";
 // src/primitives/message/index.ts
 var message_exports = {};
 __export(message_exports, {
-  Content: () => MessageContent,
-  If: () => MessageIf,
-  InProgress: () => MessageInProgress,
-  Root: () => MessageRoot
+  Content: () => MessagePrimitiveContent,
+  If: () => MessagePrimitiveIf,
+  InProgress: () => MessagePrimitiveInProgress,
+  Root: () => MessagePrimitiveRoot
 });
 
 // src/primitives/message/MessageRoot.tsx
@@ -885,41 +1030,43 @@ import { composeEventHandlers as composeEventHandlers4 } from "@radix-ui/primiti
 import { Primitive as Primitive3 } from "@radix-ui/react-primitive";
 import { forwardRef as forwardRef5 } from "react";
 import { jsx as jsx11 } from "react/jsx-runtime";
-var MessageRoot = forwardRef5(
-  ({ onMouseEnter, onMouseLeave, ...rest }, ref) => {
-    const { useMessageUtils } = useMessageContext();
-    const setIsHovering = useMessageUtils((s) => s.setIsHovering);
-    const handleMouseEnter = () => {
-      setIsHovering(true);
-    };
-    const handleMouseLeave = () => {
-      setIsHovering(false);
-    };
-    return /* @__PURE__ */ jsx11(
-      Primitive3.div,
-      {
-        ...rest,
-        ref,
-        onMouseEnter: composeEventHandlers4(onMouseEnter, handleMouseEnter),
-        onMouseLeave: composeEventHandlers4(onMouseLeave, handleMouseLeave)
-      }
-    );
-  }
-);
-MessageRoot.displayName = "MessageRoot";
+var MessagePrimitiveRoot = forwardRef5(({ onMouseEnter, onMouseLeave, ...rest }, ref) => {
+  const { useMessageUtils } = useMessageContext();
+  const setIsHovering = useMessageUtils((s) => s.setIsHovering);
+  const handleMouseEnter = () => {
+    setIsHovering(true);
+  };
+  const handleMouseLeave = () => {
+    setIsHovering(false);
+  };
+  return /* @__PURE__ */ jsx11(
+    Primitive3.div,
+    {
+      ...rest,
+      ref,
+      onMouseEnter: composeEventHandlers4(onMouseEnter, handleMouseEnter),
+      onMouseLeave: composeEventHandlers4(onMouseLeave, handleMouseLeave)
+    }
+  );
+});
+MessagePrimitiveRoot.displayName = "MessagePrimitive.Root";
 
 // src/primitives/message/MessageIf.tsx
-var MessageIf = ({ children, ...query }) => {
+var MessagePrimitiveIf = ({
+  children,
+  ...query
+}) => {
   const result = useMessageIf(query);
   return result ? children : null;
 };
+MessagePrimitiveIf.displayName = "MessagePrimitive.If";
 
 // src/primitives/message/MessageContent.tsx
 import { memo as memo2 } from "react";
 
 // src/context/providers/ContentPartProvider.tsx
-import { useEffect as useEffect4, useState as useState4 } from "react";
-import { create as create7 } from "zustand";
+import { useEffect as useEffect7, useState as useState4 } from "react";
+import { create as create8 } from "zustand";
 import { jsx as jsx12 } from "react/jsx-runtime";
 var syncContentPart = ({ message }, useContentPart, partIndex) => {
   const part = message.content[partIndex];
@@ -938,13 +1085,13 @@ var syncContentPart = ({ message }, useContentPart, partIndex) => {
 var useContentPartContext2 = (partIndex) => {
   const { useMessage } = useMessageContext();
   const [context] = useState4(() => {
-    const useContentPart = create7(
+    const useContentPart = create8(
       () => ({})
     );
     syncContentPart(useMessage.getState(), useContentPart, partIndex);
     return { useContentPart };
   });
-  useEffect4(() => {
+  useEffect7(() => {
     syncContentPart(useMessage.getState(), context.useContentPart, partIndex);
     return useMessage.subscribe((message) => {
       syncContentPart(message, context.useContentPart, partIndex);
@@ -961,36 +1108,38 @@ var ContentPartProvider = ({
 };
 
 // src/primitives/contentPart/ContentPartDisplay.tsx
-var ContentPartDisplay = () => {
+var ContentPartPrimitiveDisplay = () => {
   const display = useContentPartDisplay();
   return display ?? null;
 };
+ContentPartPrimitiveDisplay.displayName = "ContentPartPrimitive.Display";
 
 // src/primitives/contentPart/ContentPartInProgressIndicator.tsx
-var ContentPartInProgressIndicator = () => {
+var ContentPartPrimitiveInProgressIndicator = () => {
   const indicator = useContentPartInProgressIndicator();
   return indicator;
 };
+ContentPartPrimitiveInProgressIndicator.displayName = "ContentPartPrimitive.InProgressIndicator";
 
 // src/primitives/contentPart/ContentPartText.tsx
 import { Primitive as Primitive4 } from "@radix-ui/react-primitive";
 import { forwardRef as forwardRef6 } from "react";
 import { jsx as jsx13 } from "react/jsx-runtime";
-var ContentPartText = forwardRef6((props, forwardedRef) => {
+var ContentPartPrimitiveText = forwardRef6((props, forwardedRef) => {
   const text = useContentPartText();
   return /* @__PURE__ */ jsx13(Primitive4.p, { ...props, ref: forwardedRef, children: text });
 });
-ContentPartText.displayName = "ContentPartText";
+ContentPartPrimitiveText.displayName = "ContentPartPrimitive.Text";
 
 // src/primitives/message/MessageContent.tsx
 import { Fragment as Fragment3, jsx as jsx14, jsxs as jsxs2 } from "react/jsx-runtime";
 var defaultComponents = {
   Text: () => /* @__PURE__ */ jsxs2(Fragment3, { children: [
-    /* @__PURE__ */ jsx14(ContentPartText, { style: { whiteSpace: "pre-line" } }),
-    /* @__PURE__ */ jsx14(ContentPartInProgressIndicator, {})
+    /* @__PURE__ */ jsx14(ContentPartPrimitiveText, { style: { whiteSpace: "pre-line" } }),
+    /* @__PURE__ */ jsx14(ContentPartPrimitiveInProgressIndicator, {})
   ] }),
   Image: () => null,
-  UI: () => /* @__PURE__ */ jsx14(ContentPartDisplay, {}),
+  UI: () => /* @__PURE__ */ jsx14(ContentPartPrimitiveDisplay, {}),
   tools: {
     Fallback: (props) => {
       const { useToolUIs } = useAssistantContext();
@@ -1039,7 +1188,9 @@ var MessageContentPart = memo2(
   MessageContentPartImpl,
   (prev, next) => prev.partIndex === next.partIndex && prev.components?.Text === next.components?.Text && prev.components?.Image === next.components?.Image && prev.components?.UI === next.components?.UI && prev.components?.tools === next.components?.tools
 );
-var MessageContent = ({ components }) => {
+var MessagePrimitiveContent = ({
+  components
+}) => {
   const { useMessage } = useMessageContext();
   const contentLength = useMessage((s) => s.message.content.length);
   return new Array(contentLength).fill(null).map((_, idx) => {
@@ -1054,38 +1205,42 @@ var MessageContent = ({ components }) => {
     );
   });
 };
+MessagePrimitiveContent.displayName = "MessagePrimitive.Content";
 
 // src/primitives/message/MessageInProgress.tsx
 import { Primitive as Primitive5 } from "@radix-ui/react-primitive";
 import {
   forwardRef as forwardRef7,
-  useMemo as useMemo3
+  useEffect as useEffect8
 } from "react";
 import { jsx as jsx15 } from "react/jsx-runtime";
-var MessageInProgress = forwardRef7((props, ref) => {
+var MessagePrimitiveInProgress = forwardRef7((props, ref) => {
   const { useMessageUtils } = useMessageContext();
-  useMemo3(() => {
+  useEffect8(() => {
     useMessageUtils.getState().setInProgressIndicator(/* @__PURE__ */ jsx15(Primitive5.span, { ...props, ref }));
+    return () => {
+      useMessageUtils.getState().setInProgressIndicator(null);
+    };
   }, [useMessageUtils, props, ref]);
   return null;
 });
-MessageInProgress.displayName = "MessageInProgress";
+MessagePrimitiveInProgress.displayName = "MessagePrimitive.InProgress";
 
 // src/primitives/branchPicker/BranchPickerRoot.tsx
 import { jsx as jsx16 } from "react/jsx-runtime";
-var BranchPickerRoot = forwardRef8(({ hideWhenSingleBranch, ...rest }, ref) => {
-  return /* @__PURE__ */ jsx16(MessageIf, { hasBranches: hideWhenSingleBranch ? true : void 0, children: /* @__PURE__ */ jsx16(Primitive6.div, { ...rest, ref }) });
+var BranchPickerPrimitiveRoot = forwardRef8(({ hideWhenSingleBranch, ...rest }, ref) => {
+  return /* @__PURE__ */ jsx16(MessagePrimitiveIf, { hasBranches: hideWhenSingleBranch ? true : void 0, children: /* @__PURE__ */ jsx16(Primitive6.div, { ...rest, ref }) });
 });
-BranchPickerRoot.displayName = "BranchPickerRoot";
+BranchPickerPrimitiveRoot.displayName = "BranchPickerPrimitive.Root";
 
 // src/primitives/composer/index.ts
 var composer_exports = {};
 __export(composer_exports, {
-  Cancel: () => ComposerCancel,
-  If: () => ComposerIf,
-  Input: () => ComposerInput,
-  Root: () => ComposerRoot,
-  Send: () => ComposerSend
+  Cancel: () => ComposerPrimitiveCancel,
+  If: () => ComposerPrimitiveIf,
+  Input: () => ComposerPrimitiveInput,
+  Root: () => ComposerPrimitiveRoot,
+  Send: () => ComposerPrimitiveSend
 });
 
 // src/primitives/composer/ComposerRoot.tsx
@@ -1095,25 +1250,23 @@ import {
   forwardRef as forwardRef9
 } from "react";
 import { jsx as jsx17 } from "react/jsx-runtime";
-var ComposerRoot = forwardRef9(
-  ({ onSubmit, ...rest }, forwardedRef) => {
-    const send = useComposerSend();
-    const handleSubmit = (e) => {
-      if (!send) return;
-      e.preventDefault();
-      send();
-    };
-    return /* @__PURE__ */ jsx17(
-      Primitive7.form,
-      {
-        ...rest,
-        ref: forwardedRef,
-        onSubmit: composeEventHandlers5(onSubmit, handleSubmit)
-      }
-    );
-  }
-);
-ComposerRoot.displayName = "ComposerRoot";
+var ComposerPrimitiveRoot = forwardRef9(({ onSubmit, ...rest }, forwardedRef) => {
+  const send = useComposerSend();
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    if (!send) return;
+    send();
+  };
+  return /* @__PURE__ */ jsx17(
+    Primitive7.form,
+    {
+      ...rest,
+      ref: forwardedRef,
+      onSubmit: composeEventHandlers5(onSubmit, handleSubmit)
+    }
+  );
+});
+ComposerPrimitiveRoot.displayName = "ComposerPrimitive.Root";
 
 // src/primitives/composer/ComposerInput.tsx
 import { composeEventHandlers as composeEventHandlers6 } from "@radix-ui/primitive";
@@ -1121,14 +1274,14 @@ import { useComposedRefs } from "@radix-ui/react-compose-refs";
 import { Slot } from "@radix-ui/react-slot";
 import {
   forwardRef as forwardRef10,
-  useCallback as useCallback10,
-  useEffect as useEffect5,
+  useCallback as useCallback13,
+  useEffect as useEffect9,
   useRef as useRef3
 } from "react";
 import TextareaAutosize from "react-textarea-autosize";
 import { useEscapeKeydown } from "@radix-ui/react-use-escape-keydown";
 import { jsx as jsx18 } from "react/jsx-runtime";
-var ComposerInput = forwardRef10(
+var ComposerPrimitiveInput = forwardRef10(
   ({ autoFocus = false, asChild, disabled, onChange, onKeyDown, ...rest }, forwardedRef) => {
     const { useThread } = useThreadContext();
     const { useComposer, type } = useComposerContext();
@@ -1156,7 +1309,7 @@ var ComposerInput = forwardRef10(
       }
     };
     const autoFocusEnabled = autoFocus && !disabled;
-    const focus = useCallback10(() => {
+    const focus = useCallback13(() => {
       const textarea = textareaRef.current;
       if (!textarea || !autoFocusEnabled) return;
       textarea.focus({ preventScroll: true });
@@ -1165,7 +1318,7 @@ var ComposerInput = forwardRef10(
         textareaRef.current.value.length
       );
     }, [autoFocusEnabled]);
-    useEffect5(() => focus(), [focus]);
+    useEffect9(() => focus(), [focus]);
     useOnComposerFocus(() => {
       if (type === "new") {
         focus();
@@ -1188,94 +1341,101 @@ var ComposerInput = forwardRef10(
     );
   }
 );
-ComposerInput.displayName = "ComposerInput";
+ComposerPrimitiveInput.displayName = "ComposerPrimitive.Input";
 
 // src/primitives/composer/ComposerSend.tsx
 import { forwardRef as forwardRef11 } from "react";
 import { Primitive as Primitive8 } from "@radix-ui/react-primitive";
 import { jsx as jsx19 } from "react/jsx-runtime";
-var ComposerSend = forwardRef11(
-  ({ disabled, ...rest }, ref) => {
-    const { useComposer } = useComposerContext();
-    const hasValue = useComposer((c) => c.isEditing && c.value.length > 0);
-    return /* @__PURE__ */ jsx19(
-      Primitive8.button,
-      {
-        type: "submit",
-        ...rest,
-        ref,
-        disabled: disabled || !hasValue
-      }
-    );
-  }
-);
-ComposerSend.displayName = "ComposerSend";
+var ComposerPrimitiveSend = forwardRef11(({ disabled, ...rest }, ref) => {
+  const { useComposer } = useComposerContext();
+  const hasValue = useComposer((c) => c.isEditing && c.value.length > 0);
+  return /* @__PURE__ */ jsx19(
+    Primitive8.button,
+    {
+      type: "submit",
+      ...rest,
+      ref,
+      disabled: disabled || !hasValue
+    }
+  );
+});
+ComposerPrimitiveSend.displayName = "ComposerPrimitive.Send";
 
 // src/primitives/composer/ComposerCancel.tsx
-var ComposerCancel = createActionButton(
-  "ComposerCancel",
+var ComposerPrimitiveCancel = createActionButton(
+  "ComposerPrimitive.Cancel",
   useComposerCancel
 );
 
 // src/primitives/composer/ComposerIf.tsx
-var ComposerIf = ({ children, ...query }) => {
+var ComposerPrimitiveIf = ({
+  children,
+  ...query
+}) => {
   const result = useComposerIf(query);
   return result ? children : null;
 };
+ComposerPrimitiveIf.displayName = "ComposerPrimitive.If";
 
 // src/primitives/contentPart/index.ts
 var contentPart_exports = {};
 __export(contentPart_exports, {
-  Display: () => ContentPartDisplay,
-  Image: () => ContentPartImage,
-  InProgressIndicator: () => ContentPartInProgressIndicator,
-  Text: () => ContentPartText
+  Display: () => ContentPartPrimitiveDisplay,
+  Image: () => ContentPartPrimitiveImage,
+  InProgressIndicator: () => ContentPartPrimitiveInProgressIndicator,
+  Text: () => ContentPartPrimitiveText
 });
 
 // src/primitives/contentPart/ContentPartImage.tsx
 import { Primitive as Primitive9 } from "@radix-ui/react-primitive";
 import { forwardRef as forwardRef12 } from "react";
 import { jsx as jsx20 } from "react/jsx-runtime";
-var ContentPartImage = forwardRef12((props, forwardedRef) => {
+var ContentPartPrimitiveImage = forwardRef12((props, forwardedRef) => {
   const image = useContentPartImage();
   return /* @__PURE__ */ jsx20(Primitive9.img, { src: image, ...props, ref: forwardedRef });
 });
-ContentPartImage.displayName = "ContentPartImage";
+ContentPartPrimitiveImage.displayName = "ContentPartPrimitive.Image";
 
 // src/primitives/thread/index.ts
 var thread_exports = {};
 __export(thread_exports, {
-  Empty: () => ThreadEmpty,
-  If: () => ThreadIf,
-  Messages: () => ThreadMessages,
-  Root: () => ThreadRoot,
-  ScrollToBottom: () => ThreadScrollToBottom,
-  Suggestion: () => ThreadSuggestion,
-  Viewport: () => ThreadViewport
+  Empty: () => ThreadPrimitiveEmpty,
+  If: () => ThreadPrimitiveIf,
+  Messages: () => ThreadPrimitiveMessages,
+  Root: () => ThreadPrimitiveRoot,
+  ScrollToBottom: () => ThreadPrimitiveScrollToBottom,
+  Suggestion: () => ThreadPrimitiveSuggestion,
+  Viewport: () => ThreadPrimitiveViewport
 });
 
 // src/primitives/thread/ThreadRoot.tsx
 import { Primitive as Primitive10 } from "@radix-ui/react-primitive";
 import { forwardRef as forwardRef13 } from "react";
 import { jsx as jsx21 } from "react/jsx-runtime";
-var ThreadRoot = forwardRef13(
-  (props, ref) => {
-    return /* @__PURE__ */ jsx21(Primitive10.div, { ...props, ref });
-  }
-);
-ThreadRoot.displayName = "ThreadRoot";
+var ThreadPrimitiveRoot = forwardRef13((props, ref) => {
+  return /* @__PURE__ */ jsx21(Primitive10.div, { ...props, ref });
+});
+ThreadPrimitiveRoot.displayName = "ThreadPrimitive.Root";
 
 // src/primitives/thread/ThreadEmpty.tsx
-var ThreadEmpty = ({ children }) => {
+var ThreadPrimitiveEmpty = ({
+  children
+}) => {
   const empty = useThreadEmpty();
   return empty ? children : null;
 };
+ThreadPrimitiveEmpty.displayName = "ThreadPrimitive.Empty";
 
 // src/primitives/thread/ThreadIf.tsx
-var ThreadIf = ({ children, ...query }) => {
+var ThreadPrimitiveIf = ({
+  children,
+  ...query
+}) => {
   const result = useThreadIf(query);
   return result ? children : null;
 };
+ThreadPrimitiveIf.displayName = "ThreadPrimitive.If";
 
 // src/primitives/thread/ThreadViewport.tsx
 import { useComposedRefs as useComposedRefs3 } from "@radix-ui/react-compose-refs";
@@ -1288,13 +1448,13 @@ import { useRef as useRef5 } from "react";
 
 // src/utils/hooks/useOnResizeContent.tsx
 import { useCallbackRef as useCallbackRef2 } from "@radix-ui/react-use-callback-ref";
-import { useCallback as useCallback12 } from "react";
+import { useCallback as useCallback15 } from "react";
 
 // src/utils/hooks/useManagedRef.ts
-import { useCallback as useCallback11, useRef as useRef4 } from "react";
+import { useCallback as useCallback14, useRef as useRef4 } from "react";
 var useManagedRef = (callback) => {
   const cleanupRef = useRef4();
-  const ref = useCallback11(
+  const ref = useCallback14(
     (el) => {
       if (cleanupRef.current) {
         cleanupRef.current();
@@ -1311,7 +1471,7 @@ var useManagedRef = (callback) => {
 // src/utils/hooks/useOnResizeContent.tsx
 var useOnResizeContent = (callback) => {
   const callbackRef = useCallbackRef2(callback);
-  const refCallback = useCallback12(
+  const refCallback = useCallback15(
     (el) => {
       const resizeObserver = new ResizeObserver(() => {
         callbackRef();
@@ -1348,11 +1508,11 @@ var useOnResizeContent = (callback) => {
 
 // src/utils/hooks/useOnScrollToBottom.tsx
 import { useCallbackRef as useCallbackRef3 } from "@radix-ui/react-use-callback-ref";
-import { useEffect as useEffect6 } from "react";
+import { useEffect as useEffect10 } from "react";
 var useOnScrollToBottom = (callback) => {
   const callbackRef = useCallbackRef3(callback);
   const { useViewport } = useThreadContext();
-  useEffect6(() => {
+  useEffect10(() => {
     return useViewport.getState().onScrollToBottom(() => {
       callbackRef();
     });
@@ -1414,28 +1574,28 @@ var useThreadViewportAutoScroll = ({
 
 // src/primitives/thread/ThreadViewport.tsx
 import { jsx as jsx22 } from "react/jsx-runtime";
-var ThreadViewport = forwardRef14(({ autoScroll, onScroll, children, ...rest }, forwardedRef) => {
+var ThreadPrimitiveViewport = forwardRef14(({ autoScroll, onScroll, children, ...rest }, forwardedRef) => {
   const autoScrollRef = useThreadViewportAutoScroll({
     autoScroll
   });
   const ref = useComposedRefs3(forwardedRef, autoScrollRef);
   return /* @__PURE__ */ jsx22(Primitive11.div, { ...rest, ref, children });
 });
-ThreadViewport.displayName = "ThreadViewport";
+ThreadPrimitiveViewport.displayName = "ThreadPrimitive.Viewport";
 
 // src/primitives/thread/ThreadMessages.tsx
 import { memo as memo3 } from "react";
 
 // src/context/providers/MessageProvider.tsx
-import { useEffect as useEffect7, useState as useState5 } from "react";
-import { create as create10 } from "zustand";
+import { useEffect as useEffect11, useState as useState5 } from "react";
+import { create as create11 } from "zustand";
 
 // src/context/stores/EditComposer.ts
-import { create as create8 } from "zustand";
+import { create as create9 } from "zustand";
 var makeEditComposerStore = ({
   onEdit,
   onSend
-}) => create8()((set, get, store) => ({
+}) => create9()((set, get, store) => ({
   ...makeBaseComposer(set, get, store),
   isEditing: false,
   edit: () => {
@@ -1455,8 +1615,8 @@ var makeEditComposerStore = ({
 }));
 
 // src/context/stores/MessageUtils.ts
-import { create as create9 } from "zustand";
-var makeMessageUtilsStore = () => create9((set) => ({
+import { create as create10 } from "zustand";
+var makeMessageUtilsStore = () => create10((set) => ({
   inProgressIndicator: null,
   setInProgressIndicator: (value) => {
     set({ inProgressIndicator: value });
@@ -1495,7 +1655,7 @@ var syncMessage = (thread, getBranches, useMessage, messageIndex) => {
 var useMessageContext2 = (messageIndex) => {
   const { useThread, useThreadActions } = useThreadContext();
   const [context] = useState5(() => {
-    const useMessage = create10(() => ({}));
+    const useMessage = create11(() => ({}));
     const useMessageUtils = makeMessageUtilsStore();
     const useEditComposer = makeEditComposerStore({
       onEdit: () => {
@@ -1531,7 +1691,7 @@ var useMessageContext2 = (messageIndex) => {
     );
     return { useMessage, useMessageUtils, useEditComposer };
   });
-  useEffect7(() => {
+  useEffect11(() => {
     return useThread.subscribe((thread) => {
       syncMessage(
         thread,
@@ -1566,18 +1726,20 @@ var ThreadMessageImpl = ({
 }) => {
   const { UserMessage, EditComposer, AssistantMessage } = getComponents(components);
   return /* @__PURE__ */ jsxs3(MessageProvider, { messageIndex, children: [
-    /* @__PURE__ */ jsxs3(MessageIf, { user: true, children: [
-      /* @__PURE__ */ jsx24(ComposerIf, { editing: false, children: /* @__PURE__ */ jsx24(UserMessage, {}) }),
-      /* @__PURE__ */ jsx24(ComposerIf, { editing: true, children: /* @__PURE__ */ jsx24(EditComposer, {}) })
+    /* @__PURE__ */ jsxs3(MessagePrimitiveIf, { user: true, children: [
+      /* @__PURE__ */ jsx24(ComposerPrimitiveIf, { editing: false, children: /* @__PURE__ */ jsx24(UserMessage, {}) }),
+      /* @__PURE__ */ jsx24(ComposerPrimitiveIf, { editing: true, children: /* @__PURE__ */ jsx24(EditComposer, {}) })
     ] }),
-    /* @__PURE__ */ jsx24(MessageIf, { assistant: true, children: /* @__PURE__ */ jsx24(AssistantMessage, {}) })
+    /* @__PURE__ */ jsx24(MessagePrimitiveIf, { assistant: true, children: /* @__PURE__ */ jsx24(AssistantMessage, {}) })
   ] });
 };
 var ThreadMessage = memo3(
   ThreadMessageImpl,
   (prev, next) => prev.messageIndex === next.messageIndex && prev.components.UserMessage === next.components.UserMessage && prev.components.EditComposer === next.components.EditComposer && prev.components.AssistantMessage === next.components.AssistantMessage
 );
-var ThreadMessages = ({ components }) => {
+var ThreadPrimitiveMessages = ({
+  components
+}) => {
   const { useThread } = useThreadContext();
   const messagesLength = useThread((t) => t.messages.length);
   if (messagesLength === 0) return null;
@@ -1593,16 +1755,17 @@ var ThreadMessages = ({ components }) => {
     );
   });
 };
+ThreadPrimitiveMessages.displayName = "ThreadPrimitive.Messages";
 
 // src/primitives/thread/ThreadScrollToBottom.tsx
-var ThreadScrollToBottom = createActionButton(
-  "ThreadScrollToBottom",
+var ThreadPrimitiveScrollToBottom = createActionButton(
+  "ThreadPrimitive.ScrollToBottom",
   useThreadScrollToBottom
 );
 
 // src/primitives/thread/ThreadSuggestion.tsx
-var ThreadSuggestion = createActionButton(
-  "ThreadSuggestion",
+var ThreadPrimitiveSuggestion = createActionButton(
+  "ThreadPrimitive.Suggestion",
   useThreadSuggestion
 );
 
@@ -1769,13 +1932,91 @@ var MessageRepository = class {
   }
 };
 
+// src/runtime/core/BaseAssistantRuntime.tsx
+var BaseAssistantRuntime = class {
+  constructor(_thread) {
+    this._thread = _thread;
+    this._thread = _thread;
+    this._unsubscribe = this._thread.subscribe(this.subscriptionHandler);
+  }
+  _unsubscribe;
+  get thread() {
+    return this._thread;
+  }
+  set thread(thread) {
+    this._unsubscribe();
+    this._thread = thread;
+    this._unsubscribe = this._thread.subscribe(this.subscriptionHandler);
+    this.subscriptionHandler();
+  }
+  get messages() {
+    return this.thread.messages;
+  }
+  get isRunning() {
+    return this.thread.isRunning;
+  }
+  getBranches(messageId) {
+    return this.thread.getBranches(messageId);
+  }
+  switchToBranch(branchId) {
+    return this.thread.switchToBranch(branchId);
+  }
+  append(message) {
+    return this.thread.append(message);
+  }
+  startRun(parentId) {
+    return this.thread.startRun(parentId);
+  }
+  cancelRun() {
+    return this.thread.cancelRun();
+  }
+  addToolResult(toolCallId, result) {
+    return this.thread.addToolResult(toolCallId, result);
+  }
+  _subscriptions = /* @__PURE__ */ new Set();
+  subscribe(callback) {
+    this._subscriptions.add(callback);
+    return () => this._subscriptions.delete(callback);
+  }
+  subscriptionHandler = () => {
+    for (const callback of this._subscriptions) callback();
+  };
+  get unstable_synchronizer() {
+    return this.thread.unstable_synchronizer;
+  }
+};
+
 // src/runtime/local/LocalRuntime.tsx
-var LocalRuntime = class {
+var LocalRuntime = class extends BaseAssistantRuntime {
+  _configProviders;
   constructor(adapter) {
+    const configProviders = /* @__PURE__ */ new Set();
+    super(new LocalThreadRuntime(configProviders, adapter));
+    this._configProviders = configProviders;
+  }
+  set adapter(adapter) {
+    this.thread.adapter = adapter;
+  }
+  registerModelConfigProvider(provider) {
+    this._configProviders.add(provider);
+    return () => this._configProviders.delete(provider);
+  }
+  switchToThread(threadId) {
+    if (threadId) {
+      throw new Error("LocalRuntime does not yet support switching threads");
+    }
+    return this.thread = new LocalThreadRuntime(
+      this._configProviders,
+      this.thread.adapter
+    );
+  }
+};
+var LocalThreadRuntime = class {
+  constructor(_configProviders, adapter) {
+    this._configProviders = _configProviders;
     this.adapter = adapter;
   }
   _subscriptions = /* @__PURE__ */ new Set();
-  _configProviders = /* @__PURE__ */ new Set();
   abortController = null;
   repository = new MessageRepository();
   get messages() {
@@ -1854,12 +2095,8 @@ var LocalRuntime = class {
     this._subscriptions.add(callback);
     return () => this._subscriptions.delete(callback);
   }
-  registerModelConfigProvider(provider) {
-    this._configProviders.add(provider);
-    return () => this._configProviders.delete(provider);
-  }
   addToolResult() {
-    throw new Error("LocalRuntime does not yet support tool results");
+    throw new Error("LocalRuntime does not yet support adding tool results");
   }
 };
 
@@ -1872,78 +2109,10 @@ var useLocalRuntime = (adapter) => {
   return runtime;
 };
 
-// src/model-config/useAssistantTool.tsx
-import { useEffect as useEffect8 } from "react";
-var useAssistantTool = (tool) => {
-  const { useModelConfig, useToolUIs } = useAssistantContext();
-  const registerModelConfigProvider = useModelConfig(
-    (s) => s.registerModelConfigProvider
-  );
-  const setToolUI = useToolUIs((s) => s.setToolUI);
-  useEffect8(() => {
-    const { toolName, render, ...rest } = tool;
-    const config = {
-      tools: {
-        [tool.toolName]: rest
-      }
-    };
-    const unsub1 = registerModelConfigProvider(() => config);
-    const unsub2 = render ? setToolUI(toolName, render) : void 0;
-    return () => {
-      unsub1();
-      unsub2?.();
-    };
-  }, [registerModelConfigProvider, setToolUI, tool]);
-};
-
-// src/model-config/makeAssistantTool.tsx
-var makeAssistantTool = (tool) => {
-  const Tool = () => {
-    useAssistantTool(tool);
-    return null;
-  };
-  return Tool;
-};
-
-// src/model-config/useAssistantToolUI.tsx
-import { useEffect as useEffect9 } from "react";
-var useAssistantToolUI = (tool) => {
-  const { useToolUIs } = useAssistantContext();
-  const setToolUI = useToolUIs((s) => s.setToolUI);
-  useEffect9(() => {
-    if (!tool) return;
-    const { toolName, render } = tool;
-    return setToolUI(toolName, render);
-  }, [setToolUI, tool]);
-};
-
-// src/model-config/makeAssistantToolUI.tsx
-var makeAssistantToolUI = (tool) => {
-  const ToolUI = () => {
-    useAssistantToolUI(tool);
-    return null;
-  };
-  return ToolUI;
-};
-
-// src/model-config/useAssistantInstructions.tsx
-import { useEffect as useEffect10 } from "react";
-var useAssistantInstructions = (instruction) => {
-  const { useModelConfig } = useAssistantContext();
-  const registerModelConfigProvider = useModelConfig(
-    (s) => s.registerModelConfigProvider
-  );
-  useEffect10(() => {
-    const config = {
-      system: instruction
-    };
-    return registerModelConfigProvider(() => config);
-  }, [registerModelConfigProvider, instruction]);
-};
-
 // src/internal.ts
 var internal_exports = {};
 __export(internal_exports, {
+  BaseAssistantRuntime: () => BaseAssistantRuntime,
   MessageRepository: () => MessageRepository,
   ProxyConfigProvider: () => ProxyConfigProvider
 });
@@ -1962,6 +2131,7 @@ export {
   useActionBarCopy,
   useActionBarEdit,
   useActionBarReload,
+  useAppendMessage,
   useAssistantContext,
   useAssistantInstructions,
   useAssistantTool,
@@ -1982,6 +2152,7 @@ export {
   useLocalRuntime,
   useMessageContext,
   useMessageIf,
+  useSwitchToNewThread,
   useThreadContext,
   useThreadEmpty,
   useThreadIf,