@assistant-ui/react 0.1.10 → 0.1.12

package/dist/index.mjs

@@ -91,7 +91,7 @@ var useActionBarEdit = () => {
 // src/primitive-hooks/actionBar/useActionBarReload.tsx
 import { useCallback as useCallback3 } from "react";
 var useActionBarReload = () => {
-  const { useThread, useThreadActions, useViewport } = useThreadContext();
+  const { useThread, useThreadActions, useComposer, useViewport } = useThreadContext();
   const { useMessage } = useMessageContext();
   const disabled = useCombinedStore(
     [useThread, useMessage],
@@ -101,7 +101,8 @@ var useActionBarReload = () => {
     const { parentId } = useMessage.getState();
     useThreadActions.getState().startRun(parentId);
     useViewport.getState().scrollToBottom();
-  }, [useThreadActions, useMessage, useViewport]);
+    useComposer.getState().focus();
+  }, [useThreadActions, useComposer, useViewport, useMessage]);
   if (disabled) return null;
   return callback;
 };
@@ -180,12 +181,16 @@ var useComposerIf = (props) => {
 // src/primitive-hooks/composer/useComposerSend.tsx
 import { useCallback as useCallback7 } from "react";
 var useComposerSend = () => {
+  const { useViewport, useComposer: useNewComposer } = 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();
+    useNewComposer.getState().focus();
+  }, [useNewComposer, useComposer, useViewport]);
   if (disabled) return null;
   return callback;
 };
@@ -277,12 +282,12 @@ var useThreadEmpty = () => {
 // src/primitive-hooks/thread/useThreadScrollToBottom.tsx
 import { useCallback as useCallback8 } from "react";
 var useThreadScrollToBottom = () => {
-  const { useViewport } = useThreadContext();
+  const { useComposer, useViewport } = useThreadContext();
   const isAtBottom = useViewport((s) => s.isAtBottom);
   const handleScrollToBottom = useCallback8(() => {
-    const { scrollToBottom } = useViewport.getState();
-    scrollToBottom();
-  }, [useViewport]);
+    useViewport.getState().scrollToBottom();
+    useComposer.getState().focus();
+  }, [useViewport, useComposer]);
   if (isAtBottom) return null;
   return handleScrollToBottom;
 };
@@ -307,225 +312,862 @@ var useThreadSuggestion = ({
   return callback;
 };
 
-// src/primitives/thread/index.ts
-var thread_exports = {};
-__export(thread_exports, {
-  Empty: () => ThreadEmpty,
-  If: () => ThreadIf,
-  Messages: () => ThreadMessages,
-  Root: () => ThreadRoot,
-  ScrollToBottom: () => ThreadScrollToBottom,
-  Suggestion: () => ThreadSuggestion,
-  Viewport: () => ThreadViewport
+// src/primitives/actionBar/index.ts
+var actionBar_exports = {};
+__export(actionBar_exports, {
+  Copy: () => ActionBarCopy,
+  Edit: () => ActionBarEdit,
+  Reload: () => ActionBarReload,
+  Root: () => ActionBarRoot
 });
 
-// src/primitives/thread/ThreadRoot.tsx
+// src/primitives/actionBar/ActionBarRoot.tsx
 import { Primitive } from "@radix-ui/react-primitive";
 import { forwardRef } from "react";
 import { jsx } from "react/jsx-runtime";
-var ThreadRoot = forwardRef(
-  (props, ref) => {
-    return /* @__PURE__ */ jsx(Primitive.div, { ...props, ref });
-  }
-);
-ThreadRoot.displayName = "ThreadRoot";
-
-// src/primitives/thread/ThreadIf.tsx
-var ThreadIf = ({ children, ...query }) => {
-  const result = useThreadIf(query);
-  return result ? children : null;
+var useActionBarFloatStatus = ({
+  hideWhenRunning,
+  autohide,
+  autohideFloat
+}) => {
+  const { useThread } = useThreadContext();
+  const { useMessage, useMessageUtils } = useMessageContext();
+  return useCombinedStore(
+    [useThread, useMessage, useMessageUtils],
+    (t, m, mu) => {
+      if (hideWhenRunning && t.isRunning) return "hidden" /* Hidden */;
+      const autohideEnabled = autohide === "always" || autohide === "not-last" && !m.isLast;
+      if (!autohideEnabled) return "normal" /* Normal */;
+      if (!mu.isHovering) return "hidden" /* Hidden */;
+      if (autohideFloat === "always" || autohideFloat === "single-branch" && m.branches.length <= 1)
+        return "floating" /* Floating */;
+      return "normal" /* Normal */;
+    }
+  );
 };
+var ActionBarRoot = forwardRef(({ hideWhenRunning, autohide, autohideFloat, ...rest }, ref) => {
+  const hideAndfloatStatus = useActionBarFloatStatus({
+    hideWhenRunning,
+    autohide,
+    autohideFloat
+  });
+  if (hideAndfloatStatus === "hidden" /* Hidden */) return null;
+  return /* @__PURE__ */ jsx(
+    Primitive.div,
+    {
+      ...hideAndfloatStatus === "floating" /* Floating */ ? { "data-floating": "true" } : null,
+      ...rest,
+      ref
+    }
+  );
+});
+ActionBarRoot.displayName = "ActionBarRoot";
 
-// src/primitives/thread/ThreadEmpty.tsx
+// src/utils/createActionButton.tsx
+import { composeEventHandlers } from "@radix-ui/primitive";
+import { Primitive as Primitive2 } from "@radix-ui/react-primitive";
+import { forwardRef as forwardRef2 } from "react";
 import { jsx as jsx2 } from "react/jsx-runtime";
-var ThreadEmpty = ({ children }) => {
-  return /* @__PURE__ */ jsx2(ThreadIf, { empty: true, children });
+var createActionButton = (displayName, useActionButton) => {
+  const ActionButton = forwardRef2((props, forwardedRef) => {
+    const callback = useActionButton(props);
+    return /* @__PURE__ */ jsx2(
+      Primitive2.button,
+      {
+        type: "button",
+        disabled: !callback,
+        ...props,
+        ref: forwardedRef,
+        onClick: composeEventHandlers(props.onClick, () => {
+          callback?.();
+        })
+      }
+    );
+  });
+  ActionButton.displayName = displayName;
+  return ActionButton;
 };
 
-// src/primitives/thread/ThreadViewport.tsx
-import { composeEventHandlers } from "@radix-ui/primitive";
-import { useComposedRefs } from "@radix-ui/react-compose-refs";
-import { Primitive as Primitive2 } from "@radix-ui/react-primitive";
-import {
-  forwardRef as forwardRef2,
-  useRef
-} from "react";
+// src/primitives/actionBar/ActionBarCopy.tsx
+var ActionBarCopy = createActionButton(
+  "ActionBarCopy",
+  useActionBarCopy
+);
 
-// src/utils/hooks/useOnResizeContent.tsx
+// src/primitives/actionBar/ActionBarReload.tsx
+var ActionBarReload = createActionButton(
+  "ActionBarReload",
+  useActionBarReload
+);
+
+// src/primitives/actionBar/ActionBarEdit.tsx
+var ActionBarEdit = createActionButton(
+  "ActionBarEdit",
+  useActionBarEdit
+);
+
+// src/primitives/assistantModal/index.ts
+var assistantModal_exports = {};
+__export(assistantModal_exports, {
+  Content: () => AssistantModalContent,
+  Root: () => AssistantModalRoot,
+  Trigger: () => AssistantModalTrigger
+});
+
+// src/primitives/assistantModal/AssistantModalRoot.tsx
+import { useState } from "react";
+import * as PopoverPrimitive from "@radix-ui/react-popover";
+import { composeEventHandlers as composeEventHandlers2 } from "@radix-ui/primitive";
+
+// src/utils/hooks/useOnComposerFocus.tsx
 import { useCallbackRef } from "@radix-ui/react-use-callback-ref";
 import { useEffect } from "react";
-var useOnResizeContent = (ref, callback) => {
+var useOnComposerFocus = (callback) => {
   const callbackRef = useCallbackRef(callback);
+  const { useComposer } = useThreadContext();
   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);
-          }
-        }
-        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);
-    }
-    return () => {
-      resizeObserver.disconnect();
-      mutationObserver.disconnect();
-    };
-  }, [ref, callbackRef]);
-};
-
-// src/utils/hooks/useOnScrollToBottom.tsx
-import { useCallbackRef as useCallbackRef2 } from "@radix-ui/react-use-callback-ref";
-import { useEffect as useEffect2 } from "react";
-var useOnScrollToBottom = (callback) => {
-  const callbackRef = useCallbackRef2(callback);
-  const { useViewport } = useThreadContext();
-  useEffect2(() => {
-    return useViewport.getState().onScrollToBottom(() => {
+    return useComposer.getState().onFocus(() => {
       callbackRef();
     });
-  }, [useViewport, callbackRef]);
+  }, [useComposer, 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);
-  const { useViewport } = useThreadContext();
-  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;
-    isScrollingToBottomRef.current = true;
-    div.scrollIntoView({ behavior });
-  };
-  useOnResizeContent(divRef, () => {
-    if (!isScrollingToBottomRef.current && !useViewport.getState().isAtBottom) {
-      handleScroll();
-    } else {
-      scrollToBottom();
-    }
+// src/primitives/assistantModal/AssistantModalRoot.tsx
+import { jsx as jsx3 } from "react/jsx-runtime";
+var usePopoverScope = PopoverPrimitive.createPopoverScope();
+var useAssistantModalOpenState = (defaultOpen = false) => {
+  const state = useState(defaultOpen);
+  const [, setOpen] = state;
+  useOnComposerFocus(() => {
+    setOpen(true);
   });
-  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
-      });
-    }
-    lastScrollTop.current = div.scrollTop;
-  };
-  return /* @__PURE__ */ jsxs(
-    Primitive2.div,
+  return state;
+};
+var AssistantModalRoot = ({
+  __scopeAssistantModal,
+  defaultOpen,
+  open,
+  onOpenChange,
+  ...rest
+}) => {
+  const scope = usePopoverScope(__scopeAssistantModal);
+  const [modalOpen, setOpen] = useAssistantModalOpenState(defaultOpen);
+  return /* @__PURE__ */ jsx3(
+    PopoverPrimitive.Root,
     {
-      ...rest,
-      onScroll: composeEventHandlers(onScroll, handleScroll),
-      ref,
-      children: [
-        children,
-        /* @__PURE__ */ jsx3("div", { ref: messagesEndRef })
-      ]
+      ...scope,
+      open: open === void 0 ? modalOpen : open,
+      onOpenChange: composeEventHandlers2(onOpenChange, setOpen),
+      ...rest
     }
   );
-});
-ThreadViewport.displayName = "ThreadViewport";
-
-// src/primitives/thread/ThreadMessages.tsx
-import { memo } from "react";
-
-// src/context/providers/MessageProvider.tsx
-import { useEffect as useEffect3, useState } from "react";
-import { create as create3 } from "zustand";
+};
+AssistantModalRoot.displayName = "AssistantModalRoot";
 
-// src/context/stores/EditComposer.ts
-import { create } from "zustand";
+// src/primitives/assistantModal/AssistantModalTrigger.tsx
+import { forwardRef as forwardRef3 } from "react";
+import * as PopoverPrimitive2 from "@radix-ui/react-popover";
+import { jsx as jsx4 } from "react/jsx-runtime";
+var AssistantModalTrigger = forwardRef3(
+  ({ __scopeAssistantModal, ...rest }, ref) => {
+    const scope = usePopoverScope(__scopeAssistantModal);
+    return /* @__PURE__ */ jsx4(PopoverPrimitive2.Trigger, { ...scope, ...rest, ref });
+  }
+);
+AssistantModalTrigger.displayName = "AssistantModalTrigger";
 
-// src/context/stores/BaseComposer.ts
-var makeBaseComposer = (set) => ({
-  value: "",
-  setValue: (value) => {
-    set({ value });
+// src/primitives/assistantModal/AssistantModalContent.tsx
+import { forwardRef as forwardRef4 } from "react";
+import * as PopoverPrimitive3 from "@radix-ui/react-popover";
+import { composeEventHandlers as composeEventHandlers3 } from "@radix-ui/primitive";
+import { jsx as jsx5 } from "react/jsx-runtime";
+var AssistantModalContent = forwardRef4(
+  ({
+    __scopeAssistantModal,
+    side,
+    align,
+    onInteractOutside,
+    dissmissOnInteractOutside = false,
+    ...props
+  }, forwardedRef) => {
+    const scope = usePopoverScope(__scopeAssistantModal);
+    return /* @__PURE__ */ jsx5(PopoverPrimitive3.Portal, { ...scope, children: /* @__PURE__ */ jsx5(
+      PopoverPrimitive3.Content,
+      {
+        ...scope,
+        ...props,
+        ref: forwardedRef,
+        side: side ?? "top",
+        align: align ?? "end",
+        onInteractOutside: composeEventHandlers3(
+          onInteractOutside,
+          dissmissOnInteractOutside ? void 0 : (e) => e.preventDefault()
+        )
+      }
+    ) });
   }
+);
+AssistantModalContent.displayName = "AssistantModalContent";
+
+// src/primitives/branchPicker/index.ts
+var branchPicker_exports = {};
+__export(branchPicker_exports, {
+  Count: () => BranchPickerCount,
+  Next: () => BranchPickerNext,
+  Number: () => BranchPickerNumber,
+  Previous: () => BranchPickerPrevious,
+  Root: () => BranchPickerRoot
 });
 
-// src/context/stores/EditComposer.ts
-var makeEditComposerStore = ({
-  onEdit,
-  onSend
-}) => create()((set, get, store) => ({
-  ...makeBaseComposer(set, get, store),
-  isEditing: false,
-  edit: () => {
-    const value = onEdit();
-    set({ isEditing: true, value });
-  },
-  send: () => {
-    const value = get().value;
-    set({ isEditing: false });
-    onSend(value);
-  },
-  cancel: () => {
-    if (!get().isEditing) return false;
-    set({ isEditing: false });
-    return true;
-  }
-}));
+// src/primitives/branchPicker/BranchPickerNext.tsx
+var BranchPickerNext = createActionButton(
+  "BranchPickerNext",
+  useBranchPickerNext
+);
 
-// src/context/stores/MessageUtils.ts
-import { create as create2 } from "zustand";
-var makeMessageUtilsStore = () => create2((set) => ({
-  inProgressIndicator: null,
-  setInProgressIndicator: (value) => {
-    set({ inProgressIndicator: value });
-  },
-  isCopied: false,
-  setIsCopied: (value) => {
-    set({ isCopied: value });
-  },
-  isHovering: false,
-  setIsHovering: (value) => {
-    set({ isHovering: value });
-  }
-}));
+// src/primitives/branchPicker/BranchPickerPrevious.tsx
+var BranchPickerPrevious = createActionButton(
+  "BranchPickerPrevious",
+  useBranchPickerPrevious
+);
 
-// src/context/providers/MessageProvider.tsx
-import { jsx as jsx4 } from "react/jsx-runtime";
-var getIsLast = (thread, message) => {
-  return thread.messages[thread.messages.length - 1]?.id === message.id;
+// src/primitives/branchPicker/BranchPickerCount.tsx
+import { Fragment, jsx as jsx6 } from "react/jsx-runtime";
+var BranchPickerCount = () => {
+  const branchCount = useBranchPickerCount();
+  return /* @__PURE__ */ jsx6(Fragment, { children: branchCount });
 };
-var syncMessage = (thread, getBranches, useMessage, messageIndex) => {
-  const parentId = thread.messages[messageIndex - 1]?.id ?? null;
-  const message = thread.messages[messageIndex];
-  if (!message) return;
+
+// src/primitives/branchPicker/BranchPickerNumber.tsx
+import { Fragment as Fragment2, jsx as jsx7 } from "react/jsx-runtime";
+var BranchPickerNumber = () => {
+  const branchNumber = useBranchPickerNumber();
+  return /* @__PURE__ */ jsx7(Fragment2, { children: branchNumber });
+};
+
+// src/primitives/branchPicker/BranchPickerRoot.tsx
+import { Primitive as Primitive6 } from "@radix-ui/react-primitive";
+import { forwardRef as forwardRef8 } from "react";
+
+// src/primitives/message/index.ts
+var message_exports = {};
+__export(message_exports, {
+  Content: () => MessageContent,
+  If: () => MessageIf,
+  InProgress: () => MessageInProgress,
+  Root: () => MessageRoot
+});
+
+// src/primitives/message/MessageRoot.tsx
+import { composeEventHandlers as composeEventHandlers4 } from "@radix-ui/primitive";
+import { Primitive as Primitive3 } from "@radix-ui/react-primitive";
+import { forwardRef as forwardRef5 } from "react";
+import { jsx as jsx8 } from "react/jsx-runtime";
+var MessageRoot = forwardRef5(
+  ({ onMouseEnter, onMouseLeave, ...rest }, ref) => {
+    const { useMessageUtils } = useMessageContext();
+    const setIsHovering = useMessageUtils((s) => s.setIsHovering);
+    const handleMouseEnter = () => {
+      setIsHovering(true);
+    };
+    const handleMouseLeave = () => {
+      setIsHovering(false);
+    };
+    return /* @__PURE__ */ jsx8(
+      Primitive3.div,
+      {
+        ...rest,
+        ref,
+        onMouseEnter: composeEventHandlers4(onMouseEnter, handleMouseEnter),
+        onMouseLeave: composeEventHandlers4(onMouseLeave, handleMouseLeave)
+      }
+    );
+  }
+);
+MessageRoot.displayName = "MessageRoot";
+
+// src/primitives/message/MessageIf.tsx
+var MessageIf = ({ children, ...query }) => {
+  const result = useMessageIf(query);
+  return result ? children : null;
+};
+
+// src/primitives/message/MessageContent.tsx
+import { memo } from "react";
+
+// src/context/providers/ContentPartProvider.tsx
+import { useEffect as useEffect2, useState as useState2 } from "react";
+import { create } from "zustand";
+import { jsx as jsx9 } from "react/jsx-runtime";
+var syncContentPart = ({ message }, useContentPart, partIndex) => {
+  const part = message.content[partIndex];
+  if (!part) return;
+  const messageStatus = message.role === "assistant" ? message.status : "done";
+  const status = partIndex === message.content.length - 1 ? messageStatus : "done";
+  const currentState = useContentPart.getState();
+  if (currentState.part === part && currentState.status === status) return;
+  useContentPart.setState(
+    Object.freeze({
+      part,
+      status
+    })
+  );
+};
+var useContentPartContext2 = (partIndex) => {
+  const { useMessage } = useMessageContext();
+  const [context] = useState2(() => {
+    const useContentPart = create(
+      () => ({})
+    );
+    syncContentPart(useMessage.getState(), useContentPart, partIndex);
+    return { useContentPart };
+  });
+  useEffect2(() => {
+    syncContentPart(useMessage.getState(), context.useContentPart, partIndex);
+    return useMessage.subscribe((message) => {
+      syncContentPart(message, context.useContentPart, partIndex);
+    });
+  }, [context, useMessage, partIndex]);
+  return context;
+};
+var ContentPartProvider = ({
+  partIndex,
+  children
+}) => {
+  const context = useContentPartContext2(partIndex);
+  return /* @__PURE__ */ jsx9(ContentPartContext.Provider, { value: context, children });
+};
+
+// src/primitives/contentPart/ContentPartDisplay.tsx
+var ContentPartDisplay = () => {
+  const display = useContentPartDisplay();
+  return display ?? null;
+};
+
+// src/primitives/contentPart/ContentPartInProgressIndicator.tsx
+var ContentPartInProgressIndicator = () => {
+  const indicator = useContentPartInProgressIndicator();
+  return indicator;
+};
+
+// src/primitives/contentPart/ContentPartText.tsx
+import { Primitive as Primitive4 } from "@radix-ui/react-primitive";
+import { forwardRef as forwardRef6 } from "react";
+import { jsx as jsx10 } from "react/jsx-runtime";
+var ContentPartText = forwardRef6((props, forwardedRef) => {
+  const text = useContentPartText();
+  return /* @__PURE__ */ jsx10(Primitive4.span, { ...props, ref: forwardedRef, children: text });
+});
+ContentPartText.displayName = "ContentPartText";
+
+// src/primitives/message/MessageContent.tsx
+import { Fragment as Fragment3, jsx as jsx11, jsxs } from "react/jsx-runtime";
+var defaultComponents = {
+  Text: () => /* @__PURE__ */ jsxs(Fragment3, { children: [
+    /* @__PURE__ */ jsx11(ContentPartText, {}),
+    /* @__PURE__ */ jsx11(ContentPartInProgressIndicator, {})
+  ] }),
+  Image: () => null,
+  UI: () => /* @__PURE__ */ jsx11(ContentPartDisplay, {}),
+  tools: {
+    Fallback: (props) => {
+      const { useToolUIs } = useAssistantContext();
+      const Render = useToolUIs((s) => s.getToolUI(props.part.toolName));
+      if (!Render) return null;
+      return /* @__PURE__ */ jsx11(Render, { ...props });
+    }
+  }
+};
+var MessageContentPartComponent = ({
+  components: {
+    Text = defaultComponents.Text,
+    Image = defaultComponents.Image,
+    UI = defaultComponents.UI,
+    tools: { by_name = {}, Fallback = defaultComponents.tools.Fallback } = {}
+  } = {}
+}) => {
+  const { useThreadActions } = useThreadContext();
+  const addToolResult = useThreadActions((t) => t.addToolResult);
+  const { useContentPart } = useContentPartContext();
+  const { part, status } = useContentPart();
+  const type = part.type;
+  switch (type) {
+    case "text":
+      return /* @__PURE__ */ jsx11(Text, { part, status });
+    case "image":
+      return /* @__PURE__ */ jsx11(Image, { part, status });
+    case "ui":
+      return /* @__PURE__ */ jsx11(UI, { part, status });
+    case "tool-call": {
+      const Tool = by_name[part.toolName] || Fallback;
+      const addResult = (result) => addToolResult(part.toolCallId, result);
+      return /* @__PURE__ */ jsx11(Tool, { part, status, addResult });
+    }
+    default:
+      throw new Error(`Unknown content part type: ${type}`);
+  }
+};
+var MessageContentPartImpl = ({
+  partIndex,
+  components
+}) => {
+  return /* @__PURE__ */ jsx11(ContentPartProvider, { partIndex, children: /* @__PURE__ */ jsx11(MessageContentPartComponent, { components }) });
+};
+var MessageContentPart = 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
+);
+var MessageContent = ({ components }) => {
+  const { useMessage } = useMessageContext();
+  const contentLength = useMessage((s) => s.message.content.length);
+  return new Array(contentLength).fill(null).map((_, idx) => {
+    const partIndex = idx;
+    return /* @__PURE__ */ jsx11(
+      MessageContentPart,
+      {
+        partIndex,
+        components
+      },
+      partIndex
+    );
+  });
+};
+
+// src/primitives/message/MessageInProgress.tsx
+import { Primitive as Primitive5 } from "@radix-ui/react-primitive";
+import {
+  forwardRef as forwardRef7,
+  useMemo as useMemo2
+} from "react";
+import { jsx as jsx12 } from "react/jsx-runtime";
+var MessageInProgress = forwardRef7((props, ref) => {
+  const { useMessageUtils } = useMessageContext();
+  useMemo2(() => {
+    useMessageUtils.getState().setInProgressIndicator(/* @__PURE__ */ jsx12(Primitive5.span, { ...props, ref }));
+  }, [useMessageUtils, props, ref]);
+  return null;
+});
+MessageInProgress.displayName = "MessageInProgress";
+
+// src/primitives/branchPicker/BranchPickerRoot.tsx
+import { jsx as jsx13 } from "react/jsx-runtime";
+var BranchPickerRoot = forwardRef8(({ hideWhenSingleBranch, ...rest }, ref) => {
+  return /* @__PURE__ */ jsx13(MessageIf, { hasBranches: hideWhenSingleBranch ? true : void 0, children: /* @__PURE__ */ jsx13(Primitive6.div, { ...rest, ref }) });
+});
+BranchPickerRoot.displayName = "BranchPickerRoot";
+
+// src/primitives/composer/index.ts
+var composer_exports = {};
+__export(composer_exports, {
+  Cancel: () => ComposerCancel,
+  If: () => ComposerIf,
+  Input: () => ComposerInput,
+  Root: () => ComposerRoot,
+  Send: () => ComposerSend
+});
+
+// src/primitives/composer/ComposerRoot.tsx
+import { composeEventHandlers as composeEventHandlers5 } from "@radix-ui/primitive";
+import { Primitive as Primitive7 } from "@radix-ui/react-primitive";
+import {
+  forwardRef as forwardRef9
+} from "react";
+import { jsx as jsx14 } from "react/jsx-runtime";
+var ComposerRoot = forwardRef9(
+  ({ onSubmit, ...rest }, forwardedRef) => {
+    const send = useComposerSend();
+    const handleSubmit = (e) => {
+      if (!send) return;
+      e.preventDefault();
+      send();
+    };
+    return /* @__PURE__ */ jsx14(
+      Primitive7.form,
+      {
+        ...rest,
+        ref: forwardedRef,
+        onSubmit: composeEventHandlers5(onSubmit, handleSubmit)
+      }
+    );
+  }
+);
+ComposerRoot.displayName = "ComposerRoot";
+
+// src/primitives/composer/ComposerInput.tsx
+import { composeEventHandlers as composeEventHandlers6 } from "@radix-ui/primitive";
+import { useComposedRefs } from "@radix-ui/react-compose-refs";
+import { Slot } from "@radix-ui/react-slot";
+import {
+  forwardRef as forwardRef10,
+  useCallback as useCallback10,
+  useEffect as useEffect3,
+  useRef
+} from "react";
+import TextareaAutosize from "react-textarea-autosize";
+import { useEscapeKeydown } from "@radix-ui/react-use-escape-keydown";
+import { jsx as jsx15 } from "react/jsx-runtime";
+var ComposerInput = forwardRef10(
+  ({ autoFocus = false, asChild, disabled, onChange, onKeyDown, ...rest }, forwardedRef) => {
+    const { useThread } = useThreadContext();
+    const { useComposer, type } = useComposerContext();
+    const value = useComposer((c) => {
+      if (!c.isEditing) return "";
+      return c.value;
+    });
+    const Component = asChild ? Slot : TextareaAutosize;
+    const textareaRef = useRef(null);
+    const ref = useComposedRefs(forwardedRef, textareaRef);
+    useEscapeKeydown((e) => {
+      const composer = useComposer.getState();
+      if (composer.cancel()) {
+        e.preventDefault();
+      }
+    });
+    const handleKeyPress = (e) => {
+      if (disabled) return;
+      if (e.key === "Enter" && e.shiftKey === false) {
+        const isRunning = useThread.getState().isRunning;
+        if (!isRunning) {
+          e.preventDefault();
+          textareaRef.current?.closest("form")?.requestSubmit();
+        }
+      }
+    };
+    const autoFocusEnabled = autoFocus && !disabled;
+    const focus = useCallback10(() => {
+      const textarea = textareaRef.current;
+      if (!textarea || !autoFocusEnabled) return;
+      textarea.focus({ preventScroll: true });
+      textarea.setSelectionRange(
+        textareaRef.current.value.length,
+        textareaRef.current.value.length
+      );
+    }, [autoFocusEnabled]);
+    useEffect3(() => focus(), [focus]);
+    useOnComposerFocus(() => {
+      if (type === "new") {
+        focus();
+      }
+    });
+    return /* @__PURE__ */ jsx15(
+      Component,
+      {
+        value,
+        ...rest,
+        ref,
+        disabled,
+        onChange: composeEventHandlers6(onChange, (e) => {
+          const composerState = useComposer.getState();
+          if (!composerState.isEditing) return;
+          return composerState.setValue(e.target.value);
+        }),
+        onKeyDown: composeEventHandlers6(onKeyDown, handleKeyPress)
+      }
+    );
+  }
+);
+ComposerInput.displayName = "ComposerInput";
+
+// src/primitives/composer/ComposerSend.tsx
+import { forwardRef as forwardRef11 } from "react";
+import { Primitive as Primitive8 } from "@radix-ui/react-primitive";
+import { jsx as jsx16 } from "react/jsx-runtime";
+var ComposerSend = forwardRef11(
+  ({ disabled, ...rest }, ref) => {
+    const { useComposer } = useComposerContext();
+    const hasValue = useComposer((c) => c.isEditing && c.value.length > 0);
+    return /* @__PURE__ */ jsx16(
+      Primitive8.button,
+      {
+        type: "submit",
+        ...rest,
+        ref,
+        disabled: disabled || !hasValue
+      }
+    );
+  }
+);
+ComposerSend.displayName = "ComposerSend";
+
+// src/primitives/composer/ComposerCancel.tsx
+var ComposerCancel = createActionButton(
+  "ComposerCancel",
+  useComposerCancel
+);
+
+// src/primitives/composer/ComposerIf.tsx
+var ComposerIf = ({ children, ...query }) => {
+  const result = useComposerIf(query);
+  return result ? children : null;
+};
+
+// src/primitives/contentPart/index.ts
+var contentPart_exports = {};
+__export(contentPart_exports, {
+  Display: () => ContentPartDisplay,
+  Image: () => ContentPartImage,
+  InProgressIndicator: () => ContentPartInProgressIndicator,
+  Text: () => ContentPartText
+});
+
+// src/primitives/contentPart/ContentPartImage.tsx
+import { Primitive as Primitive9 } from "@radix-ui/react-primitive";
+import { forwardRef as forwardRef12 } from "react";
+import { jsx as jsx17 } from "react/jsx-runtime";
+var ContentPartImage = forwardRef12((props, forwardedRef) => {
+  const image = useContentPartImage();
+  return /* @__PURE__ */ jsx17(Primitive9.img, { src: image, ...props, ref: forwardedRef });
+});
+ContentPartImage.displayName = "ContentPartImage";
+
+// src/primitives/thread/index.ts
+var thread_exports = {};
+__export(thread_exports, {
+  Empty: () => ThreadEmpty,
+  If: () => ThreadIf,
+  Messages: () => ThreadMessages,
+  Root: () => ThreadRoot,
+  ScrollToBottom: () => ThreadScrollToBottom,
+  Suggestion: () => ThreadSuggestion,
+  Viewport: () => ThreadViewport
+});
+
+// src/primitives/thread/ThreadRoot.tsx
+import { Primitive as Primitive10 } from "@radix-ui/react-primitive";
+import { forwardRef as forwardRef13 } from "react";
+import { jsx as jsx18 } from "react/jsx-runtime";
+var ThreadRoot = forwardRef13(
+  (props, ref) => {
+    return /* @__PURE__ */ jsx18(Primitive10.div, { ...props, ref });
+  }
+);
+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/ThreadViewport.tsx
+import { useComposedRefs as useComposedRefs3 } from "@radix-ui/react-compose-refs";
+import { Primitive as Primitive11 } from "@radix-ui/react-primitive";
+import { forwardRef as forwardRef14 } from "react";
+
+// src/primitive-hooks/thread/useThreadViewportAutoScroll.tsx
+import { useComposedRefs as useComposedRefs2 } from "@radix-ui/react-compose-refs";
+import { useRef as useRef3 } from "react";
+
+// src/utils/hooks/useOnResizeContent.tsx
+import { useCallbackRef as useCallbackRef2 } from "@radix-ui/react-use-callback-ref";
+import { useCallback as useCallback12 } from "react";
+
+// src/utils/hooks/useManagedRef.ts
+import { useCallback as useCallback11, useRef as useRef2 } from "react";
+var useManagedRef = (callback) => {
+  const cleanupRef = useRef2();
+  const ref = useCallback11(
+    (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 = useCallbackRef2(callback);
+  const refCallback = useCallback12(
+    (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);
+            }
+          }
+        }
+        callbackRef();
+      });
+      resizeObserver.observe(el);
+      mutationObserver.observe(el, { childList: true });
+      for (const child of el.children) {
+        resizeObserver.observe(child);
+      }
+      return () => {
+        resizeObserver.disconnect();
+        mutationObserver.disconnect();
+      };
+    },
+    [callbackRef]
+  );
+  return useManagedRef(refCallback);
+};
+
+// src/utils/hooks/useOnScrollToBottom.tsx
+import { useCallbackRef as useCallbackRef3 } from "@radix-ui/react-use-callback-ref";
+import { useEffect as useEffect4 } from "react";
+var useOnScrollToBottom = (callback) => {
+  const callbackRef = useCallbackRef3(callback);
+  const { useViewport } = useThreadContext();
+  useEffect4(() => {
+    return useViewport.getState().onScrollToBottom(() => {
+      callbackRef();
+    });
+  }, [useViewport, callbackRef]);
+};
+
+// src/primitive-hooks/thread/useThreadViewportAutoScroll.tsx
+var useThreadViewportAutoScroll = ({
+  autoScroll = true
+}) => {
+  const divRef = useRef3(null);
+  const { useViewport } = useThreadContext();
+  const firstRenderRef = useRef3(true);
+  const lastScrollTop = useRef3(0);
+  const isScrollingToBottomRef = useRef3(false);
+  const scrollToBottom = () => {
+    const div = divRef.current;
+    if (!div || !autoScroll) return;
+    const behavior = firstRenderRef.current ? "instant" : "auto";
+    firstRenderRef.current = false;
+    isScrollingToBottomRef.current = true;
+    div.scrollTo({ top: div.scrollHeight, behavior });
+  };
+  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 {
+      isScrollingToBottomRef.current = newIsAtBottom;
+      if (newIsAtBottom !== isAtBottom) {
+        useViewport.setState({
+          isAtBottom: newIsAtBottom
+        });
+      }
+    }
+    lastScrollTop.current = div.scrollTop;
+  };
+  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 = useComposedRefs2(resizeRef, scrollRef, divRef);
+  useOnScrollToBottom(() => {
+    scrollToBottom();
+  });
+  return autoScrollRef;
+};
+
+// src/primitives/thread/ThreadViewport.tsx
+import { jsx as jsx19 } from "react/jsx-runtime";
+var ThreadViewport = forwardRef14(({ autoScroll, onScroll, children, ...rest }, forwardedRef) => {
+  const autoScrollRef = useThreadViewportAutoScroll({
+    autoScroll
+  });
+  const ref = useComposedRefs3(forwardedRef, autoScrollRef);
+  return /* @__PURE__ */ jsx19(Primitive11.div, { ...rest, ref, children });
+});
+ThreadViewport.displayName = "ThreadViewport";
+
+// src/primitives/thread/ThreadMessages.tsx
+import { memo as memo2 } from "react";
+
+// src/context/providers/MessageProvider.tsx
+import { useEffect as useEffect5, useState as useState3 } from "react";
+import { create as create4 } from "zustand";
+
+// src/context/stores/EditComposer.ts
+import { create as create2 } from "zustand";
+
+// src/context/stores/BaseComposer.ts
+var makeBaseComposer = (set) => ({
+  value: "",
+  setValue: (value) => {
+    set({ value });
+  }
+});
+
+// src/context/stores/EditComposer.ts
+var makeEditComposerStore = ({
+  onEdit,
+  onSend
+}) => create2()((set, get, store) => ({
+  ...makeBaseComposer(set, get, store),
+  isEditing: false,
+  edit: () => {
+    const value = onEdit();
+    set({ isEditing: true, value });
+  },
+  send: () => {
+    const value = get().value;
+    set({ isEditing: false });
+    onSend(value);
+  },
+  cancel: () => {
+    if (!get().isEditing) return false;
+    set({ isEditing: false });
+    return true;
+  }
+}));
+
+// src/context/stores/MessageUtils.ts
+import { create as create3 } from "zustand";
+var makeMessageUtilsStore = () => create3((set) => ({
+  inProgressIndicator: null,
+  setInProgressIndicator: (value) => {
+    set({ inProgressIndicator: value });
+  },
+  isCopied: false,
+  setIsCopied: (value) => {
+    set({ isCopied: value });
+  },
+  isHovering: false,
+  setIsHovering: (value) => {
+    set({ isHovering: value });
+  }
+}));
+
+// src/context/providers/MessageProvider.tsx
+import { jsx as jsx20 } from "react/jsx-runtime";
+var getIsLast = (thread, message) => {
+  return thread.messages[thread.messages.length - 1]?.id === message.id;
+};
+var syncMessage = (thread, getBranches, useMessage, messageIndex) => {
+  const parentId = thread.messages[messageIndex - 1]?.id ?? null;
+  const message = thread.messages[messageIndex];
+  if (!message) return;
   const isLast = getIsLast(thread, message);
   const branches = getBranches(message.id);
   const currentState = useMessage.getState();
@@ -540,8 +1182,8 @@ var syncMessage = (thread, getBranches, useMessage, messageIndex) => {
 };
 var useMessageContext2 = (messageIndex) => {
   const { useThread, useThreadActions } = useThreadContext();
-  const [context] = useState(() => {
-    const useMessage = create3(() => ({}));
+  const [context] = useState3(() => {
+    const useMessage = create4(() => ({}));
     const useMessageUtils = makeMessageUtilsStore();
     const useEditComposer = makeEditComposerStore({
       onEdit: () => {
@@ -564,6 +1206,7 @@ var useMessageContext2 = (messageIndex) => {
         );
         useThreadActions.getState().append({
           parentId,
+          role: "user",
           content: [{ type: "text", text }, ...nonTextParts]
         });
       }
@@ -576,7 +1219,7 @@ var useMessageContext2 = (messageIndex) => {
     );
     return { useMessage, useMessageUtils, useEditComposer };
   });
-  useEffect3(() => {
+  useEffect5(() => {
     return useThread.subscribe((thread) => {
       syncMessage(
         thread,
@@ -585,565 +1228,74 @@ var useMessageContext2 = (messageIndex) => {
         messageIndex
       );
     });
-  }, [useThread, useThreadActions, context, messageIndex]);
-  return context;
-};
-var MessageProvider = ({
-  messageIndex,
-  children
-}) => {
-  const context = useMessageContext2(messageIndex);
-  return /* @__PURE__ */ jsx4(MessageContext.Provider, { value: context, children });
-};
-
-// src/primitives/composer/ComposerIf.tsx
-var ComposerIf = ({ children, ...query }) => {
-  const result = useComposerIf(query);
-  return result ? children : null;
-};
-
-// src/primitives/message/MessageIf.tsx
-var MessageIf = ({ children, ...query }) => {
-  const result = useMessageIf(query);
-  return result ? children : null;
-};
-
-// src/primitives/thread/ThreadMessages.tsx
-import { jsx as jsx5, jsxs as jsxs2 } from "react/jsx-runtime";
-var getComponents = (components) => {
-  return {
-    EditComposer: components.EditComposer ?? components.UserMessage ?? components.Message,
-    UserMessage: components.UserMessage ?? components.Message,
-    AssistantMessage: components.AssistantMessage ?? components.Message
-  };
-};
-var ThreadMessageImpl = ({
-  messageIndex,
-  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, {}) })
-    ] }),
-    /* @__PURE__ */ jsx5(MessageIf, { assistant: true, children: /* @__PURE__ */ jsx5(AssistantMessage, {}) })
-  ] });
-};
-var ThreadMessage = 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
-);
-var ThreadMessages = ({ components }) => {
-  const { useThread } = useThreadContext();
-  const messagesLength = useThread((t) => t.messages.length);
-  if (messagesLength === 0) return null;
-  return new Array(messagesLength).fill(null).map((_, idx) => {
-    const messageIndex = idx;
-    return /* @__PURE__ */ jsx5(
-      ThreadMessage,
-      {
-        messageIndex,
-        components
-      },
-      messageIndex
-    );
-  });
-};
-
-// src/utils/createActionButton.tsx
-import { composeEventHandlers as composeEventHandlers2 } 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";
-var createActionButton = (displayName, useActionButton) => {
-  const ActionButton = forwardRef3((props, forwardedRef) => {
-    const callback = useActionButton(props);
-    return /* @__PURE__ */ jsx6(
-      Primitive3.button,
-      {
-        type: "button",
-        disabled: !callback,
-        ...props,
-        ref: forwardedRef,
-        onClick: composeEventHandlers2(props.onClick, () => {
-          callback?.();
-        })
-      }
-    );
-  });
-  ActionButton.displayName = displayName;
-  return ActionButton;
-};
-
-// src/primitives/thread/ThreadScrollToBottom.tsx
-var ThreadScrollToBottom = createActionButton(
-  "ThreadScrollToBottom",
-  useThreadScrollToBottom
-);
-
-// src/primitives/thread/ThreadSuggestion.tsx
-var ThreadSuggestion = createActionButton(
-  "ThreadSuggestion",
-  useThreadSuggestion
-);
-
-// src/primitives/composer/index.ts
-var composer_exports = {};
-__export(composer_exports, {
-  Cancel: () => ComposerCancel,
-  If: () => ComposerIf,
-  Input: () => ComposerInput,
-  Root: () => ComposerRoot,
-  Send: () => ComposerSend
-});
-
-// src/primitives/composer/ComposerRoot.tsx
-import { composeEventHandlers as composeEventHandlers3 } from "@radix-ui/primitive";
-import { useComposedRefs as useComposedRefs2 } from "@radix-ui/react-compose-refs";
-import { Primitive as Primitive4 } from "@radix-ui/react-primitive";
-import {
-  forwardRef as forwardRef4,
-  useRef as useRef2
-} from "react";
-import { jsx as jsx7 } 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 handleSubmit = (e) => {
-      const composerState = useComposer.getState();
-      if (!composerState.isEditing) return;
-      e.preventDefault();
-      composerState.send();
-      useViewport.getState().scrollToBottom();
-    };
-    return /* @__PURE__ */ jsx7(
-      Primitive4.form,
-      {
-        ...rest,
-        ref,
-        onSubmit: composeEventHandlers3(onSubmit, handleSubmit)
-      }
-    );
-  }
-);
-ComposerRoot.displayName = "ComposerRoot";
-
-// src/primitives/composer/ComposerInput.tsx
-import { composeEventHandlers as composeEventHandlers4 } 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,
-  useRef as useRef3
-} from "react";
-import TextareaAutosize from "react-textarea-autosize";
-import { jsx as jsx8 } from "react/jsx-runtime";
-var ComposerInput = forwardRef5(
-  ({ autoFocus = false, asChild, disabled, onChange, onKeyDown, ...rest }, forwardedRef) => {
-    const { useThread } = useThreadContext();
-    const { useComposer, type } = useComposerContext();
-    const value = useComposer((c) => {
-      if (!c.isEditing) return "";
-      return c.value;
-    });
-    const Component = asChild ? Slot : TextareaAutosize;
-    const textareaRef = useRef3(null);
-    const ref = useComposedRefs3(forwardedRef, textareaRef);
-    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) {
-        const isRunning = useThread.getState().isRunning;
-        if (!isRunning) {
-          e.preventDefault();
-          textareaRef.current?.closest("form")?.requestSubmit();
-        }
-      }
-    };
-    const autoFocusEnabled = autoFocus && !disabled;
-    const focus = useCallback10(() => {
-      const textarea = textareaRef.current;
-      if (!textarea || !autoFocusEnabled) return;
-      textarea.focus();
-      textarea.setSelectionRange(
-        textareaRef.current.value.length,
-        textareaRef.current.value.length
-      );
-    }, [autoFocusEnabled]);
-    useEffect4(() => focus(), [focus]);
-    useOnScrollToBottom(() => {
-      if (type === "new") {
-        focus();
-      }
-    });
-    return /* @__PURE__ */ jsx8(
-      Component,
-      {
-        value,
-        ...rest,
-        ref,
-        autoFocus,
-        disabled,
-        onChange: composeEventHandlers4(onChange, (e) => {
-          const composerState = useComposer.getState();
-          if (!composerState.isEditing) return;
-          return composerState.setValue(e.target.value);
-        }),
-        onKeyDown: composeEventHandlers4(onKeyDown, handleKeyPress)
-      }
-    );
-  }
-);
-ComposerInput.displayName = "ComposerInput";
-
-// src/primitives/composer/ComposerSend.tsx
-var ComposerSend = createActionButton("ComposerSend", useComposerSend);
-
-// src/primitives/composer/ComposerCancel.tsx
-var ComposerCancel = createActionButton(
-  "ComposerCancel",
-  useComposerCancel
-);
-
-// src/primitives/message/index.ts
-var message_exports = {};
-__export(message_exports, {
-  Content: () => MessageContent,
-  If: () => MessageIf,
-  InProgress: () => MessageInProgress,
-  Root: () => MessageRoot
-});
-
-// 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 { jsx as jsx9 } from "react/jsx-runtime";
-var MessageRoot = forwardRef6(
-  ({ onMouseEnter, onMouseLeave, ...rest }, ref) => {
-    const { useMessageUtils } = useMessageContext();
-    const setIsHovering = useMessageUtils((s) => s.setIsHovering);
-    const handleMouseEnter = () => {
-      setIsHovering(true);
-    };
-    const handleMouseLeave = () => {
-      setIsHovering(false);
-    };
-    return /* @__PURE__ */ jsx9(
-      Primitive5.div,
-      {
-        ...rest,
-        ref,
-        onMouseEnter: composeEventHandlers5(onMouseEnter, handleMouseEnter),
-        onMouseLeave: composeEventHandlers5(onMouseLeave, handleMouseLeave)
-      }
-    );
-  }
-);
-MessageRoot.displayName = "MessageRoot";
-
-// src/primitives/message/MessageContent.tsx
-import { memo as memo2 } from "react";
-
-// src/context/providers/ContentPartProvider.tsx
-import { useEffect as useEffect5, useState as useState2 } from "react";
-import { create as create4 } from "zustand";
-import { jsx as jsx10 } from "react/jsx-runtime";
-var syncContentPart = ({ message }, useContentPart, partIndex) => {
-  const part = message.content[partIndex];
-  if (!part) return;
-  const messageStatus = message.role === "assistant" ? message.status : "done";
-  const status = partIndex === message.content.length - 1 ? messageStatus : "done";
-  const currentState = useContentPart.getState();
-  if (currentState.part === part && currentState.status === status) return;
-  useContentPart.setState(
-    Object.freeze({
-      part,
-      status
-    })
-  );
-};
-var useContentPartContext2 = (partIndex) => {
-  const { useMessage } = useMessageContext();
-  const [context] = useState2(() => {
-    const useContentPart = create4(
-      () => ({})
-    );
-    syncContentPart(useMessage.getState(), useContentPart, partIndex);
-    return { useContentPart };
-  });
-  useEffect5(() => {
-    syncContentPart(useMessage.getState(), context.useContentPart, partIndex);
-    return useMessage.subscribe((message) => {
-      syncContentPart(message, context.useContentPart, partIndex);
-    });
-  }, [context, useMessage, partIndex]);
+  }, [useThread, useThreadActions, context, messageIndex]);
   return context;
 };
-var ContentPartProvider = ({
-  partIndex,
+var MessageProvider = ({
+  messageIndex,
   children
 }) => {
-  const context = useContentPartContext2(partIndex);
-  return /* @__PURE__ */ jsx10(ContentPartContext.Provider, { value: context, children });
-};
-
-// src/primitives/contentPart/ContentPartDisplay.tsx
-var ContentPartDisplay = () => {
-  const display = useContentPartDisplay();
-  return display ?? null;
-};
-
-// src/primitives/contentPart/ContentPartInProgressIndicator.tsx
-var ContentPartInProgressIndicator = () => {
-  const indicator = useContentPartInProgressIndicator();
-  return indicator;
+  const context = useMessageContext2(messageIndex);
+  return /* @__PURE__ */ jsx20(MessageContext.Provider, { value: context, children });
 };
 
-// src/primitives/contentPart/ContentPartText.tsx
-import { Primitive as Primitive6 } from "@radix-ui/react-primitive";
-import { forwardRef as forwardRef7 } from "react";
-import { jsx as jsx11 } from "react/jsx-runtime";
-var ContentPartText = forwardRef7((props, forwardedRef) => {
-  const text = useContentPartText();
-  return /* @__PURE__ */ jsx11(Primitive6.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";
-var defaultComponents = {
-  Text: () => /* @__PURE__ */ jsxs3(Fragment, { children: [
-    /* @__PURE__ */ jsx12(ContentPartText, {}),
-    /* @__PURE__ */ jsx12(ContentPartInProgressIndicator, {})
-  ] }),
-  Image: () => null,
-  UI: () => /* @__PURE__ */ jsx12(ContentPartDisplay, {}),
-  tools: {
-    Fallback: (props) => {
-      const { useToolUIs } = useAssistantContext();
-      const Render = useToolUIs((s) => s.getToolUI(props.part.toolName));
-      if (!Render) return null;
-      return /* @__PURE__ */ jsx12(Render, { ...props });
-    }
-  }
-};
-var MessageContentPartComponent = ({
-  components: {
-    Text = defaultComponents.Text,
-    Image = defaultComponents.Image,
-    UI = defaultComponents.UI,
-    tools: { by_name = {}, Fallback = defaultComponents.tools.Fallback } = {}
-  } = {}
-}) => {
-  const { useThreadActions } = useThreadContext();
-  const addToolResult = useThreadActions((t) => t.addToolResult);
-  const { useContentPart } = useContentPartContext();
-  const { part, status } = useContentPart();
-  const type = part.type;
-  switch (type) {
-    case "text":
-      return /* @__PURE__ */ jsx12(Text, { part, status });
-    case "image":
-      return /* @__PURE__ */ jsx12(Image, { part, status });
-    case "ui":
-      return /* @__PURE__ */ jsx12(UI, { part, status });
-    case "tool-call": {
-      const Tool = by_name[part.toolName] || Fallback;
-      const addResult = (result) => addToolResult(part.toolCallId, result);
-      return /* @__PURE__ */ jsx12(Tool, { part, status, addResult });
-    }
-    default:
-      throw new Error(`Unknown content part type: ${type}`);
-  }
+// src/primitives/thread/ThreadMessages.tsx
+import { jsx as jsx21, jsxs as jsxs2 } from "react/jsx-runtime";
+var getComponents = (components) => {
+  return {
+    EditComposer: components.EditComposer ?? components.UserMessage ?? components.Message,
+    UserMessage: components.UserMessage ?? components.Message,
+    AssistantMessage: components.AssistantMessage ?? components.Message
+  };
 };
-var MessageContentPartImpl = ({
-  partIndex,
+var ThreadMessageImpl = ({
+  messageIndex,
   components
 }) => {
-  return /* @__PURE__ */ jsx12(ContentPartProvider, { partIndex, children: /* @__PURE__ */ jsx12(MessageContentPartComponent, { components }) });
+  const { UserMessage, EditComposer, AssistantMessage } = getComponents(components);
+  return /* @__PURE__ */ jsxs2(MessageProvider, { messageIndex, children: [
+    /* @__PURE__ */ jsxs2(MessageIf, { user: true, children: [
+      /* @__PURE__ */ jsx21(ComposerIf, { editing: false, children: /* @__PURE__ */ jsx21(UserMessage, {}) }),
+      /* @__PURE__ */ jsx21(ComposerIf, { editing: true, children: /* @__PURE__ */ jsx21(EditComposer, {}) })
+    ] }),
+    /* @__PURE__ */ jsx21(MessageIf, { assistant: true, children: /* @__PURE__ */ jsx21(AssistantMessage, {}) })
+  ] });
 };
-var MessageContentPart = memo2(
-  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
+var ThreadMessage = memo2(
+  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
 );
-var MessageContent = ({ components }) => {
-  const { useMessage } = useMessageContext();
-  const contentLength = useMessage((s) => s.message.content.length);
-  return new Array(contentLength).fill(null).map((_, idx) => {
-    const partIndex = idx;
-    return /* @__PURE__ */ jsx12(
-      MessageContentPart,
+var ThreadMessages = ({ components }) => {
+  const { useThread } = useThreadContext();
+  const messagesLength = useThread((t) => t.messages.length);
+  if (messagesLength === 0) return null;
+  return new Array(messagesLength).fill(null).map((_, idx) => {
+    const messageIndex = idx;
+    return /* @__PURE__ */ jsx21(
+      ThreadMessage,
       {
-        partIndex,
+        messageIndex,
         components
       },
-      partIndex
+      messageIndex
     );
   });
 };
 
-// src/primitives/message/MessageInProgress.tsx
-import { Primitive as Primitive7 } from "@radix-ui/react-primitive";
-import {
-  forwardRef as forwardRef8,
-  useMemo as useMemo2
-} from "react";
-import { jsx as jsx13 } from "react/jsx-runtime";
-var MessageInProgress = forwardRef8((props, ref) => {
-  const { useMessageUtils } = useMessageContext();
-  useMemo2(() => {
-    useMessageUtils.getState().setInProgressIndicator(/* @__PURE__ */ jsx13(Primitive7.span, { ...props, ref }));
-  }, [useMessageUtils, props, ref]);
-  return null;
-});
-MessageInProgress.displayName = "MessageInProgress";
-
-// src/primitives/branchPicker/index.ts
-var branchPicker_exports = {};
-__export(branchPicker_exports, {
-  Count: () => BranchPickerCount,
-  Next: () => BranchPickerNext,
-  Number: () => BranchPickerNumber,
-  Previous: () => BranchPickerPrevious,
-  Root: () => BranchPickerRoot
-});
-
-// src/primitives/branchPicker/BranchPickerNext.tsx
-var BranchPickerNext = createActionButton(
-  "BranchPickerNext",
-  useBranchPickerNext
-);
-
-// src/primitives/branchPicker/BranchPickerPrevious.tsx
-var BranchPickerPrevious = createActionButton(
-  "BranchPickerPrevious",
-  useBranchPickerPrevious
-);
-
-// src/primitives/branchPicker/BranchPickerCount.tsx
-import { Fragment as Fragment2, jsx as jsx14 } from "react/jsx-runtime";
-var BranchPickerCount = () => {
-  const branchCount = useBranchPickerCount();
-  return /* @__PURE__ */ jsx14(Fragment2, { children: branchCount });
-};
-
-// src/primitives/branchPicker/BranchPickerNumber.tsx
-import { Fragment as Fragment3, jsx as jsx15 } from "react/jsx-runtime";
-var BranchPickerNumber = () => {
-  const branchNumber = useBranchPickerNumber();
-  return /* @__PURE__ */ jsx15(Fragment3, { children: branchNumber });
-};
-
-// src/primitives/branchPicker/BranchPickerRoot.tsx
-import { Primitive as Primitive8 } from "@radix-ui/react-primitive";
-import { forwardRef as forwardRef9 } 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 }) });
-});
-BranchPickerRoot.displayName = "BranchPickerRoot";
-
-// src/primitives/actionBar/index.ts
-var actionBar_exports = {};
-__export(actionBar_exports, {
-  Copy: () => ActionBarCopy,
-  Edit: () => ActionBarEdit,
-  Reload: () => ActionBarReload,
-  Root: () => ActionBarRoot
-});
-
-// src/primitives/actionBar/ActionBarRoot.tsx
-import { Primitive as Primitive9 } from "@radix-ui/react-primitive";
-import { forwardRef as forwardRef10 } from "react";
-import { jsx as jsx17 } from "react/jsx-runtime";
-var useActionBarFloatStatus = ({
-  hideWhenRunning,
-  autohide,
-  autohideFloat
-}) => {
-  const { useThread } = useThreadContext();
-  const { useMessage, useMessageUtils } = useMessageContext();
-  return useCombinedStore(
-    [useThread, useMessage, useMessageUtils],
-    (t, m, mu) => {
-      if (hideWhenRunning && t.isRunning) return "hidden" /* Hidden */;
-      const autohideEnabled = autohide === "always" || autohide === "not-last" && !m.isLast;
-      if (!autohideEnabled) return "normal" /* Normal */;
-      if (!mu.isHovering) return "hidden" /* Hidden */;
-      if (autohideFloat === "always" || autohideFloat === "single-branch" && m.branches.length <= 1)
-        return "floating" /* Floating */;
-      return "normal" /* Normal */;
-    }
-  );
-};
-var ActionBarRoot = forwardRef10(({ hideWhenRunning, autohide, autohideFloat, ...rest }, ref) => {
-  const hideAndfloatStatus = useActionBarFloatStatus({
-    hideWhenRunning,
-    autohide,
-    autohideFloat
-  });
-  if (hideAndfloatStatus === "hidden" /* Hidden */) return null;
-  return /* @__PURE__ */ jsx17(
-    Primitive9.div,
-    {
-      ...hideAndfloatStatus === "floating" /* Floating */ ? { "data-floating": "true" } : null,
-      ...rest,
-      ref
-    }
-  );
-});
-ActionBarRoot.displayName = "ActionBarRoot";
-
-// src/primitives/actionBar/ActionBarCopy.tsx
-var ActionBarCopy = createActionButton(
-  "ActionBarCopy",
-  useActionBarCopy
-);
-
-// src/primitives/actionBar/ActionBarReload.tsx
-var ActionBarReload = createActionButton(
-  "ActionBarReload",
-  useActionBarReload
+// src/primitives/thread/ThreadScrollToBottom.tsx
+var ThreadScrollToBottom = createActionButton(
+  "ThreadScrollToBottom",
+  useThreadScrollToBottom
 );
 
-// src/primitives/actionBar/ActionBarEdit.tsx
-var ActionBarEdit = createActionButton(
-  "ActionBarEdit",
-  useActionBarEdit
+// src/primitives/thread/ThreadSuggestion.tsx
+var ThreadSuggestion = createActionButton(
+  "ThreadSuggestion",
+  useThreadSuggestion
 );
 
-// src/primitives/contentPart/index.ts
-var contentPart_exports = {};
-__export(contentPart_exports, {
-  Display: () => ContentPartDisplay,
-  Image: () => ContentPartImage,
-  InProgressIndicator: () => ContentPartInProgressIndicator,
-  Text: () => ContentPartText
-});
-
-// src/primitives/contentPart/ContentPartImage.tsx
-import { Primitive as Primitive10 } from "@radix-ui/react-primitive";
-import { forwardRef as forwardRef11 } from "react";
-import { jsx as jsx18 } from "react/jsx-runtime";
-var ContentPartImage = forwardRef11((props, forwardedRef) => {
-  const image = useContentPartImage();
-  return /* @__PURE__ */ jsx18(Primitive10.img, { src: image, ...props, ref: forwardedRef });
-});
-ContentPartImage.displayName = "ContentPartImage";
-
 // src/runtime/local/useLocalRuntime.tsx
-import { useInsertionEffect, useState as useState3 } from "react";
+import { useInsertionEffect, useState as useState4 } from "react";
 
 // src/utils/ModelConfigTypes.ts
 var mergeModelConfigs = (configSet) => {
@@ -1429,7 +1581,7 @@ var LocalRuntime = class {
 
 // src/runtime/local/useLocalRuntime.tsx
 var useLocalRuntime = (adapter) => {
-  const [runtime] = useState3(() => new LocalRuntime(adapter));
+  const [runtime] = useState4(() => new LocalRuntime(adapter));
   useInsertionEffect(() => {
     runtime.adapter = adapter;
   });
@@ -1440,7 +1592,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 useEffect7, useInsertionEffect as useInsertionEffect3, useRef as useRef5, useState as useState6 } from "react";
 
 // src/context/stores/AssistantModelConfig.ts
 import { create as create5 } from "zustand";
@@ -1505,30 +1657,45 @@ 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 useEffect6, useInsertionEffect as useInsertionEffect2, useRef as useRef4, useState as useState5 } from "react";
 
 // src/context/stores/Composer.ts
 import { create as create7 } from "zustand";
-var makeComposerStore = (useThread, useThreadActions) => create7()((set, get, store) => {
-  return {
-    ...makeBaseComposer(set, get, store),
-    isEditing: true,
-    send: () => {
-      const { setValue, value } = get();
-      setValue("");
-      useThreadActions.getState().append({
-        parentId: useThread.getState().messages.at(-1)?.id ?? null,
-        content: [{ type: "text", text: value }]
-      });
-    },
-    cancel: () => {
-      const thread = useThread.getState();
-      if (!thread.isRunning) return false;
-      useThreadActions.getState().cancelRun();
-      return true;
-    }
-  };
-});
+var makeComposerStore = (useThread, useThreadActions) => {
+  const focusListeners = /* @__PURE__ */ new Set();
+  return create7()((set, get, store) => {
+    return {
+      ...makeBaseComposer(set, get, store),
+      isEditing: true,
+      send: () => {
+        const { setValue, value } = get();
+        setValue("");
+        useThreadActions.getState().append({
+          parentId: useThread.getState().messages.at(-1)?.id ?? null,
+          role: "user",
+          content: [{ type: "text", text: value }]
+        });
+      },
+      cancel: () => {
+        const thread = useThread.getState();
+        if (!thread.isRunning) return false;
+        useThreadActions.getState().cancelRun();
+        return true;
+      },
+      focus: () => {
+        for (const listener of focusListeners) {
+          listener();
+        }
+      },
+      onFocus: (listener) => {
+        focusListeners.add(listener);
+        return () => {
+          focusListeners.delete(listener);
+        };
+      }
+    };
+  });
+};
 
 // src/context/stores/Thread.ts
 import { create as create8 } from "zustand";
@@ -1575,7 +1742,7 @@ var makeThreadActionStore = (runtimeRef) => {
 };
 
 // src/context/providers/ThreadProvider.tsx
-import { jsx as jsx19, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx22, jsxs as jsxs3 } from "react/jsx-runtime";
 var ThreadProvider = ({
   children,
   runtime
@@ -1584,7 +1751,7 @@ var ThreadProvider = ({
   useInsertionEffect2(() => {
     runtimeRef.current = runtime;
   });
-  const [context] = useState4(() => {
+  const [context] = useState5(() => {
     const useThread = makeThreadStore(runtimeRef);
     const useThreadActions = makeThreadActionStore(runtimeRef);
     const useViewport = makeThreadViewportStore();
@@ -1610,20 +1777,20 @@ var ThreadProvider = ({
     return runtime.subscribe(onRuntimeUpdate);
   }, [context, runtime]);
   const RuntimeSynchronizer = runtime.unstable_synchronizer;
-  return /* @__PURE__ */ jsxs4(ThreadContext.Provider, { value: context, children: [
-    RuntimeSynchronizer && /* @__PURE__ */ jsx19(RuntimeSynchronizer, {}),
+  return /* @__PURE__ */ jsxs3(ThreadContext.Provider, { value: context, children: [
+    RuntimeSynchronizer && /* @__PURE__ */ jsx22(RuntimeSynchronizer, {}),
     children
   ] });
 };
 
 // src/context/providers/AssistantProvider.tsx
-import { jsx as jsx20 } from "react/jsx-runtime";
+import { jsx as jsx23 } from "react/jsx-runtime";
 var AssistantProvider = ({ children, runtime }) => {
   const runtimeRef = useRef5(runtime);
   useInsertionEffect3(() => {
     runtimeRef.current = runtime;
   });
-  const [context] = useState5(() => {
+  const [context] = useState6(() => {
     const useModelConfig = makeAssistantModelConfigStore();
     const useToolUIs = makeAssistantToolUIsStore();
     return { useModelConfig, useToolUIs };
@@ -1632,13 +1799,13 @@ var AssistantProvider = ({ children, runtime }) => {
   useEffect7(() => {
     return runtime.registerModelConfigProvider(getModelCOnfig);
   }, [runtime, getModelCOnfig]);
-  return /* @__PURE__ */ jsx20(AssistantContext.Provider, { value: context, children: /* @__PURE__ */ jsx20(ThreadProvider, { runtime, children }) });
+  return /* @__PURE__ */ jsx23(AssistantContext.Provider, { value: context, children: /* @__PURE__ */ jsx23(ThreadProvider, { runtime, children }) });
 };
 
 // src/context/providers/AssistantRuntimeProvider.tsx
-import { jsx as jsx21 } from "react/jsx-runtime";
+import { jsx as jsx24 } from "react/jsx-runtime";
 var AssistantRuntimeProviderImpl = ({ children, runtime }) => {
-  return /* @__PURE__ */ jsx21(AssistantProvider, { runtime, children });
+  return /* @__PURE__ */ jsx24(AssistantProvider, { runtime, children });
 };
 var AssistantRuntimeProvider = memo3(AssistantRuntimeProviderImpl);
 
@@ -1650,6 +1817,7 @@ __export(internal_exports, {
 });
 export {
   actionBar_exports as ActionBarPrimitive,
+  assistantModal_exports as AssistantModalPrimitive,
   AssistantRuntimeProvider,
   branchPicker_exports as BranchPickerPrimitive,
   composer_exports as ComposerPrimitive,