@artooi/ag-ui-web-component 0.5.0 → 0.6.0

package/dist/index.js

@@ -17,6 +17,12 @@ var TOOL_CALL_STATUS = {
   ERROR: "error",
   DECLINED: "declined"
 };
+var ATTACHMENT_STATUS = {
+  UPLOADING: "uploading",
+  READY: "ready",
+  ERROR: "error"
+};
+var DEFAULT_ATTACHMENT_MAX_BYTES = 10 * 1024 * 1024;
 var TOOL_DISPLAY = {
   MINIMAL: "minimal",
   COMPACT: "compact",
@@ -231,6 +237,227 @@ function createStateHookTools(hook) {
   return tools;
 }
 
+// src/ui/attachment_chips.ts
+function renderAttachmentChips(refs) {
+  const list = document.createElement("div");
+  list.className = "attachment-chips";
+  for (const ref of refs) {
+    list.appendChild(renderChip(ref));
+  }
+  return list;
+}
+function renderChip(ref) {
+  const chip = document.createElement("div");
+  chip.className = "attachment-chip attachment-chip--ready";
+  const icon = document.createElement("span");
+  icon.className = "attachment-chip-icon";
+  icon.textContent = iconFor(ref.mime);
+  icon.setAttribute("aria-hidden", "true");
+  const name = document.createElement("span");
+  name.className = "attachment-chip-name";
+  name.textContent = ref.name;
+  name.title = ref.name;
+  const size = document.createElement("span");
+  size.className = "attachment-chip-size";
+  size.textContent = formatBytes(ref.size);
+  chip.append(icon, name, size);
+  return chip;
+}
+function iconFor(mime) {
+  if (mime.startsWith("image/")) {
+    return "\u{1F5BC}";
+  }
+  if (mime === "application/pdf") {
+    return "\u{1F4D5}";
+  }
+  if (mime.startsWith("text/")) {
+    return "\u{1F4C4}";
+  }
+  return "\u{1F4CE}";
+}
+function formatBytes(bytes) {
+  if (bytes < 1024) {
+    return `${bytes} B`;
+  }
+  const units = ["KB", "MB", "GB"];
+  let value = bytes / 1024;
+  let unit = 0;
+  while (value >= 1024 && unit < units.length - 1) {
+    value /= 1024;
+    unit += 1;
+  }
+  const rounded = value < 10 ? Math.round(value * 10) / 10 : Math.round(value);
+  return `${rounded} ${units[unit]}`;
+}
+
+// src/ui/attachment_tray.ts
+import { randomUUID } from "@ag-ui/client";
+var AttachmentTray = class {
+  /** The tray root; append above the input row. Hidden while empty. */
+  element;
+  #config;
+  #items = [];
+  constructor(config) {
+    this.#config = config;
+    this.element = document.createElement("div");
+    this.element.className = "attachment-tray";
+    this.element.hidden = true;
+  }
+  /** Queue a file: reject oversize/disallowed into an error chip, else upload. */
+  add(file) {
+    const item = {
+      localId: randomUUID(),
+      file,
+      status: ATTACHMENT_STATUS.UPLOADING,
+      progress: 0,
+      ref: null,
+      error: ""
+    };
+    this.#items.push(item);
+    const rejection = this.#reject(file);
+    if (rejection !== null) {
+      item.status = ATTACHMENT_STATUS.ERROR;
+      item.error = rejection;
+      this.#render();
+      this.#config.onChange?.();
+      return;
+    }
+    this.#render();
+    this.#config.onChange?.();
+    this.#upload(item);
+  }
+  /** The durable refs of every chip that finished uploading. */
+  readyRefs() {
+    const refs = [];
+    for (const item of this.#items) {
+      if (item.ref !== null) {
+        refs.push(item.ref);
+      }
+    }
+    return refs;
+  }
+  /** Whether any chip is still uploading (a send would drop nothing if false). */
+  hasPending() {
+    return this.#items.some((item) => item.status === ATTACHMENT_STATUS.UPLOADING);
+  }
+  /** Whether the tray holds no chips. */
+  isEmpty() {
+    return this.#items.length === 0;
+  }
+  /** Drop the settled (ready / error) chips, leaving any still uploading. */
+  clearReady() {
+    this.#items = this.#items.filter((item) => item.status === ATTACHMENT_STATUS.UPLOADING);
+    this.#render();
+  }
+  /** Drop every chip (a reset / new-chat). */
+  clear() {
+    this.#items = [];
+    this.#render();
+  }
+  /** The size/type rejection reason for a file, or `null` when accepted. */
+  #reject(file) {
+    if (this.#config.maxBytes > 0 && file.size > this.#config.maxBytes) {
+      return `Too large (max ${formatBytes(this.#config.maxBytes)})`;
+    }
+    if (!accepts(this.#config.accept, file)) {
+      return "File type not allowed";
+    }
+    return null;
+  }
+  #upload(item) {
+    item.status = ATTACHMENT_STATUS.UPLOADING;
+    item.progress = 0;
+    item.error = "";
+    this.#render();
+    this.#config.upload(item.file, (fraction) => {
+      item.progress = fraction;
+      this.#render();
+    }).then((ref) => {
+      item.status = ATTACHMENT_STATUS.READY;
+      item.ref = ref;
+    }).catch((error) => {
+      item.status = ATTACHMENT_STATUS.ERROR;
+      item.error = error instanceof Error ? error.message : "upload failed";
+    }).finally(() => {
+      this.#render();
+      this.#config.onChange?.();
+    });
+  }
+  #remove(item) {
+    this.#items = this.#items.filter((other) => other !== item);
+    this.#render();
+    this.#config.onChange?.();
+  }
+  #render() {
+    this.element.replaceChildren();
+    this.element.hidden = this.#items.length === 0;
+    for (const item of this.#items) {
+      this.element.appendChild(this.#renderChip(item));
+    }
+  }
+  #renderChip(item) {
+    const chip = document.createElement("div");
+    chip.className = `attachment-chip attachment-chip--${item.status}`;
+    const icon = document.createElement("span");
+    icon.className = "attachment-chip-icon";
+    icon.textContent = iconFor(item.file.type);
+    icon.setAttribute("aria-hidden", "true");
+    const name = document.createElement("span");
+    name.className = "attachment-chip-name";
+    name.textContent = item.file.name;
+    name.title = item.file.name;
+    const meta = document.createElement("span");
+    meta.className = "attachment-chip-size";
+    meta.textContent = item.status === ATTACHMENT_STATUS.ERROR ? item.error : formatBytes(item.file.size);
+    chip.append(icon, name, meta);
+    if (item.status === ATTACHMENT_STATUS.UPLOADING) {
+      const bar = document.createElement("div");
+      bar.className = "attachment-chip-bar";
+      const fill = document.createElement("div");
+      fill.className = "attachment-chip-bar-fill";
+      fill.style.width = `${Math.round(item.progress * 100)}%`;
+      bar.appendChild(fill);
+      chip.appendChild(bar);
+    }
+    if (item.status === ATTACHMENT_STATUS.ERROR) {
+      const retry = document.createElement("button");
+      retry.type = "button";
+      retry.className = "attachment-chip-retry";
+      retry.title = "Retry";
+      retry.setAttribute("aria-label", "Retry upload");
+      retry.textContent = "\u21BB";
+      retry.addEventListener("click", () => this.#upload(item));
+      chip.appendChild(retry);
+    }
+    const remove = document.createElement("button");
+    remove.type = "button";
+    remove.className = "attachment-chip-remove";
+    remove.title = "Remove";
+    remove.setAttribute("aria-label", "Remove attachment");
+    remove.textContent = "\u2715";
+    remove.addEventListener("click", () => this.#remove(item));
+    chip.appendChild(remove);
+    return chip;
+  }
+};
+function accepts(accept, file) {
+  const tokens = accept.split(",").map((token) => token.trim().toLowerCase()).filter((token) => token !== "");
+  if (tokens.length === 0) {
+    return true;
+  }
+  const mime = file.type.toLowerCase();
+  const name = file.name.toLowerCase();
+  return tokens.some((token) => {
+    if (token.startsWith(".")) {
+      return name.endsWith(token);
+    }
+    if (token.endsWith("/*")) {
+      return mime.startsWith(token.slice(0, -1));
+    }
+    return mime === token;
+  });
+}
+
 // src/ui/confirmation_card.ts
 function actionButton(modifier, label) {
   const button = document.createElement("button");
@@ -3464,6 +3691,116 @@ var STYLES = `
   background: var(--ag-ui-muted);
 }
 
+/* \u2500\u2500 File attachments \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+/* The \u{1F4CE} picker button sits left of the input; hidden until data-attachments-url. */
+.attach-btn {
+  border: 1px solid var(--ag-ui-border);
+  border-radius: 8px;
+  padding: 0 10px;
+  background: var(--ag-ui-input-bg);
+  color: inherit;
+  font: inherit;
+  cursor: pointer;
+}
+
+.attach-btn:hover {
+  border-color: var(--ag-ui-accent);
+}
+
+.attach-input {
+  display: none;
+}
+
+/* Pending-attachments tray, above the input row; collapses (hidden) when empty. */
+.attachment-slot {
+  display: contents;
+}
+
+.attachment-tray {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  padding: 8px 12px 0;
+}
+
+.attachment-chips {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  margin-top: 6px;
+}
+
+.attachment-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  max-width: 100%;
+  padding: 4px 8px;
+  border: 1px solid var(--ag-ui-border);
+  border-radius: 999px;
+  background: var(--ag-ui-assistant-bg);
+  font-size: 0.85em;
+  position: relative;
+}
+
+.attachment-chip--error {
+  border-color: var(--ag-ui-danger);
+  color: var(--ag-ui-danger);
+}
+
+.attachment-chip-name {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  max-width: 14ch;
+}
+
+.attachment-chip-size {
+  color: var(--ag-ui-muted);
+  white-space: nowrap;
+}
+
+.attachment-chip--error .attachment-chip-size {
+  color: var(--ag-ui-danger);
+}
+
+/* The progress bar fills as the file uploads. */
+.attachment-chip-bar {
+  flex-basis: 100%;
+  height: 3px;
+  border-radius: 2px;
+  background: var(--ag-ui-border);
+  overflow: hidden;
+}
+
+.attachment-chip-bar-fill {
+  height: 100%;
+  background: var(--ag-ui-accent);
+  transition: width 0.15s ease;
+}
+
+.attachment-chip-remove,
+.attachment-chip-retry {
+  border: none;
+  background: none;
+  color: inherit;
+  cursor: pointer;
+  padding: 0;
+  line-height: 1;
+  opacity: 0.7;
+}
+
+.attachment-chip-remove:hover,
+.attachment-chip-retry:hover {
+  opacity: 1;
+}
+
+/* A subtle outline while a file is dragged over the shell. */
+.chat--dragover {
+  outline: 2px dashed var(--ag-ui-accent);
+  outline-offset: -4px;
+}
+
 /* Muted "\u23F9 Stopped" line after a cancelled run \u2014 a note, not an error bubble. */
 .stopped-note {
   align-self: flex-start;
@@ -4046,7 +4383,7 @@ ${text2}`;
 };
 
 // src/core/agui_client.ts
-import { randomUUID } from "@ag-ui/client";
+import { randomUUID as randomUUID2 } from "@ag-ui/client";
 var AgUiClient = class {
   #agent;
   #handlers;
@@ -4080,9 +4417,18 @@ var AgUiClient = class {
    * When the agent calls frontend tools, this executes them and re-runs the
    * agent with the results, looping until the agent stops calling frontend
    * tools (bounded by {@link MAX_TOOL_ROUNDS}).
+   *
+   * `attachments` ride on the user message as a non-standard field so the
+   * default client store round-trips them for history replay; the agent learns
+   * the ids from the run context (the server's strict validation ignores the
+   * unknown message field), then reads bytes via the `read_attachment` tool.
    */
-  async send(content) {
-    this.#agent.addMessage({ id: randomUUID(), role: "user", content });
+  async send(content, attachments = []) {
+    const message = { id: randomUUID2(), role: "user", content };
+    if (attachments.length > 0) {
+      message.attachments = attachments;
+    }
+    this.#agent.addMessage(message);
     this.#onPersist(this.#agent.messages);
     await this.#run();
   }
@@ -4096,7 +4442,7 @@ var AgUiClient = class {
   }
   /** Append a frontend tool result to history (used by the resume path). */
   addToolResult(toolCallId, content) {
-    this.#agent.addMessage({ id: randomUUID(), role: "tool", content, toolCallId });
+    this.#agent.addMessage({ id: randomUUID2(), role: "tool", content, toolCallId });
     this.#onPersist(this.#agent.messages);
   }
   /**
@@ -4158,7 +4504,7 @@ var AgUiClient = class {
           return;
         }
         this.#agent.addMessage({
-          id: randomUUID(),
+          id: randomUUID2(),
           role: "tool",
           content: result.content,
           toolCallId: call.id
@@ -4208,8 +4554,14 @@ function isAbortError(error) {
   return error instanceof Error && error.name === "AbortError";
 }
 
+// src/core/attachment.ts
+function messageAttachments(message) {
+  const refs = message.attachments;
+  return Array.isArray(refs) ? refs : [];
+}
+
 // src/core/conversation_store.ts
-import { randomUUID as randomUUID2 } from "@ag-ui/client";
+import { randomUUID as randomUUID3 } from "@ag-ui/client";
 var THREAD_KEY = "ag-ui-chat:thread";
 var THREADS_KEY = "ag-ui-chat:threads";
 var MESSAGES_PREFIX = "ag-ui-chat:messages:";
@@ -4223,7 +4575,7 @@ var SessionStorageStore = class {
     if (existing !== null) {
       return existing;
     }
-    const id = randomUUID2();
+    const id = randomUUID3();
     sessionStorage.setItem(THREAD_KEY, id);
     return id;
   }
@@ -4463,6 +4815,70 @@ var RemoteConversationStore = class {
   }
 };
 
+// src/core/upload_attachment.ts
+function uploadAttachment(file, options) {
+  return new Promise((resolve, reject) => {
+    const form = new FormData();
+    form.append("file", file);
+    const xhr = new XMLHttpRequest();
+    xhr.open("POST", options.url);
+    for (const [key, value] of Object.entries(options.headers ?? {})) {
+      xhr.setRequestHeader(key, value);
+    }
+    const onProgress = options.onProgress;
+    if (onProgress !== void 0) {
+      xhr.upload.addEventListener("progress", (event) => {
+        if (event.lengthComputable) {
+          onProgress(event.total === 0 ? 0 : event.loaded / event.total);
+        }
+      });
+    }
+    xhr.addEventListener("load", () => {
+      if (xhr.status >= 200 && xhr.status < 300) {
+        try {
+          resolve(parseRef(JSON.parse(xhr.responseText)));
+        } catch {
+          reject(new Error("upload returned an unreadable response"));
+        }
+      } else {
+        reject(new Error(errorMessage(xhr)));
+      }
+    });
+    xhr.addEventListener("error", () => reject(new Error("upload failed")));
+    xhr.addEventListener("abort", () => reject(new Error("upload cancelled")));
+    const signal = options.signal;
+    if (signal !== void 0) {
+      signal.addEventListener("abort", () => xhr.abort());
+    }
+    xhr.send(form);
+  });
+}
+function parseRef(body) {
+  if (typeof body !== "object" || body === null) {
+    throw new Error("not an object");
+  }
+  const o = body;
+  const id = o["id"];
+  const name = o["name"];
+  const mime = o["mime"];
+  const size = o["size"];
+  const url = o["url"];
+  if (typeof id !== "string" || typeof name !== "string" || typeof mime !== "string" || typeof size !== "number") {
+    throw new Error("missing fields");
+  }
+  return typeof url === "string" ? { id, name, mime, size, url } : { id, name, mime, size };
+}
+function errorMessage(xhr) {
+  try {
+    const body = JSON.parse(xhr.responseText);
+    if (typeof body.error === "string") {
+      return body.error;
+    }
+  } catch {
+  }
+  return `upload failed (${xhr.status})`;
+}
+
 // src/core/ag_ui_chat.ts
 var COLLAPSED_KEY = "ag-ui-chat:collapsed";
 var AgUiChat = class extends HTMLElement {
@@ -4503,9 +4919,14 @@ var AgUiChat = class extends HTMLElement {
   ];
   /**
    * Per-run context provider. Defaults to the compact page map (when a
-   * {@link getPageMap} provider is set and {@link autoInjectPageMap} is on).
+   * {@link getPageMap} provider is set and {@link autoInjectPageMap} is on)
+   * plus a one-line manifest of the files attached to the message being sent,
+   * so the agent knows which `read_attachment` ids are available.
    */
-  getContext = () => createPageMapContext(this.getPageMap, this.autoInjectPageMap);
+  getContext = () => [
+    ...createPageMapContext(this.getPageMap, this.autoInjectPageMap),
+    ...this.#attachmentContext()
+  ];
   /**
    * Navigable routes the agent can jump to via the built-in `route.*` tools.
    * A compact summary also rides in each run's context.
@@ -4527,6 +4948,16 @@ var AgUiChat = class extends HTMLElement {
    * server-backed store for cross-tab/device durability.
    */
   conversationStore = new SessionStorageStore();
+  /**
+   * How attached files are uploaded. `null` (default) uses the built-in
+   * multipart `POST` to `data-attachments-url`. Set a custom
+   * {@link UploadHandler} — `(file, onProgress) => Promise<AttachmentRef>` — to
+   * swap the transport (e.g. a `tus-js-client` resumable adapter or
+   * direct-to-S3 multipart) without changing the tray, the chips, or the AG-UI
+   * wire (refs are transport-agnostic). When set, the 📎 affordance appears even
+   * with no `data-attachments-url`; the handler owns its own endpoint + headers.
+   */
+  uploadHandler = null;
   /**
    * Builds the tool result a navigating tool resumes with after the page
    * reloads. Defaults to the landed URL; a host (e.g. the admin package) can
@@ -4575,6 +5006,14 @@ var AgUiChat = class extends HTMLElement {
   #skillsMenu;
   #drawer;
   #skillHint;
+  /** File-picker button + hidden input + tray slot; the tray mounts on connect. */
+  #attachButton;
+  #fileInput;
+  #attachSlot;
+  /** Upload tray; created on connect only when `data-attachments-url` is set. */
+  #attachTray = null;
+  /** Refs attached to the message currently being sent (the context manifest). */
+  #runAttachments = [];
   #client = null;
   // Whether an interaction is in flight (first onRunStart → onSettled). Drives
   // the Send⇄Stop button: `agent.isRunning` is false between frontend-tool
@@ -4604,6 +5043,9 @@ var AgUiChat = class extends HTMLElement {
     this.#send = document.createElement("button");
     this.#title = document.createElement("span");
     this.#skillHint = document.createElement("div");
+    this.#attachButton = document.createElement("button");
+    this.#fileInput = document.createElement("input");
+    this.#attachSlot = document.createElement("div");
     this.#skillsMenu = new SkillsMenu((skill) => this.#applySkill(skill));
     this.#drawer = new ThreadDrawer({
       onSelect: (threadId) => {
@@ -4717,9 +5159,96 @@ var AgUiChat = class extends HTMLElement {
     this.#initSkills();
     void this.#fetchToolCatalog();
     this.#wireThreadStore();
+    this.#wireAttachments();
     this.#threadId = this.conversationStore.threadId();
     void this.#rehydrate();
   }
+  /**
+   * Enable the composer's file-upload tray when uploads are possible — either a
+   * custom {@link uploadHandler} is set or `data-attachments-url` provides the
+   * built-in multipart endpoint: reveal the 📎 button, wire the hidden file
+   * input + drag-and-drop, and mount the tray. With neither, the affordance
+   * stays hidden and the chat degrades to text-only.
+   */
+  #wireAttachments() {
+    const url = this.getAttribute("data-attachments-url");
+    const upload = this.uploadHandler ?? this.#defaultUploadHandler(url);
+    if (upload === null) {
+      return;
+    }
+    const accept = this.getAttribute("data-attachment-accept") ?? "";
+    this.#attachTray = new AttachmentTray({
+      upload,
+      maxBytes: this.#attachmentMaxBytes(),
+      accept
+    });
+    this.#attachSlot.appendChild(this.#attachTray.element);
+    this.#fileInput.accept = accept;
+    this.#attachButton.hidden = false;
+    this.#enableDragAndDrop();
+  }
+  /** The built-in multipart upload handler for `data-attachments-url`, or `null`. */
+  #defaultUploadHandler(url) {
+    if (url === null) {
+      return null;
+    }
+    return (file, onProgress) => uploadAttachment(file, { url, headers: this.headers, onProgress });
+  }
+  /** The client-side upload size cap from `data-attachment-max-bytes`. */
+  #attachmentMaxBytes() {
+    const attr = this.getAttribute("data-attachment-max-bytes");
+    if (attr === null) {
+      return DEFAULT_ATTACHMENT_MAX_BYTES;
+    }
+    const parsed = Number.parseInt(attr, 10);
+    return Number.isFinite(parsed) && parsed >= 0 ? parsed : DEFAULT_ATTACHMENT_MAX_BYTES;
+  }
+  /** Queue every file from the picker into the tray, then reset the input. */
+  #onFilesPicked() {
+    const files = this.#fileInput.files;
+    if (files !== null) {
+      for (const file of Array.from(files)) {
+        this.#attachTray?.add(file);
+      }
+    }
+    this.#fileInput.value = "";
+  }
+  /** Accept files dropped anywhere on the chat shell into the tray. */
+  #enableDragAndDrop() {
+    this.#chat.addEventListener("dragover", (event) => {
+      event.preventDefault();
+      this.#chat.classList.add("chat--dragover");
+    });
+    this.#chat.addEventListener("dragleave", () => {
+      this.#chat.classList.remove("chat--dragover");
+    });
+    this.#chat.addEventListener("drop", (event) => {
+      event.preventDefault();
+      this.#chat.classList.remove("chat--dragover");
+      const files = event.dataTransfer?.files;
+      if (files !== void 0) {
+        for (const file of Array.from(files)) {
+          this.#attachTray?.add(file);
+        }
+      }
+    });
+  }
+  /** The one-line manifest of the message's attachments, for the run context. */
+  #attachmentContext() {
+    if (this.#runAttachments.length === 0) {
+      return [];
+    }
+    const lines = this.#runAttachments.map(
+      (ref) => `- ${ref.name} (id: ${ref.id}, ${ref.mime || "unknown type"}, ${ref.size} bytes)`
+    );
+    return [
+      {
+        description: "Files the user attached to this message",
+        value: `${lines.join("\n")}
+Use the read_attachment tool with an id to read a file's contents.`
+      }
+    ];
+  }
   /**
    * When `data-threads-url` is set, route thread enumeration / load / rename /
    * delete through that server endpoint (wrapping the current store as the
@@ -4865,6 +5394,8 @@ var AgUiChat = class extends HTMLElement {
     this.#toolCards.clear();
     this.#serverSettled.clear();
     this.#initialMessages = [];
+    this.#runAttachments = [];
+    this.#attachTray?.clear();
     this.#messages.replaceChildren();
   }
   /** Switch the active conversation to an existing thread and replay it. */
@@ -4924,8 +5455,12 @@ var AgUiChat = class extends HTMLElement {
   #renderHistoricMessage(message) {
     const text2 = typeof message.content === "string" ? message.content : "";
     if (message.role === MESSAGE_ROLE.USER) {
-      if (text2 !== "") {
-        this.appendMessage(MESSAGE_ROLE.USER, text2);
+      const attachments = messageAttachments(message);
+      if (text2 !== "" || attachments.length > 0) {
+        const bubble = this.appendMessage(MESSAGE_ROLE.USER, text2);
+        if (attachments.length > 0) {
+          bubble.appendChild(renderAttachmentChips(attachments));
+        }
       }
       return;
     }
@@ -5061,13 +5596,27 @@ var AgUiChat = class extends HTMLElement {
     });
     this.#skillHint.className = "skill-hint";
     this.#skillHint.hidden = true;
-    inputRow.append(this.#input, this.#send);
+    this.#attachButton.className = "attach-btn";
+    this.#attachButton.type = "button";
+    this.#attachButton.textContent = "\u{1F4CE}";
+    this.#attachButton.title = "Attach files";
+    this.#attachButton.setAttribute("aria-label", "Attach files");
+    this.#attachButton.hidden = true;
+    this.#attachButton.addEventListener("click", () => this.#fileInput.click());
+    this.#fileInput.className = "attach-input";
+    this.#fileInput.type = "file";
+    this.#fileInput.multiple = true;
+    this.#fileInput.hidden = true;
+    this.#fileInput.addEventListener("change", () => this.#onFilesPicked());
+    this.#attachSlot.className = "attachment-slot";
+    inputRow.append(this.#attachButton, this.#input, this.#send, this.#fileInput);
     this.#chat.append(
       header,
       this.#messages,
       this.#skillsMenu.palette,
       this.#skillsMenu.chips,
       this.#skillHint,
+      this.#attachSlot,
       inputRow,
       this.#drawer.element
     );
@@ -5113,25 +5662,31 @@ var AgUiChat = class extends HTMLElement {
   }
   async #submit() {
     const content = this.#input.value.trim();
-    if (content === "") {
+    const attachments = this.#attachTray?.readyRefs() ?? [];
+    if (content === "" && attachments.length === 0) {
       return;
     }
-    this.appendMessage(MESSAGE_ROLE.USER, content);
+    const bubble = this.appendMessage(MESSAGE_ROLE.USER, content);
+    if (attachments.length > 0) {
+      bubble.appendChild(renderAttachmentChips(attachments));
+    }
     this.#input.value = "";
+    this.#attachTray?.clearReady();
+    this.#runAttachments = attachments;
     this.dispatchEvent(
       new CustomEvent(SUBMIT_EVENT, {
-        detail: { content },
+        detail: { content, attachments },
         bubbles: true,
         composed: true
       })
     );
-    await this.#client_send(content);
+    await this.#client_send(content, attachments);
   }
-  async #client_send(content) {
+  async #client_send(content, attachments) {
     if (this.endpoint === "") {
       return;
     }
-    await this.#ensureClient().send(content);
+    await this.#ensureClient().send(content, attachments);
   }
   #ensureClient() {
     if (this.#client === null) {
@@ -5268,6 +5823,7 @@ var AgUiChat = class extends HTMLElement {
         this.#hidePending();
         this.#setRunning(false);
         this.#streamingBubble = null;
+        this.#runAttachments = [];
       }
     };
   }
@@ -5501,7 +6057,7 @@ function setControlValue(el, value) {
 }
 
 // src/version.ts
-var VERSION = "0.5.0";
+var VERSION = "0.6.0";
 export {
   AgUiChat,
   AgUiClient,
@@ -5532,6 +6088,7 @@ export {
   highlightThenClick,
   isDestructive,
   isNavigates,
+  messageAttachments,
   parseToolCatalog,
   prefersReducedMotion,
   pressButton,
@@ -5547,7 +6104,8 @@ export {
   setNativeValue,
   toggleCheckbox,
   toggleControl,
-  typeInto
+  typeInto,
+  uploadAttachment
 };
 /*! Bundled license information: