@assistant-ui/react 0.1.3 → 0.1.5

package/dist/index.js

@@ -0,0 +1,1642 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var src_exports = {};
+__export(src_exports, {
+  ActionBarPrimitive: () => actionBar_exports,
+  AssistantRuntimeProvider: () => AssistantRuntimeProvider,
+  BranchPickerPrimitive: () => branchPicker_exports,
+  ComposerPrimitive: () => composer_exports,
+  ContentPartPrimitive: () => contentPart_exports,
+  INTERNAL: () => internal_exports,
+  MessagePrimitive: () => message_exports,
+  ThreadPrimitive: () => thread_exports,
+  useBeginMessageEdit: () => useBeginMessageEdit,
+  useCopyMessage: () => useCopyMessage,
+  useGoToNextBranch: () => useGoToNextBranch,
+  useGoToPreviousBranch: () => useGoToPreviousBranch,
+  useLocalRuntime: () => useLocalRuntime,
+  useReloadMessage: () => useReloadMessage
+});
+module.exports = __toCommonJS(src_exports);
+
+// src/actions/useCopyMessage.tsx
+var import_react4 = require("react");
+
+// src/context/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/actions/useCopyMessage.tsx
+var useCopyMessage = ({ copiedDuration = 3e3 }) => {
+  const { useMessage, useComposer } = useMessageContext();
+  const hasCopyableContent = useCombinedStore(
+    [useMessage, useComposer],
+    (m, c) => {
+      return c.isEditing || m.message.content.some((c2) => c2.type === "text");
+    }
+  );
+  const callback = (0, import_react4.useCallback)(() => {
+    const { isEditing, value: composerValue } = useComposer.getState();
+    const { message, setIsCopied } = useMessage.getState();
+    const valueToCopy = isEditing ? composerValue : getMessageText(message);
+    navigator.clipboard.writeText(valueToCopy);
+    setIsCopied(true);
+    setTimeout(() => setIsCopied(false), copiedDuration);
+  }, [useComposer, useMessage, copiedDuration]);
+  if (!hasCopyableContent) return null;
+  return callback;
+};
+
+// src/actions/useReloadMessage.tsx
+var import_react6 = require("react");
+
+// src/context/ThreadContext.ts
+var import_react5 = require("react");
+var ThreadContext = (0, import_react5.createContext)(null);
+var useThreadContext = () => {
+  const context = (0, import_react5.useContext)(ThreadContext);
+  if (!context)
+    throw new Error("This component must be used within an AssistantRuntimeProvider.");
+  return context;
+};
+
+// src/actions/useReloadMessage.tsx
+var useReloadMessage = () => {
+  const { useThread, useViewport } = useThreadContext();
+  const { useMessage } = useMessageContext();
+  const disabled = useCombinedStore(
+    [useThread, useMessage],
+    (t, m) => t.isRunning || m.message.role !== "assistant"
+  );
+  const callback = (0, import_react6.useCallback)(() => {
+    const { parentId } = useMessage.getState();
+    useThread.getState().startRun(parentId);
+    useViewport.getState().scrollToBottom();
+  }, [useMessage, useThread, useViewport]);
+  if (disabled) return null;
+  return callback;
+};
+
+// src/actions/useBeginMessageEdit.tsx
+var import_react7 = require("react");
+var useBeginMessageEdit = () => {
+  const { useMessage, useComposer } = useMessageContext();
+  const disabled = useCombinedStore(
+    [useMessage, useComposer],
+    (m, c) => m.message.role !== "user" || c.isEditing
+  );
+  const callback = (0, import_react7.useCallback)(() => {
+    const { edit } = useComposer.getState();
+    edit();
+  }, [useComposer]);
+  if (disabled) return null;
+  return callback;
+};
+
+// src/actions/useGoToNextBranch.tsx
+var import_react8 = require("react");
+var useGoToNextBranch = () => {
+  const { useThread } = useThreadContext();
+  const { useMessage, useComposer } = useMessageContext();
+  const disabled = useCombinedStore(
+    [useMessage, useComposer],
+    (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();
+    useThread.getState().switchToBranch(branches[branches.indexOf(message.id) + 1]);
+  }, [useMessage, useThread]);
+  if (disabled) return null;
+  return callback;
+};
+
+// src/actions/useGoToPreviousBranch.tsx
+var import_react9 = require("react");
+var useGoToPreviousBranch = () => {
+  const { useThread } = useThreadContext();
+  const { useMessage, useComposer } = useMessageContext();
+  const disabled = useCombinedStore(
+    [useMessage, useComposer],
+    (m, c) => c.isEditing || m.branches.indexOf(m.message.id) <= 0
+  );
+  const callback = (0, import_react9.useCallback)(() => {
+    const { message, branches } = useMessage.getState();
+    useThread.getState().switchToBranch(branches[branches.indexOf(message.id) - 1]);
+  }, [useMessage, useThread]);
+  if (disabled) return null;
+  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/thread/ThreadRoot.tsx
+var import_react_primitive = require("@radix-ui/react-primitive");
+var import_react10 = require("react");
+var import_jsx_runtime = require("react/jsx-runtime");
+var ThreadRoot = (0, import_react10.forwardRef)(
+  (props, ref) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_primitive.Primitive.div, { ...props, ref });
+  }
+);
+
+// src/primitives/thread/ThreadIf.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;
+  });
+};
+var ThreadIf = ({ children, ...query }) => {
+  const result = useThreadIf(query);
+  return result ? children : null;
+};
+
+// src/primitives/thread/ThreadEmpty.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var ThreadEmpty = ({ children }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ThreadIf, { empty: true, children });
+};
+
+// src/primitives/thread/ThreadViewport.tsx
+var import_primitive = require("@radix-ui/primitive");
+var import_react_compose_refs = require("@radix-ui/react-compose-refs");
+var import_react_primitive2 = require("@radix-ui/react-primitive");
+var import_react13 = require("react");
+
+// src/utils/hooks/useOnResizeContent.tsx
+var import_react_use_callback_ref = require("@radix-ui/react-use-callback-ref");
+var import_react11 = require("react");
+var useOnResizeContent = (ref, callback) => {
+  const callbackRef = (0, import_react_use_callback_ref.useCallbackRef)(callback);
+  (0, import_react11.useEffect)(() => {
+    const el = ref.current;
+    if (!el) return;
+    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();
+    };
+  }, [ref.current, callbackRef]);
+};
+
+// src/utils/hooks/useOnScrollToBottom.tsx
+var import_react_use_callback_ref2 = require("@radix-ui/react-use-callback-ref");
+var import_react12 = require("react");
+var useOnScrollToBottom = (callback) => {
+  const callbackRef = (0, import_react_use_callback_ref2.useCallbackRef)(callback);
+  const { useViewport } = useThreadContext();
+  (0, import_react12.useEffect)(() => {
+    return useViewport.getState().onScrollToBottom(() => {
+      callbackRef();
+    });
+  }, [useViewport, callbackRef]);
+};
+
+// src/primitives/thread/ThreadViewport.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var ThreadViewport = (0, import_react13.forwardRef)(({ autoScroll = true, onScroll, children, ...rest }, forwardedRef) => {
+  const messagesEndRef = (0, import_react13.useRef)(null);
+  const divRef = (0, import_react13.useRef)(null);
+  const ref = (0, import_react_compose_refs.useComposedRefs)(forwardedRef, divRef);
+  const { useViewport } = useThreadContext();
+  const firstRenderRef = (0, import_react13.useRef)(true);
+  const isScrollingToBottomRef = (0, import_react13.useRef)(false);
+  const lastScrollTop = (0, import_react13.useRef)(0);
+  const scrollToBottom = () => {
+    const div = messagesEndRef.current;
+    if (!div || !autoScroll) return;
+    const behavior = firstRenderRef.current ? "instant" : "auto";
+    firstRenderRef.current = false;
+    isScrollingToBottomRef.current = true;
+    div.scrollIntoView({ behavior });
+  };
+  useOnResizeContent(divRef, () => {
+    if (!isScrollingToBottomRef.current && !useViewport.getState().isAtBottom) {
+      handleScroll();
+    } else {
+      scrollToBottom();
+    }
+  });
+  useOnScrollToBottom(() => {
+    scrollToBottom();
+  });
+  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 if (newIsAtBottom !== isAtBottom) {
+      isScrollingToBottomRef.current = false;
+      useViewport.setState({ isAtBottom: newIsAtBottom });
+    }
+    lastScrollTop.current = div.scrollTop;
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+    import_react_primitive2.Primitive.div,
+    {
+      ...rest,
+      onScroll: (0, import_primitive.composeEventHandlers)(onScroll, handleScroll),
+      ref,
+      children: [
+        children,
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { ref: messagesEndRef })
+      ]
+    }
+  );
+});
+
+// src/primitives/thread/ThreadMessages.tsx
+var import_react16 = require("react");
+
+// src/context/providers/MessageProvider.tsx
+var import_react14 = require("react");
+var import_zustand2 = require("zustand");
+
+// src/context/stores/MessageComposer.ts
+var import_zustand = require("zustand");
+
+// src/context/stores/BaseComposer.ts
+var makeBaseComposer = (set) => ({
+  value: "",
+  setValue: (value) => {
+    set({ value });
+  }
+});
+
+// src/context/stores/MessageComposer.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/context/providers/MessageProvider.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var getIsLast = (thread, message) => {
+  return thread.messages[thread.messages.length - 1]?.id === message.id;
+};
+var syncMessage = (thread, 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 = thread.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 useMessageContext2 = (messageIndex) => {
+  const { useThread } = useThreadContext();
+  const [context] = (0, import_react14.useState)(() => {
+    const useMessage = (0, import_zustand2.create)((set) => ({
+      message: null,
+      parentId: null,
+      branches: [],
+      isLast: false,
+      inProgressIndicator: null,
+      isCopied: false,
+      isHovering: false,
+      setInProgressIndicator: (value) => {
+        set({ inProgressIndicator: value });
+      },
+      setIsCopied: (value) => {
+        set({ isCopied: value });
+      },
+      setIsHovering: (value) => {
+        set({ isHovering: value });
+      }
+    }));
+    const useComposer = 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"
+        );
+        useThread.getState().append({
+          parentId,
+          content: [{ type: "text", text }, ...nonTextParts]
+        });
+      }
+    });
+    syncMessage(useThread.getState(), useMessage, messageIndex);
+    return { useMessage, useComposer };
+  });
+  (0, import_react14.useEffect)(() => {
+    return useThread.subscribe((thread) => {
+      syncMessage(thread, context.useMessage, messageIndex);
+    });
+  }, [context, useThread, messageIndex]);
+  return context;
+};
+var MessageProvider = ({
+  messageIndex,
+  children
+}) => {
+  const context = useMessageContext2(messageIndex);
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(MessageContext.Provider, { value: context, children });
+};
+
+// src/context/ComposerContext.ts
+var import_react15 = require("react");
+var useComposerContext = () => {
+  const { useComposer } = useThreadContext();
+  const { useComposer: useEditComposer } = (0, import_react15.useContext)(MessageContext) ?? {};
+  return (0, import_react15.useMemo)(
+    () => ({
+      useComposer: useEditComposer ?? useComposer,
+      type: useEditComposer ? "edit" : "new"
+    }),
+    [useEditComposer, useComposer]
+  );
+};
+
+// src/primitives/composer/ComposerIf.tsx
+var useComposerIf = (props) => {
+  const { useComposer } = useComposerContext();
+  return useComposer((composer) => {
+    if (props.editing === true && !composer.isEditing) return false;
+    if (props.editing === false && composer.isEditing) return false;
+    return true;
+  });
+};
+var ComposerIf = ({ children, ...query }) => {
+  const result = useComposerIf(query);
+  return result ? children : null;
+};
+
+// src/primitives/message/MessageIf.tsx
+var useMessageIf = (props) => {
+  const { useMessage } = useMessageContext();
+  return useMessage(({ message, branches, isLast, isCopied, isHovering }) => {
+    if (props.hasBranches === true && branches.length < 2) return false;
+    if (props.user && message.role !== "user") return false;
+    if (props.assistant && message.role !== "assistant") return false;
+    if (props.lastOrHover === true && !isHovering && !isLast) return false;
+    if (props.copied === true && !isCopied) return false;
+    if (props.copied === false && isCopied) return false;
+    return true;
+  });
+};
+var MessageIf = ({ children, ...query }) => {
+  const result = useMessageIf(query);
+  return result ? children : null;
+};
+
+// src/primitives/thread/ThreadMessages.tsx
+var import_jsx_runtime5 = 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_runtime5.jsxs)(MessageProvider, { messageIndex, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(MessageIf, { user: true, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ComposerIf, { editing: false, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(UserMessage, {}) }),
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ComposerIf, { editing: true, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(EditComposer, {}) })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(MessageIf, { assistant: true, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(AssistantMessage, {}) })
+  ] });
+};
+var ThreadMessage = (0, import_react16.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_runtime5.jsx)(
+      ThreadMessage,
+      {
+        messageIndex,
+        components
+      },
+      messageIndex
+    );
+  });
+};
+
+// src/primitives/thread/ThreadScrollToBottom.tsx
+var import_primitive2 = require("@radix-ui/primitive");
+var import_react_primitive3 = require("@radix-ui/react-primitive");
+var import_react17 = require("react");
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var ThreadScrollToBottom = (0, import_react17.forwardRef)(({ onClick, ...rest }, ref) => {
+  const { useViewport } = useThreadContext();
+  const isAtBottom = useViewport((s) => s.isAtBottom);
+  const handleScrollToBottom = () => {
+    useViewport.getState().scrollToBottom();
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    import_react_primitive3.Primitive.button,
+    {
+      ...rest,
+      disabled: isAtBottom,
+      ref,
+      onClick: (0, import_primitive2.composeEventHandlers)(onClick, handleScrollToBottom)
+    }
+  );
+});
+
+// src/primitives/thread/ThreadSuggestion.tsx
+var import_primitive3 = require("@radix-ui/primitive");
+var import_react_primitive4 = require("@radix-ui/react-primitive");
+var import_react18 = require("react");
+var import_jsx_runtime7 = require("react/jsx-runtime");
+var ThreadSuggestion = (0, import_react18.forwardRef)(({ onClick, prompt, method, autoSend: send, ...rest }, ref) => {
+  const { useThread, useComposer } = useThreadContext();
+  const isDisabled = useThread((t) => t.isRunning);
+  const handleApplySuggestion = () => {
+    const thread = useThread.getState();
+    const composer = useComposer.getState();
+    composer.setValue(prompt);
+    if (send && !thread.isRunning) {
+      composer.send();
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    import_react_primitive4.Primitive.button,
+    {
+      ...rest,
+      disabled: isDisabled,
+      ref,
+      onClick: (0, import_primitive3.composeEventHandlers)(onClick, handleApplySuggestion)
+    }
+  );
+});
+
+// src/primitives/composer/index.ts
+var composer_exports = {};
+__export(composer_exports, {
+  Cancel: () => ComposerCancel,
+  If: () => ComposerIf,
+  Input: () => ComposerInput,
+  Root: () => ComposerRoot,
+  Send: () => ComposerSend
+});
+
+// src/primitives/composer/ComposerRoot.tsx
+var import_primitive4 = require("@radix-ui/primitive");
+var import_react_compose_refs2 = require("@radix-ui/react-compose-refs");
+var import_react_primitive5 = require("@radix-ui/react-primitive");
+var import_react19 = require("react");
+var import_jsx_runtime8 = require("react/jsx-runtime");
+var ComposerRoot = (0, import_react19.forwardRef)(
+  ({ onSubmit, ...rest }, forwardedRef) => {
+    const { useViewport } = useThreadContext();
+    const { useComposer } = useComposerContext();
+    const formRef = (0, import_react19.useRef)(null);
+    const ref = (0, import_react_compose_refs2.useComposedRefs)(forwardedRef, formRef);
+    const handleSubmit = (e) => {
+      const composerState = useComposer.getState();
+      if (!composerState.isEditing) return;
+      e.preventDefault();
+      composerState.send();
+      useViewport.getState().scrollToBottom();
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+      import_react_primitive5.Primitive.form,
+      {
+        ...rest,
+        ref,
+        onSubmit: (0, import_primitive4.composeEventHandlers)(onSubmit, handleSubmit)
+      }
+    );
+  }
+);
+
+// src/primitives/composer/ComposerInput.tsx
+var import_primitive5 = require("@radix-ui/primitive");
+var import_react_compose_refs3 = require("@radix-ui/react-compose-refs");
+var import_react_slot = require("@radix-ui/react-slot");
+var import_react20 = require("react");
+var import_react_textarea_autosize = __toESM(require("react-textarea-autosize"));
+var import_jsx_runtime9 = require("react/jsx-runtime");
+var ComposerInput = (0, import_react20.forwardRef)(
+  ({ autoFocus = false, asChild, disabled, onChange, onKeyDown, ...rest }, forwardedRef) => {
+    const { useThread } = useThreadContext();
+    const { useComposer, type } = useComposerContext();
+    const value = useComposer((c) => {
+      if (!c.isEditing) return "";
+      return c.value;
+    });
+    const Component = asChild ? import_react_slot.Slot : import_react_textarea_autosize.default;
+    const textareaRef = (0, import_react20.useRef)(null);
+    const ref = (0, import_react_compose_refs3.useComposedRefs)(forwardedRef, textareaRef);
+    const handleKeyPress = (e) => {
+      if (disabled) return;
+      if (e.key === "Escape") {
+        const composer = useComposer.getState();
+        if (composer.cancel()) {
+          e.preventDefault();
+        }
+      } else if (e.key === "Enter" && e.shiftKey === false) {
+        const isRunning = useThread.getState().isRunning;
+        if (!isRunning) {
+          e.preventDefault();
+          textareaRef.current?.closest("form")?.requestSubmit();
+        }
+      }
+    };
+    const autoFocusEnabled = autoFocus && !disabled;
+    const focus = (0, import_react20.useCallback)(() => {
+      const textarea = textareaRef.current;
+      if (!textarea || !autoFocusEnabled) return;
+      textarea.focus();
+      textarea.setSelectionRange(
+        textareaRef.current.value.length,
+        textareaRef.current.value.length
+      );
+    }, [autoFocusEnabled]);
+    (0, import_react20.useEffect)(() => focus(), [focus]);
+    useOnScrollToBottom(() => {
+      if (type === "new") {
+        focus();
+      }
+    });
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+      Component,
+      {
+        value,
+        ...rest,
+        ref,
+        disabled,
+        onChange: (0, import_primitive5.composeEventHandlers)(onChange, (e) => {
+          const composerState = useComposer.getState();
+          if (!composerState.isEditing) return;
+          return composerState.setValue(e.target.value);
+        }),
+        onKeyDown: (0, import_primitive5.composeEventHandlers)(onKeyDown, handleKeyPress)
+      }
+    );
+  }
+);
+
+// src/primitives/composer/ComposerSend.tsx
+var import_react_primitive6 = require("@radix-ui/react-primitive");
+var import_react21 = require("react");
+var import_jsx_runtime10 = require("react/jsx-runtime");
+var ComposerSend = (0, import_react21.forwardRef)(
+  ({ disabled, ...rest }, ref) => {
+    const { useComposer } = useComposerContext();
+    const hasValue = useComposer((c) => c.isEditing && c.value.length > 0);
+    return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+      import_react_primitive6.Primitive.button,
+      {
+        type: "submit",
+        ...rest,
+        ref,
+        disabled: disabled || !hasValue
+      }
+    );
+  }
+);
+
+// src/primitives/composer/ComposerCancel.tsx
+var import_primitive6 = require("@radix-ui/primitive");
+var import_react_primitive7 = require("@radix-ui/react-primitive");
+var import_react22 = require("react");
+var import_jsx_runtime11 = require("react/jsx-runtime");
+var ComposerCancel = (0, import_react22.forwardRef)(({ onClick, ...rest }, ref) => {
+  const { useComposer } = useComposerContext();
+  const handleCancel = () => {
+    useComposer.getState().cancel();
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+    import_react_primitive7.Primitive.button,
+    {
+      type: "button",
+      ...rest,
+      ref,
+      onClick: (0, import_primitive6.composeEventHandlers)(onClick, handleCancel)
+    }
+  );
+});
+
+// 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_primitive7 = require("@radix-ui/primitive");
+var import_react_primitive8 = require("@radix-ui/react-primitive");
+var import_react23 = require("react");
+var import_jsx_runtime12 = require("react/jsx-runtime");
+var MessageRoot = (0, import_react23.forwardRef)(
+  ({ onMouseEnter, onMouseLeave, ...rest }, ref) => {
+    const { useMessage } = useMessageContext();
+    const setIsHovering = useMessage((s) => s.setIsHovering);
+    const handleMouseEnter = () => {
+      setIsHovering(true);
+    };
+    const handleMouseLeave = () => {
+      setIsHovering(false);
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+      import_react_primitive8.Primitive.div,
+      {
+        ...rest,
+        ref,
+        onMouseEnter: (0, import_primitive7.composeEventHandlers)(onMouseEnter, handleMouseEnter),
+        onMouseLeave: (0, import_primitive7.composeEventHandlers)(onMouseLeave, handleMouseLeave)
+      }
+    );
+  }
+);
+
+// src/primitives/message/MessageContent.tsx
+var import_react28 = require("react");
+
+// src/context/AssistantContext.ts
+var import_react24 = require("react");
+var AssistantContext = (0, import_react24.createContext)(
+  null
+);
+var useAssistantContext = () => {
+  const context = (0, import_react24.useContext)(AssistantContext);
+  if (!context)
+    throw new Error(
+      "This component must be used within an AssistantRuntimeProvider."
+    );
+  return context;
+};
+
+// src/context/ContentPartContext.ts
+var import_react25 = require("react");
+var ContentPartContext = (0, import_react25.createContext)(
+  null
+);
+var useContentPartContext = () => {
+  const context = (0, import_react25.useContext)(ContentPartContext);
+  if (!context)
+    throw new Error(
+      "This component can only be used inside a component passed to <MessagePrimitive.Content components={...} >."
+    );
+  return context;
+};
+
+// src/context/providers/ContentPartProvider.tsx
+var import_react26 = require("react");
+var import_zustand3 = require("zustand");
+var import_jsx_runtime13 = 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({ part, status });
+};
+var useContentPartContext2 = (partIndex) => {
+  const { useMessage } = useMessageContext();
+  const [context] = (0, import_react26.useState)(() => {
+    const useContentPart = (0, import_zustand3.create)(() => ({
+      part: { type: "text", text: "" },
+      status: "done"
+    }));
+    syncContentPart(useMessage.getState(), useContentPart, partIndex);
+    return { useContentPart };
+  });
+  (0, import_react26.useEffect)(() => {
+    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_runtime13.jsx)(ContentPartContext.Provider, { value: context, children });
+};
+
+// src/primitives/contentPart/ContentPartDisplay.tsx
+var ContentPartDisplay = () => {
+  const { useContentPart } = useContentPartContext();
+  const display = useContentPart((c) => {
+    if (c.part.type !== "ui")
+      throw new Error(
+        "ContentPartDisplay can only be used inside ui content parts."
+      );
+    return c.part.display;
+  });
+  return display ?? null;
+};
+
+// src/primitives/contentPart/ContentPartInProgressIndicator.tsx
+var ContentPartInProgressIndicator = () => {
+  const { useMessage } = useMessageContext();
+  const { useContentPart } = useContentPartContext();
+  const indicator = useCombinedStore(
+    [useMessage, useContentPart],
+    (m, c) => c.status === "in_progress" ? m.inProgressIndicator : null
+  );
+  return indicator;
+};
+
+// src/primitives/contentPart/ContentPartText.tsx
+var import_react_primitive9 = require("@radix-ui/react-primitive");
+var import_react27 = require("react");
+var import_jsx_runtime14 = require("react/jsx-runtime");
+var ContentPartText = (0, import_react27.forwardRef)((props, forwardedRef) => {
+  const { useContentPart } = useContentPartContext();
+  const text = useContentPart((c) => {
+    if (c.part.type !== "text")
+      throw new Error(
+        "ContentPartText can only be used inside text content parts."
+      );
+    return c.part.text;
+  });
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_primitive9.Primitive.span, { ...props, ref: forwardedRef, children: text });
+});
+
+// src/primitives/message/MessageContent.tsx
+var import_jsx_runtime15 = require("react/jsx-runtime");
+var defaultComponents = {
+  Text: () => /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_jsx_runtime15.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(ContentPartText, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(ContentPartInProgressIndicator, {})
+  ] }),
+  Image: () => null,
+  UI: () => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(ContentPartDisplay, {}),
+  tools: {
+    Fallback: (props) => {
+      const { useToolRenderers } = useAssistantContext();
+      const Render = useToolRenderers(
+        (s) => s.getToolRenderer(props.part.toolName)
+      );
+      if (!Render) return null;
+      return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Render, { ...props });
+    }
+  }
+};
+var MessageContentPartComponent = ({
+  components: {
+    Text = defaultComponents.Text,
+    Image = defaultComponents.Image,
+    UI = defaultComponents.UI,
+    tools: { by_name = {}, Fallback = defaultComponents.tools.Fallback } = {}
+  } = {}
+}) => {
+  const { useContentPart } = useContentPartContext();
+  const { part, status } = useContentPart();
+  const type = part.type;
+  switch (type) {
+    case "text":
+      return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Text, { part, status });
+    case "image":
+      return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Image, { part, status });
+    case "ui":
+      return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(UI, { part, status });
+    case "tool-call": {
+      const Tool = by_name[part.toolName] || Fallback;
+      return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Tool, { part, status });
+    }
+    default:
+      throw new Error(`Unknown content part type: ${type}`);
+  }
+};
+var MessageContentPartImpl = ({
+  partIndex,
+  components
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(ContentPartProvider, { partIndex, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(MessageContentPartComponent, { components }) });
+};
+var MessageContentPart = (0, import_react28.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_runtime15.jsx)(
+      MessageContentPart,
+      {
+        partIndex,
+        components
+      },
+      partIndex
+    );
+  });
+};
+
+// src/primitives/message/MessageInProgress.tsx
+var import_react_primitive10 = require("@radix-ui/react-primitive");
+var import_react29 = require("react");
+var import_jsx_runtime16 = require("react/jsx-runtime");
+var MessageInProgress = (0, import_react29.forwardRef)((props, ref) => {
+  const { useMessage } = useMessageContext();
+  (0, import_react29.useMemo)(() => {
+    useMessage.getState().setInProgressIndicator(/* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_react_primitive10.Primitive.span, { ...props, ref }));
+  }, [useMessage, props, ref]);
+  return null;
+});
+
+// src/primitives/branchPicker/index.ts
+var branchPicker_exports = {};
+__export(branchPicker_exports, {
+  Count: () => BranchPickerCount,
+  Next: () => BranchPickerNext,
+  Number: () => BranchPickerNumber,
+  Previous: () => BranchPickerPrevious,
+  Root: () => BranchPickerRoot
+});
+
+// src/utils/createActionButton.tsx
+var import_primitive8 = require("@radix-ui/primitive");
+var import_react_primitive11 = require("@radix-ui/react-primitive");
+var import_react30 = require("react");
+var import_jsx_runtime17 = require("react/jsx-runtime");
+var createActionButton = (useActionButton) => {
+  return (0, import_react30.forwardRef)(
+    (props, forwardedRef) => {
+      const onClick = useActionButton(props);
+      return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+        import_react_primitive11.Primitive.button,
+        {
+          type: "button",
+          disabled: !onClick,
+          ...props,
+          ref: forwardedRef,
+          onClick: (0, import_primitive8.composeEventHandlers)(props.onClick, onClick ?? void 0)
+        }
+      );
+    }
+  );
+};
+
+// src/primitives/branchPicker/BranchPickerNext.tsx
+var BranchPickerNext = createActionButton(useGoToNextBranch);
+
+// src/primitives/branchPicker/BranchPickerPrevious.tsx
+var BranchPickerPrevious = createActionButton(useGoToPreviousBranch);
+
+// src/primitives/branchPicker/BranchPickerCount.tsx
+var import_jsx_runtime18 = require("react/jsx-runtime");
+var BranchPickerCount = () => {
+  const { useMessage } = useMessageContext();
+  const branchCount = useMessage((s) => s.branches.length);
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_jsx_runtime18.Fragment, { children: branchCount });
+};
+
+// src/primitives/branchPicker/BranchPickerNumber.tsx
+var import_jsx_runtime19 = require("react/jsx-runtime");
+var BranchPickerNumber = () => {
+  const { useMessage } = useMessageContext();
+  const branchIdx = useMessage((s) => s.branches.indexOf(s.message.id));
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_jsx_runtime19.Fragment, { children: branchIdx + 1 });
+};
+
+// src/primitives/branchPicker/BranchPickerRoot.tsx
+var import_react_primitive12 = require("@radix-ui/react-primitive");
+var import_react31 = require("react");
+var import_jsx_runtime20 = require("react/jsx-runtime");
+var BranchPickerRoot = (0, import_react31.forwardRef)(({ hideWhenSingleBranch, ...rest }, ref) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(MessageIf, { hasBranches: hideWhenSingleBranch ? true : void 0, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react_primitive12.Primitive.div, { ...rest, ref }) });
+});
+
+// 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_primitive13 = require("@radix-ui/react-primitive");
+var import_react32 = require("react");
+var import_jsx_runtime21 = require("react/jsx-runtime");
+var ActionBarRoot = (0, import_react32.forwardRef)(({ hideWhenRunning, autohide, autohideFloat, ...rest }, ref) => {
+  const { useThread } = useThreadContext();
+  const { useMessage } = useMessageContext();
+  const hideAndfloatStatus = useCombinedStore(
+    [useThread, useMessage],
+    (t, m) => {
+      if (hideWhenRunning && t.isRunning) return "hidden" /* Hidden */;
+      const autohideEnabled = autohide === "always" || autohide === "not-last" && !m.isLast;
+      if (!autohideEnabled) return "normal" /* Normal */;
+      if (!m.isHovering) return "hidden" /* Hidden */;
+      if (autohideFloat === "always" || autohideFloat === "single-branch" && m.branches.length <= 1)
+        return "floating" /* Floating */;
+      return "normal" /* Normal */;
+    }
+  );
+  if (hideAndfloatStatus === "hidden" /* Hidden */) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+    import_react_primitive13.Primitive.div,
+    {
+      ...hideAndfloatStatus === "floating" /* Floating */ ? { "data-floating": "true" } : null,
+      ...rest,
+      ref
+    }
+  );
+});
+
+// src/primitives/actionBar/ActionBarCopy.tsx
+var ActionBarCopy = createActionButton(useCopyMessage);
+
+// src/primitives/actionBar/ActionBarReload.tsx
+var ActionBarReload = createActionButton(useReloadMessage);
+
+// src/primitives/actionBar/ActionBarEdit.tsx
+var ActionBarEdit = createActionButton(useBeginMessageEdit);
+
+// 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_primitive14 = require("@radix-ui/react-primitive");
+var import_react33 = require("react");
+var import_jsx_runtime22 = require("react/jsx-runtime");
+var ContentPartImage = (0, import_react33.forwardRef)((props, forwardedRef) => {
+  const { useContentPart } = useContentPartContext();
+  const image = useContentPart((c) => {
+    if (c.part.type !== "image")
+      throw new Error(
+        "ContentPartImage can only be used inside image content parts."
+      );
+    return c.part.image;
+  });
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_react_primitive14.Primitive.img, { src: image, ...props, ref: forwardedRef });
+});
+
+// src/runtime/local/useLocalRuntime.tsx
+var import_react34 = 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;
+  }, {});
+};
+
+// src/runtime/utils/idUtils.tsx
+var import_non_secure = require("nanoid/non-secure");
+var generateId = (0, import_non_secure.customAlphabet)(
+  "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz",
+  7
+);
+var optimisticPrefix = "__optimistic__";
+var generateOptimisticId = () => `${optimisticPrefix}${generateId()}`;
+
+// src/runtime/utils/MessageRepository.tsx
+var findHead = (message) => {
+  if (message.next) return findHead(message.next);
+  return message;
+};
+var MessageRepository = class {
+  messages = /* @__PURE__ */ new Map();
+  // message_id -> item
+  head = null;
+  root = {
+    children: []
+  };
+  performOp(newParent, child, operation) {
+    const parentOrRoot = child.prev ?? this.root;
+    const newParentOrRoot = newParent ?? this.root;
+    if (operation === "relink" && parentOrRoot === newParentOrRoot) return;
+    if (operation !== "link") {
+      parentOrRoot.children = parentOrRoot.children.filter(
+        (m) => m !== child.current.id
+      );
+      if (child.prev?.next === child) {
+        const fallbackId = child.prev.children.at(-1);
+        const fallback = fallbackId ? this.messages.get(fallbackId) : null;
+        if (fallback === void 0) {
+          throw new Error(
+            "MessageRepository(performOp/cut): Fallback sibling message not found. This is likely an internal bug in assistant-ui."
+          );
+        }
+        child.prev.next = fallback;
+      }
+    }
+    if (operation !== "cut") {
+      newParentOrRoot.children = [
+        ...newParentOrRoot.children,
+        child.current.id
+      ];
+      if (newParent && (findHead(child) === this.head || newParent.next === null)) {
+        newParent.next = child;
+      }
+      child.prev = newParent;
+    }
+  }
+  getMessages() {
+    const messages = new Array(this.head?.level ?? 0);
+    for (let current = this.head; current; current = current.prev) {
+      messages[current.level] = current.current;
+    }
+    return messages;
+  }
+  addOrUpdateMessage(parentId, message) {
+    const existingItem = this.messages.get(message.id);
+    const prev = parentId ? this.messages.get(parentId) : null;
+    if (prev === void 0)
+      throw new Error(
+        "MessageRepository(addOrUpdateMessage): Parent message not found. This is likely an internal bug in assistant-ui."
+      );
+    if (existingItem) {
+      existingItem.current = message;
+      this.performOp(prev, existingItem, "relink");
+      return;
+    }
+    const newItem = {
+      prev,
+      current: message,
+      next: null,
+      children: [],
+      level: prev ? prev.level + 1 : 0
+    };
+    this.messages.set(message.id, newItem);
+    this.performOp(prev, newItem, "link");
+    if (this.head === prev) {
+      this.head = newItem;
+    }
+  }
+  appendOptimisticMessage(parentId, message) {
+    let optimisticId;
+    do {
+      optimisticId = generateOptimisticId();
+    } while (this.messages.has(optimisticId));
+    this.addOrUpdateMessage(parentId, {
+      ...message,
+      id: optimisticId,
+      createdAt: /* @__PURE__ */ new Date(),
+      ...message.role === "assistant" ? { status: "in_progress" } : void 0
+    });
+    return optimisticId;
+  }
+  deleteMessage(messageId, replacementId) {
+    const message = this.messages.get(messageId);
+    if (!message)
+      throw new Error(
+        "MessageRepository(deleteMessage): Optimistic message not found. This is likely an internal bug in assistant-ui."
+      );
+    const replacement = replacementId === void 0 ? message.prev : replacementId === null ? null : this.messages.get(replacementId);
+    if (replacement === void 0)
+      throw new Error(
+        "MessageRepository(deleteMessage): Replacement not found. This is likely an internal bug in assistant-ui."
+      );
+    for (const child of message.children) {
+      const childMessage = this.messages.get(child);
+      if (!childMessage)
+        throw new Error(
+          "MessageRepository(deleteMessage): Child message not found. This is likely an internal bug in assistant-ui."
+        );
+      this.performOp(replacement, childMessage, "relink");
+    }
+    this.performOp(null, message, "cut");
+    this.messages.delete(messageId);
+    if (this.head === message) {
+      this.head = replacement ? findHead(replacement) : null;
+    }
+  }
+  getBranches(messageId) {
+    const message = this.messages.get(messageId);
+    if (!message)
+      throw new Error(
+        "MessageRepository(getBranches): Message not found. This is likely an internal bug in assistant-ui."
+      );
+    const { children } = message.prev ?? this.root;
+    return children;
+  }
+  switchToBranch(messageId) {
+    const message = this.messages.get(messageId);
+    if (!message)
+      throw new Error(
+        "MessageRepository(switchToBranch): Branch not found. This is likely an internal bug in assistant-ui."
+      );
+    if (message.prev) {
+      message.prev.next = message;
+    }
+    this.head = findHead(message);
+  }
+  resetHead(messageId) {
+    if (messageId === null) {
+      this.head = null;
+      return;
+    }
+    const message = this.messages.get(messageId);
+    if (!message)
+      throw new Error(
+        "MessageRepository(resetHead): Branch not found. This is likely an internal bug in assistant-ui."
+      );
+    this.head = message;
+    for (let current = message; current; current = current.prev) {
+      if (current.prev) {
+        current.prev.next = current;
+      }
+    }
+  }
+};
+
+// src/runtime/local/LocalRuntime.tsx
+var LocalRuntime = class {
+  constructor(adapter) {
+    this.adapter = adapter;
+  }
+  _subscriptions = /* @__PURE__ */ new Set();
+  _configProviders = /* @__PURE__ */ new Set();
+  abortController = null;
+  repository = new MessageRepository();
+  get messages() {
+    return this.repository.getMessages();
+  }
+  get isRunning() {
+    return this.abortController != null;
+  }
+  getBranches(messageId) {
+    return this.repository.getBranches(messageId);
+  }
+  switchToBranch(branchId) {
+    this.repository.switchToBranch(branchId);
+    this.notifySubscribers();
+  }
+  async append(message) {
+    const userMessageId = generateId();
+    const userMessage = {
+      id: userMessageId,
+      role: "user",
+      content: message.content,
+      createdAt: /* @__PURE__ */ new Date()
+    };
+    this.repository.addOrUpdateMessage(message.parentId, userMessage);
+    await this.startRun(userMessageId);
+  }
+  async startRun(parentId) {
+    const id = generateId();
+    this.repository.resetHead(parentId);
+    const messages = this.repository.getMessages();
+    const message = {
+      id,
+      role: "assistant",
+      status: "in_progress",
+      content: [{ type: "text", text: "" }],
+      createdAt: /* @__PURE__ */ new Date()
+    };
+    this.repository.addOrUpdateMessage(parentId, { ...message });
+    this.abortController?.abort();
+    this.abortController = new AbortController();
+    this.notifySubscribers();
+    try {
+      const updateHandler = ({ content }) => {
+        message.content = content;
+        this.repository.addOrUpdateMessage(parentId, { ...message });
+        this.notifySubscribers();
+      };
+      const result = await this.adapter.run({
+        messages,
+        abortSignal: this.abortController.signal,
+        config: mergeModelConfigs(this._configProviders),
+        onUpdate: updateHandler
+      });
+      updateHandler(result);
+      message.status = "done";
+      this.repository.addOrUpdateMessage(parentId, { ...message });
+    } catch (e) {
+      message.status = "error";
+      this.repository.addOrUpdateMessage(parentId, { ...message });
+      console.error(e);
+    } finally {
+      this.abortController = null;
+      this.notifySubscribers();
+    }
+  }
+  cancelRun() {
+    if (!this.abortController) return;
+    this.abortController.abort();
+    this.abortController = null;
+    this.notifySubscribers();
+  }
+  notifySubscribers() {
+    for (const callback of this._subscriptions) callback();
+  }
+  subscribe(callback) {
+    this._subscriptions.add(callback);
+    return () => this._subscriptions.delete(callback);
+  }
+  registerModelConfigProvider(provider) {
+    this._configProviders.add(provider);
+    return () => this._configProviders.delete(provider);
+  }
+};
+
+// src/runtime/local/useLocalRuntime.tsx
+var useLocalRuntime = (adapter) => {
+  const [runtime] = (0, import_react34.useState)(() => new LocalRuntime(adapter));
+  (0, import_react34.useInsertionEffect)(() => {
+    runtime.adapter = adapter;
+  });
+  return runtime;
+};
+
+// src/context/providers/AssistantRuntimeProvider.tsx
+var import_react37 = require("react");
+
+// src/context/providers/AssistantProvider.tsx
+var import_react36 = require("react");
+
+// src/context/stores/AssistantModelConfig.ts
+var import_zustand4 = require("zustand");
+
+// 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_zustand4.create)(() => {
+  const proxy = new ProxyConfigProvider();
+  return {
+    getModelConfig: () => {
+      return proxy.getModelConfig();
+    },
+    registerModelConfigProvider: (provider) => {
+      return proxy.registerModelConfigProvider(provider);
+    }
+  };
+});
+
+// src/context/stores/AssistantToolRenderers.ts
+var import_zustand5 = require("zustand");
+var makeAssistantToolRenderersStore = () => (0, import_zustand5.create)((set) => {
+  const renderers = /* @__PURE__ */ new Map();
+  return {
+    getToolRenderer: (name) => {
+      const arr = renderers.get(name);
+      const last = arr?.at(-1);
+      if (last) return last;
+      return null;
+    },
+    setToolRenderer: (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);
+        }
+        set({});
+      };
+    }
+  };
+});
+
+// src/context/providers/ThreadProvider.tsx
+var import_react35 = require("react");
+
+// src/context/stores/Composer.ts
+var import_zustand6 = require("zustand");
+var makeComposerStore = (useThread) => (0, import_zustand6.create)()((set, get, store) => {
+  return {
+    ...makeBaseComposer(set, get, store),
+    isEditing: true,
+    send: () => {
+      const { setValue, value } = get();
+      setValue("");
+      useThread.getState().append({
+        parentId: useThread.getState().messages.at(-1)?.id ?? null,
+        content: [{ type: "text", text: value }]
+      });
+    },
+    cancel: () => {
+      const thread = useThread.getState();
+      if (!thread.isRunning) return false;
+      useThread.getState().cancelRun();
+      return true;
+    }
+  };
+});
+
+// src/context/stores/Thread.ts
+var import_zustand7 = require("zustand");
+var makeThreadStore = (runtimeRef) => {
+  const useThread = (0, import_zustand7.create)(() => ({
+    messages: runtimeRef.current.messages,
+    isRunning: runtimeRef.current.isRunning,
+    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()
+  }));
+  const onRuntimeUpdate = () => {
+    useThread.setState({
+      messages: runtimeRef.current.messages,
+      isRunning: runtimeRef.current.isRunning
+    });
+  };
+  return {
+    useThread,
+    onRuntimeUpdate
+  };
+};
+
+// src/context/stores/ThreadViewport.tsx
+var import_zustand8 = require("zustand");
+var makeThreadViewportStore = () => {
+  const scrollToBottomListeners = /* @__PURE__ */ new Set();
+  return (0, import_zustand8.create)(() => ({
+    isAtBottom: true,
+    scrollToBottom: () => {
+      for (const listener of scrollToBottomListeners) {
+        listener();
+      }
+    },
+    onScrollToBottom: (callback) => {
+      scrollToBottomListeners.add(callback);
+      return () => {
+        scrollToBottomListeners.delete(callback);
+      };
+    }
+  }));
+};
+
+// src/context/providers/ThreadProvider.tsx
+var import_jsx_runtime23 = require("react/jsx-runtime");
+var ThreadProvider = ({
+  children,
+  runtime
+}) => {
+  const runtimeRef = (0, import_react35.useRef)(runtime);
+  (0, import_react35.useInsertionEffect)(() => {
+    runtimeRef.current = runtime;
+  });
+  const [{ context, onRuntimeUpdate }] = (0, import_react35.useState)(() => {
+    const { useThread, onRuntimeUpdate: onRuntimeUpdate2 } = makeThreadStore(runtimeRef);
+    const useViewport = makeThreadViewportStore();
+    const useComposer = makeComposerStore(useThread);
+    return {
+      context: {
+        useViewport,
+        useThread,
+        useComposer
+      },
+      onRuntimeUpdate: onRuntimeUpdate2
+    };
+  });
+  (0, import_react35.useEffect)(() => {
+    onRuntimeUpdate();
+    return runtime.subscribe(onRuntimeUpdate);
+  }, [onRuntimeUpdate, runtime]);
+  const RuntimeSynchronizer = runtime.unstable_synchronizer;
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(ThreadContext.Provider, { value: context, children: [
+    RuntimeSynchronizer && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(RuntimeSynchronizer, {}),
+    children
+  ] });
+};
+
+// src/context/providers/AssistantProvider.tsx
+var import_jsx_runtime24 = require("react/jsx-runtime");
+var AssistantProvider = ({ children, runtime }) => {
+  const runtimeRef = (0, import_react36.useRef)(runtime);
+  (0, import_react36.useInsertionEffect)(() => {
+    runtimeRef.current = runtime;
+  });
+  const [context] = (0, import_react36.useState)(() => {
+    const useModelConfig = makeAssistantModelConfigStore();
+    const useToolRenderers = makeAssistantToolRenderersStore();
+    return { useModelConfig, useToolRenderers };
+  });
+  const getModelCOnfig = context.useModelConfig((c) => c.getModelConfig);
+  (0, import_react36.useEffect)(() => {
+    return runtime.registerModelConfigProvider(getModelCOnfig);
+  }, [runtime, getModelCOnfig]);
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(AssistantContext.Provider, { value: context, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(ThreadProvider, { runtime, children }) });
+};
+
+// src/context/providers/AssistantRuntimeProvider.tsx
+var import_jsx_runtime25 = require("react/jsx-runtime");
+var AssistantRuntimeProviderImpl = ({ children, runtime }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(AssistantProvider, { runtime, children });
+};
+var AssistantRuntimeProvider = (0, import_react37.memo)(AssistantRuntimeProviderImpl);
+
+// src/internal.ts
+var internal_exports = {};
+__export(internal_exports, {
+  MessageRepository: () => MessageRepository,
+  ProxyConfigProvider: () => ProxyConfigProvider
+});
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ActionBarPrimitive,
+  AssistantRuntimeProvider,
+  BranchPickerPrimitive,
+  ComposerPrimitive,
+  ContentPartPrimitive,
+  INTERNAL,
+  MessagePrimitive,
+  ThreadPrimitive,
+  useBeginMessageEdit,
+  useCopyMessage,
+  useGoToNextBranch,
+  useGoToPreviousBranch,
+  useLocalRuntime,
+  useReloadMessage
+});
+//# sourceMappingURL=index.js.map