@assistant-ui/react 0.0.18 → 0.0.19

package/dist/index.d.mts

@@ -103,16 +103,16 @@ declare namespace index$4 {
   export { ComposerCancel as Cancel, ComposerIf as If, ComposerInput as Input, ComposerRoot as Root, ComposerSend as Send };
 }
 
-type BaseComposerState = {
+type BaseComposerState = Readonly<{
     value: string;
     setValue: (value: string) => void;
-};
-type MessageComposerState = BaseComposerState & {
+}>;
+type MessageComposerState = BaseComposerState & Readonly<{
     isEditing: boolean;
     edit: () => void;
     send: () => void;
     cancel: () => boolean;
-};
+}>;
 
 type TextContentPart = {
     type: "text";
@@ -379,10 +379,10 @@ declare class VercelModelAdapter implements ChatModelAdapter {
 declare const getVercelMessage: (message: ThreadMessage) => Message | undefined;
 declare const getVercelRSCMessage: <T>(message: ThreadMessage) => T | undefined;
 
-type MessageState = {
-    message: ThreadMessage;
+type MessageState = Readonly<{
+    message: Readonly<ThreadMessage>;
     parentId: string | null;
-    branches: string[];
+    branches: readonly string[];
     isLast: boolean;
     inProgressIndicator: ReactNode | null;
     setInProgressIndicator: (value: ReactNode | null) => void;
@@ -390,7 +390,7 @@ type MessageState = {
     setIsCopied: (value: boolean) => void;
     isHovering: boolean;
     setIsHovering: (value: boolean) => void;
-};
+}>;
 type MessageStore = {
     useMessage: UseBoundStore<StoreApi<MessageState>>;
     useComposer: UseBoundStore<StoreApi<MessageComposerState>>;

package/dist/index.d.ts

@@ -103,16 +103,16 @@ declare namespace index$4 {
   export { ComposerCancel as Cancel, ComposerIf as If, ComposerInput as Input, ComposerRoot as Root, ComposerSend as Send };
 }
 
-type BaseComposerState = {
+type BaseComposerState = Readonly<{
     value: string;
     setValue: (value: string) => void;
-};
-type MessageComposerState = BaseComposerState & {
+}>;
+type MessageComposerState = BaseComposerState & Readonly<{
     isEditing: boolean;
     edit: () => void;
     send: () => void;
     cancel: () => boolean;
-};
+}>;
 
 type TextContentPart = {
     type: "text";
@@ -379,10 +379,10 @@ declare class VercelModelAdapter implements ChatModelAdapter {
 declare const getVercelMessage: (message: ThreadMessage) => Message | undefined;
 declare const getVercelRSCMessage: <T>(message: ThreadMessage) => T | undefined;
 
-type MessageState = {
-    message: ThreadMessage;
+type MessageState = Readonly<{
+    message: Readonly<ThreadMessage>;
     parentId: string | null;
-    branches: string[];
+    branches: readonly string[];
     isLast: boolean;
     inProgressIndicator: ReactNode | null;
     setInProgressIndicator: (value: ReactNode | null) => void;
@@ -390,7 +390,7 @@ type MessageState = {
     setIsCopied: (value: boolean) => void;
     isHovering: boolean;
     setIsHovering: (value: boolean) => void;
-};
+}>;
 type MessageStore = {
     useMessage: UseBoundStore<StoreApi<MessageState>>;
     useComposer: UseBoundStore<StoreApi<MessageComposerState>>;

package/dist/index.js

@@ -173,18 +173,22 @@ var ThreadViewport = (0, import_react5.forwardRef)(({ autoScroll = true, onScrol
   const ref = (0, import_react_compose_refs.useComposedRefs)(forwardedRef, divRef);
   const { useViewport } = useAssistantContext();
   const firstRenderRef = (0, import_react5.useRef)(true);
+  const isScrollingToBottomRef = (0, import_react5.useRef)(false);
   const lastScrollTop = (0, import_react5.useRef)(0);
   const scrollToBottom = () => {
     const div = messagesEndRef.current;
     if (!div || !autoScroll) return;
     const behavior = firstRenderRef.current ? "instant" : "auto";
     firstRenderRef.current = false;
-    useViewport.setState({ isAtBottom: true });
+    isScrollingToBottomRef.current = true;
     div.scrollIntoView({ behavior });
   };
   useOnResizeContent(divRef, () => {
-    if (!useViewport.getState().isAtBottom) return;
-    scrollToBottom();
+    if (!isScrollingToBottomRef.current && !useViewport.getState().isAtBottom) {
+      handleScroll();
+    } else {
+      scrollToBottom();
+    }
   });
   useOnScrollToBottom(() => {
     scrollToBottom();
@@ -196,6 +200,7 @@ var ThreadViewport = (0, import_react5.forwardRef)(({ autoScroll = true, onScrol
     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;
@@ -841,6 +846,7 @@ __export(branchPicker_exports, {
 });
 
 // src/actions/useGoToNextBranch.tsx
+var import_react21 = require("react");
 var useGoToNextBranch = () => {
   const { useThread } = useAssistantContext();
   const { useMessage, useComposer } = useMessageContext();
@@ -848,20 +854,21 @@ var useGoToNextBranch = () => {
     [useMessage, useComposer],
     (m, c) => c.isEditing || m.branches.indexOf(m.message.id) + 1 >= m.branches.length
   );
-  if (disabled) return null;
-  return () => {
+  const callback = (0, import_react21.useCallback)(() => {
     const { message, branches } = useMessage.getState();
     useThread.getState().switchToBranch(branches[branches.indexOf(message.id) + 1]);
-  };
+  }, [useMessage, useThread]);
+  if (disabled) return null;
+  return callback;
 };
 
 // src/utils/createActionButton.tsx
 var import_primitive8 = require("@radix-ui/primitive");
 var import_react_primitive10 = require("@radix-ui/react-primitive");
-var import_react21 = require("react");
+var import_react22 = require("react");
 var import_jsx_runtime16 = require("react/jsx-runtime");
 var createActionButton = (useActionButton) => {
-  return (0, import_react21.forwardRef)(
+  return (0, import_react22.forwardRef)(
     (props, forwardedRef) => {
       const onClick = useActionButton(props);
       return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
@@ -882,6 +889,7 @@ var createActionButton = (useActionButton) => {
 var BranchPickerNext = createActionButton(useGoToNextBranch);
 
 // src/actions/useGoToPreviousBranch.tsx
+var import_react23 = require("react");
 var useGoToPreviousBranch = () => {
   const { useThread } = useAssistantContext();
   const { useMessage, useComposer } = useMessageContext();
@@ -889,13 +897,12 @@ var useGoToPreviousBranch = () => {
     [useMessage, useComposer],
     (m, c) => c.isEditing || m.branches.indexOf(m.message.id) <= 0
   );
-  if (disabled) return null;
-  return () => {
+  const callback = (0, import_react23.useCallback)(() => {
     const { message, branches } = useMessage.getState();
-    useThread.getState().switchToBranch(
-      branches[branches.indexOf(message.id) - 1]
-    );
-  };
+    useThread.getState().switchToBranch(branches[branches.indexOf(message.id) - 1]);
+  }, [useMessage, useThread]);
+  if (disabled) return null;
+  return callback;
 };
 
 // src/primitives/branchPicker/BranchPickerPrevious.tsx
@@ -919,9 +926,9 @@ var BranchPickerNumber = () => {
 
 // src/primitives/branchPicker/BranchPickerRoot.tsx
 var import_react_primitive11 = require("@radix-ui/react-primitive");
-var import_react22 = require("react");
+var import_react24 = require("react");
 var import_jsx_runtime19 = require("react/jsx-runtime");
-var BranchPickerRoot = (0, import_react22.forwardRef)(({ hideWhenSingleBranch, ...rest }, ref) => {
+var BranchPickerRoot = (0, import_react24.forwardRef)(({ hideWhenSingleBranch, ...rest }, ref) => {
   return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(MessageIf, { hasBranches: hideWhenSingleBranch ? true : void 0, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react_primitive11.Primitive.div, { ...rest, ref }) });
 });
 
@@ -936,9 +943,9 @@ __export(actionBar_exports, {
 
 // src/primitives/actionBar/ActionBarRoot.tsx
 var import_react_primitive12 = require("@radix-ui/react-primitive");
-var import_react23 = require("react");
+var import_react25 = require("react");
 var import_jsx_runtime20 = require("react/jsx-runtime");
-var ActionBarRoot = (0, import_react23.forwardRef)(({ hideWhenRunning, autohide, autohideFloat, ...rest }, ref) => {
+var ActionBarRoot = (0, import_react25.forwardRef)(({ hideWhenRunning, autohide, autohideFloat, ...rest }, ref) => {
   const { useThread } = useAssistantContext();
   const { useMessage } = useMessageContext();
   const hideAndfloatStatus = useCombinedStore(
@@ -965,6 +972,7 @@ var ActionBarRoot = (0, import_react23.forwardRef)(({ hideWhenRunning, autohide,
 });
 
 // src/actions/useCopyMessage.tsx
+var import_react26 = require("react");
 var useCopyMessage = ({ copiedDuration = 3e3 }) => {
   const { useMessage, useComposer } = useMessageContext();
   const hasCopyableContent = useCombinedStore(
@@ -973,21 +981,23 @@ var useCopyMessage = ({ copiedDuration = 3e3 }) => {
       return c.isEditing || m.message.content.some((c2) => c2.type === "text");
     }
   );
-  if (!hasCopyableContent) return null;
-  return () => {
+  const callback = (0, import_react26.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/primitives/actionBar/ActionBarCopy.tsx
 var ActionBarCopy = createActionButton(useCopyMessage);
 
 // src/actions/useReloadMessage.tsx
+var import_react27 = require("react");
 var useReloadMessage = () => {
   const { useThread, useViewport } = useAssistantContext();
   const { useMessage } = useMessageContext();
@@ -995,29 +1005,32 @@ var useReloadMessage = () => {
     [useThread, useMessage],
     (t, m) => t.isRunning || m.message.role !== "assistant"
   );
-  if (disabled) return null;
-  return () => {
+  const callback = (0, import_react27.useCallback)(() => {
     const { parentId } = useMessage.getState();
     useThread.getState().startRun(parentId);
     useViewport.getState().scrollToBottom();
-  };
+  }, [useMessage, useThread, useViewport]);
+  if (disabled) return null;
+  return callback;
 };
 
 // src/primitives/actionBar/ActionBarReload.tsx
 var ActionBarReload = createActionButton(useReloadMessage);
 
 // src/actions/useBeginMessageEdit.tsx
+var import_react28 = require("react");
 var useBeginMessageEdit = () => {
   const { useMessage, useComposer } = useMessageContext();
   const disabled = useCombinedStore(
     [useMessage, useComposer],
     (m, c) => m.message.role !== "user" || c.isEditing
   );
-  if (disabled) return null;
-  return () => {
+  const callback = (0, import_react28.useCallback)(() => {
     const { edit } = useComposer.getState();
     edit();
-  };
+  }, [useComposer]);
+  if (disabled) return null;
+  return callback;
 };
 
 // src/primitives/actionBar/ActionBarEdit.tsx
@@ -1031,10 +1044,10 @@ __export(contentPart_exports, {
 });
 
 // src/adapters/vercel/VercelAIAssistantProvider.tsx
-var import_react26 = require("react");
+var import_react31 = require("react");
 
 // src/adapters/vercel/useDummyAIAssistantContext.tsx
-var import_react24 = require("react");
+var import_react29 = require("react");
 var import_zustand5 = require("zustand");
 
 // src/utils/context/stores/ViewportStore.tsx
@@ -1080,7 +1093,7 @@ var makeDummyThreadStore = () => {
   }));
 };
 var useDummyAIAssistantContext = () => {
-  const [context] = (0, import_react24.useState)(() => {
+  const [context] = (0, import_react29.useState)(() => {
     const useThread = makeDummyThreadStore();
     const useViewport = makeViewportStore();
     const useComposer = makeThreadComposerStore(useThread);
@@ -1091,7 +1104,7 @@ var useDummyAIAssistantContext = () => {
 
 // src/adapters/vercel/useVercelAIThreadState.tsx
 var import_react_use_callback_ref3 = require("@radix-ui/react-use-callback-ref");
-var import_react25 = require("react");
+var import_react30 = require("react");
 
 // src/adapters/idUtils.tsx
 var import_non_secure = require("nanoid/non-secure");
@@ -1330,11 +1343,11 @@ var getIsRunning = (vercel) => {
   return vercel.status === "in_progress";
 };
 var useVercelAIThreadState = (vercel) => {
-  const [data] = (0, import_react25.useState)(() => new MessageRepository());
+  const [data] = (0, import_react30.useState)(() => new MessageRepository());
   const isRunning = getIsRunning(vercel);
-  const converter = (0, import_react25.useMemo)(() => new ThreadMessageConverter(), []);
-  const assistantOptimisticIdRef = (0, import_react25.useRef)(null);
-  const messages = (0, import_react25.useMemo)(() => {
+  const converter = (0, import_react30.useMemo)(() => new ThreadMessageConverter(), []);
+  const assistantOptimisticIdRef = (0, import_react30.useRef)(null);
+  const messages = (0, import_react30.useMemo)(() => {
     const lastMessageId = vercel.messages.at(-1)?.id;
     const convertCallback = (message, cache) => {
       const status = lastMessageId === message.id && isRunning ? "in_progress" : "done";
@@ -1364,7 +1377,7 @@ var useVercelAIThreadState = (vercel) => {
     data.resetHead(assistantOptimisticIdRef.current ?? vm.at(-1)?.id ?? null);
     return data.getMessages();
   }, [converter, data, isRunning, vercel.messages]);
-  const getBranches2 = (0, import_react25.useCallback)(
+  const getBranches2 = (0, import_react30.useCallback)(
     (messageId) => {
       return data.getBranches(messageId);
     },
@@ -1403,7 +1416,7 @@ var useVercelAIThreadState = (vercel) => {
       vercel.setInput(lastMessage.content);
     }
   });
-  return (0, import_react25.useMemo)(
+  return (0, import_react30.useMemo)(
     () => ({
       isRunning,
       messages,
@@ -1434,10 +1447,10 @@ var VercelAIAssistantProvider = ({
   const context = useDummyAIAssistantContext();
   const vercel = "chat" in rest ? rest.chat : rest.assistant;
   const threadState = useVercelAIThreadState(vercel);
-  (0, import_react26.useMemo)(() => {
+  (0, import_react31.useMemo)(() => {
     context.useThread.setState(threadState, true);
   }, [context, threadState]);
-  (0, import_react26.useMemo)(() => {
+  (0, import_react31.useMemo)(() => {
     context.useComposer.setState({
       value: vercel.input,
       setValue: vercel.setInput
@@ -1447,7 +1460,7 @@ var VercelAIAssistantProvider = ({
 };
 
 // src/adapters/vercel/VercelRSCAssistantProvider.tsx
-var import_react27 = require("react");
+var import_react32 = require("react");
 var import_jsx_runtime22 = require("react/jsx-runtime");
 var vercelToThreadMessage2 = (converter, rawMessage) => {
   const message = converter(rawMessage);
@@ -1485,12 +1498,12 @@ var VercelRSCAssistantProvider = ({
   reload
 }) => {
   const context = useDummyAIAssistantContext();
-  const [isRunning, setIsRunning] = (0, import_react27.useState)(false);
-  const withRunning = (0, import_react27.useCallback)((callback) => {
+  const [isRunning, setIsRunning] = (0, import_react32.useState)(false);
+  const withRunning = (0, import_react32.useCallback)((callback) => {
     setIsRunning(true);
     return callback.finally(() => setIsRunning(false));
   }, []);
-  const [converter, convertCallback] = (0, import_react27.useMemo)(() => {
+  const [converter, convertCallback] = (0, import_react32.useMemo)(() => {
     const rscConverter = convertMessage ?? ((m) => m);
     const convertCallback2 = (m, cache) => {
       if (cache) return cache;
@@ -1498,10 +1511,10 @@ var VercelRSCAssistantProvider = ({
     };
     return [new ThreadMessageConverter(), convertCallback2];
   }, [convertMessage]);
-  const messages = (0, import_react27.useMemo)(() => {
+  const messages = (0, import_react32.useMemo)(() => {
     return converter.convertMessages(convertCallback, vercelMessages);
   }, [converter, convertCallback, vercelMessages]);
-  const append = (0, import_react27.useCallback)(
+  const append = (0, import_react32.useCallback)(
     async (message) => {
       if (message.parentId !== (context.useThread.getState().messages.at(-1)?.id ?? null)) {
         if (!edit)
@@ -1515,7 +1528,7 @@ var VercelRSCAssistantProvider = ({
     },
     [context, withRunning, appendCallback, edit]
   );
-  const startRun = (0, import_react27.useCallback)(
+  const startRun = (0, import_react32.useCallback)(
     async (parentId) => {
       if (!reload)
         throw new Error(
@@ -1525,7 +1538,7 @@ var VercelRSCAssistantProvider = ({
     },
     [withRunning, reload]
   );
-  (0, import_react27.useMemo)(() => {
+  (0, import_react32.useMemo)(() => {
     context.useThread.setState(
       {
         messages,
@@ -1543,7 +1556,7 @@ var VercelRSCAssistantProvider = ({
 };
 
 // src/adapters/core/utils/useAssistantContext.tsx
-var import_react28 = require("react");
+var import_react33 = require("react");
 var import_zustand6 = require("zustand");
 
 // src/adapters/core/utils/AssistantMessageRepository.tsx
@@ -1634,9 +1647,11 @@ var makeThreadStore = (runtimeRef) => {
   };
 };
 var useAssistantContext2 = (runtime) => {
-  const runtimeRef = (0, import_react28.useRef)(runtime);
-  runtimeRef.current = runtime;
-  const [{ context, onNewMessage, onRunningChange }] = (0, import_react28.useState)(() => {
+  const runtimeRef = (0, import_react33.useRef)(runtime);
+  (0, import_react33.useInsertionEffect)(() => {
+    runtimeRef.current = runtime;
+  });
+  const [{ context, onNewMessage, onRunningChange }] = (0, import_react33.useState)(() => {
     const { useThread, onNewMessage: onNewMessage2, onRunningChange: onRunningChange2 } = makeThreadStore(runtimeRef);
     const useViewport = makeViewportStore();
     const useComposer = makeThreadComposerStore(useThread);
@@ -1646,10 +1661,10 @@ var useAssistantContext2 = (runtime) => {
       onRunningChange: onRunningChange2
     };
   });
-  (0, import_react28.useEffect)(() => {
+  (0, import_react33.useEffect)(() => {
     return runtime.subscribeToMessageUpdates(onNewMessage);
   }, [runtime, onNewMessage]);
-  (0, import_react28.useEffect)(() => {
+  (0, import_react33.useEffect)(() => {
     return runtime.subscribeToStatusUpdates(onRunningChange);
   }, [runtime, onRunningChange]);
   return context;
@@ -1663,7 +1678,7 @@ var AssistantProvider = ({ children, runtime }) => {
 };
 
 // src/adapters/core/local/useLocalRuntime.tsx
-var import_react29 = require("react");
+var import_react34 = require("react");
 
 // src/adapters/core/local/LocalRuntime.tsx
 var LocalRuntime = class {
@@ -1748,7 +1763,7 @@ var LocalRuntime = class {
 
 // src/adapters/core/local/useLocalRuntime.tsx
 var useLocalRuntime = (adapter) => {
-  const [runtime] = (0, import_react29.useState)(() => new LocalRuntime(adapter));
+  const [runtime] = (0, import_react34.useState)(() => new LocalRuntime(adapter));
   runtime.adapter = adapter;
   return runtime;
 };

package/dist/index.mjs

@@ -129,18 +129,22 @@ var ThreadViewport = forwardRef2(({ autoScroll = true, onScroll, children, ...re
   const ref = useComposedRefs(forwardedRef, divRef);
   const { useViewport } = useAssistantContext();
   const firstRenderRef = useRef(true);
+  const isScrollingToBottomRef = useRef(false);
   const lastScrollTop = useRef(0);
   const scrollToBottom = () => {
     const div = messagesEndRef.current;
     if (!div || !autoScroll) return;
     const behavior = firstRenderRef.current ? "instant" : "auto";
     firstRenderRef.current = false;
-    useViewport.setState({ isAtBottom: true });
+    isScrollingToBottomRef.current = true;
     div.scrollIntoView({ behavior });
   };
   useOnResizeContent(divRef, () => {
-    if (!useViewport.getState().isAtBottom) return;
-    scrollToBottom();
+    if (!isScrollingToBottomRef.current && !useViewport.getState().isAtBottom) {
+      handleScroll();
+    } else {
+      scrollToBottom();
+    }
   });
   useOnScrollToBottom(() => {
     scrollToBottom();
@@ -152,6 +156,7 @@ var ThreadViewport = forwardRef2(({ autoScroll = true, onScroll, children, ...re
     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;
@@ -818,6 +823,7 @@ __export(branchPicker_exports, {
 });
 
 // src/actions/useGoToNextBranch.tsx
+import { useCallback as useCallback2 } from "react";
 var useGoToNextBranch = () => {
   const { useThread } = useAssistantContext();
   const { useMessage, useComposer } = useMessageContext();
@@ -825,11 +831,12 @@ var useGoToNextBranch = () => {
     [useMessage, useComposer],
     (m, c) => c.isEditing || m.branches.indexOf(m.message.id) + 1 >= m.branches.length
   );
-  if (disabled) return null;
-  return () => {
+  const callback = useCallback2(() => {
     const { message, branches } = useMessage.getState();
     useThread.getState().switchToBranch(branches[branches.indexOf(message.id) + 1]);
-  };
+  }, [useMessage, useThread]);
+  if (disabled) return null;
+  return callback;
 };
 
 // src/utils/createActionButton.tsx
@@ -861,6 +868,7 @@ var createActionButton = (useActionButton) => {
 var BranchPickerNext = createActionButton(useGoToNextBranch);
 
 // src/actions/useGoToPreviousBranch.tsx
+import { useCallback as useCallback3 } from "react";
 var useGoToPreviousBranch = () => {
   const { useThread } = useAssistantContext();
   const { useMessage, useComposer } = useMessageContext();
@@ -868,13 +876,12 @@ var useGoToPreviousBranch = () => {
     [useMessage, useComposer],
     (m, c) => c.isEditing || m.branches.indexOf(m.message.id) <= 0
   );
-  if (disabled) return null;
-  return () => {
+  const callback = useCallback3(() => {
     const { message, branches } = useMessage.getState();
-    useThread.getState().switchToBranch(
-      branches[branches.indexOf(message.id) - 1]
-    );
-  };
+    useThread.getState().switchToBranch(branches[branches.indexOf(message.id) - 1]);
+  }, [useMessage, useThread]);
+  if (disabled) return null;
+  return callback;
 };
 
 // src/primitives/branchPicker/BranchPickerPrevious.tsx
@@ -948,6 +955,7 @@ var ActionBarRoot = forwardRef13(({ hideWhenRunning, autohide, autohideFloat, ..
 });
 
 // src/actions/useCopyMessage.tsx
+import { useCallback as useCallback4 } from "react";
 var useCopyMessage = ({ copiedDuration = 3e3 }) => {
   const { useMessage, useComposer } = useMessageContext();
   const hasCopyableContent = useCombinedStore(
@@ -956,21 +964,23 @@ var useCopyMessage = ({ copiedDuration = 3e3 }) => {
       return c.isEditing || m.message.content.some((c2) => c2.type === "text");
     }
   );
-  if (!hasCopyableContent) return null;
-  return () => {
+  const callback = useCallback4(() => {
     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/primitives/actionBar/ActionBarCopy.tsx
 var ActionBarCopy = createActionButton(useCopyMessage);
 
 // src/actions/useReloadMessage.tsx
+import { useCallback as useCallback5 } from "react";
 var useReloadMessage = () => {
   const { useThread, useViewport } = useAssistantContext();
   const { useMessage } = useMessageContext();
@@ -978,29 +988,32 @@ var useReloadMessage = () => {
     [useThread, useMessage],
     (t, m) => t.isRunning || m.message.role !== "assistant"
   );
-  if (disabled) return null;
-  return () => {
+  const callback = useCallback5(() => {
     const { parentId } = useMessage.getState();
     useThread.getState().startRun(parentId);
     useViewport.getState().scrollToBottom();
-  };
+  }, [useMessage, useThread, useViewport]);
+  if (disabled) return null;
+  return callback;
 };
 
 // src/primitives/actionBar/ActionBarReload.tsx
 var ActionBarReload = createActionButton(useReloadMessage);
 
 // src/actions/useBeginMessageEdit.tsx
+import { useCallback as useCallback6 } from "react";
 var useBeginMessageEdit = () => {
   const { useMessage, useComposer } = useMessageContext();
   const disabled = useCombinedStore(
     [useMessage, useComposer],
     (m, c) => m.message.role !== "user" || c.isEditing
   );
-  if (disabled) return null;
-  return () => {
+  const callback = useCallback6(() => {
     const { edit } = useComposer.getState();
     edit();
-  };
+  }, [useComposer]);
+  if (disabled) return null;
+  return callback;
 };
 
 // src/primitives/actionBar/ActionBarEdit.tsx
@@ -1074,7 +1087,7 @@ var useDummyAIAssistantContext = () => {
 
 // src/adapters/vercel/useVercelAIThreadState.tsx
 import { useCallbackRef as useCallbackRef3 } from "@radix-ui/react-use-callback-ref";
-import { useCallback as useCallback2, useMemo as useMemo5, useRef as useRef4, useState as useState4 } from "react";
+import { useCallback as useCallback7, useMemo as useMemo5, useRef as useRef4, useState as useState4 } from "react";
 
 // src/adapters/idUtils.tsx
 import { customAlphabet } from "nanoid/non-secure";
@@ -1347,7 +1360,7 @@ var useVercelAIThreadState = (vercel) => {
     data.resetHead(assistantOptimisticIdRef.current ?? vm.at(-1)?.id ?? null);
     return data.getMessages();
   }, [converter, data, isRunning, vercel.messages]);
-  const getBranches2 = useCallback2(
+  const getBranches2 = useCallback7(
     (messageId) => {
       return data.getBranches(messageId);
     },
@@ -1431,7 +1444,7 @@ var VercelAIAssistantProvider = ({
 
 // src/adapters/vercel/VercelRSCAssistantProvider.tsx
 import {
-  useCallback as useCallback3,
+  useCallback as useCallback8,
   useMemo as useMemo7,
   useState as useState5
 } from "react";
@@ -1473,7 +1486,7 @@ var VercelRSCAssistantProvider = ({
 }) => {
   const context = useDummyAIAssistantContext();
   const [isRunning, setIsRunning] = useState5(false);
-  const withRunning = useCallback3((callback) => {
+  const withRunning = useCallback8((callback) => {
     setIsRunning(true);
     return callback.finally(() => setIsRunning(false));
   }, []);
@@ -1488,7 +1501,7 @@ var VercelRSCAssistantProvider = ({
   const messages = useMemo7(() => {
     return converter.convertMessages(convertCallback, vercelMessages);
   }, [converter, convertCallback, vercelMessages]);
-  const append = useCallback3(
+  const append = useCallback8(
     async (message) => {
       if (message.parentId !== (context.useThread.getState().messages.at(-1)?.id ?? null)) {
         if (!edit)
@@ -1502,7 +1515,7 @@ var VercelRSCAssistantProvider = ({
     },
     [context, withRunning, appendCallback, edit]
   );
-  const startRun = useCallback3(
+  const startRun = useCallback8(
     async (parentId) => {
       if (!reload)
         throw new Error(
@@ -1530,7 +1543,12 @@ var VercelRSCAssistantProvider = ({
 };
 
 // src/adapters/core/utils/useAssistantContext.tsx
-import { useEffect as useEffect4, useRef as useRef5, useState as useState6 } from "react";
+import {
+  useEffect as useEffect4,
+  useInsertionEffect,
+  useRef as useRef5,
+  useState as useState6
+} from "react";
 import { create as create6 } from "zustand";
 
 // src/adapters/core/utils/AssistantMessageRepository.tsx
@@ -1622,7 +1640,9 @@ var makeThreadStore = (runtimeRef) => {
 };
 var useAssistantContext2 = (runtime) => {
   const runtimeRef = useRef5(runtime);
-  runtimeRef.current = runtime;
+  useInsertionEffect(() => {
+    runtimeRef.current = runtime;
+  });
   const [{ context, onNewMessage, onRunningChange }] = useState6(() => {
     const { useThread, onNewMessage: onNewMessage2, onRunningChange: onRunningChange2 } = makeThreadStore(runtimeRef);
     const useViewport = makeViewportStore();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@assistant-ui/react",
-  "version": "0.0.18",
+  "version": "0.0.19",
   "license": "MIT",
   "exports": {
     ".": {