@assistant-ui/react 0.1.10 → 0.1.11

package/dist/index.mjs

@@ -180,12 +180,15 @@ var useComposerIf = (props) => {
 // src/primitive-hooks/composer/useComposerSend.tsx
 import { useCallback as useCallback7 } from "react";
 var useComposerSend = () => {
+  const { useViewport } = useThreadContext();
   const { useComposer } = useComposerContext();
   const disabled = useComposer((c) => !c.isEditing || c.value.length === 0);
   const callback = useCallback7(() => {
-    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;
 };
@@ -330,132 +333,161 @@ var ThreadRoot = 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
-import { jsx as jsx2 } from "react/jsx-runtime";
-var ThreadEmpty = ({ children }) => {
-  return /* @__PURE__ */ jsx2(ThreadIf, { empty: true, children });
-};
-
 // src/primitives/thread/ThreadViewport.tsx
-import { composeEventHandlers } from "@radix-ui/primitive";
-import { useComposedRefs } from "@radix-ui/react-compose-refs";
+import { useComposedRefs as useComposedRefs2 } from "@radix-ui/react-compose-refs";
 import { Primitive as Primitive2 } from "@radix-ui/react-primitive";
-import {
-  forwardRef as forwardRef2,
-  useRef
-} from "react";
+import { forwardRef as forwardRef2 } from "react";
+
+// src/primitive-hooks/thread/useThreadViewportAutoScroll.tsx
+import { useComposedRefs } from "@radix-ui/react-compose-refs";
+import { useRef as useRef2 } from "react";
 
 // src/utils/hooks/useOnResizeContent.tsx
 import { useCallbackRef } from "@radix-ui/react-use-callback-ref";
-import { useEffect } from "react";
-var useOnResizeContent = (ref, callback) => {
+import { useCallback as useCallback11 } from "react";
+
+// src/utils/hooks/useManagedRef.ts
+import { useCallback as useCallback10, useRef } from "react";
+var useManagedRef = (callback) => {
+  const cleanupRef = useRef();
+  const ref = useCallback10(
+    (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 = useCallbackRef(callback);
-  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 = useCallback11(
+    (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
 import { useCallbackRef as useCallbackRef2 } from "@radix-ui/react-use-callback-ref";
-import { useEffect as useEffect2 } from "react";
+import { useEffect } from "react";
 var useOnScrollToBottom = (callback) => {
   const callbackRef = useCallbackRef2(callback);
   const { useViewport } = useThreadContext();
-  useEffect2(() => {
+  useEffect(() => {
     return useViewport.getState().onScrollToBottom(() => {
       callbackRef();
     });
   }, [useViewport, callbackRef]);
 };
 
-// src/primitives/thread/ThreadViewport.tsx
-import { jsx as jsx3, jsxs } from "react/jsx-runtime";
-var ThreadViewport = forwardRef2(({ autoScroll = true, onScroll, children, ...rest }, forwardedRef) => {
-  const messagesEndRef = useRef(null);
-  const divRef = useRef(null);
-  const ref = useComposedRefs(forwardedRef, divRef);
+// src/primitive-hooks/thread/useThreadViewportAutoScroll.tsx
+var useThreadViewportAutoScroll = ({
+  autoScroll = true
+}) => {
+  const divRef = useRef2(null);
   const { useViewport } = useThreadContext();
-  const firstRenderRef = useRef(true);
-  const isScrollingToBottomRef = useRef(false);
-  const lastScrollTop = useRef(0);
+  const firstRenderRef = useRef2(true);
+  const lastScrollTop = useRef2(0);
+  const isScrollingToBottomRef = useRef2(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__ */ jsxs(
-    Primitive2.div,
-    {
-      ...rest,
-      onScroll: composeEventHandlers(onScroll, handleScroll),
-      ref,
-      children: [
-        children,
-        /* @__PURE__ */ jsx3("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 = useComposedRefs(resizeRef, scrollRef, divRef);
+  useOnScrollToBottom(() => {
+    scrollToBottom();
+  });
+  return autoScrollRef;
+};
+
+// src/primitives/thread/ThreadViewport.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+var ThreadViewport = forwardRef2(({ autoScroll, onScroll, children, ...rest }, forwardedRef) => {
+  const autoScrollRef = useThreadViewportAutoScroll({
+    autoScroll
+  });
+  const ref = useComposedRefs2(forwardedRef, autoScrollRef);
+  return /* @__PURE__ */ jsx2(Primitive2.div, { ...rest, ref, children });
 });
 ThreadViewport.displayName = "ThreadViewport";
 
@@ -463,7 +495,7 @@ ThreadViewport.displayName = "ThreadViewport";
 import { memo } from "react";
 
 // src/context/providers/MessageProvider.tsx
-import { useEffect as useEffect3, useState } from "react";
+import { useEffect as useEffect2, useState } from "react";
 import { create as create3 } from "zustand";
 
 // src/context/stores/EditComposer.ts
@@ -518,7 +550,7 @@ var makeMessageUtilsStore = () => create2((set) => ({
 }));
 
 // src/context/providers/MessageProvider.tsx
-import { jsx as jsx4 } from "react/jsx-runtime";
+import { jsx as jsx3 } from "react/jsx-runtime";
 var getIsLast = (thread, message) => {
   return thread.messages[thread.messages.length - 1]?.id === message.id;
 };
@@ -564,6 +596,7 @@ var useMessageContext2 = (messageIndex) => {
         );
         useThreadActions.getState().append({
           parentId,
+          role: "user",
           content: [{ type: "text", text }, ...nonTextParts]
         });
       }
@@ -576,7 +609,7 @@ var useMessageContext2 = (messageIndex) => {
     );
     return { useMessage, useMessageUtils, useEditComposer };
   });
-  useEffect3(() => {
+  useEffect2(() => {
     return useThread.subscribe((thread) => {
       syncMessage(
         thread,
@@ -593,7 +626,7 @@ var MessageProvider = ({
   children
 }) => {
   const context = useMessageContext2(messageIndex);
-  return /* @__PURE__ */ jsx4(MessageContext.Provider, { value: context, children });
+  return /* @__PURE__ */ jsx3(MessageContext.Provider, { value: context, children });
 };
 
 // src/primitives/composer/ComposerIf.tsx
@@ -609,7 +642,7 @@ var MessageIf = ({ children, ...query }) => {
 };
 
 // src/primitives/thread/ThreadMessages.tsx
-import { jsx as jsx5, jsxs as jsxs2 } from "react/jsx-runtime";
+import { jsx as jsx4, jsxs } from "react/jsx-runtime";
 var getComponents = (components) => {
   return {
     EditComposer: components.EditComposer ?? components.UserMessage ?? components.Message,
@@ -622,12 +655,12 @@ var ThreadMessageImpl = ({
   components
 }) => {
   const { UserMessage, EditComposer, AssistantMessage } = getComponents(components);
-  return /* @__PURE__ */ jsxs2(MessageProvider, { messageIndex, children: [
-    /* @__PURE__ */ jsxs2(MessageIf, { user: true, children: [
-      /* @__PURE__ */ jsx5(ComposerIf, { editing: false, children: /* @__PURE__ */ jsx5(UserMessage, {}) }),
-      /* @__PURE__ */ jsx5(ComposerIf, { editing: true, children: /* @__PURE__ */ jsx5(EditComposer, {}) })
+  return /* @__PURE__ */ jsxs(MessageProvider, { messageIndex, children: [
+    /* @__PURE__ */ jsxs(MessageIf, { user: true, children: [
+      /* @__PURE__ */ jsx4(ComposerIf, { editing: false, children: /* @__PURE__ */ jsx4(UserMessage, {}) }),
+      /* @__PURE__ */ jsx4(ComposerIf, { editing: true, children: /* @__PURE__ */ jsx4(EditComposer, {}) })
     ] }),
-    /* @__PURE__ */ jsx5(MessageIf, { assistant: true, children: /* @__PURE__ */ jsx5(AssistantMessage, {}) })
+    /* @__PURE__ */ jsx4(MessageIf, { assistant: true, children: /* @__PURE__ */ jsx4(AssistantMessage, {}) })
   ] });
 };
 var ThreadMessage = memo(
@@ -640,7 +673,7 @@ var ThreadMessages = ({ components }) => {
   if (messagesLength === 0) return null;
   return new Array(messagesLength).fill(null).map((_, idx) => {
     const messageIndex = idx;
-    return /* @__PURE__ */ jsx5(
+    return /* @__PURE__ */ jsx4(
       ThreadMessage,
       {
         messageIndex,
@@ -652,21 +685,21 @@ var ThreadMessages = ({ components }) => {
 };
 
 // src/utils/createActionButton.tsx
-import { composeEventHandlers as composeEventHandlers2 } from "@radix-ui/primitive";
+import { composeEventHandlers } from "@radix-ui/primitive";
 import { Primitive as Primitive3 } from "@radix-ui/react-primitive";
 import { forwardRef as forwardRef3 } from "react";
-import { jsx as jsx6 } from "react/jsx-runtime";
+import { jsx as jsx5 } from "react/jsx-runtime";
 var createActionButton = (displayName, useActionButton) => {
   const ActionButton = forwardRef3((props, forwardedRef) => {
     const callback = useActionButton(props);
-    return /* @__PURE__ */ jsx6(
+    return /* @__PURE__ */ jsx5(
       Primitive3.button,
       {
         type: "button",
         disabled: !callback,
         ...props,
         ref: forwardedRef,
-        onClick: composeEventHandlers2(props.onClick, () => {
+        onClick: composeEventHandlers(props.onClick, () => {
           callback?.();
         })
       }
@@ -699,33 +732,26 @@ __export(composer_exports, {
 });
 
 // src/primitives/composer/ComposerRoot.tsx
-import { composeEventHandlers as composeEventHandlers3 } from "@radix-ui/primitive";
-import { useComposedRefs as useComposedRefs2 } from "@radix-ui/react-compose-refs";
+import { composeEventHandlers as composeEventHandlers2 } from "@radix-ui/primitive";
 import { Primitive as Primitive4 } from "@radix-ui/react-primitive";
 import {
-  forwardRef as forwardRef4,
-  useRef as useRef2
+  forwardRef as forwardRef4
 } from "react";
-import { jsx as jsx7 } from "react/jsx-runtime";
+import { jsx as jsx6 } from "react/jsx-runtime";
 var ComposerRoot = forwardRef4(
   ({ onSubmit, ...rest }, forwardedRef) => {
-    const { useViewport } = useThreadContext();
-    const { useComposer } = useComposerContext();
-    const formRef = useRef2(null);
-    const ref = useComposedRefs2(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__ */ jsx7(
+    return /* @__PURE__ */ jsx6(
       Primitive4.form,
       {
         ...rest,
-        ref,
-        onSubmit: composeEventHandlers3(onSubmit, handleSubmit)
+        ref: forwardedRef,
+        onSubmit: composeEventHandlers2(onSubmit, handleSubmit)
       }
     );
   }
@@ -733,17 +759,18 @@ var ComposerRoot = forwardRef4(
 ComposerRoot.displayName = "ComposerRoot";
 
 // src/primitives/composer/ComposerInput.tsx
-import { composeEventHandlers as composeEventHandlers4 } from "@radix-ui/primitive";
+import { composeEventHandlers as composeEventHandlers3 } from "@radix-ui/primitive";
 import { useComposedRefs as useComposedRefs3 } from "@radix-ui/react-compose-refs";
 import { Slot } from "@radix-ui/react-slot";
 import {
   forwardRef as forwardRef5,
-  useCallback as useCallback10,
-  useEffect as useEffect4,
+  useCallback as useCallback12,
+  useEffect as useEffect3,
   useRef as useRef3
 } from "react";
 import TextareaAutosize from "react-textarea-autosize";
-import { jsx as jsx8 } from "react/jsx-runtime";
+import { useEscapeKeydown } from "@radix-ui/react-use-escape-keydown";
+import { jsx as jsx7 } from "react/jsx-runtime";
 var ComposerInput = forwardRef5(
   ({ autoFocus = false, asChild, disabled, onChange, onKeyDown, ...rest }, forwardedRef) => {
     const { useThread } = useThreadContext();
@@ -755,14 +782,15 @@ var ComposerInput = forwardRef5(
     const Component = asChild ? Slot : TextareaAutosize;
     const textareaRef = useRef3(null);
     const ref = useComposedRefs3(forwardedRef, textareaRef);
+    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();
@@ -771,7 +799,7 @@ var ComposerInput = forwardRef5(
       }
     };
     const autoFocusEnabled = autoFocus && !disabled;
-    const focus = useCallback10(() => {
+    const focus = useCallback12(() => {
       const textarea = textareaRef.current;
       if (!textarea || !autoFocusEnabled) return;
       textarea.focus();
@@ -780,13 +808,13 @@ var ComposerInput = forwardRef5(
         textareaRef.current.value.length
       );
     }, [autoFocusEnabled]);
-    useEffect4(() => focus(), [focus]);
+    useEffect3(() => focus(), [focus]);
     useOnScrollToBottom(() => {
       if (type === "new") {
         focus();
       }
     });
-    return /* @__PURE__ */ jsx8(
+    return /* @__PURE__ */ jsx7(
       Component,
       {
         value,
@@ -794,12 +822,12 @@ var ComposerInput = forwardRef5(
         ref,
         autoFocus,
         disabled,
-        onChange: composeEventHandlers4(onChange, (e) => {
+        onChange: composeEventHandlers3(onChange, (e) => {
           const composerState = useComposer.getState();
           if (!composerState.isEditing) return;
           return composerState.setValue(e.target.value);
         }),
-        onKeyDown: composeEventHandlers4(onKeyDown, handleKeyPress)
+        onKeyDown: composeEventHandlers3(onKeyDown, handleKeyPress)
       }
     );
   }
@@ -807,7 +835,25 @@ var ComposerInput = forwardRef5(
 ComposerInput.displayName = "ComposerInput";
 
 // src/primitives/composer/ComposerSend.tsx
-var ComposerSend = createActionButton("ComposerSend", useComposerSend);
+import { forwardRef as forwardRef6 } from "react";
+import { Primitive as Primitive5 } from "@radix-ui/react-primitive";
+import { jsx as jsx8 } from "react/jsx-runtime";
+var ComposerSend = forwardRef6(
+  ({ disabled, ...rest }, ref) => {
+    const { useComposer } = useComposerContext();
+    const hasValue = useComposer((c) => c.isEditing && c.value.length > 0);
+    return /* @__PURE__ */ jsx8(
+      Primitive5.button,
+      {
+        type: "submit",
+        ...rest,
+        ref,
+        disabled: disabled || !hasValue
+      }
+    );
+  }
+);
+ComposerSend.displayName = "ComposerSend";
 
 // src/primitives/composer/ComposerCancel.tsx
 var ComposerCancel = createActionButton(
@@ -825,11 +871,11 @@ __export(message_exports, {
 });
 
 // src/primitives/message/MessageRoot.tsx
-import { composeEventHandlers as composeEventHandlers5 } from "@radix-ui/primitive";
-import { Primitive as Primitive5 } from "@radix-ui/react-primitive";
-import { forwardRef as forwardRef6 } from "react";
+import { composeEventHandlers as composeEventHandlers4 } from "@radix-ui/primitive";
+import { Primitive as Primitive6 } from "@radix-ui/react-primitive";
+import { forwardRef as forwardRef7 } from "react";
 import { jsx as jsx9 } from "react/jsx-runtime";
-var MessageRoot = forwardRef6(
+var MessageRoot = forwardRef7(
   ({ onMouseEnter, onMouseLeave, ...rest }, ref) => {
     const { useMessageUtils } = useMessageContext();
     const setIsHovering = useMessageUtils((s) => s.setIsHovering);
@@ -840,12 +886,12 @@ var MessageRoot = forwardRef6(
       setIsHovering(false);
     };
     return /* @__PURE__ */ jsx9(
-      Primitive5.div,
+      Primitive6.div,
       {
         ...rest,
         ref,
-        onMouseEnter: composeEventHandlers5(onMouseEnter, handleMouseEnter),
-        onMouseLeave: composeEventHandlers5(onMouseLeave, handleMouseLeave)
+        onMouseEnter: composeEventHandlers4(onMouseEnter, handleMouseEnter),
+        onMouseLeave: composeEventHandlers4(onMouseLeave, handleMouseLeave)
       }
     );
   }
@@ -856,7 +902,7 @@ MessageRoot.displayName = "MessageRoot";
 import { memo as memo2 } from "react";
 
 // src/context/providers/ContentPartProvider.tsx
-import { useEffect as useEffect5, useState as useState2 } from "react";
+import { useEffect as useEffect4, useState as useState2 } from "react";
 import { create as create4 } from "zustand";
 import { jsx as jsx10 } from "react/jsx-runtime";
 var syncContentPart = ({ message }, useContentPart, partIndex) => {
@@ -882,7 +928,7 @@ var useContentPartContext2 = (partIndex) => {
     syncContentPart(useMessage.getState(), useContentPart, partIndex);
     return { useContentPart };
   });
-  useEffect5(() => {
+  useEffect4(() => {
     syncContentPart(useMessage.getState(), context.useContentPart, partIndex);
     return useMessage.subscribe((message) => {
       syncContentPart(message, context.useContentPart, partIndex);
@@ -911,19 +957,19 @@ var ContentPartInProgressIndicator = () => {
 };
 
 // src/primitives/contentPart/ContentPartText.tsx
-import { Primitive as Primitive6 } from "@radix-ui/react-primitive";
-import { forwardRef as forwardRef7 } from "react";
+import { Primitive as Primitive7 } from "@radix-ui/react-primitive";
+import { forwardRef as forwardRef8 } from "react";
 import { jsx as jsx11 } from "react/jsx-runtime";
-var ContentPartText = forwardRef7((props, forwardedRef) => {
+var ContentPartText = forwardRef8((props, forwardedRef) => {
   const text = useContentPartText();
-  return /* @__PURE__ */ jsx11(Primitive6.span, { ...props, ref: forwardedRef, children: text });
+  return /* @__PURE__ */ jsx11(Primitive7.span, { ...props, ref: forwardedRef, children: text });
 });
 ContentPartText.displayName = "ContentPartText";
 
 // src/primitives/message/MessageContent.tsx
-import { Fragment, jsx as jsx12, jsxs as jsxs3 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx12, jsxs as jsxs2 } from "react/jsx-runtime";
 var defaultComponents = {
-  Text: () => /* @__PURE__ */ jsxs3(Fragment, { children: [
+  Text: () => /* @__PURE__ */ jsxs2(Fragment, { children: [
     /* @__PURE__ */ jsx12(ContentPartText, {}),
     /* @__PURE__ */ jsx12(ContentPartInProgressIndicator, {})
   ] }),
@@ -994,16 +1040,16 @@ var MessageContent = ({ components }) => {
 };
 
 // src/primitives/message/MessageInProgress.tsx
-import { Primitive as Primitive7 } from "@radix-ui/react-primitive";
+import { Primitive as Primitive8 } from "@radix-ui/react-primitive";
 import {
-  forwardRef as forwardRef8,
+  forwardRef as forwardRef9,
   useMemo as useMemo2
 } from "react";
 import { jsx as jsx13 } from "react/jsx-runtime";
-var MessageInProgress = forwardRef8((props, ref) => {
+var MessageInProgress = forwardRef9((props, ref) => {
   const { useMessageUtils } = useMessageContext();
   useMemo2(() => {
-    useMessageUtils.getState().setInProgressIndicator(/* @__PURE__ */ jsx13(Primitive7.span, { ...props, ref }));
+    useMessageUtils.getState().setInProgressIndicator(/* @__PURE__ */ jsx13(Primitive8.span, { ...props, ref }));
   }, [useMessageUtils, props, ref]);
   return null;
 });
@@ -1046,11 +1092,11 @@ var BranchPickerNumber = () => {
 };
 
 // src/primitives/branchPicker/BranchPickerRoot.tsx
-import { Primitive as Primitive8 } from "@radix-ui/react-primitive";
-import { forwardRef as forwardRef9 } from "react";
+import { Primitive as Primitive9 } from "@radix-ui/react-primitive";
+import { forwardRef as forwardRef10 } from "react";
 import { jsx as jsx16 } from "react/jsx-runtime";
-var BranchPickerRoot = forwardRef9(({ hideWhenSingleBranch, ...rest }, ref) => {
-  return /* @__PURE__ */ jsx16(MessageIf, { hasBranches: hideWhenSingleBranch ? true : void 0, children: /* @__PURE__ */ jsx16(Primitive8.div, { ...rest, ref }) });
+var BranchPickerRoot = forwardRef10(({ hideWhenSingleBranch, ...rest }, ref) => {
+  return /* @__PURE__ */ jsx16(MessageIf, { hasBranches: hideWhenSingleBranch ? true : void 0, children: /* @__PURE__ */ jsx16(Primitive9.div, { ...rest, ref }) });
 });
 BranchPickerRoot.displayName = "BranchPickerRoot";
 
@@ -1064,8 +1110,8 @@ __export(actionBar_exports, {
 });
 
 // src/primitives/actionBar/ActionBarRoot.tsx
-import { Primitive as Primitive9 } from "@radix-ui/react-primitive";
-import { forwardRef as forwardRef10 } from "react";
+import { Primitive as Primitive10 } from "@radix-ui/react-primitive";
+import { forwardRef as forwardRef11 } from "react";
 import { jsx as jsx17 } from "react/jsx-runtime";
 var useActionBarFloatStatus = ({
   hideWhenRunning,
@@ -1087,7 +1133,7 @@ var useActionBarFloatStatus = ({
     }
   );
 };
-var ActionBarRoot = forwardRef10(({ hideWhenRunning, autohide, autohideFloat, ...rest }, ref) => {
+var ActionBarRoot = forwardRef11(({ hideWhenRunning, autohide, autohideFloat, ...rest }, ref) => {
   const hideAndfloatStatus = useActionBarFloatStatus({
     hideWhenRunning,
     autohide,
@@ -1095,7 +1141,7 @@ var ActionBarRoot = forwardRef10(({ hideWhenRunning, autohide, autohideFloat, ..
   });
   if (hideAndfloatStatus === "hidden" /* Hidden */) return null;
   return /* @__PURE__ */ jsx17(
-    Primitive9.div,
+    Primitive10.div,
     {
       ...hideAndfloatStatus === "floating" /* Floating */ ? { "data-floating": "true" } : null,
       ...rest,
@@ -1133,12 +1179,12 @@ __export(contentPart_exports, {
 });
 
 // src/primitives/contentPart/ContentPartImage.tsx
-import { Primitive as Primitive10 } from "@radix-ui/react-primitive";
-import { forwardRef as forwardRef11 } from "react";
+import { Primitive as Primitive11 } from "@radix-ui/react-primitive";
+import { forwardRef as forwardRef12 } from "react";
 import { jsx as jsx18 } from "react/jsx-runtime";
-var ContentPartImage = forwardRef11((props, forwardedRef) => {
+var ContentPartImage = forwardRef12((props, forwardedRef) => {
   const image = useContentPartImage();
-  return /* @__PURE__ */ jsx18(Primitive10.img, { src: image, ...props, ref: forwardedRef });
+  return /* @__PURE__ */ jsx18(Primitive11.img, { src: image, ...props, ref: forwardedRef });
 });
 ContentPartImage.displayName = "ContentPartImage";
 
@@ -1440,7 +1486,7 @@ var useLocalRuntime = (adapter) => {
 import { memo as memo3 } from "react";
 
 // src/context/providers/AssistantProvider.tsx
-import { useEffect as useEffect7, useInsertionEffect as useInsertionEffect3, useRef as useRef5, useState as useState5 } from "react";
+import { useEffect as useEffect6, useInsertionEffect as useInsertionEffect3, useRef as useRef5, useState as useState5 } from "react";
 
 // src/context/stores/AssistantModelConfig.ts
 import { create as create5 } from "zustand";
@@ -1505,7 +1551,7 @@ var makeAssistantToolUIsStore = () => create6((set) => {
 });
 
 // src/context/providers/ThreadProvider.tsx
-import { useEffect as useEffect6, useInsertionEffect as useInsertionEffect2, useRef as useRef4, useState as useState4 } from "react";
+import { useEffect as useEffect5, useInsertionEffect as useInsertionEffect2, useRef as useRef4, useState as useState4 } from "react";
 
 // src/context/stores/Composer.ts
 import { create as create7 } from "zustand";
@@ -1518,6 +1564,7 @@ var makeComposerStore = (useThread, useThreadActions) => create7()((set, get, st
       setValue("");
       useThreadActions.getState().append({
         parentId: useThread.getState().messages.at(-1)?.id ?? null,
+        role: "user",
         content: [{ type: "text", text: value }]
       });
     },
@@ -1575,7 +1622,7 @@ var makeThreadActionStore = (runtimeRef) => {
 };
 
 // src/context/providers/ThreadProvider.tsx
-import { jsx as jsx19, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx19, jsxs as jsxs3 } from "react/jsx-runtime";
 var ThreadProvider = ({
   children,
   runtime
@@ -1596,7 +1643,7 @@ var ThreadProvider = ({
       useViewport
     };
   });
-  useEffect6(() => {
+  useEffect5(() => {
     const onRuntimeUpdate = () => {
       context.useThread.setState(
         Object.freeze({
@@ -1610,7 +1657,7 @@ var ThreadProvider = ({
     return runtime.subscribe(onRuntimeUpdate);
   }, [context, runtime]);
   const RuntimeSynchronizer = runtime.unstable_synchronizer;
-  return /* @__PURE__ */ jsxs4(ThreadContext.Provider, { value: context, children: [
+  return /* @__PURE__ */ jsxs3(ThreadContext.Provider, { value: context, children: [
     RuntimeSynchronizer && /* @__PURE__ */ jsx19(RuntimeSynchronizer, {}),
     children
   ] });
@@ -1629,7 +1676,7 @@ var AssistantProvider = ({ children, runtime }) => {
     return { useModelConfig, useToolUIs };
   });
   const getModelCOnfig = context.useModelConfig((c) => c.getModelConfig);
-  useEffect7(() => {
+  useEffect6(() => {
     return runtime.registerModelConfigProvider(getModelCOnfig);
   }, [runtime, getModelCOnfig]);
   return /* @__PURE__ */ jsx20(AssistantContext.Provider, { value: context, children: /* @__PURE__ */ jsx20(ThreadProvider, { runtime, children }) });