@agents24/chat-react 0.5.5 → 0.5.6

package/dist/ui/index.cjs

@@ -61,6 +61,7 @@ __export(ui_exports, {
   BubbleGroup: () => BubbleGroup,
   BubbleReactions: () => BubbleReactions,
   ChatAttachment: () => ChatAttachment,
+  ChatAttachmentRows: () => ChatAttachmentRows,
   ChatAttachments: () => ChatAttachments,
   ChatMessage: () => ChatMessage,
   ChatMessageAction: () => ChatMessageAction,
@@ -74,6 +75,7 @@ __export(ui_exports, {
   MessageAction: () => ChatMessageAction,
   MessageActions: () => ChatMessageActions,
   MessageAttachment: () => ChatAttachment,
+  MessageAttachmentRows: () => ChatAttachmentRows,
   MessageAttachments: () => ChatAttachments,
   MessageAvatar: () => MessageAvatar,
   MessageContent: () => ChatMessageContent,
@@ -89,6 +91,7 @@ __export(ui_exports, {
   bubbleVariants: () => bubbleVariants,
   cn: () => cn,
   contextStatusMetrics: () => contextStatusMetrics,
+  createAgentChatComposerFile: () => createAgentChatComposerFile,
   hitlActionLabel: () => hitlActionLabel,
   hitlTitle: () => hitlTitle,
   isAgentChatSubagent: () => isAgentChatSubagent,
@@ -97,15 +100,25 @@ __export(ui_exports, {
   markerVariants: () => markerVariants,
   partitionAgentChatToolTimeline: () => partitionAgentChatToolTimeline,
   resolvedHitlLabel: () => resolvedHitlLabel,
+  revokeAgentChatComposerFiles: () => revokeAgentChatComposerFiles,
   shouldCollapseUserMessage: () => shouldCollapseUserMessage,
   useAudioRecorder: () => useAudioRecorder
 });
 module.exports = __toCommonJS(ui_exports);
 
 // src/ui/agent-chat-composer.tsx
+var React2 = __toESM(require("react"), 1);
+var import_lucide_react2 = require("lucide-react");
+
+// src/ui/adapters.ts
 var React = __toESM(require("react"), 1);
+var import_file_icons = require("@untitledui/file-icons");
 var import_lucide_react = require("lucide-react");
 
+// src/ui/attachment.tsx
+var import_class_variance_authority = require("class-variance-authority");
+var import_react_slot = require("@radix-ui/react-slot");
+
 // src/ui/utils.ts
 var import_clsx = require("clsx");
 var import_tailwind_merge = require("tailwind-merge");
@@ -113,266 +126,8 @@ function cn(...values) {
   return (0, import_tailwind_merge.twMerge)((0, import_clsx.clsx)(values));
 }
 
-// src/ui/agent-chat-composer.tsx
-var import_jsx_runtime = require("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__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsx)("span", { className: "flex size-5 shrink-0 items-center justify-center rounded bg-background text-muted-foreground", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.Paperclip, { className: "size-3" }) }),
-              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "min-w-0 flex-1 truncate", children: file.filename }),
-              /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.X, { className: "size-3" })
-                }
-              )
-            ]
-          },
-          file.id
-        ))
-      }
-    ) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsxs)("div", { style: { gridArea: "plus" }, className: "a24-composer__attach-slot flex shrink-0 items-center justify-center", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                  "input",
-                  {
-                    ref: fileInputRef,
-                    accept,
-                    "aria-label": "Attach files",
-                    className: "hidden",
-                    multiple: true,
-                    name: "attachments",
-                    onChange: handleFilesChange,
-                    type: "file"
-                  }
-                ),
-                /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.Plus, { className: "size-4" })
-                  }
-                )
-              ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { gridArea: "textarea" }, className: "a24-composer__textarea-slot min-w-0 w-full", children: /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsx)("div", { style: { gridArea: "toolbar" }, className: "a24-composer__toolbar flex min-w-0 items-center gap-1.5", children: inputToolbarContent }) : null,
-              !isExpanded ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { gridArea: "composer" }, className: "flex min-w-0 items-center gap-1.5" }) : null,
-              !isExpanded ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { gridArea: "mic" }, className: "flex shrink-0 items-center justify-end" }) : null,
-              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { gridArea: "submit" }, className: "a24-composer__submit-slot flex shrink-0 items-center justify-end", children: isRunning ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                "button",
-                {
-                  "aria-label": "Stop generating",
-                  className: cn("a24-composer__submit", submitButtonClass),
-                  disabled: disabled || !onStop,
-                  onClick: onStop,
-                  title: "Stop",
-                  type: "button",
-                  children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.Square, { className: "size-3.5 fill-current" })
-                }
-              ) : /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.ArrowUp, { className: "size-4", strokeWidth: 2.5 })
-                }
-              ) })
-            ]
-          }
-        )
-      }
-    ),
-    !isExpanded && inputToolbarContent ? /* @__PURE__ */ (0, import_jsx_runtime.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
-var React3 = __toESM(require("react"), 1);
-var import_lucide_react2 = require("lucide-react");
-var import_radix_ui = require("radix-ui");
-
-// src/ui/adapters.ts
-var React2 = __toESM(require("react"), 1);
-
 // src/ui/attachment.tsx
-var import_class_variance_authority = require("class-variance-authority");
-var import_react_slot = require("@radix-ui/react-slot");
-var import_jsx_runtime2 = require("react/jsx-runtime");
+var import_jsx_runtime = require("react/jsx-runtime");
 var attachmentVariants = (0, import_class_variance_authority.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",
   {
@@ -396,7 +151,7 @@ function Attachment({
   orientation = "horizontal",
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     "div",
     {
       "data-slot": "attachment",
@@ -409,12 +164,12 @@ function Attachment({
   );
 }
 var attachmentMediaVariants = (0, import_class_variance_authority.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: {
@@ -427,7 +182,7 @@ function AttachmentMedia({
   variant = "icon",
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     "div",
     {
       "data-slot": "attachment-media",
@@ -441,7 +196,7 @@ function AttachmentContent({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     "div",
     {
       "data-slot": "attachment-content",
@@ -457,7 +212,7 @@ function AttachmentTitle({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     "span",
     {
       "data-slot": "attachment-title",
@@ -473,7 +228,7 @@ function AttachmentDescription({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     "span",
     {
       "data-slot": "attachment-description",
@@ -490,7 +245,7 @@ function AttachmentActions({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     "div",
     {
       "data-slot": "attachment-actions",
@@ -507,7 +262,7 @@ function AttachmentAction({
   type = "button",
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     "button",
     {
       "data-slot": "attachment-action",
@@ -527,7 +282,7 @@ function AttachmentTrigger({
   ...props
 }) {
   const Comp = asChild ? import_react_slot.Slot : "button";
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     Comp,
     {
       "data-slot": "attachment-trigger",
@@ -538,7 +293,7 @@ function AttachmentTrigger({
   );
 }
 function AttachmentGroup({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     "div",
     {
       "data-slot": "attachment-group",
@@ -552,9 +307,9 @@ function AttachmentGroup({ className, ...props }) {
 }
 
 // src/ui/message.tsx
-var import_jsx_runtime3 = require("react/jsx-runtime");
+var import_jsx_runtime2 = require("react/jsx-runtime");
 function MessageGroup({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
     "div",
     {
       "data-slot": "message-group",
@@ -568,7 +323,7 @@ function Message({
   align = "start",
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
     "div",
     {
       "data-slot": "message",
@@ -582,7 +337,7 @@ function Message({
   );
 }
 function MessageAvatar({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
     "div",
     {
       "data-slot": "message-avatar",
@@ -595,7 +350,7 @@ function MessageAvatar({ className, ...props }) {
   );
 }
 function MessageContent({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
     "div",
     {
       "data-slot": "message-content",
@@ -608,7 +363,7 @@ function MessageContent({ className, ...props }) {
   );
 }
 function MessageHeader({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
     "div",
     {
       "data-slot": "message-header",
@@ -621,7 +376,7 @@ function MessageHeader({ className, ...props }) {
   );
 }
 function MessageFooter({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
     "div",
     {
       "data-slot": "message-footer",
@@ -635,23 +390,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({
@@ -659,9 +413,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",
@@ -675,7 +429,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
@@ -690,7 +444,7 @@ function ChatMessageAction({
   ...props
 }) {
   const tooltipLabel = typeof tooltip === "string" ? tooltip : void 0;
-  return React2.createElement(
+  return React.createElement(
     "button",
     {
       "aria-label": label || tooltipLabel,
@@ -702,60 +456,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(import_lucide_react.ImageOff, { "aria-hidden": "true", className: "size-5" }) : React.createElement(import_lucide_react.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(import_lucide_react.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(import_file_icons.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(import_lucide_react.X, { "aria-hidden": "true", className: "size-3.5" })
     ) : null
   );
 }
@@ -765,12 +769,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
@@ -778,8 +781,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
+var import_jsx_runtime3 = require("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__ */ (0, import_jsx_runtime3.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__ */ (0, import_jsx_runtime3.jsx)(
+      "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__ */ (0, import_jsx_runtime3.jsx)(
+          ChatAttachmentRows,
+          {
+            attachments: files,
+            onRemove: (attachment) => attachment.id && removeFile(attachment.id)
+          }
+        )
+      }
+    ) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime3.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__ */ (0, import_jsx_runtime3.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__ */ (0, import_jsx_runtime3.jsxs)("div", { style: { gridArea: "plus" }, className: "a24-composer__attach-slot flex shrink-0 items-center justify-center", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                  "input",
+                  {
+                    ref: fileInputRef,
+                    accept,
+                    "aria-label": "Attach files",
+                    className: "hidden",
+                    multiple: true,
+                    name: "attachments",
+                    onChange: handleFilesChange,
+                    type: "file"
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime3.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__ */ (0, import_jsx_runtime3.jsx)(import_lucide_react2.Plus, { className: "size-4" })
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: { gridArea: "textarea" }, className: "a24-composer__textarea-slot min-w-0 w-full", children: /* @__PURE__ */ (0, import_jsx_runtime3.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) => {
+                    draftRevisionRef.current += 1;
+                    setText(event.target.value);
+                  },
+                  onKeyDown: handleKeyDown,
+                  placeholder,
+                  rows: isExpanded ? 2 : 1,
+                  value: text
+                }
+              ) }),
+              isExpanded ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: { gridArea: "toolbar" }, className: "a24-composer__toolbar flex min-w-0 items-center gap-1.5", children: inputToolbarContent }) : null,
+              !isExpanded ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: { gridArea: "composer" }, className: "flex min-w-0 items-center gap-1.5" }) : null,
+              !isExpanded ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: { gridArea: "mic" }, className: "flex shrink-0 items-center justify-end" }) : null,
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: { gridArea: "submit" }, className: "a24-composer__submit-slot flex shrink-0 items-center justify-end", children: isRunning ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                "button",
+                {
+                  "aria-label": "Stop generating",
+                  className: cn("a24-composer__submit", submitButtonClass),
+                  disabled: disabled || !onStop,
+                  onClick: onStop,
+                  title: "Stop",
+                  type: "button",
+                  children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_lucide_react2.Square, { className: "size-3.5 fill-current" })
+                }
+              ) : /* @__PURE__ */ (0, import_jsx_runtime3.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__ */ (0, import_jsx_runtime3.jsx)(import_lucide_react2.ArrowUp, { className: "size-4", strokeWidth: 2.5 })
+                }
+              ) })
+            ]
+          }
+        )
+      }
+    ),
+    !isExpanded && inputToolbarContent ? /* @__PURE__ */ (0, import_jsx_runtime3.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
+var React3 = __toESM(require("react"), 1);
+var import_lucide_react3 = require("lucide-react");
+var import_radix_ui = require("radix-ui");
 var import_jsx_runtime4 = require("react/jsx-runtime");
 var FEEDBACK_REASONS = [
   ["incorrect", "Incorrect"],
@@ -812,7 +1112,7 @@ function AgentChatDefaultActions({
         label: "Retry",
         onClick: () => void handlers.onRetry?.(message),
         tooltip: "Regenerate response",
-        children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_lucide_react2.RefreshCcw, { className: "size-4" })
+        children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_lucide_react3.RefreshCcw, { className: "size-4" })
       }
     ) : null,
     canWriteFeedback ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
@@ -823,7 +1123,7 @@ function AgentChatDefaultActions({
           rating: handlers.feedback?.rating === "like" ? null : "like"
         }),
         tooltip: "Like this response",
-        children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_lucide_react2.ThumbsUp, { className: "size-4", fill: handlers.feedback?.rating === "like" ? "currentColor" : "none" })
+        children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_lucide_react3.ThumbsUp, { className: "size-4", fill: handlers.feedback?.rating === "like" ? "currentColor" : "none" })
       }
     ) : null,
     canWriteFeedback ? /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_radix_ui.Popover.Root, { onOpenChange: setFeedbackOpen, open: feedbackOpen, children: [
@@ -839,7 +1139,7 @@ function AgentChatDefaultActions({
           },
           ref: setFeedbackTrigger,
           tooltip: "Dislike this response",
-          children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_lucide_react2.ThumbsDown, { className: "size-4", fill: handlers.feedback?.rating === "dislike" ? "currentColor" : "none" })
+          children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_lucide_react3.ThumbsDown, { className: "size-4", fill: handlers.feedback?.rating === "dislike" ? "currentColor" : "none" })
         }
       ) }),
       /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
@@ -916,7 +1216,7 @@ function AgentChatDefaultActions({
         label: "Copy",
         onClick: () => handlers.onCopy?.(message.content || "", message.id),
         tooltip: handlers.copied ? "Copied!" : "Copy to clipboard",
-        children: handlers.copied ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_lucide_react2.Check, { className: "size-4 text-green-600" }) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_lucide_react2.Copy, { className: "size-4" })
+        children: handlers.copied ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_lucide_react3.Check, { className: "size-4 text-green-600" }) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_lucide_react3.Copy, { className: "size-4" })
       }
     ) : null
   ] });
@@ -924,7 +1224,7 @@ function AgentChatDefaultActions({
 
 // src/ui/agent-chat-message.tsx
 var React8 = __toESM(require("react"), 1);
-var import_lucide_react5 = require("lucide-react");
+var import_lucide_react6 = require("lucide-react");
 
 // src/ui/agent-response-timeline.tsx
 var React7 = __toESM(require("react"), 1);
@@ -1113,7 +1413,7 @@ function useStreamingText({
 
 // src/ui/ask-user-interaction.tsx
 var React4 = __toESM(require("react"), 1);
-var import_lucide_react3 = require("lucide-react");
+var import_lucide_react4 = require("lucide-react");
 
 // src/ui/ask-user-interaction-state.ts
 function emptyAskUserDrafts(questions) {
@@ -1207,8 +1507,8 @@ function ResolvedQuestions({
             " question",
             count === 1 ? "" : "s"
           ] }),
-          open ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_lucide_react3.ChevronDown, { "aria-hidden": "true", className: "size-3.5" }) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-            import_lucide_react3.ChevronRight,
+          open ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_lucide_react4.ChevronDown, { "aria-hidden": "true", className: "size-3.5" }) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            import_lucide_react4.ChevronRight,
             {
               "aria-hidden": "true",
               className: "size-3.5 opacity-70 rtl:rotate-180"
@@ -1323,7 +1623,7 @@ function AskUserInteraction({
             onClick: () => setStep((current) => Math.max(0, current - 1)),
             type: "button",
             children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-              import_lucide_react3.ChevronLeft,
+              import_lucide_react4.ChevronLeft,
               {
                 "aria-hidden": "true",
                 className: "size-4 rtl:rotate-180"
@@ -1352,7 +1652,7 @@ function AskUserInteraction({
             onClick: () => completeStep(drafts),
             type: "button",
             children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-              import_lucide_react3.ChevronRight,
+              import_lucide_react4.ChevronRight,
               {
                 "aria-hidden": "true",
                 className: "size-4 rtl:rotate-180"
@@ -1389,7 +1689,7 @@ function AskUserInteraction({
               ),
               /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "min-w-0 flex-1 font-medium text-foreground", children: option.label }),
               /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-                import_lucide_react3.ChevronRight,
+                import_lucide_react4.ChevronRight,
                 {
                   "aria-hidden": "true",
                   className: "size-4 shrink-0 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100 group-focus-visible:opacity-100 rtl:rotate-180"
@@ -1401,7 +1701,7 @@ function AskUserInteraction({
         );
       }),
       /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex min-h-11 items-center gap-2 rounded-xl bg-muted px-2.5 py-1.5 focus-within:ring-1 focus-within:ring-ring", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "flex size-8 shrink-0 items-center justify-center rounded-full border border-border/70 bg-background/70 text-muted-foreground", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_lucide_react3.Pencil, { "aria-hidden": "true", className: "size-4" }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "flex size-8 shrink-0 items-center justify-center rounded-full border border-border/70 bg-background/70 text-muted-foreground", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_lucide_react4.Pencil, { "aria-hidden": "true", className: "size-4" }) }),
         /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
           "input",
           {
@@ -1653,7 +1953,7 @@ function resolvedHitlLabel(part) {
 
 // src/ui/tool-sessions.tsx
 var React6 = __toESM(require("react"), 1);
-var import_lucide_react4 = require("lucide-react");
+var import_lucide_react5 = require("lucide-react");
 var import_thinking_orbs = require("thinking-orbs");
 var import_jsx_runtime8 = require("react/jsx-runtime");
 function agentChatToolLabel(part) {
@@ -1821,7 +2121,7 @@ function AgentChatNodeActivityRow({
         type: "button",
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "a24-tool-trigger__label", children: label }),
-          open ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_lucide_react4.ChevronDown, { "aria-hidden": "true", className: "a24-tool-trigger__chevron" }) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_lucide_react4.ChevronRight, { "aria-hidden": "true", className: "a24-tool-trigger__chevron" })
+          open ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_lucide_react5.ChevronDown, { "aria-hidden": "true", className: "a24-tool-trigger__chevron" }) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_lucide_react5.ChevronRight, { "aria-hidden": "true", className: "a24-tool-trigger__chevron" })
         ]
       }
     ) }),
@@ -1881,7 +2181,7 @@ function ToolDisclosure({
           children: [
             showOrb ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ToolActivityOrb, { label: statusLabel }) : null,
             /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "a24-tool-trigger__label", children: label }),
-            open ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_lucide_react4.ChevronDown, { "aria-hidden": "true", className: "a24-tool-trigger__chevron" }) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_lucide_react4.ChevronRight, { "aria-hidden": "true", className: "a24-tool-trigger__chevron" })
+            open ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_lucide_react5.ChevronDown, { "aria-hidden": "true", className: "a24-tool-trigger__chevron" }) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_lucide_react5.ChevronRight, { "aria-hidden": "true", className: "a24-tool-trigger__chevron" })
           ]
         }
       ),
@@ -2342,7 +2642,7 @@ function AgentChatUserMessageContent({
   const [isExpanded, setIsExpanded] = React8.useState(false);
   const contentId = React8.useId();
   const shouldCollapse = shouldCollapseUserMessage(content, collapseThreshold);
-  const Icon = isExpanded ? import_lucide_react5.ChevronUp : import_lucide_react5.ChevronDown;
+  const Icon = isExpanded ? import_lucide_react6.ChevronUp : import_lucide_react6.ChevronDown;
   const clampedStyle = shouldCollapse && !isExpanded ? {
     WebkitBoxOrient: "vertical",
     WebkitLineClamp: Math.max(1, collapsedLines),
@@ -2375,6 +2675,7 @@ function AgentChatMessage({
   additionalActions,
   actions,
   actionsClassName,
+  attachmentContentResolver,
   className,
   contentClassName,
   dir,
@@ -2408,14 +2709,15 @@ function AgentChatMessage({
     }
   ) : null);
   return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(ChatMessage, { className, dir, from: message.role, children: [
-    showAttachments ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ChatAttachments, { className: "mb-2", dir, children: message.attachments?.map((attachment, index) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-      ChatAttachment,
+    showAttachments ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+      ChatAttachmentRows,
       {
-        data: attachment,
-        dir: "ltr"
-      },
-      String(attachment.url || attachment.filename || index)
-    )) }) : null,
+        attachments: message.attachments || [],
+        className: "mb-2",
+        dir,
+        resolveContent: attachmentContentResolver
+      }
+    ) : null,
     shouldRenderContent ? /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
       ChatMessageContent,
       {
@@ -2871,6 +3173,7 @@ function useAudioRecorder(onRecorded, options = {}) {
   BubbleGroup,
   BubbleReactions,
   ChatAttachment,
+  ChatAttachmentRows,
   ChatAttachments,
   ChatMessage,
   ChatMessageAction,
@@ -2884,6 +3187,7 @@ function useAudioRecorder(onRecorded, options = {}) {
   MessageAction,
   MessageActions,
   MessageAttachment,
+  MessageAttachmentRows,
   MessageAttachments,
   MessageAvatar,
   MessageContent,
@@ -2899,6 +3203,7 @@ function useAudioRecorder(onRecorded, options = {}) {
   bubbleVariants,
   cn,
   contextStatusMetrics,
+  createAgentChatComposerFile,
   hitlActionLabel,
   hitlTitle,
   isAgentChatSubagent,
@@ -2907,6 +3212,7 @@ function useAudioRecorder(onRecorded, options = {}) {
   markerVariants,
   partitionAgentChatToolTimeline,
   resolvedHitlLabel,
+  revokeAgentChatComposerFiles,
   shouldCollapseUserMessage,
   useAudioRecorder
 });