@assistant-ui/react 0.5.46 → 0.5.48

package/dist/index.js

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { newObj[key] = obj[key]; } } } newObj.default = obj; return newObj; } } function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; } var _class; var _class2; var _class3; var _class4; var _class5; var _class6; var _class7; var _class8;"use client";
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { newObj[key] = obj[key]; } } } newObj.default = obj; return newObj; } } function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; } var _class; var _class2; var _class3; var _class4; var _class5; var _class6; var _class7; var _class8; var _class9; var _class10; var _class11;"use client";
 
 
 
@@ -10,7 +10,7 @@
 
 
 
-var _chunkBQ3MRWUVjs = require('./chunk-BQ3MRWUV.js');
+var _chunkBNSCUYW7js = require('./chunk-BNSCUYW7.js');
 
 
 var _chunkDCHYNTHIjs = require('./chunk-DCHYNTHI.js');
@@ -42,7 +42,7 @@ var _zustand = require('zustand');
 var ProxyConfigProvider = (_class = class {constructor() { _class.prototype.__init.call(this); }
   __init() {this._providers = /* @__PURE__ */ new Set()}
   getModelConfig() {
-    return _chunkBQ3MRWUVjs.mergeModelConfigs.call(void 0, this._providers);
+    return _chunkBNSCUYW7js.mergeModelConfigs.call(void 0, this._providers);
   }
   registerModelConfigProvider(provider) {
     this._providers.add(provider);
@@ -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: _nullishCoalesce(_optionalChain([runtime2, 'access', _6 => _6.messages, 'access', _7 => _7.at, 'call', _8 => _8(-1), 'optionalAccess', _9 => _9.id]), () => ( null)),
-          role: "user",
-          content: [{ type: "text", text }]
-        });
+        runtime2.composer.send();
       },
       cancel: () => {
         useThreadRuntime.getState().cancelRun();
@@ -167,7 +172,7 @@ var getThreadStateFromRuntime = (runtime) => {
     threadId: runtime.threadId,
     capabilities: runtime.capabilities,
     isDisabled: runtime.isDisabled,
-    isRunning: _optionalChain([lastMessage, 'optionalAccess', _10 => _10.role]) !== "assistant" ? false : lastMessage.status.type === "running"
+    isRunning: _optionalChain([lastMessage, 'optionalAccess', _6 => _6.role]) !== "assistant" ? false : lastMessage.status.type === "running"
   });
 };
 var makeThreadStore = (runtimeRef) => {
@@ -228,7 +233,7 @@ var subscribeToMainThread = (runtime, callback) => {
   let first = true;
   let cleanup;
   const inner = () => {
-    _optionalChain([cleanup, 'optionalCall', _11 => _11()]);
+    _optionalChain([cleanup, 'optionalCall', _7 => _7()]);
     cleanup = runtime.thread.subscribe(callback);
     if (!first) {
       callback();
@@ -239,7 +244,7 @@ var subscribeToMainThread = (runtime, callback) => {
   inner();
   return () => {
     unsubscribe();
-    _optionalChain([cleanup, 'optionalCall', _12 => _12()]);
+    _optionalChain([cleanup, 'optionalCall', _8 => _8()]);
   };
 };
 
@@ -275,6 +280,7 @@ _chunkDCHYNTHIjs.__export.call(void 0, internal_exports, {
   BaseAssistantRuntime: () => BaseAssistantRuntime,
   MessageRepository: () => MessageRepository,
   ProxyConfigProvider: () => ProxyConfigProvider,
+  ThreadRuntimeComposer: () => ThreadRuntimeComposer,
   TooltipIconButton: () => TooltipIconButton,
   generateId: () => generateId,
   useSmooth: () => useSmooth,
@@ -282,6 +288,76 @@ _chunkDCHYNTHIjs.__export.call(void 0, internal_exports, {
   withSmoothContextProvider: () => withSmoothContextProvider
 });
 
+// src/runtimes/utils/ThreadRuntimeComposer.tsx
+var ThreadRuntimeComposer = (_class3 = class {
+  constructor(runtime, notifySubscribers) {;_class3.prototype.__init4.call(this);_class3.prototype.__init5.call(this);_class3.prototype.__init6.call(this);
+    this.runtime = runtime;
+    this.notifySubscribers = notifySubscribers;
+  }
+  
+  __init4() {this.attachmentAccept = "*"}
+  get isEmpty() {
+    return !this.text.trim() && !this.attachments.length;
+  }
+  setAttachmentAdapter(adapter) {
+    this._attachmentAdapter = adapter;
+    const accept = _nullishCoalesce(_optionalChain([adapter, 'optionalAccess', _9 => _9.accept]), () => ( "*"));
+    if (this.attachmentAccept !== accept) {
+      this.attachmentAccept = accept;
+      return true;
+    }
+    return false;
+  }
+  __init5() {this._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();
+  }
+  __init6() {this._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: _nullishCoalesce(_optionalChain([this, 'access', _10 => _10.runtime, 'access', _11 => _11.messages, 'access', _12 => _12.at, 'call', _13 => _13(-1), 'optionalAccess', _14 => _14.id]), () => ( null)),
+      role: "user",
+      content: this.text ? [{ type: "text", text: this.text }] : [],
+      attachments
+    });
+    this.reset();
+  }
+}, _class3);
+
 // src/utils/idUtils.tsx
 var _nonsecure = require('nanoid/non-secure');
 var generateId = _nonsecure.customAlphabet.call(void 0, 
@@ -324,7 +400,8 @@ var fromCoreMessage = (message, {
       return {
         ...commonProps,
         role,
-        content: message.content
+        content: message.content,
+        attachments: []
       };
     case "system":
       return {
@@ -345,11 +422,11 @@ var findHead = (message) => {
   if ("current" in message) return message;
   return null;
 };
-var MessageRepository = (_class3 = class {constructor() { _class3.prototype.__init4.call(this);_class3.prototype.__init5.call(this);_class3.prototype.__init6.call(this); }
-  __init4() {this.messages = /* @__PURE__ */ new Map()}
+var MessageRepository = (_class4 = class {constructor() { _class4.prototype.__init7.call(this);_class4.prototype.__init8.call(this);_class4.prototype.__init9.call(this); }
+  __init7() {this.messages = /* @__PURE__ */ new Map()}
   // message_id -> item
-  __init5() {this.head = null}
-  __init6() {this.root = {
+  __init8() {this.head = null}
+  __init9() {this.root = {
     children: [],
     next: null
   }}
@@ -391,7 +468,7 @@ var MessageRepository = (_class3 = class {constructor() { _class3.prototype.__in
     }
   }
   getMessages() {
-    const messages = new Array(_nullishCoalesce(_optionalChain([this, 'access', _13 => _13.head, 'optionalAccess', _14 => _14.level]), () => ( 0)));
+    const messages = new Array(_nullishCoalesce(_optionalChain([this, 'access', _15 => _15.head, 'optionalAccess', _16 => _16.level]), () => ( 0)));
     for (let current = this.head; current; current = current.prev) {
       messages[current.level] = current.current;
     }
@@ -429,7 +506,7 @@ var MessageRepository = (_class3 = class {constructor() { _class3.prototype.__in
         "MessageRepository(updateMessage): Message not found. This is likely an internal bug in assistant-ui."
       );
     return {
-      parentId: _nullishCoalesce(_optionalChain([message, 'access', _15 => _15.prev, 'optionalAccess', _16 => _16.current, 'access', _17 => _17.id]), () => ( null)),
+      parentId: _nullishCoalesce(_optionalChain([message, 'access', _17 => _17.prev, 'optionalAccess', _18 => _18.current, 'access', _19 => _19.id]), () => ( null)),
       message: message.current
     };
   }
@@ -513,11 +590,11 @@ var MessageRepository = (_class3 = class {constructor() { _class3.prototype.__in
     for (const [, message] of this.messages) {
       exportItems.push({
         message: message.current,
-        parentId: _nullishCoalesce(_optionalChain([message, 'access', _18 => _18.prev, 'optionalAccess', _19 => _19.current, 'access', _20 => _20.id]), () => ( null))
+        parentId: _nullishCoalesce(_optionalChain([message, 'access', _20 => _20.prev, 'optionalAccess', _21 => _21.current, 'access', _22 => _22.id]), () => ( null))
       });
     }
     return {
-      headId: _nullishCoalesce(_optionalChain([this, 'access', _21 => _21.head, 'optionalAccess', _22 => _22.current, 'access', _23 => _23.id]), () => ( null)),
+      headId: _nullishCoalesce(_optionalChain([this, 'access', _23 => _23.head, 'optionalAccess', _24 => _24.current, 'access', _25 => _25.id]), () => ( null)),
       messages: exportItems
     };
   }
@@ -525,9 +602,9 @@ var MessageRepository = (_class3 = class {constructor() { _class3.prototype.__in
     for (const { message, parentId } of messages) {
       this.addOrUpdateMessage(parentId, message);
     }
-    this.resetHead(_nullishCoalesce(_nullishCoalesce(headId, () => ( _optionalChain([messages, 'access', _24 => _24.at, 'call', _25 => _25(-1), 'optionalAccess', _26 => _26.message, 'access', _27 => _27.id]))), () => ( null)));
+    this.resetHead(_nullishCoalesce(_nullishCoalesce(headId, () => ( _optionalChain([messages, 'access', _26 => _26.at, 'call', _27 => _27(-1), 'optionalAccess', _28 => _28.message, 'access', _29 => _29.id]))), () => ( null)));
   }
-}, _class3);
+}, _class4);
 
 // src/utils/smooth/useSmooth.tsx
 
@@ -564,7 +641,7 @@ var withSmoothContextProvider = (Component) => {
 };
 function useSmoothContext(options) {
   const context = _react.useContext.call(void 0, SmoothContext);
-  if (!_optionalChain([options, 'optionalAccess', _28 => _28.optional]) && !context)
+  if (!_optionalChain([options, 'optionalAccess', _30 => _30.optional]) && !context)
     throw new Error(
       "This component must be used within a SmoothContextProvider."
     );
@@ -577,14 +654,14 @@ var useSmoothStatus = () => {
 
 // src/utils/smooth/useSmooth.tsx
 var _reactusecallbackref = require('@radix-ui/react-use-callback-ref');
-var TextStreamAnimator = (_class4 = class {
-  constructor(currentText, setText) {;_class4.prototype.__init7.call(this);_class4.prototype.__init8.call(this);_class4.prototype.__init9.call(this);_class4.prototype.__init10.call(this);
+var TextStreamAnimator = (_class5 = class {
+  constructor(currentText, setText) {;_class5.prototype.__init10.call(this);_class5.prototype.__init11.call(this);_class5.prototype.__init12.call(this);_class5.prototype.__init13.call(this);
     this.currentText = currentText;
     this.setText = setText;
   }
-  __init7() {this.animationFrameId = null}
-  __init8() {this.lastUpdateTime = Date.now()}
-  __init9() {this.targetText = ""}
+  __init10() {this.animationFrameId = null}
+  __init11() {this.lastUpdateTime = Date.now()}
+  __init12() {this.targetText = ""}
   start() {
     if (this.animationFrameId !== null) return;
     this.lastUpdateTime = Date.now();
@@ -596,7 +673,7 @@ var TextStreamAnimator = (_class4 = class {
       this.animationFrameId = null;
     }
   }
-  __init10() {this.animate = () => {
+  __init13() {this.animate = () => {
     const currentTime = Date.now();
     const deltaTime = currentTime - this.lastUpdateTime;
     let timeToConsume = deltaTime;
@@ -620,7 +697,7 @@ var TextStreamAnimator = (_class4 = class {
     this.lastUpdateTime = currentTime - timeToConsume;
     this.setText(this.currentText);
   }}
-}, _class4);
+}, _class5);
 var SMOOTH_STATUS = Object.freeze({
   type: "running"
 });
@@ -635,10 +712,10 @@ var useSmooth = (state, smooth = false) => {
   const [displayedText, setDisplayedText] = _react.useState.call(void 0, text);
   const setText = _reactusecallbackref.useCallbackRef.call(void 0, (text2) => {
     setDisplayedText(text2);
-    _optionalChain([useSmoothStatus2, 'optionalAccess', _29 => _29.setState, 'call', _30 => _30(text2 !== state.part.text ? SMOOTH_STATUS : state.status)]);
+    _optionalChain([useSmoothStatus2, 'optionalAccess', _31 => _31.setState, 'call', _32 => _32(text2 !== state.part.text ? SMOOTH_STATUS : state.status)]);
   });
   _react.useEffect.call(void 0, () => {
-    _optionalChain([useSmoothStatus2, 'optionalAccess', _31 => _31.setState, 'call', _32 => _32(text !== displayedText ? SMOOTH_STATUS : state.status)]);
+    _optionalChain([useSmoothStatus2, 'optionalAccess', _33 => _33.setState, 'call', _34 => _34(text !== displayedText ? SMOOTH_STATUS : state.status)]);
   }, [useSmoothStatus2, text, displayedText, state.status]);
   const [animatorRef] = _react.useState.call(void 0, 
     new TextStreamAnimator(text, setText)
@@ -832,7 +909,7 @@ var fromLanguageModelMessages = (lm, { mergeRoundtrips }) => {
         });
         if (mergeRoundtrips) {
           const previousMessage = messages[messages.length - 1];
-          if (_optionalChain([previousMessage, 'optionalAccess', _33 => _33.role]) === "assistant") {
+          if (_optionalChain([previousMessage, 'optionalAccess', _35 => _35.role]) === "assistant") {
             previousMessage.content.push(...newContent);
             break;
           }
@@ -845,7 +922,7 @@ var fromLanguageModelMessages = (lm, { mergeRoundtrips }) => {
       }
       case "tool": {
         const previousMessage = messages[messages.length - 1];
-        if (_optionalChain([previousMessage, 'optionalAccess', _34 => _34.role]) !== "assistant")
+        if (_optionalChain([previousMessage, 'optionalAccess', _36 => _36.role]) !== "assistant")
           throw new Error(
             "A tool message must be preceded by an assistant message."
           );
@@ -921,14 +998,14 @@ function streamPartDecoderStream() {
       controller.enqueue(decodeStreamPart(chunk));
     }
   });
-  return new (0, _chunkBQ3MRWUVjs.PipeableTransformStream)((readable) => {
+  return new (0, _chunkBNSCUYW7js.PipeableTransformStream)((readable) => {
     return readable.pipeThrough(new TextDecoderStream()).pipeThrough(chunkByLineStream()).pipeThrough(decodeStream);
   });
 }
 
 // src/runtimes/edge/streams/utils/index.ts
 var streamUtils = {
-  streamPartEncoderStream: _chunkBQ3MRWUVjs.streamPartEncoderStream,
+  streamPartEncoderStream: _chunkBNSCUYW7js.streamPartEncoderStream,
   streamPartDecoderStream
 };
 
@@ -1037,8 +1114,8 @@ var EdgeChatAdapter = class {
       credentials: _nullishCoalesce(this.options.credentials, () => ( "same-origin")),
       body: JSON.stringify({
         system: config.system,
-        messages: _chunkBQ3MRWUVjs.toCoreMessages.call(void 0, messages),
-        tools: config.tools ? _chunkBQ3MRWUVjs.toLanguageModelTools.call(void 0, config.tools) : [],
+        messages: _chunkBNSCUYW7js.toCoreMessages.call(void 0, messages),
+        tools: config.tools ? _chunkBNSCUYW7js.toLanguageModelTools.call(void 0, config.tools) : [],
         ...config.callSettings,
         ...config.config,
         ...this.options.body
@@ -1048,7 +1125,7 @@ var EdgeChatAdapter = class {
     if (result.status !== 200) {
       throw new Error(`Status ${result.status}: ${await result.text()}`);
     }
-    const stream = result.body.pipeThrough(streamPartDecoderStream()).pipeThrough(assistantDecoderStream()).pipeThrough(_chunkBQ3MRWUVjs.toolResultStream.call(void 0, config.tools, abortSignal)).pipeThrough(_chunkBQ3MRWUVjs.runResultStream.call(void 0, ));
+    const stream = result.body.pipeThrough(streamPartDecoderStream()).pipeThrough(assistantDecoderStream()).pipeThrough(_chunkBNSCUYW7js.toolResultStream.call(void 0, config.tools, abortSignal)).pipeThrough(_chunkBNSCUYW7js.runResultStream.call(void 0, ));
     let update;
     for await (update of asAsyncIterable(stream)) {
       yield update;
@@ -1074,11 +1151,11 @@ var useEdgeRuntime = ({
 };
 
 // src/runtimes/local/shouldContinue.tsx
-var shouldContinue = (result) => _optionalChain([result, 'access', _35 => _35.status, 'optionalAccess', _36 => _36.type]) === "requires-action" && result.status.reason === "tool-calls" && result.content.every((c) => c.type !== "tool-call" || !!c.result);
+var shouldContinue = (result) => _optionalChain([result, 'access', _37 => _37.status, 'optionalAccess', _38 => _38.type]) === "requires-action" && result.status.reason === "tool-calls" && result.content.every((c) => c.type !== "tool-call" || !!c.result);
 
 // src/runtimes/local/LocalThreadRuntime.tsx
-var LocalThreadRuntime = (_class5 = class {
-  constructor(configProvider, adapter, { initialMessages, ...options }) {;_class5.prototype.__init11.call(this);_class5.prototype.__init12.call(this);_class5.prototype.__init13.call(this);_class5.prototype.__init14.call(this);_class5.prototype.__init15.call(this);_class5.prototype.__init16.call(this);
+var LocalThreadRuntime = (_class6 = class {
+  constructor(configProvider, adapter, { initialMessages, ...options }) {;_class6.prototype.__init14.call(this);_class6.prototype.__init15.call(this);_class6.prototype.__init16.call(this);_class6.prototype.__init17.call(this);_class6.prototype.__init18.call(this);_class6.prototype.__init19.call(this);
     this.configProvider = configProvider;
     this.adapter = adapter;
     this.threadId = generateId();
@@ -1092,40 +1169,46 @@ var LocalThreadRuntime = (_class5 = class {
       }
     }
   }
-  __init11() {this._subscriptions = /* @__PURE__ */ new Set()}
-  __init12() {this.abortController = null}
-  __init13() {this.repository = new MessageRepository()}
-  __init14() {this.capabilities = {
+  __init14() {this._subscriptions = /* @__PURE__ */ new Set()}
+  __init15() {this.abortController = null}
+  __init16() {this.repository = new MessageRepository()}
+  __init17() {this.capabilities = {
     switchToBranch: true,
     edit: true,
     reload: true,
     cancel: true,
     unstable_copy: true,
-    speak: false
+    speak: false,
+    attachments: false
   }}
   
-  __init15() {this.isDisabled = false}
+  __init18() {this.isDisabled = false}
   get messages() {
     return this.repository.getMessages();
   }
-  __init16() {this.composer = {
-    text: "",
-    setText: (value) => {
-      this.composer.text = value;
-      this.notifySubscribers();
-    }
-  }}
+  __init19() {this.composer = new ThreadRuntimeComposer(
+    this,
+    this.notifySubscribers.bind(this)
+  )}
   
   get options() {
     return this._options;
   }
   set options({ initialMessages, ...options }) {
     this._options = options;
-    const canSpeak = _optionalChain([options, 'access', _37 => _37.adapters, 'optionalAccess', _38 => _38.speech]) !== void 0;
+    let hasUpdates = false;
+    const canSpeak = _optionalChain([options, 'access', _39 => _39.adapters, 'optionalAccess', _40 => _40.speech]) !== void 0;
     if (this.capabilities.speak !== canSpeak) {
       this.capabilities.speak = canSpeak;
-      this.notifySubscribers();
+      hasUpdates = true;
+    }
+    this.composer.setAttachmentAdapter(_optionalChain([options, 'access', _41 => _41.adapters, 'optionalAccess', _42 => _42.attachments]));
+    const canAttach = _optionalChain([options, 'access', _43 => _43.adapters, 'optionalAccess', _44 => _44.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 = (_class5 = class {
       id: userMessageId,
       role: "user",
       content: message.content,
+      attachments: _nullishCoalesce(message.attachments, () => ( [])),
       createdAt: /* @__PURE__ */ new Date()
     };
     this.repository.addOrUpdateMessage(message.parentId, userMessage);
@@ -1165,18 +1249,18 @@ var LocalThreadRuntime = (_class5 = class {
   }
   async performRoundtrip(parentId, message) {
     const messages = this.repository.getMessages();
-    _optionalChain([this, 'access', _39 => _39.abortController, 'optionalAccess', _40 => _40.abort, 'call', _41 => _41()]);
+    _optionalChain([this, 'access', _45 => _45.abortController, 'optionalAccess', _46 => _46.abort, 'call', _47 => _47()]);
     this.abortController = new AbortController();
     const initialContent = message.content;
-    const initialRoundtrips = _optionalChain([message, 'access', _42 => _42.metadata, 'optionalAccess', _43 => _43.roundtrips]);
-    const initalCustom = _optionalChain([message, 'access', _44 => _44.metadata, 'optionalAccess', _45 => _45.custom]);
+    const initialRoundtrips = _optionalChain([message, 'access', _48 => _48.metadata, 'optionalAccess', _49 => _49.roundtrips]);
+    const initalCustom = _optionalChain([message, 'access', _50 => _50.metadata, 'optionalAccess', _51 => _51.custom]);
     const updateMessage = (m) => {
       message = {
         ...message,
         ...m.content ? { content: [...initialContent, ..._nullishCoalesce(m.content, () => ( []))] } : void 0,
         status: _nullishCoalesce(m.status, () => ( message.status)),
         // TODO deprecated, remove in v0.6
-        ..._optionalChain([m, 'access', _46 => _46.metadata, 'optionalAccess', _47 => _47.roundtrips]) ? {
+        ..._optionalChain([m, 'access', _52 => _52.metadata, 'optionalAccess', _53 => _53.roundtrips]) ? {
           roundtrips: [
             ..._nullishCoalesce(initialRoundtrips, () => ( [])),
             ...m.metadata.roundtrips
@@ -1191,7 +1275,7 @@ var LocalThreadRuntime = (_class5 = class {
                 ...m.metadata.roundtrips
               ]
             } : void 0,
-            ..._optionalChain([m, 'access', _48 => _48.metadata, 'optionalAccess', _49 => _49.custom]) ? {
+            ..._optionalChain([m, 'access', _54 => _54.metadata, 'optionalAccess', _55 => _55.custom]) ? {
               custom: { ..._nullishCoalesce(initalCustom, () => ( {})), ...m.metadata.custom }
             } : void 0
           }
@@ -1201,7 +1285,7 @@ var LocalThreadRuntime = (_class5 = class {
       this.notifySubscribers();
     };
     const maxToolRoundtrips = _nullishCoalesce(this.options.maxToolRoundtrips, () => ( 1));
-    const toolRoundtrips = _nullishCoalesce(_optionalChain([message, 'access', _50 => _50.metadata, 'optionalAccess', _51 => _51.roundtrips, 'optionalAccess', _52 => _52.length]), () => ( 0));
+    const toolRoundtrips = _nullishCoalesce(_optionalChain([message, 'access', _56 => _56.metadata, 'optionalAccess', _57 => _57.roundtrips, 'optionalAccess', _58 => _58.length]), () => ( 0));
     if (toolRoundtrips > maxToolRoundtrips) {
       updateMessage({
         status: {
@@ -1298,7 +1382,7 @@ var LocalThreadRuntime = (_class5 = class {
   // TODO lift utterance state to thread runtime
   
   speak(messageId) {
-    const adapter = _optionalChain([this, 'access', _53 => _53.options, 'access', _54 => _54.adapters, 'optionalAccess', _55 => _55.speech]);
+    const adapter = _optionalChain([this, 'access', _59 => _59.options, 'access', _60 => _60.adapters, 'optionalAccess', _61 => _61.speech]);
     if (!adapter) throw new Error("Speech adapter not configured");
     const { message } = this.repository.getMessage(messageId);
     if (this._utterance) {
@@ -1321,7 +1405,7 @@ var LocalThreadRuntime = (_class5 = class {
     this.repository.import(data);
     this.notifySubscribers();
   }
-}, _class5);
+}, _class6);
 
 // src/runtimes/local/LocalRuntime.tsx
 var LocalRuntime = class extends BaseAssistantRuntime {
@@ -1359,7 +1443,7 @@ var LocalRuntime = class extends BaseAssistantRuntime {
     const messages = fromCoreMessages(initialMessages);
     this.thread.import({
       messages: messages.map((m, idx) => ({
-        parentId: _nullishCoalesce(_optionalChain([messages, 'access', _56 => _56[idx - 1], 'optionalAccess', _57 => _57.id]), () => ( null)),
+        parentId: _nullishCoalesce(_optionalChain([messages, 'access', _62 => _62[idx - 1], 'optionalAccess', _63 => _63.id]), () => ( null)),
         message: m
       }))
     });
@@ -1383,8 +1467,8 @@ var getExternalStoreMessage = (message) => {
 };
 
 // src/runtimes/external-store/ThreadMessageConverter.ts
-var ThreadMessageConverter = (_class6 = class {constructor() { _class6.prototype.__init17.call(this); }
-  __init17() {this.cache = /* @__PURE__ */ new WeakMap()}
+var ThreadMessageConverter = (_class7 = class {constructor() { _class7.prototype.__init20.call(this); }
+  __init20() {this.cache = /* @__PURE__ */ new WeakMap()}
   convertMessages(messages, converter) {
     return messages.map((m, idx) => {
       const cached = this.cache.get(m);
@@ -1393,7 +1477,7 @@ var ThreadMessageConverter = (_class6 = class {constructor() { _class6.prototype
       return newMessage;
     });
   }
-}, _class6);
+}, _class7);
 
 // src/runtimes/external-store/auto-status.tsx
 var AUTO_STATUS_RUNNING = Object.freeze({ type: "running" });
@@ -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: _nullishCoalesce(id, () => ( fallbackId)),
     createdAt: _nullishCoalesce(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: _nullishCoalesce(attachments, () => ( []))
       };
     case "system":
       if (content.length !== 1 || content[0].type !== "text")
@@ -1485,19 +1572,20 @@ var getThreadMessageText = (message) => {
 
 // src/runtimes/external-store/ExternalStoreThreadRuntime.tsx
 var hasUpcomingMessage = (isRunning, messages) => {
-  return isRunning && _optionalChain([messages, 'access', _58 => _58[messages.length - 1], 'optionalAccess', _59 => _59.role]) !== "assistant";
+  return isRunning && _optionalChain([messages, 'access', _64 => _64[messages.length - 1], 'optionalAccess', _65 => _65.role]) !== "assistant";
 };
-var ExternalStoreThreadRuntime = (_class7 = class {
-  __init18() {this._subscriptions = /* @__PURE__ */ new Set()}
-  __init19() {this.repository = new MessageRepository()}
-  __init20() {this.assistantOptimisticId = null}
-  __init21() {this._capabilities = {
+var ExternalStoreThreadRuntime = (_class8 = class {
+  __init21() {this._subscriptions = /* @__PURE__ */ new Set()}
+  __init22() {this.repository = new MessageRepository()}
+  __init23() {this.assistantOptimisticId = null}
+  __init24() {this._capabilities = {
     switchToBranch: false,
     edit: false,
     reload: false,
     cancel: false,
     unstable_copy: false,
-    speak: false
+    speak: false,
+    attachments: false
   }}
   get capabilities() {
     return this._capabilities;
@@ -1505,16 +1593,13 @@ var ExternalStoreThreadRuntime = (_class7 = class {
   
   
   
-  __init22() {this.converter = new ThreadMessageConverter()}
+  __init25() {this.converter = new ThreadMessageConverter()}
   
-  __init23() {this.composer = {
-    text: "",
-    setText: (value) => {
-      this.composer.text = value;
-      this.notifySubscribers();
-    }
-  }}
-  constructor(store) {;_class7.prototype.__init18.call(this);_class7.prototype.__init19.call(this);_class7.prototype.__init20.call(this);_class7.prototype.__init21.call(this);_class7.prototype.__init22.call(this);_class7.prototype.__init23.call(this);_class7.prototype.__init24.call(this);
+  __init26() {this.composer = new ThreadRuntimeComposer(
+    this,
+    this.notifySubscribers.bind(this)
+  )}
+  constructor(store) {;_class8.prototype.__init21.call(this);_class8.prototype.__init22.call(this);_class8.prototype.__init23.call(this);_class8.prototype.__init24.call(this);_class8.prototype.__init25.call(this);_class8.prototype.__init26.call(this);_class8.prototype.__init27.call(this);
     this.store = store;
   }
   get store() {
@@ -1532,9 +1617,12 @@ var ExternalStoreThreadRuntime = (_class7 = class {
       edit: this._store.onEdit !== void 0,
       reload: this._store.onReload !== void 0,
       cancel: this._store.onCancel !== void 0,
-      unstable_copy: _optionalChain([this, 'access', _63 => _63._store, 'access', _64 => _64.unstable_capabilities, 'optionalAccess', _65 => _65.copy]) !== null,
-      speak: this._store.onSpeak !== void 0
+      speak: this._store.onSpeak !== void 0,
+      unstable_copy: _optionalChain([this, 'access', _69 => _69._store, 'access', _70 => _70.unstable_capabilities, 'optionalAccess', _71 => _71.copy]) !== false,
+      // default true
+      attachments: !!_optionalChain([this, 'access', _72 => _72.store, 'access', _73 => _73.adapters, 'optionalAccess', _74 => _74.attachments])
     };
+    this.composer.setAttachmentAdapter(_optionalChain([this, 'access', _75 => _75._store, 'access', _76 => _76.adapters, 'optionalAccess', _77 => _77.attachments]));
     if (oldStore) {
       if (oldStore.convertMessage !== store.convertMessage) {
         this.converter = new ThreadMessageConverter();
@@ -1560,7 +1648,7 @@ var ExternalStoreThreadRuntime = (_class7 = class {
     for (let i = 0; i < messages.length; i++) {
       const message = messages[i];
       const parent = messages[i - 1];
-      this.repository.addOrUpdateMessage(_nullishCoalesce(_optionalChain([parent, 'optionalAccess', _66 => _66.id]), () => ( null)), message);
+      this.repository.addOrUpdateMessage(_nullishCoalesce(_optionalChain([parent, 'optionalAccess', _78 => _78.id]), () => ( null)), message);
     }
     if (this.assistantOptimisticId) {
       this.repository.deleteMessage(this.assistantOptimisticId);
@@ -1568,7 +1656,7 @@ var ExternalStoreThreadRuntime = (_class7 = class {
     }
     if (hasUpcomingMessage(isRunning, messages)) {
       this.assistantOptimisticId = this.repository.appendOptimisticMessage(
-        _nullishCoalesce(_optionalChain([messages, 'access', _67 => _67.at, 'call', _68 => _68(-1), 'optionalAccess', _69 => _69.id]), () => ( null)),
+        _nullishCoalesce(_optionalChain([messages, 'access', _79 => _79.at, 'call', _80 => _80(-1), 'optionalAccess', _81 => _81.id]), () => ( null)),
         {
           role: "assistant",
           content: []
@@ -1576,7 +1664,7 @@ var ExternalStoreThreadRuntime = (_class7 = class {
       );
     }
     this.repository.resetHead(
-      _nullishCoalesce(_nullishCoalesce(this.assistantOptimisticId, () => ( _optionalChain([messages, 'access', _70 => _70.at, 'call', _71 => _71(-1), 'optionalAccess', _72 => _72.id]))), () => ( null))
+      _nullishCoalesce(_nullishCoalesce(this.assistantOptimisticId, () => ( _optionalChain([messages, 'access', _82 => _82.at, 'call', _83 => _83(-1), 'optionalAccess', _84 => _84.id]))), () => ( null))
     );
     this.messages = this.repository.getMessages();
     this.notifySubscribers();
@@ -1594,7 +1682,7 @@ var ExternalStoreThreadRuntime = (_class7 = class {
     this.updateMessages(this.repository.getMessages());
   }
   async append(message) {
-    if (message.parentId !== (_nullishCoalesce(_optionalChain([this, 'access', _73 => _73.messages, 'access', _74 => _74.at, 'call', _75 => _75(-1), 'optionalAccess', _76 => _76.id]), () => ( null)))) {
+    if (message.parentId !== (_nullishCoalesce(_optionalChain([this, 'access', _85 => _85.messages, 'access', _86 => _86.at, 'call', _87 => _87(-1), 'optionalAccess', _88 => _88.id]), () => ( null)))) {
       if (!this._store.onEdit)
         throw new Error("Runtime does not support editing messages.");
       await this._store.onEdit(message);
@@ -1617,7 +1705,7 @@ var ExternalStoreThreadRuntime = (_class7 = class {
     }
     let messages = this.repository.getMessages();
     const previousMessage = messages[messages.length - 1];
-    if (_optionalChain([previousMessage, 'optionalAccess', _77 => _77.role]) === "user" && previousMessage.id === _optionalChain([messages, 'access', _78 => _78.at, 'call', _79 => _79(-1), 'optionalAccess', _80 => _80.id])) {
+    if (_optionalChain([previousMessage, 'optionalAccess', _89 => _89.role]) === "user" && previousMessage.id === _optionalChain([messages, 'access', _90 => _90.at, 'call', _91 => _91(-1), 'optionalAccess', _92 => _92.id])) {
       this.repository.deleteMessage(previousMessage.id);
       if (!this.composer.text.trim()) {
         this.composer.setText(getThreadMessageText(previousMessage));
@@ -1645,18 +1733,18 @@ var ExternalStoreThreadRuntime = (_class7 = class {
     this._subscriptions.add(callback);
     return () => this._subscriptions.delete(callback);
   }
-  __init24() {this.updateMessages = (messages) => {
-    _optionalChain([this, 'access', _81 => _81._store, 'access', _82 => _82.setMessages, 'optionalCall', _83 => _83(
+  __init27() {this.updateMessages = (messages) => {
+    _optionalChain([this, 'access', _93 => _93._store, 'access', _94 => _94.setMessages, 'optionalCall', _95 => _95(
       messages.flatMap(getExternalStoreMessage).filter((m) => m != null)
     )]);
   }}
-}, _class7);
+}, _class8);
 
 // src/runtimes/external-store/ExternalStoreRuntime.tsx
-var ExternalStoreRuntime = (_class8 = class extends BaseAssistantRuntime {
-  __init25() {this._proxyConfigProvider = new ProxyConfigProvider()}
+var ExternalStoreRuntime = (_class9 = class extends BaseAssistantRuntime {
+  __init28() {this._proxyConfigProvider = new ProxyConfigProvider()}
   constructor(store) {
-    super(new ExternalStoreThreadRuntime(store));_class8.prototype.__init25.call(this);;
+    super(new ExternalStoreThreadRuntime(store));_class9.prototype.__init28.call(this);;
   }
   get store() {
     return this.thread.store;
@@ -1689,7 +1777,7 @@ var ExternalStoreRuntime = (_class8 = class extends BaseAssistantRuntime {
       await this.store.onNewThread();
     }
   }
-}, _class8);
+}, _class9);
 
 // src/runtimes/external-store/useExternalStoreRuntime.tsx
 
@@ -1857,18 +1945,18 @@ var DangerousInBrowserAdapter = class {
     this.options = options;
   }
   async *run({ messages, abortSignal, config }) {
-    const res = await _chunkBQ3MRWUVjs.getEdgeRuntimeStream.call(void 0, {
+    const res = await _chunkBNSCUYW7js.getEdgeRuntimeStream.call(void 0, {
       options: this.options,
       abortSignal,
       requestData: {
         system: config.system,
-        messages: _chunkBQ3MRWUVjs.toCoreMessages.call(void 0, messages),
-        tools: config.tools ? _chunkBQ3MRWUVjs.toLanguageModelTools.call(void 0, config.tools) : [],
+        messages: _chunkBNSCUYW7js.toCoreMessages.call(void 0, messages),
+        tools: config.tools ? _chunkBNSCUYW7js.toLanguageModelTools.call(void 0, config.tools) : [],
         ...config.callSettings,
         ...config.config
       }
     });
-    const stream = res.pipeThrough(_chunkBQ3MRWUVjs.toolResultStream.call(void 0, config.tools, abortSignal)).pipeThrough(_chunkBQ3MRWUVjs.runResultStream.call(void 0, ));
+    const stream = res.pipeThrough(_chunkBNSCUYW7js.toolResultStream.call(void 0, config.tools, abortSignal)).pipeThrough(_chunkBNSCUYW7js.runResultStream.call(void 0, ));
     for await (const update of asAsyncIterable(stream)) {
       yield update;
     }
@@ -1925,6 +2013,147 @@ var WebSpeechSynthesisAdapter = class {
   }
 };
 
+// src/runtimes/attachment/SimpleImageAttachmentAdapter.ts
+var SimpleImageAttachmentAdapter = (_class10 = class {constructor() { _class10.prototype.__init29.call(this); }
+  __init29() {this.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() {
+  }
+}, _class10);
+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 = (_class11 = class {constructor() { _class11.prototype.__init30.call(this); }
+  __init30() {this.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() {
+  }
+}, _class11);
+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 {
+  
+  
+  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
 
 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]);
   _react.useInsertionEffect.call(void 0, 
     () => 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]);
   _react.useEffect.call(void 0, 
-    () => context.useAssistantRuntime.setState(runtime, true),
+    () => writableStore(context.useAssistantRuntime).setState(runtime, true),
     [runtime, context]
   );
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, AssistantContext.Provider, { value: context, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ThreadProvider, { provider: runtime, children }) });
@@ -2048,7 +2279,7 @@ var AssistantRuntimeProvider = _react.memo.call(void 0, AssistantRuntimeProvider
 var MessageContext = _react.createContext.call(void 0, null);
 function useMessageContext(options) {
   const context = _react.useContext.call(void 0, MessageContext);
-  if (!_optionalChain([options, 'optionalAccess', _84 => _84.optional]) && !context)
+  if (!_optionalChain([options, 'optionalAccess', _96 => _96.optional]) && !context)
     throw new Error(
       "This component can only be used inside a component passed to <ThreadPrimitive.Messages components={...} />."
     );
@@ -2075,7 +2306,7 @@ var ContentPartContext = _react.createContext.call(void 0,
 );
 function useContentPartContext(options) {
   const context = _react.useContext.call(void 0, ContentPartContext);
-  if (!_optionalChain([options, 'optionalAccess', _85 => _85.optional]) && !context)
+  if (!_optionalChain([options, 'optionalAccess', _97 => _97.optional]) && !context)
     throw new Error(
       "This component can only be used inside a component passed to <MessagePrimitive.Content components={...} >."
     );
@@ -2087,15 +2318,17 @@ function useContentPartContext(options) {
 var toAppendMessage = (useThreadMessages, message) => {
   if (typeof message === "string") {
     return {
-      parentId: _nullishCoalesce(_optionalChain([useThreadMessages, 'access', _86 => _86.getState, 'call', _87 => _87(), 'access', _88 => _88.at, 'call', _89 => _89(-1), 'optionalAccess', _90 => _90.id]), () => ( null)),
+      parentId: _nullishCoalesce(_optionalChain([useThreadMessages, 'access', _98 => _98.getState, 'call', _99 => _99(), 'access', _100 => _100.at, 'call', _101 => _101(-1), 'optionalAccess', _102 => _102.id]), () => ( null)),
       role: "user",
-      content: [{ type: "text", text: message }]
+      content: [{ type: "text", text: message }],
+      attachments: []
     };
   }
   return {
-    parentId: _nullishCoalesce(_nullishCoalesce(message.parentId, () => ( _optionalChain([useThreadMessages, 'access', _91 => _91.getState, 'call', _92 => _92(), 'access', _93 => _93.at, 'call', _94 => _94(-1), 'optionalAccess', _95 => _95.id]))), () => ( null)),
+    parentId: _nullishCoalesce(_nullishCoalesce(message.parentId, () => ( _optionalChain([useThreadMessages, 'access', _103 => _103.getState, 'call', _104 => _104(), 'access', _105 => _105.at, 'call', _106 => _106(-1), 'optionalAccess', _107 => _107.id]))), () => ( null)),
     role: _nullishCoalesce(message.role, () => ( "user")),
-    content: message.content
+    content: message.content,
+    attachments: _nullishCoalesce(message.attachments, () => ( []))
   };
 };
 var useAppendMessage = () => {
@@ -2145,7 +2378,7 @@ var useAssistantTool = (tool) => {
     const unsub2 = render ? setToolUI(toolName, render) : void 0;
     return () => {
       unsub1();
-      _optionalChain([unsub2, 'optionalCall', _96 => _96()]);
+      _optionalChain([unsub2, 'optionalCall', _108 => _108()]);
     };
   }, [registerModelConfigProvider, setToolUI, tool]);
 };
@@ -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 = _react.useCallback.call(void 0, () => {
     const composerState = useComposer.getState();
@@ -2413,6 +2646,30 @@ var useComposerSend = () => {
   return callback;
 };
 
+// src/primitive-hooks/composer/useComposerAddAttachment.tsx
+
+var useComposerAddAttachment = () => {
+  const { useComposer, useThreadRuntime } = useThreadContext();
+  const disabled = useComposer((c) => !c.isEditing);
+  const callback = _react.useCallback.call(void 0, () => {
+    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 = _optionalChain([e, 'access', _109 => _109.target, 'access', _110 => _110.files, 'optionalAccess', _111 => _111[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;
     }
   );
@@ -2612,7 +2873,7 @@ var createActionButton = (displayName, useActionButton, forwardProps = []) => {
         ...primitiveProps,
         ref: forwardedRef,
         onClick: _primitive.composeEventHandlers.call(void 0, primitiveProps.onClick, () => {
-          _optionalChain([callback, 'optionalCall', _97 => _97()]);
+          _optionalChain([callback, 'optionalCall', _112 => _112()]);
         })
       }
     );
@@ -2668,7 +2929,7 @@ var ActionBarPrimitiveStopSpeaking = _react.forwardRef.call(void 0, (props, ref)
       ...props,
       ref,
       onClick: _primitive.composeEventHandlers.call(void 0, props.onClick, () => {
-        _optionalChain([callback, 'optionalCall', _98 => _98()]);
+        _optionalChain([callback, 'optionalCall', _113 => _113()]);
       })
     }
   );
@@ -2844,6 +3105,7 @@ BranchPickerPrimitiveNumber.displayName = "BranchPickerPrimitive.Number";
 // src/primitives/message/index.ts
 var message_exports = {};
 _chunkDCHYNTHIjs.__export.call(void 0, message_exports, {
+  Attachments: () => MessagePrimitiveAttachments,
   Content: () => MessagePrimitiveContent,
   If: () => MessagePrimitiveIf,
   InProgress: () => MessagePrimitiveInProgress,
@@ -2954,7 +3216,7 @@ var getContentPartState = ({ message }, useContentPart, partIndex) => {
     }
   }
   const status = toContentPartStatus(message, partIndex, part);
-  const currentState = _optionalChain([useContentPart, 'optionalAccess', _99 => _99.getState, 'call', _100 => _100()]);
+  const currentState = _optionalChain([useContentPart, 'optionalAccess', _114 => _114.getState, 'call', _115 => _115()]);
   if (currentState && currentState.part === part && currentState.status === status)
     return null;
   return Object.freeze({ part, status });
@@ -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);
@@ -3112,24 +3374,14 @@ var MessageContentPartImpl = ({
 };
 var MessageContentPart = _react.memo.call(void 0, 
   MessageContentPartImpl,
-  (prev, next) => prev.partIndex === next.partIndex && _optionalChain([prev, 'access', _101 => _101.components, 'optionalAccess', _102 => _102.Text]) === _optionalChain([next, 'access', _103 => _103.components, 'optionalAccess', _104 => _104.Text]) && _optionalChain([prev, 'access', _105 => _105.components, 'optionalAccess', _106 => _106.Image]) === _optionalChain([next, 'access', _107 => _107.components, 'optionalAccess', _108 => _108.Image]) && _optionalChain([prev, 'access', _109 => _109.components, 'optionalAccess', _110 => _110.UI]) === _optionalChain([next, 'access', _111 => _111.components, 'optionalAccess', _112 => _112.UI]) && _optionalChain([prev, 'access', _113 => _113.components, 'optionalAccess', _114 => _114.tools]) === _optionalChain([next, 'access', _115 => _115.components, 'optionalAccess', _116 => _116.tools])
+  (prev, next) => prev.partIndex === next.partIndex && _optionalChain([prev, 'access', _116 => _116.components, 'optionalAccess', _117 => _117.Text]) === _optionalChain([next, 'access', _118 => _118.components, 'optionalAccess', _119 => _119.Text]) && _optionalChain([prev, 'access', _120 => _120.components, 'optionalAccess', _121 => _121.Image]) === _optionalChain([next, 'access', _122 => _122.components, 'optionalAccess', _123 => _123.Image]) && _optionalChain([prev, 'access', _124 => _124.components, 'optionalAccess', _125 => _125.UI]) === _optionalChain([next, 'access', _126 => _126.components, 'optionalAccess', _127 => _127.UI]) && _optionalChain([prev, 'access', _128 => _128.components, 'optionalAccess', _129 => _129.tools]) === _optionalChain([next, 'access', _130 => _130.components, 'optionalAccess', _131 => _131.tools])
 );
 var MessagePrimitiveContent = ({
   components
 }) => {
   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__ */ _jsxruntime.jsx.call(void 0, 
-      MessageContentPart,
-      {
-        partIndex,
-        components
-      },
-      partIndex
-    );
-  });
+  return Array.from({ length: contentLength }, (_, index) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, MessageContentPart, { partIndex: index, components }, index));
 };
 MessagePrimitiveContent.displayName = "MessagePrimitive.Content";
 
@@ -3139,6 +3391,125 @@ var MessagePrimitiveInProgress = () => {
 };
 MessagePrimitiveInProgress.displayName = "MessagePrimitive.InProgress";
 
+// src/primitives/message/MessageAttachments.tsx
+
+
+// src/context/react/AttachmentContext.ts
+
+var AttachmentContext = _react.createContext.call(void 0, 
+  null
+);
+function useAttachmentContext(options) {
+  const context = _react.useContext.call(void 0, AttachmentContext);
+  if (_optionalChain([options, 'optionalAccess', _132 => _132.type]) === "composer" && _optionalChain([context, 'optionalAccess', _133 => _133.type]) !== "composer")
+    throw new Error(
+      "This component must be used within a ComposerPrimitive.Attachments component."
+    );
+  if (_optionalChain([options, 'optionalAccess', _134 => _134.type]) === "message" && _optionalChain([context, 'optionalAccess', _135 => _135.type]) !== "message")
+    throw new Error(
+      "This component must be used within a MessagePrimitive.Attachments component."
+    );
+  if (!_optionalChain([options, 'optionalAccess', _136 => _136.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
+
+
+
+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 = _optionalChain([useAttachment, 'optionalAccess', _137 => _137.getState, 'call', _138 => _138()]);
+  if (currentState && currentState.attachment === attachment) return null;
+  return Object.freeze({ attachment });
+};
+var useMessageAttachmentContext = (partIndex) => {
+  const { useMessage } = useMessageContext();
+  const [context] = _react.useState.call(void 0, 
+    () => {
+      const useAttachment = _zustand.create.call(void 0, 
+        () => getAttachment(useMessage.getState(), void 0, partIndex)
+      );
+      return { type: "message", useAttachment };
+    }
+  );
+  _react.useEffect.call(void 0, () => {
+    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__ */ _jsxruntime.jsx.call(void 0, AttachmentContext.Provider, { value: context, children });
+};
+
+// src/primitives/message/MessageAttachments.tsx
+
+var getComponent = (components, attachment) => {
+  const type = attachment.type;
+  switch (type) {
+    case "image":
+      return _nullishCoalesce(_optionalChain([components, 'optionalAccess', _139 => _139.Image]), () => ( _optionalChain([components, 'optionalAccess', _140 => _140.Attachment])));
+    case "document":
+      return _nullishCoalesce(_optionalChain([components, 'optionalAccess', _141 => _141.Document]), () => ( _optionalChain([components, 'optionalAccess', _142 => _142.Attachment])));
+    case "file":
+      return _nullishCoalesce(_optionalChain([components, 'optionalAccess', _143 => _143.File]), () => ( _optionalChain([components, 'optionalAccess', _144 => _144.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__ */ _jsxruntime.jsx.call(void 0, Component, {});
+};
+var MessageAttachmentImpl = ({ components, attachmentIndex }) => {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, MessageAttachmentProvider, { attachmentIndex, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, AttachmentComponent, { components }) });
+};
+var MessageAttachment = _react.memo.call(void 0, 
+  MessageAttachmentImpl,
+  (prev, next) => prev.attachmentIndex === next.attachmentIndex && _optionalChain([prev, 'access', _145 => _145.components, 'optionalAccess', _146 => _146.Image]) === _optionalChain([next, 'access', _147 => _147.components, 'optionalAccess', _148 => _148.Image]) && _optionalChain([prev, 'access', _149 => _149.components, 'optionalAccess', _150 => _150.Document]) === _optionalChain([next, 'access', _151 => _151.components, 'optionalAccess', _152 => _152.Document]) && _optionalChain([prev, 'access', _153 => _153.components, 'optionalAccess', _154 => _154.File]) === _optionalChain([next, 'access', _155 => _155.components, 'optionalAccess', _156 => _156.File]) && _optionalChain([prev, 'access', _157 => _157.components, 'optionalAccess', _158 => _158.Attachment]) === _optionalChain([next, 'access', _159 => _159.components, 'optionalAccess', _160 => _160.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__ */ _jsxruntime.jsx.call(void 0, 
+    MessageAttachment,
+    {
+      attachmentIndex: index,
+      components
+    },
+    index
+  ));
+};
+MessagePrimitiveAttachments.displayName = "MessagePrimitive.Attachments";
+
 // src/primitives/branchPicker/BranchPickerRoot.tsx
 
 var BranchPickerPrimitiveRoot = _react.forwardRef.call(void 0, ({ hideWhenSingleBranch, ...rest }, ref) => {
@@ -3149,6 +3520,8 @@ BranchPickerPrimitiveRoot.displayName = "BranchPickerPrimitive.Root";
 // src/primitives/composer/index.ts
 var composer_exports = {};
 _chunkDCHYNTHIjs.__export.call(void 0, composer_exports, {
+  AddAttachment: () => ComposerPrimitiveAddAttachment,
+  Attachments: () => ComposerPrimitiveAttachments,
   Cancel: () => ComposerPrimitiveCancel,
   If: () => ComposerPrimitiveIf,
   Input: () => ComposerPrimitiveInput,
@@ -3227,7 +3600,7 @@ var ComposerPrimitiveInput = _react.forwardRef.call(void 0,
         const { isRunning } = useThread.getState();
         if (!isRunning) {
           e.preventDefault();
-          _optionalChain([textareaRef, 'access', _117 => _117.current, 'optionalAccess', _118 => _118.closest, 'call', _119 => _119("form"), 'optionalAccess', _120 => _120.requestSubmit, 'call', _121 => _121()]);
+          _optionalChain([textareaRef, 'access', _161 => _161.current, 'optionalAccess', _162 => _162.closest, 'call', _163 => _163("form"), 'optionalAccess', _164 => _164.requestSubmit, 'call', _165 => _165()]);
         }
       }
     };
@@ -3268,29 +3641,111 @@ var ComposerPrimitiveInput = _react.forwardRef.call(void 0,
 ComposerPrimitiveInput.displayName = "ComposerPrimitive.Input";
 
 // src/primitives/composer/ComposerSend.tsx
+var ComposerPrimitiveSend = createActionButton(
+  "ComposerPrimitive.Send",
+  useComposerSend
+);
+
+// src/primitives/composer/ComposerCancel.tsx
+var ComposerPrimitiveCancel = createActionButton(
+  "ComposerPrimitive.Cancel",
+  useComposerCancel
+);
 
+// src/primitives/composer/ComposerAddAttachment.tsx
+var ComposerPrimitiveAddAttachment = createActionButton(
+  "ComposerPrimitive.AddAttachment",
+  useComposerAddAttachment
+);
 
+// src/primitives/composer/ComposerAttachments.tsx
 
-var ComposerPrimitiveSend = _react.forwardRef.call(void 0, ({ disabled, ...rest }, ref) => {
-  const { useComposer } = useComposerContext();
-  const hasValue = useComposer((c) => c.isEditing && c.text.length > 0);
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-    _reactprimitive.Primitive.button,
-    {
-      type: "submit",
-      ...rest,
-      ref,
-      disabled: disabled || !hasValue
+
+// src/context/providers/ComposerAttachmentProvider.tsx
+
+
+
+var getAttachment2 = ({ attachments }, useAttachment, partIndex) => {
+  let attachment = attachments[partIndex];
+  if (!attachment) return null;
+  const currentState = _optionalChain([useAttachment, 'optionalAccess', _166 => _166.getState, 'call', _167 => _167()]);
+  if (currentState && currentState.attachment === attachment) return null;
+  return Object.freeze({ attachment });
+};
+var useComposerAttachmentContext = (partIndex) => {
+  const { useComposer } = useThreadContext();
+  const [context] = _react.useState.call(void 0, 
+    () => {
+      const useAttachment = _zustand.create.call(void 0, 
+        () => getAttachment2(useComposer.getState(), void 0, partIndex)
+      );
+      return { type: "composer", useAttachment };
     }
   );
-});
-ComposerPrimitiveSend.displayName = "ComposerPrimitive.Send";
+  _react.useEffect.call(void 0, () => {
+    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__ */ _jsxruntime.jsx.call(void 0, AttachmentContext.Provider, { value: context, children });
+};
 
-// src/primitives/composer/ComposerCancel.tsx
-var ComposerPrimitiveCancel = createActionButton(
-  "ComposerPrimitive.Cancel",
-  useComposerCancel
+// src/primitives/composer/ComposerAttachments.tsx
+
+var getComponent2 = (components, attachment) => {
+  const type = attachment.type;
+  switch (type) {
+    case "image":
+      return _nullishCoalesce(_optionalChain([components, 'optionalAccess', _168 => _168.Image]), () => ( _optionalChain([components, 'optionalAccess', _169 => _169.Attachment])));
+    case "document":
+      return _nullishCoalesce(_optionalChain([components, 'optionalAccess', _170 => _170.Document]), () => ( _optionalChain([components, 'optionalAccess', _171 => _171.Attachment])));
+    case "file":
+      return _nullishCoalesce(_optionalChain([components, 'optionalAccess', _172 => _172.File]), () => ( _optionalChain([components, 'optionalAccess', _173 => _173.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__ */ _jsxruntime.jsx.call(void 0, Component, {});
+};
+var ComposerAttachmentImpl = ({ components, attachmentIndex }) => {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ComposerAttachmentProvider, { attachmentIndex, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, AttachmentComponent2, { components }) });
+};
+var ComposerAttachment = _react.memo.call(void 0, 
+  ComposerAttachmentImpl,
+  (prev, next) => prev.attachmentIndex === next.attachmentIndex && _optionalChain([prev, 'access', _174 => _174.components, 'optionalAccess', _175 => _175.Image]) === _optionalChain([next, 'access', _176 => _176.components, 'optionalAccess', _177 => _177.Image]) && _optionalChain([prev, 'access', _178 => _178.components, 'optionalAccess', _179 => _179.Document]) === _optionalChain([next, 'access', _180 => _180.components, 'optionalAccess', _181 => _181.Document]) && _optionalChain([prev, 'access', _182 => _182.components, 'optionalAccess', _183 => _183.File]) === _optionalChain([next, 'access', _184 => _184.components, 'optionalAccess', _185 => _185.File]) && _optionalChain([prev, 'access', _186 => _186.components, 'optionalAccess', _187 => _187.Attachment]) === _optionalChain([next, 'access', _188 => _188.components, 'optionalAccess', _189 => _189.Attachment])
 );
+var ComposerPrimitiveAttachments = ({ components }) => {
+  const { useComposer } = useThreadContext();
+  const attachmentsCount = useComposer((s) => s.attachments.length);
+  return Array.from({ length: attachmentsCount }, (_, index) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    ComposerAttachment,
+    {
+      attachmentIndex: index,
+      components
+    },
+    index
+  ));
+};
+ComposerPrimitiveAttachments.displayName = "ComposerPrimitive.Attachments";
 
 // src/primitives/composer/ComposerIf.tsx
 var ComposerPrimitiveIf = ({
@@ -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;
@@ -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;
@@ -3529,7 +3988,7 @@ var makeMessageUtilsStore = () => _zustand.create.call(void 0, (set) => {
     },
     isSpeaking: false,
     stopSpeaking: () => {
-      _optionalChain([utterance, 'optionalAccess', _122 => _122.cancel, 'call', _123 => _123()]);
+      _optionalChain([utterance, 'optionalAccess', _190 => _190.cancel, 'call', _191 => _191()]);
     },
     addUtterance: (utt) => {
       utterance = utt;
@@ -3544,15 +4003,15 @@ var makeMessageUtilsStore = () => _zustand.create.call(void 0, (set) => {
 // src/context/providers/MessageProvider.tsx
 
 var getIsLast = (messages, message) => {
-  return _optionalChain([messages, 'access', _124 => _124[messages.length - 1], 'optionalAccess', _125 => _125.id]) === message.id;
+  return _optionalChain([messages, 'access', _192 => _192[messages.length - 1], 'optionalAccess', _193 => _193.id]) === message.id;
 };
 var getMessageState = (messages, getBranches, useMessage, messageIndex) => {
-  const parentId = _nullishCoalesce(_optionalChain([messages, 'access', _126 => _126[messageIndex - 1], 'optionalAccess', _127 => _127.id]), () => ( null));
+  const parentId = _nullishCoalesce(_optionalChain([messages, 'access', _194 => _194[messageIndex - 1], 'optionalAccess', _195 => _195.id]), () => ( null));
   const message = messages[messageIndex];
   if (!message) return null;
   const isLast = getIsLast(messages, message);
   const branches = getBranches(message.id);
-  const currentState = _optionalChain([useMessage, 'optionalAccess', _128 => _128.getState, 'call', _129 => _129()]);
+  const currentState = _optionalChain([useMessage, 'optionalAccess', _196 => _196.getState, 'call', _197 => _197()]);
   if (currentState && currentState.message === message && currentState.parentId === parentId && currentState.branches === branches && currentState.isLast === isLast)
     return null;
   return Object.freeze({
@@ -3596,7 +4055,8 @@ var useMessageContext2 = (messageIndex) => {
         useThreadActions.getState().append({
           parentId,
           role: "user",
-          content: [{ type: "text", text }, ...nonTextParts]
+          content: [{ type: "text", text }, ...nonTextParts],
+          attachments: message.attachments
         });
       }
     });
@@ -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);
@@ -3664,22 +4121,12 @@ 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__ */ _jsxruntime.jsx.call(void 0, 
-      ThreadMessage,
-      {
-        messageIndex,
-        components
-      },
-      messageIndex
-    );
-  });
+  return Array.from({ length: messagesLength }, (_, index) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ThreadMessage, { messageIndex: index, components }, index));
 };
 ThreadPrimitiveMessagesImpl.displayName = "ThreadPrimitive.Messages";
 var ThreadPrimitiveMessages = _react.memo.call(void 0, 
   ThreadPrimitiveMessagesImpl,
-  (prev, next) => _optionalChain([prev, 'access', _130 => _130.components, 'optionalAccess', _131 => _131.Message]) === _optionalChain([next, 'access', _132 => _132.components, 'optionalAccess', _133 => _133.Message]) && _optionalChain([prev, 'access', _134 => _134.components, 'optionalAccess', _135 => _135.UserMessage]) === _optionalChain([next, 'access', _136 => _136.components, 'optionalAccess', _137 => _137.UserMessage]) && _optionalChain([prev, 'access', _138 => _138.components, 'optionalAccess', _139 => _139.EditComposer]) === _optionalChain([next, 'access', _140 => _140.components, 'optionalAccess', _141 => _141.EditComposer]) && _optionalChain([prev, 'access', _142 => _142.components, 'optionalAccess', _143 => _143.AssistantMessage]) === _optionalChain([next, 'access', _144 => _144.components, 'optionalAccess', _145 => _145.AssistantMessage]) && _optionalChain([prev, 'access', _146 => _146.components, 'optionalAccess', _147 => _147.SystemMessage]) === _optionalChain([next, 'access', _148 => _148.components, 'optionalAccess', _149 => _149.SystemMessage])
+  (prev, next) => _optionalChain([prev, 'access', _198 => _198.components, 'optionalAccess', _199 => _199.Message]) === _optionalChain([next, 'access', _200 => _200.components, 'optionalAccess', _201 => _201.Message]) && _optionalChain([prev, 'access', _202 => _202.components, 'optionalAccess', _203 => _203.UserMessage]) === _optionalChain([next, 'access', _204 => _204.components, 'optionalAccess', _205 => _205.UserMessage]) && _optionalChain([prev, 'access', _206 => _206.components, 'optionalAccess', _207 => _207.EditComposer]) === _optionalChain([next, 'access', _208 => _208.components, 'optionalAccess', _209 => _209.EditComposer]) && _optionalChain([prev, 'access', _210 => _210.components, 'optionalAccess', _211 => _211.AssistantMessage]) === _optionalChain([next, 'access', _212 => _212.components, 'optionalAccess', _213 => _213.AssistantMessage]) && _optionalChain([prev, 'access', _214 => _214.components, 'optionalAccess', _215 => _215.SystemMessage]) === _optionalChain([next, 'access', _216 => _216.components, 'optionalAccess', _217 => _217.SystemMessage])
 );
 
 // src/primitives/thread/ThreadScrollToBottom.tsx
@@ -3711,7 +4158,7 @@ var ThreadConfigProvider = ({
 }) => {
   const assistant = useAssistantContext({ optional: true });
   const configProvider = config && Object.keys(_nullishCoalesce(config, () => ( {}))).length > 0 ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ThreadConfigContext.Provider, { value: config, children }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _jsxruntime.Fragment, { children });
-  if (!_optionalChain([config, 'optionalAccess', _150 => _150.runtime])) return configProvider;
+  if (!_optionalChain([config, 'optionalAccess', _218 => _218.runtime])) return configProvider;
   if (assistant) {
     throw new Error(
       "You provided a runtime to <Thread> while simulataneously using <AssistantRuntimeProvider>. This is not allowed."
@@ -3798,8 +4245,7 @@ var AssistantActionBarSpeak = _react.forwardRef.call(void 0, (props, ref) => {
     } = {}
   } = useThreadConfig();
   const allowSpeak = useAllowSpeak();
-  if (!allowSpeak) return null;
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, actionBar_exports.Speak, { asChild: true, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, TooltipIconButton, { tooltip, ...props, ref, children: _nullishCoalesce(props.children, () => ( /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.AudioLinesIcon, {}))) }) });
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, actionBar_exports.Speak, { disabled: !allowSpeak, asChild: true, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, TooltipIconButton, { tooltip, ...props, ref, children: _nullishCoalesce(props.children, () => ( /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.AudioLinesIcon, {}))) }) });
 });
 AssistantActionBarSpeak.displayName = "AssistantActionBarSpeak";
 var AssistantActionBarStopSpeaking = _react.forwardRef.call(void 0, (props, ref) => {
@@ -3811,8 +4257,7 @@ var AssistantActionBarStopSpeaking = _react.forwardRef.call(void 0, (props, ref)
     } = {}
   } = useThreadConfig();
   const allowSpeak = useAllowSpeak();
-  if (!allowSpeak) return null;
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, actionBar_exports.StopSpeaking, { asChild: true, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, TooltipIconButton, { tooltip: stopTooltip, ...props, ref, children: _nullishCoalesce(props.children, () => ( /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.StopCircleIcon, {}))) }) });
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, actionBar_exports.StopSpeaking, { disabled: !allowSpeak, asChild: true, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, TooltipIconButton, { tooltip: stopTooltip, ...props, ref, children: _nullishCoalesce(props.children, () => ( /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.StopCircleIcon, {}))) }) });
 });
 AssistantActionBarStopSpeaking.displayName = "AssistantActionBarStopSpeaking";
 var AssistantActionBarReload = _react.forwardRef.call(void 0, (props, ref) => {
@@ -3822,8 +4267,7 @@ var AssistantActionBarReload = _react.forwardRef.call(void 0, (props, ref) => {
     } = {}
   } = useThreadConfig();
   const allowReload = useAllowReload();
-  if (!allowReload) return null;
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, actionBar_exports.Reload, { asChild: true, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, TooltipIconButton, { tooltip, ...props, ref, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.RefreshCwIcon, {}) }) });
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, actionBar_exports.Reload, { disabled: !allowReload, asChild: true, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, TooltipIconButton, { tooltip, ...props, ref, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.RefreshCwIcon, {}) }) });
 });
 AssistantActionBarReload.displayName = "AssistantActionBarReload";
 var exports = {
@@ -3846,11 +4290,11 @@ var assistant_action_bar_default = Object.assign(
 
 
 
-var useAllowBranchPicker = () => {
+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();
@@ -3872,7 +4316,8 @@ var BranchPickerPrevious2 = _react.forwardRef.call(void 0, (props, ref) => {
       branchPicker: { previous: { tooltip = "Previous" } = {} } = {}
     } = {}
   } = useThreadConfig();
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, branchPicker_exports.Previous, { asChild: true, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, TooltipIconButton, { tooltip, ...props, ref, children: _nullishCoalesce(props.children, () => ( /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.ChevronLeftIcon, {}))) }) });
+  const allowBranchPicker = useAllowBranchPicker();
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, branchPicker_exports.Previous, { disabled: !allowBranchPicker, asChild: true, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, TooltipIconButton, { tooltip, ...props, ref, children: _nullishCoalesce(props.children, () => ( /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.ChevronLeftIcon, {}))) }) });
 });
 BranchPickerPrevious2.displayName = "BranchPickerPrevious";
 var BranchPickerStateWrapper = withDefaults("span", {
@@ -3890,7 +4335,8 @@ var BranchPickerNext = _react.forwardRef.call(void 0, (props, ref) => {
   const {
     strings: { branchPicker: { next: { tooltip = "Next" } = {} } = {} } = {}
   } = useThreadConfig();
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, branchPicker_exports.Next, { asChild: true, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, TooltipIconButton, { tooltip, ...props, ref, children: _nullishCoalesce(props.children, () => ( /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.ChevronRightIcon, {}))) }) });
+  const allowBranchPicker = useAllowBranchPicker();
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, branchPicker_exports.Next, { disabled: !allowBranchPicker, asChild: true, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, TooltipIconButton, { tooltip, ...props, ref, children: _nullishCoalesce(props.children, () => ( /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.ChevronRightIcon, {}))) }) });
 });
 BranchPickerNext.displayName = "BranchPickerNext";
 var exports2 = {
@@ -3967,21 +4413,26 @@ var AssistantMessageContentWrapper = withDefaults("div", {
 });
 var AssistantMessageContent = _react.forwardRef.call(void 0, ({ components: componentsProp, ...rest }, ref) => {
   const { tools, assistantMessage: { components = {} } = {} } = useThreadConfig();
+  const toolsComponents = _react.useMemo.call(void 0, 
+    () => ({
+      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
+    [..._nullishCoalesce(tools, () => ( [])), components.ToolFallback]
+  );
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, AssistantMessageContentWrapper, { ...rest, ref, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
     message_exports.Content,
     {
       components: {
         ...componentsProp,
-        Text: _nullishCoalesce(_nullishCoalesce(_optionalChain([componentsProp, 'optionalAccess', _151 => _151.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
-        }
+        Text: _nullishCoalesce(_nullishCoalesce(_optionalChain([componentsProp, 'optionalAccess', _219 => _219.Text]), () => ( components.Text)), () => ( content_part_default.Text)),
+        tools: toolsComponents
       }
     }
   ) });
@@ -4026,10 +4477,71 @@ var CircleStopIcon = () => {
 };
 CircleStopIcon.displayName = "CircleStopIcon";
 
+// src/ui/composer-attachment.tsx
+
+
+
+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__ */ _jsxruntime.jsxs.call(void 0, ComposerAttachmentRoot, { children: [
+    ".",
+    attachment.name.split(".").pop(),
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ComposerAttachmentRemove, {})
+  ] });
+};
+ComposerAttachment2.displayName = "ComposerAttachment";
+var ComposerAttachmentRemove = _react.forwardRef.call(void 0, (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__ */ _jsxruntime.jsx.call(void 0, 
+    TooltipIconButton,
+    {
+      tooltip,
+      className: "aui-composer-attachment-remove",
+      side: "top",
+      ...props,
+      onClick: handleRemoveAttachment,
+      ref,
+      children: _nullishCoalesce(props.children, () => ( /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.CircleXIcon, {})))
+    }
+  );
+});
+ComposerAttachmentRemove.displayName = "ComposerAttachmentRemove";
+var exports5 = {
+  Root: ComposerAttachmentRoot,
+  Remove: ComposerAttachmentRemove
+};
+var composer_attachment_default = Object.assign(
+  ComposerAttachment2,
+  exports5
+);
+
 // src/ui/composer.tsx
 
+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 = () => {
+  const allowAttachments = useAllowAttachments(true);
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, ComposerRoot, { children: [
+    allowAttachments && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ComposerAttachments, {}),
+    allowAttachments && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ComposerAddAttachment, {}),
     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ComposerInput, { autoFocus: true }),
     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ComposerAction, {})
   ] });
@@ -4055,6 +4567,43 @@ var ComposerInput = _react.forwardRef.call(void 0,
   }
 );
 ComposerInput.displayName = "ComposerInput";
+var ComposerAttachmentsContainer = withDefaults("div", {
+  className: "aui-composer-attachments"
+});
+var ComposerAttachments = ({ components }) => {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ComposerAttachmentsContainer, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    composer_exports.Attachments,
+    {
+      components: {
+        ...components,
+        Attachment: _nullishCoalesce(_optionalChain([components, 'optionalAccess', _220 => _220.Attachment]), () => ( composer_attachment_default))
+      }
+    }
+  ) });
+};
+var ComposerAttachButton = withDefaults(TooltipIconButton, {
+  variant: "default",
+  className: "aui-composer-attach"
+});
+var ComposerAddAttachment = _react.forwardRef.call(void 0, (props, ref) => {
+  const {
+    strings: {
+      composer: { addAttachment: { tooltip = "Attach file" } = {} } = {}
+    } = {}
+  } = useThreadConfig();
+  const allowAttachments = useAllowAttachments();
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, composer_exports.AddAttachment, { disabled: !allowAttachments, asChild: true, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    ComposerAttachButton,
+    {
+      tooltip,
+      variant: "ghost",
+      ...props,
+      ref,
+      children: _nullishCoalesce(props.children, () => ( /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.PaperclipIcon, {})))
+    }
+  ) });
+});
+ComposerAddAttachment.displayName = "ComposerAddAttachment";
 var useAllowCancel = () => {
   const { useThread } = useThreadContext();
   const cancelSupported = useThread((t) => t.capabilities.cancel);
@@ -4091,14 +4640,16 @@ var ComposerCancel = _react.forwardRef.call(void 0, (props, ref) => {
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, composer_exports.Cancel, { asChild: true, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ComposerCancelButton, { tooltip, ...props, ref, children: _nullishCoalesce(props.children, () => ( /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 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
 
@@ -4158,13 +4709,13 @@ var ThreadWelcomeSuggestion = ({
 };
 var ThreadWelcomeSuggestions = () => {
   const { welcome: { suggestions } = {} } = useThreadConfig();
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ThreadWelcomeSuggestionContainer, { children: _optionalChain([suggestions, 'optionalAccess', _152 => _152.map, 'call', _153 => _153((suggestion, idx) => {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ThreadWelcomeSuggestionContainer, { children: _optionalChain([suggestions, 'optionalAccess', _221 => _221.map, 'call', _222 => _222((suggestion, idx) => {
     const key = `${suggestion.prompt}-${idx}`;
     return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 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
 
@@ -4202,20 +4753,43 @@ var UserActionBarEdit = _react.forwardRef.call(void 0, (props, ref) => {
     strings: { userMessage: { edit: { tooltip = "Edit" } = {} } = {} } = {}
   } = useThreadConfig();
   const allowEdit = useAllowEdit();
-  if (!allowEdit) return null;
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, actionBar_exports.Edit, { asChild: true, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, TooltipIconButton, { tooltip, ...props, ref, children: _nullishCoalesce(props.children, () => ( /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.PencilIcon, {}))) }) });
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, actionBar_exports.Edit, { disabled: !allowEdit, asChild: true, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, TooltipIconButton, { tooltip, ...props, ref, children: _nullishCoalesce(props.children, () => ( /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.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
+
+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__ */ _jsxruntime.jsxs.call(void 0, 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
 
 var UserMessage = () => {
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, UserMessageRoot, { children: [
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, UserMessageAttachments, {}),
     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, user_action_bar_default, {}),
     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, UserMessageContent, {}),
     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, branch_picker_default, {})
@@ -4236,18 +4810,35 @@ var UserMessageContent = _react.forwardRef.call(void 0,
       {
         components: {
           ...components,
-          Text: _nullishCoalesce(_optionalChain([components, 'optionalAccess', _154 => _154.Text]), () => ( content_part_default.Text))
+          Text: _nullishCoalesce(_optionalChain([components, 'optionalAccess', _223 => _223.Text]), () => ( content_part_default.Text))
         }
       }
     ) });
   }
 );
 UserMessageContent.displayName = "UserMessageContent";
-var exports8 = {
+var UserMessageAttachmentsContainer = withDefaults("div", {
+  className: "aui-user-message-attachments"
+});
+var UserMessageAttachments = ({
+  components
+}) => {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, message_exports.If, { hasAttachments: true, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, UserMessageAttachmentsContainer, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    message_exports.Attachments,
+    {
+      components: {
+        ...components,
+        Attachment: _nullishCoalesce(_optionalChain([components, 'optionalAccess', _224 => _224.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
 
@@ -4294,14 +4885,14 @@ var EditComposerSend = _react.forwardRef.call(void 0,
   }
 );
 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
 
@@ -4338,10 +4929,10 @@ var ThreadMessages = ({ components, ...rest }) => {
     thread_exports.Messages,
     {
       components: {
-        UserMessage: _nullishCoalesce(_optionalChain([components, 'optionalAccess', _155 => _155.UserMessage]), () => ( user_message_default)),
-        EditComposer: _nullishCoalesce(_optionalChain([components, 'optionalAccess', _156 => _156.EditComposer]), () => ( edit_composer_default)),
-        AssistantMessage: _nullishCoalesce(_optionalChain([components, 'optionalAccess', _157 => _157.AssistantMessage]), () => ( assistant_message_default)),
-        SystemMessage: _nullishCoalesce(_optionalChain([components, 'optionalAccess', _158 => _158.SystemMessage]), () => ( SystemMessage))
+        UserMessage: _nullishCoalesce(_optionalChain([components, 'optionalAccess', _225 => _225.UserMessage]), () => ( user_message_default)),
+        EditComposer: _nullishCoalesce(_optionalChain([components, 'optionalAccess', _226 => _226.EditComposer]), () => ( edit_composer_default)),
+        AssistantMessage: _nullishCoalesce(_optionalChain([components, 'optionalAccess', _227 => _227.AssistantMessage]), () => ( assistant_message_default)),
+        SystemMessage: _nullishCoalesce(_optionalChain([components, 'optionalAccess', _228 => _228.SystemMessage]), () => ( SystemMessage))
       },
       ...rest
     }
@@ -4361,14 +4952,14 @@ var ThreadScrollToBottom = _react.forwardRef.call(void 0, (props, ref) => {
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, thread_exports.ScrollToBottom, { asChild: true, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ThreadScrollToBottomIconButton, { tooltip, ...props, ref, children: _nullishCoalesce(props.children, () => ( /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.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
 
@@ -4442,14 +5033,20 @@ 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);
+
+
+
+
+
+
 
 
 
@@ -4524,5 +5121,5 @@ var assistant_modal_default = Object.assign(AssistantModal, exports11);
 
 
 
-exports.ActionBarPrimitive = actionBar_exports; exports.AssistantActionBar = assistant_action_bar_default; exports.AssistantMessage = assistant_message_default; exports.AssistantModal = assistant_modal_default; exports.AssistantModalPrimitive = assistantModal_exports; exports.AssistantRuntimeProvider = AssistantRuntimeProvider; exports.BranchPicker = branch_picker_default; exports.BranchPickerPrimitive = branchPicker_exports; exports.Composer = composer_default; exports.ComposerPrimitive = composer_exports; exports.ContentPart = content_part_default; exports.ContentPartPrimitive = contentPart_exports; exports.EdgeChatAdapter = EdgeChatAdapter; exports.EditComposer = edit_composer_default; exports.ExternalStoreRuntime = ExternalStoreRuntime; exports.INTERNAL = internal_exports; exports.MessagePrimitive = message_exports; exports.Thread = thread_default; exports.ThreadConfigProvider = ThreadConfigProvider; exports.ThreadPrimitive = thread_exports; exports.ThreadWelcome = thread_welcome_default; exports.UserActionBar = user_action_bar_default; exports.UserMessage = user_message_default; exports.WebSpeechSynthesisAdapter = WebSpeechSynthesisAdapter; exports.fromCoreMessage = fromCoreMessage; exports.fromCoreMessages = fromCoreMessages; exports.fromLanguageModelMessages = fromLanguageModelMessages; exports.fromLanguageModelTools = fromLanguageModelTools; exports.getExternalStoreMessage = getExternalStoreMessage; exports.makeAssistantTool = makeAssistantTool; exports.makeAssistantToolUI = makeAssistantToolUI; exports.streamUtils = streamUtils; exports.subscribeToMainThread = subscribeToMainThread; exports.toCoreMessage = _chunkBQ3MRWUVjs.toCoreMessage; exports.toCoreMessages = _chunkBQ3MRWUVjs.toCoreMessages; exports.toLanguageModelMessages = _chunkBQ3MRWUVjs.toLanguageModelMessages; exports.toLanguageModelTools = _chunkBQ3MRWUVjs.toLanguageModelTools; exports.useActionBarCopy = useActionBarCopy; exports.useActionBarEdit = useActionBarEdit; exports.useActionBarReload = useActionBarReload; exports.useActionBarSpeak = useActionBarSpeak; exports.useActionBarStopSpeaking = useActionBarStopSpeaking; exports.useAppendMessage = useAppendMessage; exports.useAssistantContext = useAssistantContext; exports.useAssistantInstructions = useAssistantInstructions; exports.useAssistantTool = useAssistantTool; exports.useAssistantToolUI = useAssistantToolUI; exports.useBranchPickerCount = useBranchPickerCount; exports.useBranchPickerNext = useBranchPickerNext; exports.useBranchPickerNumber = useBranchPickerNumber; exports.useBranchPickerPrevious = useBranchPickerPrevious; exports.useComposerCancel = useComposerCancel; exports.useComposerContext = useComposerContext; exports.useComposerIf = useComposerIf; exports.useComposerSend = useComposerSend; exports.useContentPartContext = useContentPartContext; exports.useContentPartDisplay = useContentPartDisplay; exports.useContentPartImage = useContentPartImage; exports.useContentPartText = useContentPartText; exports.useDangerousInBrowserRuntime = useDangerousInBrowserRuntime; exports.useEdgeRuntime = useEdgeRuntime; exports.useExternalMessageConverter = useExternalMessageConverter; exports.useExternalStoreRuntime = useExternalStoreRuntime; exports.useLocalRuntime = useLocalRuntime; exports.useMessageContext = useMessageContext; exports.useMessageIf = useMessageIf; exports.useSwitchToNewThread = useSwitchToNewThread; exports.useThreadConfig = useThreadConfig; exports.useThreadContext = useThreadContext; exports.useThreadEmpty = useThreadEmpty; exports.useThreadIf = useThreadIf; exports.useThreadScrollToBottom = useThreadScrollToBottom; exports.useThreadSuggestion = useThreadSuggestion;
+exports.ActionBarPrimitive = actionBar_exports; exports.AssistantActionBar = assistant_action_bar_default; exports.AssistantMessage = assistant_message_default; exports.AssistantModal = assistant_modal_default; exports.AssistantModalPrimitive = assistantModal_exports; exports.AssistantRuntimeProvider = AssistantRuntimeProvider; exports.BranchPicker = branch_picker_default; exports.BranchPickerPrimitive = branchPicker_exports; exports.Composer = composer_default; exports.ComposerAttachment = composer_attachment_default; exports.ComposerPrimitive = composer_exports; exports.CompositeAttachmentAdapter = CompositeAttachmentAdapter; exports.ContentPart = content_part_default; exports.ContentPartPrimitive = contentPart_exports; exports.EdgeChatAdapter = EdgeChatAdapter; exports.EditComposer = edit_composer_default; exports.ExternalStoreRuntime = ExternalStoreRuntime; exports.INTERNAL = internal_exports; exports.MessagePrimitive = message_exports; exports.SimpleImageAttachmentAdapter = SimpleImageAttachmentAdapter; exports.SimpleTextAttachmentAdapter = SimpleTextAttachmentAdapter; exports.Thread = thread_default; exports.ThreadConfigProvider = ThreadConfigProvider; exports.ThreadPrimitive = thread_exports; exports.ThreadWelcome = thread_welcome_default; exports.UserActionBar = user_action_bar_default; exports.UserMessage = user_message_default; exports.UserMessageAttachment = user_message_attachment_default; exports.WebSpeechSynthesisAdapter = WebSpeechSynthesisAdapter; exports.fromCoreMessage = fromCoreMessage; exports.fromCoreMessages = fromCoreMessages; exports.fromLanguageModelMessages = fromLanguageModelMessages; exports.fromLanguageModelTools = fromLanguageModelTools; exports.getExternalStoreMessage = getExternalStoreMessage; exports.makeAssistantTool = makeAssistantTool; exports.makeAssistantToolUI = makeAssistantToolUI; exports.streamUtils = streamUtils; exports.subscribeToMainThread = subscribeToMainThread; exports.toCoreMessage = _chunkBNSCUYW7js.toCoreMessage; exports.toCoreMessages = _chunkBNSCUYW7js.toCoreMessages; exports.toLanguageModelMessages = _chunkBNSCUYW7js.toLanguageModelMessages; exports.toLanguageModelTools = _chunkBNSCUYW7js.toLanguageModelTools; exports.useActionBarCopy = useActionBarCopy; exports.useActionBarEdit = useActionBarEdit; exports.useActionBarReload = useActionBarReload; exports.useActionBarSpeak = useActionBarSpeak; exports.useActionBarStopSpeaking = useActionBarStopSpeaking; exports.useAppendMessage = useAppendMessage; exports.useAssistantContext = useAssistantContext; exports.useAssistantInstructions = useAssistantInstructions; exports.useAssistantTool = useAssistantTool; exports.useAssistantToolUI = useAssistantToolUI; exports.useBranchPickerCount = useBranchPickerCount; exports.useBranchPickerNext = useBranchPickerNext; exports.useBranchPickerNumber = useBranchPickerNumber; exports.useBranchPickerPrevious = useBranchPickerPrevious; exports.useComposerAddAttachment = useComposerAddAttachment; exports.useComposerCancel = useComposerCancel; exports.useComposerContext = useComposerContext; exports.useComposerIf = useComposerIf; exports.useComposerSend = useComposerSend; exports.useContentPartContext = useContentPartContext; exports.useContentPartDisplay = useContentPartDisplay; exports.useContentPartImage = useContentPartImage; exports.useContentPartText = useContentPartText; exports.useDangerousInBrowserRuntime = useDangerousInBrowserRuntime; exports.useEdgeRuntime = useEdgeRuntime; exports.useExternalMessageConverter = useExternalMessageConverter; exports.useExternalStoreRuntime = useExternalStoreRuntime; exports.useLocalRuntime = useLocalRuntime; exports.useMessageContext = useMessageContext; exports.useMessageIf = useMessageIf; exports.useSwitchToNewThread = useSwitchToNewThread; exports.useThreadConfig = useThreadConfig; exports.useThreadContext = useThreadContext; exports.useThreadEmpty = useThreadEmpty; exports.useThreadIf = useThreadIf; exports.useThreadScrollToBottom = useThreadScrollToBottom; exports.useThreadSuggestion = useThreadSuggestion;
 //# sourceMappingURL=index.js.map