@agents24/chat-react 0.5.5 → 0.5.6

package/dist/ui/index.js

@@ -4,8 +4,21 @@ import {
 } from "../chunk-SSUO4EPD.js";
 
 // src/ui/agent-chat-composer.tsx
+import * as React2 from "react";
+import { ArrowUp, Plus, Square } from "lucide-react";
+
+// src/ui/adapters.ts
 import * as React from "react";
-import { ArrowUp, Paperclip, Plus, Square, X } from "lucide-react";
+import { FileIcon } from "@untitledui/file-icons";
+import {
+  ImageOff,
+  LoaderCircle,
+  X
+} from "lucide-react";
+
+// src/ui/attachment.tsx
+import { cva } from "class-variance-authority";
+import { Slot } from "@radix-ui/react-slot";
 
 // src/ui/utils.ts
 import { clsx } from "clsx";
@@ -14,266 +27,8 @@ function cn(...values) {
   return twMerge(clsx(values));
 }
 
-// src/ui/agent-chat-composer.tsx
-import { jsx, jsxs } from "react/jsx-runtime";
-var createId = () => typeof crypto !== "undefined" && "randomUUID" in crypto ? crypto.randomUUID() : `file-${Date.now()}-${Math.random().toString(36).slice(2)}`;
-function createComposerFile(file) {
-  return {
-    id: createId(),
-    type: "file",
-    url: URL.createObjectURL(file),
-    filename: file.name || "attachment",
-    mediaType: file.type || "application/octet-stream",
-    source: file
-  };
-}
-function revokeComposerFiles(files) {
-  files.forEach((file) => {
-    try {
-      URL.revokeObjectURL(file.url);
-    } catch {
-    }
-  });
-}
-function formatFileCount(files) {
-  if (files.length === 1) return files[0].filename;
-  return `${files.length} files`;
-}
-var pillButtonClass = "inline-flex size-8 shrink-0 items-center justify-center gap-2 rounded-lg border-0 bg-muted text-sm text-muted-foreground shadow-none transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-0 disabled:pointer-events-none disabled:opacity-50";
-var submitButtonClass = "inline-flex size-9 shrink-0 items-center justify-center gap-2 rounded-lg border-0 bg-primary text-sm text-primary-foreground shadow-none transition-[background-color,color,opacity,transform] duration-200 hover:bg-primary/90 focus-visible:outline-none focus-visible:ring-0 disabled:pointer-events-none disabled:opacity-50";
-function AgentChatComposer({
-  accept,
-  allowAttachments = true,
-  attachmentLayout = "flow",
-  className,
-  disabled = false,
-  forceExpanded = false,
-  inputToolbarContent,
-  isRunning = false,
-  onAttachmentCountChange,
-  onStop,
-  onSubmit,
-  placeholder = "Message the agent",
-  textareaRef
-}) {
-  const fileInputRef = React.useRef(null);
-  const filesRef = React.useRef([]);
-  const localTextareaRef = React.useRef(null);
-  const [text, setText] = React.useState("");
-  const [files, setFiles] = React.useState([]);
-  const [isSubmitting, setIsSubmitting] = React.useState(false);
-  const isExpanded = forceExpanded || text.includes("\n") || text.length > 62;
-  const setTextareaRef = React.useCallback(
-    (node) => {
-      localTextareaRef.current = node;
-      if (typeof textareaRef === "function") {
-        textareaRef(node);
-      } else if (textareaRef) {
-        textareaRef.current = node;
-      }
-    },
-    [textareaRef]
-  );
-  React.useEffect(() => {
-    filesRef.current = files;
-    onAttachmentCountChange?.(files.length);
-  }, [files, onAttachmentCountChange]);
-  React.useEffect(() => () => revokeComposerFiles(filesRef.current), []);
-  React.useLayoutEffect(() => {
-    const textarea = localTextareaRef.current;
-    if (!textarea) return;
-    if (isExpanded) {
-      textarea.style.height = "auto";
-      const scrollHeight = textarea.scrollHeight;
-      textarea.style.height = `${Math.min(scrollHeight, 224)}px`;
-      textarea.style.overflowY = scrollHeight >= 224 ? "auto" : "hidden";
-      return;
-    }
-    textarea.style.height = "";
-    textarea.style.overflowY = "hidden";
-  }, [isExpanded, text]);
-  const canSubmit = !disabled && !isSubmitting && !isRunning && (text.trim().length > 0 || files.length > 0);
-  const handleFilesChange = (event) => {
-    const selected = Array.from(event.target.files || []).map(createComposerFile);
-    if (selected.length > 0) {
-      setFiles((current) => [...current, ...selected]);
-    }
-    event.currentTarget.value = "";
-  };
-  const removeFile = (fileId) => {
-    setFiles((current) => {
-      const target = current.find((file) => file.id === fileId);
-      if (target) revokeComposerFiles([target]);
-      return current.filter((file) => file.id !== fileId);
-    });
-  };
-  const submit = async () => {
-    if (!canSubmit) return;
-    const submittedText = text.trim();
-    const submittedFiles = files;
-    setIsSubmitting(true);
-    try {
-      await onSubmit({ text: submittedText, files: submittedFiles });
-      setText("");
-      setFiles([]);
-      revokeComposerFiles(submittedFiles);
-    } catch {
-    } finally {
-      setIsSubmitting(false);
-    }
-  };
-  const handleKeyDown = (event) => {
-    if (event.key === "Enter" && !event.shiftKey) {
-      event.preventDefault();
-      void submit();
-    }
-  };
-  return /* @__PURE__ */ jsxs("div", { className: cn("a24-composer relative mx-auto w-full max-w-3xl overflow-visible", className), "data-agents24-chat-composer": "", children: [
-    files.length > 0 ? /* @__PURE__ */ jsx(
-      "div",
-      {
-        "data-testid": "agent-chat-composer-attachments",
-        "data-layout": attachmentLayout,
-        className: cn(
-          "a24-composer__attachments flex min-w-0 gap-2 py-1",
-          attachmentLayout === "overlay" ? "absolute bottom-full left-0 right-0 mb-1.5 flex-nowrap overflow-x-auto overflow-y-hidden overscroll-x-contain px-2" : "mb-2 flex-wrap px-1"
-        ),
-        children: files.map((file) => /* @__PURE__ */ jsxs(
-          "div",
-          {
-            className: "a24-composer__attachment group relative flex h-8 max-w-[min(20rem,calc(100vw-2rem))] cursor-default select-none items-center gap-1.5 rounded-md border border-border bg-card px-1.5 text-sm font-medium text-card-foreground transition-colors hover:bg-accent",
-            children: [
-              /* @__PURE__ */ jsx("span", { className: "flex size-5 shrink-0 items-center justify-center rounded bg-background text-muted-foreground", children: /* @__PURE__ */ jsx(Paperclip, { className: "size-3" }) }),
-              /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate", children: file.filename }),
-              /* @__PURE__ */ jsx(
-                "button",
-                {
-                  "aria-label": `Remove ${file.filename}`,
-                  className: "a24-composer__attachment-remove inline-flex size-5 shrink-0 items-center justify-center rounded text-muted-foreground opacity-70 transition-colors hover:bg-muted hover:text-foreground hover:opacity-100 focus-visible:outline-none",
-                  onClick: () => removeFile(file.id),
-                  type: "button",
-                  children: /* @__PURE__ */ jsx(X, { className: "size-3" })
-                }
-              )
-            ]
-          },
-          file.id
-        ))
-      }
-    ) : null,
-    /* @__PURE__ */ jsx(
-      "div",
-      {
-        "data-expanded": isExpanded ? "" : void 0,
-        className: cn(
-          "a24-composer__surface relative w-full border border-input bg-background shadow-sm",
-          isExpanded ? "rounded-xl p-2 pb-1.5" : "rounded-xl px-2 py-[3px]"
-        ),
-        children: /* @__PURE__ */ jsxs(
-          "div",
-          {
-            className: "a24-composer__grid w-full",
-            style: {
-              alignItems: "center",
-              display: "grid",
-              gridTemplateAreas: isExpanded ? `"textarea textarea textarea" "plus toolbar submit"` : `"plus textarea composer mic submit"`,
-              gridTemplateColumns: isExpanded ? "auto 1fr auto" : "auto 1fr auto auto auto",
-              gap: isExpanded ? "3px 10px" : "8px"
-            },
-            children: [
-              /* @__PURE__ */ jsxs("div", { style: { gridArea: "plus" }, className: "a24-composer__attach-slot flex shrink-0 items-center justify-center", children: [
-                /* @__PURE__ */ jsx(
-                  "input",
-                  {
-                    ref: fileInputRef,
-                    accept,
-                    "aria-label": "Attach files",
-                    className: "hidden",
-                    multiple: true,
-                    name: "attachments",
-                    onChange: handleFilesChange,
-                    type: "file"
-                  }
-                ),
-                /* @__PURE__ */ jsx(
-                  "button",
-                  {
-                    "aria-label": "Attach files",
-                    className: cn("a24-composer__attach", pillButtonClass),
-                    disabled: disabled || isSubmitting || isRunning || !allowAttachments,
-                    onClick: () => fileInputRef.current?.click(),
-                    title: "Attach files",
-                    type: "button",
-                    children: /* @__PURE__ */ jsx(Plus, { className: "size-4" })
-                  }
-                )
-              ] }),
-              /* @__PURE__ */ jsx("div", { style: { gridArea: "textarea" }, className: "a24-composer__textarea-slot min-w-0 w-full", children: /* @__PURE__ */ jsx(
-                "textarea",
-                {
-                  ref: setTextareaRef,
-                  "aria-label": "Message",
-                  autoComplete: "off",
-                  className: cn(
-                    "a24-composer__textarea w-full resize-none border-0 bg-transparent px-1 text-[15px] leading-relaxed text-foreground shadow-none outline-none placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-0",
-                    isExpanded ? "min-h-9 max-h-[224px] py-1" : "min-h-9 h-9 max-h-9 py-2"
-                  ),
-                  disabled: disabled || isSubmitting || isRunning,
-                  name: "message",
-                  onChange: (event) => setText(event.target.value),
-                  onKeyDown: handleKeyDown,
-                  placeholder,
-                  rows: isExpanded ? 2 : 1,
-                  value: text
-                }
-              ) }),
-              isExpanded ? /* @__PURE__ */ jsx("div", { style: { gridArea: "toolbar" }, className: "a24-composer__toolbar flex min-w-0 items-center gap-1.5", children: inputToolbarContent }) : null,
-              !isExpanded ? /* @__PURE__ */ jsx("div", { style: { gridArea: "composer" }, className: "flex min-w-0 items-center gap-1.5" }) : null,
-              !isExpanded ? /* @__PURE__ */ jsx("div", { style: { gridArea: "mic" }, className: "flex shrink-0 items-center justify-end" }) : null,
-              /* @__PURE__ */ jsx("div", { style: { gridArea: "submit" }, className: "a24-composer__submit-slot flex shrink-0 items-center justify-end", children: isRunning ? /* @__PURE__ */ jsx(
-                "button",
-                {
-                  "aria-label": "Stop generating",
-                  className: cn("a24-composer__submit", submitButtonClass),
-                  disabled: disabled || !onStop,
-                  onClick: onStop,
-                  title: "Stop",
-                  type: "button",
-                  children: /* @__PURE__ */ jsx(Square, { className: "size-3.5 fill-current" })
-                }
-              ) : /* @__PURE__ */ jsx(
-                "button",
-                {
-                  "aria-label": files.length > 0 ? `Send ${formatFileCount(files)}` : "Send message",
-                  className: cn("a24-composer__submit", submitButtonClass, text.trim().length > 0 && "hover:scale-105"),
-                  disabled: !canSubmit,
-                  onClick: () => void submit(),
-                  title: "Send",
-                  type: "button",
-                  children: /* @__PURE__ */ jsx(ArrowUp, { className: "size-4", strokeWidth: 2.5 })
-                }
-              ) })
-            ]
-          }
-        )
-      }
-    ),
-    !isExpanded && inputToolbarContent ? /* @__PURE__ */ jsx("div", { className: "a24-composer__toolbar a24-composer__toolbar--external mt-2 flex items-center gap-2 px-1", children: inputToolbarContent }) : null
-  ] });
-}
-
-// src/ui/agent-chat-actions.tsx
-import * as React3 from "react";
-import { Check, Copy, RefreshCcw, ThumbsDown, ThumbsUp } from "lucide-react";
-import { Popover } from "radix-ui";
-
-// src/ui/adapters.ts
-import * as React2 from "react";
-
 // src/ui/attachment.tsx
-import { cva } from "class-variance-authority";
-import { Slot } from "@radix-ui/react-slot";
-import { jsx as jsx2 } from "react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 var attachmentVariants = cva(
   "group/attachment relative flex w-fit max-w-full min-w-0 shrink-0 flex-wrap rounded-xl border bg-card text-card-foreground transition-colors focus-within:border-neutral-300 focus-within:ring-0 has-[>a,>button]:hover:bg-muted/50 data-[state=error]:border-destructive/30 data-[state=idle]:border-dashed",
   {
@@ -297,7 +52,7 @@ function Attachment({
   orientation = "horizontal",
   ...props
 }) {
-  return /* @__PURE__ */ jsx2(
+  return /* @__PURE__ */ jsx(
     "div",
     {
       "data-slot": "attachment",
@@ -310,12 +65,12 @@ function Attachment({
   );
 }
 var attachmentMediaVariants = cva(
-  "relative flex aspect-square w-10 shrink-0 items-center justify-center overflow-hidden rounded-lg bg-muted text-foreground group-data-[orientation=vertical]/attachment:w-full group-data-[size=sm]/attachment:w-8 group-data-[size=xs]/attachment:w-7 group-data-[size=xs]/attachment:rounded-md group-data-[state=error]/attachment:bg-destructive/10 group-data-[state=error]/attachment:text-destructive group-data-[orientation=vertical]/attachment:*:data-[slot=spinner]:size-6! [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 group-data-[orientation=vertical]/attachment:[&_svg:not([class*='size-'])]:size-6 group-data-[size=xs]/attachment:[&_svg:not([class*='size-'])]:size-3.5",
+  "relative flex aspect-square w-10 shrink-0 items-center justify-center overflow-hidden rounded-lg text-foreground group-data-[orientation=vertical]/attachment:w-full group-data-[size=sm]/attachment:w-8 group-data-[size=xs]/attachment:w-7 group-data-[size=xs]/attachment:rounded-md group-data-[state=error]/attachment:text-destructive group-data-[orientation=vertical]/attachment:*:data-[slot=spinner]:size-6! [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 group-data-[orientation=vertical]/attachment:[&_svg:not([class*='size-'])]:size-6 group-data-[size=xs]/attachment:[&_svg:not([class*='size-'])]:size-3.5",
   {
     variants: {
       variant: {
         icon: "",
-        image: "opacity-60 group-data-[state=done]/attachment:opacity-100 group-data-[state=idle]/attachment:opacity-100 *:[img]:aspect-square *:[img]:w-full *:[img]:object-cover"
+        image: "bg-muted opacity-60 group-data-[state=done]/attachment:opacity-100 group-data-[state=idle]/attachment:opacity-100 *:[img]:aspect-square *:[img]:w-full *:[img]:object-cover"
       }
     },
     defaultVariants: {
@@ -328,7 +83,7 @@ function AttachmentMedia({
   variant = "icon",
   ...props
 }) {
-  return /* @__PURE__ */ jsx2(
+  return /* @__PURE__ */ jsx(
     "div",
     {
       "data-slot": "attachment-media",
@@ -342,7 +97,7 @@ function AttachmentContent({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx2(
+  return /* @__PURE__ */ jsx(
     "div",
     {
       "data-slot": "attachment-content",
@@ -358,7 +113,7 @@ function AttachmentTitle({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx2(
+  return /* @__PURE__ */ jsx(
     "span",
     {
       "data-slot": "attachment-title",
@@ -374,7 +129,7 @@ function AttachmentDescription({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx2(
+  return /* @__PURE__ */ jsx(
     "span",
     {
       "data-slot": "attachment-description",
@@ -391,7 +146,7 @@ function AttachmentActions({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx2(
+  return /* @__PURE__ */ jsx(
     "div",
     {
       "data-slot": "attachment-actions",
@@ -408,7 +163,7 @@ function AttachmentAction({
   type = "button",
   ...props
 }) {
-  return /* @__PURE__ */ jsx2(
+  return /* @__PURE__ */ jsx(
     "button",
     {
       "data-slot": "attachment-action",
@@ -428,7 +183,7 @@ function AttachmentTrigger({
   ...props
 }) {
   const Comp = asChild ? Slot : "button";
-  return /* @__PURE__ */ jsx2(
+  return /* @__PURE__ */ jsx(
     Comp,
     {
       "data-slot": "attachment-trigger",
@@ -439,7 +194,7 @@ function AttachmentTrigger({
   );
 }
 function AttachmentGroup({ className, ...props }) {
-  return /* @__PURE__ */ jsx2(
+  return /* @__PURE__ */ jsx(
     "div",
     {
       "data-slot": "attachment-group",
@@ -453,9 +208,9 @@ function AttachmentGroup({ className, ...props }) {
 }
 
 // src/ui/message.tsx
-import { jsx as jsx3 } from "react/jsx-runtime";
+import { jsx as jsx2 } from "react/jsx-runtime";
 function MessageGroup({ className, ...props }) {
-  return /* @__PURE__ */ jsx3(
+  return /* @__PURE__ */ jsx2(
     "div",
     {
       "data-slot": "message-group",
@@ -469,7 +224,7 @@ function Message({
   align = "start",
   ...props
 }) {
-  return /* @__PURE__ */ jsx3(
+  return /* @__PURE__ */ jsx2(
     "div",
     {
       "data-slot": "message",
@@ -483,7 +238,7 @@ function Message({
   );
 }
 function MessageAvatar({ className, ...props }) {
-  return /* @__PURE__ */ jsx3(
+  return /* @__PURE__ */ jsx2(
     "div",
     {
       "data-slot": "message-avatar",
@@ -496,7 +251,7 @@ function MessageAvatar({ className, ...props }) {
   );
 }
 function MessageContent({ className, ...props }) {
-  return /* @__PURE__ */ jsx3(
+  return /* @__PURE__ */ jsx2(
     "div",
     {
       "data-slot": "message-content",
@@ -509,7 +264,7 @@ function MessageContent({ className, ...props }) {
   );
 }
 function MessageHeader({ className, ...props }) {
-  return /* @__PURE__ */ jsx3(
+  return /* @__PURE__ */ jsx2(
     "div",
     {
       "data-slot": "message-header",
@@ -522,7 +277,7 @@ function MessageHeader({ className, ...props }) {
   );
 }
 function MessageFooter({ className, ...props }) {
-  return /* @__PURE__ */ jsx3(
+  return /* @__PURE__ */ jsx2(
     "div",
     {
       "data-slot": "message-footer",
@@ -536,23 +291,22 @@ function MessageFooter({ className, ...props }) {
 }
 
 // src/ui/adapters.ts
-var ChatMessageRoleContext = React2.createContext("assistant");
+var ChatMessageRoleContext = React.createContext("assistant");
 function ChatMessage(input) {
   const { className, from, align, ...props } = input;
   const isUser = from === "user";
-  const isRtl = props.dir === "rtl";
   const resolvedAlign = align || "start";
   const messageProps = Object.assign({}, props);
   messageProps.align = resolvedAlign;
   messageProps.className = cn(
     "a24-chat-message group flex w-full flex-col gap-2",
-    isUser ? cn("a24-chat-message--user is-user max-w-[80%] justify-end", isRtl ? "mr-auto" : "ml-auto") : "a24-chat-message--assistant is-assistant max-w-full",
+    isUser ? "a24-chat-message--user is-user max-w-full justify-end" : "a24-chat-message--assistant is-assistant max-w-full",
     className
   );
-  return React2.createElement(
+  return React.createElement(
     ChatMessageRoleContext.Provider,
     { value: from },
-    React2.createElement(Message, messageProps)
+    React.createElement(Message, messageProps)
   );
 }
 function ChatMessageContent({
@@ -560,9 +314,9 @@ function ChatMessageContent({
   from,
   ...props
 }) {
-  const inheritedRole = React2.useContext(ChatMessageRoleContext);
+  const inheritedRole = React.useContext(ChatMessageRoleContext);
   const isUser = (from ?? inheritedRole) === "user";
-  return React2.createElement("div", {
+  return React.createElement("div", {
     className: cn(
       "a24-chat-message-content flex max-w-full min-w-0 flex-col gap-2 text-sm",
       isUser ? "a24-chat-message-content--user is-user:dark w-fit overflow-visible rounded-lg bg-secondary px-4 py-3 text-foreground" : "a24-chat-message-content--assistant w-full overflow-visible text-foreground",
@@ -576,7 +330,7 @@ function ChatMessageActions({
   className,
   ...props
 }) {
-  return React2.createElement("div", {
+  return React.createElement("div", {
     className: cn("flex items-center gap-1", className),
     "data-slot": "message-actions",
     ...props
@@ -591,7 +345,7 @@ function ChatMessageAction({
   ...props
 }) {
   const tooltipLabel = typeof tooltip === "string" ? tooltip : void 0;
-  return React2.createElement(
+  return React.createElement(
     "button",
     {
       "aria-label": label || tooltipLabel,
@@ -603,60 +357,310 @@ function ChatMessageAction({
       type,
       ...props
     },
-    children,
-    React2.createElement(
-      "span",
-      { className: "sr-only" },
-      label || tooltipLabel
-    )
+    children,
+    React.createElement(
+      "span",
+      { className: "sr-only" },
+      label || tooltipLabel
+    )
+  );
+}
+var resolvedContentCache = /* @__PURE__ */ new WeakMap();
+var CONTENT_CACHE_EXPIRY_BUFFER_MS = 15e3;
+var CONTENT_CACHE_MAX_ENTRIES = 100;
+function attachmentCacheKey(data) {
+  const id = typeof data.id === "string" ? data.id.trim() : "";
+  return id || null;
+}
+function cachedAttachmentContent(resolver, data) {
+  const key = attachmentCacheKey(data);
+  if (!key) return null;
+  const cached = resolvedContentCache.get(resolver)?.get(key);
+  if (!cached) return null;
+  if (!cached.validUntil) return cached;
+  const validUntil = Date.parse(cached.validUntil);
+  if (Number.isFinite(validUntil) && validUntil - CONTENT_CACHE_EXPIRY_BUFFER_MS > Date.now()) {
+    return cached;
+  }
+  resolvedContentCache.get(resolver)?.delete(key);
+  return null;
+}
+function cacheAttachmentContent(resolver, data, result) {
+  const key = attachmentCacheKey(data);
+  if (!key) return;
+  const cache = resolvedContentCache.get(resolver) || /* @__PURE__ */ new Map();
+  cache.delete(key);
+  cache.set(key, result);
+  while (cache.size > CONTENT_CACHE_MAX_ENTRIES) {
+    const oldestKey = cache.keys().next().value;
+    if (typeof oldestKey !== "string") break;
+    cache.delete(oldestKey);
+  }
+  resolvedContentCache.set(resolver, cache);
+}
+function invalidateAttachmentContent(resolver, data) {
+  const key = attachmentCacheKey(data);
+  if (key) resolvedContentCache.get(resolver)?.delete(key);
+}
+function attachmentMediaType(data) {
+  return data.mediaType || data.contentType || String(data.type || "application/octet-stream");
+}
+function attachmentFilename(data) {
+  return data.filename || data.name || "Attachment";
+}
+function attachmentExtension(filename) {
+  const extension = filename.split(".").pop();
+  return extension && extension !== filename ? extension.toLowerCase() : "";
+}
+function resolveAttachmentVisual(data) {
+  const mediaType = attachmentMediaType(data).toLowerCase();
+  const extension = attachmentExtension(attachmentFilename(data));
+  if (mediaType.startsWith("image/") || ["avif", "gif", "heic", "jpeg", "jpg", "png", "svg", "webp"].includes(extension)) {
+    return { fileIconType: extension || "image", kind: "image" };
+  }
+  if (mediaType === "application/pdf" || extension === "pdf") {
+    return { fileIconType: "pdf", kind: "pdf" };
+  }
+  if (mediaType.includes("spreadsheet") || mediaType.includes("csv") || ["csv", "numbers", "ods", "xls", "xlsm", "xlsx"].includes(extension)) {
+    if (["csv", "xls", "xlsx"].includes(extension)) {
+      return { fileIconType: extension, kind: "spreadsheet" };
+    }
+    return { fileIconType: "spreadsheets", kind: "spreadsheet" };
+  }
+  if (mediaType.includes("presentation") || ["key", "odp", "ppt", "pptx"].includes(extension)) {
+    return { fileIconType: extension === "ppt" ? "ppt" : "pptx", kind: "presentation" };
+  }
+  if (mediaType.includes("word") || mediaType.includes("rtf") || ["doc", "docx", "odt", "rtf"].includes(extension)) {
+    if (extension === "doc" || extension === "docx") {
+      return { fileIconType: extension, kind: "document" };
+    }
+    return { fileIconType: "document", kind: "document" };
+  }
+  if (mediaType.startsWith("audio/") || ["aac", "flac", "m4a", "mp3", "ogg", "wav"].includes(extension)) {
+    if (extension === "mp3" || extension === "wav") {
+      return { fileIconType: extension, kind: "audio" };
+    }
+    return { fileIconType: "audio", kind: "audio" };
+  }
+  if (mediaType.startsWith("video/") || ["avi", "m4v", "mkv", "mov", "mp4", "webm"].includes(extension)) {
+    if (["avi", "mkv", "mp4", "mpeg"].includes(extension)) {
+      return { fileIconType: extension, kind: "video" };
+    }
+    return { fileIconType: "video", kind: "video" };
+  }
+  if (mediaType.includes("zip") || mediaType.includes("compressed") || ["7z", "bz2", "gz", "rar", "tar", "tgz", "zip"].includes(extension)) {
+    return { fileIconType: extension === "rar" ? "rar" : "zip", kind: "archive" };
+  }
+  if (mediaType.includes("json") || mediaType.includes("javascript") || mediaType.includes("typescript") || mediaType.includes("xml") || ["css", "html", "js", "jsx", "json", "py", "sql", "ts", "tsx", "xml", "yaml", "yml"].includes(extension)) {
+    if (["css", "html", "java", "js", "json", "sql", "xml"].includes(extension)) {
+      return { fileIconType: extension, kind: "code" };
+    }
+    return { fileIconType: "code", kind: "code" };
+  }
+  if (mediaType.startsWith("text/") || ["md", "markdown", "txt"].includes(extension)) {
+    return { fileIconType: "txt", kind: "file" };
+  }
+  return { fileIconType: "empty", kind: "file" };
+}
+function solidFileIconBackground(fileIconType, kind) {
+  if (["txt", "zip", "rar"].includes(fileIconType)) return "#344054";
+  if (kind === "pdf") return "#D92D20";
+  if (kind === "spreadsheet") return "#079455";
+  if (kind === "document" || kind === "video") return "#155EEF";
+  if (kind === "presentation") return "#E62E05";
+  if (kind === "audio") return "#DD2590";
+  if (kind === "code") return "#444CE7";
+  return "#7F56D9";
+}
+function isImageAttachment(data) {
+  return resolveAttachmentVisual(data).kind === "image";
+}
+function attachmentRenderKey(data, index, rowKind) {
+  const id = typeof data.id === "string" ? data.id.trim() : "";
+  const identity = id || `${attachmentFilename(data)}:${attachmentMediaType(data)}`;
+  return `${rowKind}:${identity}:${index}`;
+}
+function ChatImageAttachment({
+  className,
+  data,
+  onRemove,
+  resolveContent,
+  ...props
+}) {
+  const filename = attachmentFilename(data);
+  const initialUrl = typeof data.url === "string" ? data.url.trim() : "";
+  const contentStatus = String(data.contentStatus || data.content_status || "available");
+  const attachmentKey = attachmentCacheKey(data);
+  const dataRef = React.useRef(data);
+  dataRef.current = data;
+  const rootRef = React.useRef(null);
+  const retryCountRef = React.useRef(0);
+  const [isNearViewport, setIsNearViewport] = React.useState(Boolean(initialUrl));
+  const [sourceUrl, setSourceUrl] = React.useState(initialUrl);
+  const [status, setStatus] = React.useState(
+    initialUrl ? "loading" : contentStatus === "expired" || !resolveContent ? "error" : "idle"
+  );
+  const [resolutionAttempt, setResolutionAttempt] = React.useState(0);
+  React.useEffect(() => {
+    if (initialUrl && resolutionAttempt === 0 || contentStatus === "expired" || !resolveContent) return;
+    const node = rootRef.current;
+    if (!node || typeof IntersectionObserver === "undefined") {
+      setIsNearViewport(true);
+      return;
+    }
+    const observer = new IntersectionObserver(
+      (entries) => {
+        if (entries.some((entry) => entry.isIntersecting)) {
+          setIsNearViewport(true);
+          observer.disconnect();
+        }
+      },
+      { rootMargin: "240px" }
+    );
+    observer.observe(node);
+    return () => observer.disconnect();
+  }, [contentStatus, initialUrl, resolutionAttempt, resolveContent]);
+  React.useEffect(() => {
+    if (initialUrl && resolutionAttempt === 0) {
+      setSourceUrl(initialUrl);
+      setStatus("loading");
+      return;
+    }
+    if (!isNearViewport || !resolveContent || contentStatus === "expired") return;
+    const attachment = dataRef.current;
+    const cached = cachedAttachmentContent(resolveContent, attachment);
+    if (cached) {
+      setSourceUrl(cached.url);
+      setStatus("loading");
+      return;
+    }
+    const controller = new AbortController();
+    setStatus("resolving");
+    void resolveContent(attachment, controller.signal).then((result) => {
+      if (controller.signal.aborted) return;
+      if (!result.url?.trim()) throw new Error("Attachment content resolver returned an empty URL");
+      cacheAttachmentContent(resolveContent, attachment, result);
+      setSourceUrl(result.url);
+      setStatus("loading");
+    }).catch(() => {
+      if (!controller.signal.aborted) setStatus("error");
+    });
+    return () => controller.abort();
+  }, [attachmentKey, contentStatus, initialUrl, isNearViewport, resolutionAttempt, resolveContent]);
+  const handleImageError = () => {
+    if (resolveContent && retryCountRef.current === 0) {
+      retryCountRef.current = 1;
+      invalidateAttachmentContent(resolveContent, dataRef.current);
+      setSourceUrl("");
+      setStatus("resolving");
+      setResolutionAttempt((current) => current + 1);
+      return;
+    }
+    setStatus("error");
+  };
+  return React.createElement(
+    Attachment,
+    {
+      ...props,
+      className: cn("a24-chat-image-attachment", className),
+      orientation: "vertical",
+      ref: rootRef,
+      state: status === "error" ? "error" : status === "done" ? "done" : "processing",
+      title: filename
+    },
+    React.createElement(
+      AttachmentMedia,
+      { className: "a24-chat-image-media", variant: "image" },
+      sourceUrl ? React.createElement("img", {
+        alt: filename,
+        decoding: "async",
+        loading: "lazy",
+        onError: handleImageError,
+        onLoad: () => setStatus("done"),
+        src: sourceUrl
+      }) : status === "error" ? React.createElement(ImageOff, { "aria-hidden": "true", className: "size-5" }) : React.createElement(LoaderCircle, {
+        "aria-hidden": "true",
+        className: "a24-chat-image-spinner size-5 animate-spin"
+      }),
+      status !== "done" && status !== "error" ? React.createElement("span", { className: "sr-only", role: "status" }, `Loading ${filename}`) : null,
+      status === "error" ? React.createElement("span", { className: "sr-only" }, `${filename} preview unavailable`) : null
+    ),
+    onRemove ? React.createElement(
+      "button",
+      {
+        "aria-label": `Remove ${filename}`,
+        className: "a24-chat-image-remove",
+        onClick: (event) => {
+          event.stopPropagation();
+          onRemove();
+        },
+        type: "button"
+      },
+      React.createElement(X, { "aria-hidden": "true", className: "size-3.5" })
+    ) : null
   );
 }
 function ChatAttachment({
+  className,
   data,
   onRemove,
   orientation,
+  resolveContent,
   ...props
 }) {
-  const mediaType = data.mediaType || data.contentType || String(data.type || "application/octet-stream");
-  const filename = data.filename || data.name || "Attachment";
-  const isImage = mediaType.startsWith("image/") && Boolean(data.url);
-  return React2.createElement(
+  const filename = attachmentFilename(data);
+  const { fileIconType, kind } = resolveAttachmentVisual(data);
+  if (kind === "image") {
+    return React.createElement(ChatImageAttachment, {
+      ...props,
+      className,
+      data,
+      onRemove,
+      resolveContent
+    });
+  }
+  return React.createElement(
     Attachment,
     {
-      orientation: orientation || (isImage ? "vertical" : "horizontal"),
+      className: cn("a24-chat-attachment", className),
+      orientation: orientation || "horizontal",
+      size: "sm",
       ...props
     },
-    React2.createElement(
+    React.createElement(
       AttachmentMedia,
-      { variant: isImage ? "image" : "icon" },
-      isImage ? React2.createElement("img", {
-        alt: filename,
-        className: "size-full object-cover",
-        src: data.url
-      }) : React2.createElement(
-        "span",
-        { "aria-hidden": "true", className: "text-sm" },
-        filename.slice(0, 1).toUpperCase()
-      )
+      Object.assign(
+        {
+          className: "a24-chat-attachment-icon",
+          style: { backgroundColor: solidFileIconBackground(fileIconType, kind) },
+          variant: "icon"
+        },
+        { "data-file-kind": kind }
+      ),
+      React.createElement(FileIcon, {
+        "aria-hidden": "true",
+        size: 28,
+        type: fileIconType,
+        variant: "solid"
+      })
     ),
-    React2.createElement(
+    React.createElement(
       AttachmentContent,
-      null,
-      React2.createElement(AttachmentTitle, null, filename),
-      React2.createElement(AttachmentDescription, null, mediaType)
+      { className: "a24-chat-attachment-content" },
+      React.createElement(AttachmentTitle, { title: filename }, filename)
     ),
-    onRemove ? React2.createElement(
+    onRemove ? React.createElement(
       "button",
       {
         "aria-label": "Remove attachment",
-        className: "relative z-20 mr-1 inline-flex size-6 shrink-0 items-center justify-center rounded-md text-muted-foreground hover:bg-muted hover:text-foreground",
+        className: "relative z-20 inline-flex size-6 shrink-0 items-center justify-center rounded-md text-muted-foreground hover:bg-muted hover:text-foreground",
         onClick: (event) => {
           event.stopPropagation();
           onRemove();
         },
         type: "button"
       },
-      React2.createElement("span", { "aria-hidden": "true" }, "x")
+      React.createElement(X, { "aria-hidden": "true", className: "size-3.5" })
     ) : null
   );
 }
@@ -666,12 +670,11 @@ function ChatAttachments({
   ...props
 }) {
   if (!children) return null;
-  return React2.createElement(
+  return React.createElement(
     AttachmentGroup,
     {
       className: cn(
-        props.dir === "rtl" ? "mr-auto" : "ml-auto",
-        "w-fit flex-wrap overflow-visible",
+        "a24-chat-attachments w-full flex-nowrap",
         className
       ),
       ...props
@@ -679,8 +682,305 @@ function ChatAttachments({
     children
   );
 }
+function ChatAttachmentRows({
+  attachments,
+  className,
+  dir,
+  onRemove,
+  resolveContent,
+  ...props
+}) {
+  if (attachments.length === 0) return null;
+  const imageAttachments = attachments.filter(isImageAttachment);
+  const fileAttachments = attachments.filter((attachment) => !isImageAttachment(attachment));
+  const renderRow = (items, kind) => items.length > 0 ? React.createElement(
+    ChatAttachments,
+    Object.assign({ dir, key: kind }, { "data-attachment-row": kind }),
+    items.map(
+      (attachment, index) => React.createElement(ChatAttachment, {
+        data: attachment,
+        dir: "ltr",
+        key: attachmentRenderKey(attachment, index, kind),
+        onRemove: onRemove ? () => onRemove(attachment) : void 0,
+        resolveContent
+      })
+    )
+  ) : null;
+  return React.createElement(
+    "div",
+    {
+      className: cn("a24-chat-attachment-rows", className),
+      dir,
+      ...props
+    },
+    renderRow(imageAttachments, "images"),
+    renderRow(fileAttachments, "files")
+  );
+}
+
+// src/ui/composer-attachments.ts
+var createId = () => typeof crypto !== "undefined" && "randomUUID" in crypto ? crypto.randomUUID() : `file-${Date.now()}-${Math.random().toString(36).slice(2)}`;
+function createAgentChatComposerFile(file) {
+  return {
+    id: createId(),
+    type: "file",
+    url: URL.createObjectURL(file),
+    filename: file.name || "attachment",
+    mediaType: file.type || "application/octet-stream",
+    source: file
+  };
+}
+function revokeAgentChatComposerFiles(files) {
+  files.forEach((file) => {
+    try {
+      URL.revokeObjectURL(file.url);
+    } catch {
+    }
+  });
+}
+
+// src/ui/agent-chat-composer.tsx
+import { jsx as jsx3, jsxs } from "react/jsx-runtime";
+function formatFileCount(files) {
+  if (files.length === 1) return files[0].filename;
+  return `${files.length} files`;
+}
+var pillButtonClass = "inline-flex size-8 shrink-0 items-center justify-center gap-2 rounded-lg border-0 bg-muted text-sm text-muted-foreground shadow-none transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-0 disabled:pointer-events-none disabled:opacity-50";
+var submitButtonClass = "inline-flex size-9 shrink-0 items-center justify-center gap-2 rounded-lg border-0 bg-primary text-sm text-primary-foreground shadow-none transition-[background-color,color,opacity,transform] duration-200 hover:bg-primary/90 focus-visible:outline-none focus-visible:ring-0 disabled:pointer-events-none disabled:opacity-50";
+function AgentChatComposer({
+  accept,
+  allowAttachments = true,
+  attachmentLayout = "flow",
+  className,
+  disabled = false,
+  forceExpanded = false,
+  inputToolbarContent,
+  isRunning = false,
+  onAttachmentCountChange,
+  onStop,
+  onSubmit,
+  placeholder = "Message the agent",
+  textareaRef
+}) {
+  const fileInputRef = React2.useRef(null);
+  const filesRef = React2.useRef([]);
+  const inFlightFilesRef = React2.useRef([]);
+  const localTextareaRef = React2.useRef(null);
+  const draftRevisionRef = React2.useRef(0);
+  const [text, setText] = React2.useState("");
+  const [files, setFiles] = React2.useState([]);
+  const [isSubmitting, setIsSubmitting] = React2.useState(false);
+  const isExpanded = forceExpanded || text.includes("\n") || text.length > 62;
+  const setTextareaRef = React2.useCallback(
+    (node) => {
+      localTextareaRef.current = node;
+      if (typeof textareaRef === "function") {
+        textareaRef(node);
+      } else if (textareaRef) {
+        textareaRef.current = node;
+      }
+    },
+    [textareaRef]
+  );
+  React2.useEffect(() => {
+    filesRef.current = files;
+    onAttachmentCountChange?.(files.length);
+  }, [files, onAttachmentCountChange]);
+  React2.useEffect(() => () => {
+    revokeAgentChatComposerFiles(filesRef.current);
+    revokeAgentChatComposerFiles(inFlightFilesRef.current);
+  }, []);
+  React2.useLayoutEffect(() => {
+    const textarea = localTextareaRef.current;
+    if (!textarea) return;
+    if (isExpanded) {
+      textarea.style.height = "auto";
+      const scrollHeight = textarea.scrollHeight;
+      textarea.style.height = `${Math.min(scrollHeight, 224)}px`;
+      textarea.style.overflowY = scrollHeight >= 224 ? "auto" : "hidden";
+      return;
+    }
+    textarea.style.height = "";
+    textarea.style.overflowY = "hidden";
+  }, [isExpanded, text]);
+  const canSubmit = !disabled && !isSubmitting && !isRunning && (text.trim().length > 0 || files.length > 0);
+  const handleFilesChange = (event) => {
+    const selected = Array.from(event.target.files || []).map(createAgentChatComposerFile);
+    if (selected.length > 0) {
+      draftRevisionRef.current += 1;
+      setFiles((current) => [...current, ...selected]);
+    }
+    event.currentTarget.value = "";
+  };
+  const removeFile = (fileId) => {
+    draftRevisionRef.current += 1;
+    setFiles((current) => {
+      const target = current.find((file) => file.id === fileId);
+      if (target) revokeAgentChatComposerFiles([target]);
+      return current.filter((file) => file.id !== fileId);
+    });
+  };
+  const submit = async () => {
+    if (!canSubmit) return;
+    const submittedText = text.trim();
+    const submittedFiles = files;
+    const clearedRevision = draftRevisionRef.current + 1;
+    draftRevisionRef.current = clearedRevision;
+    inFlightFilesRef.current = submittedFiles;
+    setIsSubmitting(true);
+    setText("");
+    setFiles([]);
+    try {
+      await onSubmit({ text: submittedText, files: submittedFiles });
+      revokeAgentChatComposerFiles(submittedFiles);
+      inFlightFilesRef.current = [];
+    } catch {
+      if (draftRevisionRef.current === clearedRevision) {
+        draftRevisionRef.current += 1;
+        setText(submittedText);
+        setFiles(submittedFiles);
+        inFlightFilesRef.current = [];
+      } else {
+        revokeAgentChatComposerFiles(submittedFiles);
+        inFlightFilesRef.current = [];
+      }
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+  const handleKeyDown = (event) => {
+    if (event.key === "Enter" && !event.shiftKey) {
+      event.preventDefault();
+      void submit();
+    }
+  };
+  return /* @__PURE__ */ jsxs("div", { className: cn("a24-composer relative mx-auto w-full max-w-3xl overflow-visible", className), "data-agents24-chat-composer": "", children: [
+    files.length > 0 ? /* @__PURE__ */ jsx3(
+      "div",
+      {
+        "data-testid": "agent-chat-composer-attachments",
+        "data-layout": attachmentLayout,
+        className: cn(
+          "a24-composer__attachments min-w-0 py-1",
+          attachmentLayout === "overlay" ? "absolute bottom-full left-0 right-0 mb-1.5 flex-nowrap overflow-x-auto overflow-y-hidden overscroll-x-contain px-2" : "mb-2 flex-wrap px-1"
+        ),
+        children: /* @__PURE__ */ jsx3(
+          ChatAttachmentRows,
+          {
+            attachments: files,
+            onRemove: (attachment) => attachment.id && removeFile(attachment.id)
+          }
+        )
+      }
+    ) : null,
+    /* @__PURE__ */ jsx3(
+      "div",
+      {
+        "data-expanded": isExpanded ? "" : void 0,
+        className: cn(
+          "a24-composer__surface relative w-full border border-input bg-background shadow-sm",
+          isExpanded ? "rounded-xl p-2 pb-1.5" : "rounded-xl px-2 py-[3px]"
+        ),
+        children: /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: "a24-composer__grid w-full",
+            style: {
+              alignItems: "center",
+              display: "grid",
+              gridTemplateAreas: isExpanded ? `"textarea textarea textarea" "plus toolbar submit"` : `"plus textarea composer mic submit"`,
+              gridTemplateColumns: isExpanded ? "auto 1fr auto" : "auto 1fr auto auto auto",
+              gap: isExpanded ? "3px 10px" : "8px"
+            },
+            children: [
+              /* @__PURE__ */ jsxs("div", { style: { gridArea: "plus" }, className: "a24-composer__attach-slot flex shrink-0 items-center justify-center", children: [
+                /* @__PURE__ */ jsx3(
+                  "input",
+                  {
+                    ref: fileInputRef,
+                    accept,
+                    "aria-label": "Attach files",
+                    className: "hidden",
+                    multiple: true,
+                    name: "attachments",
+                    onChange: handleFilesChange,
+                    type: "file"
+                  }
+                ),
+                /* @__PURE__ */ jsx3(
+                  "button",
+                  {
+                    "aria-label": "Attach files",
+                    className: cn("a24-composer__attach", pillButtonClass),
+                    disabled: disabled || isSubmitting || isRunning || !allowAttachments,
+                    onClick: () => fileInputRef.current?.click(),
+                    title: "Attach files",
+                    type: "button",
+                    children: /* @__PURE__ */ jsx3(Plus, { className: "size-4" })
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsx3("div", { style: { gridArea: "textarea" }, className: "a24-composer__textarea-slot min-w-0 w-full", children: /* @__PURE__ */ jsx3(
+                "textarea",
+                {
+                  ref: setTextareaRef,
+                  "aria-label": "Message",
+                  autoComplete: "off",
+                  className: cn(
+                    "a24-composer__textarea w-full resize-none border-0 bg-transparent px-1 text-[15px] leading-relaxed text-foreground shadow-none outline-none placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-0",
+                    isExpanded ? "min-h-9 max-h-[224px] py-1" : "min-h-9 h-9 max-h-9 py-2"
+                  ),
+                  disabled: disabled || isSubmitting || isRunning,
+                  name: "message",
+                  onChange: (event) => {
+                    draftRevisionRef.current += 1;
+                    setText(event.target.value);
+                  },
+                  onKeyDown: handleKeyDown,
+                  placeholder,
+                  rows: isExpanded ? 2 : 1,
+                  value: text
+                }
+              ) }),
+              isExpanded ? /* @__PURE__ */ jsx3("div", { style: { gridArea: "toolbar" }, className: "a24-composer__toolbar flex min-w-0 items-center gap-1.5", children: inputToolbarContent }) : null,
+              !isExpanded ? /* @__PURE__ */ jsx3("div", { style: { gridArea: "composer" }, className: "flex min-w-0 items-center gap-1.5" }) : null,
+              !isExpanded ? /* @__PURE__ */ jsx3("div", { style: { gridArea: "mic" }, className: "flex shrink-0 items-center justify-end" }) : null,
+              /* @__PURE__ */ jsx3("div", { style: { gridArea: "submit" }, className: "a24-composer__submit-slot flex shrink-0 items-center justify-end", children: isRunning ? /* @__PURE__ */ jsx3(
+                "button",
+                {
+                  "aria-label": "Stop generating",
+                  className: cn("a24-composer__submit", submitButtonClass),
+                  disabled: disabled || !onStop,
+                  onClick: onStop,
+                  title: "Stop",
+                  type: "button",
+                  children: /* @__PURE__ */ jsx3(Square, { className: "size-3.5 fill-current" })
+                }
+              ) : /* @__PURE__ */ jsx3(
+                "button",
+                {
+                  "aria-label": files.length > 0 ? `Send ${formatFileCount(files)}` : "Send message",
+                  className: cn("a24-composer__submit", submitButtonClass, text.trim().length > 0 && "hover:scale-105"),
+                  disabled: !canSubmit,
+                  onClick: () => void submit(),
+                  title: "Send",
+                  type: "button",
+                  children: /* @__PURE__ */ jsx3(ArrowUp, { className: "size-4", strokeWidth: 2.5 })
+                }
+              ) })
+            ]
+          }
+        )
+      }
+    ),
+    !isExpanded && inputToolbarContent ? /* @__PURE__ */ jsx3("div", { className: "a24-composer__toolbar a24-composer__toolbar--external mt-2 flex items-center gap-2 px-1", children: inputToolbarContent }) : null
+  ] });
+}
 
 // src/ui/agent-chat-actions.tsx
+import * as React3 from "react";
+import { Check, Copy, RefreshCcw, ThumbsDown, ThumbsUp } from "lucide-react";
+import { Popover } from "radix-ui";
 import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
 var FEEDBACK_REASONS = [
   ["incorrect", "Incorrect"],
@@ -2099,6 +2399,7 @@ function AgentChatMessage({
   additionalActions,
   actions,
   actionsClassName,
+  attachmentContentResolver,
   className,
   contentClassName,
   dir,
@@ -2132,14 +2433,15 @@ function AgentChatMessage({
     }
   ) : null);
   return /* @__PURE__ */ jsxs6(ChatMessage, { className, dir, from: message.role, children: [
-    showAttachments ? /* @__PURE__ */ jsx10(ChatAttachments, { className: "mb-2", dir, children: message.attachments?.map((attachment, index) => /* @__PURE__ */ jsx10(
-      ChatAttachment,
+    showAttachments ? /* @__PURE__ */ jsx10(
+      ChatAttachmentRows,
       {
-        data: attachment,
-        dir: "ltr"
-      },
-      String(attachment.url || attachment.filename || index)
-    )) }) : null,
+        attachments: message.attachments || [],
+        className: "mb-2",
+        dir,
+        resolveContent: attachmentContentResolver
+      }
+    ) : null,
     shouldRenderContent ? /* @__PURE__ */ jsxs6(
       ChatMessageContent,
       {
@@ -2594,6 +2896,7 @@ export {
   BubbleGroup,
   BubbleReactions,
   ChatAttachment,
+  ChatAttachmentRows,
   ChatAttachments,
   ChatMessage,
   ChatMessageAction,
@@ -2607,6 +2910,7 @@ export {
   ChatMessageAction as MessageAction,
   ChatMessageActions as MessageActions,
   ChatAttachment as MessageAttachment,
+  ChatAttachmentRows as MessageAttachmentRows,
   ChatAttachments as MessageAttachments,
   MessageAvatar,
   ChatMessageContent as MessageContent,
@@ -2622,6 +2926,7 @@ export {
   bubbleVariants,
   cn,
   contextStatusMetrics,
+  createAgentChatComposerFile,
   hitlActionLabel,
   hitlTitle,
   isAgentChatSubagent,
@@ -2630,6 +2935,7 @@ export {
   markerVariants,
   partitionAgentChatToolTimeline,
   resolvedHitlLabel,
+  revokeAgentChatComposerFiles,
   shouldCollapseUserMessage,
   useAudioRecorder
 };