@assistant-ui/react 0.1.11 → 0.2.0

package/dist/index.js

@@ -31,6 +31,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var src_exports = {};
 __export(src_exports, {
   ActionBarPrimitive: () => actionBar_exports,
+  AssistantModalPrimitive: () => assistantModal_exports,
   AssistantRuntimeProvider: () => AssistantRuntimeProvider,
   BranchPickerPrimitive: () => branchPicker_exports,
   ComposerPrimitive: () => composer_exports,
@@ -38,22 +39,32 @@ __export(src_exports, {
   INTERNAL: () => internal_exports,
   MessagePrimitive: () => message_exports,
   ThreadPrimitive: () => thread_exports,
+  makeAssistantTool: () => makeAssistantTool,
+  makeAssistantToolUI: () => makeAssistantToolUI,
   useActionBarCopy: () => useActionBarCopy,
   useActionBarEdit: () => useActionBarEdit,
   useActionBarReload: () => useActionBarReload,
+  useAssistantContext: () => useAssistantContext,
+  useAssistantInstructions: () => useAssistantInstructions,
+  useAssistantTool: () => useAssistantTool,
+  useAssistantToolUI: () => useAssistantToolUI,
   useBranchPickerCount: () => useBranchPickerCount,
   useBranchPickerNext: () => useBranchPickerNext,
   useBranchPickerNumber: () => useBranchPickerNumber,
   useBranchPickerPrevious: () => useBranchPickerPrevious,
   useComposerCancel: () => useComposerCancel,
+  useComposerContext: () => useComposerContext,
   useComposerIf: () => useComposerIf,
   useComposerSend: () => useComposerSend,
+  useContentPartContext: () => useContentPartContext,
   useContentPartDisplay: () => useContentPartDisplay,
   useContentPartImage: () => useContentPartImage,
   useContentPartInProgressIndicator: () => useContentPartInProgressIndicator,
   useContentPartText: () => useContentPartText,
   useLocalRuntime: () => useLocalRuntime,
+  useMessageContext: () => useMessageContext,
   useMessageIf: () => useMessageIf,
+  useThreadContext: () => useThreadContext,
   useThreadEmpty: () => useThreadEmpty,
   useThreadIf: () => useThreadIf,
   useThreadScrollToBottom: () => useThreadScrollToBottom,
@@ -167,7 +178,7 @@ var useThreadContext = () => {
 
 // src/primitive-hooks/actionBar/useActionBarReload.tsx
 var useActionBarReload = () => {
-  const { useThread, useThreadActions, useViewport } = useThreadContext();
+  const { useThread, useThreadActions, useComposer, useViewport } = useThreadContext();
   const { useMessage } = useMessageContext();
   const disabled = useCombinedStore(
     [useThread, useMessage],
@@ -177,7 +188,8 @@ var useActionBarReload = () => {
     const { parentId } = useMessage.getState();
     useThreadActions.getState().startRun(parentId);
     useViewport.getState().scrollToBottom();
-  }, [useThreadActions, useMessage, useViewport]);
+    useComposer.getState().focus();
+  }, [useThreadActions, useComposer, useViewport, useMessage]);
   if (disabled) return null;
   return callback;
 };
@@ -231,8 +243,14 @@ var useBranchPickerPrevious = () => {
 };
 
 // src/primitive-hooks/composer/useComposerCancel.tsx
+var import_react16 = require("react");
+
+// src/context/providers/AssistantRuntimeProvider.tsx
 var import_react13 = require("react");
 
+// src/context/providers/AssistantProvider.tsx
+var import_react12 = require("react");
+
 // src/context/react/AssistantContext.ts
 var import_react10 = require("react");
 var AssistantContext = (0, import_react10.createContext)(
@@ -247,12 +265,265 @@ var useAssistantContext = () => {
   return context;
 };
 
-// src/context/react/ComposerContext.ts
+// src/context/stores/AssistantModelConfig.ts
+var import_zustand = require("zustand");
+
+// src/types/ModelConfigTypes.ts
+var mergeModelConfigs = (configSet) => {
+  const configs = Array.from(configSet).map((c) => c()).sort((a, b) => (b.priority ?? 0) - (a.priority ?? 0));
+  return configs.reduce((acc, config) => {
+    if (config.system) {
+      if (acc.system) {
+        acc.system += `
+
+${config.system}`;
+      } else {
+        acc.system = config.system;
+      }
+    }
+    if (config.tools) {
+      for (const [name, tool] of Object.entries(config.tools)) {
+        if (acc.tools?.[name]) {
+          throw new Error(
+            `You tried to define a tool with the name ${name}, but it already exists.`
+          );
+        }
+        if (!acc.tools) acc.tools = {};
+        acc.tools[name] = tool;
+      }
+    }
+    return acc;
+  }, {});
+};
+
+// src/utils/ProxyConfigProvider.ts
+var ProxyConfigProvider = class {
+  _providers = /* @__PURE__ */ new Set();
+  getModelConfig() {
+    return mergeModelConfigs(this._providers);
+  }
+  registerModelConfigProvider(provider) {
+    this._providers.add(provider);
+    return () => {
+      this._providers.delete(provider);
+    };
+  }
+};
+
+// src/context/stores/AssistantModelConfig.ts
+var makeAssistantModelConfigStore = () => (0, import_zustand.create)(() => {
+  const proxy = new ProxyConfigProvider();
+  return Object.freeze({
+    getModelConfig: () => {
+      return proxy.getModelConfig();
+    },
+    registerModelConfigProvider: (provider) => {
+      return proxy.registerModelConfigProvider(provider);
+    }
+  });
+});
+
+// src/context/stores/AssistantToolUIs.ts
+var import_zustand2 = require("zustand");
+var makeAssistantToolUIsStore = () => (0, import_zustand2.create)((set) => {
+  const renderers = /* @__PURE__ */ new Map();
+  return Object.freeze({
+    getToolUI: (name) => {
+      const arr = renderers.get(name);
+      const last = arr?.at(-1);
+      if (last) return last;
+      return null;
+    },
+    setToolUI: (name, render) => {
+      let arr = renderers.get(name);
+      if (!arr) {
+        arr = [];
+        renderers.set(name, arr);
+      }
+      arr.push(render);
+      set({});
+      return () => {
+        const index = arr.indexOf(render);
+        if (index !== -1) {
+          arr.splice(index, 1);
+        }
+        if (index === arr.length) {
+          set({});
+        }
+      };
+    }
+  });
+});
+
+// src/context/providers/ThreadProvider.tsx
 var import_react11 = require("react");
+
+// src/context/stores/Composer.ts
+var import_zustand3 = require("zustand");
+
+// src/context/stores/BaseComposer.ts
+var makeBaseComposer = (set) => ({
+  value: "",
+  setValue: (value) => {
+    set({ value });
+  }
+});
+
+// src/context/stores/Composer.ts
+var makeComposerStore = (useThread, useThreadActions) => {
+  const focusListeners = /* @__PURE__ */ new Set();
+  return (0, import_zustand3.create)()((set, get, store) => {
+    return {
+      ...makeBaseComposer(set, get, store),
+      isEditing: true,
+      send: () => {
+        const { setValue, value } = get();
+        setValue("");
+        useThreadActions.getState().append({
+          parentId: useThread.getState().messages.at(-1)?.id ?? null,
+          role: "user",
+          content: [{ type: "text", text: value }]
+        });
+      },
+      cancel: () => {
+        const thread = useThread.getState();
+        if (!thread.isRunning) return false;
+        useThreadActions.getState().cancelRun();
+        return true;
+      },
+      focus: () => {
+        for (const listener of focusListeners) {
+          listener();
+        }
+      },
+      onFocus: (listener) => {
+        focusListeners.add(listener);
+        return () => {
+          focusListeners.delete(listener);
+        };
+      }
+    };
+  });
+};
+
+// src/context/stores/Thread.ts
+var import_zustand4 = require("zustand");
+var makeThreadStore = (runtimeRef) => {
+  return (0, import_zustand4.create)(() => ({
+    messages: runtimeRef.current.messages,
+    isRunning: runtimeRef.current.isRunning
+  }));
+};
+
+// src/context/stores/ThreadViewport.tsx
+var import_zustand5 = require("zustand");
+var makeThreadViewportStore = () => {
+  const scrollToBottomListeners = /* @__PURE__ */ new Set();
+  return (0, import_zustand5.create)(() => ({
+    isAtBottom: true,
+    scrollToBottom: () => {
+      for (const listener of scrollToBottomListeners) {
+        listener();
+      }
+    },
+    onScrollToBottom: (callback) => {
+      scrollToBottomListeners.add(callback);
+      return () => {
+        scrollToBottomListeners.delete(callback);
+      };
+    }
+  }));
+};
+
+// src/context/stores/ThreadActions.ts
+var import_zustand6 = require("zustand");
+var makeThreadActionStore = (runtimeRef) => {
+  return (0, import_zustand6.create)(
+    () => Object.freeze({
+      getBranches: (messageId) => runtimeRef.current.getBranches(messageId),
+      switchToBranch: (branchId) => runtimeRef.current.switchToBranch(branchId),
+      startRun: (parentId) => runtimeRef.current.startRun(parentId),
+      append: (message) => runtimeRef.current.append(message),
+      cancelRun: () => runtimeRef.current.cancelRun(),
+      addToolResult: (toolCallId, result) => runtimeRef.current.addToolResult(toolCallId, result)
+    })
+  );
+};
+
+// 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)(() => {
+    runtimeRef.current = runtime;
+  });
+  const [context] = (0, import_react11.useState)(() => {
+    const useThread = makeThreadStore(runtimeRef);
+    const useThreadActions = makeThreadActionStore(runtimeRef);
+    const useViewport = makeThreadViewportStore();
+    const useComposer = makeComposerStore(useThread, useThreadActions);
+    return {
+      useThread,
+      useThreadActions,
+      useComposer,
+      useViewport
+    };
+  });
+  (0, import_react11.useEffect)(() => {
+    const onRuntimeUpdate = () => {
+      context.useThread.setState(
+        Object.freeze({
+          messages: runtimeRef.current.messages,
+          isRunning: runtimeRef.current.isRunning
+        }),
+        true
+      );
+    };
+    onRuntimeUpdate();
+    return runtime.subscribe(onRuntimeUpdate);
+  }, [context, runtime]);
+  const RuntimeSynchronizer = runtime.unstable_synchronizer;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(ThreadContext.Provider, { value: context, children: [
+    RuntimeSynchronizer && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(RuntimeSynchronizer, {}),
+    children
+  ] });
+};
+
+// 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)(() => {
+    runtimeRef.current = runtime;
+  });
+  const [context] = (0, import_react12.useState)(() => {
+    const useModelConfig = makeAssistantModelConfigStore();
+    const useToolUIs = makeAssistantToolUIsStore();
+    return { useModelConfig, useToolUIs };
+  });
+  const getModelCOnfig = context.useModelConfig((c) => c.getModelConfig);
+  (0, import_react12.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 }) });
+};
+
+// src/context/providers/AssistantRuntimeProvider.tsx
+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);
+
+// src/context/react/ComposerContext.ts
+var import_react14 = require("react");
 var useComposerContext = () => {
   const { useComposer } = useThreadContext();
-  const { useEditComposer } = (0, import_react11.useContext)(MessageContext) ?? {};
-  return (0, import_react11.useMemo)(
+  const { useEditComposer } = (0, import_react14.useContext)(MessageContext) ?? {};
+  return (0, import_react14.useMemo)(
     () => ({
       useComposer: useEditComposer ?? useComposer,
       type: useEditComposer ? "edit" : "new"
@@ -262,12 +533,12 @@ var useComposerContext = () => {
 };
 
 // src/context/react/ContentPartContext.ts
-var import_react12 = require("react");
-var ContentPartContext = (0, import_react12.createContext)(
+var import_react15 = require("react");
+var ContentPartContext = (0, import_react15.createContext)(
   null
 );
 var useContentPartContext = () => {
-  const context = (0, import_react12.useContext)(ContentPartContext);
+  const context = (0, import_react15.useContext)(ContentPartContext);
   if (!context)
     throw new Error(
       "This component can only be used inside a component passed to <MessagePrimitive.Content components={...} >."
@@ -279,7 +550,7 @@ var useContentPartContext = () => {
 var useComposerCancel = () => {
   const { useComposer } = useComposerContext();
   const disabled = useComposer((c) => !c.isEditing);
-  const callback = (0, import_react13.useCallback)(() => {
+  const callback = (0, import_react16.useCallback)(() => {
     const { cancel } = useComposer.getState();
     cancel();
   }, [useComposer]);
@@ -298,17 +569,18 @@ var useComposerIf = (props) => {
 };
 
 // src/primitive-hooks/composer/useComposerSend.tsx
-var import_react14 = require("react");
+var import_react17 = require("react");
 var useComposerSend = () => {
-  const { useViewport } = useThreadContext();
+  const { useViewport, useComposer: useNewComposer } = useThreadContext();
   const { useComposer } = useComposerContext();
   const disabled = useComposer((c) => !c.isEditing || c.value.length === 0);
-  const callback = (0, import_react14.useCallback)(() => {
+  const callback = (0, import_react17.useCallback)(() => {
     const composerState = useComposer.getState();
     if (!composerState.isEditing) return;
     composerState.send();
     useViewport.getState().scrollToBottom();
-  }, [useComposer, useViewport]);
+    useNewComposer.getState().focus();
+  }, [useNewComposer, useComposer, useViewport]);
   if (disabled) return null;
   return callback;
 };
@@ -398,27 +670,27 @@ var useThreadEmpty = () => {
 };
 
 // src/primitive-hooks/thread/useThreadScrollToBottom.tsx
-var import_react15 = require("react");
+var import_react18 = require("react");
 var useThreadScrollToBottom = () => {
-  const { useViewport } = useThreadContext();
+  const { useComposer, useViewport } = useThreadContext();
   const isAtBottom = useViewport((s) => s.isAtBottom);
-  const handleScrollToBottom = (0, import_react15.useCallback)(() => {
-    const { scrollToBottom } = useViewport.getState();
-    scrollToBottom();
-  }, [useViewport]);
+  const handleScrollToBottom = (0, import_react18.useCallback)(() => {
+    useViewport.getState().scrollToBottom();
+    useComposer.getState().focus();
+  }, [useViewport, useComposer]);
   if (isAtBottom) return null;
   return handleScrollToBottom;
 };
 
 // src/primitive-hooks/thread/useThreadSuggestion.tsx
-var import_react16 = require("react");
+var import_react19 = require("react");
 var useThreadSuggestion = ({
   prompt,
   autoSend
 }) => {
   const { useThread, useComposer } = useThreadContext();
   const disabled = useThread((t) => t.isRunning);
-  const callback = (0, import_react16.useCallback)(() => {
+  const callback = (0, import_react19.useCallback)(() => {
     const thread = useThread.getState();
     const composer = useComposer.getState();
     composer.setValue(prompt);
@@ -430,330 +702,279 @@ var useThreadSuggestion = ({
   return callback;
 };
 
-// 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
+// src/primitives/actionBar/index.ts
+var actionBar_exports = {};
+__export(actionBar_exports, {
+  Copy: () => ActionBarCopy,
+  Edit: () => ActionBarEdit,
+  Reload: () => ActionBarReload,
+  Root: () => ActionBarRoot
 });
 
-// src/primitives/thread/ThreadRoot.tsx
+// src/primitives/actionBar/ActionBarRoot.tsx
 var import_react_primitive = require("@radix-ui/react-primitive");
-var import_react17 = require("react");
-var import_jsx_runtime = require("react/jsx-runtime");
-var ThreadRoot = (0, import_react17.forwardRef)(
-  (props, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_primitive.Primitive.div, { ...props, ref });
-  }
-);
-ThreadRoot.displayName = "ThreadRoot";
-
-// src/primitives/thread/ThreadEmpty.tsx
-var ThreadEmpty = ({ children }) => {
-  const empty = useThreadEmpty();
-  return empty ? children : null;
+var import_react20 = require("react");
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var useActionBarFloatStatus = ({
+  hideWhenRunning,
+  autohide,
+  autohideFloat
+}) => {
+  const { useThread } = useThreadContext();
+  const { useMessage, useMessageUtils } = useMessageContext();
+  return useCombinedStore(
+    [useThread, useMessage, useMessageUtils],
+    (t, m, mu) => {
+      if (hideWhenRunning && t.isRunning) return "hidden" /* Hidden */;
+      const autohideEnabled = autohide === "always" || autohide === "not-last" && !m.isLast;
+      if (!autohideEnabled) return "normal" /* Normal */;
+      if (!mu.isHovering) return "hidden" /* Hidden */;
+      if (autohideFloat === "always" || autohideFloat === "single-branch" && m.branches.length <= 1)
+        return "floating" /* Floating */;
+      return "normal" /* Normal */;
+    }
+  );
 };
+var ActionBarRoot = (0, import_react20.forwardRef)(({ hideWhenRunning, autohide, autohideFloat, ...rest }, ref) => {
+  const hideAndfloatStatus = useActionBarFloatStatus({
+    hideWhenRunning,
+    autohide,
+    autohideFloat
+  });
+  if (hideAndfloatStatus === "hidden" /* Hidden */) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    import_react_primitive.Primitive.div,
+    {
+      ...hideAndfloatStatus === "floating" /* Floating */ ? { "data-floating": "true" } : null,
+      ...rest,
+      ref
+    }
+  );
+});
+ActionBarRoot.displayName = "ActionBarRoot";
 
-// src/primitives/thread/ThreadIf.tsx
-var ThreadIf = ({ children, ...query }) => {
-  const result = useThreadIf(query);
-  return result ? children : null;
+// 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_jsx_runtime5 = require("react/jsx-runtime");
+var createActionButton = (displayName, useActionButton) => {
+  const ActionButton = (0, import_react21.forwardRef)((props, forwardedRef) => {
+    const callback = useActionButton(props);
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      import_react_primitive2.Primitive.button,
+      {
+        type: "button",
+        disabled: !callback,
+        ...props,
+        ref: forwardedRef,
+        onClick: (0, import_primitive.composeEventHandlers)(props.onClick, () => {
+          callback?.();
+        })
+      }
+    );
+  });
+  ActionButton.displayName = displayName;
+  return ActionButton;
 };
 
-// src/primitives/thread/ThreadViewport.tsx
-var import_react_compose_refs2 = require("@radix-ui/react-compose-refs");
-var import_react_primitive2 = require("@radix-ui/react-primitive");
-var import_react22 = require("react");
+// src/primitives/actionBar/ActionBarCopy.tsx
+var ActionBarCopy = createActionButton(
+  "ActionBarCopy",
+  useActionBarCopy
+);
 
-// src/primitive-hooks/thread/useThreadViewportAutoScroll.tsx
-var import_react_compose_refs = require("@radix-ui/react-compose-refs");
-var import_react21 = require("react");
+// src/primitives/actionBar/ActionBarReload.tsx
+var ActionBarReload = createActionButton(
+  "ActionBarReload",
+  useActionBarReload
+);
 
-// src/utils/hooks/useOnResizeContent.tsx
-var import_react_use_callback_ref = require("@radix-ui/react-use-callback-ref");
-var import_react19 = require("react");
+// src/primitives/actionBar/ActionBarEdit.tsx
+var ActionBarEdit = createActionButton(
+  "ActionBarEdit",
+  useActionBarEdit
+);
 
-// src/utils/hooks/useManagedRef.ts
-var import_react18 = require("react");
-var useManagedRef = (callback) => {
-  const cleanupRef = (0, import_react18.useRef)();
-  const ref = (0, import_react18.useCallback)(
-    (el) => {
-      if (cleanupRef.current) {
-        cleanupRef.current();
-      }
-      if (el) {
-        cleanupRef.current = callback(el);
-      }
-    },
-    [callback]
-  );
-  return ref;
-};
+// src/primitives/assistantModal/index.ts
+var assistantModal_exports = {};
+__export(assistantModal_exports, {
+  Content: () => AssistantModalContent,
+  Root: () => AssistantModalRoot,
+  Trigger: () => AssistantModalTrigger
+});
 
-// src/utils/hooks/useOnResizeContent.tsx
-var useOnResizeContent = (callback) => {
-  const callbackRef = (0, import_react_use_callback_ref.useCallbackRef)(callback);
-  const refCallback = (0, import_react19.useCallback)(
-    (el) => {
-      const resizeObserver = new ResizeObserver(() => {
-        callbackRef();
-      });
-      const mutationObserver = new MutationObserver((mutations) => {
-        for (const mutation of mutations) {
-          for (const node of mutation.addedNodes) {
-            if (node instanceof Element) {
-              resizeObserver.observe(node);
-            }
-          }
-          for (const node of mutation.removedNodes) {
-            if (node instanceof Element) {
-              resizeObserver.unobserve(node);
-            }
-          }
-        }
-        callbackRef();
-      });
-      resizeObserver.observe(el);
-      mutationObserver.observe(el, { childList: true });
-      for (const child of el.children) {
-        resizeObserver.observe(child);
-      }
-      return () => {
-        resizeObserver.disconnect();
-        mutationObserver.disconnect();
-      };
-    },
-    [callbackRef]
-  );
-  return useManagedRef(refCallback);
-};
+// src/primitives/assistantModal/AssistantModalRoot.tsx
+var import_react23 = require("react");
+var PopoverPrimitive = __toESM(require("@radix-ui/react-popover"));
+var import_primitive2 = require("@radix-ui/primitive");
 
-// src/utils/hooks/useOnScrollToBottom.tsx
-var import_react_use_callback_ref2 = require("@radix-ui/react-use-callback-ref");
-var import_react20 = require("react");
-var useOnScrollToBottom = (callback) => {
-  const callbackRef = (0, import_react_use_callback_ref2.useCallbackRef)(callback);
-  const { useViewport } = useThreadContext();
-  (0, import_react20.useEffect)(() => {
-    return useViewport.getState().onScrollToBottom(() => {
+// src/utils/hooks/useOnComposerFocus.tsx
+var import_react_use_callback_ref = require("@radix-ui/react-use-callback-ref");
+var import_react22 = require("react");
+var useOnComposerFocus = (callback) => {
+  const callbackRef = (0, import_react_use_callback_ref.useCallbackRef)(callback);
+  const { useComposer } = useThreadContext();
+  (0, import_react22.useEffect)(() => {
+    return useComposer.getState().onFocus(() => {
       callbackRef();
     });
-  }, [useViewport, callbackRef]);
+  }, [useComposer, callbackRef]);
 };
 
-// src/primitive-hooks/thread/useThreadViewportAutoScroll.tsx
-var useThreadViewportAutoScroll = ({
-  autoScroll = true
+// 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 [, setOpen] = state;
+  useOnComposerFocus(() => {
+    setOpen(true);
+  });
+  return state;
+};
+var AssistantModalRoot = ({
+  __scopeAssistantModal,
+  defaultOpen,
+  open,
+  onOpenChange,
+  ...rest
 }) => {
-  const divRef = (0, import_react21.useRef)(null);
-  const { useViewport } = useThreadContext();
-  const firstRenderRef = (0, import_react21.useRef)(true);
-  const lastScrollTop = (0, import_react21.useRef)(0);
-  const isScrollingToBottomRef = (0, import_react21.useRef)(false);
-  const scrollToBottom = () => {
-    const div = divRef.current;
-    if (!div || !autoScroll) return;
-    const behavior = firstRenderRef.current ? "instant" : "auto";
-    firstRenderRef.current = false;
-    isScrollingToBottomRef.current = true;
-    div.scrollTo({ top: div.scrollHeight, behavior });
-  };
-  const handleScroll = () => {
-    const div = divRef.current;
-    if (!div) return;
-    const isAtBottom = useViewport.getState().isAtBottom;
-    const newIsAtBottom = div.scrollHeight - div.scrollTop <= div.clientHeight;
-    if (!newIsAtBottom && lastScrollTop.current < div.scrollTop) {
-    } else {
-      isScrollingToBottomRef.current = newIsAtBottom;
-      if (newIsAtBottom !== isAtBottom) {
-        useViewport.setState({
-          isAtBottom: newIsAtBottom
-        });
-      }
-    }
-    lastScrollTop.current = div.scrollTop;
-  };
-  const resizeRef = useOnResizeContent(() => {
-    if (!isScrollingToBottomRef.current && !useViewport.getState().isAtBottom && !firstRenderRef.current) {
-      handleScroll();
-    } else {
-      scrollToBottom();
+  const scope = usePopoverScope(__scopeAssistantModal);
+  const [modalOpen, setOpen] = useAssistantModalOpenState(defaultOpen);
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    PopoverPrimitive.Root,
+    {
+      ...scope,
+      open: open === void 0 ? modalOpen : open,
+      onOpenChange: (0, import_primitive2.composeEventHandlers)(onOpenChange, setOpen),
+      ...rest
     }
-  });
-  const scrollRef = useManagedRef((el) => {
-    el.addEventListener("scroll", handleScroll);
-    return () => {
-      el.removeEventListener("scroll", handleScroll);
-    };
-  });
-  const autoScrollRef = (0, import_react_compose_refs.useComposedRefs)(resizeRef, scrollRef, divRef);
-  useOnScrollToBottom(() => {
-    scrollToBottom();
-  });
-  return autoScrollRef;
+  );
 };
+AssistantModalRoot.displayName = "AssistantModalRoot";
 
-// src/primitives/thread/ThreadViewport.tsx
-var import_jsx_runtime2 = require("react/jsx-runtime");
-var ThreadViewport = (0, import_react22.forwardRef)(({ autoScroll, onScroll, children, ...rest }, forwardedRef) => {
-  const autoScrollRef = useThreadViewportAutoScroll({
-    autoScroll
-  });
-  const ref = (0, import_react_compose_refs2.useComposedRefs)(forwardedRef, autoScrollRef);
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_primitive2.Primitive.div, { ...rest, ref, children });
-});
-ThreadViewport.displayName = "ThreadViewport";
-
-// src/primitives/thread/ThreadMessages.tsx
+// src/primitives/assistantModal/AssistantModalTrigger.tsx
 var import_react24 = require("react");
+var PopoverPrimitive2 = __toESM(require("@radix-ui/react-popover"));
+var import_jsx_runtime7 = require("react/jsx-runtime");
+var AssistantModalTrigger = (0, import_react24.forwardRef)(
+  ({ __scopeAssistantModal, ...rest }, ref) => {
+    const scope = usePopoverScope(__scopeAssistantModal);
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(PopoverPrimitive2.Trigger, { ...scope, ...rest, ref });
+  }
+);
+AssistantModalTrigger.displayName = "AssistantModalTrigger";
 
-// src/context/providers/MessageProvider.tsx
-var import_react23 = require("react");
-var import_zustand3 = require("zustand");
-
-// src/context/stores/EditComposer.ts
-var import_zustand = require("zustand");
-
-// src/context/stores/BaseComposer.ts
-var makeBaseComposer = (set) => ({
-  value: "",
-  setValue: (value) => {
-    set({ value });
+// src/primitives/assistantModal/AssistantModalContent.tsx
+var import_react25 = require("react");
+var PopoverPrimitive3 = __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)(
+  ({
+    __scopeAssistantModal,
+    side,
+    align,
+    onInteractOutside,
+    dissmissOnInteractOutside = false,
+    ...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,
+      {
+        ...scope,
+        ...props,
+        ref: forwardedRef,
+        side: side ?? "top",
+        align: align ?? "end",
+        onInteractOutside: (0, import_primitive3.composeEventHandlers)(
+          onInteractOutside,
+          dissmissOnInteractOutside ? void 0 : (e) => e.preventDefault()
+        )
+      }
+    ) });
   }
+);
+AssistantModalContent.displayName = "AssistantModalContent";
+
+// src/primitives/branchPicker/index.ts
+var branchPicker_exports = {};
+__export(branchPicker_exports, {
+  Count: () => BranchPickerCount,
+  Next: () => BranchPickerNext,
+  Number: () => BranchPickerNumber,
+  Previous: () => BranchPickerPrevious,
+  Root: () => BranchPickerRoot
 });
 
-// src/context/stores/EditComposer.ts
-var makeEditComposerStore = ({
-  onEdit,
-  onSend
-}) => (0, import_zustand.create)()((set, get, store) => ({
-  ...makeBaseComposer(set, get, store),
-  isEditing: false,
-  edit: () => {
-    const value = onEdit();
-    set({ isEditing: true, value });
-  },
-  send: () => {
-    const value = get().value;
-    set({ isEditing: false });
-    onSend(value);
-  },
-  cancel: () => {
-    if (!get().isEditing) return false;
-    set({ isEditing: false });
-    return true;
-  }
-}));
+// src/primitives/branchPicker/BranchPickerNext.tsx
+var BranchPickerNext = createActionButton(
+  "BranchPickerNext",
+  useBranchPickerNext
+);
 
-// src/context/stores/MessageUtils.ts
-var import_zustand2 = require("zustand");
-var makeMessageUtilsStore = () => (0, import_zustand2.create)((set) => ({
-  inProgressIndicator: null,
-  setInProgressIndicator: (value) => {
-    set({ inProgressIndicator: value });
-  },
-  isCopied: false,
-  setIsCopied: (value) => {
-    set({ isCopied: value });
-  },
-  isHovering: false,
-  setIsHovering: (value) => {
-    set({ isHovering: value });
-  }
-}));
+// src/primitives/branchPicker/BranchPickerPrevious.tsx
+var BranchPickerPrevious = createActionButton(
+  "BranchPickerPrevious",
+  useBranchPickerPrevious
+);
 
-// src/context/providers/MessageProvider.tsx
-var import_jsx_runtime3 = require("react/jsx-runtime");
-var getIsLast = (thread, message) => {
-  return thread.messages[thread.messages.length - 1]?.id === message.id;
+// src/primitives/branchPicker/BranchPickerCount.tsx
+var import_jsx_runtime9 = require("react/jsx-runtime");
+var BranchPickerCount = () => {
+  const branchCount = useBranchPickerCount();
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_jsx_runtime9.Fragment, { children: branchCount });
 };
-var syncMessage = (thread, getBranches, useMessage, messageIndex) => {
-  const parentId = thread.messages[messageIndex - 1]?.id ?? null;
-  const message = thread.messages[messageIndex];
-  if (!message) return;
-  const isLast = getIsLast(thread, message);
-  const branches = getBranches(message.id);
-  const currentState = useMessage.getState();
-  if (currentState.message === message && currentState.parentId === parentId && currentState.branches === branches && currentState.isLast === isLast)
-    return;
-  useMessage.setState({
-    message,
-    parentId,
-    branches,
-    isLast
-  });
+
+// src/primitives/branchPicker/BranchPickerNumber.tsx
+var import_jsx_runtime10 = require("react/jsx-runtime");
+var BranchPickerNumber = () => {
+  const branchNumber = useBranchPickerNumber();
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_jsx_runtime10.Fragment, { children: branchNumber });
 };
-var useMessageContext2 = (messageIndex) => {
-  const { useThread, useThreadActions } = useThreadContext();
-  const [context] = (0, import_react23.useState)(() => {
-    const useMessage = (0, import_zustand3.create)(() => ({}));
-    const useMessageUtils = makeMessageUtilsStore();
-    const useEditComposer = makeEditComposerStore({
-      onEdit: () => {
-        const message = useMessage.getState().message;
-        if (message.role !== "user")
-          throw new Error(
-            "Tried to edit a non-user message. Editing is only supported for user messages. This is likely an internal bug in assistant-ui."
-          );
-        const text = getMessageText(message);
-        return text;
-      },
-      onSend: (text) => {
-        const { message, parentId } = useMessage.getState();
-        if (message.role !== "user")
-          throw new Error(
-            "Tried to edit a non-user message. Editing is only supported for user messages. This is likely an internal bug in assistant-ui."
-          );
-        const nonTextParts = message.content.filter(
-          (part) => part.type !== "text" && part.type !== "ui"
-        );
-        useThreadActions.getState().append({
-          parentId,
-          role: "user",
-          content: [{ type: "text", text }, ...nonTextParts]
-        });
+
+// src/primitives/branchPicker/BranchPickerRoot.tsx
+var import_react_primitive6 = require("@radix-ui/react-primitive");
+var import_react31 = require("react");
+
+// src/primitives/message/index.ts
+var message_exports = {};
+__export(message_exports, {
+  Content: () => MessageContent,
+  If: () => MessageIf,
+  InProgress: () => MessageInProgress,
+  Root: () => MessageRoot
+});
+
+// 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_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)
       }
-    });
-    syncMessage(
-      useThread.getState(),
-      useThreadActions.getState().getBranches,
-      useMessage,
-      messageIndex
     );
-    return { useMessage, useMessageUtils, useEditComposer };
-  });
-  (0, import_react23.useEffect)(() => {
-    return useThread.subscribe((thread) => {
-      syncMessage(
-        thread,
-        useThreadActions.getState().getBranches,
-        context.useMessage,
-        messageIndex
-      );
-    });
-  }, [useThread, useThreadActions, context, messageIndex]);
-  return context;
-};
-var MessageProvider = ({
-  messageIndex,
-  children
-}) => {
-  const context = useMessageContext2(messageIndex);
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(MessageContext.Provider, { value: context, children });
-};
-
-// src/primitives/composer/ComposerIf.tsx
-var ComposerIf = ({ children, ...query }) => {
-  const result = useComposerIf(query);
-  return result ? children : null;
-};
+  }
+);
+MessageRoot.displayName = "MessageRoot";
 
 // src/primitives/message/MessageIf.tsx
 var MessageIf = ({ children, ...query }) => {
@@ -761,85 +982,166 @@ var MessageIf = ({ children, ...query }) => {
   return result ? children : null;
 };
 
-// src/primitives/thread/ThreadMessages.tsx
-var import_jsx_runtime4 = require("react/jsx-runtime");
-var getComponents = (components) => {
-  return {
-    EditComposer: components.EditComposer ?? components.UserMessage ?? components.Message,
-    UserMessage: components.UserMessage ?? components.Message,
-    AssistantMessage: components.AssistantMessage ?? components.Message
-  };
-};
-var ThreadMessageImpl = ({
-  messageIndex,
-  components
-}) => {
-  const { UserMessage, EditComposer, AssistantMessage } = getComponents(components);
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(MessageProvider, { messageIndex, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(MessageIf, { user: true, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ComposerIf, { editing: false, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(UserMessage, {}) }),
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ComposerIf, { editing: true, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(EditComposer, {}) })
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(MessageIf, { assistant: true, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(AssistantMessage, {}) })
-  ] });
+// src/primitives/message/MessageContent.tsx
+var import_react29 = require("react");
+
+// src/context/providers/ContentPartProvider.tsx
+var import_react27 = require("react");
+var import_zustand7 = require("zustand");
+var import_jsx_runtime12 = require("react/jsx-runtime");
+var syncContentPart = ({ message }, useContentPart, partIndex) => {
+  const part = message.content[partIndex];
+  if (!part) return;
+  const messageStatus = message.role === "assistant" ? message.status : "done";
+  const status = partIndex === message.content.length - 1 ? messageStatus : "done";
+  const currentState = useContentPart.getState();
+  if (currentState.part === part && currentState.status === status) return;
+  useContentPart.setState(
+    Object.freeze({
+      part,
+      status
+    })
+  );
 };
-var ThreadMessage = (0, import_react24.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);
-  if (messagesLength === 0) return null;
-  return new Array(messagesLength).fill(null).map((_, idx) => {
-    const messageIndex = idx;
-    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-      ThreadMessage,
-      {
-        messageIndex,
-        components
-      },
-      messageIndex
+var useContentPartContext2 = (partIndex) => {
+  const { useMessage } = useMessageContext();
+  const [context] = (0, import_react27.useState)(() => {
+    const useContentPart = (0, import_zustand7.create)(
+      () => ({})
     );
+    syncContentPart(useMessage.getState(), useContentPart, partIndex);
+    return { useContentPart };
   });
+  (0, import_react27.useEffect)(() => {
+    syncContentPart(useMessage.getState(), context.useContentPart, partIndex);
+    return useMessage.subscribe((message) => {
+      syncContentPart(message, context.useContentPart, partIndex);
+    });
+  }, [context, useMessage, partIndex]);
+  return context;
+};
+var ContentPartProvider = ({
+  partIndex,
+  children
+}) => {
+  const context = useContentPartContext2(partIndex);
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(ContentPartContext.Provider, { value: context, children });
 };
 
-// src/utils/createActionButton.tsx
-var import_primitive = require("@radix-ui/primitive");
-var import_react_primitive3 = require("@radix-ui/react-primitive");
-var import_react25 = require("react");
-var import_jsx_runtime5 = require("react/jsx-runtime");
-var createActionButton = (displayName, useActionButton) => {
-  const ActionButton = (0, import_react25.forwardRef)((props, forwardedRef) => {
-    const callback = useActionButton(props);
-    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-      import_react_primitive3.Primitive.button,
-      {
-        type: "button",
-        disabled: !callback,
-        ...props,
-        ref: forwardedRef,
-        onClick: (0, import_primitive.composeEventHandlers)(props.onClick, () => {
-          callback?.();
-        })
-      }
-    );
-  });
-  ActionButton.displayName = displayName;
-  return ActionButton;
+// src/primitives/contentPart/ContentPartDisplay.tsx
+var ContentPartDisplay = () => {
+  const display = useContentPartDisplay();
+  return display ?? null;
 };
 
-// src/primitives/thread/ThreadScrollToBottom.tsx
-var ThreadScrollToBottom = createActionButton(
-  "ThreadScrollToBottom",
-  useThreadScrollToBottom
-);
+// src/primitives/contentPart/ContentPartInProgressIndicator.tsx
+var ContentPartInProgressIndicator = () => {
+  const indicator = useContentPartInProgressIndicator();
+  return indicator;
+};
 
-// src/primitives/thread/ThreadSuggestion.tsx
-var ThreadSuggestion = createActionButton(
-  "ThreadSuggestion",
-  useThreadSuggestion
+// 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) => {
+  const text = useContentPartText();
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react_primitive4.Primitive.p, { ...props, ref: forwardedRef, children: text });
+});
+ContentPartText.displayName = "ContentPartText";
+
+// src/primitives/message/MessageContent.tsx
+var import_jsx_runtime14 = 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, {})
+  ] }),
+  Image: () => null,
+  UI: () => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(ContentPartDisplay, {}),
+  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 });
+    }
+  }
+};
+var MessageContentPartComponent = ({
+  components: {
+    Text = defaultComponents.Text,
+    Image = defaultComponents.Image,
+    UI = defaultComponents.UI,
+    tools: { by_name = {}, Fallback = defaultComponents.tools.Fallback } = {}
+  } = {}
+}) => {
+  const { useThreadActions } = useThreadContext();
+  const addToolResult = useThreadActions((t) => t.addToolResult);
+  const { useContentPart } = useContentPartContext();
+  const { part, status } = useContentPart();
+  const type = part.type;
+  switch (type) {
+    case "text":
+      return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Text, { part, status });
+    case "image":
+      return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Image, { part, status });
+    case "ui":
+      return /* @__PURE__ */ (0, import_jsx_runtime14.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 });
+    }
+    default:
+      throw new Error(`Unknown content part type: ${type}`);
+  }
+};
+var MessageContentPartImpl = ({
+  partIndex,
+  components
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(ContentPartProvider, { partIndex, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(MessageContentPartComponent, { components }) });
+};
+var MessageContentPart = (0, import_react29.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 }) => {
+  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)(
+      MessageContentPart,
+      {
+        partIndex,
+        components
+      },
+      partIndex
+    );
+  });
+};
+
+// src/primitives/message/MessageInProgress.tsx
+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) => {
+  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;
+});
+MessageInProgress.displayName = "MessageInProgress";
+
+// 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 }) });
+});
+BranchPickerRoot.displayName = "BranchPickerRoot";
 
 // src/primitives/composer/index.ts
 var composer_exports = {};
@@ -852,11 +1154,11 @@ __export(composer_exports, {
 });
 
 // src/primitives/composer/ComposerRoot.tsx
-var import_primitive2 = require("@radix-ui/primitive");
-var import_react_primitive4 = require("@radix-ui/react-primitive");
-var import_react26 = require("react");
-var import_jsx_runtime6 = require("react/jsx-runtime");
-var ComposerRoot = (0, import_react26.forwardRef)(
+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) => {
@@ -864,12 +1166,12 @@ var ComposerRoot = (0, import_react26.forwardRef)(
       e.preventDefault();
       send();
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-      import_react_primitive4.Primitive.form,
+    return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+      import_react_primitive7.Primitive.form,
       {
         ...rest,
         ref: forwardedRef,
-        onSubmit: (0, import_primitive2.composeEventHandlers)(onSubmit, handleSubmit)
+        onSubmit: (0, import_primitive5.composeEventHandlers)(onSubmit, handleSubmit)
       }
     );
   }
@@ -877,14 +1179,14 @@ var ComposerRoot = (0, import_react26.forwardRef)(
 ComposerRoot.displayName = "ComposerRoot";
 
 // src/primitives/composer/ComposerInput.tsx
-var import_primitive3 = require("@radix-ui/primitive");
-var import_react_compose_refs3 = require("@radix-ui/react-compose-refs");
+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_react27 = require("react");
+var import_react33 = 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_runtime7 = require("react/jsx-runtime");
-var ComposerInput = (0, import_react27.forwardRef)(
+var import_jsx_runtime18 = require("react/jsx-runtime");
+var ComposerInput = (0, import_react33.forwardRef)(
   ({ autoFocus = false, asChild, disabled, onChange, onKeyDown, ...rest }, forwardedRef) => {
     const { useThread } = useThreadContext();
     const { useComposer, type } = useComposerContext();
@@ -893,8 +1195,8 @@ var ComposerInput = (0, import_react27.forwardRef)(
       return c.value;
     });
     const Component = asChild ? import_react_slot.Slot : import_react_textarea_autosize.default;
-    const textareaRef = (0, import_react27.useRef)(null);
-    const ref = (0, import_react_compose_refs3.useComposedRefs)(forwardedRef, textareaRef);
+    const textareaRef = (0, import_react33.useRef)(null);
+    const ref = (0, import_react_compose_refs.useComposedRefs)(forwardedRef, textareaRef);
     (0, import_react_use_escape_keydown.useEscapeKeydown)((e) => {
       const composer = useComposer.getState();
       if (composer.cancel()) {
@@ -912,35 +1214,34 @@ var ComposerInput = (0, import_react27.forwardRef)(
       }
     };
     const autoFocusEnabled = autoFocus && !disabled;
-    const focus = (0, import_react27.useCallback)(() => {
+    const focus = (0, import_react33.useCallback)(() => {
       const textarea = textareaRef.current;
       if (!textarea || !autoFocusEnabled) return;
-      textarea.focus();
+      textarea.focus({ preventScroll: true });
       textarea.setSelectionRange(
         textareaRef.current.value.length,
         textareaRef.current.value.length
       );
     }, [autoFocusEnabled]);
-    (0, import_react27.useEffect)(() => focus(), [focus]);
-    useOnScrollToBottom(() => {
+    (0, import_react33.useEffect)(() => focus(), [focus]);
+    useOnComposerFocus(() => {
       if (type === "new") {
         focus();
       }
     });
-    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
       Component,
       {
         value,
         ...rest,
         ref,
-        autoFocus,
         disabled,
-        onChange: (0, import_primitive3.composeEventHandlers)(onChange, (e) => {
+        onChange: (0, import_primitive6.composeEventHandlers)(onChange, (e) => {
           const composerState = useComposer.getState();
           if (!composerState.isEditing) return;
           return composerState.setValue(e.target.value);
         }),
-        onKeyDown: (0, import_primitive3.composeEventHandlers)(onKeyDown, handleKeyPress)
+        onKeyDown: (0, import_primitive6.composeEventHandlers)(onKeyDown, handleKeyPress)
       }
     );
   }
@@ -948,15 +1249,15 @@ var ComposerInput = (0, import_react27.forwardRef)(
 ComposerInput.displayName = "ComposerInput";
 
 // src/primitives/composer/ComposerSend.tsx
-var import_react28 = require("react");
-var import_react_primitive5 = require("@radix-ui/react-primitive");
-var import_jsx_runtime8 = require("react/jsx-runtime");
-var ComposerSend = (0, import_react28.forwardRef)(
+var import_react34 = 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_runtime8.jsx)(
-      import_react_primitive5.Primitive.button,
+    return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+      import_react_primitive8.Primitive.button,
       {
         type: "submit",
         ...rest,
@@ -974,360 +1275,397 @@ var ComposerCancel = createActionButton(
   useComposerCancel
 );
 
-// src/primitives/message/index.ts
-var message_exports = {};
-__export(message_exports, {
-  Content: () => MessageContent,
-  If: () => MessageIf,
-  InProgress: () => MessageInProgress,
-  Root: () => MessageRoot
+// src/primitives/composer/ComposerIf.tsx
+var ComposerIf = ({ children, ...query }) => {
+  const result = useComposerIf(query);
+  return result ? children : null;
+};
+
+// src/primitives/contentPart/index.ts
+var contentPart_exports = {};
+__export(contentPart_exports, {
+  Display: () => ContentPartDisplay,
+  Image: () => ContentPartImage,
+  InProgressIndicator: () => ContentPartInProgressIndicator,
+  Text: () => ContentPartText
 });
 
-// src/primitives/message/MessageRoot.tsx
-var import_primitive4 = require("@radix-ui/primitive");
-var import_react_primitive6 = require("@radix-ui/react-primitive");
-var import_react29 = require("react");
-var import_jsx_runtime9 = require("react/jsx-runtime");
-var MessageRoot = (0, import_react29.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_runtime9.jsx)(
-      import_react_primitive6.Primitive.div,
-      {
-        ...rest,
-        ref,
-        onMouseEnter: (0, import_primitive4.composeEventHandlers)(onMouseEnter, handleMouseEnter),
-        onMouseLeave: (0, import_primitive4.composeEventHandlers)(onMouseLeave, handleMouseLeave)
-      }
-    );
+// 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) => {
+  const image = useContentPartImage();
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react_primitive9.Primitive.img, { src: image, ...props, ref: forwardedRef });
+});
+ContentPartImage.displayName = "ContentPartImage";
+
+// 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
+});
+
+// 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 });
   }
 );
-MessageRoot.displayName = "MessageRoot";
-
-// src/primitives/message/MessageContent.tsx
-var import_react32 = require("react");
+ThreadRoot.displayName = "ThreadRoot";
 
-// src/context/providers/ContentPartProvider.tsx
-var import_react30 = require("react");
-var import_zustand4 = require("zustand");
-var import_jsx_runtime10 = require("react/jsx-runtime");
-var syncContentPart = ({ message }, useContentPart, partIndex) => {
-  const part = message.content[partIndex];
-  if (!part) return;
-  const messageStatus = message.role === "assistant" ? message.status : "done";
-  const status = partIndex === message.content.length - 1 ? messageStatus : "done";
-  const currentState = useContentPart.getState();
-  if (currentState.part === part && currentState.status === status) return;
-  useContentPart.setState(
-    Object.freeze({
-      part,
-      status
-    })
-  );
-};
-var useContentPartContext2 = (partIndex) => {
-  const { useMessage } = useMessageContext();
-  const [context] = (0, import_react30.useState)(() => {
-    const useContentPart = (0, import_zustand4.create)(
-      () => ({})
-    );
-    syncContentPart(useMessage.getState(), useContentPart, partIndex);
-    return { useContentPart };
-  });
-  (0, import_react30.useEffect)(() => {
-    syncContentPart(useMessage.getState(), context.useContentPart, partIndex);
-    return useMessage.subscribe((message) => {
-      syncContentPart(message, context.useContentPart, partIndex);
-    });
-  }, [context, useMessage, partIndex]);
-  return context;
-};
-var ContentPartProvider = ({
-  partIndex,
-  children
-}) => {
-  const context = useContentPartContext2(partIndex);
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ContentPartContext.Provider, { value: context, children });
+// src/primitives/thread/ThreadEmpty.tsx
+var ThreadEmpty = ({ children }) => {
+  const empty = useThreadEmpty();
+  return empty ? children : null;
 };
 
-// src/primitives/contentPart/ContentPartDisplay.tsx
-var ContentPartDisplay = () => {
-  const display = useContentPartDisplay();
-  return display ?? null;
+// src/primitives/thread/ThreadIf.tsx
+var ThreadIf = ({ children, ...query }) => {
+  const result = useThreadIf(query);
+  return result ? children : null;
 };
 
-// src/primitives/contentPart/ContentPartInProgressIndicator.tsx
-var ContentPartInProgressIndicator = () => {
-  const indicator = useContentPartInProgressIndicator();
-  return indicator;
-};
+// 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");
 
-// src/primitives/contentPart/ContentPartText.tsx
-var import_react_primitive7 = require("@radix-ui/react-primitive");
-var import_react31 = require("react");
-var import_jsx_runtime11 = require("react/jsx-runtime");
-var ContentPartText = (0, import_react31.forwardRef)((props, forwardedRef) => {
-  const text = useContentPartText();
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react_primitive7.Primitive.span, { ...props, ref: forwardedRef, children: text });
-});
-ContentPartText.displayName = "ContentPartText";
+// src/primitive-hooks/thread/useThreadViewportAutoScroll.tsx
+var import_react_compose_refs2 = require("@radix-ui/react-compose-refs");
+var import_react40 = require("react");
 
-// src/primitives/message/MessageContent.tsx
-var import_jsx_runtime12 = require("react/jsx-runtime");
-var defaultComponents = {
-  Text: () => /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_jsx_runtime12.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(ContentPartText, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(ContentPartInProgressIndicator, {})
-  ] }),
-  Image: () => null,
-  UI: () => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(ContentPartDisplay, {}),
-  tools: {
-    Fallback: (props) => {
-      const { useToolUIs } = useAssistantContext();
-      const Render = useToolUIs((s) => s.getToolUI(props.part.toolName));
-      if (!Render) return null;
-      return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Render, { ...props });
-    }
-  }
+// src/utils/hooks/useOnResizeContent.tsx
+var import_react_use_callback_ref2 = require("@radix-ui/react-use-callback-ref");
+var import_react38 = require("react");
+
+// src/utils/hooks/useManagedRef.ts
+var import_react37 = require("react");
+var useManagedRef = (callback) => {
+  const cleanupRef = (0, import_react37.useRef)();
+  const ref = (0, import_react37.useCallback)(
+    (el) => {
+      if (cleanupRef.current) {
+        cleanupRef.current();
+      }
+      if (el) {
+        cleanupRef.current = callback(el);
+      }
+    },
+    [callback]
+  );
+  return ref;
 };
-var MessageContentPartComponent = ({
-  components: {
-    Text = defaultComponents.Text,
-    Image = defaultComponents.Image,
-    UI = defaultComponents.UI,
-    tools: { by_name = {}, Fallback = defaultComponents.tools.Fallback } = {}
-  } = {}
-}) => {
-  const { useThreadActions } = useThreadContext();
-  const addToolResult = useThreadActions((t) => t.addToolResult);
-  const { useContentPart } = useContentPartContext();
-  const { part, status } = useContentPart();
-  const type = part.type;
-  switch (type) {
-    case "text":
-      return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Text, { part, status });
-    case "image":
-      return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Image, { part, status });
-    case "ui":
-      return /* @__PURE__ */ (0, import_jsx_runtime12.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_runtime12.jsx)(Tool, { part, status, addResult });
-    }
-    default:
-      throw new Error(`Unknown content part type: ${type}`);
-  }
+
+// src/utils/hooks/useOnResizeContent.tsx
+var useOnResizeContent = (callback) => {
+  const callbackRef = (0, import_react_use_callback_ref2.useCallbackRef)(callback);
+  const refCallback = (0, import_react38.useCallback)(
+    (el) => {
+      const resizeObserver = new ResizeObserver(() => {
+        callbackRef();
+      });
+      const mutationObserver = new MutationObserver((mutations) => {
+        for (const mutation of mutations) {
+          for (const node of mutation.addedNodes) {
+            if (node instanceof Element) {
+              resizeObserver.observe(node);
+            }
+          }
+          for (const node of mutation.removedNodes) {
+            if (node instanceof Element) {
+              resizeObserver.unobserve(node);
+            }
+          }
+        }
+        callbackRef();
+      });
+      resizeObserver.observe(el);
+      mutationObserver.observe(el, { childList: true });
+      for (const child of el.children) {
+        resizeObserver.observe(child);
+      }
+      return () => {
+        resizeObserver.disconnect();
+        mutationObserver.disconnect();
+      };
+    },
+    [callbackRef]
+  );
+  return useManagedRef(refCallback);
 };
-var MessageContentPartImpl = ({
-  partIndex,
-  components
-}) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(ContentPartProvider, { partIndex, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(MessageContentPartComponent, { components }) });
+
+// src/utils/hooks/useOnScrollToBottom.tsx
+var import_react_use_callback_ref3 = require("@radix-ui/react-use-callback-ref");
+var import_react39 = require("react");
+var useOnScrollToBottom = (callback) => {
+  const callbackRef = (0, import_react_use_callback_ref3.useCallbackRef)(callback);
+  const { useViewport } = useThreadContext();
+  (0, import_react39.useEffect)(() => {
+    return useViewport.getState().onScrollToBottom(() => {
+      callbackRef();
+    });
+  }, [useViewport, callbackRef]);
 };
-var MessageContentPart = (0, import_react32.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 }) => {
-  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_runtime12.jsx)(
-      MessageContentPart,
-      {
-        partIndex,
-        components
-      },
-      partIndex
-    );
+
+// src/primitive-hooks/thread/useThreadViewportAutoScroll.tsx
+var useThreadViewportAutoScroll = ({
+  autoScroll = true
+}) => {
+  const divRef = (0, import_react40.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 scrollToBottom = () => {
+    const div = divRef.current;
+    if (!div || !autoScroll) return;
+    const behavior = firstRenderRef.current ? "instant" : "auto";
+    firstRenderRef.current = false;
+    isScrollingToBottomRef.current = true;
+    div.scrollTo({ top: div.scrollHeight, behavior });
+  };
+  const handleScroll = () => {
+    const div = divRef.current;
+    if (!div) return;
+    const isAtBottom = useViewport.getState().isAtBottom;
+    const newIsAtBottom = div.scrollHeight - div.scrollTop <= div.clientHeight;
+    if (!newIsAtBottom && lastScrollTop.current < div.scrollTop) {
+    } else {
+      isScrollingToBottomRef.current = newIsAtBottom;
+      if (newIsAtBottom !== isAtBottom) {
+        useViewport.setState({
+          isAtBottom: newIsAtBottom
+        });
+      }
+    }
+    lastScrollTop.current = div.scrollTop;
+  };
+  const resizeRef = useOnResizeContent(() => {
+    if (!isScrollingToBottomRef.current && !useViewport.getState().isAtBottom && !firstRenderRef.current) {
+      handleScroll();
+    } else {
+      scrollToBottom();
+    }
+  });
+  const scrollRef = useManagedRef((el) => {
+    el.addEventListener("scroll", handleScroll);
+    return () => {
+      el.removeEventListener("scroll", handleScroll);
+    };
+  });
+  const autoScrollRef = (0, import_react_compose_refs2.useComposedRefs)(resizeRef, scrollRef, divRef);
+  useOnScrollToBottom(() => {
+    scrollToBottom();
   });
+  return autoScrollRef;
 };
 
-// src/primitives/message/MessageInProgress.tsx
-var import_react_primitive8 = require("@radix-ui/react-primitive");
-var import_react33 = require("react");
-var import_jsx_runtime13 = require("react/jsx-runtime");
-var MessageInProgress = (0, import_react33.forwardRef)((props, ref) => {
-  const { useMessageUtils } = useMessageContext();
-  (0, import_react33.useMemo)(() => {
-    useMessageUtils.getState().setInProgressIndicator(/* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react_primitive8.Primitive.span, { ...props, ref }));
-  }, [useMessageUtils, props, ref]);
-  return null;
+// src/primitives/thread/ThreadViewport.tsx
+var import_jsx_runtime22 = require("react/jsx-runtime");
+var ThreadViewport = (0, import_react41.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 });
 });
-MessageInProgress.displayName = "MessageInProgress";
+ThreadViewport.displayName = "ThreadViewport";
 
-// src/primitives/branchPicker/index.ts
-var branchPicker_exports = {};
-__export(branchPicker_exports, {
-  Count: () => BranchPickerCount,
-  Next: () => BranchPickerNext,
-  Number: () => BranchPickerNumber,
-  Previous: () => BranchPickerPrevious,
-  Root: () => BranchPickerRoot
-});
+// src/primitives/thread/ThreadMessages.tsx
+var import_react43 = require("react");
 
-// src/primitives/branchPicker/BranchPickerNext.tsx
-var BranchPickerNext = createActionButton(
-  "BranchPickerNext",
-  useBranchPickerNext
-);
+// src/context/providers/MessageProvider.tsx
+var import_react42 = require("react");
+var import_zustand10 = require("zustand");
 
-// src/primitives/branchPicker/BranchPickerPrevious.tsx
-var BranchPickerPrevious = createActionButton(
-  "BranchPickerPrevious",
-  useBranchPickerPrevious
-);
+// src/context/stores/EditComposer.ts
+var import_zustand8 = require("zustand");
+var makeEditComposerStore = ({
+  onEdit,
+  onSend
+}) => (0, import_zustand8.create)()((set, get, store) => ({
+  ...makeBaseComposer(set, get, store),
+  isEditing: false,
+  edit: () => {
+    const value = onEdit();
+    set({ isEditing: true, value });
+  },
+  send: () => {
+    const value = get().value;
+    set({ isEditing: false });
+    onSend(value);
+  },
+  cancel: () => {
+    if (!get().isEditing) return false;
+    set({ isEditing: false });
+    return true;
+  }
+}));
 
-// src/primitives/branchPicker/BranchPickerCount.tsx
-var import_jsx_runtime14 = require("react/jsx-runtime");
-var BranchPickerCount = () => {
-  const branchCount = useBranchPickerCount();
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_jsx_runtime14.Fragment, { children: branchCount });
-};
+// src/context/stores/MessageUtils.ts
+var import_zustand9 = require("zustand");
+var makeMessageUtilsStore = () => (0, import_zustand9.create)((set) => ({
+  inProgressIndicator: null,
+  setInProgressIndicator: (value) => {
+    set({ inProgressIndicator: value });
+  },
+  isCopied: false,
+  setIsCopied: (value) => {
+    set({ isCopied: value });
+  },
+  isHovering: false,
+  setIsHovering: (value) => {
+    set({ isHovering: value });
+  }
+}));
 
-// src/primitives/branchPicker/BranchPickerNumber.tsx
-var import_jsx_runtime15 = require("react/jsx-runtime");
-var BranchPickerNumber = () => {
-  const branchNumber = useBranchPickerNumber();
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_jsx_runtime15.Fragment, { children: branchNumber });
+// 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;
 };
-
-// src/primitives/branchPicker/BranchPickerRoot.tsx
-var import_react_primitive9 = require("@radix-ui/react-primitive");
-var import_react34 = require("react");
-var import_jsx_runtime16 = require("react/jsx-runtime");
-var BranchPickerRoot = (0, import_react34.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_primitive9.Primitive.div, { ...rest, ref }) });
-});
-BranchPickerRoot.displayName = "BranchPickerRoot";
-
-// src/primitives/actionBar/index.ts
-var actionBar_exports = {};
-__export(actionBar_exports, {
-  Copy: () => ActionBarCopy,
-  Edit: () => ActionBarEdit,
-  Reload: () => ActionBarReload,
-  Root: () => ActionBarRoot
-});
-
-// src/primitives/actionBar/ActionBarRoot.tsx
-var import_react_primitive10 = require("@radix-ui/react-primitive");
-var import_react35 = require("react");
-var import_jsx_runtime17 = require("react/jsx-runtime");
-var useActionBarFloatStatus = ({
-  hideWhenRunning,
-  autohide,
-  autohideFloat
-}) => {
-  const { useThread } = useThreadContext();
-  const { useMessage, useMessageUtils } = useMessageContext();
-  return useCombinedStore(
-    [useThread, useMessage, useMessageUtils],
-    (t, m, mu) => {
-      if (hideWhenRunning && t.isRunning) return "hidden" /* Hidden */;
-      const autohideEnabled = autohide === "always" || autohide === "not-last" && !m.isLast;
-      if (!autohideEnabled) return "normal" /* Normal */;
-      if (!mu.isHovering) return "hidden" /* Hidden */;
-      if (autohideFloat === "always" || autohideFloat === "single-branch" && m.branches.length <= 1)
-        return "floating" /* Floating */;
-      return "normal" /* Normal */;
-    }
-  );
+var syncMessage = (thread, getBranches, useMessage, messageIndex) => {
+  const parentId = thread.messages[messageIndex - 1]?.id ?? null;
+  const message = thread.messages[messageIndex];
+  if (!message) return;
+  const isLast = getIsLast(thread, message);
+  const branches = getBranches(message.id);
+  const currentState = useMessage.getState();
+  if (currentState.message === message && currentState.parentId === parentId && currentState.branches === branches && currentState.isLast === isLast)
+    return;
+  useMessage.setState({
+    message,
+    parentId,
+    branches,
+    isLast
+  });
 };
-var ActionBarRoot = (0, import_react35.forwardRef)(({ hideWhenRunning, autohide, autohideFloat, ...rest }, ref) => {
-  const hideAndfloatStatus = useActionBarFloatStatus({
-    hideWhenRunning,
-    autohide,
-    autohideFloat
+var useMessageContext2 = (messageIndex) => {
+  const { useThread, useThreadActions } = useThreadContext();
+  const [context] = (0, import_react42.useState)(() => {
+    const useMessage = (0, import_zustand10.create)(() => ({}));
+    const useMessageUtils = makeMessageUtilsStore();
+    const useEditComposer = makeEditComposerStore({
+      onEdit: () => {
+        const message = useMessage.getState().message;
+        if (message.role !== "user")
+          throw new Error(
+            "Tried to edit a non-user message. Editing is only supported for user messages. This is likely an internal bug in assistant-ui."
+          );
+        const text = getMessageText(message);
+        return text;
+      },
+      onSend: (text) => {
+        const { message, parentId } = useMessage.getState();
+        if (message.role !== "user")
+          throw new Error(
+            "Tried to edit a non-user message. Editing is only supported for user messages. This is likely an internal bug in assistant-ui."
+          );
+        const nonTextParts = message.content.filter(
+          (part) => part.type !== "text" && part.type !== "ui"
+        );
+        useThreadActions.getState().append({
+          parentId,
+          role: "user",
+          content: [{ type: "text", text }, ...nonTextParts]
+        });
+      }
+    });
+    syncMessage(
+      useThread.getState(),
+      useThreadActions.getState().getBranches,
+      useMessage,
+      messageIndex
+    );
+    return { useMessage, useMessageUtils, useEditComposer };
   });
-  if (hideAndfloatStatus === "hidden" /* Hidden */) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
-    import_react_primitive10.Primitive.div,
-    {
-      ...hideAndfloatStatus === "floating" /* Floating */ ? { "data-floating": "true" } : null,
-      ...rest,
-      ref
-    }
-  );
-});
-ActionBarRoot.displayName = "ActionBarRoot";
+  (0, import_react42.useEffect)(() => {
+    return useThread.subscribe((thread) => {
+      syncMessage(
+        thread,
+        useThreadActions.getState().getBranches,
+        context.useMessage,
+        messageIndex
+      );
+    });
+  }, [useThread, useThreadActions, context, messageIndex]);
+  return context;
+};
+var MessageProvider = ({
+  messageIndex,
+  children
+}) => {
+  const context = useMessageContext2(messageIndex);
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(MessageContext.Provider, { value: context, children });
+};
 
-// src/primitives/actionBar/ActionBarCopy.tsx
-var ActionBarCopy = createActionButton(
-  "ActionBarCopy",
-  useActionBarCopy
+// src/primitives/thread/ThreadMessages.tsx
+var import_jsx_runtime24 = require("react/jsx-runtime");
+var getComponents = (components) => {
+  return {
+    EditComposer: components.EditComposer ?? components.UserMessage ?? components.Message,
+    UserMessage: components.UserMessage ?? components.Message,
+    AssistantMessage: components.AssistantMessage ?? components.Message
+  };
+};
+var ThreadMessageImpl = ({
+  messageIndex,
+  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, {}) })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(MessageIf, { assistant: true, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(AssistantMessage, {}) })
+  ] });
+};
+var ThreadMessage = (0, import_react43.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);
+  if (messagesLength === 0) return null;
+  return new Array(messagesLength).fill(null).map((_, idx) => {
+    const messageIndex = idx;
+    return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+      ThreadMessage,
+      {
+        messageIndex,
+        components
+      },
+      messageIndex
+    );
+  });
+};
 
-// src/primitives/actionBar/ActionBarReload.tsx
-var ActionBarReload = createActionButton(
-  "ActionBarReload",
-  useActionBarReload
+// src/primitives/thread/ThreadScrollToBottom.tsx
+var ThreadScrollToBottom = createActionButton(
+  "ThreadScrollToBottom",
+  useThreadScrollToBottom
 );
 
-// src/primitives/actionBar/ActionBarEdit.tsx
-var ActionBarEdit = createActionButton(
-  "ActionBarEdit",
-  useActionBarEdit
+// src/primitives/thread/ThreadSuggestion.tsx
+var ThreadSuggestion = createActionButton(
+  "ThreadSuggestion",
+  useThreadSuggestion
 );
 
-// src/primitives/contentPart/index.ts
-var contentPart_exports = {};
-__export(contentPart_exports, {
-  Display: () => ContentPartDisplay,
-  Image: () => ContentPartImage,
-  InProgressIndicator: () => ContentPartInProgressIndicator,
-  Text: () => ContentPartText
-});
-
-// src/primitives/contentPart/ContentPartImage.tsx
-var import_react_primitive11 = require("@radix-ui/react-primitive");
-var import_react36 = require("react");
-var import_jsx_runtime18 = require("react/jsx-runtime");
-var ContentPartImage = (0, import_react36.forwardRef)((props, forwardedRef) => {
-  const image = useContentPartImage();
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_react_primitive11.Primitive.img, { src: image, ...props, ref: forwardedRef });
-});
-ContentPartImage.displayName = "ContentPartImage";
-
 // src/runtime/local/useLocalRuntime.tsx
-var import_react37 = require("react");
-
-// src/utils/ModelConfigTypes.ts
-var mergeModelConfigs = (configSet) => {
-  const configs = Array.from(configSet).map((c) => c()).sort((a, b) => (b.priority ?? 0) - (a.priority ?? 0));
-  return configs.reduce((acc, config) => {
-    if (config.system) {
-      if (acc.system) {
-        acc.system += `
-
-${config.system}`;
-      } else {
-        acc.system = config.system;
-      }
-    }
-    if (config.tools) {
-      for (const [name, tool] of Object.entries(config.tools)) {
-        if (acc.tools?.[name]) {
-          throw new Error(
-            `You tried to define a tool with the name ${name}, but it already exists.`
-          );
-        }
-        if (!acc.tools) acc.tools = {};
-        acc.tools[name] = tool;
-      }
-    }
-    return acc;
-  }, {});
-};
+var import_react44 = require("react");
 
 // src/runtime/utils/idUtils.tsx
 var import_non_secure = require("nanoid/non-secure");
@@ -1585,219 +1923,81 @@ var LocalRuntime = class {
 
 // src/runtime/local/useLocalRuntime.tsx
 var useLocalRuntime = (adapter) => {
-  const [runtime] = (0, import_react37.useState)(() => new LocalRuntime(adapter));
-  (0, import_react37.useInsertionEffect)(() => {
+  const [runtime] = (0, import_react44.useState)(() => new LocalRuntime(adapter));
+  (0, import_react44.useInsertionEffect)(() => {
     runtime.adapter = adapter;
   });
   return runtime;
 };
 
-// src/context/providers/AssistantRuntimeProvider.tsx
-var import_react40 = require("react");
-
-// src/context/providers/AssistantProvider.tsx
-var import_react39 = require("react");
-
-// src/context/stores/AssistantModelConfig.ts
-var import_zustand5 = require("zustand");
-
-// src/utils/ProxyConfigProvider.ts
-var ProxyConfigProvider = class {
-  _providers = /* @__PURE__ */ new Set();
-  getModelConfig() {
-    return mergeModelConfigs(this._providers);
-  }
-  registerModelConfigProvider(provider) {
-    this._providers.add(provider);
+// 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 () => {
-      this._providers.delete(provider);
+      unsub1();
+      unsub2?.();
     };
-  }
+  }, [registerModelConfigProvider, setToolUI, tool]);
 };
 
-// src/context/stores/AssistantModelConfig.ts
-var makeAssistantModelConfigStore = () => (0, import_zustand5.create)(() => {
-  const proxy = new ProxyConfigProvider();
-  return Object.freeze({
-    getModelConfig: () => {
-      return proxy.getModelConfig();
-    },
-    registerModelConfigProvider: (provider) => {
-      return proxy.registerModelConfigProvider(provider);
-    }
-  });
-});
-
-// src/context/stores/AssistantToolUIs.ts
-var import_zustand6 = require("zustand");
-var makeAssistantToolUIsStore = () => (0, import_zustand6.create)((set) => {
-  const renderers = /* @__PURE__ */ new Map();
-  return Object.freeze({
-    getToolUI: (name) => {
-      const arr = renderers.get(name);
-      const last = arr?.at(-1);
-      if (last) return last;
-      return null;
-    },
-    setToolUI: (name, render) => {
-      let arr = renderers.get(name);
-      if (!arr) {
-        arr = [];
-        renderers.set(name, arr);
-      }
-      arr.push(render);
-      set({});
-      return () => {
-        const index = arr.indexOf(render);
-        if (index !== -1) {
-          arr.splice(index, 1);
-        }
-        if (index === arr.length) {
-          set({});
-        }
-      };
-    }
-  });
-});
-
-// src/context/providers/ThreadProvider.tsx
-var import_react38 = require("react");
-
-// src/context/stores/Composer.ts
-var import_zustand7 = require("zustand");
-var makeComposerStore = (useThread, useThreadActions) => (0, import_zustand7.create)()((set, get, store) => {
-  return {
-    ...makeBaseComposer(set, get, store),
-    isEditing: true,
-    send: () => {
-      const { setValue, value } = get();
-      setValue("");
-      useThreadActions.getState().append({
-        parentId: useThread.getState().messages.at(-1)?.id ?? null,
-        role: "user",
-        content: [{ type: "text", text: value }]
-      });
-    },
-    cancel: () => {
-      const thread = useThread.getState();
-      if (!thread.isRunning) return false;
-      useThreadActions.getState().cancelRun();
-      return true;
-    }
+// src/model-config/makeAssistantTool.tsx
+var makeAssistantTool = (tool) => {
+  const Tool = () => {
+    useAssistantTool(tool);
+    return null;
   };
-});
-
-// src/context/stores/Thread.ts
-var import_zustand8 = require("zustand");
-var makeThreadStore = (runtimeRef) => {
-  return (0, import_zustand8.create)(() => ({
-    messages: runtimeRef.current.messages,
-    isRunning: runtimeRef.current.isRunning
-  }));
-};
-
-// src/context/stores/ThreadViewport.tsx
-var import_zustand9 = require("zustand");
-var makeThreadViewportStore = () => {
-  const scrollToBottomListeners = /* @__PURE__ */ new Set();
-  return (0, import_zustand9.create)(() => ({
-    isAtBottom: true,
-    scrollToBottom: () => {
-      for (const listener of scrollToBottomListeners) {
-        listener();
-      }
-    },
-    onScrollToBottom: (callback) => {
-      scrollToBottomListeners.add(callback);
-      return () => {
-        scrollToBottomListeners.delete(callback);
-      };
-    }
-  }));
+  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/context/stores/ThreadActions.ts
-var import_zustand10 = require("zustand");
-var makeThreadActionStore = (runtimeRef) => {
-  return (0, import_zustand10.create)(
-    () => Object.freeze({
-      getBranches: (messageId) => runtimeRef.current.getBranches(messageId),
-      switchToBranch: (branchId) => runtimeRef.current.switchToBranch(branchId),
-      startRun: (parentId) => runtimeRef.current.startRun(parentId),
-      append: (message) => runtimeRef.current.append(message),
-      cancelRun: () => runtimeRef.current.cancelRun(),
-      addToolResult: (toolCallId, result) => runtimeRef.current.addToolResult(toolCallId, result)
-    })
+// src/model-config/useAssistantInstructions.tsx
+var import_react47 = require("react");
+var useAssistantInstructions = (instruction) => {
+  const { useModelConfig } = useAssistantContext();
+  const registerModelConfigProvider = useModelConfig(
+    (s) => s.registerModelConfigProvider
   );
-};
-
-// src/context/providers/ThreadProvider.tsx
-var import_jsx_runtime19 = require("react/jsx-runtime");
-var ThreadProvider = ({
-  children,
-  runtime
-}) => {
-  const runtimeRef = (0, import_react38.useRef)(runtime);
-  (0, import_react38.useInsertionEffect)(() => {
-    runtimeRef.current = runtime;
-  });
-  const [context] = (0, import_react38.useState)(() => {
-    const useThread = makeThreadStore(runtimeRef);
-    const useThreadActions = makeThreadActionStore(runtimeRef);
-    const useViewport = makeThreadViewportStore();
-    const useComposer = makeComposerStore(useThread, useThreadActions);
-    return {
-      useThread,
-      useThreadActions,
-      useComposer,
-      useViewport
-    };
-  });
-  (0, import_react38.useEffect)(() => {
-    const onRuntimeUpdate = () => {
-      context.useThread.setState(
-        Object.freeze({
-          messages: runtimeRef.current.messages,
-          isRunning: runtimeRef.current.isRunning
-        }),
-        true
-      );
+  (0, import_react47.useEffect)(() => {
+    const config = {
+      system: instruction
     };
-    onRuntimeUpdate();
-    return runtime.subscribe(onRuntimeUpdate);
-  }, [context, runtime]);
-  const RuntimeSynchronizer = runtime.unstable_synchronizer;
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(ThreadContext.Provider, { value: context, children: [
-    RuntimeSynchronizer && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(RuntimeSynchronizer, {}),
-    children
-  ] });
-};
-
-// src/context/providers/AssistantProvider.tsx
-var import_jsx_runtime20 = require("react/jsx-runtime");
-var AssistantProvider = ({ children, runtime }) => {
-  const runtimeRef = (0, import_react39.useRef)(runtime);
-  (0, import_react39.useInsertionEffect)(() => {
-    runtimeRef.current = runtime;
-  });
-  const [context] = (0, import_react39.useState)(() => {
-    const useModelConfig = makeAssistantModelConfigStore();
-    const useToolUIs = makeAssistantToolUIsStore();
-    return { useModelConfig, useToolUIs };
-  });
-  const getModelCOnfig = context.useModelConfig((c) => c.getModelConfig);
-  (0, import_react39.useEffect)(() => {
-    return runtime.registerModelConfigProvider(getModelCOnfig);
-  }, [runtime, getModelCOnfig]);
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(AssistantContext.Provider, { value: context, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(ThreadProvider, { runtime, children }) });
-};
-
-// src/context/providers/AssistantRuntimeProvider.tsx
-var import_jsx_runtime21 = require("react/jsx-runtime");
-var AssistantRuntimeProviderImpl = ({ children, runtime }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(AssistantProvider, { runtime, children });
+    return registerModelConfigProvider(() => config);
+  }, [registerModelConfigProvider, instruction]);
 };
-var AssistantRuntimeProvider = (0, import_react40.memo)(AssistantRuntimeProviderImpl);
 
 // src/internal.ts
 var internal_exports = {};
@@ -1808,6 +2008,7 @@ __export(internal_exports, {
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   ActionBarPrimitive,
+  AssistantModalPrimitive,
   AssistantRuntimeProvider,
   BranchPickerPrimitive,
   ComposerPrimitive,
@@ -1815,22 +2016,32 @@ __export(internal_exports, {
   INTERNAL,
   MessagePrimitive,
   ThreadPrimitive,
+  makeAssistantTool,
+  makeAssistantToolUI,
   useActionBarCopy,
   useActionBarEdit,
   useActionBarReload,
+  useAssistantContext,
+  useAssistantInstructions,
+  useAssistantTool,
+  useAssistantToolUI,
   useBranchPickerCount,
   useBranchPickerNext,
   useBranchPickerNumber,
   useBranchPickerPrevious,
   useComposerCancel,
+  useComposerContext,
   useComposerIf,
   useComposerSend,
+  useContentPartContext,
   useContentPartDisplay,
   useContentPartImage,
   useContentPartInProgressIndicator,
   useContentPartText,
   useLocalRuntime,
+  useMessageContext,
   useMessageIf,
+  useThreadContext,
   useThreadEmpty,
   useThreadIf,
   useThreadScrollToBottom,