@assistant-ui/react 0.2.0 → 0.2.3

package/dist/index.js

@@ -44,6 +44,7 @@ __export(src_exports, {
   useActionBarCopy: () => useActionBarCopy,
   useActionBarEdit: () => useActionBarEdit,
   useActionBarReload: () => useActionBarReload,
+  useAppendMessage: () => useAppendMessage,
   useAssistantContext: () => useAssistantContext,
   useAssistantInstructions: () => useAssistantInstructions,
   useAssistantTool: () => useAssistantTool,
@@ -59,11 +60,11 @@ __export(src_exports, {
   useContentPartContext: () => useContentPartContext,
   useContentPartDisplay: () => useContentPartDisplay,
   useContentPartImage: () => useContentPartImage,
-  useContentPartInProgressIndicator: () => useContentPartInProgressIndicator,
   useContentPartText: () => useContentPartText,
   useLocalRuntime: () => useLocalRuntime,
   useMessageContext: () => useMessageContext,
   useMessageIf: () => useMessageIf,
+  useSwitchToNewThread: () => useSwitchToNewThread,
   useThreadContext: () => useThreadContext,
   useThreadEmpty: () => useThreadEmpty,
   useThreadIf: () => useThreadIf,
@@ -72,192 +73,19 @@ __export(src_exports, {
 });
 module.exports = __toCommonJS(src_exports);
 
-// src/primitive-hooks/actionBar/useActionBarCopy.tsx
-var import_react4 = require("react");
-
-// src/context/react/MessageContext.ts
-var import_react = require("react");
-var MessageContext = (0, import_react.createContext)(null);
-var useMessageContext = () => {
-  const context = (0, import_react.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
-var import_react3 = require("react");
-
-// src/utils/combined/createCombinedStore.ts
-var import_react2 = require("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 (0, import_react2.useSyncExternalStore)(subscribe, getSnapshot, getSnapshot);
-  };
-};
-
-// src/utils/combined/useCombinedStore.ts
-var useCombinedStore = (stores, selector) => {
-  const useCombined = (0, import_react3.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 = (0, import_react4.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
-var import_react5 = require("react");
-var useActionBarEdit = () => {
-  const { useMessage, useEditComposer } = useMessageContext();
-  const disabled = useCombinedStore(
-    [useMessage, useEditComposer],
-    (m, c) => m.message.role !== "user" || c.isEditing
-  );
-  const callback = (0, import_react5.useCallback)(() => {
-    const { edit } = useEditComposer.getState();
-    edit();
-  }, [useEditComposer]);
-  if (disabled) return null;
-  return callback;
-};
-
-// src/primitive-hooks/actionBar/useActionBarReload.tsx
-var import_react7 = require("react");
-
-// src/context/react/ThreadContext.ts
-var import_react6 = require("react");
-var ThreadContext = (0, import_react6.createContext)(null);
-var useThreadContext = () => {
-  const context = (0, import_react6.useContext)(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 = (0, import_react7.useCallback)(() => {
-    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
-var import_react8 = require("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 = (0, import_react8.useCallback)(() => {
-    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
-var import_react9 = require("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 = (0, import_react9.useCallback)(() => {
-    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
-var import_react16 = require("react");
-
 // src/context/providers/AssistantRuntimeProvider.tsx
-var import_react13 = require("react");
+var import_react5 = require("react");
 
 // src/context/providers/AssistantProvider.tsx
-var import_react12 = require("react");
+var import_react4 = require("react");
 
 // src/context/react/AssistantContext.ts
-var import_react10 = require("react");
-var AssistantContext = (0, import_react10.createContext)(
+var import_react = require("react");
+var AssistantContext = (0, import_react.createContext)(
   null
 );
 var useAssistantContext = () => {
-  const context = (0, import_react10.useContext)(AssistantContext);
+  const context = (0, import_react.useContext)(AssistantContext);
   if (!context)
     throw new Error(
       "This component must be used within an AssistantRuntimeProvider."
@@ -356,7 +184,19 @@ var makeAssistantToolUIsStore = () => (0, import_zustand2.create)((set) => {
 });
 
 // src/context/providers/ThreadProvider.tsx
-var import_react11 = require("react");
+var import_react3 = require("react");
+
+// src/context/react/ThreadContext.ts
+var import_react2 = require("react");
+var ThreadContext = (0, import_react2.createContext)(null);
+var useThreadContext = () => {
+  const context = (0, import_react2.useContext)(ThreadContext);
+  if (!context)
+    throw new Error(
+      "This component must be used within an AssistantRuntimeProvider."
+    );
+  return context;
+};
 
 // src/context/stores/Composer.ts
 var import_zustand3 = require("zustand");
@@ -370,7 +210,7 @@ var makeBaseComposer = (set) => ({
 });
 
 // src/context/stores/Composer.ts
-var makeComposerStore = (useThread, useThreadActions) => {
+var makeComposerStore = (useThread, useThreadMessages, useThreadActions) => {
   const focusListeners = /* @__PURE__ */ new Set();
   return (0, import_zustand3.create)()((set, get, store) => {
     return {
@@ -380,7 +220,7 @@ var makeComposerStore = (useThread, useThreadActions) => {
         const { setValue, value } = get();
         setValue("");
         useThreadActions.getState().append({
-          parentId: useThread.getState().messages.at(-1)?.id ?? null,
+          parentId: useThreadMessages.getState().at(-1)?.id ?? null,
           role: "user",
           content: [{ type: "text", text: value }]
         });
@@ -410,7 +250,6 @@ var makeComposerStore = (useThread, useThreadActions) => {
 var import_zustand4 = require("zustand");
 var makeThreadStore = (runtimeRef) => {
   return (0, import_zustand4.create)(() => ({
-    messages: runtimeRef.current.messages,
     isRunning: runtimeRef.current.isRunning
   }));
 };
@@ -450,62 +289,91 @@ var makeThreadActionStore = (runtimeRef) => {
   );
 };
 
+// src/context/stores/ThreadMessages.ts
+var import_zustand7 = require("zustand");
+var makeThreadMessagesStore = (runtimeRef) => {
+  return (0, import_zustand7.create)(() => runtimeRef.current.messages);
+};
+
 // src/context/providers/ThreadProvider.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
 var ThreadProvider = ({
   children,
   runtime
 }) => {
-  const runtimeRef = (0, import_react11.useRef)(runtime);
-  (0, import_react11.useInsertionEffect)(() => {
+  const runtimeRef = (0, import_react3.useRef)(runtime);
+  (0, import_react3.useInsertionEffect)(() => {
     runtimeRef.current = runtime;
   });
-  const [context] = (0, import_react11.useState)(() => {
+  const [context] = (0, import_react3.useState)(() => {
     const useThread = makeThreadStore(runtimeRef);
+    const useThreadMessages = makeThreadMessagesStore(runtimeRef);
     const useThreadActions = makeThreadActionStore(runtimeRef);
     const useViewport = makeThreadViewportStore();
-    const useComposer = makeComposerStore(useThread, useThreadActions);
+    const useComposer = makeComposerStore(
+      useThread,
+      useThreadMessages,
+      useThreadActions
+    );
     return {
       useThread,
+      useThreadMessages,
       useThreadActions,
       useComposer,
       useViewport
     };
   });
-  (0, import_react11.useEffect)(() => {
+  (0, import_react3.useEffect)(() => {
     const onRuntimeUpdate = () => {
       context.useThread.setState(
         Object.freeze({
-          messages: runtimeRef.current.messages,
           isRunning: runtimeRef.current.isRunning
         }),
         true
       );
+      context.useThreadMessages.setState(Object.freeze(runtimeRef.current.messages), true);
     };
     onRuntimeUpdate();
     return runtime.subscribe(onRuntimeUpdate);
   }, [context, runtime]);
-  const RuntimeSynchronizer = runtime.unstable_synchronizer;
+  const subscribe = (0, import_react3.useCallback)(
+    (c) => runtime.subscribe(c),
+    [runtime]
+  );
+  const RuntimeSynchronizer = (0, import_react3.useSyncExternalStore)(
+    subscribe,
+    () => runtime.unstable_synchronizer,
+    () => void 0
+  );
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(ThreadContext.Provider, { value: context, children: [
     RuntimeSynchronizer && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(RuntimeSynchronizer, {}),
     children
   ] });
 };
 
+// src/context/stores/AssistantActions.tsx
+var import_zustand8 = require("zustand");
+var makeAssistantActionsStore = (runtimeRef) => (0, import_zustand8.create)(
+  () => Object.freeze({
+    switchToThread: () => runtimeRef.current.switchToThread(null)
+  })
+);
+
 // src/context/providers/AssistantProvider.tsx
 var import_jsx_runtime2 = require("react/jsx-runtime");
 var AssistantProvider = ({ children, runtime }) => {
-  const runtimeRef = (0, import_react12.useRef)(runtime);
-  (0, import_react12.useInsertionEffect)(() => {
+  const runtimeRef = (0, import_react4.useRef)(runtime);
+  (0, import_react4.useInsertionEffect)(() => {
     runtimeRef.current = runtime;
   });
-  const [context] = (0, import_react12.useState)(() => {
+  const [context] = (0, import_react4.useState)(() => {
     const useModelConfig = makeAssistantModelConfigStore();
     const useToolUIs = makeAssistantToolUIsStore();
-    return { useModelConfig, useToolUIs };
+    const useAssistantActions = makeAssistantActionsStore(runtimeRef);
+    return { useModelConfig, useToolUIs, useAssistantActions };
   });
   const getModelCOnfig = context.useModelConfig((c) => c.getModelConfig);
-  (0, import_react12.useEffect)(() => {
+  (0, import_react4.useEffect)(() => {
     return runtime.registerModelConfigProvider(getModelCOnfig);
   }, [runtime, getModelCOnfig]);
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(AssistantContext.Provider, { value: context, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ThreadProvider, { runtime, children }) });
@@ -516,14 +384,28 @@ var import_jsx_runtime3 = require("react/jsx-runtime");
 var AssistantRuntimeProviderImpl = ({ children, runtime }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(AssistantProvider, { runtime, children });
 };
-var AssistantRuntimeProvider = (0, import_react13.memo)(AssistantRuntimeProviderImpl);
+var AssistantRuntimeProvider = (0, import_react5.memo)(AssistantRuntimeProviderImpl);
+
+// src/context/react/ComposerContext.ts
+var import_react7 = require("react");
+
+// src/context/react/MessageContext.ts
+var import_react6 = require("react");
+var MessageContext = (0, import_react6.createContext)(null);
+var useMessageContext = () => {
+  const context = (0, import_react6.useContext)(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 import_react14 = require("react");
 var useComposerContext = () => {
   const { useComposer } = useThreadContext();
-  const { useEditComposer } = (0, import_react14.useContext)(MessageContext) ?? {};
-  return (0, import_react14.useMemo)(
+  const { useEditComposer } = (0, import_react7.useContext)(MessageContext) ?? {};
+  return (0, import_react7.useMemo)(
     () => ({
       useComposer: useEditComposer ?? useComposer,
       type: useEditComposer ? "edit" : "new"
@@ -533,12 +415,12 @@ var useComposerContext = () => {
 };
 
 // src/context/react/ContentPartContext.ts
-var import_react15 = require("react");
-var ContentPartContext = (0, import_react15.createContext)(
+var import_react8 = require("react");
+var ContentPartContext = (0, import_react8.createContext)(
   null
 );
 var useContentPartContext = () => {
-  const context = (0, import_react15.useContext)(ContentPartContext);
+  const context = (0, import_react8.useContext)(ContentPartContext);
   if (!context)
     throw new Error(
       "This component can only be used inside a component passed to <MessagePrimitive.Content components={...} >."
@@ -546,11 +428,267 @@ var useContentPartContext = () => {
   return context;
 };
 
+// src/hooks/useAppendMessage.tsx
+var import_react9 = require("react");
+var toAppendMessage = (useThreadMessages, message) => {
+  if (typeof message === "string") {
+    return {
+      parentId: useThreadMessages.getState().at(-1)?.id ?? null,
+      role: "user",
+      content: [{ type: "text", text: message }]
+    };
+  }
+  return {
+    parentId: message.parentId ?? useThreadMessages.getState().at(-1)?.id ?? null,
+    role: message.role ?? "user",
+    content: message.content
+  };
+};
+var useAppendMessage = () => {
+  const { useThreadMessages, useThreadActions, useViewport, useComposer } = useThreadContext();
+  const append = (0, import_react9.useCallback)(
+    (message) => {
+      const appendMessage = toAppendMessage(useThreadMessages, message);
+      useThreadActions.getState().append(appendMessage);
+      useViewport.getState().scrollToBottom();
+      useComposer.getState().focus();
+    },
+    [useThreadMessages, useThreadActions, useViewport, useComposer]
+  );
+  return append;
+};
+
+// src/hooks/useSwitchToNewThread.tsx
+var import_react10 = require("react");
+var useSwitchToNewThread = () => {
+  const { useAssistantActions } = useAssistantContext();
+  const { useComposer } = useThreadContext();
+  const switchToNewThread = (0, import_react10.useCallback)(() => {
+    useAssistantActions.getState().switchToThread(null);
+    useComposer.getState().focus();
+  }, [useAssistantActions, useComposer]);
+  return switchToNewThread;
+};
+
+// src/model-config/useAssistantTool.tsx
+var import_react11 = require("react");
+var useAssistantTool = (tool) => {
+  const { useModelConfig, useToolUIs } = useAssistantContext();
+  const registerModelConfigProvider = useModelConfig(
+    (s) => s.registerModelConfigProvider
+  );
+  const setToolUI = useToolUIs((s) => s.setToolUI);
+  (0, import_react11.useEffect)(() => {
+    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
+var import_react12 = require("react");
+var useAssistantToolUI = (tool) => {
+  const { useToolUIs } = useAssistantContext();
+  const setToolUI = useToolUIs((s) => s.setToolUI);
+  (0, import_react12.useEffect)(() => {
+    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
+var import_react13 = require("react");
+var useAssistantInstructions = (instruction) => {
+  const { useModelConfig } = useAssistantContext();
+  const registerModelConfigProvider = useModelConfig(
+    (s) => s.registerModelConfigProvider
+  );
+  (0, import_react13.useEffect)(() => {
+    const config = {
+      system: instruction
+    };
+    return registerModelConfigProvider(() => config);
+  }, [registerModelConfigProvider, instruction]);
+};
+
+// src/primitive-hooks/actionBar/useActionBarCopy.tsx
+var import_react16 = require("react");
+
+// src/utils/combined/useCombinedStore.ts
+var import_react15 = require("react");
+
+// src/utils/combined/createCombinedStore.ts
+var import_react14 = require("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 (0, import_react14.useSyncExternalStore)(subscribe, getSnapshot, getSnapshot);
+  };
+};
+
+// src/utils/combined/useCombinedStore.ts
+var useCombinedStore = (stores, selector) => {
+  const useCombined = (0, import_react15.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 = (0, import_react16.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
+var import_react17 = require("react");
+var useActionBarEdit = () => {
+  const { useMessage, useEditComposer } = useMessageContext();
+  const disabled = useCombinedStore(
+    [useMessage, useEditComposer],
+    (m, c) => m.message.role !== "user" || c.isEditing
+  );
+  const callback = (0, import_react17.useCallback)(() => {
+    const { edit } = useEditComposer.getState();
+    edit();
+  }, [useEditComposer]);
+  if (disabled) return null;
+  return callback;
+};
+
+// src/primitive-hooks/actionBar/useActionBarReload.tsx
+var import_react18 = require("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 = (0, import_react18.useCallback)(() => {
+    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
+var import_react19 = require("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 = (0, import_react19.useCallback)(() => {
+    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
+var import_react20 = require("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 = (0, import_react20.useCallback)(() => {
+    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
+var import_react21 = require("react");
 var useComposerCancel = () => {
   const { useComposer } = useComposerContext();
   const disabled = useComposer((c) => !c.isEditing);
-  const callback = (0, import_react16.useCallback)(() => {
+  const callback = (0, import_react21.useCallback)(() => {
     const { cancel } = useComposer.getState();
     cancel();
   }, [useComposer]);
@@ -569,12 +707,12 @@ var useComposerIf = (props) => {
 };
 
 // src/primitive-hooks/composer/useComposerSend.tsx
-var import_react17 = require("react");
+var import_react22 = require("react");
 var useComposerSend = () => {
   const { useViewport, useComposer: useNewComposer } = useThreadContext();
   const { useComposer } = useComposerContext();
   const disabled = useComposer((c) => !c.isEditing || c.value.length === 0);
-  const callback = (0, import_react17.useCallback)(() => {
+  const callback = (0, import_react22.useCallback)(() => {
     const composerState = useComposer.getState();
     if (!composerState.isEditing) return;
     composerState.send();
@@ -611,17 +749,6 @@ var useContentPartImage = () => {
   return image;
 };
 
-// src/primitive-hooks/contentPart/useContentPartInProgressIndicator.tsx
-var useContentPartInProgressIndicator = () => {
-  const { useMessageUtils } = useMessageContext();
-  const { useContentPart } = useContentPartContext();
-  const indicator = useCombinedStore(
-    [useMessageUtils, useContentPart],
-    (m, c) => c.status === "in_progress" ? m.inProgressIndicator : null
-  );
-  return indicator;
-};
-
 // src/primitive-hooks/contentPart/useContentPartText.tsx
 var useContentPartText = () => {
   const { useContentPart } = useContentPartContext();
@@ -654,14 +781,17 @@ var useMessageIf = (props) => {
 
 // src/primitive-hooks/thread/useThreadIf.tsx
 var useThreadIf = (props) => {
-  const { useThread } = useThreadContext();
-  return useThread((thread) => {
-    if (props.empty === true && thread.messages.length !== 0) return false;
-    if (props.empty === false && thread.messages.length === 0) return false;
-    if (props.running === true && !thread.isRunning) return false;
-    if (props.running === false && thread.isRunning) return false;
-    return true;
-  });
+  const { useThread, useThreadMessages } = useThreadContext();
+  return useCombinedStore(
+    [useThread, useThreadMessages],
+    (thread, messages) => {
+      if (props.empty === true && messages.length !== 0) return false;
+      if (props.empty === false && messages.length === 0) return false;
+      if (props.running === true && !thread.isRunning) return false;
+      if (props.running === false && thread.isRunning) return false;
+      return true;
+    }
+  );
 };
 
 // src/primitive-hooks/thread/useThreadEmpty.tsx
@@ -670,11 +800,11 @@ var useThreadEmpty = () => {
 };
 
 // src/primitive-hooks/thread/useThreadScrollToBottom.tsx
-var import_react18 = require("react");
+var import_react23 = require("react");
 var useThreadScrollToBottom = () => {
   const { useComposer, useViewport } = useThreadContext();
   const isAtBottom = useViewport((s) => s.isAtBottom);
-  const handleScrollToBottom = (0, import_react18.useCallback)(() => {
+  const handleScrollToBottom = (0, import_react23.useCallback)(() => {
     useViewport.getState().scrollToBottom();
     useComposer.getState().focus();
   }, [useViewport, useComposer]);
@@ -683,14 +813,14 @@ var useThreadScrollToBottom = () => {
 };
 
 // src/primitive-hooks/thread/useThreadSuggestion.tsx
-var import_react19 = require("react");
+var import_react24 = require("react");
 var useThreadSuggestion = ({
   prompt,
   autoSend
 }) => {
   const { useThread, useComposer } = useThreadContext();
   const disabled = useThread((t) => t.isRunning);
-  const callback = (0, import_react19.useCallback)(() => {
+  const callback = (0, import_react24.useCallback)(() => {
     const thread = useThread.getState();
     const composer = useComposer.getState();
     composer.setValue(prompt);
@@ -705,16 +835,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
 var import_react_primitive = require("@radix-ui/react-primitive");
-var import_react20 = require("react");
-var import_jsx_runtime4 = require("react/jsx-runtime");
+var import_react25 = require("react");
+
+// src/primitives/actionBar/useActionBarFloatStatus.tsx
 var useActionBarFloatStatus = ({
   hideWhenRunning,
   autohide,
@@ -735,7 +866,10 @@ var useActionBarFloatStatus = ({
     }
   );
 };
-var ActionBarRoot = (0, import_react20.forwardRef)(({ hideWhenRunning, autohide, autohideFloat, ...rest }, ref) => {
+
+// src/primitives/actionBar/ActionBarRoot.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var ActionBarPrimitiveRoot = (0, import_react25.forwardRef)(({ hideWhenRunning, autohide, autohideFloat, ...rest }, ref) => {
   const hideAndfloatStatus = useActionBarFloatStatus({
     hideWhenRunning,
     autohide,
@@ -751,15 +885,15 @@ var ActionBarRoot = (0, import_react20.forwardRef)(({ hideWhenRunning, autohide,
     }
   );
 });
-ActionBarRoot.displayName = "ActionBarRoot";
+ActionBarPrimitiveRoot.displayName = "ActionBarPrimitive.Root";
 
 // src/utils/createActionButton.tsx
 var import_primitive = require("@radix-ui/primitive");
 var import_react_primitive2 = require("@radix-ui/react-primitive");
-var import_react21 = require("react");
+var import_react26 = require("react");
 var import_jsx_runtime5 = require("react/jsx-runtime");
 var createActionButton = (displayName, useActionButton) => {
-  const ActionButton = (0, import_react21.forwardRef)((props, forwardedRef) => {
+  const ActionButton = (0, import_react26.forwardRef)((props, forwardedRef) => {
     const callback = useActionButton(props);
     return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
       import_react_primitive2.Primitive.button,
@@ -779,61 +913,64 @@ 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
-var import_react23 = require("react");
-var PopoverPrimitive = __toESM(require("@radix-ui/react-popover"));
+var import_react28 = require("react");
+var PopoverPrimitive2 = __toESM(require("@radix-ui/react-popover"));
 var import_primitive2 = require("@radix-ui/primitive");
 
 // src/utils/hooks/useOnComposerFocus.tsx
 var import_react_use_callback_ref = require("@radix-ui/react-use-callback-ref");
-var import_react22 = require("react");
+var import_react27 = require("react");
 var useOnComposerFocus = (callback) => {
   const callbackRef = (0, import_react_use_callback_ref.useCallbackRef)(callback);
   const { useComposer } = useThreadContext();
-  (0, import_react22.useEffect)(() => {
+  (0, import_react27.useEffect)(() => {
     return useComposer.getState().onFocus(() => {
       callbackRef();
     });
   }, [useComposer, callbackRef]);
 };
 
+// src/primitives/assistantModal/scope.tsx
+var PopoverPrimitive = __toESM(require("@radix-ui/react-popover"));
+var usePopoverScope = PopoverPrimitive.createPopoverScope();
+
 // src/primitives/assistantModal/AssistantModalRoot.tsx
 var import_jsx_runtime6 = require("react/jsx-runtime");
-var usePopoverScope = PopoverPrimitive.createPopoverScope();
 var useAssistantModalOpenState = (defaultOpen = false) => {
-  const state = (0, import_react23.useState)(defaultOpen);
+  const state = (0, import_react28.useState)(defaultOpen);
   const [, setOpen] = state;
   useOnComposerFocus(() => {
     setOpen(true);
   });
   return state;
 };
-var AssistantModalRoot = ({
+var AssistantModalPrimitiveRoot = ({
   __scopeAssistantModal,
   defaultOpen,
   open,
@@ -843,7 +980,7 @@ var AssistantModalRoot = ({
   const scope = usePopoverScope(__scopeAssistantModal);
   const [modalOpen, setOpen] = useAssistantModalOpenState(defaultOpen);
   return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-    PopoverPrimitive.Root,
+    PopoverPrimitive2.Root,
     {
       ...scope,
       open: open === void 0 ? modalOpen : open,
@@ -852,26 +989,29 @@ var AssistantModalRoot = ({
     }
   );
 };
-AssistantModalRoot.displayName = "AssistantModalRoot";
+AssistantModalPrimitiveRoot.displayName = "AssistantModalPrimitive.Root";
 
 // src/primitives/assistantModal/AssistantModalTrigger.tsx
-var import_react24 = require("react");
-var PopoverPrimitive2 = __toESM(require("@radix-ui/react-popover"));
+var import_react29 = require("react");
+var PopoverPrimitive3 = __toESM(require("@radix-ui/react-popover"));
 var import_jsx_runtime7 = require("react/jsx-runtime");
-var AssistantModalTrigger = (0, import_react24.forwardRef)(
-  ({ __scopeAssistantModal, ...rest }, ref) => {
+var AssistantModalPrimitiveTrigger = (0, import_react29.forwardRef)(
+  ({
+    __scopeAssistantModal,
+    ...rest
+  }, ref) => {
     const scope = usePopoverScope(__scopeAssistantModal);
-    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(PopoverPrimitive2.Trigger, { ...scope, ...rest, ref });
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(PopoverPrimitive3.Trigger, { ...scope, ...rest, ref });
   }
 );
-AssistantModalTrigger.displayName = "AssistantModalTrigger";
+AssistantModalPrimitiveTrigger.displayName = "AssistantModalPrimitive.Trigger";
 
 // src/primitives/assistantModal/AssistantModalContent.tsx
-var import_react25 = require("react");
-var PopoverPrimitive3 = __toESM(require("@radix-ui/react-popover"));
+var import_react30 = require("react");
+var PopoverPrimitive4 = __toESM(require("@radix-ui/react-popover"));
 var import_primitive3 = require("@radix-ui/primitive");
 var import_jsx_runtime8 = require("react/jsx-runtime");
-var AssistantModalContent = (0, import_react25.forwardRef)(
+var AssistantModalPrimitiveContent = (0, import_react30.forwardRef)(
   ({
     __scopeAssistantModal,
     side,
@@ -881,8 +1021,8 @@ var AssistantModalContent = (0, import_react25.forwardRef)(
     ...props
   }, forwardedRef) => {
     const scope = usePopoverScope(__scopeAssistantModal);
-    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(PopoverPrimitive3.Portal, { ...scope, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-      PopoverPrimitive3.Content,
+    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(PopoverPrimitive4.Portal, { ...scope, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+      PopoverPrimitive4.Content,
       {
         ...scope,
         ...props,
@@ -897,97 +1037,101 @@ var AssistantModalContent = (0, import_react25.forwardRef)(
     ) });
   }
 );
-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
 var import_jsx_runtime9 = require("react/jsx-runtime");
-var BranchPickerCount = () => {
+var BranchPickerPrimitiveCount = () => {
   const branchCount = useBranchPickerCount();
   return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_jsx_runtime9.Fragment, { children: branchCount });
 };
+BranchPickerPrimitiveCount.displayName = "BranchPickerPrimitive.Count";
 
 // src/primitives/branchPicker/BranchPickerNumber.tsx
 var import_jsx_runtime10 = require("react/jsx-runtime");
-var BranchPickerNumber = () => {
+var BranchPickerPrimitiveNumber = () => {
   const branchNumber = useBranchPickerNumber();
   return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_jsx_runtime10.Fragment, { children: branchNumber });
 };
+BranchPickerPrimitiveNumber.displayName = "BranchPickerPrimitive.Number";
 
 // src/primitives/branchPicker/BranchPickerRoot.tsx
 var import_react_primitive6 = require("@radix-ui/react-primitive");
-var import_react31 = require("react");
+var import_react37 = require("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
 var import_primitive4 = require("@radix-ui/primitive");
 var import_react_primitive3 = require("@radix-ui/react-primitive");
-var import_react26 = require("react");
+var import_react31 = require("react");
 var import_jsx_runtime11 = require("react/jsx-runtime");
-var MessageRoot = (0, import_react26.forwardRef)(
-  ({ onMouseEnter, onMouseLeave, ...rest }, ref) => {
-    const { useMessageUtils } = useMessageContext();
-    const setIsHovering = useMessageUtils((s) => s.setIsHovering);
-    const handleMouseEnter = () => {
-      setIsHovering(true);
-    };
-    const handleMouseLeave = () => {
-      setIsHovering(false);
-    };
-    return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-      import_react_primitive3.Primitive.div,
-      {
-        ...rest,
-        ref,
-        onMouseEnter: (0, import_primitive4.composeEventHandlers)(onMouseEnter, handleMouseEnter),
-        onMouseLeave: (0, import_primitive4.composeEventHandlers)(onMouseLeave, handleMouseLeave)
-      }
-    );
-  }
-);
-MessageRoot.displayName = "MessageRoot";
+var MessagePrimitiveRoot = (0, import_react31.forwardRef)(({ onMouseEnter, onMouseLeave, ...rest }, ref) => {
+  const { useMessageUtils } = useMessageContext();
+  const setIsHovering = useMessageUtils((s) => s.setIsHovering);
+  const handleMouseEnter = () => {
+    setIsHovering(true);
+  };
+  const handleMouseLeave = () => {
+    setIsHovering(false);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+    import_react_primitive3.Primitive.div,
+    {
+      ...rest,
+      ref,
+      onMouseEnter: (0, import_primitive4.composeEventHandlers)(onMouseEnter, handleMouseEnter),
+      onMouseLeave: (0, import_primitive4.composeEventHandlers)(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
-var import_react29 = require("react");
+var import_react35 = require("react");
 
 // src/context/providers/ContentPartProvider.tsx
-var import_react27 = require("react");
-var import_zustand7 = require("zustand");
+var import_react32 = require("react");
+var import_zustand9 = require("zustand");
 var import_jsx_runtime12 = require("react/jsx-runtime");
 var syncContentPart = ({ message }, useContentPart, partIndex) => {
   const part = message.content[partIndex];
@@ -1005,14 +1149,14 @@ var syncContentPart = ({ message }, useContentPart, partIndex) => {
 };
 var useContentPartContext2 = (partIndex) => {
   const { useMessage } = useMessageContext();
-  const [context] = (0, import_react27.useState)(() => {
-    const useContentPart = (0, import_zustand7.create)(
+  const [context] = (0, import_react32.useState)(() => {
+    const useContentPart = (0, import_zustand9.create)(
       () => ({})
     );
     syncContentPart(useMessage.getState(), useContentPart, partIndex);
     return { useContentPart };
   });
-  (0, import_react27.useEffect)(() => {
+  (0, import_react32.useEffect)(() => {
     syncContentPart(useMessage.getState(), context.useContentPart, partIndex);
     return useMessage.subscribe((message) => {
       syncContentPart(message, context.useContentPart, partIndex);
@@ -1029,42 +1173,67 @@ var ContentPartProvider = ({
 };
 
 // src/primitives/contentPart/ContentPartDisplay.tsx
-var ContentPartDisplay = () => {
+var ContentPartPrimitiveDisplay = () => {
   const display = useContentPartDisplay();
   return display ?? null;
 };
+ContentPartPrimitiveDisplay.displayName = "ContentPartPrimitive.Display";
+
+// src/utils/OutPortal.tsx
+var import_react33 = require("react");
+var import_jsx_runtime13 = require("react/jsx-runtime");
+var OutPortal = ({ node }) => {
+  const parentRef = (0, import_react33.useRef)(null);
+  (0, import_react33.useLayoutEffect)(() => {
+    const parent = parentRef.current;
+    if (!parent || !node) return;
+    parent.appendChild(node);
+    return () => {
+      parent.removeChild(node);
+    };
+  }, [node]);
+  if (!node) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { ref: parentRef });
+};
 
 // src/primitives/contentPart/ContentPartInProgressIndicator.tsx
-var ContentPartInProgressIndicator = () => {
-  const indicator = useContentPartInProgressIndicator();
-  return indicator;
+var import_jsx_runtime14 = require("react/jsx-runtime");
+var ContentPartPrimitiveInProgressIndicator = () => {
+  const { useMessageUtils } = useMessageContext();
+  const { useContentPart } = useContentPartContext();
+  const indicator = useCombinedStore(
+    [useMessageUtils, useContentPart],
+    (m, c) => c.status === "in_progress" ? m.inProgressIndicator : null
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(OutPortal, { node: indicator });
 };
+ContentPartPrimitiveInProgressIndicator.displayName = "ContentPartPrimitive.InProgressIndicator";
 
 // src/primitives/contentPart/ContentPartText.tsx
 var import_react_primitive4 = require("@radix-ui/react-primitive");
-var import_react28 = require("react");
-var import_jsx_runtime13 = require("react/jsx-runtime");
-var ContentPartText = (0, import_react28.forwardRef)((props, forwardedRef) => {
+var import_react34 = require("react");
+var import_jsx_runtime15 = require("react/jsx-runtime");
+var ContentPartPrimitiveText = (0, import_react34.forwardRef)((props, forwardedRef) => {
   const text = useContentPartText();
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react_primitive4.Primitive.p, { ...props, ref: forwardedRef, children: text });
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react_primitive4.Primitive.span, { ...props, ref: forwardedRef, children: text });
 });
-ContentPartText.displayName = "ContentPartText";
+ContentPartPrimitiveText.displayName = "ContentPartPrimitive.Text";
 
 // src/primitives/message/MessageContent.tsx
-var import_jsx_runtime14 = require("react/jsx-runtime");
+var import_jsx_runtime16 = require("react/jsx-runtime");
 var defaultComponents = {
-  Text: () => /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_jsx_runtime14.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(ContentPartText, { style: { whiteSpace: "pre-line" } }),
-    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(ContentPartInProgressIndicator, {})
+  Text: () => /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("p", { style: { whiteSpace: "pre-line" }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(ContentPartPrimitiveText, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(ContentPartPrimitiveInProgressIndicator, {})
   ] }),
   Image: () => null,
-  UI: () => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(ContentPartDisplay, {}),
+  UI: () => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(ContentPartPrimitiveDisplay, {}),
   tools: {
     Fallback: (props) => {
       const { useToolUIs } = useAssistantContext();
       const Render = useToolUIs((s) => s.getToolUI(props.part.toolName));
       if (!Render) return null;
-      return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Render, { ...props });
+      return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Render, { ...props });
     }
   }
 };
@@ -1083,15 +1252,15 @@ var MessageContentPartComponent = ({
   const type = part.type;
   switch (type) {
     case "text":
-      return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Text, { part, status });
+      return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Text, { part, status });
     case "image":
-      return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Image, { part, status });
+      return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Image, { part, status });
     case "ui":
-      return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(UI, { part, status });
+      return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(UI, { part, status });
     case "tool-call": {
       const Tool = by_name[part.toolName] || Fallback;
       const addResult = (result) => addToolResult(part.toolCallId, result);
-      return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Tool, { part, status, addResult });
+      return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Tool, { part, status, addResult });
     }
     default:
       throw new Error(`Unknown content part type: ${type}`);
@@ -1101,18 +1270,20 @@ var MessageContentPartImpl = ({
   partIndex,
   components
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(ContentPartProvider, { partIndex, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(MessageContentPartComponent, { components }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(ContentPartProvider, { partIndex, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(MessageContentPartComponent, { components }) });
 };
-var MessageContentPart = (0, import_react29.memo)(
+var MessageContentPart = (0, import_react35.memo)(
   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) => {
     const partIndex = idx;
-    return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
       MessageContentPart,
       {
         partIndex,
@@ -1122,71 +1293,69 @@ var MessageContent = ({ components }) => {
     );
   });
 };
+MessagePrimitiveContent.displayName = "MessagePrimitive.Content";
 
 // src/primitives/message/MessageInProgress.tsx
+var import_react_dom = require("react-dom");
 var import_react_primitive5 = require("@radix-ui/react-primitive");
-var import_react30 = require("react");
-var import_jsx_runtime15 = require("react/jsx-runtime");
-var MessageInProgress = (0, import_react30.forwardRef)((props, ref) => {
+var import_react36 = require("react");
+var import_jsx_runtime17 = require("react/jsx-runtime");
+var MessagePrimitiveInProgress = (0, import_react36.forwardRef)((props, ref) => {
   const { useMessageUtils } = useMessageContext();
-  (0, import_react30.useMemo)(() => {
-    useMessageUtils.getState().setInProgressIndicator(/* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react_primitive5.Primitive.span, { ...props, ref }));
-  }, [useMessageUtils, props, ref]);
-  return null;
+  const portalNode = useMessageUtils((s) => s.inProgressIndicator);
+  return (0, import_react_dom.createPortal)(/* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_react_primitive5.Primitive.span, { ...props, ref }), portalNode);
 });
-MessageInProgress.displayName = "MessageInProgress";
+MessagePrimitiveInProgress.displayName = "MessagePrimitive.InProgress";
 
 // src/primitives/branchPicker/BranchPickerRoot.tsx
-var import_jsx_runtime16 = require("react/jsx-runtime");
-var BranchPickerRoot = (0, import_react31.forwardRef)(({ hideWhenSingleBranch, ...rest }, ref) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(MessageIf, { hasBranches: hideWhenSingleBranch ? true : void 0, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_react_primitive6.Primitive.div, { ...rest, ref }) });
+var import_jsx_runtime18 = require("react/jsx-runtime");
+var BranchPickerPrimitiveRoot = (0, import_react37.forwardRef)(({ hideWhenSingleBranch, ...rest }, ref) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(MessagePrimitiveIf, { hasBranches: hideWhenSingleBranch ? true : void 0, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_react_primitive6.Primitive.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
 var import_primitive5 = require("@radix-ui/primitive");
 var import_react_primitive7 = require("@radix-ui/react-primitive");
-var import_react32 = require("react");
-var import_jsx_runtime17 = require("react/jsx-runtime");
-var ComposerRoot = (0, import_react32.forwardRef)(
-  ({ onSubmit, ...rest }, forwardedRef) => {
-    const send = useComposerSend();
-    const handleSubmit = (e) => {
-      if (!send) return;
-      e.preventDefault();
-      send();
-    };
-    return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
-      import_react_primitive7.Primitive.form,
-      {
-        ...rest,
-        ref: forwardedRef,
-        onSubmit: (0, import_primitive5.composeEventHandlers)(onSubmit, handleSubmit)
-      }
-    );
-  }
-);
-ComposerRoot.displayName = "ComposerRoot";
+var import_react38 = require("react");
+var import_jsx_runtime19 = require("react/jsx-runtime");
+var ComposerPrimitiveRoot = (0, import_react38.forwardRef)(({ onSubmit, ...rest }, forwardedRef) => {
+  const send = useComposerSend();
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    if (!send) return;
+    send();
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+    import_react_primitive7.Primitive.form,
+    {
+      ...rest,
+      ref: forwardedRef,
+      onSubmit: (0, import_primitive5.composeEventHandlers)(onSubmit, handleSubmit)
+    }
+  );
+});
+ComposerPrimitiveRoot.displayName = "ComposerPrimitive.Root";
 
 // src/primitives/composer/ComposerInput.tsx
 var import_primitive6 = require("@radix-ui/primitive");
 var import_react_compose_refs = require("@radix-ui/react-compose-refs");
 var import_react_slot = require("@radix-ui/react-slot");
-var import_react33 = require("react");
+var import_react39 = require("react");
 var import_react_textarea_autosize = __toESM(require("react-textarea-autosize"));
 var import_react_use_escape_keydown = require("@radix-ui/react-use-escape-keydown");
-var import_jsx_runtime18 = require("react/jsx-runtime");
-var ComposerInput = (0, import_react33.forwardRef)(
+var import_jsx_runtime20 = require("react/jsx-runtime");
+var ComposerPrimitiveInput = (0, import_react39.forwardRef)(
   ({ autoFocus = false, asChild, disabled, onChange, onKeyDown, ...rest }, forwardedRef) => {
     const { useThread } = useThreadContext();
     const { useComposer, type } = useComposerContext();
@@ -1195,7 +1364,7 @@ var ComposerInput = (0, import_react33.forwardRef)(
       return c.value;
     });
     const Component = asChild ? import_react_slot.Slot : import_react_textarea_autosize.default;
-    const textareaRef = (0, import_react33.useRef)(null);
+    const textareaRef = (0, import_react39.useRef)(null);
     const ref = (0, import_react_compose_refs.useComposedRefs)(forwardedRef, textareaRef);
     (0, import_react_use_escape_keydown.useEscapeKeydown)((e) => {
       const composer = useComposer.getState();
@@ -1214,7 +1383,7 @@ var ComposerInput = (0, import_react33.forwardRef)(
       }
     };
     const autoFocusEnabled = autoFocus && !disabled;
-    const focus = (0, import_react33.useCallback)(() => {
+    const focus = (0, import_react39.useCallback)(() => {
       const textarea = textareaRef.current;
       if (!textarea || !autoFocusEnabled) return;
       textarea.focus({ preventScroll: true });
@@ -1223,13 +1392,13 @@ var ComposerInput = (0, import_react33.forwardRef)(
         textareaRef.current.value.length
       );
     }, [autoFocusEnabled]);
-    (0, import_react33.useEffect)(() => focus(), [focus]);
+    (0, import_react39.useEffect)(() => focus(), [focus]);
     useOnComposerFocus(() => {
       if (type === "new") {
         focus();
       }
     });
-    return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
       Component,
       {
         value,
@@ -1246,113 +1415,120 @@ var ComposerInput = (0, import_react33.forwardRef)(
     );
   }
 );
-ComposerInput.displayName = "ComposerInput";
+ComposerPrimitiveInput.displayName = "ComposerPrimitive.Input";
 
 // src/primitives/composer/ComposerSend.tsx
-var import_react34 = require("react");
+var import_react40 = require("react");
 var import_react_primitive8 = require("@radix-ui/react-primitive");
-var import_jsx_runtime19 = require("react/jsx-runtime");
-var ComposerSend = (0, import_react34.forwardRef)(
-  ({ disabled, ...rest }, ref) => {
-    const { useComposer } = useComposerContext();
-    const hasValue = useComposer((c) => c.isEditing && c.value.length > 0);
-    return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
-      import_react_primitive8.Primitive.button,
-      {
-        type: "submit",
-        ...rest,
-        ref,
-        disabled: disabled || !hasValue
-      }
-    );
-  }
-);
-ComposerSend.displayName = "ComposerSend";
+var import_jsx_runtime21 = require("react/jsx-runtime");
+var ComposerPrimitiveSend = (0, import_react40.forwardRef)(({ disabled, ...rest }, ref) => {
+  const { useComposer } = useComposerContext();
+  const hasValue = useComposer((c) => c.isEditing && c.value.length > 0);
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+    import_react_primitive8.Primitive.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
 var import_react_primitive9 = require("@radix-ui/react-primitive");
-var import_react35 = require("react");
-var import_jsx_runtime20 = require("react/jsx-runtime");
-var ContentPartImage = (0, import_react35.forwardRef)((props, forwardedRef) => {
+var import_react41 = require("react");
+var import_jsx_runtime22 = require("react/jsx-runtime");
+var ContentPartPrimitiveImage = (0, import_react41.forwardRef)((props, forwardedRef) => {
   const image = useContentPartImage();
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react_primitive9.Primitive.img, { src: image, ...props, ref: forwardedRef });
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_react_primitive9.Primitive.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
 var import_react_primitive10 = require("@radix-ui/react-primitive");
-var import_react36 = require("react");
-var import_jsx_runtime21 = require("react/jsx-runtime");
-var ThreadRoot = (0, import_react36.forwardRef)(
-  (props, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_react_primitive10.Primitive.div, { ...props, ref });
-  }
-);
-ThreadRoot.displayName = "ThreadRoot";
+var import_react42 = require("react");
+var import_jsx_runtime23 = require("react/jsx-runtime");
+var ThreadPrimitiveRoot = (0, import_react42.forwardRef)((props, ref) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_react_primitive10.Primitive.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
 var import_react_compose_refs3 = require("@radix-ui/react-compose-refs");
 var import_react_primitive11 = require("@radix-ui/react-primitive");
-var import_react41 = require("react");
+var import_react47 = require("react");
 
 // src/primitive-hooks/thread/useThreadViewportAutoScroll.tsx
 var import_react_compose_refs2 = require("@radix-ui/react-compose-refs");
-var import_react40 = require("react");
+var import_react46 = require("react");
 
 // src/utils/hooks/useOnResizeContent.tsx
 var import_react_use_callback_ref2 = require("@radix-ui/react-use-callback-ref");
-var import_react38 = require("react");
+var import_react44 = require("react");
 
 // src/utils/hooks/useManagedRef.ts
-var import_react37 = require("react");
+var import_react43 = require("react");
 var useManagedRef = (callback) => {
-  const cleanupRef = (0, import_react37.useRef)();
-  const ref = (0, import_react37.useCallback)(
+  const cleanupRef = (0, import_react43.useRef)();
+  const ref = (0, import_react43.useCallback)(
     (el) => {
       if (cleanupRef.current) {
         cleanupRef.current();
@@ -1369,7 +1545,7 @@ var useManagedRef = (callback) => {
 // src/utils/hooks/useOnResizeContent.tsx
 var useOnResizeContent = (callback) => {
   const callbackRef = (0, import_react_use_callback_ref2.useCallbackRef)(callback);
-  const refCallback = (0, import_react38.useCallback)(
+  const refCallback = (0, import_react44.useCallback)(
     (el) => {
       const resizeObserver = new ResizeObserver(() => {
         callbackRef();
@@ -1406,11 +1582,11 @@ var useOnResizeContent = (callback) => {
 
 // src/utils/hooks/useOnScrollToBottom.tsx
 var import_react_use_callback_ref3 = require("@radix-ui/react-use-callback-ref");
-var import_react39 = require("react");
+var import_react45 = require("react");
 var useOnScrollToBottom = (callback) => {
   const callbackRef = (0, import_react_use_callback_ref3.useCallbackRef)(callback);
   const { useViewport } = useThreadContext();
-  (0, import_react39.useEffect)(() => {
+  (0, import_react45.useEffect)(() => {
     return useViewport.getState().onScrollToBottom(() => {
       callbackRef();
     });
@@ -1421,11 +1597,11 @@ var useOnScrollToBottom = (callback) => {
 var useThreadViewportAutoScroll = ({
   autoScroll = true
 }) => {
-  const divRef = (0, import_react40.useRef)(null);
+  const divRef = (0, import_react46.useRef)(null);
   const { useViewport } = useThreadContext();
-  const firstRenderRef = (0, import_react40.useRef)(true);
-  const lastScrollTop = (0, import_react40.useRef)(0);
-  const isScrollingToBottomRef = (0, import_react40.useRef)(false);
+  const firstRenderRef = (0, import_react46.useRef)(true);
+  const lastScrollTop = (0, import_react46.useRef)(0);
+  const isScrollingToBottomRef = (0, import_react46.useRef)(false);
   const scrollToBottom = () => {
     const div = divRef.current;
     if (!div || !autoScroll) return;
@@ -1471,29 +1647,29 @@ var useThreadViewportAutoScroll = ({
 };
 
 // src/primitives/thread/ThreadViewport.tsx
-var import_jsx_runtime22 = require("react/jsx-runtime");
-var ThreadViewport = (0, import_react41.forwardRef)(({ autoScroll, onScroll, children, ...rest }, forwardedRef) => {
+var import_jsx_runtime24 = require("react/jsx-runtime");
+var ThreadPrimitiveViewport = (0, import_react47.forwardRef)(({ autoScroll, onScroll, children, ...rest }, forwardedRef) => {
   const autoScrollRef = useThreadViewportAutoScroll({
     autoScroll
   });
   const ref = (0, import_react_compose_refs3.useComposedRefs)(forwardedRef, autoScrollRef);
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_react_primitive11.Primitive.div, { ...rest, ref, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_react_primitive11.Primitive.div, { ...rest, ref, children });
 });
-ThreadViewport.displayName = "ThreadViewport";
+ThreadPrimitiveViewport.displayName = "ThreadPrimitive.Viewport";
 
 // src/primitives/thread/ThreadMessages.tsx
-var import_react43 = require("react");
+var import_react49 = require("react");
 
 // src/context/providers/MessageProvider.tsx
-var import_react42 = require("react");
-var import_zustand10 = require("zustand");
+var import_react48 = require("react");
+var import_zustand12 = require("zustand");
 
 // src/context/stores/EditComposer.ts
-var import_zustand8 = require("zustand");
+var import_zustand10 = require("zustand");
 var makeEditComposerStore = ({
   onEdit,
   onSend
-}) => (0, import_zustand8.create)()((set, get, store) => ({
+}) => (0, import_zustand10.create)()((set, get, store) => ({
   ...makeBaseComposer(set, get, store),
   isEditing: false,
   edit: () => {
@@ -1513,12 +1689,9 @@ var makeEditComposerStore = ({
 }));
 
 // src/context/stores/MessageUtils.ts
-var import_zustand9 = require("zustand");
-var makeMessageUtilsStore = () => (0, import_zustand9.create)((set) => ({
-  inProgressIndicator: null,
-  setInProgressIndicator: (value) => {
-    set({ inProgressIndicator: value });
-  },
+var import_zustand11 = require("zustand");
+var makeMessageUtilsStore = () => (0, import_zustand11.create)((set) => ({
+  inProgressIndicator: document.createElement("span"),
   isCopied: false,
   setIsCopied: (value) => {
     set({ isCopied: value });
@@ -1530,15 +1703,15 @@ var makeMessageUtilsStore = () => (0, import_zustand9.create)((set) => ({
 }));
 
 // src/context/providers/MessageProvider.tsx
-var import_jsx_runtime23 = require("react/jsx-runtime");
-var getIsLast = (thread, message) => {
-  return thread.messages[thread.messages.length - 1]?.id === message.id;
+var import_jsx_runtime25 = require("react/jsx-runtime");
+var getIsLast = (messages, message) => {
+  return messages[messages.length - 1]?.id === message.id;
 };
-var syncMessage = (thread, getBranches, useMessage, messageIndex) => {
-  const parentId = thread.messages[messageIndex - 1]?.id ?? null;
-  const message = thread.messages[messageIndex];
+var syncMessage = (messages, getBranches, useMessage, messageIndex) => {
+  const parentId = messages[messageIndex - 1]?.id ?? null;
+  const message = messages[messageIndex];
   if (!message) return;
-  const isLast = getIsLast(thread, message);
+  const isLast = getIsLast(messages, message);
   const branches = getBranches(message.id);
   const currentState = useMessage.getState();
   if (currentState.message === message && currentState.parentId === parentId && currentState.branches === branches && currentState.isLast === isLast)
@@ -1551,9 +1724,9 @@ var syncMessage = (thread, getBranches, useMessage, messageIndex) => {
   });
 };
 var useMessageContext2 = (messageIndex) => {
-  const { useThread, useThreadActions } = useThreadContext();
-  const [context] = (0, import_react42.useState)(() => {
-    const useMessage = (0, import_zustand10.create)(() => ({}));
+  const { useThreadMessages, useThreadActions } = useThreadContext();
+  const [context] = (0, import_react48.useState)(() => {
+    const useMessage = (0, import_zustand12.create)(() => ({}));
     const useMessageUtils = makeMessageUtilsStore();
     const useEditComposer = makeEditComposerStore({
       onEdit: () => {
@@ -1582,15 +1755,15 @@ var useMessageContext2 = (messageIndex) => {
       }
     });
     syncMessage(
-      useThread.getState(),
+      useThreadMessages.getState(),
       useThreadActions.getState().getBranches,
       useMessage,
       messageIndex
     );
     return { useMessage, useMessageUtils, useEditComposer };
   });
-  (0, import_react42.useEffect)(() => {
-    return useThread.subscribe((thread) => {
+  (0, import_react48.useEffect)(() => {
+    return useThreadMessages.subscribe((thread) => {
       syncMessage(
         thread,
         useThreadActions.getState().getBranches,
@@ -1598,7 +1771,7 @@ var useMessageContext2 = (messageIndex) => {
         messageIndex
       );
     });
-  }, [useThread, useThreadActions, context, messageIndex]);
+  }, [useThreadMessages, useThreadActions, context, messageIndex]);
   return context;
 };
 var MessageProvider = ({
@@ -1606,11 +1779,11 @@ var MessageProvider = ({
   children
 }) => {
   const context = useMessageContext2(messageIndex);
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(MessageContext.Provider, { value: context, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(MessageContext.Provider, { value: context, children });
 };
 
 // src/primitives/thread/ThreadMessages.tsx
-var import_jsx_runtime24 = require("react/jsx-runtime");
+var import_jsx_runtime26 = require("react/jsx-runtime");
 var getComponents = (components) => {
   return {
     EditComposer: components.EditComposer ?? components.UserMessage ?? components.Message,
@@ -1623,25 +1796,27 @@ var ThreadMessageImpl = ({
   components
 }) => {
   const { UserMessage, EditComposer, AssistantMessage } = getComponents(components);
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(MessageProvider, { messageIndex, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(MessageIf, { user: true, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(ComposerIf, { editing: false, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(UserMessage, {}) }),
-      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(ComposerIf, { editing: true, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(EditComposer, {}) })
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(MessageProvider, { messageIndex, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(MessagePrimitiveIf, { user: true, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(ComposerPrimitiveIf, { editing: false, children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(UserMessage, {}) }),
+      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(ComposerPrimitiveIf, { editing: true, children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(EditComposer, {}) })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(MessageIf, { assistant: true, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(AssistantMessage, {}) })
+    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(MessagePrimitiveIf, { assistant: true, children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(AssistantMessage, {}) })
   ] });
 };
-var ThreadMessage = (0, import_react43.memo)(
+var ThreadMessage = (0, import_react49.memo)(
   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 }) => {
-  const { useThread } = useThreadContext();
-  const messagesLength = useThread((t) => t.messages.length);
+var ThreadPrimitiveMessages = ({
+  components
+}) => {
+  const { useThreadMessages } = useThreadContext();
+  const messagesLength = useThreadMessages((t) => t.length);
   if (messagesLength === 0) return null;
   return new Array(messagesLength).fill(null).map((_, idx) => {
     const messageIndex = idx;
-    return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
       ThreadMessage,
       {
         messageIndex,
@@ -1651,21 +1826,22 @@ 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
 );
 
 // src/runtime/local/useLocalRuntime.tsx
-var import_react44 = require("react");
+var import_react50 = require("react");
 
 // src/runtime/utils/idUtils.tsx
 var import_non_secure = require("nanoid/non-secure");
@@ -1827,13 +2003,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() {
@@ -1912,96 +2166,24 @@ 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");
   }
 };
 
 // src/runtime/local/useLocalRuntime.tsx
 var useLocalRuntime = (adapter) => {
-  const [runtime] = (0, import_react44.useState)(() => new LocalRuntime(adapter));
-  (0, import_react44.useInsertionEffect)(() => {
+  const [runtime] = (0, import_react50.useState)(() => new LocalRuntime(adapter));
+  (0, import_react50.useInsertionEffect)(() => {
     runtime.adapter = adapter;
   });
   return runtime;
 };
 
-// src/model-config/useAssistantTool.tsx
-var import_react45 = require("react");
-var useAssistantTool = (tool) => {
-  const { useModelConfig, useToolUIs } = useAssistantContext();
-  const registerModelConfigProvider = useModelConfig(
-    (s) => s.registerModelConfigProvider
-  );
-  const setToolUI = useToolUIs((s) => s.setToolUI);
-  (0, import_react45.useEffect)(() => {
-    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
-var import_react46 = require("react");
-var useAssistantToolUI = (tool) => {
-  const { useToolUIs } = useAssistantContext();
-  const setToolUI = useToolUIs((s) => s.setToolUI);
-  (0, import_react46.useEffect)(() => {
-    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
-var import_react47 = require("react");
-var useAssistantInstructions = (instruction) => {
-  const { useModelConfig } = useAssistantContext();
-  const registerModelConfigProvider = useModelConfig(
-    (s) => s.registerModelConfigProvider
-  );
-  (0, import_react47.useEffect)(() => {
-    const config = {
-      system: instruction
-    };
-    return registerModelConfigProvider(() => config);
-  }, [registerModelConfigProvider, instruction]);
-};
-
 // src/internal.ts
 var internal_exports = {};
 __export(internal_exports, {
+  BaseAssistantRuntime: () => BaseAssistantRuntime,
   MessageRepository: () => MessageRepository,
   ProxyConfigProvider: () => ProxyConfigProvider
 });
@@ -2021,6 +2203,7 @@ __export(internal_exports, {
   useActionBarCopy,
   useActionBarEdit,
   useActionBarReload,
+  useAppendMessage,
   useAssistantContext,
   useAssistantInstructions,
   useAssistantTool,
@@ -2036,11 +2219,11 @@ __export(internal_exports, {
   useContentPartContext,
   useContentPartDisplay,
   useContentPartImage,
-  useContentPartInProgressIndicator,
   useContentPartText,
   useLocalRuntime,
   useMessageContext,
   useMessageIf,
+  useSwitchToNewThread,
   useThreadContext,
   useThreadEmpty,
   useThreadIf,