@assistant-ui/react 0.5.46 → 0.5.48

package/dist/index.mjs

@@ -10,7 +10,7 @@ import {
   toLanguageModelMessages,
   toLanguageModelTools,
   toolResultStream
-} from "./chunk-5ZTUOAPH.mjs";
+} from "./chunk-TZO3D3VQ.mjs";
 import {
   __export
 } from "./chunk-BJPOCE4O.mjs";
@@ -125,21 +125,26 @@ var makeComposerStore = (useThreadRuntime) => {
       setValue(value) {
         get().setText(value);
       },
+      attachments: runtime.composer.attachments,
+      addAttachment: (file) => {
+        useThreadRuntime.getState().composer.addAttachment(file);
+      },
+      removeAttachment: (attachmentId) => {
+        useThreadRuntime.getState().composer.removeAttachment(attachmentId);
+      },
+      reset: () => {
+        useThreadRuntime.getState().composer.reset();
+      },
       text: runtime.composer.text,
-      setText: (value) => {
-        useThreadRuntime.getState().composer.setText(value);
+      setText: (text) => {
+        useThreadRuntime.getState().composer.setText(text);
       },
       canCancel: runtime.capabilities.cancel,
       isEditing: true,
+      isEmpty: runtime.composer.isEmpty,
       send: () => {
         const runtime2 = useThreadRuntime.getState();
-        const text = runtime2.composer.text;
-        runtime2.composer.setText("");
-        runtime2.append({
-          parentId: runtime2.messages.at(-1)?.id ?? null,
-          role: "user",
-          content: [{ type: "text", text }]
-        });
+        runtime2.composer.send();
       },
       cancel: () => {
         useThreadRuntime.getState().cancelRun();
@@ -275,6 +280,7 @@ __export(internal_exports, {
   BaseAssistantRuntime: () => BaseAssistantRuntime,
   MessageRepository: () => MessageRepository,
   ProxyConfigProvider: () => ProxyConfigProvider,
+  ThreadRuntimeComposer: () => ThreadRuntimeComposer,
   TooltipIconButton: () => TooltipIconButton,
   generateId: () => generateId,
   useSmooth: () => useSmooth,
@@ -282,6 +288,76 @@ __export(internal_exports, {
   withSmoothContextProvider: () => withSmoothContextProvider
 });
 
+// src/runtimes/utils/ThreadRuntimeComposer.tsx
+var ThreadRuntimeComposer = class {
+  constructor(runtime, notifySubscribers) {
+    this.runtime = runtime;
+    this.notifySubscribers = notifySubscribers;
+  }
+  _attachmentAdapter;
+  attachmentAccept = "*";
+  get isEmpty() {
+    return !this.text.trim() && !this.attachments.length;
+  }
+  setAttachmentAdapter(adapter) {
+    this._attachmentAdapter = adapter;
+    const accept = adapter?.accept ?? "*";
+    if (this.attachmentAccept !== accept) {
+      this.attachmentAccept = accept;
+      return true;
+    }
+    return false;
+  }
+  _attachments = [];
+  get attachments() {
+    return this._attachments;
+  }
+  async addAttachment(file) {
+    if (!this._attachmentAdapter)
+      throw new Error("Attachments are not supported");
+    const attachment = await this._attachmentAdapter.add({ file });
+    this._attachments = [...this._attachments, attachment];
+    this.notifySubscribers();
+  }
+  async removeAttachment(attachmentId) {
+    if (!this._attachmentAdapter)
+      throw new Error("Attachments are not supported");
+    const index = this._attachments.findIndex((a) => a.id === attachmentId);
+    if (index === -1) throw new Error("Attachment not found");
+    const attachment = this._attachments[index];
+    await this._attachmentAdapter.remove(attachment);
+    this._attachments = this._attachments.toSpliced(index, 1);
+    this.notifySubscribers();
+  }
+  _text = "";
+  get text() {
+    return this._text;
+  }
+  setText(value) {
+    this._text = value;
+    this.notifySubscribers();
+  }
+  reset() {
+    this._text = "";
+    this._attachments = [];
+    this.notifySubscribers();
+  }
+  async send() {
+    const attachments = this._attachmentAdapter ? await Promise.all(
+      this.attachments.map(
+        async (a) => await this._attachmentAdapter.send(a)
+      )
+    ) : [];
+    this.runtime.append({
+      parentId: this.runtime.messages.at(-1)?.id ?? null,
+      role: "user",
+      content: this.text ? [{ type: "text", text: this.text }] : [],
+      attachments
+    });
+    this.reset();
+  }
+};
+
 // src/utils/idUtils.tsx
 import { customAlphabet } from "nanoid/non-secure";
 var generateId = customAlphabet(
@@ -324,7 +400,8 @@ var fromCoreMessage = (message, {
       return {
         ...commonProps,
         role,
-        content: message.content
+        content: message.content,
+        attachments: []
       };
     case "system":
       return {
@@ -1101,31 +1178,37 @@ var LocalThreadRuntime = class {
     reload: true,
     cancel: true,
     unstable_copy: true,
-    speak: false
+    speak: false,
+    attachments: false
   };
   threadId;
   isDisabled = false;
   get messages() {
     return this.repository.getMessages();
   }
-  composer = {
-    text: "",
-    setText: (value) => {
-      this.composer.text = value;
-      this.notifySubscribers();
-    }
-  };
+  composer = new ThreadRuntimeComposer(
+    this,
+    this.notifySubscribers.bind(this)
+  );
   _options;
   get options() {
     return this._options;
   }
   set options({ initialMessages, ...options }) {
     this._options = options;
+    let hasUpdates = false;
     const canSpeak = options.adapters?.speech !== void 0;
     if (this.capabilities.speak !== canSpeak) {
       this.capabilities.speak = canSpeak;
-      this.notifySubscribers();
+      hasUpdates = true;
+    }
+    this.composer.setAttachmentAdapter(options.adapters?.attachments);
+    const canAttach = options.adapters?.attachments !== void 0;
+    if (this.capabilities.attachments !== canAttach) {
+      this.capabilities.attachments = canAttach;
+      hasUpdates = true;
     }
+    if (hasUpdates) this.notifySubscribers();
   }
   getBranches(messageId) {
     return this.repository.getBranches(messageId);
@@ -1144,6 +1227,7 @@ var LocalThreadRuntime = class {
       id: userMessageId,
       role: "user",
       content: message.content,
+      attachments: message.attachments ?? [],
       createdAt: /* @__PURE__ */ new Date()
     };
     this.repository.addOrUpdateMessage(message.parentId, userMessage);
@@ -1406,12 +1490,14 @@ var getAutoStatus = (isLast, isRunning) => isLast && isRunning ? AUTO_STATUS_RUN
 
 // src/runtimes/external-store/ThreadMessageLike.tsx
 var fromThreadMessageLike = (like, fallbackId, fallbackStatus) => {
-  const { role, id, createdAt, status } = like;
+  const { role, id, createdAt, attachments, status } = like;
   const common = {
     id: id ?? fallbackId,
     createdAt: createdAt ?? /* @__PURE__ */ new Date()
   };
   const content = typeof like.content === "string" ? [{ type: "text", text: like.content }] : like.content;
+  if (role !== "user" && attachments)
+    throw new Error("Attachments are only supported for user messages");
   switch (role) {
     case "assistant":
       return {
@@ -1456,7 +1542,8 @@ var fromThreadMessageLike = (like, fallbackId, fallbackStatus) => {
               throw new Error(`Unknown content part type: ${unhandledType}`);
             }
           }
-        })
+        }),
+        attachments: attachments ?? []
       };
     case "system":
       if (content.length !== 1 || content[0].type !== "text")
@@ -1497,7 +1584,8 @@ var ExternalStoreThreadRuntime = class {
     reload: false,
     cancel: false,
     unstable_copy: false,
-    speak: false
+    speak: false,
+    attachments: false
   };
   get capabilities() {
     return this._capabilities;
@@ -1507,13 +1595,10 @@ var ExternalStoreThreadRuntime = class {
   isDisabled;
   converter = new ThreadMessageConverter();
   _store;
-  composer = {
-    text: "",
-    setText: (value) => {
-      this.composer.text = value;
-      this.notifySubscribers();
-    }
-  };
+  composer = new ThreadRuntimeComposer(
+    this,
+    this.notifySubscribers.bind(this)
+  );
   constructor(store) {
     this.store = store;
   }
@@ -1532,9 +1617,12 @@ var ExternalStoreThreadRuntime = class {
       edit: this._store.onEdit !== void 0,
       reload: this._store.onReload !== void 0,
       cancel: this._store.onCancel !== void 0,
-      unstable_copy: this._store.unstable_capabilities?.copy !== null,
-      speak: this._store.onSpeak !== void 0
+      speak: this._store.onSpeak !== void 0,
+      unstable_copy: this._store.unstable_capabilities?.copy !== false,
+      // default true
+      attachments: !!this.store.adapters?.attachments
     };
+    this.composer.setAttachmentAdapter(this._store.adapters?.attachments);
     if (oldStore) {
       if (oldStore.convertMessage !== store.convertMessage) {
         this.converter = new ThreadMessageConverter();
@@ -1925,6 +2013,147 @@ var WebSpeechSynthesisAdapter = class {
   }
 };
 
+// src/runtimes/attachment/SimpleImageAttachmentAdapter.ts
+var SimpleImageAttachmentAdapter = class {
+  accept = "image/*";
+  async add(state) {
+    return {
+      id: state.file.name,
+      type: "image",
+      name: state.file.name,
+      file: state.file
+    };
+  }
+  async send(attachment) {
+    return {
+      ...attachment,
+      content: [
+        {
+          type: "image",
+          image: await getFileDataURL(attachment.file)
+        }
+      ]
+    };
+  }
+  async remove() {
+  }
+};
+var getFileDataURL = (file) => new Promise((resolve, reject) => {
+  const reader = new FileReader();
+  reader.onload = () => resolve(reader.result);
+  reader.onerror = (error) => reject(error);
+  reader.readAsDataURL(file);
+});
+
+// src/runtimes/attachment/SimpleTextAttachmentAdapter.ts
+var SimpleTextAttachmentAdapter = class {
+  accept = "text/plain,text/html,text/markdown,text/csv,text/xml,text/json,text/css";
+  async add(state) {
+    return {
+      id: state.file.name,
+      type: "document",
+      name: state.file.name,
+      file: state.file
+    };
+  }
+  async send(attachment) {
+    return {
+      ...attachment,
+      content: [
+        {
+          type: "text",
+          text: `<attachment name=${attachment.name}>
+${await getFileText(attachment.file)}
+</attachment>`
+        }
+      ]
+    };
+  }
+  async remove() {
+  }
+};
+var getFileText = (file) => new Promise((resolve, reject) => {
+  const reader = new FileReader();
+  reader.onload = () => resolve(reader.result);
+  reader.onerror = (error) => reject(error);
+  reader.readAsText(file);
+});
+
+// src/runtimes/attachment/CompositeAttachmentAdapter.ts
+function fileMatchesAccept(file, acceptString) {
+  if (acceptString === "*") {
+    return true;
+  }
+  const allowedTypes = acceptString.split(",").map((type) => type.trim().toLowerCase());
+  const fileExtension = "." + file.name.split(".").pop().toLowerCase();
+  const fileMimeType = file.type.toLowerCase();
+  for (const type of allowedTypes) {
+    if (type.startsWith(".") && type === fileExtension) {
+      return true;
+    }
+    if (type.includes("/") && type === fileMimeType) {
+      return true;
+    }
+    if (type === "image/*" || type === "video/*" || type === "audio/*") {
+      if (type.endsWith("/*")) {
+        const generalType = type.split("/")[0];
+        if (fileMimeType.startsWith(generalType + "/")) {
+          return true;
+        }
+      }
+    }
+  }
+  return false;
+}
+var CompositeAttachmentAdapter = class {
+  _adapters;
+  accept;
+  constructor(adapters) {
+    this._adapters = adapters;
+    const wildcardIdx = adapters.findIndex((a) => a.accept === "*");
+    if (wildcardIdx !== -1) {
+      if (wildcardIdx !== adapters.length - 1)
+        throw new Error(
+          "A wildcard adapter (handling all files) can only be specified as the last adapter."
+        );
+      this.accept = "*";
+    } else {
+      this.accept = adapters.map((a) => a.accept).join(",");
+    }
+  }
+  async add(state) {
+    for (const adapter of this._adapters) {
+      if (fileMatchesAccept(state.file, adapter.accept)) {
+        return adapter.add(state);
+      }
+    }
+    throw new Error("No matching adapter found for file");
+  }
+  async send(attachment) {
+    const adapters = this._adapters.slice();
+    for (const adapter of adapters) {
+      if (fileMatchesAccept(attachment.file, adapter.accept)) {
+        return adapter.send(attachment);
+      }
+    }
+    throw new Error("No matching adapter found for attachment");
+  }
+  async remove(attachment) {
+    const adapters = this._adapters.slice();
+    for (const adapter of adapters) {
+      if (fileMatchesAccept(attachment.file, adapter.accept)) {
+        return adapter.remove(attachment);
+      }
+    }
+    throw new Error("No matching adapter found for attachment");
+  }
+};
+
+// src/context/ReadonlyStore.ts
+var writableStore = (store) => {
+  return store;
+};
+
 // src/context/providers/ThreadProvider.tsx
 import { jsx as jsx6, jsxs as jsxs2 } from "react/jsx-runtime";
 var ThreadProvider = ({
@@ -1954,18 +2183,20 @@ var ThreadProvider = ({
       const state = getThreadStateFromRuntime(thread);
       if (oldState.threadId !== state.threadId || oldState.isDisabled !== state.isDisabled || oldState.isRunning !== state.isRunning || // TODO ensure capabilities is memoized
       oldState.capabilities !== state.capabilities) {
-        context.useThread.setState(
-          state,
-          true
-        );
+        writableStore(context.useThread).setState(state, true);
       }
       if (thread.messages !== context.useThreadMessages.getState()) {
-        context.useThreadMessages.setState(thread.messages, true);
+        writableStore(context.useThreadMessages).setState(
+          thread.messages,
+          true
+        );
       }
       const composerState = context.useComposer.getState();
-      if (thread.composer.text !== composerState.text || state.capabilities.cancel !== composerState.canCancel) {
-        context.useComposer.setState({
+      if (thread.composer.isEmpty !== composerState.isEmpty || thread.composer.text !== composerState.text || thread.composer.attachments !== composerState.attachments || state.capabilities.cancel !== composerState.canCancel) {
+        writableStore(context.useComposer).setState({
+          isEmpty: thread.composer.isEmpty,
           text: thread.composer.text,
+          attachments: thread.composer.attachments,
           canCancel: state.capabilities.cancel
         });
       }
@@ -1975,7 +2206,7 @@ var ThreadProvider = ({
   }, [provider, context]);
   useInsertionEffect2(
     () => provider.subscribe(() => {
-      context.useThreadRuntime.setState(provider.thread, true);
+      writableStore(context.useThreadRuntime).setState(provider.thread, true);
     }),
     [provider, context]
   );
@@ -2027,7 +2258,7 @@ var AssistantProvider = ({ children, runtime }) => {
     return runtime.registerModelConfigProvider(getModelConfig);
   }, [runtime, getModelConfig]);
   useEffect4(
-    () => context.useAssistantRuntime.setState(runtime, true),
+    () => writableStore(context.useAssistantRuntime).setState(runtime, true),
     [runtime, context]
   );
   return /* @__PURE__ */ jsx7(AssistantContext.Provider, { value: context, children: /* @__PURE__ */ jsx7(ThreadProvider, { provider: runtime, children }) });
@@ -2089,13 +2320,15 @@ var toAppendMessage = (useThreadMessages, message) => {
     return {
       parentId: useThreadMessages.getState().at(-1)?.id ?? null,
       role: "user",
-      content: [{ type: "text", text: message }]
+      content: [{ type: "text", text: message }],
+      attachments: []
     };
   }
   return {
     parentId: message.parentId ?? useThreadMessages.getState().at(-1)?.id ?? null,
     role: message.role ?? "user",
-    content: message.content
+    content: message.content,
+    attachments: message.attachments ?? []
   };
 };
 var useAppendMessage = () => {
@@ -2400,7 +2633,7 @@ var useComposerSend = () => {
   const { useComposer } = useComposerContext();
   const disabled = useCombinedStore(
     [useThread, useComposer],
-    (t, c) => t.isRunning || !c.isEditing || c.text.length === 0
+    (t, c) => t.isRunning || !c.isEditing || c.isEmpty
   );
   const callback = useCallback11(() => {
     const composerState = useComposer.getState();
@@ -2413,6 +2646,30 @@ var useComposerSend = () => {
   return callback;
 };
 
+// src/primitive-hooks/composer/useComposerAddAttachment.tsx
+import { useCallback as useCallback12 } from "react";
+var useComposerAddAttachment = () => {
+  const { useComposer, useThreadRuntime } = useThreadContext();
+  const disabled = useComposer((c) => !c.isEditing);
+  const callback = useCallback12(() => {
+    const { addAttachment } = useComposer.getState();
+    const { attachmentAccept } = useThreadRuntime.getState().composer;
+    const input = document.createElement("input");
+    input.type = "file";
+    if (attachmentAccept !== "*") {
+      input.accept = attachmentAccept;
+    }
+    input.onchange = (e) => {
+      const file = e.target.files?.[0];
+      if (!file) return;
+      addAttachment(file);
+    };
+    input.click();
+  }, [useComposer, useThreadRuntime]);
+  if (disabled) return null;
+  return callback;
+};
+
 // src/primitive-hooks/contentPart/useContentPartDisplay.tsx
 var useContentPartDisplay = () => {
   const { useContentPart } = useContentPartContext();
@@ -2467,6 +2724,10 @@ var useMessageIf = (props) => {
       if (props.copied === false && isCopied) return false;
       if (props.speaking === true && !isSpeaking) return false;
       if (props.speaking === false && isSpeaking) return false;
+      if (props.hasAttachments === true && (message.role !== "user" || !message.attachments.length))
+        return false;
+      if (props.hasAttachments === false && message.role === "user" && !!message.attachments.length)
+        return false;
       return true;
     }
   );
@@ -2495,11 +2756,11 @@ var useThreadEmpty = () => {
 };
 
 // src/primitive-hooks/thread/useThreadScrollToBottom.tsx
-import { useCallback as useCallback12 } from "react";
+import { useCallback as useCallback13 } from "react";
 var useThreadScrollToBottom = () => {
   const { useComposer, useViewport } = useThreadContext();
   const isAtBottom = useViewport((s) => s.isAtBottom);
-  const handleScrollToBottom = useCallback12(() => {
+  const handleScrollToBottom = useCallback13(() => {
     useViewport.getState().scrollToBottom();
     useComposer.getState().focus();
   }, [useViewport, useComposer]);
@@ -2508,7 +2769,7 @@ var useThreadScrollToBottom = () => {
 };
 
 // src/primitive-hooks/thread/useThreadSuggestion.tsx
-import { useCallback as useCallback13 } from "react";
+import { useCallback as useCallback14 } from "react";
 var useThreadSuggestion = ({
   prompt,
   autoSend
@@ -2516,7 +2777,7 @@ var useThreadSuggestion = ({
   const { useThread, useComposer } = useThreadContext();
   const append = useAppendMessage();
   const disabled = useThread((t) => t.isDisabled);
-  const callback = useCallback13(() => {
+  const callback = useCallback14(() => {
     const thread = useThread.getState();
     const composer = useComposer.getState();
     if (autoSend && !thread.isRunning) {
@@ -2844,6 +3105,7 @@ import { forwardRef as forwardRef14 } from "react";
 // src/primitives/message/index.ts
 var message_exports = {};
 __export(message_exports, {
+  Attachments: () => MessagePrimitiveAttachments,
   Content: () => MessagePrimitiveContent,
   If: () => MessagePrimitiveIf,
   InProgress: () => MessagePrimitiveInProgress,
@@ -2854,14 +3116,14 @@ __export(message_exports, {
 import { Primitive as Primitive5 } from "@radix-ui/react-primitive";
 import {
   forwardRef as forwardRef11,
-  useCallback as useCallback15
+  useCallback as useCallback16
 } from "react";
 
 // src/utils/hooks/useManagedRef.ts
-import { useCallback as useCallback14, useRef as useRef3 } from "react";
+import { useCallback as useCallback15, useRef as useRef3 } from "react";
 var useManagedRef = (callback) => {
   const cleanupRef = useRef3();
-  const ref = useCallback14(
+  const ref = useCallback15(
     (el) => {
       if (cleanupRef.current) {
         cleanupRef.current();
@@ -2880,7 +3142,7 @@ import { useComposedRefs } from "@radix-ui/react-compose-refs";
 import { jsx as jsx18 } from "react/jsx-runtime";
 var useIsHoveringRef = () => {
   const { useMessageUtils } = useMessageContext();
-  const callbackRef = useCallback15(
+  const callbackRef = useCallback16(
     (el) => {
       const setIsHovering = useMessageUtils.getState().setIsHovering;
       const handleMouseEnter = () => {
@@ -2975,7 +3237,7 @@ var useContentPartContext2 = (partIndex) => {
         partIndex
       );
       if (!newState) return;
-      context.useContentPart.setState(newState, true);
+      writableStore(context.useContentPart).setState(newState, true);
     };
     syncContentPart(useMessage.getState());
     return useMessage.subscribe(syncContentPart);
@@ -3119,17 +3381,7 @@ var MessagePrimitiveContent = ({
 }) => {
   const { useMessage } = useMessageContext();
   const contentLength = useMessage((s) => s.message.content.length) || 1;
-  return new Array(contentLength).fill(null).map((_, idx) => {
-    const partIndex = idx;
-    return /* @__PURE__ */ jsx22(
-      MessageContentPart,
-      {
-        partIndex,
-        components
-      },
-      partIndex
-    );
-  });
+  return Array.from({ length: contentLength }, (_, index) => /* @__PURE__ */ jsx22(MessageContentPart, { partIndex: index, components }, index));
 };
 MessagePrimitiveContent.displayName = "MessagePrimitive.Content";
 
@@ -3139,16 +3391,137 @@ var MessagePrimitiveInProgress = () => {
 };
 MessagePrimitiveInProgress.displayName = "MessagePrimitive.InProgress";
 
-// src/primitives/branchPicker/BranchPickerRoot.tsx
+// src/primitives/message/MessageAttachments.tsx
+import { memo as memo3 } from "react";
+
+// src/context/react/AttachmentContext.ts
+import { createContext as createContext6, useContext as useContext6 } from "react";
+var AttachmentContext = createContext6(
+  null
+);
+function useAttachmentContext(options) {
+  const context = useContext6(AttachmentContext);
+  if (options?.type === "composer" && context?.type !== "composer")
+    throw new Error(
+      "This component must be used within a ComposerPrimitive.Attachments component."
+    );
+  if (options?.type === "message" && context?.type !== "message")
+    throw new Error(
+      "This component must be used within a MessagePrimitive.Attachments component."
+    );
+  if (!options?.optional && !context)
+    throw new Error(
+      "This component must be used within a ComposerPrimitive.Attachments or MessagePrimitive.Attachments component."
+    );
+  return context;
+}
+
+// src/context/providers/MessageAttachmentProvider.tsx
+import { useEffect as useEffect10, useState as useState11 } from "react";
+import { create as create13 } from "zustand";
 import { jsx as jsx23 } from "react/jsx-runtime";
+var getAttachment = ({ message }, useAttachment, partIndex) => {
+  if (message.role !== "user") return null;
+  const attachments = message.attachments;
+  let attachment = attachments[partIndex];
+  if (!attachment) return null;
+  const currentState = useAttachment?.getState();
+  if (currentState && currentState.attachment === attachment) return null;
+  return Object.freeze({ attachment });
+};
+var useMessageAttachmentContext = (partIndex) => {
+  const { useMessage } = useMessageContext();
+  const [context] = useState11(
+    () => {
+      const useAttachment = create13(
+        () => getAttachment(useMessage.getState(), void 0, partIndex)
+      );
+      return { type: "message", useAttachment };
+    }
+  );
+  useEffect10(() => {
+    const syncAttachment = (messageState) => {
+      const newState = getAttachment(
+        messageState,
+        context.useAttachment,
+        partIndex
+      );
+      if (!newState) return;
+      writableStore(context.useAttachment).setState(newState, true);
+    };
+    syncAttachment(useMessage.getState());
+    return useMessage.subscribe(syncAttachment);
+  }, [context, useMessage, partIndex]);
+  return context;
+};
+var MessageAttachmentProvider = ({
+  attachmentIndex: partIndex,
+  children
+}) => {
+  const context = useMessageAttachmentContext(partIndex);
+  return /* @__PURE__ */ jsx23(AttachmentContext.Provider, { value: context, children });
+};
+
+// src/primitives/message/MessageAttachments.tsx
+import { jsx as jsx24 } from "react/jsx-runtime";
+var getComponent = (components, attachment) => {
+  const type = attachment.type;
+  switch (type) {
+    case "image":
+      return components?.Image ?? components?.Attachment;
+    case "document":
+      return components?.Document ?? components?.Attachment;
+    case "file":
+      return components?.File ?? components?.Attachment;
+    default:
+      const _exhaustiveCheck = type;
+      throw new Error(`Unknown attachment type: ${_exhaustiveCheck}`);
+  }
+};
+var AttachmentComponent = ({ components }) => {
+  const { useAttachment } = useAttachmentContext({ type: "message" });
+  const Component = useAttachment(
+    (a) => getComponent(components, a.attachment)
+  );
+  if (!Component) return null;
+  return /* @__PURE__ */ jsx24(Component, {});
+};
+var MessageAttachmentImpl = ({ components, attachmentIndex }) => {
+  return /* @__PURE__ */ jsx24(MessageAttachmentProvider, { attachmentIndex, children: /* @__PURE__ */ jsx24(AttachmentComponent, { components }) });
+};
+var MessageAttachment = memo3(
+  MessageAttachmentImpl,
+  (prev, next) => prev.attachmentIndex === next.attachmentIndex && prev.components?.Image === next.components?.Image && prev.components?.Document === next.components?.Document && prev.components?.File === next.components?.File && prev.components?.Attachment === next.components?.Attachment
+);
+var MessagePrimitiveAttachments = ({ components }) => {
+  const { useMessage } = useMessageContext();
+  const attachmentsCount = useMessage(({ message }) => {
+    if (message.role !== "user") return 0;
+    return message.attachments.length;
+  });
+  return Array.from({ length: attachmentsCount }, (_, index) => /* @__PURE__ */ jsx24(
+    MessageAttachment,
+    {
+      attachmentIndex: index,
+      components
+    },
+    index
+  ));
+};
+MessagePrimitiveAttachments.displayName = "MessagePrimitive.Attachments";
+
+// src/primitives/branchPicker/BranchPickerRoot.tsx
+import { jsx as jsx25 } from "react/jsx-runtime";
 var BranchPickerPrimitiveRoot = forwardRef14(({ hideWhenSingleBranch, ...rest }, ref) => {
-  return /* @__PURE__ */ jsx23(MessagePrimitiveIf, { hasBranches: hideWhenSingleBranch ? true : void 0, children: /* @__PURE__ */ jsx23(Primitive7.div, { ...rest, ref }) });
+  return /* @__PURE__ */ jsx25(MessagePrimitiveIf, { hasBranches: hideWhenSingleBranch ? true : void 0, children: /* @__PURE__ */ jsx25(Primitive7.div, { ...rest, ref }) });
 });
 BranchPickerPrimitiveRoot.displayName = "BranchPickerPrimitive.Root";
 
 // src/primitives/composer/index.ts
 var composer_exports = {};
 __export(composer_exports, {
+  AddAttachment: () => ComposerPrimitiveAddAttachment,
+  Attachments: () => ComposerPrimitiveAttachments,
   Cancel: () => ComposerPrimitiveCancel,
   If: () => ComposerPrimitiveIf,
   Input: () => ComposerPrimitiveInput,
@@ -3162,7 +3535,7 @@ import { Primitive as Primitive8 } from "@radix-ui/react-primitive";
 import {
   forwardRef as forwardRef15
 } from "react";
-import { jsx as jsx24 } from "react/jsx-runtime";
+import { jsx as jsx26 } from "react/jsx-runtime";
 var ComposerPrimitiveRoot = forwardRef15(({ onSubmit, ...rest }, forwardedRef) => {
   const send = useComposerSend();
   const handleSubmit = (e) => {
@@ -3170,7 +3543,7 @@ var ComposerPrimitiveRoot = forwardRef15(({ onSubmit, ...rest }, forwardedRef) =
     if (!send) return;
     send();
   };
-  return /* @__PURE__ */ jsx24(
+  return /* @__PURE__ */ jsx26(
     Primitive8.form,
     {
       ...rest,
@@ -3187,13 +3560,13 @@ import { useComposedRefs as useComposedRefs2 } from "@radix-ui/react-compose-ref
 import { Slot } from "@radix-ui/react-slot";
 import {
   forwardRef as forwardRef16,
-  useCallback as useCallback16,
-  useEffect as useEffect10,
+  useCallback as useCallback17,
+  useEffect as useEffect11,
   useRef as useRef4
 } from "react";
 import TextareaAutosize from "react-textarea-autosize";
 import { useEscapeKeydown as useEscapeKeydown2 } from "@radix-ui/react-use-escape-keydown";
-import { jsx as jsx25 } from "react/jsx-runtime";
+import { jsx as jsx27 } from "react/jsx-runtime";
 var ComposerPrimitiveInput = forwardRef16(
   ({
     autoFocus = false,
@@ -3232,7 +3605,7 @@ var ComposerPrimitiveInput = forwardRef16(
       }
     };
     const autoFocusEnabled = autoFocus && !isDisabled;
-    const focus = useCallback16(() => {
+    const focus = useCallback17(() => {
       const textarea = textareaRef.current;
       if (!textarea || !autoFocusEnabled) return;
       textarea.focus({ preventScroll: true });
@@ -3241,13 +3614,13 @@ var ComposerPrimitiveInput = forwardRef16(
         textareaRef.current.value.length
       );
     }, [autoFocusEnabled]);
-    useEffect10(() => focus(), [focus]);
+    useEffect11(() => focus(), [focus]);
     useOnComposerFocus(() => {
       if (type === "new") {
         focus();
       }
     });
-    return /* @__PURE__ */ jsx25(
+    return /* @__PURE__ */ jsx27(
       Component,
       {
         name: "input",
@@ -3268,23 +3641,10 @@ var ComposerPrimitiveInput = forwardRef16(
 ComposerPrimitiveInput.displayName = "ComposerPrimitive.Input";
 
 // src/primitives/composer/ComposerSend.tsx
-import { forwardRef as forwardRef17 } from "react";
-import { Primitive as Primitive9 } from "@radix-ui/react-primitive";
-import { jsx as jsx26 } from "react/jsx-runtime";
-var ComposerPrimitiveSend = forwardRef17(({ disabled, ...rest }, ref) => {
-  const { useComposer } = useComposerContext();
-  const hasValue = useComposer((c) => c.isEditing && c.text.length > 0);
-  return /* @__PURE__ */ jsx26(
-    Primitive9.button,
-    {
-      type: "submit",
-      ...rest,
-      ref,
-      disabled: disabled || !hasValue
-    }
-  );
-});
-ComposerPrimitiveSend.displayName = "ComposerPrimitive.Send";
+var ComposerPrimitiveSend = createActionButton(
+  "ComposerPrimitive.Send",
+  useComposerSend
+);
 
 // src/primitives/composer/ComposerCancel.tsx
 var ComposerPrimitiveCancel = createActionButton(
@@ -3292,6 +3652,101 @@ var ComposerPrimitiveCancel = createActionButton(
   useComposerCancel
 );
 
+// src/primitives/composer/ComposerAddAttachment.tsx
+var ComposerPrimitiveAddAttachment = createActionButton(
+  "ComposerPrimitive.AddAttachment",
+  useComposerAddAttachment
+);
+
+// src/primitives/composer/ComposerAttachments.tsx
+import { memo as memo4 } from "react";
+
+// src/context/providers/ComposerAttachmentProvider.tsx
+import { useEffect as useEffect12, useState as useState12 } from "react";
+import { create as create14 } from "zustand";
+import { jsx as jsx28 } from "react/jsx-runtime";
+var getAttachment2 = ({ attachments }, useAttachment, partIndex) => {
+  let attachment = attachments[partIndex];
+  if (!attachment) return null;
+  const currentState = useAttachment?.getState();
+  if (currentState && currentState.attachment === attachment) return null;
+  return Object.freeze({ attachment });
+};
+var useComposerAttachmentContext = (partIndex) => {
+  const { useComposer } = useThreadContext();
+  const [context] = useState12(
+    () => {
+      const useAttachment = create14(
+        () => getAttachment2(useComposer.getState(), void 0, partIndex)
+      );
+      return { type: "composer", useAttachment };
+    }
+  );
+  useEffect12(() => {
+    const syncAttachment = (composer) => {
+      const newState = getAttachment2(
+        composer,
+        context.useAttachment,
+        partIndex
+      );
+      if (!newState) return;
+      writableStore(context.useAttachment).setState(newState, true);
+    };
+    syncAttachment(useComposer.getState());
+    return useComposer.subscribe(syncAttachment);
+  }, [context, useComposer, partIndex]);
+  return context;
+};
+var ComposerAttachmentProvider = ({ attachmentIndex: partIndex, children }) => {
+  const context = useComposerAttachmentContext(partIndex);
+  return /* @__PURE__ */ jsx28(AttachmentContext.Provider, { value: context, children });
+};
+
+// src/primitives/composer/ComposerAttachments.tsx
+import { jsx as jsx29 } from "react/jsx-runtime";
+var getComponent2 = (components, attachment) => {
+  const type = attachment.type;
+  switch (type) {
+    case "image":
+      return components?.Image ?? components?.Attachment;
+    case "document":
+      return components?.Document ?? components?.Attachment;
+    case "file":
+      return components?.File ?? components?.Attachment;
+    default:
+      const _exhaustiveCheck = type;
+      throw new Error(`Unknown attachment type: ${_exhaustiveCheck}`);
+  }
+};
+var AttachmentComponent2 = ({ components }) => {
+  const { useAttachment } = useAttachmentContext({ type: "composer" });
+  const Component = useAttachment(
+    (a) => getComponent2(components, a.attachment)
+  );
+  if (!Component) return null;
+  return /* @__PURE__ */ jsx29(Component, {});
+};
+var ComposerAttachmentImpl = ({ components, attachmentIndex }) => {
+  return /* @__PURE__ */ jsx29(ComposerAttachmentProvider, { attachmentIndex, children: /* @__PURE__ */ jsx29(AttachmentComponent2, { components }) });
+};
+var ComposerAttachment = memo4(
+  ComposerAttachmentImpl,
+  (prev, next) => prev.attachmentIndex === next.attachmentIndex && prev.components?.Image === next.components?.Image && prev.components?.Document === next.components?.Document && prev.components?.File === next.components?.File && prev.components?.Attachment === next.components?.Attachment
+);
+var ComposerPrimitiveAttachments = ({ components }) => {
+  const { useComposer } = useThreadContext();
+  const attachmentsCount = useComposer((s) => s.attachments.length);
+  return Array.from({ length: attachmentsCount }, (_, index) => /* @__PURE__ */ jsx29(
+    ComposerAttachment,
+    {
+      attachmentIndex: index,
+      components
+    },
+    index
+  ));
+};
+ComposerPrimitiveAttachments.displayName = "ComposerPrimitive.Attachments";
+
 // src/primitives/composer/ComposerIf.tsx
 var ComposerPrimitiveIf = ({
   children,
@@ -3324,11 +3779,11 @@ __export(thread_exports, {
 });
 
 // src/primitives/thread/ThreadRoot.tsx
-import { Primitive as Primitive10 } from "@radix-ui/react-primitive";
-import { forwardRef as forwardRef18 } from "react";
-import { jsx as jsx27 } from "react/jsx-runtime";
-var ThreadPrimitiveRoot = forwardRef18((props, ref) => {
-  return /* @__PURE__ */ jsx27(Primitive10.div, { ...props, ref });
+import { Primitive as Primitive9 } from "@radix-ui/react-primitive";
+import { forwardRef as forwardRef17 } from "react";
+import { jsx as jsx30 } from "react/jsx-runtime";
+var ThreadPrimitiveRoot = forwardRef17((props, ref) => {
+  return /* @__PURE__ */ jsx30(Primitive9.div, { ...props, ref });
 });
 ThreadPrimitiveRoot.displayName = "ThreadPrimitive.Root";
 
@@ -3353,8 +3808,8 @@ ThreadPrimitiveIf.displayName = "ThreadPrimitive.If";
 
 // src/primitives/thread/ThreadViewport.tsx
 import { useComposedRefs as useComposedRefs4 } from "@radix-ui/react-compose-refs";
-import { Primitive as Primitive11 } from "@radix-ui/react-primitive";
-import { forwardRef as forwardRef19 } from "react";
+import { Primitive as Primitive10 } from "@radix-ui/react-primitive";
+import { forwardRef as forwardRef18 } from "react";
 
 // src/primitive-hooks/thread/useThreadViewportAutoScroll.tsx
 import { useComposedRefs as useComposedRefs3 } from "@radix-ui/react-compose-refs";
@@ -3362,10 +3817,10 @@ import { useRef as useRef5 } from "react";
 
 // src/utils/hooks/useOnResizeContent.tsx
 import { useCallbackRef as useCallbackRef3 } from "@radix-ui/react-use-callback-ref";
-import { useCallback as useCallback17 } from "react";
+import { useCallback as useCallback18 } from "react";
 var useOnResizeContent = (callback) => {
   const callbackRef = useCallbackRef3(callback);
-  const refCallback = useCallback17(
+  const refCallback = useCallback18(
     (el) => {
       const resizeObserver = new ResizeObserver(() => {
         callbackRef();
@@ -3402,11 +3857,11 @@ var useOnResizeContent = (callback) => {
 
 // src/utils/hooks/useOnScrollToBottom.tsx
 import { useCallbackRef as useCallbackRef4 } from "@radix-ui/react-use-callback-ref";
-import { useEffect as useEffect11 } from "react";
+import { useEffect as useEffect13 } from "react";
 var useOnScrollToBottom = (callback) => {
   const callbackRef = useCallbackRef4(callback);
   const { useViewport } = useThreadContext();
-  useEffect11(() => {
+  useEffect13(() => {
     return useViewport.getState().onScrollToBottom(() => {
       callbackRef();
     });
@@ -3438,9 +3893,7 @@ var useThreadViewportAutoScroll = ({
         isScrollingToBottomRef.current = false;
       }
       if (newIsAtBottom !== isAtBottom) {
-        useViewport.setState({
-          isAtBottom: newIsAtBottom
-        });
+        writableStore(useViewport).setState({ isAtBottom: newIsAtBottom });
       }
     }
     lastScrollTop.current = div.scrollTop;
@@ -3465,29 +3918,29 @@ var useThreadViewportAutoScroll = ({
 };
 
 // src/primitives/thread/ThreadViewport.tsx
-import { jsx as jsx28 } from "react/jsx-runtime";
-var ThreadPrimitiveViewport = forwardRef19(({ autoScroll, onScroll, children, ...rest }, forwardedRef) => {
+import { jsx as jsx31 } from "react/jsx-runtime";
+var ThreadPrimitiveViewport = forwardRef18(({ autoScroll, onScroll, children, ...rest }, forwardedRef) => {
   const autoScrollRef = useThreadViewportAutoScroll({
     autoScroll
   });
   const ref = useComposedRefs4(forwardedRef, autoScrollRef);
-  return /* @__PURE__ */ jsx28(Primitive11.div, { ...rest, ref, children });
+  return /* @__PURE__ */ jsx31(Primitive10.div, { ...rest, ref, children });
 });
 ThreadPrimitiveViewport.displayName = "ThreadPrimitive.Viewport";
 
 // src/primitives/thread/ThreadMessages.tsx
-import { memo as memo3 } from "react";
+import { memo as memo5 } from "react";
 
 // src/context/providers/MessageProvider.tsx
-import { useEffect as useEffect12, useState as useState11 } from "react";
-import { create as create15 } from "zustand";
+import { useEffect as useEffect14, useState as useState13 } from "react";
+import { create as create17 } from "zustand";
 
 // src/context/stores/EditComposer.ts
-import { create as create13 } from "zustand";
+import { create as create15 } from "zustand";
 var makeEditComposerStore = ({
   onEdit,
   onSend
-}) => create13()((set, get) => ({
+}) => create15()((set, get) => ({
   get value() {
     return get().text;
   },
@@ -3496,13 +3949,19 @@ var makeEditComposerStore = ({
   },
   text: "",
   setText: (text) => {
-    set({ text });
+    set({ text, isEmpty: text.trim().length === 0 });
   },
   canCancel: false,
   isEditing: false,
+  isEmpty: true,
   edit: () => {
     const text = onEdit();
-    set({ isEditing: true, canCancel: true, text });
+    set({
+      isEditing: true,
+      canCancel: true,
+      isEmpty: text.trim().length === 0,
+      text
+    });
   },
   send: () => {
     const text = get().text;
@@ -3515,8 +3974,8 @@ var makeEditComposerStore = ({
 }));
 
 // src/context/stores/MessageUtils.ts
-import { create as create14 } from "zustand";
-var makeMessageUtilsStore = () => create14((set) => {
+import { create as create16 } from "zustand";
+var makeMessageUtilsStore = () => create16((set) => {
   let utterance = null;
   return {
     isCopied: false,
@@ -3542,7 +4001,7 @@ var makeMessageUtilsStore = () => create14((set) => {
 });
 
 // src/context/providers/MessageProvider.tsx
-import { jsx as jsx29 } from "react/jsx-runtime";
+import { jsx as jsx32 } from "react/jsx-runtime";
 var getIsLast = (messages, message) => {
   return messages[messages.length - 1]?.id === message.id;
 };
@@ -3564,8 +4023,8 @@ var getMessageState = (messages, getBranches, useMessage, messageIndex) => {
 };
 var useMessageContext2 = (messageIndex) => {
   const { useThreadMessages, useThreadActions } = useThreadContext();
-  const [context] = useState11(() => {
-    const useMessage = create15(
+  const [context] = useState13(() => {
+    const useMessage = create17(
       () => getMessageState(
         useThreadMessages.getState(),
         useThreadActions.getState().getBranches,
@@ -3596,13 +4055,14 @@ var useMessageContext2 = (messageIndex) => {
         useThreadActions.getState().append({
           parentId,
           role: "user",
-          content: [{ type: "text", text }, ...nonTextParts]
+          content: [{ type: "text", text }, ...nonTextParts],
+          attachments: message.attachments
         });
       }
     });
     return { useMessage, useMessageUtils, useEditComposer };
   });
-  useEffect12(() => {
+  useEffect14(() => {
     const syncMessage = (thread) => {
       const newState = getMessageState(
         thread,
@@ -3611,10 +4071,7 @@ var useMessageContext2 = (messageIndex) => {
         messageIndex
       );
       if (!newState) return;
-      context.useMessage.setState(
-        newState,
-        true
-      );
+      writableStore(context.useMessage).setState(newState, true);
     };
     syncMessage(useThreadMessages.getState());
     return useThreadMessages.subscribe(syncMessage);
@@ -3626,11 +4083,11 @@ var MessageProvider = ({
   children
 }) => {
   const context = useMessageContext2(messageIndex);
-  return /* @__PURE__ */ jsx29(MessageContext.Provider, { value: context, children });
+  return /* @__PURE__ */ jsx32(MessageContext.Provider, { value: context, children });
 };
 
 // src/primitives/thread/ThreadMessages.tsx
-import { jsx as jsx30, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx33, jsxs as jsxs4 } from "react/jsx-runtime";
 var DEFAULT_SYSTEM_MESSAGE = () => null;
 var getComponents = (components) => {
   return {
@@ -3647,14 +4104,14 @@ var ThreadMessageImpl = ({
   const { UserMessage: UserMessage2, EditComposer: EditComposer2, AssistantMessage: AssistantMessage2, SystemMessage: SystemMessage2 } = getComponents(components);
   return /* @__PURE__ */ jsxs4(MessageProvider, { messageIndex, children: [
     /* @__PURE__ */ jsxs4(MessagePrimitiveIf, { user: true, children: [
-      /* @__PURE__ */ jsx30(ComposerPrimitiveIf, { editing: false, children: /* @__PURE__ */ jsx30(UserMessage2, {}) }),
-      /* @__PURE__ */ jsx30(ComposerPrimitiveIf, { editing: true, children: /* @__PURE__ */ jsx30(EditComposer2, {}) })
+      /* @__PURE__ */ jsx33(ComposerPrimitiveIf, { editing: false, children: /* @__PURE__ */ jsx33(UserMessage2, {}) }),
+      /* @__PURE__ */ jsx33(ComposerPrimitiveIf, { editing: true, children: /* @__PURE__ */ jsx33(EditComposer2, {}) })
     ] }),
-    /* @__PURE__ */ jsx30(MessagePrimitiveIf, { assistant: true, children: /* @__PURE__ */ jsx30(AssistantMessage2, {}) }),
-    /* @__PURE__ */ jsx30(MessagePrimitiveIf, { system: true, children: /* @__PURE__ */ jsx30(SystemMessage2, {}) })
+    /* @__PURE__ */ jsx33(MessagePrimitiveIf, { assistant: true, children: /* @__PURE__ */ jsx33(AssistantMessage2, {}) }),
+    /* @__PURE__ */ jsx33(MessagePrimitiveIf, { system: true, children: /* @__PURE__ */ jsx33(SystemMessage2, {}) })
   ] });
 };
-var ThreadMessage = memo3(
+var ThreadMessage = memo5(
   ThreadMessageImpl,
   (prev, next) => prev.messageIndex === next.messageIndex && prev.components.Message === next.components.Message && prev.components.UserMessage === next.components.UserMessage && prev.components.EditComposer === next.components.EditComposer && prev.components.AssistantMessage === next.components.AssistantMessage && prev.components.SystemMessage === next.components.SystemMessage
 );
@@ -3664,20 +4121,10 @@ var ThreadPrimitiveMessagesImpl = ({
   const { useThreadMessages } = useThreadContext();
   const messagesLength = useThreadMessages((t) => t.length);
   if (messagesLength === 0) return null;
-  return new Array(messagesLength).fill(null).map((_, idx) => {
-    const messageIndex = idx;
-    return /* @__PURE__ */ jsx30(
-      ThreadMessage,
-      {
-        messageIndex,
-        components
-      },
-      messageIndex
-    );
-  });
+  return Array.from({ length: messagesLength }, (_, index) => /* @__PURE__ */ jsx33(ThreadMessage, { messageIndex: index, components }, index));
 };
 ThreadPrimitiveMessagesImpl.displayName = "ThreadPrimitive.Messages";
-var ThreadPrimitiveMessages = memo3(
+var ThreadPrimitiveMessages = memo5(
   ThreadPrimitiveMessagesImpl,
   (prev, next) => prev.components?.Message === next.components?.Message && prev.components?.UserMessage === next.components?.UserMessage && prev.components?.EditComposer === next.components?.EditComposer && prev.components?.AssistantMessage === next.components?.AssistantMessage && prev.components?.SystemMessage === next.components?.SystemMessage
 );
@@ -3697,32 +4144,32 @@ var ThreadPrimitiveSuggestion = createActionButton(
 
 // src/ui/thread-config.tsx
 import {
-  createContext as createContext6,
-  useContext as useContext6
+  createContext as createContext7,
+  useContext as useContext7
 } from "react";
-import { Fragment as Fragment3, jsx as jsx31 } from "react/jsx-runtime";
-var ThreadConfigContext = createContext6({});
+import { Fragment as Fragment3, jsx as jsx34 } from "react/jsx-runtime";
+var ThreadConfigContext = createContext7({});
 var useThreadConfig = () => {
-  return useContext6(ThreadConfigContext);
+  return useContext7(ThreadConfigContext);
 };
 var ThreadConfigProvider = ({
   children,
   config
 }) => {
   const assistant = useAssistantContext({ optional: true });
-  const configProvider = config && Object.keys(config ?? {}).length > 0 ? /* @__PURE__ */ jsx31(ThreadConfigContext.Provider, { value: config, children }) : /* @__PURE__ */ jsx31(Fragment3, { children });
+  const configProvider = config && Object.keys(config ?? {}).length > 0 ? /* @__PURE__ */ jsx34(ThreadConfigContext.Provider, { value: config, children }) : /* @__PURE__ */ jsx34(Fragment3, { children });
   if (!config?.runtime) return configProvider;
   if (assistant) {
     throw new Error(
       "You provided a runtime to <Thread> while simulataneously using <AssistantRuntimeProvider>. This is not allowed."
     );
   }
-  return /* @__PURE__ */ jsx31(AssistantRuntimeProvider, { runtime: config.runtime, children: configProvider });
+  return /* @__PURE__ */ jsx34(AssistantRuntimeProvider, { runtime: config.runtime, children: configProvider });
 };
 ThreadConfigProvider.displayName = "ThreadConfigProvider";
 
 // src/ui/assistant-action-bar.tsx
-import { forwardRef as forwardRef20 } from "react";
+import { forwardRef as forwardRef19 } from "react";
 import {
   AudioLinesIcon,
   CheckIcon,
@@ -3730,7 +4177,7 @@ import {
   RefreshCwIcon,
   StopCircleIcon
 } from "lucide-react";
-import { Fragment as Fragment4, jsx as jsx32, jsxs as jsxs5 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx35, jsxs as jsxs5 } from "react/jsx-runtime";
 var useAllowCopy = (ensureCapability = false) => {
   const { assistantMessage: { allowCopy = true } = {} } = useThreadConfig();
   const { useThread } = useThreadContext();
@@ -3761,9 +4208,9 @@ var AssistantActionBar = () => {
       autohide: "not-last",
       autohideFloat: "single-branch",
       children: [
-        allowSpeak && /* @__PURE__ */ jsx32(AssistantActionBarSpeechControl, {}),
-        allowCopy && /* @__PURE__ */ jsx32(AssistantActionBarCopy, {}),
-        allowReload && /* @__PURE__ */ jsx32(AssistantActionBarReload, {})
+        allowSpeak && /* @__PURE__ */ jsx35(AssistantActionBarSpeechControl, {}),
+        allowCopy && /* @__PURE__ */ jsx35(AssistantActionBarCopy, {}),
+        allowReload && /* @__PURE__ */ jsx35(AssistantActionBarReload, {})
       ]
     }
   );
@@ -3773,36 +4220,35 @@ var AssistantActionBarRoot = withDefaults(actionBar_exports.Root, {
   className: "aui-assistant-action-bar-root"
 });
 AssistantActionBarRoot.displayName = "AssistantActionBarRoot";
-var AssistantActionBarCopy = forwardRef20((props, ref) => {
+var AssistantActionBarCopy = forwardRef19((props, ref) => {
   const {
     strings: {
       assistantMessage: { copy: { tooltip = "Copy" } = {} } = {}
     } = {}
   } = useThreadConfig();
-  return /* @__PURE__ */ jsx32(actionBar_exports.Copy, { asChild: true, children: /* @__PURE__ */ jsx32(TooltipIconButton, { tooltip, ...props, ref, children: props.children ?? /* @__PURE__ */ jsxs5(Fragment4, { children: [
-    /* @__PURE__ */ jsx32(message_exports.If, { copied: true, children: /* @__PURE__ */ jsx32(CheckIcon, {}) }),
-    /* @__PURE__ */ jsx32(message_exports.If, { copied: false, children: /* @__PURE__ */ jsx32(CopyIcon, {}) })
+  return /* @__PURE__ */ jsx35(actionBar_exports.Copy, { asChild: true, children: /* @__PURE__ */ jsx35(TooltipIconButton, { tooltip, ...props, ref, children: props.children ?? /* @__PURE__ */ jsxs5(Fragment4, { children: [
+    /* @__PURE__ */ jsx35(message_exports.If, { copied: true, children: /* @__PURE__ */ jsx35(CheckIcon, {}) }),
+    /* @__PURE__ */ jsx35(message_exports.If, { copied: false, children: /* @__PURE__ */ jsx35(CopyIcon, {}) })
   ] }) }) });
 });
 AssistantActionBarCopy.displayName = "AssistantActionBarCopy";
 var AssistantActionBarSpeechControl = () => {
   return /* @__PURE__ */ jsxs5(Fragment4, { children: [
-    /* @__PURE__ */ jsx32(message_exports.If, { speaking: false, children: /* @__PURE__ */ jsx32(AssistantActionBarSpeak, {}) }),
-    /* @__PURE__ */ jsx32(message_exports.If, { speaking: true, children: /* @__PURE__ */ jsx32(AssistantActionBarStopSpeaking, {}) })
+    /* @__PURE__ */ jsx35(message_exports.If, { speaking: false, children: /* @__PURE__ */ jsx35(AssistantActionBarSpeak, {}) }),
+    /* @__PURE__ */ jsx35(message_exports.If, { speaking: true, children: /* @__PURE__ */ jsx35(AssistantActionBarStopSpeaking, {}) })
   ] });
 };
-var AssistantActionBarSpeak = forwardRef20((props, ref) => {
+var AssistantActionBarSpeak = forwardRef19((props, ref) => {
   const {
     strings: {
       assistantMessage: { speak: { tooltip = "Read aloud" } = {} } = {}
     } = {}
   } = useThreadConfig();
   const allowSpeak = useAllowSpeak();
-  if (!allowSpeak) return null;
-  return /* @__PURE__ */ jsx32(actionBar_exports.Speak, { asChild: true, children: /* @__PURE__ */ jsx32(TooltipIconButton, { tooltip, ...props, ref, children: props.children ?? /* @__PURE__ */ jsx32(AudioLinesIcon, {}) }) });
+  return /* @__PURE__ */ jsx35(actionBar_exports.Speak, { disabled: !allowSpeak, asChild: true, children: /* @__PURE__ */ jsx35(TooltipIconButton, { tooltip, ...props, ref, children: props.children ?? /* @__PURE__ */ jsx35(AudioLinesIcon, {}) }) });
 });
 AssistantActionBarSpeak.displayName = "AssistantActionBarSpeak";
-var AssistantActionBarStopSpeaking = forwardRef20((props, ref) => {
+var AssistantActionBarStopSpeaking = forwardRef19((props, ref) => {
   const {
     strings: {
       assistantMessage: {
@@ -3811,19 +4257,17 @@ var AssistantActionBarStopSpeaking = forwardRef20((props, ref) => {
     } = {}
   } = useThreadConfig();
   const allowSpeak = useAllowSpeak();
-  if (!allowSpeak) return null;
-  return /* @__PURE__ */ jsx32(actionBar_exports.StopSpeaking, { asChild: true, children: /* @__PURE__ */ jsx32(TooltipIconButton, { tooltip: stopTooltip, ...props, ref, children: props.children ?? /* @__PURE__ */ jsx32(StopCircleIcon, {}) }) });
+  return /* @__PURE__ */ jsx35(actionBar_exports.StopSpeaking, { disabled: !allowSpeak, asChild: true, children: /* @__PURE__ */ jsx35(TooltipIconButton, { tooltip: stopTooltip, ...props, ref, children: props.children ?? /* @__PURE__ */ jsx35(StopCircleIcon, {}) }) });
 });
 AssistantActionBarStopSpeaking.displayName = "AssistantActionBarStopSpeaking";
-var AssistantActionBarReload = forwardRef20((props, ref) => {
+var AssistantActionBarReload = forwardRef19((props, ref) => {
   const {
     strings: {
       assistantMessage: { reload: { tooltip = "Refresh" } = {} } = {}
     } = {}
   } = useThreadConfig();
   const allowReload = useAllowReload();
-  if (!allowReload) return null;
-  return /* @__PURE__ */ jsx32(actionBar_exports.Reload, { asChild: true, children: /* @__PURE__ */ jsx32(TooltipIconButton, { tooltip, ...props, ref, children: /* @__PURE__ */ jsx32(RefreshCwIcon, {}) }) });
+  return /* @__PURE__ */ jsx35(actionBar_exports.Reload, { disabled: !allowReload, asChild: true, children: /* @__PURE__ */ jsx35(TooltipIconButton, { tooltip, ...props, ref, children: /* @__PURE__ */ jsx35(RefreshCwIcon, {}) }) });
 });
 AssistantActionBarReload.displayName = "AssistantActionBarReload";
 var exports = {
@@ -3840,25 +4284,25 @@ var assistant_action_bar_default = Object.assign(
 );
 
 // src/ui/assistant-message.tsx
-import { forwardRef as forwardRef22 } from "react";
+import { forwardRef as forwardRef21, useMemo as useMemo5 } from "react";
 
 // src/ui/branch-picker.tsx
-import { forwardRef as forwardRef21 } from "react";
+import { forwardRef as forwardRef20 } from "react";
 import { ChevronLeftIcon, ChevronRightIcon } from "lucide-react";
-import { jsx as jsx33, jsxs as jsxs6 } from "react/jsx-runtime";
-var useAllowBranchPicker = () => {
+import { jsx as jsx36, jsxs as jsxs6 } from "react/jsx-runtime";
+var useAllowBranchPicker = (ensureCapability = false) => {
   const { branchPicker: { allowBranchPicker = true } = {} } = useThreadConfig();
   const { useThread } = useThreadContext();
   const branchPickerSupported = useThread((t) => t.capabilities.edit);
-  return branchPickerSupported && allowBranchPicker;
+  return allowBranchPicker && (!ensureCapability || branchPickerSupported);
 };
 var BranchPicker = () => {
   const allowBranchPicker = useAllowBranchPicker();
   if (!allowBranchPicker) return null;
   return /* @__PURE__ */ jsxs6(BranchPickerRoot, { hideWhenSingleBranch: true, children: [
-    /* @__PURE__ */ jsx33(BranchPickerPrevious2, {}),
-    /* @__PURE__ */ jsx33(BranchPickerState, {}),
-    /* @__PURE__ */ jsx33(BranchPickerNext, {})
+    /* @__PURE__ */ jsx36(BranchPickerPrevious2, {}),
+    /* @__PURE__ */ jsx36(BranchPickerState, {}),
+    /* @__PURE__ */ jsx36(BranchPickerNext, {})
   ] });
 };
 BranchPicker.displayName = "BranchPicker";
@@ -3866,31 +4310,33 @@ var BranchPickerRoot = withDefaults(branchPicker_exports.Root, {
   className: "aui-branch-picker-root"
 });
 BranchPickerRoot.displayName = "BranchPickerRoot";
-var BranchPickerPrevious2 = forwardRef21((props, ref) => {
+var BranchPickerPrevious2 = forwardRef20((props, ref) => {
   const {
     strings: {
       branchPicker: { previous: { tooltip = "Previous" } = {} } = {}
     } = {}
   } = useThreadConfig();
-  return /* @__PURE__ */ jsx33(branchPicker_exports.Previous, { asChild: true, children: /* @__PURE__ */ jsx33(TooltipIconButton, { tooltip, ...props, ref, children: props.children ?? /* @__PURE__ */ jsx33(ChevronLeftIcon, {}) }) });
+  const allowBranchPicker = useAllowBranchPicker();
+  return /* @__PURE__ */ jsx36(branchPicker_exports.Previous, { disabled: !allowBranchPicker, asChild: true, children: /* @__PURE__ */ jsx36(TooltipIconButton, { tooltip, ...props, ref, children: props.children ?? /* @__PURE__ */ jsx36(ChevronLeftIcon, {}) }) });
 });
 BranchPickerPrevious2.displayName = "BranchPickerPrevious";
 var BranchPickerStateWrapper = withDefaults("span", {
   className: "aui-branch-picker-state"
 });
-var BranchPickerState = forwardRef21((props, ref) => {
+var BranchPickerState = forwardRef20((props, ref) => {
   return /* @__PURE__ */ jsxs6(BranchPickerStateWrapper, { ...props, ref, children: [
-    /* @__PURE__ */ jsx33(branchPicker_exports.Number, {}),
+    /* @__PURE__ */ jsx36(branchPicker_exports.Number, {}),
     " / ",
-    /* @__PURE__ */ jsx33(branchPicker_exports.Count, {})
+    /* @__PURE__ */ jsx36(branchPicker_exports.Count, {})
   ] });
 });
 BranchPickerState.displayName = "BranchPickerState";
-var BranchPickerNext = forwardRef21((props, ref) => {
+var BranchPickerNext = forwardRef20((props, ref) => {
   const {
     strings: { branchPicker: { next: { tooltip = "Next" } = {} } = {} } = {}
   } = useThreadConfig();
-  return /* @__PURE__ */ jsx33(branchPicker_exports.Next, { asChild: true, children: /* @__PURE__ */ jsx33(TooltipIconButton, { tooltip, ...props, ref, children: props.children ?? /* @__PURE__ */ jsx33(ChevronRightIcon, {}) }) });
+  const allowBranchPicker = useAllowBranchPicker();
+  return /* @__PURE__ */ jsx36(branchPicker_exports.Next, { disabled: !allowBranchPicker, asChild: true, children: /* @__PURE__ */ jsx36(TooltipIconButton, { tooltip, ...props, ref, children: props.children ?? /* @__PURE__ */ jsx36(ChevronRightIcon, {}) }) });
 });
 BranchPickerNext.displayName = "BranchPickerNext";
 var exports2 = {
@@ -3902,12 +4348,12 @@ var branch_picker_default = Object.assign(BranchPicker, exports2);
 
 // src/ui/base/avatar.tsx
 import * as AvatarPrimitive from "@radix-ui/react-avatar";
-import { jsx as jsx34, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx37, jsxs as jsxs7 } from "react/jsx-runtime";
 var Avatar = ({ src, alt, fallback }) => {
   if (src == null && fallback == null) return null;
   return /* @__PURE__ */ jsxs7(AvatarRoot, { children: [
-    src != null && /* @__PURE__ */ jsx34(AvatarImage, { src, alt }),
-    fallback != null && /* @__PURE__ */ jsx34(AvatarFallback, { children: fallback })
+    src != null && /* @__PURE__ */ jsx37(AvatarImage, { src, alt }),
+    fallback != null && /* @__PURE__ */ jsx37(AvatarFallback, { children: fallback })
   ] });
 };
 Avatar.displayName = "Avatar";
@@ -3926,10 +4372,10 @@ AvatarFallback.displayName = "AvatarFallback";
 
 // src/ui/content-part.tsx
 import classNames2 from "classnames";
-import { jsx as jsx35 } from "react/jsx-runtime";
+import { jsx as jsx38 } from "react/jsx-runtime";
 var Text = () => {
   const status = useSmoothStatus();
-  return /* @__PURE__ */ jsx35(
+  return /* @__PURE__ */ jsx38(
     contentPart_exports.Text,
     {
       className: classNames2(
@@ -3944,19 +4390,19 @@ var exports3 = { Text: withSmoothContextProvider(Text) };
 var content_part_default = exports3;
 
 // src/ui/assistant-message.tsx
-import { jsx as jsx36, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx39, jsxs as jsxs8 } from "react/jsx-runtime";
 var AssistantMessage = () => {
   return /* @__PURE__ */ jsxs8(AssistantMessageRoot, { children: [
-    /* @__PURE__ */ jsx36(AssistantMessageAvatar, {}),
-    /* @__PURE__ */ jsx36(AssistantMessageContent, {}),
-    /* @__PURE__ */ jsx36(branch_picker_default, {}),
-    /* @__PURE__ */ jsx36(assistant_action_bar_default, {})
+    /* @__PURE__ */ jsx39(AssistantMessageAvatar, {}),
+    /* @__PURE__ */ jsx39(AssistantMessageContent, {}),
+    /* @__PURE__ */ jsx39(branch_picker_default, {}),
+    /* @__PURE__ */ jsx39(assistant_action_bar_default, {})
   ] });
 };
 AssistantMessage.displayName = "AssistantMessage";
 var AssistantMessageAvatar = () => {
   const { assistantAvatar: avatar = { fallback: "A" } } = useThreadConfig();
-  return /* @__PURE__ */ jsx36(Avatar, { ...avatar });
+  return /* @__PURE__ */ jsx39(Avatar, { ...avatar });
 };
 var AssistantMessageRoot = withDefaults(message_exports.Root, {
   className: "aui-assistant-message-root"
@@ -3965,23 +4411,28 @@ AssistantMessageRoot.displayName = "AssistantMessageRoot";
 var AssistantMessageContentWrapper = withDefaults("div", {
   className: "aui-assistant-message-content"
 });
-var AssistantMessageContent = forwardRef22(({ components: componentsProp, ...rest }, ref) => {
+var AssistantMessageContent = forwardRef21(({ components: componentsProp, ...rest }, ref) => {
   const { tools, assistantMessage: { components = {} } = {} } = useThreadConfig();
-  return /* @__PURE__ */ jsx36(AssistantMessageContentWrapper, { ...rest, ref, children: /* @__PURE__ */ jsx36(
+  const toolsComponents = useMemo5(
+    () => ({
+      by_name: !tools ? void 0 : Object.fromEntries(
+        tools.map((t) => [
+          t.unstable_tool.toolName,
+          t.unstable_tool.render
+        ])
+      ),
+      Fallback: components.ToolFallback
+    }),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [...tools ?? [], components.ToolFallback]
+  );
+  return /* @__PURE__ */ jsx39(AssistantMessageContentWrapper, { ...rest, ref, children: /* @__PURE__ */ jsx39(
     message_exports.Content,
     {
       components: {
         ...componentsProp,
         Text: componentsProp?.Text ?? components.Text ?? content_part_default.Text,
-        tools: {
-          by_name: !tools ? void 0 : Object.fromEntries(
-            tools.map((t) => [
-              t.unstable_tool.toolName,
-              t.unstable_tool.render
-            ])
-          ),
-          Fallback: components.ToolFallback
-        }
+        tools: toolsComponents
       }
     }
   ) });
@@ -4007,12 +4458,12 @@ import { ArrowDownIcon } from "lucide-react";
 
 // src/ui/composer.tsx
 import { forwardRef as forwardRef23 } from "react";
-import { SendHorizontalIcon } from "lucide-react";
+import { PaperclipIcon, SendHorizontalIcon } from "lucide-react";
 
 // src/ui/base/CircleStopIcon.tsx
-import { jsx as jsx37 } from "react/jsx-runtime";
+import { jsx as jsx40 } from "react/jsx-runtime";
 var CircleStopIcon = () => {
-  return /* @__PURE__ */ jsx37(
+  return /* @__PURE__ */ jsx40(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
@@ -4020,18 +4471,79 @@ var CircleStopIcon = () => {
       fill: "currentColor",
       width: "16",
       height: "16",
-      children: /* @__PURE__ */ jsx37("rect", { width: "10", height: "10", x: "3", y: "3", rx: "2" })
+      children: /* @__PURE__ */ jsx40("rect", { width: "10", height: "10", x: "3", y: "3", rx: "2" })
     }
   );
 };
 CircleStopIcon.displayName = "CircleStopIcon";
 
+// src/ui/composer-attachment.tsx
+import { forwardRef as forwardRef22 } from "react";
+import { CircleXIcon } from "lucide-react";
+import { jsx as jsx41, jsxs as jsxs9 } from "react/jsx-runtime";
+var ComposerAttachmentRoot = withDefaults("div", {
+  className: "aui-composer-attachment-root"
+});
+ComposerAttachmentRoot.displayName = "ComposerAttachmentRoot";
+var ComposerAttachment2 = () => {
+  const { useAttachment } = useAttachmentContext({ type: "composer" });
+  const attachment = useAttachment((a) => a.attachment);
+  return /* @__PURE__ */ jsxs9(ComposerAttachmentRoot, { children: [
+    ".",
+    attachment.name.split(".").pop(),
+    /* @__PURE__ */ jsx41(ComposerAttachmentRemove, {})
+  ] });
+};
+ComposerAttachment2.displayName = "ComposerAttachment";
+var ComposerAttachmentRemove = forwardRef22((props, ref) => {
+  const {
+    strings: {
+      composer: { removeAttachment: { tooltip = "Remove file" } = {} } = {}
+    } = {}
+  } = useThreadConfig();
+  const { useComposer } = useThreadContext();
+  const { useAttachment } = useAttachmentContext();
+  const handleRemoveAttachment = () => {
+    useComposer.getState().removeAttachment(useAttachment.getState().attachment.id);
+  };
+  return /* @__PURE__ */ jsx41(
+    TooltipIconButton,
+    {
+      tooltip,
+      className: "aui-composer-attachment-remove",
+      side: "top",
+      ...props,
+      onClick: handleRemoveAttachment,
+      ref,
+      children: props.children ?? /* @__PURE__ */ jsx41(CircleXIcon, {})
+    }
+  );
+});
+ComposerAttachmentRemove.displayName = "ComposerAttachmentRemove";
+var exports5 = {
+  Root: ComposerAttachmentRoot,
+  Remove: ComposerAttachmentRemove
+};
+var composer_attachment_default = Object.assign(
+  ComposerAttachment2,
+  exports5
+);
+
 // src/ui/composer.tsx
-import { Fragment as Fragment5, jsx as jsx38, jsxs as jsxs9 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx42, jsxs as jsxs10 } from "react/jsx-runtime";
+var useAllowAttachments = (ensureCapability = false) => {
+  const { composer: { allowAttachments = true } = {} } = useThreadConfig();
+  const { useThread } = useThreadContext();
+  const attachmentsSupported = useThread((t) => t.capabilities.attachments);
+  return allowAttachments && (!ensureCapability || attachmentsSupported);
+};
 var Composer = () => {
-  return /* @__PURE__ */ jsxs9(ComposerRoot, { children: [
-    /* @__PURE__ */ jsx38(ComposerInput, { autoFocus: true }),
-    /* @__PURE__ */ jsx38(ComposerAction, {})
+  const allowAttachments = useAllowAttachments(true);
+  return /* @__PURE__ */ jsxs10(ComposerRoot, { children: [
+    allowAttachments && /* @__PURE__ */ jsx42(ComposerAttachments, {}),
+    allowAttachments && /* @__PURE__ */ jsx42(ComposerAddAttachment, {}),
+    /* @__PURE__ */ jsx42(ComposerInput, { autoFocus: true }),
+    /* @__PURE__ */ jsx42(ComposerAction, {})
   ] });
 };
 Composer.displayName = "Composer";
@@ -4051,10 +4563,47 @@ var ComposerInput = forwardRef23(
         composer: { input: { placeholder = "Write a message..." } = {} } = {}
       } = {}
     } = useThreadConfig();
-    return /* @__PURE__ */ jsx38(ComposerInputStyled, { placeholder, ...props, ref });
+    return /* @__PURE__ */ jsx42(ComposerInputStyled, { placeholder, ...props, ref });
   }
 );
 ComposerInput.displayName = "ComposerInput";
+var ComposerAttachmentsContainer = withDefaults("div", {
+  className: "aui-composer-attachments"
+});
+var ComposerAttachments = ({ components }) => {
+  return /* @__PURE__ */ jsx42(ComposerAttachmentsContainer, { children: /* @__PURE__ */ jsx42(
+    composer_exports.Attachments,
+    {
+      components: {
+        ...components,
+        Attachment: components?.Attachment ?? composer_attachment_default
+      }
+    }
+  ) });
+};
+var ComposerAttachButton = withDefaults(TooltipIconButton, {
+  variant: "default",
+  className: "aui-composer-attach"
+});
+var ComposerAddAttachment = forwardRef23((props, ref) => {
+  const {
+    strings: {
+      composer: { addAttachment: { tooltip = "Attach file" } = {} } = {}
+    } = {}
+  } = useThreadConfig();
+  const allowAttachments = useAllowAttachments();
+  return /* @__PURE__ */ jsx42(composer_exports.AddAttachment, { disabled: !allowAttachments, asChild: true, children: /* @__PURE__ */ jsx42(
+    ComposerAttachButton,
+    {
+      tooltip,
+      variant: "ghost",
+      ...props,
+      ref,
+      children: props.children ?? /* @__PURE__ */ jsx42(PaperclipIcon, {})
+    }
+  ) });
+});
+ComposerAddAttachment.displayName = "ComposerAddAttachment";
 var useAllowCancel = () => {
   const { useThread } = useThreadContext();
   const cancelSupported = useThread((t) => t.capabilities.cancel);
@@ -4062,10 +4611,10 @@ var useAllowCancel = () => {
 };
 var ComposerAction = () => {
   const allowCancel = useAllowCancel();
-  if (!allowCancel) return /* @__PURE__ */ jsx38(ComposerSend, {});
-  return /* @__PURE__ */ jsxs9(Fragment5, { children: [
-    /* @__PURE__ */ jsx38(thread_exports.If, { running: false, children: /* @__PURE__ */ jsx38(ComposerSend, {}) }),
-    /* @__PURE__ */ jsx38(thread_exports.If, { running: true, children: /* @__PURE__ */ jsx38(ComposerCancel, {}) })
+  if (!allowCancel) return /* @__PURE__ */ jsx42(ComposerSend, {});
+  return /* @__PURE__ */ jsxs10(Fragment5, { children: [
+    /* @__PURE__ */ jsx42(thread_exports.If, { running: false, children: /* @__PURE__ */ jsx42(ComposerSend, {}) }),
+    /* @__PURE__ */ jsx42(thread_exports.If, { running: true, children: /* @__PURE__ */ jsx42(ComposerCancel, {}) })
   ] });
 };
 ComposerAction.displayName = "ComposerAction";
@@ -4077,7 +4626,7 @@ var ComposerSend = forwardRef23((props, ref) => {
   const {
     strings: { composer: { send: { tooltip = "Send" } = {} } = {} } = {}
   } = useThreadConfig();
-  return /* @__PURE__ */ jsx38(composer_exports.Send, { asChild: true, children: /* @__PURE__ */ jsx38(ComposerSendButton, { tooltip, ...props, ref, children: props.children ?? /* @__PURE__ */ jsx38(SendHorizontalIcon, {}) }) });
+  return /* @__PURE__ */ jsx42(composer_exports.Send, { asChild: true, children: /* @__PURE__ */ jsx42(ComposerSendButton, { tooltip, ...props, ref, children: props.children ?? /* @__PURE__ */ jsx42(SendHorizontalIcon, {}) }) });
 });
 ComposerSend.displayName = "ComposerSend";
 var ComposerCancelButton = withDefaults(TooltipIconButton, {
@@ -4088,28 +4637,30 @@ var ComposerCancel = forwardRef23((props, ref) => {
   const {
     strings: { composer: { cancel: { tooltip = "Cancel" } = {} } = {} } = {}
   } = useThreadConfig();
-  return /* @__PURE__ */ jsx38(composer_exports.Cancel, { asChild: true, children: /* @__PURE__ */ jsx38(ComposerCancelButton, { tooltip, ...props, ref, children: props.children ?? /* @__PURE__ */ jsx38(CircleStopIcon, {}) }) });
+  return /* @__PURE__ */ jsx42(composer_exports.Cancel, { asChild: true, children: /* @__PURE__ */ jsx42(ComposerCancelButton, { tooltip, ...props, ref, children: props.children ?? /* @__PURE__ */ jsx42(CircleStopIcon, {}) }) });
 });
 ComposerCancel.displayName = "ComposerCancel";
-var exports5 = {
+var exports6 = {
   Root: ComposerRoot,
   Input: ComposerInput,
   Action: ComposerAction,
   Send: ComposerSend,
-  Cancel: ComposerCancel
+  Cancel: ComposerCancel,
+  AddAttachment: ComposerAddAttachment,
+  Attachments: ComposerAttachments
 };
-var composer_default = Object.assign(Composer, exports5);
+var composer_default = Object.assign(Composer, exports6);
 
 // src/ui/thread-welcome.tsx
 import { forwardRef as forwardRef24 } from "react";
-import { jsx as jsx39, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx43, jsxs as jsxs11 } from "react/jsx-runtime";
 var ThreadWelcome = () => {
-  return /* @__PURE__ */ jsxs10(ThreadWelcomeRoot, { children: [
-    /* @__PURE__ */ jsxs10(ThreadWelcomeCenter, { children: [
-      /* @__PURE__ */ jsx39(ThreadWelcomeAvatar, {}),
-      /* @__PURE__ */ jsx39(ThreadWelcomeMessage, {})
+  return /* @__PURE__ */ jsxs11(ThreadWelcomeRoot, { children: [
+    /* @__PURE__ */ jsxs11(ThreadWelcomeCenter, { children: [
+      /* @__PURE__ */ jsx43(ThreadWelcomeAvatar, {}),
+      /* @__PURE__ */ jsx43(ThreadWelcomeMessage, {})
     ] }),
-    /* @__PURE__ */ jsx39(ThreadWelcomeSuggestions, {})
+    /* @__PURE__ */ jsx43(ThreadWelcomeSuggestions, {})
   ] });
 };
 ThreadWelcome.displayName = "ThreadWelcome";
@@ -4121,20 +4672,20 @@ var ThreadWelcomeCenter = withDefaults("div", {
 });
 var ThreadWelcomeRoot = forwardRef24(
   (props, ref) => {
-    return /* @__PURE__ */ jsx39(thread_exports.Empty, { children: /* @__PURE__ */ jsx39(ThreadWelcomeRootStyled, { ...props, ref }) });
+    return /* @__PURE__ */ jsx43(thread_exports.Empty, { children: /* @__PURE__ */ jsx43(ThreadWelcomeRootStyled, { ...props, ref }) });
   }
 );
 ThreadWelcomeRoot.displayName = "ThreadWelcomeRoot";
 var ThreadWelcomeAvatar = () => {
   const { assistantAvatar: avatar = { fallback: "A" } } = useThreadConfig();
-  return /* @__PURE__ */ jsx39(Avatar, { ...avatar });
+  return /* @__PURE__ */ jsx43(Avatar, { ...avatar });
 };
 var ThreadWelcomeMessageStyled = withDefaults("p", {
   className: "aui-thread-welcome-message"
 });
 var ThreadWelcomeMessage = forwardRef24(({ message: messageProp, ...rest }, ref) => {
   const { welcome: { message = "How can I help you today?" } = {} } = useThreadConfig();
-  return /* @__PURE__ */ jsx39(ThreadWelcomeMessageStyled, { ...rest, ref, children: messageProp ?? message });
+  return /* @__PURE__ */ jsx43(ThreadWelcomeMessageStyled, { ...rest, ref, children: messageProp ?? message });
 });
 ThreadWelcomeMessage.displayName = "ThreadWelcomeMessage";
 var ThreadWelcomeSuggestionContainer = withDefaults("div", {
@@ -4146,25 +4697,25 @@ var ThreadWelcomeSuggestionStyled = withDefaults(thread_exports.Suggestion, {
 var ThreadWelcomeSuggestion = ({
   suggestion: { text, prompt }
 }) => {
-  return /* @__PURE__ */ jsx39(
+  return /* @__PURE__ */ jsx43(
     ThreadWelcomeSuggestionStyled,
     {
       prompt,
       method: "replace",
       autoSend: true,
-      children: /* @__PURE__ */ jsx39("span", { className: "aui-thread-welcome-suggestion-text", children: text ?? prompt })
+      children: /* @__PURE__ */ jsx43("span", { className: "aui-thread-welcome-suggestion-text", children: text ?? prompt })
     }
   );
 };
 var ThreadWelcomeSuggestions = () => {
   const { welcome: { suggestions } = {} } = useThreadConfig();
-  return /* @__PURE__ */ jsx39(ThreadWelcomeSuggestionContainer, { children: suggestions?.map((suggestion, idx) => {
+  return /* @__PURE__ */ jsx43(ThreadWelcomeSuggestionContainer, { children: suggestions?.map((suggestion, idx) => {
     const key = `${suggestion.prompt}-${idx}`;
-    return /* @__PURE__ */ jsx39(ThreadWelcomeSuggestion, { suggestion }, key);
+    return /* @__PURE__ */ jsx43(ThreadWelcomeSuggestion, { suggestion }, key);
   }) });
 };
 ThreadWelcomeSuggestions.displayName = "ThreadWelcomeSuggestions";
-var exports6 = {
+var exports7 = {
   Root: ThreadWelcomeRoot,
   Center: ThreadWelcomeCenter,
   Avatar: ThreadWelcomeAvatar,
@@ -4172,7 +4723,7 @@ var exports6 = {
   Suggestions: ThreadWelcomeSuggestions,
   Suggestion: ThreadWelcomeSuggestion
 };
-var thread_welcome_default = Object.assign(ThreadWelcome, exports6);
+var thread_welcome_default = Object.assign(ThreadWelcome, exports7);
 
 // src/ui/user-message.tsx
 import { forwardRef as forwardRef26 } from "react";
@@ -4180,7 +4731,7 @@ import { forwardRef as forwardRef26 } from "react";
 // src/ui/user-action-bar.tsx
 import { forwardRef as forwardRef25 } from "react";
 import { PencilIcon } from "lucide-react";
-import { jsx as jsx40 } from "react/jsx-runtime";
+import { jsx as jsx44 } from "react/jsx-runtime";
 var useAllowEdit = (ensureCapability = false) => {
   const { userMessage: { allowEdit = true } = {} } = useThreadConfig();
   const { useThread } = useThreadContext();
@@ -4190,7 +4741,7 @@ var useAllowEdit = (ensureCapability = false) => {
 var UserActionBar = () => {
   const allowEdit = useAllowEdit(true);
   if (!allowEdit) return null;
-  return /* @__PURE__ */ jsx40(UserActionBarRoot, { hideWhenRunning: true, autohide: "not-last", children: /* @__PURE__ */ jsx40(UserActionBarEdit, {}) });
+  return /* @__PURE__ */ jsx44(UserActionBarRoot, { hideWhenRunning: true, autohide: "not-last", children: /* @__PURE__ */ jsx44(UserActionBarEdit, {}) });
 };
 UserActionBar.displayName = "UserActionBar";
 var UserActionBarRoot = withDefaults(actionBar_exports.Root, {
@@ -4202,23 +4753,46 @@ var UserActionBarEdit = forwardRef25((props, ref) => {
     strings: { userMessage: { edit: { tooltip = "Edit" } = {} } = {} } = {}
   } = useThreadConfig();
   const allowEdit = useAllowEdit();
-  if (!allowEdit) return null;
-  return /* @__PURE__ */ jsx40(actionBar_exports.Edit, { asChild: true, children: /* @__PURE__ */ jsx40(TooltipIconButton, { tooltip, ...props, ref, children: props.children ?? /* @__PURE__ */ jsx40(PencilIcon, {}) }) });
+  return /* @__PURE__ */ jsx44(actionBar_exports.Edit, { disabled: !allowEdit, asChild: true, children: /* @__PURE__ */ jsx44(TooltipIconButton, { tooltip, ...props, ref, children: props.children ?? /* @__PURE__ */ jsx44(PencilIcon, {}) }) });
 });
 UserActionBarEdit.displayName = "UserActionBarEdit";
-var exports7 = {
+var exports8 = {
   Root: UserActionBarRoot,
   Edit: UserActionBarEdit
 };
-var user_action_bar_default = Object.assign(UserActionBar, exports7);
+var user_action_bar_default = Object.assign(UserActionBar, exports8);
+
+// src/ui/user-message-attachment.tsx
+import { jsxs as jsxs12 } from "react/jsx-runtime";
+var UserMessageAttachmentRoot = withDefaults("div", {
+  className: "aui-user-message-attachment-root"
+});
+UserMessageAttachmentRoot.displayName = "UserMessageAttachmentRoot";
+var UserMessageAttachment = () => {
+  const { useAttachment } = useAttachmentContext();
+  const attachment = useAttachment((a) => a.attachment);
+  return /* @__PURE__ */ jsxs12(UserMessageAttachmentRoot, { children: [
+    ".",
+    attachment.name.split(".").pop()
+  ] });
+};
+UserMessageAttachment.displayName = "UserMessageAttachment";
+var exports9 = {
+  Root: UserMessageAttachmentRoot
+};
+var user_message_attachment_default = Object.assign(
+  UserMessageAttachment,
+  exports9
+);
 
 // src/ui/user-message.tsx
-import { jsx as jsx41, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx45, jsxs as jsxs13 } from "react/jsx-runtime";
 var UserMessage = () => {
-  return /* @__PURE__ */ jsxs11(UserMessageRoot, { children: [
-    /* @__PURE__ */ jsx41(user_action_bar_default, {}),
-    /* @__PURE__ */ jsx41(UserMessageContent, {}),
-    /* @__PURE__ */ jsx41(branch_picker_default, {})
+  return /* @__PURE__ */ jsxs13(UserMessageRoot, { children: [
+    /* @__PURE__ */ jsx45(UserMessageAttachments, {}),
+    /* @__PURE__ */ jsx45(user_action_bar_default, {}),
+    /* @__PURE__ */ jsx45(UserMessageContent, {}),
+    /* @__PURE__ */ jsx45(branch_picker_default, {})
   ] });
 };
 UserMessage.displayName = "UserMessage";
@@ -4231,7 +4805,7 @@ var UserMessageContentWrapper = withDefaults("div", {
 });
 var UserMessageContent = forwardRef26(
   ({ components, ...props }, ref) => {
-    return /* @__PURE__ */ jsx41(UserMessageContentWrapper, { ...props, ref, children: /* @__PURE__ */ jsx41(
+    return /* @__PURE__ */ jsx45(UserMessageContentWrapper, { ...props, ref, children: /* @__PURE__ */ jsx45(
       message_exports.Content,
       {
         components: {
@@ -4243,21 +4817,38 @@ var UserMessageContent = forwardRef26(
   }
 );
 UserMessageContent.displayName = "UserMessageContent";
-var exports8 = {
+var UserMessageAttachmentsContainer = withDefaults("div", {
+  className: "aui-user-message-attachments"
+});
+var UserMessageAttachments = ({
+  components
+}) => {
+  return /* @__PURE__ */ jsx45(message_exports.If, { hasAttachments: true, children: /* @__PURE__ */ jsx45(UserMessageAttachmentsContainer, { children: /* @__PURE__ */ jsx45(
+    message_exports.Attachments,
+    {
+      components: {
+        ...components,
+        Attachment: components?.Attachment ?? user_message_attachment_default
+      }
+    }
+  ) }) });
+};
+var exports10 = {
   Root: UserMessageRoot,
-  Content: UserMessageContent
+  Content: UserMessageContent,
+  Attachments: UserMessageAttachments
 };
-var user_message_default = Object.assign(UserMessage, exports8);
+var user_message_default = Object.assign(UserMessage, exports10);
 
 // src/ui/edit-composer.tsx
 import { forwardRef as forwardRef27 } from "react";
-import { jsx as jsx42, jsxs as jsxs12 } from "react/jsx-runtime";
+import { jsx as jsx46, jsxs as jsxs14 } from "react/jsx-runtime";
 var EditComposer = () => {
-  return /* @__PURE__ */ jsxs12(EditComposerRoot, { children: [
-    /* @__PURE__ */ jsx42(EditComposerInput, {}),
-    /* @__PURE__ */ jsxs12(EditComposerFooter, { children: [
-      /* @__PURE__ */ jsx42(EditComposerCancel, {}),
-      /* @__PURE__ */ jsx42(EditComposerSend, {})
+  return /* @__PURE__ */ jsxs14(EditComposerRoot, { children: [
+    /* @__PURE__ */ jsx46(EditComposerInput, {}),
+    /* @__PURE__ */ jsxs14(EditComposerFooter, { children: [
+      /* @__PURE__ */ jsx46(EditComposerCancel, {}),
+      /* @__PURE__ */ jsx46(EditComposerSend, {})
     ] })
   ] });
 };
@@ -4281,7 +4872,7 @@ var EditComposerCancel = forwardRef27(
         editComposer: { cancel: { label = "Cancel" } = {} } = {}
       } = {}
     } = useThreadConfig();
-    return /* @__PURE__ */ jsx42(composer_exports.Cancel, { asChild: true, children: /* @__PURE__ */ jsx42(Button, { variant: "ghost", ...props, ref, children: props.children ?? label }) });
+    return /* @__PURE__ */ jsx46(composer_exports.Cancel, { asChild: true, children: /* @__PURE__ */ jsx46(Button, { variant: "ghost", ...props, ref, children: props.children ?? label }) });
   }
 );
 EditComposerCancel.displayName = "EditComposerCancel";
@@ -4290,28 +4881,28 @@ var EditComposerSend = forwardRef27(
     const {
       strings: { editComposer: { send: { label = "Send" } = {} } = {} } = {}
     } = useThreadConfig();
-    return /* @__PURE__ */ jsx42(composer_exports.Send, { asChild: true, children: /* @__PURE__ */ jsx42(Button, { ...props, ref, children: props.children ?? label }) });
+    return /* @__PURE__ */ jsx46(composer_exports.Send, { asChild: true, children: /* @__PURE__ */ jsx46(Button, { ...props, ref, children: props.children ?? label }) });
   }
 );
 EditComposerSend.displayName = "EditComposerSend";
-var exports9 = {
+var exports11 = {
   Root: EditComposerRoot,
   Input: EditComposerInput,
   Footer: EditComposerFooter,
   Cancel: EditComposerCancel,
   Send: EditComposerSend
 };
-var edit_composer_default = Object.assign(EditComposer, exports9);
+var edit_composer_default = Object.assign(EditComposer, exports11);
 
 // src/ui/thread.tsx
-import { jsx as jsx43, jsxs as jsxs13 } from "react/jsx-runtime";
+import { jsx as jsx47, jsxs as jsxs15 } from "react/jsx-runtime";
 var Thread = (config) => {
-  return /* @__PURE__ */ jsx43(ThreadRoot, { config, children: /* @__PURE__ */ jsxs13(ThreadViewport, { children: [
-    /* @__PURE__ */ jsx43(thread_welcome_default, {}),
-    /* @__PURE__ */ jsx43(ThreadMessages, {}),
-    /* @__PURE__ */ jsxs13(ThreadViewportFooter, { children: [
-      /* @__PURE__ */ jsx43(ThreadScrollToBottom, {}),
-      /* @__PURE__ */ jsx43(composer_default, {})
+  return /* @__PURE__ */ jsx47(ThreadRoot, { config, children: /* @__PURE__ */ jsxs15(ThreadViewport, { children: [
+    /* @__PURE__ */ jsx47(thread_welcome_default, {}),
+    /* @__PURE__ */ jsx47(ThreadMessages, {}),
+    /* @__PURE__ */ jsxs15(ThreadViewportFooter, { children: [
+      /* @__PURE__ */ jsx47(ThreadScrollToBottom, {}),
+      /* @__PURE__ */ jsx47(composer_default, {})
     ] })
   ] }) });
 };
@@ -4320,7 +4911,7 @@ var ThreadRootStyled = withDefaults(thread_exports.Root, {
 });
 var ThreadRoot = forwardRef28(
   ({ config, ...props }, ref) => {
-    return /* @__PURE__ */ jsx43(ThreadConfigProvider, { config, children: /* @__PURE__ */ jsx43(ThreadRootStyled, { ...props, ref }) });
+    return /* @__PURE__ */ jsx47(ThreadConfigProvider, { config, children: /* @__PURE__ */ jsx47(ThreadRootStyled, { ...props, ref }) });
   }
 );
 ThreadRoot.displayName = "ThreadRoot";
@@ -4334,7 +4925,7 @@ var ThreadViewportFooter = withDefaults("div", {
 ThreadViewportFooter.displayName = "ThreadViewportFooter";
 var SystemMessage = () => null;
 var ThreadMessages = ({ components, ...rest }) => {
-  return /* @__PURE__ */ jsx43(
+  return /* @__PURE__ */ jsx47(
     thread_exports.Messages,
     {
       components: {
@@ -4358,33 +4949,33 @@ var ThreadScrollToBottom = forwardRef28((props, ref) => {
       thread: { scrollToBottom: { tooltip = "Scroll to bottom" } = {} } = {}
     } = {}
   } = useThreadConfig();
-  return /* @__PURE__ */ jsx43(thread_exports.ScrollToBottom, { asChild: true, children: /* @__PURE__ */ jsx43(ThreadScrollToBottomIconButton, { tooltip, ...props, ref, children: props.children ?? /* @__PURE__ */ jsx43(ArrowDownIcon, {}) }) });
+  return /* @__PURE__ */ jsx47(thread_exports.ScrollToBottom, { asChild: true, children: /* @__PURE__ */ jsx47(ThreadScrollToBottomIconButton, { tooltip, ...props, ref, children: props.children ?? /* @__PURE__ */ jsx47(ArrowDownIcon, {}) }) });
 });
 ThreadScrollToBottom.displayName = "ThreadScrollToBottom";
-var exports10 = {
+var exports12 = {
   Root: ThreadRoot,
   Viewport: ThreadViewport,
   Messages: ThreadMessages,
   ScrollToBottom: ThreadScrollToBottom,
   ViewportFooter: ThreadViewportFooter
 };
-var thread_default = Object.assign(Thread, exports10);
+var thread_default = Object.assign(Thread, exports12);
 
 // src/ui/assistant-modal.tsx
-import { Fragment as Fragment6, jsx as jsx44, jsxs as jsxs14 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx48, jsxs as jsxs16 } from "react/jsx-runtime";
 var AssistantModal = (config) => {
-  return /* @__PURE__ */ jsxs14(AssistantModalRoot, { config, children: [
-    /* @__PURE__ */ jsx44(AssistantModalTrigger, {}),
-    /* @__PURE__ */ jsx44(AssistantModalContent, { children: /* @__PURE__ */ jsx44(thread_default, {}) })
+  return /* @__PURE__ */ jsxs16(AssistantModalRoot, { config, children: [
+    /* @__PURE__ */ jsx48(AssistantModalTrigger, {}),
+    /* @__PURE__ */ jsx48(AssistantModalContent, { children: /* @__PURE__ */ jsx48(thread_default, {}) })
   ] });
 };
 AssistantModal.displayName = "AssistantModal";
 var AssistantModalRoot = ({ config, ...props }) => {
-  return /* @__PURE__ */ jsx44(ThreadConfigProvider, { config, children: /* @__PURE__ */ jsx44(assistantModal_exports.Root, { ...props }) });
+  return /* @__PURE__ */ jsx48(ThreadConfigProvider, { config, children: /* @__PURE__ */ jsx48(assistantModal_exports.Root, { ...props }) });
 };
 AssistantModalRoot.displayName = "AssistantModalRoot";
 var AssistantModalTrigger = forwardRef29((props, ref) => {
-  return /* @__PURE__ */ jsx44(AssistantModalAnchor, { children: /* @__PURE__ */ jsx44(assistantModal_exports.Trigger, { asChild: true, children: /* @__PURE__ */ jsx44(AssistantModalButton, { ...props, ref }) }) });
+  return /* @__PURE__ */ jsx48(AssistantModalAnchor, { children: /* @__PURE__ */ jsx48(assistantModal_exports.Trigger, { asChild: true, children: /* @__PURE__ */ jsx48(AssistantModalButton, { ...props, ref }) }) });
 });
 AssistantModalTrigger.displayName = "AssistantModalTrigger";
 var AssistantModalAnchor = withDefaults(assistantModal_exports.Anchor, {
@@ -4409,7 +5000,7 @@ var AssistantModalButton = forwardRef29(({ "data-state": state, ...rest }, ref)
     } = {}
   } = useThreadConfig();
   const tooltip = state === "open" ? openTooltip : closedTooltip;
-  return /* @__PURE__ */ jsx44(
+  return /* @__PURE__ */ jsx48(
     ModalButtonStyled,
     {
       side: "left",
@@ -4417,15 +5008,15 @@ var AssistantModalButton = forwardRef29(({ "data-state": state, ...rest }, ref)
       "data-state": state,
       ...rest,
       ref,
-      children: rest.children ?? /* @__PURE__ */ jsxs14(Fragment6, { children: [
-        /* @__PURE__ */ jsx44(
+      children: rest.children ?? /* @__PURE__ */ jsxs16(Fragment6, { children: [
+        /* @__PURE__ */ jsx48(
           BotIcon,
           {
             "data-state": state,
             className: "aui-modal-button-closed-icon"
           }
         ),
-        /* @__PURE__ */ jsx44(
+        /* @__PURE__ */ jsx48(
           ChevronDownIcon,
           {
             "data-state": state,
@@ -4442,14 +5033,14 @@ var AssistantModalContent = withDefaults(assistantModal_exports.Content, {
   sideOffset: 16
 });
 AssistantModalContent.displayName = "AssistantModalContent";
-var exports11 = {
+var exports13 = {
   Root: AssistantModalRoot,
   Trigger: AssistantModalTrigger,
   Content: AssistantModalContent,
   Button: AssistantModalButton,
   Anchor: AssistantModalAnchor
 };
-var assistant_modal_default = Object.assign(AssistantModal, exports11);
+var assistant_modal_default = Object.assign(AssistantModal, exports13);
 export {
   actionBar_exports as ActionBarPrimitive,
   assistant_action_bar_default as AssistantActionBar,
@@ -4460,7 +5051,9 @@ export {
   branch_picker_default as BranchPicker,
   branchPicker_exports as BranchPickerPrimitive,
   composer_default as Composer,
+  composer_attachment_default as ComposerAttachment,
   composer_exports as ComposerPrimitive,
+  CompositeAttachmentAdapter,
   content_part_default as ContentPart,
   contentPart_exports as ContentPartPrimitive,
   EdgeChatAdapter,
@@ -4468,12 +5061,15 @@ export {
   ExternalStoreRuntime,
   internal_exports as INTERNAL,
   message_exports as MessagePrimitive,
+  SimpleImageAttachmentAdapter,
+  SimpleTextAttachmentAdapter,
   thread_default as Thread,
   ThreadConfigProvider,
   thread_exports as ThreadPrimitive,
   thread_welcome_default as ThreadWelcome,
   user_action_bar_default as UserActionBar,
   user_message_default as UserMessage,
+  user_message_attachment_default as UserMessageAttachment,
   WebSpeechSynthesisAdapter,
   fromCoreMessage,
   fromCoreMessages,
@@ -4502,6 +5098,7 @@ export {
   useBranchPickerNext,
   useBranchPickerNumber,
   useBranchPickerPrevious,
+  useComposerAddAttachment,
   useComposerCancel,
   useComposerContext,
   useComposerIf,