@assistant-ui/react 0.5.1 → 0.5.3

package/dist/index.js

@@ -45,6 +45,7 @@ __export(src_exports, {
   ContentPartPrimitive: () => contentPart_exports,
   EdgeChatAdapter: () => EdgeChatAdapter,
   EditComposer: () => edit_composer_default,
+  ExternalStoreRuntime: () => ExternalStoreRuntime,
   INTERNAL: () => internal_exports,
   MessagePrimitive: () => message_exports,
   Thread: () => thread_default,
@@ -57,6 +58,7 @@ __export(src_exports, {
   fromCoreMessages: () => fromCoreMessages,
   fromLanguageModelMessages: () => fromLanguageModelMessages,
   fromLanguageModelTools: () => fromLanguageModelTools,
+  getExternalStoreMessage: () => getExternalStoreMessage,
   makeAssistantTool: () => makeAssistantTool,
   makeAssistantToolUI: () => makeAssistantToolUI,
   toCoreMessage: () => toCoreMessage,
@@ -84,6 +86,7 @@ __export(src_exports, {
   useContentPartImage: () => useContentPartImage,
   useContentPartText: () => useContentPartText,
   useEdgeRuntime: () => useEdgeRuntime,
+  useExternalStoreRuntime: () => useExternalStoreRuntime,
   useLocalRuntime: () => useLocalRuntime,
   useMessageContext: () => useMessageContext,
   useMessageIf: () => useMessageIf,
@@ -1267,7 +1270,7 @@ var COMPLETE_STATUS = {
 };
 var toContentPartStatus = (message, partIndex, part) => {
   if (message.role !== "assistant") return COMPLETE_STATUS;
-  const isLastPart = partIndex === message.content.length - 1;
+  const isLastPart = partIndex === Math.max(0, message.content.length - 1);
   if (part.type !== "tool-call") {
     if ("reason" in message.status && message.status.reason === "tool-calls" && isLastPart)
       throw new Error(
@@ -1280,9 +1283,16 @@ var toContentPartStatus = (message, partIndex, part) => {
   }
   return message.status;
 };
+var EMPTY_CONTENT = Object.freeze({ type: "text", text: "" });
 var syncContentPart = ({ message }, useContentPart, partIndex) => {
-  const part = message.content[partIndex];
-  if (!part) return;
+  let part = message.content[partIndex];
+  if (!part) {
+    if (message.content.length === 0 && partIndex === 0) {
+      part = EMPTY_CONTENT;
+    } else {
+      return;
+    }
+  }
   const status = toContentPartStatus(message, partIndex, part);
   const currentState = useContentPart.getState();
   if (currentState.part === part && currentState.status === status) return;
@@ -1408,7 +1418,7 @@ var ContentPartPrimitiveText = (0, import_react36.forwardRef)(({ smooth = true,
     part: { text }
   } = useContentPartText();
   const smoothText = useSmooth(text, smooth);
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_primitive4.Primitive.span, { "data-status": status, ...rest, ref: forwardedRef, children: smoothText });
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_primitive4.Primitive.span, { "data-status": status.type, ...rest, ref: forwardedRef, children: smoothText });
 });
 ContentPartPrimitiveText.displayName = "ContentPartPrimitive.Text";
 
@@ -1514,7 +1524,7 @@ var MessagePrimitiveContent = ({
   components
 }) => {
   const { useMessage } = useMessageContext();
-  const contentLength = useMessage((s) => s.message.content.length);
+  const contentLength = useMessage((s) => s.message.content.length) || 1;
   return new Array(contentLength).fill(null).map((_, idx) => {
     const partIndex = idx;
     return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
@@ -1811,7 +1821,7 @@ var useThreadViewportAutoScroll = ({
     const div = divRef.current;
     if (!div) return;
     const isAtBottom = useViewport.getState().isAtBottom;
-    const newIsAtBottom = div.scrollHeight - div.scrollTop <= div.clientHeight;
+    const newIsAtBottom = div.scrollHeight - div.scrollTop <= div.clientHeight + 1;
     if (!newIsAtBottom && lastScrollTop.current < div.scrollTop) {
     } else {
       if (newIsAtBottom) {
@@ -2047,26 +2057,6 @@ var ThreadPrimitiveSuggestion = createActionButton(
 // src/runtimes/local/useLocalRuntime.tsx
 var import_react54 = require("react");
 
-// src/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/internal.ts
-var internal_exports = {};
-__export(internal_exports, {
-  BaseAssistantRuntime: () => BaseAssistantRuntime,
-  MessageRepository: () => MessageRepository,
-  ProxyConfigProvider: () => ProxyConfigProvider,
-  TooltipIconButton: () => TooltipIconButton,
-  generateId: () => generateId,
-  useSmooth: () => useSmooth
-});
-
 // src/runtimes/core/BaseAssistantRuntime.tsx
 var BaseAssistantRuntime = class {
   constructor(_thread) {
@@ -2090,99 +2080,25 @@ var BaseAssistantRuntime = class {
   };
 };
 
-// src/ui/base/tooltip-icon-button.tsx
-var import_react52 = require("react");
-
-// src/ui/base/tooltip.tsx
-var TooltipPrimitive = __toESM(require("@radix-ui/react-tooltip"));
-
-// src/ui/utils/withDefaults.tsx
-var import_react50 = require("react");
-var import_classnames = __toESM(require("classnames"));
-var import_jsx_runtime25 = require("react/jsx-runtime");
-var withDefaultProps = ({
-  className,
-  ...defaultProps
-}) => ({ className: classNameProp, ...props }) => {
-  return {
-    className: (0, import_classnames.default)(className, classNameProp),
-    ...defaultProps,
-    ...props
-  };
-};
-var withDefaults = (Component, defaultProps) => {
-  const getProps = withDefaultProps(defaultProps);
-  const WithDefaults = (0, import_react50.forwardRef)(
-    (props, ref) => {
-      const ComponentAsAny = Component;
-      return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(ComponentAsAny, { ...getProps(props), ref });
-    }
-  );
-  WithDefaults.displayName = "withDefaults(" + (typeof Component === "string" ? Component : Component.displayName) + ")";
-  return WithDefaults;
-};
-
-// src/ui/base/tooltip.tsx
-var import_jsx_runtime26 = require("react/jsx-runtime");
-var Tooltip = (props) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(TooltipPrimitive.Provider, { children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(TooltipPrimitive.Root, { ...props }) });
-};
-Tooltip.displayName = "Tooltip";
-var TooltipTrigger = TooltipPrimitive.Trigger;
-var TooltipContent = withDefaults(TooltipPrimitive.Content, {
-  sideOffset: 4,
-  className: "aui-tooltip-content"
+// src/internal.ts
+var internal_exports = {};
+__export(internal_exports, {
+  BaseAssistantRuntime: () => BaseAssistantRuntime,
+  MessageRepository: () => MessageRepository,
+  ProxyConfigProvider: () => ProxyConfigProvider,
+  TooltipIconButton: () => TooltipIconButton,
+  generateId: () => generateId,
+  useSmooth: () => useSmooth
 });
-TooltipContent.displayName = "TooltipContent";
 
-// src/ui/base/button.tsx
-var import_class_variance_authority = require("class-variance-authority");
-var import_react_primitive11 = require("@radix-ui/react-primitive");
-var import_react51 = require("react");
-var import_jsx_runtime27 = require("react/jsx-runtime");
-var buttonVariants = (0, import_class_variance_authority.cva)("aui-button", {
-  variants: {
-    variant: {
-      default: "aui-button-primary",
-      outline: "aui-button-outline",
-      ghost: "aui-button-ghost"
-    },
-    size: {
-      default: "aui-button-medium",
-      icon: "aui-button-icon"
-    }
-  },
-  defaultVariants: {
-    variant: "default",
-    size: "default"
-  }
-});
-var Button = (0, import_react51.forwardRef)(
-  ({ className, variant, size, ...props }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
-      import_react_primitive11.Primitive.button,
-      {
-        className: buttonVariants({ variant, size, className }),
-        ...props,
-        ref
-      }
-    );
-  }
+// src/utils/idUtils.tsx
+var import_non_secure = require("nanoid/non-secure");
+var generateId = (0, import_non_secure.customAlphabet)(
+  "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz",
+  7
 );
-Button.displayName = "Button";
-
-// src/ui/base/tooltip-icon-button.tsx
-var import_jsx_runtime28 = require("react/jsx-runtime");
-var TooltipIconButton = (0, import_react52.forwardRef)(({ children, tooltip, side = "bottom", ...rest }, ref) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(Tooltip, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(Button, { variant: "ghost", size: "icon", ...rest, ref, children: [
-      children,
-      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "aui-sr-only", children: tooltip })
-    ] }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(TooltipContent, { side, children: tooltip })
-  ] });
-});
-TooltipIconButton.displayName = "TooltipIconButton";
+var optimisticPrefix = "__optimistic__";
+var generateOptimisticId = () => `${optimisticPrefix}${generateId()}`;
 
 // src/runtimes/edge/converters/fromCoreMessage.ts
 var fromCoreMessages = (message) => {
@@ -2395,6 +2311,100 @@ var MessageRepository = class {
   }
 };
 
+// src/ui/base/tooltip-icon-button.tsx
+var import_react52 = require("react");
+
+// src/ui/base/tooltip.tsx
+var TooltipPrimitive = __toESM(require("@radix-ui/react-tooltip"));
+
+// src/ui/utils/withDefaults.tsx
+var import_react50 = require("react");
+var import_classnames = __toESM(require("classnames"));
+var import_jsx_runtime25 = require("react/jsx-runtime");
+var withDefaultProps = ({
+  className,
+  ...defaultProps
+}) => ({ className: classNameProp, ...props }) => {
+  return {
+    className: (0, import_classnames.default)(className, classNameProp),
+    ...defaultProps,
+    ...props
+  };
+};
+var withDefaults = (Component, defaultProps) => {
+  const getProps = withDefaultProps(defaultProps);
+  const WithDefaults = (0, import_react50.forwardRef)(
+    (props, ref) => {
+      const ComponentAsAny = Component;
+      return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(ComponentAsAny, { ...getProps(props), ref });
+    }
+  );
+  WithDefaults.displayName = "withDefaults(" + (typeof Component === "string" ? Component : Component.displayName) + ")";
+  return WithDefaults;
+};
+
+// src/ui/base/tooltip.tsx
+var import_jsx_runtime26 = require("react/jsx-runtime");
+var Tooltip = (props) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(TooltipPrimitive.Provider, { children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(TooltipPrimitive.Root, { ...props }) });
+};
+Tooltip.displayName = "Tooltip";
+var TooltipTrigger = TooltipPrimitive.Trigger;
+var TooltipContent = withDefaults(TooltipPrimitive.Content, {
+  sideOffset: 4,
+  className: "aui-tooltip-content"
+});
+TooltipContent.displayName = "TooltipContent";
+
+// src/ui/base/button.tsx
+var import_class_variance_authority = require("class-variance-authority");
+var import_react_primitive11 = require("@radix-ui/react-primitive");
+var import_react51 = require("react");
+var import_jsx_runtime27 = require("react/jsx-runtime");
+var buttonVariants = (0, import_class_variance_authority.cva)("aui-button", {
+  variants: {
+    variant: {
+      default: "aui-button-primary",
+      outline: "aui-button-outline",
+      ghost: "aui-button-ghost"
+    },
+    size: {
+      default: "aui-button-medium",
+      icon: "aui-button-icon"
+    }
+  },
+  defaultVariants: {
+    variant: "default",
+    size: "default"
+  }
+});
+var Button = (0, import_react51.forwardRef)(
+  ({ className, variant, size, ...props }, ref) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+      import_react_primitive11.Primitive.button,
+      {
+        className: buttonVariants({ variant, size, className }),
+        ...props,
+        ref
+      }
+    );
+  }
+);
+Button.displayName = "Button";
+
+// src/ui/base/tooltip-icon-button.tsx
+var import_jsx_runtime28 = require("react/jsx-runtime");
+var TooltipIconButton = (0, import_react52.forwardRef)(({ children, tooltip, side = "bottom", ...rest }, ref) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(Tooltip, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(Button, { variant: "ghost", size: "icon", ...rest, ref, children: [
+      children,
+      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "aui-sr-only", children: tooltip })
+    ] }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(TooltipContent, { side, children: tooltip })
+  ] });
+});
+TooltipIconButton.displayName = "TooltipIconButton";
+
 // src/runtimes/edge/converters/toLanguageModelMessages.ts
 var assistantMessageSplitter = () => {
   const stash = [];
@@ -3403,9 +3413,7 @@ var EdgeChatAdapter = class {
       signal: abortSignal
     });
     if (result.status !== 200) {
-      throw new Error(
-        `Edge runtime returned status ${result.status}: ${await result.text()}`
-      );
+      throw new Error(`Status ${result.status}: ${await result.text()}`);
     }
     const stream = result.body.pipeThrough(new TextDecoderStream()).pipeThrough(chunkByLineStream()).pipeThrough(assistantDecoderStream()).pipeThrough(toolResultStream(config.tools)).pipeThrough(runResultStream());
     let update;
@@ -3427,31 +3435,10 @@ var useEdgeRuntime = ({
   return useLocalRuntime(adapter, { initialMessages });
 };
 
-// src/runtimes/local/LocalRuntime.tsx
+// src/runtimes/local/shouldContinue.tsx
 var shouldContinue = (result) => result.status?.type === "requires-action" && result.status.reason === "tool-calls" && result.content.every((c) => c.type !== "tool-call" || !!c.result);
-var LocalRuntime = class extends BaseAssistantRuntime {
-  _proxyConfigProvider;
-  constructor(adapter, options) {
-    const proxyConfigProvider = new ProxyConfigProvider();
-    super(new LocalThreadRuntime(proxyConfigProvider, adapter, options));
-    this._proxyConfigProvider = proxyConfigProvider;
-  }
-  set adapter(adapter) {
-    this.thread.adapter = adapter;
-  }
-  registerModelConfigProvider(provider) {
-    return this._proxyConfigProvider.registerModelConfigProvider(provider);
-  }
-  switchToThread(threadId) {
-    if (threadId) {
-      throw new Error("LocalRuntime does not yet support switching threads");
-    }
-    return this.thread = new LocalThreadRuntime(
-      this._proxyConfigProvider,
-      this.thread.adapter
-    );
-  }
-};
+
+// src/runtimes/local/LocalThreadRuntime.tsx
 var CAPABILITIES = Object.freeze({
   edit: true,
   reload: true,
@@ -3511,7 +3498,7 @@ var LocalThreadRuntime = class {
       id,
       role: "assistant",
       status: { type: "running" },
-      content: [{ type: "text", text: "" }],
+      content: [],
       createdAt: /* @__PURE__ */ new Date()
     };
     do {
@@ -3623,6 +3610,31 @@ var LocalThreadRuntime = class {
   }
 };
 
+// src/runtimes/local/LocalRuntime.tsx
+var LocalRuntime = class extends BaseAssistantRuntime {
+  _proxyConfigProvider;
+  constructor(adapter, options) {
+    const proxyConfigProvider = new ProxyConfigProvider();
+    super(new LocalThreadRuntime(proxyConfigProvider, adapter, options));
+    this._proxyConfigProvider = proxyConfigProvider;
+  }
+  set adapter(adapter) {
+    this.thread.adapter = adapter;
+  }
+  registerModelConfigProvider(provider) {
+    return this._proxyConfigProvider.registerModelConfigProvider(provider);
+  }
+  switchToThread(threadId) {
+    if (threadId) {
+      throw new Error("LocalRuntime does not yet support switching threads");
+    }
+    return this.thread = new LocalThreadRuntime(
+      this._proxyConfigProvider,
+      this.thread.adapter
+    );
+  }
+};
+
 // src/runtimes/local/useLocalRuntime.tsx
 var useLocalRuntime = (adapter, options) => {
   const [runtime] = (0, import_react54.useState)(() => new LocalRuntime(adapter, options));
@@ -3632,12 +3644,219 @@ var useLocalRuntime = (adapter, options) => {
   return runtime;
 };
 
-// src/ui/thread-config.tsx
+// src/runtimes/external-store/ExternalStoreThreadRuntime.tsx
+var import_zustand14 = require("zustand");
+
+// src/runtimes/external-store/getExternalStoreMessage.tsx
+var symbolInnerMessage = Symbol("innerMessage");
+var getExternalStoreMessage = (message) => {
+  return message[symbolInnerMessage];
+};
+
+// src/runtimes/external-store/useExternalStoreSync.tsx
 var import_react55 = require("react");
+
+// src/runtimes/external-store/ThreadMessageConverter.ts
+var ThreadMessageConverter = class {
+  cache = /* @__PURE__ */ new WeakMap();
+  convertMessages(messages, converter, keyMapper = (key) => key) {
+    return messages.map((m, idx) => {
+      const key = keyMapper(m);
+      const cached = this.cache.get(key);
+      const newMessage = converter(cached, m, idx);
+      this.cache.set(key, newMessage);
+      return newMessage;
+    });
+  }
+};
+
+// src/runtimes/external-store/useExternalStoreSync.tsx
+var useExternalStoreSync = (adapter, updateData) => {
+  const [converter, convertCallback] = (0, import_react55.useMemo)(() => {
+    const converter2 = adapter.convertMessage ?? ((m) => m);
+    const convertCallback2 = (cache, m, idx) => {
+      if (cache) return cache;
+      const newMessage = converter2(m, idx);
+      newMessage[symbolInnerMessage] = m;
+      return newMessage;
+    };
+    return [new ThreadMessageConverter(), convertCallback2];
+  }, [adapter.convertMessage]);
+  (0, import_react55.useEffect)(() => {
+    updateData(
+      adapter.isRunning ?? false,
+      converter.convertMessages(adapter.messages, convertCallback)
+    );
+  }, [
+    updateData,
+    converter,
+    convertCallback,
+    adapter.messages,
+    adapter.isRunning
+  ]);
+};
+
+// src/runtimes/external-store/ExternalStoreThreadRuntime.tsx
+var hasUpcomingMessage = (isRunning, messages) => {
+  return isRunning && messages[messages.length - 1]?.role !== "assistant";
+};
+var ExternalStoreThreadRuntime = class {
+  constructor(store) {
+    this.store = store;
+    this.useStore = (0, import_zustand14.create)(() => ({
+      store
+    }));
+  }
+  _subscriptions = /* @__PURE__ */ new Set();
+  repository = new MessageRepository();
+  assistantOptimisticId = null;
+  useStore;
+  get capabilities() {
+    return {
+      edit: this.store.onEdit !== void 0,
+      reload: this.store.onReload !== void 0,
+      cancel: this.store.onCancel !== void 0,
+      copy: true
+    };
+  }
+  messages = [];
+  isRunning = false;
+  getBranches(messageId) {
+    return this.repository.getBranches(messageId);
+  }
+  switchToBranch(branchId) {
+    this.repository.switchToBranch(branchId);
+    this.updateMessages(this.repository.getMessages());
+  }
+  async append(message) {
+    if (message.parentId !== (this.messages.at(-1)?.id ?? null)) {
+      if (!this.store.onEdit)
+        throw new Error("Runtime does not support editing messages.");
+      await this.store.onEdit(message);
+    } else {
+      await this.store.onNew(message);
+    }
+  }
+  async startRun(parentId) {
+    if (!this.store.onReload)
+      throw new Error("Runtime does not support reloading messages.");
+    await this.store.onReload(parentId);
+  }
+  cancelRun() {
+    if (!this.store.onCancel)
+      throw new Error("Runtime does not support cancelling runs.");
+    this.store.onCancel();
+    if (this.assistantOptimisticId) {
+      this.repository.deleteMessage(this.assistantOptimisticId);
+      this.assistantOptimisticId = null;
+    }
+    let messages = this.repository.getMessages();
+    setTimeout(() => {
+      this.updateMessages(messages);
+    }, 0);
+  }
+  subscribe(callback) {
+    this._subscriptions.add(callback);
+    return () => this._subscriptions.delete(callback);
+  }
+  updateMessages = (messages) => {
+    this.store.setMessages?.(
+      messages.flatMap(getExternalStoreMessage).filter((m) => m != null)
+    );
+  };
+  onStoreUpdated() {
+    if (this.useStore.getState().store !== this.store) {
+      this.useStore.setState({ store: this.store });
+    }
+  }
+  updateData = (isRunning, vm) => {
+    for (let i = 0; i < vm.length; i++) {
+      const message = vm[i];
+      const parent = vm[i - 1];
+      this.repository.addOrUpdateMessage(parent?.id ?? null, message);
+    }
+    if (this.assistantOptimisticId) {
+      this.repository.deleteMessage(this.assistantOptimisticId);
+      this.assistantOptimisticId = null;
+    }
+    if (hasUpcomingMessage(isRunning, vm)) {
+      this.assistantOptimisticId = this.repository.appendOptimisticMessage(
+        vm.at(-1)?.id ?? null,
+        {
+          role: "assistant",
+          content: []
+        }
+      );
+    }
+    this.repository.resetHead(
+      this.assistantOptimisticId ?? vm.at(-1)?.id ?? null
+    );
+    this.messages = this.repository.getMessages();
+    this.isRunning = isRunning;
+    for (const callback of this._subscriptions) callback();
+  };
+  unstable_synchronizer = () => {
+    const { store } = this.useStore();
+    useExternalStoreSync(store, this.updateData);
+    return null;
+  };
+  addToolResult(options) {
+    if (!this.store.onAddToolResult)
+      throw new Error("Runtime does not support tool results.");
+    this.store.onAddToolResult(options);
+  }
+};
+
+// src/runtimes/external-store/ExternalStoreRuntime.tsx
+var ExternalStoreRuntime = class extends BaseAssistantRuntime {
+  _proxyConfigProvider = new ProxyConfigProvider();
+  constructor(store) {
+    super(new ExternalStoreThreadRuntime(store));
+  }
+  set store(store) {
+    this.thread.store = store;
+  }
+  onStoreUpdated() {
+    return this.thread.onStoreUpdated();
+  }
+  getModelConfig() {
+    return this._proxyConfigProvider.getModelConfig();
+  }
+  registerModelConfigProvider(provider) {
+    return this._proxyConfigProvider.registerModelConfigProvider(provider);
+  }
+  switchToThread(threadId) {
+    if (threadId) {
+      if (!this.store.onSwitchThread)
+        throw new Error("Runtime does not support switching threads.");
+      return this.store.onSwitchThread(threadId);
+    } else {
+      if (!this.store.onNewThread)
+        throw new Error("Runtime does not support switching to new threads.");
+      return this.store.onNewThread();
+    }
+  }
+};
+
+// src/runtimes/external-store/useExternalStoreRuntime.tsx
+var import_react56 = require("react");
+var useExternalStoreRuntime = (store) => {
+  const [runtime] = (0, import_react56.useState)(() => new ExternalStoreRuntime(store));
+  (0, import_react56.useInsertionEffect)(() => {
+    runtime.store = store;
+  });
+  (0, import_react56.useEffect)(() => {
+    runtime.onStoreUpdated();
+  });
+  return runtime;
+};
+
+// src/ui/thread-config.tsx
+var import_react57 = require("react");
 var import_jsx_runtime29 = require("react/jsx-runtime");
-var ThreadConfigContext = (0, import_react55.createContext)({});
+var ThreadConfigContext = (0, import_react57.createContext)({});
 var useThreadConfig = () => {
-  return (0, import_react55.useContext)(ThreadConfigContext);
+  return (0, import_react57.useContext)(ThreadConfigContext);
 };
 var ThreadConfigProvider = ({
   children,
@@ -3656,7 +3875,7 @@ var ThreadConfigProvider = ({
 ThreadConfigProvider.displayName = "ThreadConfigProvider";
 
 // src/ui/assistant-action-bar.tsx
-var import_react56 = require("react");
+var import_react58 = require("react");
 var import_lucide_react = require("lucide-react");
 var import_jsx_runtime30 = require("react/jsx-runtime");
 var useAllowCopy = () => {
@@ -3693,7 +3912,7 @@ var AssistantActionBarRoot = withDefaults(actionBar_exports.Root, {
   className: "aui-assistant-action-bar-root"
 });
 AssistantActionBarRoot.displayName = "AssistantActionBarRoot";
-var AssistantActionBarCopy = (0, import_react56.forwardRef)((props, ref) => {
+var AssistantActionBarCopy = (0, import_react58.forwardRef)((props, ref) => {
   const {
     strings: {
       assistantMessage: { reload: { tooltip = "Copy" } = {} } = {}
@@ -3707,7 +3926,7 @@ var AssistantActionBarCopy = (0, import_react56.forwardRef)((props, ref) => {
   ] }) }) });
 });
 AssistantActionBarCopy.displayName = "AssistantActionBarCopy";
-var AssistantActionBarReload = (0, import_react56.forwardRef)((props, ref) => {
+var AssistantActionBarReload = (0, import_react58.forwardRef)((props, ref) => {
   const {
     strings: {
       assistantMessage: { reload: { tooltip = "Refresh" } = {} } = {}
@@ -3729,10 +3948,10 @@ var assistant_action_bar_default = Object.assign(
 );
 
 // src/ui/assistant-message.tsx
-var import_react58 = require("react");
+var import_react60 = require("react");
 
 // src/ui/branch-picker.tsx
-var import_react57 = require("react");
+var import_react59 = require("react");
 var import_lucide_react2 = require("lucide-react");
 var import_jsx_runtime31 = require("react/jsx-runtime");
 var BranchPicker = () => {
@@ -3747,7 +3966,7 @@ var BranchPickerRoot = withDefaults(branchPicker_exports.Root, {
   className: "aui-branch-picker-root"
 });
 BranchPickerRoot.displayName = "BranchPickerRoot";
-var BranchPickerPrevious2 = (0, import_react57.forwardRef)((props, ref) => {
+var BranchPickerPrevious2 = (0, import_react59.forwardRef)((props, ref) => {
   const {
     strings: {
       branchPicker: { previous: { tooltip = "Previous" } = {} } = {}
@@ -3759,7 +3978,7 @@ BranchPickerPrevious2.displayName = "BranchPickerPrevious";
 var BranchPickerStateWrapper = withDefaults("span", {
   className: "aui-branch-picker-state"
 });
-var BranchPickerState = (0, import_react57.forwardRef)((props, ref) => {
+var BranchPickerState = (0, import_react59.forwardRef)((props, ref) => {
   return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(BranchPickerStateWrapper, { ...props, ref, children: [
     /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(branchPicker_exports.Number, {}),
     " / ",
@@ -3767,7 +3986,7 @@ var BranchPickerState = (0, import_react57.forwardRef)((props, ref) => {
   ] });
 });
 BranchPickerState.displayName = "BranchPickerState";
-var BranchPickerNext = (0, import_react57.forwardRef)((props, ref) => {
+var BranchPickerNext = (0, import_react59.forwardRef)((props, ref) => {
   const {
     strings: { branchPicker: { next: { tooltip = "Next" } = {} } = {} } = {}
   } = useThreadConfig();
@@ -3845,7 +4064,7 @@ AssistantMessageRoot.displayName = "AssistantMessageRoot";
 var AssistantMessageContentWrapper = withDefaults("div", {
   className: "aui-assistant-message-content"
 });
-var AssistantMessageContent = (0, import_react58.forwardRef)(({ components: componentsProp, ...rest }, ref) => {
+var AssistantMessageContent = (0, import_react60.forwardRef)(({ components: componentsProp, ...rest }, ref) => {
   const { assistantMessage: { components = {} } = {} } = useThreadConfig();
   return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(AssistantMessageContentWrapper, { ...rest, ref, children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
     message_exports.Content,
@@ -3869,15 +4088,15 @@ var assistant_message_default = Object.assign(
 );
 
 // src/ui/assistant-modal.tsx
-var import_react65 = require("react");
+var import_react67 = require("react");
 var import_lucide_react6 = require("lucide-react");
 
 // src/ui/thread.tsx
-var import_react64 = require("react");
+var import_react66 = require("react");
 var import_lucide_react5 = require("lucide-react");
 
 // src/ui/composer.tsx
-var import_react59 = require("react");
+var import_react61 = require("react");
 var import_lucide_react3 = require("lucide-react");
 
 // src/ui/base/CircleStopIcon.tsx
@@ -3913,7 +4132,7 @@ var ComposerInputStyled = withDefaults(composer_exports.Input, {
   autoFocus: true,
   className: "aui-composer-input"
 });
-var ComposerInput = (0, import_react59.forwardRef)(
+var ComposerInput = (0, import_react61.forwardRef)(
   (props, ref) => {
     const {
       strings: {
@@ -3942,7 +4161,7 @@ var ComposerSendButton = withDefaults(TooltipIconButton, {
   variant: "default",
   className: "aui-composer-send"
 });
-var ComposerSend = (0, import_react59.forwardRef)((props, ref) => {
+var ComposerSend = (0, import_react61.forwardRef)((props, ref) => {
   const {
     strings: { composer: { send: { tooltip = "Send" } = {} } = {} } = {}
   } = useThreadConfig();
@@ -3953,7 +4172,7 @@ var ComposerCancelButton = withDefaults(TooltipIconButton, {
   variant: "default",
   className: "aui-composer-cancel"
 });
-var ComposerCancel = (0, import_react59.forwardRef)((props, ref) => {
+var ComposerCancel = (0, import_react61.forwardRef)((props, ref) => {
   const {
     strings: { composer: { cancel: { tooltip = "Cancel" } = {} } = {} } = {}
   } = useThreadConfig();
@@ -3970,7 +4189,7 @@ var exports6 = {
 var composer_default = Object.assign(Composer, exports6);
 
 // src/ui/thread-welcome.tsx
-var import_react60 = require("react");
+var import_react62 = require("react");
 var import_jsx_runtime37 = require("react/jsx-runtime");
 var ThreadWelcome = () => {
   return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(ThreadWelcomeRoot, { children: [
@@ -3988,7 +4207,7 @@ var ThreadWelcomeRootStyled = withDefaults("div", {
 var ThreadWelcomeCenter = withDefaults("div", {
   className: "aui-thread-welcome-center"
 });
-var ThreadWelcomeRoot = (0, import_react60.forwardRef)(
+var ThreadWelcomeRoot = (0, import_react62.forwardRef)(
   (props, ref) => {
     return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(thread_exports.Empty, { children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(ThreadWelcomeRootStyled, { ...props, ref }) });
   }
@@ -4001,7 +4220,7 @@ var ThreadWelcomeAvatar = () => {
 var ThreadWelcomeMessageStyled = withDefaults("p", {
   className: "aui-thread-welcome-message"
 });
-var ThreadWelcomeMessage = (0, import_react60.forwardRef)(({ message: messageProp, ...rest }, ref) => {
+var ThreadWelcomeMessage = (0, import_react62.forwardRef)(({ message: messageProp, ...rest }, ref) => {
   const { welcome: { message = "How can I help you today?" } = {} } = useThreadConfig();
   return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(ThreadWelcomeMessageStyled, { ...rest, ref, children: messageProp ?? message });
 });
@@ -4044,10 +4263,10 @@ var exports7 = {
 var thread_welcome_default = Object.assign(ThreadWelcome, exports7);
 
 // src/ui/user-message.tsx
-var import_react62 = require("react");
+var import_react64 = require("react");
 
 // src/ui/user-action-bar.tsx
-var import_react61 = require("react");
+var import_react63 = require("react");
 var import_lucide_react4 = require("lucide-react");
 var import_jsx_runtime38 = require("react/jsx-runtime");
 var useAllowEdit = () => {
@@ -4066,7 +4285,7 @@ var UserActionBarRoot = withDefaults(actionBar_exports.Root, {
   className: "aui-user-action-bar-root"
 });
 UserActionBarRoot.displayName = "UserActionBarRoot";
-var UserActionBarEdit = (0, import_react61.forwardRef)((props, ref) => {
+var UserActionBarEdit = (0, import_react63.forwardRef)((props, ref) => {
   const {
     strings: { userMessage: { edit: { tooltip = "Edit" } = {} } = {} } = {}
   } = useThreadConfig();
@@ -4098,7 +4317,7 @@ UserMessageRoot.displayName = "UserMessageRoot";
 var UserMessageContentWrapper = withDefaults("div", {
   className: "aui-user-message-content"
 });
-var UserMessageContent = (0, import_react62.forwardRef)(
+var UserMessageContent = (0, import_react64.forwardRef)(
   ({ components, ...props }, ref) => {
     return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(UserMessageContentWrapper, { ...props, ref, children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
       message_exports.Content,
@@ -4119,7 +4338,7 @@ var exports9 = {
 var user_message_default = Object.assign(UserMessage, exports9);
 
 // src/ui/edit-composer.tsx
-var import_react63 = require("react");
+var import_react65 = require("react");
 var import_jsx_runtime40 = require("react/jsx-runtime");
 var EditComposer = () => {
   return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(EditComposerRoot, { children: [
@@ -4143,7 +4362,7 @@ var EditComposerFooter = withDefaults("div", {
   className: "aui-edit-composer-footer"
 });
 EditComposerFooter.displayName = "EditComposerFooter";
-var EditComposerCancel = (0, import_react63.forwardRef)(
+var EditComposerCancel = (0, import_react65.forwardRef)(
   (props, ref) => {
     const {
       strings: {
@@ -4154,7 +4373,7 @@ var EditComposerCancel = (0, import_react63.forwardRef)(
   }
 );
 EditComposerCancel.displayName = "EditComposerCancel";
-var EditComposerSend = (0, import_react63.forwardRef)(
+var EditComposerSend = (0, import_react65.forwardRef)(
   (props, ref) => {
     const {
       strings: { editComposer: { send: { label = "Send" } = {} } = {} } = {}
@@ -4187,7 +4406,7 @@ var Thread = (config) => {
 var ThreadRootStyled = withDefaults(thread_exports.Root, {
   className: "aui-root aui-thread-root"
 });
-var ThreadRoot = (0, import_react64.forwardRef)(
+var ThreadRoot = (0, import_react66.forwardRef)(
   ({ config, ...props }, ref) => {
     return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(ThreadConfigProvider, { config, children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(ThreadRootStyled, { ...props, ref }) });
   }
@@ -4221,7 +4440,7 @@ var ThreadScrollToBottomIconButton = withDefaults(TooltipIconButton, {
   variant: "outline",
   className: "aui-thread-scroll-to-bottom"
 });
-var ThreadScrollToBottom = (0, import_react64.forwardRef)((props, ref) => {
+var ThreadScrollToBottom = (0, import_react66.forwardRef)((props, ref) => {
   const {
     strings: {
       thread: { scrollToBottom: { tooltip = "Scroll to bottom" } = {} } = {}
@@ -4252,7 +4471,7 @@ var AssistantModalRoot = ({ config, ...props }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(ThreadConfigProvider, { config, children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(assistantModal_exports.Root, { ...props }) });
 };
 AssistantModalRoot.displayName = "AssistantModalRoot";
-var AssistantModalTrigger = (0, import_react65.forwardRef)((props, ref) => {
+var AssistantModalTrigger = (0, import_react67.forwardRef)((props, ref) => {
   return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(AssistantModalAnchor, { children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(assistantModal_exports.Trigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(AssistantModalButton, { ...props, ref }) }) });
 });
 AssistantModalTrigger.displayName = "AssistantModalTrigger";
@@ -4264,7 +4483,7 @@ var ModalButtonStyled = withDefaults(TooltipIconButton, {
   variant: "default",
   className: "aui-modal-button"
 });
-var AssistantModalButton = (0, import_react65.forwardRef)(({ "data-state": state, ...rest }, ref) => {
+var AssistantModalButton = (0, import_react67.forwardRef)(({ "data-state": state, ...rest }, ref) => {
   const {
     strings: {
       assistantModal: {
@@ -4333,6 +4552,7 @@ var assistant_modal_default = Object.assign(AssistantModal, exports12);
   ContentPartPrimitive,
   EdgeChatAdapter,
   EditComposer,
+  ExternalStoreRuntime,
   INTERNAL,
   MessagePrimitive,
   Thread,
@@ -4345,6 +4565,7 @@ var assistant_modal_default = Object.assign(AssistantModal, exports12);
   fromCoreMessages,
   fromLanguageModelMessages,
   fromLanguageModelTools,
+  getExternalStoreMessage,
   makeAssistantTool,
   makeAssistantToolUI,
   toCoreMessage,
@@ -4372,6 +4593,7 @@ var assistant_modal_default = Object.assign(AssistantModal, exports12);
   useContentPartImage,
   useContentPartText,
   useEdgeRuntime,
+  useExternalStoreRuntime,
   useLocalRuntime,
   useMessageContext,
   useMessageIf,