@assistant-ui/react 0.1.10 → 0.1.11

package/dist/index.js

@@ -300,12 +300,15 @@ var useComposerIf = (props) => {
 // src/primitive-hooks/composer/useComposerSend.tsx
 var import_react14 = require("react");
 var useComposerSend = () => {
+  const { useViewport } = useThreadContext();
   const { useComposer } = useComposerContext();
   const disabled = useComposer((c) => !c.isEditing || c.value.length === 0);
   const callback = (0, import_react14.useCallback)(() => {
-    const { send } = useComposer.getState();
-    send();
-  }, [useComposer]);
+    const composerState = useComposer.getState();
+    if (!composerState.isEditing) return;
+    composerState.send();
+    useViewport.getState().scrollToBottom();
+  }, [useComposer, useViewport]);
   if (disabled) return null;
   return callback;
 };
@@ -450,137 +453,169 @@ var ThreadRoot = (0, import_react17.forwardRef)(
 );
 ThreadRoot.displayName = "ThreadRoot";
 
+// src/primitives/thread/ThreadEmpty.tsx
+var ThreadEmpty = ({ children }) => {
+  const empty = useThreadEmpty();
+  return empty ? children : null;
+};
+
 // src/primitives/thread/ThreadIf.tsx
 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_compose_refs2 = require("@radix-ui/react-compose-refs");
 var import_react_primitive2 = require("@radix-ui/react-primitive");
-var import_react20 = require("react");
+var import_react22 = require("react");
+
+// src/primitive-hooks/thread/useThreadViewportAutoScroll.tsx
+var import_react_compose_refs = require("@radix-ui/react-compose-refs");
+var import_react21 = require("react");
 
 // src/utils/hooks/useOnResizeContent.tsx
 var import_react_use_callback_ref = require("@radix-ui/react-use-callback-ref");
+var import_react19 = require("react");
+
+// src/utils/hooks/useManagedRef.ts
 var import_react18 = require("react");
-var useOnResizeContent = (ref, callback) => {
+var useManagedRef = (callback) => {
+  const cleanupRef = (0, import_react18.useRef)();
+  const ref = (0, import_react18.useCallback)(
+    (el) => {
+      if (cleanupRef.current) {
+        cleanupRef.current();
+      }
+      if (el) {
+        cleanupRef.current = callback(el);
+      }
+    },
+    [callback]
+  );
+  return ref;
+};
+
+// src/utils/hooks/useOnResizeContent.tsx
+var useOnResizeContent = (callback) => {
   const callbackRef = (0, import_react_use_callback_ref.useCallbackRef)(callback);
-  (0, import_react18.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);
+  const refCallback = (0, import_react19.useCallback)(
+    (el) => {
+      const resizeObserver = new ResizeObserver(() => {
+        callbackRef();
+      });
+      const mutationObserver = new MutationObserver((mutations) => {
+        for (const mutation of mutations) {
+          for (const node of mutation.addedNodes) {
+            if (node instanceof Element) {
+              resizeObserver.observe(node);
+            }
           }
-        }
-        for (const node of mutation.removedNodes) {
-          if (node instanceof Element) {
-            resizeObserver.unobserve(node);
+          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);
       }
-      callbackRef();
-    });
-    resizeObserver.observe(el);
-    mutationObserver.observe(el, { childList: true });
-    for (const child of el.children) {
-      resizeObserver.observe(child);
-    }
-    return () => {
-      resizeObserver.disconnect();
-      mutationObserver.disconnect();
-    };
-  }, [ref, callbackRef]);
+      return () => {
+        resizeObserver.disconnect();
+        mutationObserver.disconnect();
+      };
+    },
+    [callbackRef]
+  );
+  return useManagedRef(refCallback);
 };
 
 // src/utils/hooks/useOnScrollToBottom.tsx
 var import_react_use_callback_ref2 = require("@radix-ui/react-use-callback-ref");
-var import_react19 = require("react");
+var import_react20 = require("react");
 var useOnScrollToBottom = (callback) => {
   const callbackRef = (0, import_react_use_callback_ref2.useCallbackRef)(callback);
   const { useViewport } = useThreadContext();
-  (0, import_react19.useEffect)(() => {
+  (0, import_react20.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_react20.forwardRef)(({ autoScroll = true, onScroll, children, ...rest }, forwardedRef) => {
-  const messagesEndRef = (0, import_react20.useRef)(null);
-  const divRef = (0, import_react20.useRef)(null);
-  const ref = (0, import_react_compose_refs.useComposedRefs)(forwardedRef, divRef);
+// src/primitive-hooks/thread/useThreadViewportAutoScroll.tsx
+var useThreadViewportAutoScroll = ({
+  autoScroll = true
+}) => {
+  const divRef = (0, import_react21.useRef)(null);
   const { useViewport } = useThreadContext();
-  const firstRenderRef = (0, import_react20.useRef)(true);
-  const isScrollingToBottomRef = (0, import_react20.useRef)(false);
-  const lastScrollTop = (0, import_react20.useRef)(0);
+  const firstRenderRef = (0, import_react21.useRef)(true);
+  const lastScrollTop = (0, import_react21.useRef)(0);
+  const isScrollingToBottomRef = (0, import_react21.useRef)(false);
   const scrollToBottom = () => {
-    const div = messagesEndRef.current;
+    const div = divRef.current;
     if (!div || !autoScroll) return;
     const behavior = firstRenderRef.current ? "instant" : "auto";
     firstRenderRef.current = false;
     isScrollingToBottomRef.current = true;
-    div.scrollIntoView({ behavior });
+    div.scrollTo({ top: div.scrollHeight, 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
-      });
+    } else {
+      isScrollingToBottomRef.current = newIsAtBottom;
+      if (newIsAtBottom !== isAtBottom) {
+        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 })
-      ]
+  const resizeRef = useOnResizeContent(() => {
+    if (!isScrollingToBottomRef.current && !useViewport.getState().isAtBottom && !firstRenderRef.current) {
+      handleScroll();
+    } else {
+      scrollToBottom();
     }
-  );
+  });
+  const scrollRef = useManagedRef((el) => {
+    el.addEventListener("scroll", handleScroll);
+    return () => {
+      el.removeEventListener("scroll", handleScroll);
+    };
+  });
+  const autoScrollRef = (0, import_react_compose_refs.useComposedRefs)(resizeRef, scrollRef, divRef);
+  useOnScrollToBottom(() => {
+    scrollToBottom();
+  });
+  return autoScrollRef;
+};
+
+// src/primitives/thread/ThreadViewport.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var ThreadViewport = (0, import_react22.forwardRef)(({ autoScroll, onScroll, children, ...rest }, forwardedRef) => {
+  const autoScrollRef = useThreadViewportAutoScroll({
+    autoScroll
+  });
+  const ref = (0, import_react_compose_refs2.useComposedRefs)(forwardedRef, autoScrollRef);
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_primitive2.Primitive.div, { ...rest, ref, children });
 });
 ThreadViewport.displayName = "ThreadViewport";
 
 // src/primitives/thread/ThreadMessages.tsx
-var import_react22 = require("react");
+var import_react24 = require("react");
 
 // src/context/providers/MessageProvider.tsx
-var import_react21 = require("react");
+var import_react23 = require("react");
 var import_zustand3 = require("zustand");
 
 // src/context/stores/EditComposer.ts
@@ -635,7 +670,7 @@ var makeMessageUtilsStore = () => (0, import_zustand2.create)((set) => ({
 }));
 
 // src/context/providers/MessageProvider.tsx
-var import_jsx_runtime4 = require("react/jsx-runtime");
+var import_jsx_runtime3 = require("react/jsx-runtime");
 var getIsLast = (thread, message) => {
   return thread.messages[thread.messages.length - 1]?.id === message.id;
 };
@@ -657,7 +692,7 @@ var syncMessage = (thread, getBranches, useMessage, messageIndex) => {
 };
 var useMessageContext2 = (messageIndex) => {
   const { useThread, useThreadActions } = useThreadContext();
-  const [context] = (0, import_react21.useState)(() => {
+  const [context] = (0, import_react23.useState)(() => {
     const useMessage = (0, import_zustand3.create)(() => ({}));
     const useMessageUtils = makeMessageUtilsStore();
     const useEditComposer = makeEditComposerStore({
@@ -681,6 +716,7 @@ var useMessageContext2 = (messageIndex) => {
         );
         useThreadActions.getState().append({
           parentId,
+          role: "user",
           content: [{ type: "text", text }, ...nonTextParts]
         });
       }
@@ -693,7 +729,7 @@ var useMessageContext2 = (messageIndex) => {
     );
     return { useMessage, useMessageUtils, useEditComposer };
   });
-  (0, import_react21.useEffect)(() => {
+  (0, import_react23.useEffect)(() => {
     return useThread.subscribe((thread) => {
       syncMessage(
         thread,
@@ -710,7 +746,7 @@ var MessageProvider = ({
   children
 }) => {
   const context = useMessageContext2(messageIndex);
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(MessageContext.Provider, { value: context, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(MessageContext.Provider, { value: context, children });
 };
 
 // src/primitives/composer/ComposerIf.tsx
@@ -726,7 +762,7 @@ var MessageIf = ({ children, ...query }) => {
 };
 
 // src/primitives/thread/ThreadMessages.tsx
-var import_jsx_runtime5 = require("react/jsx-runtime");
+var import_jsx_runtime4 = require("react/jsx-runtime");
 var getComponents = (components) => {
   return {
     EditComposer: components.EditComposer ?? components.UserMessage ?? components.Message,
@@ -739,15 +775,15 @@ var ThreadMessageImpl = ({
   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, {}) })
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(MessageProvider, { messageIndex, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(MessageIf, { user: true, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ComposerIf, { editing: false, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(UserMessage, {}) }),
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ComposerIf, { editing: true, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(EditComposer, {}) })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(MessageIf, { assistant: true, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(AssistantMessage, {}) })
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(MessageIf, { assistant: true, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(AssistantMessage, {}) })
   ] });
 };
-var ThreadMessage = (0, import_react22.memo)(
+var ThreadMessage = (0, import_react24.memo)(
   ThreadMessageImpl,
   (prev, next) => prev.messageIndex === next.messageIndex && prev.components.UserMessage === next.components.UserMessage && prev.components.EditComposer === next.components.EditComposer && prev.components.AssistantMessage === next.components.AssistantMessage
 );
@@ -757,7 +793,7 @@ var ThreadMessages = ({ components }) => {
   if (messagesLength === 0) return null;
   return new Array(messagesLength).fill(null).map((_, idx) => {
     const messageIndex = idx;
-    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
       ThreadMessage,
       {
         messageIndex,
@@ -769,21 +805,21 @@ var ThreadMessages = ({ components }) => {
 };
 
 // src/utils/createActionButton.tsx
-var import_primitive2 = require("@radix-ui/primitive");
+var import_primitive = require("@radix-ui/primitive");
 var import_react_primitive3 = require("@radix-ui/react-primitive");
-var import_react23 = require("react");
-var import_jsx_runtime6 = require("react/jsx-runtime");
+var import_react25 = require("react");
+var import_jsx_runtime5 = require("react/jsx-runtime");
 var createActionButton = (displayName, useActionButton) => {
-  const ActionButton = (0, import_react23.forwardRef)((props, forwardedRef) => {
+  const ActionButton = (0, import_react25.forwardRef)((props, forwardedRef) => {
     const callback = useActionButton(props);
-    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
       import_react_primitive3.Primitive.button,
       {
         type: "button",
         disabled: !callback,
         ...props,
         ref: forwardedRef,
-        onClick: (0, import_primitive2.composeEventHandlers)(props.onClick, () => {
+        onClick: (0, import_primitive.composeEventHandlers)(props.onClick, () => {
           callback?.();
         })
       }
@@ -816,30 +852,24 @@ __export(composer_exports, {
 });
 
 // src/primitives/composer/ComposerRoot.tsx
-var import_primitive3 = require("@radix-ui/primitive");
-var import_react_compose_refs2 = require("@radix-ui/react-compose-refs");
+var import_primitive2 = require("@radix-ui/primitive");
 var import_react_primitive4 = require("@radix-ui/react-primitive");
-var import_react24 = require("react");
-var import_jsx_runtime7 = require("react/jsx-runtime");
-var ComposerRoot = (0, import_react24.forwardRef)(
+var import_react26 = require("react");
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var ComposerRoot = (0, import_react26.forwardRef)(
   ({ onSubmit, ...rest }, forwardedRef) => {
-    const { useViewport } = useThreadContext();
-    const { useComposer } = useComposerContext();
-    const formRef = (0, import_react24.useRef)(null);
-    const ref = (0, import_react_compose_refs2.useComposedRefs)(forwardedRef, formRef);
+    const send = useComposerSend();
     const handleSubmit = (e) => {
-      const composerState = useComposer.getState();
-      if (!composerState.isEditing) return;
+      if (!send) return;
       e.preventDefault();
-      composerState.send();
-      useViewport.getState().scrollToBottom();
+      send();
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
       import_react_primitive4.Primitive.form,
       {
         ...rest,
-        ref,
-        onSubmit: (0, import_primitive3.composeEventHandlers)(onSubmit, handleSubmit)
+        ref: forwardedRef,
+        onSubmit: (0, import_primitive2.composeEventHandlers)(onSubmit, handleSubmit)
       }
     );
   }
@@ -847,13 +877,14 @@ var ComposerRoot = (0, import_react24.forwardRef)(
 ComposerRoot.displayName = "ComposerRoot";
 
 // src/primitives/composer/ComposerInput.tsx
-var import_primitive4 = require("@radix-ui/primitive");
+var import_primitive3 = 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_react25 = require("react");
+var import_react27 = require("react");
 var import_react_textarea_autosize = __toESM(require("react-textarea-autosize"));
-var import_jsx_runtime8 = require("react/jsx-runtime");
-var ComposerInput = (0, import_react25.forwardRef)(
+var import_react_use_escape_keydown = require("@radix-ui/react-use-escape-keydown");
+var import_jsx_runtime7 = require("react/jsx-runtime");
+var ComposerInput = (0, import_react27.forwardRef)(
   ({ autoFocus = false, asChild, disabled, onChange, onKeyDown, ...rest }, forwardedRef) => {
     const { useThread } = useThreadContext();
     const { useComposer, type } = useComposerContext();
@@ -862,16 +893,17 @@ var ComposerInput = (0, import_react25.forwardRef)(
       return c.value;
     });
     const Component = asChild ? import_react_slot.Slot : import_react_textarea_autosize.default;
-    const textareaRef = (0, import_react25.useRef)(null);
+    const textareaRef = (0, import_react27.useRef)(null);
     const ref = (0, import_react_compose_refs3.useComposedRefs)(forwardedRef, textareaRef);
+    (0, import_react_use_escape_keydown.useEscapeKeydown)((e) => {
+      const composer = useComposer.getState();
+      if (composer.cancel()) {
+        e.preventDefault();
+      }
+    });
     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) {
+      if (e.key === "Enter" && e.shiftKey === false) {
         const isRunning = useThread.getState().isRunning;
         if (!isRunning) {
           e.preventDefault();
@@ -880,7 +912,7 @@ var ComposerInput = (0, import_react25.forwardRef)(
       }
     };
     const autoFocusEnabled = autoFocus && !disabled;
-    const focus = (0, import_react25.useCallback)(() => {
+    const focus = (0, import_react27.useCallback)(() => {
       const textarea = textareaRef.current;
       if (!textarea || !autoFocusEnabled) return;
       textarea.focus();
@@ -889,13 +921,13 @@ var ComposerInput = (0, import_react25.forwardRef)(
         textareaRef.current.value.length
       );
     }, [autoFocusEnabled]);
-    (0, import_react25.useEffect)(() => focus(), [focus]);
+    (0, import_react27.useEffect)(() => focus(), [focus]);
     useOnScrollToBottom(() => {
       if (type === "new") {
         focus();
       }
     });
-    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
       Component,
       {
         value,
@@ -903,12 +935,12 @@ var ComposerInput = (0, import_react25.forwardRef)(
         ref,
         autoFocus,
         disabled,
-        onChange: (0, import_primitive4.composeEventHandlers)(onChange, (e) => {
+        onChange: (0, import_primitive3.composeEventHandlers)(onChange, (e) => {
           const composerState = useComposer.getState();
           if (!composerState.isEditing) return;
           return composerState.setValue(e.target.value);
         }),
-        onKeyDown: (0, import_primitive4.composeEventHandlers)(onKeyDown, handleKeyPress)
+        onKeyDown: (0, import_primitive3.composeEventHandlers)(onKeyDown, handleKeyPress)
       }
     );
   }
@@ -916,7 +948,25 @@ var ComposerInput = (0, import_react25.forwardRef)(
 ComposerInput.displayName = "ComposerInput";
 
 // src/primitives/composer/ComposerSend.tsx
-var ComposerSend = createActionButton("ComposerSend", useComposerSend);
+var import_react28 = require("react");
+var import_react_primitive5 = require("@radix-ui/react-primitive");
+var import_jsx_runtime8 = require("react/jsx-runtime");
+var ComposerSend = (0, import_react28.forwardRef)(
+  ({ disabled, ...rest }, ref) => {
+    const { useComposer } = useComposerContext();
+    const hasValue = useComposer((c) => c.isEditing && c.value.length > 0);
+    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+      import_react_primitive5.Primitive.button,
+      {
+        type: "submit",
+        ...rest,
+        ref,
+        disabled: disabled || !hasValue
+      }
+    );
+  }
+);
+ComposerSend.displayName = "ComposerSend";
 
 // src/primitives/composer/ComposerCancel.tsx
 var ComposerCancel = createActionButton(
@@ -934,11 +984,11 @@ __export(message_exports, {
 });
 
 // src/primitives/message/MessageRoot.tsx
-var import_primitive5 = require("@radix-ui/primitive");
-var import_react_primitive5 = require("@radix-ui/react-primitive");
-var import_react26 = require("react");
+var import_primitive4 = require("@radix-ui/primitive");
+var import_react_primitive6 = require("@radix-ui/react-primitive");
+var import_react29 = require("react");
 var import_jsx_runtime9 = require("react/jsx-runtime");
-var MessageRoot = (0, import_react26.forwardRef)(
+var MessageRoot = (0, import_react29.forwardRef)(
   ({ onMouseEnter, onMouseLeave, ...rest }, ref) => {
     const { useMessageUtils } = useMessageContext();
     const setIsHovering = useMessageUtils((s) => s.setIsHovering);
@@ -949,12 +999,12 @@ var MessageRoot = (0, import_react26.forwardRef)(
       setIsHovering(false);
     };
     return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-      import_react_primitive5.Primitive.div,
+      import_react_primitive6.Primitive.div,
       {
         ...rest,
         ref,
-        onMouseEnter: (0, import_primitive5.composeEventHandlers)(onMouseEnter, handleMouseEnter),
-        onMouseLeave: (0, import_primitive5.composeEventHandlers)(onMouseLeave, handleMouseLeave)
+        onMouseEnter: (0, import_primitive4.composeEventHandlers)(onMouseEnter, handleMouseEnter),
+        onMouseLeave: (0, import_primitive4.composeEventHandlers)(onMouseLeave, handleMouseLeave)
       }
     );
   }
@@ -962,10 +1012,10 @@ var MessageRoot = (0, import_react26.forwardRef)(
 MessageRoot.displayName = "MessageRoot";
 
 // src/primitives/message/MessageContent.tsx
-var import_react29 = require("react");
+var import_react32 = require("react");
 
 // src/context/providers/ContentPartProvider.tsx
-var import_react27 = require("react");
+var import_react30 = require("react");
 var import_zustand4 = require("zustand");
 var import_jsx_runtime10 = require("react/jsx-runtime");
 var syncContentPart = ({ message }, useContentPart, partIndex) => {
@@ -984,14 +1034,14 @@ var syncContentPart = ({ message }, useContentPart, partIndex) => {
 };
 var useContentPartContext2 = (partIndex) => {
   const { useMessage } = useMessageContext();
-  const [context] = (0, import_react27.useState)(() => {
+  const [context] = (0, import_react30.useState)(() => {
     const useContentPart = (0, import_zustand4.create)(
       () => ({})
     );
     syncContentPart(useMessage.getState(), useContentPart, partIndex);
     return { useContentPart };
   });
-  (0, import_react27.useEffect)(() => {
+  (0, import_react30.useEffect)(() => {
     syncContentPart(useMessage.getState(), context.useContentPart, partIndex);
     return useMessage.subscribe((message) => {
       syncContentPart(message, context.useContentPart, partIndex);
@@ -1020,12 +1070,12 @@ var ContentPartInProgressIndicator = () => {
 };
 
 // src/primitives/contentPart/ContentPartText.tsx
-var import_react_primitive6 = require("@radix-ui/react-primitive");
-var import_react28 = require("react");
+var import_react_primitive7 = require("@radix-ui/react-primitive");
+var import_react31 = require("react");
 var import_jsx_runtime11 = require("react/jsx-runtime");
-var ContentPartText = (0, import_react28.forwardRef)((props, forwardedRef) => {
+var ContentPartText = (0, import_react31.forwardRef)((props, forwardedRef) => {
   const text = useContentPartText();
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react_primitive6.Primitive.span, { ...props, ref: forwardedRef, children: text });
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react_primitive7.Primitive.span, { ...props, ref: forwardedRef, children: text });
 });
 ContentPartText.displayName = "ContentPartText";
 
@@ -1082,7 +1132,7 @@ var MessageContentPartImpl = ({
 }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(ContentPartProvider, { partIndex, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(MessageContentPartComponent, { components }) });
 };
-var MessageContentPart = (0, import_react29.memo)(
+var MessageContentPart = (0, import_react32.memo)(
   MessageContentPartImpl,
   (prev, next) => prev.partIndex === next.partIndex && prev.components?.Text === next.components?.Text && prev.components?.Image === next.components?.Image && prev.components?.UI === next.components?.UI && prev.components?.tools === next.components?.tools
 );
@@ -1103,13 +1153,13 @@ var MessageContent = ({ components }) => {
 };
 
 // src/primitives/message/MessageInProgress.tsx
-var import_react_primitive7 = require("@radix-ui/react-primitive");
-var import_react30 = require("react");
+var import_react_primitive8 = require("@radix-ui/react-primitive");
+var import_react33 = require("react");
 var import_jsx_runtime13 = require("react/jsx-runtime");
-var MessageInProgress = (0, import_react30.forwardRef)((props, ref) => {
+var MessageInProgress = (0, import_react33.forwardRef)((props, ref) => {
   const { useMessageUtils } = useMessageContext();
-  (0, import_react30.useMemo)(() => {
-    useMessageUtils.getState().setInProgressIndicator(/* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react_primitive7.Primitive.span, { ...props, ref }));
+  (0, import_react33.useMemo)(() => {
+    useMessageUtils.getState().setInProgressIndicator(/* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react_primitive8.Primitive.span, { ...props, ref }));
   }, [useMessageUtils, props, ref]);
   return null;
 });
@@ -1152,11 +1202,11 @@ var BranchPickerNumber = () => {
 };
 
 // src/primitives/branchPicker/BranchPickerRoot.tsx
-var import_react_primitive8 = require("@radix-ui/react-primitive");
-var import_react31 = require("react");
+var import_react_primitive9 = require("@radix-ui/react-primitive");
+var import_react34 = require("react");
 var import_jsx_runtime16 = require("react/jsx-runtime");
-var BranchPickerRoot = (0, import_react31.forwardRef)(({ hideWhenSingleBranch, ...rest }, ref) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(MessageIf, { hasBranches: hideWhenSingleBranch ? true : void 0, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_react_primitive8.Primitive.div, { ...rest, ref }) });
+var BranchPickerRoot = (0, import_react34.forwardRef)(({ hideWhenSingleBranch, ...rest }, ref) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(MessageIf, { hasBranches: hideWhenSingleBranch ? true : void 0, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_react_primitive9.Primitive.div, { ...rest, ref }) });
 });
 BranchPickerRoot.displayName = "BranchPickerRoot";
 
@@ -1170,8 +1220,8 @@ __export(actionBar_exports, {
 });
 
 // src/primitives/actionBar/ActionBarRoot.tsx
-var import_react_primitive9 = require("@radix-ui/react-primitive");
-var import_react32 = require("react");
+var import_react_primitive10 = require("@radix-ui/react-primitive");
+var import_react35 = require("react");
 var import_jsx_runtime17 = require("react/jsx-runtime");
 var useActionBarFloatStatus = ({
   hideWhenRunning,
@@ -1193,7 +1243,7 @@ var useActionBarFloatStatus = ({
     }
   );
 };
-var ActionBarRoot = (0, import_react32.forwardRef)(({ hideWhenRunning, autohide, autohideFloat, ...rest }, ref) => {
+var ActionBarRoot = (0, import_react35.forwardRef)(({ hideWhenRunning, autohide, autohideFloat, ...rest }, ref) => {
   const hideAndfloatStatus = useActionBarFloatStatus({
     hideWhenRunning,
     autohide,
@@ -1201,7 +1251,7 @@ var ActionBarRoot = (0, import_react32.forwardRef)(({ hideWhenRunning, autohide,
   });
   if (hideAndfloatStatus === "hidden" /* Hidden */) return null;
   return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
-    import_react_primitive9.Primitive.div,
+    import_react_primitive10.Primitive.div,
     {
       ...hideAndfloatStatus === "floating" /* Floating */ ? { "data-floating": "true" } : null,
       ...rest,
@@ -1239,17 +1289,17 @@ __export(contentPart_exports, {
 });
 
 // src/primitives/contentPart/ContentPartImage.tsx
-var import_react_primitive10 = require("@radix-ui/react-primitive");
-var import_react33 = require("react");
+var import_react_primitive11 = require("@radix-ui/react-primitive");
+var import_react36 = require("react");
 var import_jsx_runtime18 = require("react/jsx-runtime");
-var ContentPartImage = (0, import_react33.forwardRef)((props, forwardedRef) => {
+var ContentPartImage = (0, import_react36.forwardRef)((props, forwardedRef) => {
   const image = useContentPartImage();
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_react_primitive10.Primitive.img, { src: image, ...props, ref: forwardedRef });
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_react_primitive11.Primitive.img, { src: image, ...props, ref: forwardedRef });
 });
 ContentPartImage.displayName = "ContentPartImage";
 
 // src/runtime/local/useLocalRuntime.tsx
-var import_react34 = require("react");
+var import_react37 = require("react");
 
 // src/utils/ModelConfigTypes.ts
 var mergeModelConfigs = (configSet) => {
@@ -1535,18 +1585,18 @@ var LocalRuntime = class {
 
 // src/runtime/local/useLocalRuntime.tsx
 var useLocalRuntime = (adapter) => {
-  const [runtime] = (0, import_react34.useState)(() => new LocalRuntime(adapter));
-  (0, import_react34.useInsertionEffect)(() => {
+  const [runtime] = (0, import_react37.useState)(() => new LocalRuntime(adapter));
+  (0, import_react37.useInsertionEffect)(() => {
     runtime.adapter = adapter;
   });
   return runtime;
 };
 
 // src/context/providers/AssistantRuntimeProvider.tsx
-var import_react37 = require("react");
+var import_react40 = require("react");
 
 // src/context/providers/AssistantProvider.tsx
-var import_react36 = require("react");
+var import_react39 = require("react");
 
 // src/context/stores/AssistantModelConfig.ts
 var import_zustand5 = require("zustand");
@@ -1611,7 +1661,7 @@ var makeAssistantToolUIsStore = () => (0, import_zustand6.create)((set) => {
 });
 
 // src/context/providers/ThreadProvider.tsx
-var import_react35 = require("react");
+var import_react38 = require("react");
 
 // src/context/stores/Composer.ts
 var import_zustand7 = require("zustand");
@@ -1624,6 +1674,7 @@ var makeComposerStore = (useThread, useThreadActions) => (0, import_zustand7.cre
       setValue("");
       useThreadActions.getState().append({
         parentId: useThread.getState().messages.at(-1)?.id ?? null,
+        role: "user",
         content: [{ type: "text", text: value }]
       });
     },
@@ -1686,11 +1737,11 @@ var ThreadProvider = ({
   children,
   runtime
 }) => {
-  const runtimeRef = (0, import_react35.useRef)(runtime);
-  (0, import_react35.useInsertionEffect)(() => {
+  const runtimeRef = (0, import_react38.useRef)(runtime);
+  (0, import_react38.useInsertionEffect)(() => {
     runtimeRef.current = runtime;
   });
-  const [context] = (0, import_react35.useState)(() => {
+  const [context] = (0, import_react38.useState)(() => {
     const useThread = makeThreadStore(runtimeRef);
     const useThreadActions = makeThreadActionStore(runtimeRef);
     const useViewport = makeThreadViewportStore();
@@ -1702,7 +1753,7 @@ var ThreadProvider = ({
       useViewport
     };
   });
-  (0, import_react35.useEffect)(() => {
+  (0, import_react38.useEffect)(() => {
     const onRuntimeUpdate = () => {
       context.useThread.setState(
         Object.freeze({
@@ -1725,17 +1776,17 @@ var ThreadProvider = ({
 // src/context/providers/AssistantProvider.tsx
 var import_jsx_runtime20 = require("react/jsx-runtime");
 var AssistantProvider = ({ children, runtime }) => {
-  const runtimeRef = (0, import_react36.useRef)(runtime);
-  (0, import_react36.useInsertionEffect)(() => {
+  const runtimeRef = (0, import_react39.useRef)(runtime);
+  (0, import_react39.useInsertionEffect)(() => {
     runtimeRef.current = runtime;
   });
-  const [context] = (0, import_react36.useState)(() => {
+  const [context] = (0, import_react39.useState)(() => {
     const useModelConfig = makeAssistantModelConfigStore();
     const useToolUIs = makeAssistantToolUIsStore();
     return { useModelConfig, useToolUIs };
   });
   const getModelCOnfig = context.useModelConfig((c) => c.getModelConfig);
-  (0, import_react36.useEffect)(() => {
+  (0, import_react39.useEffect)(() => {
     return runtime.registerModelConfigProvider(getModelCOnfig);
   }, [runtime, getModelCOnfig]);
   return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(AssistantContext.Provider, { value: context, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(ThreadProvider, { runtime, children }) });
@@ -1746,7 +1797,7 @@ var import_jsx_runtime21 = require("react/jsx-runtime");
 var AssistantRuntimeProviderImpl = ({ children, runtime }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(AssistantProvider, { runtime, children });
 };
-var AssistantRuntimeProvider = (0, import_react37.memo)(AssistantRuntimeProviderImpl);
+var AssistantRuntimeProvider = (0, import_react40.memo)(AssistantRuntimeProviderImpl);
 
 // src/internal.ts
 var internal_exports = {};