@assistant-ui/react 0.0.2 → 0.0.4

package/dist/index.d.mts

@@ -35,8 +35,13 @@ declare const ThreadViewport: react.ForwardRefExoticComponent<Pick<Omit<react.De
 type ThreadMessagesProps = {
     components: {
         Message: React.ComponentType;
+        UserMessage?: React.ComponentType;
+        EditingUserMessage?: React.ComponentType;
+        AssistantMessage?: React.ComponentType;
     } | {
+        Message?: React.ComponentType;
         UserMessage: React.ComponentType;
+        EditingUserMessage?: React.ComponentType;
         AssistantMessage: React.ComponentType;
     };
 };
@@ -90,7 +95,7 @@ type MessageIfFilters = {
     editing: boolean | undefined;
     hasBranches: boolean | undefined;
     copied: boolean | undefined;
-    unstable_hoveringOrLast: boolean | undefined;
+    lastOrHover: boolean | undefined;
 };
 type MessageIfProps = RequireAtLeastOne<MessageIfFilters> & {
     children: React.ReactNode;
@@ -138,7 +143,8 @@ declare const ActionBarRoot: react.ForwardRefExoticComponent<Pick<Omit<react.Det
 } & {
     asChild?: boolean;
 }, "key" | keyof react.HTMLAttributes<HTMLDivElement> | "asChild"> & {
-    hideWhenEditing?: boolean;
+    hideWhenBusy?: boolean;
+    hideWhenNotLastOrHover?: boolean;
 } & react.RefAttributes<HTMLDivElement>>;
 
 type ActionBarCopyProps = {
@@ -170,9 +176,7 @@ declare const EditBarRoot: react.ForwardRefExoticComponent<Pick<Omit<react.Detai
     ref?: ((instance: HTMLDivElement | null) => void) | react.RefObject<HTMLDivElement> | null | undefined;
 } & {
     asChild?: boolean;
-}, "key" | keyof react.HTMLAttributes<HTMLDivElement> | "asChild"> & {
-    hideWhenNotEditing?: boolean;
-} & react.RefAttributes<HTMLDivElement>>;
+}, "key" | keyof react.HTMLAttributes<HTMLDivElement> | "asChild"> & react.RefAttributes<HTMLDivElement>>;
 
 declare const EditBarSave: react.ForwardRefExoticComponent<Pick<Omit<react.DetailedHTMLProps<react.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
     ref?: ((instance: HTMLButtonElement | null) => void) | react.RefObject<HTMLButtonElement> | null | undefined;
@@ -221,7 +225,7 @@ declare const useMessageContext: <Selection>(consumerName: string, selector: (s:
 
 declare const useCopyMessage: ({ copiedDuration }: {
     copiedDuration?: number | undefined;
-}) => () => void;
+}) => (() => void) | null;
 
 declare const useReloadMessage: () => (() => Promise<void>) | null;
 

package/dist/index.d.ts

@@ -35,8 +35,13 @@ declare const ThreadViewport: react.ForwardRefExoticComponent<Pick<Omit<react.De
 type ThreadMessagesProps = {
     components: {
         Message: React.ComponentType;
+        UserMessage?: React.ComponentType;
+        EditingUserMessage?: React.ComponentType;
+        AssistantMessage?: React.ComponentType;
     } | {
+        Message?: React.ComponentType;
         UserMessage: React.ComponentType;
+        EditingUserMessage?: React.ComponentType;
         AssistantMessage: React.ComponentType;
     };
 };
@@ -90,7 +95,7 @@ type MessageIfFilters = {
     editing: boolean | undefined;
     hasBranches: boolean | undefined;
     copied: boolean | undefined;
-    unstable_hoveringOrLast: boolean | undefined;
+    lastOrHover: boolean | undefined;
 };
 type MessageIfProps = RequireAtLeastOne<MessageIfFilters> & {
     children: React.ReactNode;
@@ -138,7 +143,8 @@ declare const ActionBarRoot: react.ForwardRefExoticComponent<Pick<Omit<react.Det
 } & {
     asChild?: boolean;
 }, "key" | keyof react.HTMLAttributes<HTMLDivElement> | "asChild"> & {
-    hideWhenEditing?: boolean;
+    hideWhenBusy?: boolean;
+    hideWhenNotLastOrHover?: boolean;
 } & react.RefAttributes<HTMLDivElement>>;
 
 type ActionBarCopyProps = {
@@ -170,9 +176,7 @@ declare const EditBarRoot: react.ForwardRefExoticComponent<Pick<Omit<react.Detai
     ref?: ((instance: HTMLDivElement | null) => void) | react.RefObject<HTMLDivElement> | null | undefined;
 } & {
     asChild?: boolean;
-}, "key" | keyof react.HTMLAttributes<HTMLDivElement> | "asChild"> & {
-    hideWhenNotEditing?: boolean;
-} & react.RefAttributes<HTMLDivElement>>;
+}, "key" | keyof react.HTMLAttributes<HTMLDivElement> | "asChild"> & react.RefAttributes<HTMLDivElement>>;
 
 declare const EditBarSave: react.ForwardRefExoticComponent<Pick<Omit<react.DetailedHTMLProps<react.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
     ref?: ((instance: HTMLButtonElement | null) => void) | react.RefObject<HTMLButtonElement> | null | undefined;
@@ -221,7 +225,7 @@ declare const useMessageContext: <Selection>(consumerName: string, selector: (s:
 
 declare const useCopyMessage: ({ copiedDuration }: {
     copiedDuration?: number | undefined;
-}) => () => void;
+}) => (() => void) | null;
 
 declare const useReloadMessage: () => (() => Promise<void>) | null;
 

package/dist/index.js

@@ -186,7 +186,6 @@ var useOnResizeContent = (ref, callback) => {
       return;
     const resizeObserver = new ResizeObserver(() => {
       callbackRef.current();
-      console.log("resize observed");
     });
     const mutationObserver = new MutationObserver((mutations) => {
       for (const mutation of mutations) {
@@ -203,6 +202,7 @@ var useOnResizeContent = (ref, callback) => {
       }
       callbackRef.current();
     });
+    resizeObserver.observe(el);
     mutationObserver.observe(el, { childList: true });
     for (const child of el.children) {
       resizeObserver.observe(child);
@@ -365,6 +365,9 @@ var useChatWithBranches = (chat) => {
     [chat, getBranchState, switchToBranch, editAt, reloadAt]
   );
 };
+var hasUpcomingMessage = (thread) => {
+  return thread.isLoading && thread.messages[thread.messages.length - 1]?.role !== "assistant";
+};
 
 // src/primitives/message/index.ts
 var message_exports = {};
@@ -445,6 +448,10 @@ var MessageRoot = (0, import_react7.forwardRef)(
 );
 
 // src/primitives/message/MessageIf.tsx
+var isLast = (thread, message) => {
+  const hasUpcoming = hasUpcomingMessage(thread);
+  return hasUpcoming ? message.id === UPCOMING_MESSAGE_ID : thread.messages[thread.messages.length - 1]?.id === message.id;
+};
 var useMessageIf = (props) => {
   const thread = useThreadContext("Message.If", (s) => s.chat);
   return useMessageContext(
@@ -461,7 +468,7 @@ var useMessageIf = (props) => {
         return false;
       if (props.editing === false && isEditing)
         return false;
-      if (props.unstable_hoveringOrLast === true && !isHovering && thread.messages[thread.messages.length - 1]?.id !== message.id)
+      if (props.lastOrHover === true && !isHovering && !isLast(thread, message))
         return false;
       if (props.copied === true && !isCopied)
         return false;
@@ -514,23 +521,24 @@ var MessageEditableContent = (0, import_react8.forwardRef)(({ onChange, value, .
 
 // src/primitives/thread/ThreadMessages.tsx
 var getComponents = (components) => {
-  if ("Message" in components) {
-    return {
-      UserMessage: components.Message,
-      AssistantMessage: components.Message
-    };
-  }
-  return components;
+  return {
+    EditingUserMessage: components.EditingUserMessage ?? components.UserMessage ?? components.Message,
+    UserMessage: components.UserMessage ?? components.Message,
+    AssistantMessage: components.AssistantMessage ?? components.Message
+  };
 };
 var ThreadMessages = ({ components }) => {
   const chat = useThreadContext("Thread.Messages", (s) => s.chat);
   const messages = chat.messages;
-  const { UserMessage, AssistantMessage } = getComponents(components);
+  const { UserMessage, EditingUserMessage, AssistantMessage } = getComponents(components);
   if (messages.length === 0)
     return null;
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, messages.map((message) => {
-    return /* @__PURE__ */ React.createElement(MessageProvider, { key: message.id, message }, message.role === "assistant" ? /* @__PURE__ */ React.createElement(AssistantMessage, null) : /* @__PURE__ */ React.createElement(UserMessage, null));
-  }), chat.isLoading && chat.messages[chat.messages.length - 1]?.role !== "assistant" && /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, messages.map((message, idx) => {
+    return (
+      // biome-ignore lint/suspicious/noArrayIndexKey: fixes a11y issues with branch navigation
+      /* @__PURE__ */ React.createElement(MessageProvider, { key: idx, message }, /* @__PURE__ */ React.createElement(MessageIf, { user: true, editing: false }, /* @__PURE__ */ React.createElement(UserMessage, null)), /* @__PURE__ */ React.createElement(MessageIf, { user: true, editing: true }, /* @__PURE__ */ React.createElement(EditingUserMessage, null)), /* @__PURE__ */ React.createElement(MessageIf, { assistant: true }, /* @__PURE__ */ React.createElement(AssistantMessage, null)))
+    );
+  }), hasUpcomingMessage(chat) && /* @__PURE__ */ React.createElement(
     MessageProvider,
     {
       message: {
@@ -698,12 +706,19 @@ var useGoToNextBranch = () => {
     "BranchPicker.Next",
     (s) => s.chat.switchToBranch
   );
-  const [message, { branchId, branchCount }] = useMessageContext(
-    "BranchPicker.Next",
-    (s) => [s.message, s.branchState]
-  );
-  if (branchCount <= 1 || branchId + 1 >= branchCount)
+  const context = useMessageContext("BranchPicker.Next", (s) => {
+    const {
+      message: message2,
+      editState: { isEditing },
+      branchState: { branchId: branchId2, branchCount }
+    } = s;
+    if (isEditing || branchCount <= 1 || branchId2 + 1 >= branchCount)
+      return null;
+    return { message: message2, branchId: branchId2 };
+  });
+  if (!context)
     return null;
+  const { message, branchId } = context;
   return () => {
     switchToBranch(message, branchId + 1);
   };
@@ -718,12 +733,19 @@ var useGoToPreviousBranch = () => {
     "BranchPicker.Previous",
     (s) => s.chat.switchToBranch
   );
-  const [message, { branchId, branchCount }] = useMessageContext(
-    "BranchPicker.Previous",
-    (s) => [s.message, s.branchState]
-  );
-  if (branchCount <= 1 || branchId <= 0)
+  const context = useMessageContext("BranchPicker.Previous", (s) => {
+    const {
+      message: message2,
+      editState: { isEditing },
+      branchState: { branchId: branchId2, branchCount }
+    } = s;
+    if (isEditing || branchCount <= 1 || branchId2 <= 0)
+      return null;
+    return { message: message2, branchId: branchId2 };
+  });
+  if (!context)
     return null;
+  const { message, branchId } = context;
   return () => {
     switchToBranch(message, branchId - 1);
   };
@@ -769,18 +791,27 @@ __export(actionBar_exports, {
 // src/primitives/actionBar/ActionBarRoot.tsx
 var import_react_primitive8 = require("@radix-ui/react-primitive");
 var import_react14 = require("react");
-var ActionBarRoot = (0, import_react14.forwardRef)(({ hideWhenEditing = false, ...rest }, ref) => {
-  return /* @__PURE__ */ React.createElement(MessageIf, { editing: hideWhenEditing ? false : void 0 }, /* @__PURE__ */ React.createElement(import_react_primitive8.Primitive.div, { ...rest, ref }));
+var ActionBarRoot = (0, import_react14.forwardRef)(({ hideWhenBusy, hideWhenNotLastOrHover, ...rest }, ref) => {
+  return /* @__PURE__ */ React.createElement(ThreadIf, { busy: hideWhenBusy ? false : void 0 }, /* @__PURE__ */ React.createElement(MessageIf, { lastOrHover: hideWhenNotLastOrHover ? true : void 0 }, /* @__PURE__ */ React.createElement(import_react_primitive8.Primitive.div, { ...rest, ref })));
 });
 
 // src/actions/useCopyMessage.tsx
 var useCopyMessage = ({ copiedDuration = 3e3 }) => {
-  const [messageContent, setIsCopied] = useMessageContext(
-    "ActionBar.Copy",
-    (s) => [s.message.content, s.setIsCopied]
-  );
+  const context = useMessageContext("ActionBar.Copy", (s) => {
+    const {
+      editState: { isEditing },
+      message: { content: content2 },
+      setIsCopied: setIsCopied2
+    } = s;
+    if (isEditing)
+      return null;
+    return { content: content2, setIsCopied: setIsCopied2 };
+  });
+  if (!context)
+    return null;
+  const { content, setIsCopied } = context;
   return () => {
-    navigator.clipboard.writeText(messageContent);
+    navigator.clipboard.writeText(content);
     setIsCopied(true);
     setTimeout(() => setIsCopied(false), copiedDuration);
   };
@@ -795,8 +826,13 @@ var useReloadMessage = () => {
     s.chat.isLoading,
     s.chat.reloadAt
   ]);
-  const message = useMessageContext("ActionBar.Reload", (s) => s.message);
-  if (message.role !== "assistant" || isLoading)
+  const message = useMessageContext("ActionBar.Reload", (s) => {
+    const message2 = s.message;
+    if (message2.role !== "assistant" || isLoading)
+      return null;
+    return message2;
+  });
+  if (!message)
     return null;
   return () => reloadAt(message);
 };
@@ -806,14 +842,21 @@ var ActionBarReload = createActionButton(useReloadMessage);
 
 // src/actions/useBeginMessageEdit.tsx
 var useBeginMessageEdit = () => {
-  const [editState, messageContent, setEditState] = useMessageContext(
-    "ActionBar.Edit",
-    (s) => [s.editState, s.message.content, s.setEditState]
-  );
-  if (editState.isEditing)
+  const context = useMessageContext("ActionBar.Edit", (s) => {
+    const {
+      message: { content: content2 },
+      editState: { isEditing },
+      setEditState: setEditState2
+    } = s;
+    if (isEditing)
+      return null;
+    return { content: content2, setEditState: setEditState2 };
+  });
+  if (!context)
     return null;
+  const { content, setEditState } = context;
   return () => {
-    setEditState({ isEditing: true, value: messageContent });
+    setEditState({ isEditing: true, value: content });
   };
 };
 
@@ -832,28 +875,29 @@ __export(editBar_exports, {
 var import_react_primitive9 = require("@radix-ui/react-primitive");
 var import_react15 = require("react");
 var EditBarRoot = (0, import_react15.forwardRef)(
-  ({ hideWhenNotEditing, ...rest }, ref) => {
-    return /* @__PURE__ */ React.createElement(MessageIf, { editing: hideWhenNotEditing ? true : void 0 }, /* @__PURE__ */ React.createElement(import_react_primitive9.Primitive.div, { ...rest, ref }));
+  ({ ...rest }, ref) => {
+    return /* @__PURE__ */ React.createElement(import_react_primitive9.Primitive.div, { ...rest, ref });
   }
 );
 
 // src/actions/useSaveMessageEdit.tsx
 var useSaveMessageEdit = () => {
   const chat = useThreadContext("EditBar.Save", (s) => s.chat);
-  const [editState, message, setEditState] = useMessageContext(
-    "EditBar.Save",
-    (s) => [s.editState, s.message, s.setEditState]
-  );
-  if (!editState.isEditing)
+  const context = useMessageContext("EditBar.Save", (s) => {
+    const { message: message2, editState, setEditState: setEditState2 } = s;
+    if (!editState.isEditing)
+      return null;
+    return { message: message2, content: editState.value, setEditState: setEditState2 };
+  });
+  if (!context)
     return null;
+  const { message, content, setEditState } = context;
   return () => {
-    if (!editState.isEditing)
-      return;
     chat.editAt(message, {
       ...message,
       id: void 0,
       // remove id to create a new message
-      content: editState.value
+      content
     });
     setEditState({ isEditing: false });
   };
@@ -864,12 +908,18 @@ var EditBarSave = createActionButton(useSaveMessageEdit);
 
 // src/actions/useCancelMessageEdit.tsx
 var useCancelMessageEdit = () => {
-  const [isEditing, setEditState] = useMessageContext("EditBar.Cancel", (s) => [
-    s.editState.isEditing,
-    s.setEditState
-  ]);
-  if (!isEditing)
+  const context = useMessageContext("EditBar.Cancel", (s) => {
+    const {
+      editState: { isEditing },
+      setEditState: setEditState2
+    } = s;
+    if (!isEditing)
+      return null;
+    return { setEditState: setEditState2 };
+  });
+  if (!context)
     return null;
+  const { setEditState } = context;
   return () => {
     setEditState({ isEditing: false });
   };

package/dist/index.mjs

@@ -151,7 +151,6 @@ var useOnResizeContent = (ref, callback) => {
       return;
     const resizeObserver = new ResizeObserver(() => {
       callbackRef.current();
-      console.log("resize observed");
     });
     const mutationObserver = new MutationObserver((mutations) => {
       for (const mutation of mutations) {
@@ -168,6 +167,7 @@ var useOnResizeContent = (ref, callback) => {
       }
       callbackRef.current();
     });
+    resizeObserver.observe(el);
     mutationObserver.observe(el, { childList: true });
     for (const child of el.children) {
       resizeObserver.observe(child);
@@ -330,6 +330,9 @@ var useChatWithBranches = (chat) => {
     [chat, getBranchState, switchToBranch, editAt, reloadAt]
   );
 };
+var hasUpcomingMessage = (thread) => {
+  return thread.isLoading && thread.messages[thread.messages.length - 1]?.role !== "assistant";
+};
 
 // src/primitives/message/index.ts
 var message_exports = {};
@@ -412,6 +415,10 @@ var MessageRoot = forwardRef3(
 );
 
 // src/primitives/message/MessageIf.tsx
+var isLast = (thread, message) => {
+  const hasUpcoming = hasUpcomingMessage(thread);
+  return hasUpcoming ? message.id === UPCOMING_MESSAGE_ID : thread.messages[thread.messages.length - 1]?.id === message.id;
+};
 var useMessageIf = (props) => {
   const thread = useThreadContext("Message.If", (s) => s.chat);
   return useMessageContext(
@@ -428,7 +435,7 @@ var useMessageIf = (props) => {
         return false;
       if (props.editing === false && isEditing)
         return false;
-      if (props.unstable_hoveringOrLast === true && !isHovering && thread.messages[thread.messages.length - 1]?.id !== message.id)
+      if (props.lastOrHover === true && !isHovering && !isLast(thread, message))
         return false;
       if (props.copied === true && !isCopied)
         return false;
@@ -481,23 +488,24 @@ var MessageEditableContent = forwardRef4(({ onChange, value, ...rest }, forwarde
 
 // src/primitives/thread/ThreadMessages.tsx
 var getComponents = (components) => {
-  if ("Message" in components) {
-    return {
-      UserMessage: components.Message,
-      AssistantMessage: components.Message
-    };
-  }
-  return components;
+  return {
+    EditingUserMessage: components.EditingUserMessage ?? components.UserMessage ?? components.Message,
+    UserMessage: components.UserMessage ?? components.Message,
+    AssistantMessage: components.AssistantMessage ?? components.Message
+  };
 };
 var ThreadMessages = ({ components }) => {
   const chat = useThreadContext("Thread.Messages", (s) => s.chat);
   const messages = chat.messages;
-  const { UserMessage, AssistantMessage } = getComponents(components);
+  const { UserMessage, EditingUserMessage, AssistantMessage } = getComponents(components);
   if (messages.length === 0)
     return null;
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, messages.map((message) => {
-    return /* @__PURE__ */ React.createElement(MessageProvider, { key: message.id, message }, message.role === "assistant" ? /* @__PURE__ */ React.createElement(AssistantMessage, null) : /* @__PURE__ */ React.createElement(UserMessage, null));
-  }), chat.isLoading && chat.messages[chat.messages.length - 1]?.role !== "assistant" && /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, messages.map((message, idx) => {
+    return (
+      // biome-ignore lint/suspicious/noArrayIndexKey: fixes a11y issues with branch navigation
+      /* @__PURE__ */ React.createElement(MessageProvider, { key: idx, message }, /* @__PURE__ */ React.createElement(MessageIf, { user: true, editing: false }, /* @__PURE__ */ React.createElement(UserMessage, null)), /* @__PURE__ */ React.createElement(MessageIf, { user: true, editing: true }, /* @__PURE__ */ React.createElement(EditingUserMessage, null)), /* @__PURE__ */ React.createElement(MessageIf, { assistant: true }, /* @__PURE__ */ React.createElement(AssistantMessage, null)))
+    );
+  }), hasUpcomingMessage(chat) && /* @__PURE__ */ React.createElement(
     MessageProvider,
     {
       message: {
@@ -671,12 +679,19 @@ var useGoToNextBranch = () => {
     "BranchPicker.Next",
     (s) => s.chat.switchToBranch
   );
-  const [message, { branchId, branchCount }] = useMessageContext(
-    "BranchPicker.Next",
-    (s) => [s.message, s.branchState]
-  );
-  if (branchCount <= 1 || branchId + 1 >= branchCount)
+  const context = useMessageContext("BranchPicker.Next", (s) => {
+    const {
+      message: message2,
+      editState: { isEditing },
+      branchState: { branchId: branchId2, branchCount }
+    } = s;
+    if (isEditing || branchCount <= 1 || branchId2 + 1 >= branchCount)
+      return null;
+    return { message: message2, branchId: branchId2 };
+  });
+  if (!context)
     return null;
+  const { message, branchId } = context;
   return () => {
     switchToBranch(message, branchId + 1);
   };
@@ -691,12 +706,19 @@ var useGoToPreviousBranch = () => {
     "BranchPicker.Previous",
     (s) => s.chat.switchToBranch
   );
-  const [message, { branchId, branchCount }] = useMessageContext(
-    "BranchPicker.Previous",
-    (s) => [s.message, s.branchState]
-  );
-  if (branchCount <= 1 || branchId <= 0)
+  const context = useMessageContext("BranchPicker.Previous", (s) => {
+    const {
+      message: message2,
+      editState: { isEditing },
+      branchState: { branchId: branchId2, branchCount }
+    } = s;
+    if (isEditing || branchCount <= 1 || branchId2 <= 0)
+      return null;
+    return { message: message2, branchId: branchId2 };
+  });
+  if (!context)
     return null;
+  const { message, branchId } = context;
   return () => {
     switchToBranch(message, branchId - 1);
   };
@@ -746,18 +768,27 @@ import {
   Primitive as Primitive8
 } from "@radix-ui/react-primitive";
 import { forwardRef as forwardRef10 } from "react";
-var ActionBarRoot = forwardRef10(({ hideWhenEditing = false, ...rest }, ref) => {
-  return /* @__PURE__ */ React.createElement(MessageIf, { editing: hideWhenEditing ? false : void 0 }, /* @__PURE__ */ React.createElement(Primitive8.div, { ...rest, ref }));
+var ActionBarRoot = forwardRef10(({ hideWhenBusy, hideWhenNotLastOrHover, ...rest }, ref) => {
+  return /* @__PURE__ */ React.createElement(ThreadIf, { busy: hideWhenBusy ? false : void 0 }, /* @__PURE__ */ React.createElement(MessageIf, { lastOrHover: hideWhenNotLastOrHover ? true : void 0 }, /* @__PURE__ */ React.createElement(Primitive8.div, { ...rest, ref })));
 });
 
 // src/actions/useCopyMessage.tsx
 var useCopyMessage = ({ copiedDuration = 3e3 }) => {
-  const [messageContent, setIsCopied] = useMessageContext(
-    "ActionBar.Copy",
-    (s) => [s.message.content, s.setIsCopied]
-  );
+  const context = useMessageContext("ActionBar.Copy", (s) => {
+    const {
+      editState: { isEditing },
+      message: { content: content2 },
+      setIsCopied: setIsCopied2
+    } = s;
+    if (isEditing)
+      return null;
+    return { content: content2, setIsCopied: setIsCopied2 };
+  });
+  if (!context)
+    return null;
+  const { content, setIsCopied } = context;
   return () => {
-    navigator.clipboard.writeText(messageContent);
+    navigator.clipboard.writeText(content);
     setIsCopied(true);
     setTimeout(() => setIsCopied(false), copiedDuration);
   };
@@ -772,8 +803,13 @@ var useReloadMessage = () => {
     s.chat.isLoading,
     s.chat.reloadAt
   ]);
-  const message = useMessageContext("ActionBar.Reload", (s) => s.message);
-  if (message.role !== "assistant" || isLoading)
+  const message = useMessageContext("ActionBar.Reload", (s) => {
+    const message2 = s.message;
+    if (message2.role !== "assistant" || isLoading)
+      return null;
+    return message2;
+  });
+  if (!message)
     return null;
   return () => reloadAt(message);
 };
@@ -783,14 +819,21 @@ var ActionBarReload = createActionButton(useReloadMessage);
 
 // src/actions/useBeginMessageEdit.tsx
 var useBeginMessageEdit = () => {
-  const [editState, messageContent, setEditState] = useMessageContext(
-    "ActionBar.Edit",
-    (s) => [s.editState, s.message.content, s.setEditState]
-  );
-  if (editState.isEditing)
+  const context = useMessageContext("ActionBar.Edit", (s) => {
+    const {
+      message: { content: content2 },
+      editState: { isEditing },
+      setEditState: setEditState2
+    } = s;
+    if (isEditing)
+      return null;
+    return { content: content2, setEditState: setEditState2 };
+  });
+  if (!context)
     return null;
+  const { content, setEditState } = context;
   return () => {
-    setEditState({ isEditing: true, value: messageContent });
+    setEditState({ isEditing: true, value: content });
   };
 };
 
@@ -811,28 +854,29 @@ import {
 } from "@radix-ui/react-primitive";
 import { forwardRef as forwardRef11 } from "react";
 var EditBarRoot = forwardRef11(
-  ({ hideWhenNotEditing, ...rest }, ref) => {
-    return /* @__PURE__ */ React.createElement(MessageIf, { editing: hideWhenNotEditing ? true : void 0 }, /* @__PURE__ */ React.createElement(Primitive9.div, { ...rest, ref }));
+  ({ ...rest }, ref) => {
+    return /* @__PURE__ */ React.createElement(Primitive9.div, { ...rest, ref });
   }
 );
 
 // src/actions/useSaveMessageEdit.tsx
 var useSaveMessageEdit = () => {
   const chat = useThreadContext("EditBar.Save", (s) => s.chat);
-  const [editState, message, setEditState] = useMessageContext(
-    "EditBar.Save",
-    (s) => [s.editState, s.message, s.setEditState]
-  );
-  if (!editState.isEditing)
+  const context = useMessageContext("EditBar.Save", (s) => {
+    const { message: message2, editState, setEditState: setEditState2 } = s;
+    if (!editState.isEditing)
+      return null;
+    return { message: message2, content: editState.value, setEditState: setEditState2 };
+  });
+  if (!context)
     return null;
+  const { message, content, setEditState } = context;
   return () => {
-    if (!editState.isEditing)
-      return;
     chat.editAt(message, {
       ...message,
       id: void 0,
       // remove id to create a new message
-      content: editState.value
+      content
     });
     setEditState({ isEditing: false });
   };
@@ -843,12 +887,18 @@ var EditBarSave = createActionButton(useSaveMessageEdit);
 
 // src/actions/useCancelMessageEdit.tsx
 var useCancelMessageEdit = () => {
-  const [isEditing, setEditState] = useMessageContext("EditBar.Cancel", (s) => [
-    s.editState.isEditing,
-    s.setEditState
-  ]);
-  if (!isEditing)
+  const context = useMessageContext("EditBar.Cancel", (s) => {
+    const {
+      editState: { isEditing },
+      setEditState: setEditState2
+    } = s;
+    if (!isEditing)
+      return null;
+    return { setEditState: setEditState2 };
+  });
+  if (!context)
     return null;
+  const { setEditState } = context;
   return () => {
     setEditState({ isEditing: false });
   };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@assistant-ui/react",
-  "version": "0.0.2",
+  "version": "0.0.4",
   "license": "MIT",
   "exports": {
     ".": {
@@ -31,7 +31,7 @@
     "@radix-ui/react-compose-refs": "^1.0.1",
     "@radix-ui/react-primitive": "^1.0.3",
     "@radix-ui/react-slot": "^1.0.2",
-    "ai": "^3.1.1",
+    "ai": "^3.1.8",
     "react-textarea-autosize": "^8.5.3",
     "use-sync-external-store": "^1.2.2"
   },