@agents24/chat-react 0.5.5 → 0.5.7

package/dist/ui/index.cjs

@@ -44,6 +44,7 @@ __export(ui_exports, {
   AgentChatToolPart: () => AgentChatToolPart,
   AgentChatToolRow: () => AgentChatToolRow,
   AgentChatToolSession: () => AgentChatToolSession,
+  AgentChatUserMessageActionRow: () => AgentChatUserMessageActionRow,
   AgentChatUserMessageContent: () => AgentChatUserMessageContent,
   AgentResponseTimeline: () => AgentResponseTimeline,
   AskUserInteraction: () => AskUserInteraction,
@@ -61,6 +62,7 @@ __export(ui_exports, {
   BubbleGroup: () => BubbleGroup,
   BubbleReactions: () => BubbleReactions,
   ChatAttachment: () => ChatAttachment,
+  ChatAttachmentRows: () => ChatAttachmentRows,
   ChatAttachments: () => ChatAttachments,
   ChatMessage: () => ChatMessage,
   ChatMessageAction: () => ChatMessageAction,
@@ -74,6 +76,7 @@ __export(ui_exports, {
   MessageAction: () => ChatMessageAction,
   MessageActions: () => ChatMessageActions,
   MessageAttachment: () => ChatAttachment,
+  MessageAttachmentRows: () => ChatAttachmentRows,
   MessageAttachments: () => ChatAttachments,
   MessageAvatar: () => MessageAvatar,
   MessageContent: () => ChatMessageContent,
@@ -89,6 +92,7 @@ __export(ui_exports, {
   bubbleVariants: () => bubbleVariants,
   cn: () => cn,
   contextStatusMetrics: () => contextStatusMetrics,
+  createAgentChatComposerFile: () => createAgentChatComposerFile,
   hitlActionLabel: () => hitlActionLabel,
   hitlTitle: () => hitlTitle,
   isAgentChatSubagent: () => isAgentChatSubagent,
@@ -97,15 +101,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 +127,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 +152,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 +165,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 +183,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 +197,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 +213,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 +229,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 +246,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 +263,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 +283,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 +294,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 +308,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 +324,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 +338,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 +351,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 +364,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 +377,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 +391,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",
+    "a24-chat-message group flex w-full flex-col",
+    isUser ? "a24-chat-message--user is-user max-w-full justify-end gap-0" : "a24-chat-message--assistant is-assistant max-w-full gap-2",
     className
   );
-  return React2.createElement(
+  return React.createElement(
     ChatMessageRoleContext.Provider,
     { value: from },
-    React2.createElement(Message, messageProps)
+    React.createElement(Message, messageProps)
   );
 }
 function ChatMessageContent({
@@ -659,9 +414,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 +430,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 +445,7 @@ function ChatMessageAction({
   ...props
 }) {
   const tooltipLabel = typeof tooltip === "string" ? tooltip : void 0;
-  return React2.createElement(
+  return React.createElement(
     "button",
     {
       "aria-label": label || tooltipLabel,
@@ -703,83 +458,629 @@ function ChatMessageAction({
       ...props
     },
     children,
-    React2.createElement(
+    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
   );
 }
-function ChatAttachments({
-  children,
+function ChatAttachments({
+  children,
+  className,
+  ...props
+}) {
+  if (!children) return null;
+  return React.createElement(
+    AttachmentGroup,
+    {
+      className: cn(
+        "a24-chat-attachments w-full flex-nowrap",
+        className
+      ),
+      ...props
+    },
+    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,
-  ...props
+  disabled = false,
+  forceExpanded = false,
+  inputToolbarContent,
+  isRunning = false,
+  onAttachmentCountChange,
+  onStop,
+  onSubmit,
+  placeholder = "Message the agent",
+  textareaRef
 }) {
-  if (!children) return null;
-  return React2.createElement(
-    AttachmentGroup,
-    {
-      className: cn(
-        props.dir === "rtl" ? "mr-auto" : "ml-auto",
-        "w-fit flex-wrap overflow-visible",
-        className
-      ),
-      ...props
+  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;
+      }
     },
-    children
+    [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"],
@@ -789,6 +1090,15 @@ var FEEDBACK_REASONS = [
   ["citation_issue", "Citation issue"],
   ["other", "Other"]
 ];
+function formatSentAt(value) {
+  if (!value) return null;
+  const date = value instanceof Date ? value : new Date(value);
+  if (Number.isNaN(date.getTime())) return null;
+  return {
+    dateTime: date.toISOString(),
+    label: new Intl.DateTimeFormat(void 0, { timeStyle: "short" }).format(date)
+  };
+}
 function AgentChatDefaultActions({
   additionalActions,
   dir,
@@ -799,11 +1109,43 @@ function AgentChatDefaultActions({
   const [feedbackTrigger, setFeedbackTrigger] = React3.useState(null);
   const [reason, setReason] = React3.useState(handlers?.feedback?.reason ?? null);
   const [comment, setComment] = React3.useState(handlers?.feedback?.comment ?? "");
+  const [optimisticCopied, setOptimisticCopied] = React3.useState(false);
+  const copyResetTimer = React3.useRef(null);
   React3.useEffect(() => {
     setReason(handlers?.feedback?.reason ?? null);
     setComment(handlers?.feedback?.comment ?? "");
   }, [handlers?.feedback?.comment, handlers?.feedback?.reason]);
-  if (!handlers || message.role !== "assistant" || message.isFinal === false) return null;
+  React3.useEffect(() => () => {
+    if (copyResetTimer.current !== null) window.clearTimeout(copyResetTimer.current);
+  }, []);
+  const copied = handlers?.copied ?? optimisticCopied;
+  const copyMessage = () => {
+    handlers?.onCopy?.(message.content || "", message.id);
+    if (handlers?.copied !== void 0) return;
+    setOptimisticCopied(true);
+    if (copyResetTimer.current !== null) window.clearTimeout(copyResetTimer.current);
+    copyResetTimer.current = window.setTimeout(() => {
+      copyResetTimer.current = null;
+      setOptimisticCopied(false);
+    }, 1200);
+  };
+  if (!handlers || message.isFinal === false) return null;
+  if (message.role === "user") {
+    const sentAt = formatSentAt(message.createdAt);
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(ChatMessageActions, { className: "a24-user-message-actions", children: [
+      sentAt ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("time", { dateTime: sentAt.dateTime, children: sentAt.label }) : null,
+      handlers.onCopy ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        ChatMessageAction,
+        {
+          label: "Copy",
+          onClick: copyMessage,
+          tooltip: copied ? "Copied!" : "Copy to clipboard",
+          className: "a24-user-message-copy",
+          children: copied ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_lucide_react3.Check, { className: "a24-user-message-copy__check text-green-600" }) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_lucide_react3.Copy, { className: "a24-user-message-copy__icon" })
+        }
+      ) : null
+    ] });
+  }
   const canWriteFeedback = Boolean(message.runId && handlers.onSetFeedback);
   return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(ChatMessageActions, { children: [
     handlers.onRetry ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
@@ -812,7 +1154,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 +1165,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 +1181,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)(
@@ -914,9 +1256,9 @@ function AgentChatDefaultActions({
       ChatMessageAction,
       {
         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" })
+        onClick: copyMessage,
+        tooltip: copied ? "Copied!" : "Copy to clipboard",
+        children: 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 +1266,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 +1455,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 +1549,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 +1665,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 +1694,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 +1731,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 +1743,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 +1995,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 +2163,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" })
         ]
       }
     ) }),
@@ -1849,10 +2191,9 @@ function ToolDisclosure({
   const [open, setOpen] = React6.useState(false);
   const contentId = React6.useId();
   const expandable = React6.Children.toArray(children).length > 0;
-  const textOnlyRoot = Boolean(root && !grouped && !showOrb);
   if (!expandable) {
     const triggerClassName = cn("a24-tool-trigger", root && "a24-tool-trigger--root", root && !showOrb && "a24-tool-trigger--without-orb", error && "a24-tool-trigger--error", loading && "a24-tool-trigger--active");
-    return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: cn("a24-tool-trigger-row", textOnlyRoot && "a24-tool-trigger-row--text"), children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "a24-tool-trigger-row", children: [
       onSelect && part ? /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("button", { className: triggerClassName, onClick: () => onSelect(part), type: "button", 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 })
@@ -1864,7 +2205,7 @@ function ToolDisclosure({
     ] });
   }
   return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "a24-tool-disclosure", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: cn("a24-tool-trigger-row", textOnlyRoot && "a24-tool-trigger-row--text"), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "a24-tool-trigger-row", children: [
       /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
         "button",
         {
@@ -1881,7 +2222,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 +2683,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),
@@ -2370,11 +2711,47 @@ function AgentChatUserMessageContent({
     ) : null
   ] });
 }
+function AgentChatUserMessageActionRow({
+  children,
+  className
+}) {
+  const rowRef = React8.useRef(null);
+  const [visible, setVisible] = React8.useState(false);
+  React8.useEffect(() => {
+    const message = rowRef.current?.closest('[data-slot="message"]');
+    if (!message) return;
+    const show = () => setVisible(true);
+    const hide = () => setVisible(false);
+    const hideWhenFocusLeaves = (event) => {
+      if (!message.contains(event.relatedTarget)) hide();
+    };
+    message.addEventListener("mouseenter", show);
+    message.addEventListener("mouseleave", hide);
+    message.addEventListener("focusin", show);
+    message.addEventListener("focusout", hideWhenFocusLeaves);
+    return () => {
+      message.removeEventListener("mouseenter", show);
+      message.removeEventListener("mouseleave", hide);
+      message.removeEventListener("focusin", show);
+      message.removeEventListener("focusout", hideWhenFocusLeaves);
+    };
+  }, []);
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+    "div",
+    {
+      ref: rowRef,
+      className: cn("a24-chat-message-action-row--user", visible && "is-visible", className),
+      style: { opacity: visible ? 1 : 0, pointerEvents: visible ? "auto" : "none" },
+      children
+    }
+  );
+}
 function AgentChatMessage({
   actionHandlers,
   additionalActions,
   actions,
   actionsClassName,
+  attachmentContentResolver,
   className,
   contentClassName,
   dir,
@@ -2407,48 +2784,58 @@ function AgentChatMessage({
       message
     }
   ) : 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,
-      {
-        data: attachment,
-        dir: "ltr"
-      },
-      String(attachment.url || attachment.filename || index)
-    )) }) : null,
-    shouldRenderContent ? /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
-      ChatMessageContent,
-      {
-        className: cn(isAssistant ? "bg-transparent p-0" : void 0, contentClassName),
-        dir,
-        from: message.role,
-        children: [
-          isAssistant ? renderAssistantContent ? renderAssistantContent({ isStreaming, message }) : /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-            Timeline,
-            {
-              getHitlActionState,
-              isLoading: isStreaming,
-              message,
-              nodeActivityMode,
-              onHitlAction,
-              parts: message.parts
-            }
-          ) : null,
-          !isAssistant ? renderUserContent ? renderUserContent({ message }) : resolvedUserContent ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-            AgentChatUserMessageContent,
-            {
-              collapsedLines: userMessageCollapsedLines,
-              collapseThreshold: userMessageCollapseThreshold,
-              content: resolvedUserContent,
-              showLessLabel: userMessageShowLessLabel,
-              showMoreLabel: userMessageShowMoreLabel
-            }
-          ) : null : null
-        ]
-      }
-    ) : null,
-    renderedActions ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: cn(dir === "rtl" ? "mt-1 h-9 w-full" : "mt-1 h-9 w-full -translate-x-2", actionsClassName), children: renderedActions }) : null
-  ] });
+  const defaultUserActions = !actions && Boolean(actionHandlers) && !isAssistant;
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+    ChatMessage,
+    {
+      className,
+      dir,
+      from: message.role,
+      children: [
+        showAttachments ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+          ChatAttachmentRows,
+          {
+            attachments: message.attachments || [],
+            className: "mb-2",
+            dir,
+            resolveContent: attachmentContentResolver
+          }
+        ) : null,
+        shouldRenderContent ? /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+          ChatMessageContent,
+          {
+            className: cn(isAssistant ? "bg-transparent p-0" : void 0, contentClassName),
+            dir,
+            from: message.role,
+            children: [
+              isAssistant ? renderAssistantContent ? renderAssistantContent({ isStreaming, message }) : /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                Timeline,
+                {
+                  getHitlActionState,
+                  isLoading: isStreaming,
+                  message,
+                  nodeActivityMode,
+                  onHitlAction,
+                  parts: message.parts
+                }
+              ) : null,
+              !isAssistant ? renderUserContent ? renderUserContent({ message }) : resolvedUserContent ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                AgentChatUserMessageContent,
+                {
+                  collapsedLines: userMessageCollapsedLines,
+                  collapseThreshold: userMessageCollapseThreshold,
+                  content: resolvedUserContent,
+                  showLessLabel: userMessageShowLessLabel,
+                  showMoreLabel: userMessageShowMoreLabel
+                }
+              ) : null : null
+            ]
+          }
+        ) : null,
+        renderedActions ? defaultUserActions ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(AgentChatUserMessageActionRow, { className: actionsClassName, children: renderedActions }) : /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: cn(dir === "rtl" ? "mt-1 h-9 w-full" : "mt-1 h-9 w-full -translate-x-2", actionsClassName), children: renderedActions }) : null
+      ]
+    }
+  );
 }
 
 // src/ui/agent-chat-context-status.tsx
@@ -2854,6 +3241,7 @@ function useAudioRecorder(onRecorded, options = {}) {
   AgentChatToolPart,
   AgentChatToolRow,
   AgentChatToolSession,
+  AgentChatUserMessageActionRow,
   AgentChatUserMessageContent,
   AgentResponseTimeline,
   AskUserInteraction,
@@ -2871,6 +3259,7 @@ function useAudioRecorder(onRecorded, options = {}) {
   BubbleGroup,
   BubbleReactions,
   ChatAttachment,
+  ChatAttachmentRows,
   ChatAttachments,
   ChatMessage,
   ChatMessageAction,
@@ -2884,6 +3273,7 @@ function useAudioRecorder(onRecorded, options = {}) {
   MessageAction,
   MessageActions,
   MessageAttachment,
+  MessageAttachmentRows,
   MessageAttachments,
   MessageAvatar,
   MessageContent,
@@ -2899,6 +3289,7 @@ function useAudioRecorder(onRecorded, options = {}) {
   bubbleVariants,
   cn,
   contextStatusMetrics,
+  createAgentChatComposerFile,
   hitlActionLabel,
   hitlTitle,
   isAgentChatSubagent,
@@ -2907,6 +3298,7 @@ function useAudioRecorder(onRecorded, options = {}) {
   markerVariants,
   partitionAgentChatToolTimeline,
   resolvedHitlLabel,
+  revokeAgentChatComposerFiles,
   shouldCollapseUserMessage,
   useAudioRecorder
 });