@agents24/chat-react 0.5.5 → 0.5.7

package/dist/ui/index.js

@@ -4,8 +4,21 @@ import {
 } from "../chunk-SSUO4EPD.js";
 
 // src/ui/agent-chat-composer.tsx
+import * as React2 from "react";
+import { ArrowUp, Plus, Square } from "lucide-react";
+
+// src/ui/adapters.ts
 import * as React from "react";
-import { ArrowUp, Paperclip, Plus, Square, X } from "lucide-react";
+import { FileIcon } from "@untitledui/file-icons";
+import {
+  ImageOff,
+  LoaderCircle,
+  X
+} from "lucide-react";
+
+// src/ui/attachment.tsx
+import { cva } from "class-variance-authority";
+import { Slot } from "@radix-ui/react-slot";
 
 // src/ui/utils.ts
 import { clsx } from "clsx";
@@ -14,266 +27,8 @@ function cn(...values) {
   return twMerge(clsx(values));
 }
 
-// src/ui/agent-chat-composer.tsx
-import { jsx, jsxs } from "react/jsx-runtime";
-var createId = () => typeof crypto !== "undefined" && "randomUUID" in crypto ? crypto.randomUUID() : `file-${Date.now()}-${Math.random().toString(36).slice(2)}`;
-function createComposerFile(file) {
-  return {
-    id: createId(),
-    type: "file",
-    url: URL.createObjectURL(file),
-    filename: file.name || "attachment",
-    mediaType: file.type || "application/octet-stream",
-    source: file
-  };
-}
-function revokeComposerFiles(files) {
-  files.forEach((file) => {
-    try {
-      URL.revokeObjectURL(file.url);
-    } catch {
-    }
-  });
-}
-function formatFileCount(files) {
-  if (files.length === 1) return files[0].filename;
-  return `${files.length} files`;
-}
-var pillButtonClass = "inline-flex size-8 shrink-0 items-center justify-center gap-2 rounded-lg border-0 bg-muted text-sm text-muted-foreground shadow-none transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-0 disabled:pointer-events-none disabled:opacity-50";
-var submitButtonClass = "inline-flex size-9 shrink-0 items-center justify-center gap-2 rounded-lg border-0 bg-primary text-sm text-primary-foreground shadow-none transition-[background-color,color,opacity,transform] duration-200 hover:bg-primary/90 focus-visible:outline-none focus-visible:ring-0 disabled:pointer-events-none disabled:opacity-50";
-function AgentChatComposer({
-  accept,
-  allowAttachments = true,
-  attachmentLayout = "flow",
-  className,
-  disabled = false,
-  forceExpanded = false,
-  inputToolbarContent,
-  isRunning = false,
-  onAttachmentCountChange,
-  onStop,
-  onSubmit,
-  placeholder = "Message the agent",
-  textareaRef
-}) {
-  const fileInputRef = React.useRef(null);
-  const filesRef = React.useRef([]);
-  const localTextareaRef = React.useRef(null);
-  const [text, setText] = React.useState("");
-  const [files, setFiles] = React.useState([]);
-  const [isSubmitting, setIsSubmitting] = React.useState(false);
-  const isExpanded = forceExpanded || text.includes("\n") || text.length > 62;
-  const setTextareaRef = React.useCallback(
-    (node) => {
-      localTextareaRef.current = node;
-      if (typeof textareaRef === "function") {
-        textareaRef(node);
-      } else if (textareaRef) {
-        textareaRef.current = node;
-      }
-    },
-    [textareaRef]
-  );
-  React.useEffect(() => {
-    filesRef.current = files;
-    onAttachmentCountChange?.(files.length);
-  }, [files, onAttachmentCountChange]);
-  React.useEffect(() => () => revokeComposerFiles(filesRef.current), []);
-  React.useLayoutEffect(() => {
-    const textarea = localTextareaRef.current;
-    if (!textarea) return;
-    if (isExpanded) {
-      textarea.style.height = "auto";
-      const scrollHeight = textarea.scrollHeight;
-      textarea.style.height = `${Math.min(scrollHeight, 224)}px`;
-      textarea.style.overflowY = scrollHeight >= 224 ? "auto" : "hidden";
-      return;
-    }
-    textarea.style.height = "";
-    textarea.style.overflowY = "hidden";
-  }, [isExpanded, text]);
-  const canSubmit = !disabled && !isSubmitting && !isRunning && (text.trim().length > 0 || files.length > 0);
-  const handleFilesChange = (event) => {
-    const selected = Array.from(event.target.files || []).map(createComposerFile);
-    if (selected.length > 0) {
-      setFiles((current) => [...current, ...selected]);
-    }
-    event.currentTarget.value = "";
-  };
-  const removeFile = (fileId) => {
-    setFiles((current) => {
-      const target = current.find((file) => file.id === fileId);
-      if (target) revokeComposerFiles([target]);
-      return current.filter((file) => file.id !== fileId);
-    });
-  };
-  const submit = async () => {
-    if (!canSubmit) return;
-    const submittedText = text.trim();
-    const submittedFiles = files;
-    setIsSubmitting(true);
-    try {
-      await onSubmit({ text: submittedText, files: submittedFiles });
-      setText("");
-      setFiles([]);
-      revokeComposerFiles(submittedFiles);
-    } catch {
-    } finally {
-      setIsSubmitting(false);
-    }
-  };
-  const handleKeyDown = (event) => {
-    if (event.key === "Enter" && !event.shiftKey) {
-      event.preventDefault();
-      void submit();
-    }
-  };
-  return /* @__PURE__ */ jsxs("div", { className: cn("a24-composer relative mx-auto w-full max-w-3xl overflow-visible", className), "data-agents24-chat-composer": "", children: [
-    files.length > 0 ? /* @__PURE__ */ jsx(
-      "div",
-      {
-        "data-testid": "agent-chat-composer-attachments",
-        "data-layout": attachmentLayout,
-        className: cn(
-          "a24-composer__attachments flex min-w-0 gap-2 py-1",
-          attachmentLayout === "overlay" ? "absolute bottom-full left-0 right-0 mb-1.5 flex-nowrap overflow-x-auto overflow-y-hidden overscroll-x-contain px-2" : "mb-2 flex-wrap px-1"
-        ),
-        children: files.map((file) => /* @__PURE__ */ jsxs(
-          "div",
-          {
-            className: "a24-composer__attachment group relative flex h-8 max-w-[min(20rem,calc(100vw-2rem))] cursor-default select-none items-center gap-1.5 rounded-md border border-border bg-card px-1.5 text-sm font-medium text-card-foreground transition-colors hover:bg-accent",
-            children: [
-              /* @__PURE__ */ jsx("span", { className: "flex size-5 shrink-0 items-center justify-center rounded bg-background text-muted-foreground", children: /* @__PURE__ */ jsx(Paperclip, { className: "size-3" }) }),
-              /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate", children: file.filename }),
-              /* @__PURE__ */ jsx(
-                "button",
-                {
-                  "aria-label": `Remove ${file.filename}`,
-                  className: "a24-composer__attachment-remove inline-flex size-5 shrink-0 items-center justify-center rounded text-muted-foreground opacity-70 transition-colors hover:bg-muted hover:text-foreground hover:opacity-100 focus-visible:outline-none",
-                  onClick: () => removeFile(file.id),
-                  type: "button",
-                  children: /* @__PURE__ */ jsx(X, { className: "size-3" })
-                }
-              )
-            ]
-          },
-          file.id
-        ))
-      }
-    ) : null,
-    /* @__PURE__ */ jsx(
-      "div",
-      {
-        "data-expanded": isExpanded ? "" : void 0,
-        className: cn(
-          "a24-composer__surface relative w-full border border-input bg-background shadow-sm",
-          isExpanded ? "rounded-xl p-2 pb-1.5" : "rounded-xl px-2 py-[3px]"
-        ),
-        children: /* @__PURE__ */ jsxs(
-          "div",
-          {
-            className: "a24-composer__grid w-full",
-            style: {
-              alignItems: "center",
-              display: "grid",
-              gridTemplateAreas: isExpanded ? `"textarea textarea textarea" "plus toolbar submit"` : `"plus textarea composer mic submit"`,
-              gridTemplateColumns: isExpanded ? "auto 1fr auto" : "auto 1fr auto auto auto",
-              gap: isExpanded ? "3px 10px" : "8px"
-            },
-            children: [
-              /* @__PURE__ */ jsxs("div", { style: { gridArea: "plus" }, className: "a24-composer__attach-slot flex shrink-0 items-center justify-center", children: [
-                /* @__PURE__ */ jsx(
-                  "input",
-                  {
-                    ref: fileInputRef,
-                    accept,
-                    "aria-label": "Attach files",
-                    className: "hidden",
-                    multiple: true,
-                    name: "attachments",
-                    onChange: handleFilesChange,
-                    type: "file"
-                  }
-                ),
-                /* @__PURE__ */ jsx(
-                  "button",
-                  {
-                    "aria-label": "Attach files",
-                    className: cn("a24-composer__attach", pillButtonClass),
-                    disabled: disabled || isSubmitting || isRunning || !allowAttachments,
-                    onClick: () => fileInputRef.current?.click(),
-                    title: "Attach files",
-                    type: "button",
-                    children: /* @__PURE__ */ jsx(Plus, { className: "size-4" })
-                  }
-                )
-              ] }),
-              /* @__PURE__ */ jsx("div", { style: { gridArea: "textarea" }, className: "a24-composer__textarea-slot min-w-0 w-full", children: /* @__PURE__ */ jsx(
-                "textarea",
-                {
-                  ref: setTextareaRef,
-                  "aria-label": "Message",
-                  autoComplete: "off",
-                  className: cn(
-                    "a24-composer__textarea w-full resize-none border-0 bg-transparent px-1 text-[15px] leading-relaxed text-foreground shadow-none outline-none placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-0",
-                    isExpanded ? "min-h-9 max-h-[224px] py-1" : "min-h-9 h-9 max-h-9 py-2"
-                  ),
-                  disabled: disabled || isSubmitting || isRunning,
-                  name: "message",
-                  onChange: (event) => setText(event.target.value),
-                  onKeyDown: handleKeyDown,
-                  placeholder,
-                  rows: isExpanded ? 2 : 1,
-                  value: text
-                }
-              ) }),
-              isExpanded ? /* @__PURE__ */ jsx("div", { style: { gridArea: "toolbar" }, className: "a24-composer__toolbar flex min-w-0 items-center gap-1.5", children: inputToolbarContent }) : null,
-              !isExpanded ? /* @__PURE__ */ jsx("div", { style: { gridArea: "composer" }, className: "flex min-w-0 items-center gap-1.5" }) : null,
-              !isExpanded ? /* @__PURE__ */ jsx("div", { style: { gridArea: "mic" }, className: "flex shrink-0 items-center justify-end" }) : null,
-              /* @__PURE__ */ jsx("div", { style: { gridArea: "submit" }, className: "a24-composer__submit-slot flex shrink-0 items-center justify-end", children: isRunning ? /* @__PURE__ */ jsx(
-                "button",
-                {
-                  "aria-label": "Stop generating",
-                  className: cn("a24-composer__submit", submitButtonClass),
-                  disabled: disabled || !onStop,
-                  onClick: onStop,
-                  title: "Stop",
-                  type: "button",
-                  children: /* @__PURE__ */ jsx(Square, { className: "size-3.5 fill-current" })
-                }
-              ) : /* @__PURE__ */ jsx(
-                "button",
-                {
-                  "aria-label": files.length > 0 ? `Send ${formatFileCount(files)}` : "Send message",
-                  className: cn("a24-composer__submit", submitButtonClass, text.trim().length > 0 && "hover:scale-105"),
-                  disabled: !canSubmit,
-                  onClick: () => void submit(),
-                  title: "Send",
-                  type: "button",
-                  children: /* @__PURE__ */ jsx(ArrowUp, { className: "size-4", strokeWidth: 2.5 })
-                }
-              ) })
-            ]
-          }
-        )
-      }
-    ),
-    !isExpanded && inputToolbarContent ? /* @__PURE__ */ jsx("div", { className: "a24-composer__toolbar a24-composer__toolbar--external mt-2 flex items-center gap-2 px-1", children: inputToolbarContent }) : null
-  ] });
-}
-
-// src/ui/agent-chat-actions.tsx
-import * as React3 from "react";
-import { Check, Copy, RefreshCcw, ThumbsDown, ThumbsUp } from "lucide-react";
-import { Popover } from "radix-ui";
-
-// src/ui/adapters.ts
-import * as React2 from "react";
-
 // src/ui/attachment.tsx
-import { cva } from "class-variance-authority";
-import { Slot } from "@radix-ui/react-slot";
-import { jsx as jsx2 } from "react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 var attachmentVariants = cva(
   "group/attachment relative flex w-fit max-w-full min-w-0 shrink-0 flex-wrap rounded-xl border bg-card text-card-foreground transition-colors focus-within:border-neutral-300 focus-within:ring-0 has-[>a,>button]:hover:bg-muted/50 data-[state=error]:border-destructive/30 data-[state=idle]:border-dashed",
   {
@@ -297,7 +52,7 @@ function Attachment({
   orientation = "horizontal",
   ...props
 }) {
-  return /* @__PURE__ */ jsx2(
+  return /* @__PURE__ */ jsx(
     "div",
     {
       "data-slot": "attachment",
@@ -310,12 +65,12 @@ function Attachment({
   );
 }
 var attachmentMediaVariants = cva(
-  "relative flex aspect-square w-10 shrink-0 items-center justify-center overflow-hidden rounded-lg bg-muted text-foreground group-data-[orientation=vertical]/attachment:w-full group-data-[size=sm]/attachment:w-8 group-data-[size=xs]/attachment:w-7 group-data-[size=xs]/attachment:rounded-md group-data-[state=error]/attachment:bg-destructive/10 group-data-[state=error]/attachment:text-destructive group-data-[orientation=vertical]/attachment:*:data-[slot=spinner]:size-6! [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 group-data-[orientation=vertical]/attachment:[&_svg:not([class*='size-'])]:size-6 group-data-[size=xs]/attachment:[&_svg:not([class*='size-'])]:size-3.5",
+  "relative flex aspect-square w-10 shrink-0 items-center justify-center overflow-hidden rounded-lg text-foreground group-data-[orientation=vertical]/attachment:w-full group-data-[size=sm]/attachment:w-8 group-data-[size=xs]/attachment:w-7 group-data-[size=xs]/attachment:rounded-md group-data-[state=error]/attachment:text-destructive group-data-[orientation=vertical]/attachment:*:data-[slot=spinner]:size-6! [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 group-data-[orientation=vertical]/attachment:[&_svg:not([class*='size-'])]:size-6 group-data-[size=xs]/attachment:[&_svg:not([class*='size-'])]:size-3.5",
   {
     variants: {
       variant: {
         icon: "",
-        image: "opacity-60 group-data-[state=done]/attachment:opacity-100 group-data-[state=idle]/attachment:opacity-100 *:[img]:aspect-square *:[img]:w-full *:[img]:object-cover"
+        image: "bg-muted opacity-60 group-data-[state=done]/attachment:opacity-100 group-data-[state=idle]/attachment:opacity-100 *:[img]:aspect-square *:[img]:w-full *:[img]:object-cover"
       }
     },
     defaultVariants: {
@@ -328,7 +83,7 @@ function AttachmentMedia({
   variant = "icon",
   ...props
 }) {
-  return /* @__PURE__ */ jsx2(
+  return /* @__PURE__ */ jsx(
     "div",
     {
       "data-slot": "attachment-media",
@@ -342,7 +97,7 @@ function AttachmentContent({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx2(
+  return /* @__PURE__ */ jsx(
     "div",
     {
       "data-slot": "attachment-content",
@@ -358,7 +113,7 @@ function AttachmentTitle({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx2(
+  return /* @__PURE__ */ jsx(
     "span",
     {
       "data-slot": "attachment-title",
@@ -374,7 +129,7 @@ function AttachmentDescription({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx2(
+  return /* @__PURE__ */ jsx(
     "span",
     {
       "data-slot": "attachment-description",
@@ -391,7 +146,7 @@ function AttachmentActions({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx2(
+  return /* @__PURE__ */ jsx(
     "div",
     {
       "data-slot": "attachment-actions",
@@ -408,7 +163,7 @@ function AttachmentAction({
   type = "button",
   ...props
 }) {
-  return /* @__PURE__ */ jsx2(
+  return /* @__PURE__ */ jsx(
     "button",
     {
       "data-slot": "attachment-action",
@@ -428,7 +183,7 @@ function AttachmentTrigger({
   ...props
 }) {
   const Comp = asChild ? Slot : "button";
-  return /* @__PURE__ */ jsx2(
+  return /* @__PURE__ */ jsx(
     Comp,
     {
       "data-slot": "attachment-trigger",
@@ -439,7 +194,7 @@ function AttachmentTrigger({
   );
 }
 function AttachmentGroup({ className, ...props }) {
-  return /* @__PURE__ */ jsx2(
+  return /* @__PURE__ */ jsx(
     "div",
     {
       "data-slot": "attachment-group",
@@ -453,9 +208,9 @@ function AttachmentGroup({ className, ...props }) {
 }
 
 // src/ui/message.tsx
-import { jsx as jsx3 } from "react/jsx-runtime";
+import { jsx as jsx2 } from "react/jsx-runtime";
 function MessageGroup({ className, ...props }) {
-  return /* @__PURE__ */ jsx3(
+  return /* @__PURE__ */ jsx2(
     "div",
     {
       "data-slot": "message-group",
@@ -469,7 +224,7 @@ function Message({
   align = "start",
   ...props
 }) {
-  return /* @__PURE__ */ jsx3(
+  return /* @__PURE__ */ jsx2(
     "div",
     {
       "data-slot": "message",
@@ -483,7 +238,7 @@ function Message({
   );
 }
 function MessageAvatar({ className, ...props }) {
-  return /* @__PURE__ */ jsx3(
+  return /* @__PURE__ */ jsx2(
     "div",
     {
       "data-slot": "message-avatar",
@@ -496,7 +251,7 @@ function MessageAvatar({ className, ...props }) {
   );
 }
 function MessageContent({ className, ...props }) {
-  return /* @__PURE__ */ jsx3(
+  return /* @__PURE__ */ jsx2(
     "div",
     {
       "data-slot": "message-content",
@@ -509,7 +264,7 @@ function MessageContent({ className, ...props }) {
   );
 }
 function MessageHeader({ className, ...props }) {
-  return /* @__PURE__ */ jsx3(
+  return /* @__PURE__ */ jsx2(
     "div",
     {
       "data-slot": "message-header",
@@ -522,7 +277,7 @@ function MessageHeader({ className, ...props }) {
   );
 }
 function MessageFooter({ className, ...props }) {
-  return /* @__PURE__ */ jsx3(
+  return /* @__PURE__ */ jsx2(
     "div",
     {
       "data-slot": "message-footer",
@@ -536,23 +291,22 @@ function MessageFooter({ className, ...props }) {
 }
 
 // src/ui/adapters.ts
-var ChatMessageRoleContext = React2.createContext("assistant");
+var ChatMessageRoleContext = React.createContext("assistant");
 function ChatMessage(input) {
   const { className, from, align, ...props } = input;
   const isUser = from === "user";
-  const isRtl = props.dir === "rtl";
   const resolvedAlign = align || "start";
   const messageProps = Object.assign({}, props);
   messageProps.align = resolvedAlign;
   messageProps.className = cn(
-    "a24-chat-message group flex w-full flex-col gap-2",
-    isUser ? cn("a24-chat-message--user is-user max-w-[80%] justify-end", isRtl ? "mr-auto" : "ml-auto") : "a24-chat-message--assistant is-assistant max-w-full",
+    "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({
@@ -560,9 +314,9 @@ function ChatMessageContent({
   from,
   ...props
 }) {
-  const inheritedRole = React2.useContext(ChatMessageRoleContext);
+  const inheritedRole = React.useContext(ChatMessageRoleContext);
   const isUser = (from ?? inheritedRole) === "user";
-  return React2.createElement("div", {
+  return React.createElement("div", {
     className: cn(
       "a24-chat-message-content flex max-w-full min-w-0 flex-col gap-2 text-sm",
       isUser ? "a24-chat-message-content--user is-user:dark w-fit overflow-visible rounded-lg bg-secondary px-4 py-3 text-foreground" : "a24-chat-message-content--assistant w-full overflow-visible text-foreground",
@@ -576,7 +330,7 @@ function ChatMessageActions({
   className,
   ...props
 }) {
-  return React2.createElement("div", {
+  return React.createElement("div", {
     className: cn("flex items-center gap-1", className),
     "data-slot": "message-actions",
     ...props
@@ -591,7 +345,7 @@ function ChatMessageAction({
   ...props
 }) {
   const tooltipLabel = typeof tooltip === "string" ? tooltip : void 0;
-  return React2.createElement(
+  return React.createElement(
     "button",
     {
       "aria-label": label || tooltipLabel,
@@ -604,83 +358,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(ImageOff, { "aria-hidden": "true", className: "size-5" }) : React.createElement(LoaderCircle, {
+        "aria-hidden": "true",
+        className: "a24-chat-image-spinner size-5 animate-spin"
+      }),
+      status !== "done" && status !== "error" ? React.createElement("span", { className: "sr-only", role: "status" }, `Loading ${filename}`) : null,
+      status === "error" ? React.createElement("span", { className: "sr-only" }, `${filename} preview unavailable`) : null
+    ),
+    onRemove ? React.createElement(
+      "button",
+      {
+        "aria-label": `Remove ${filename}`,
+        className: "a24-chat-image-remove",
+        onClick: (event) => {
+          event.stopPropagation();
+          onRemove();
+        },
+        type: "button"
+      },
+      React.createElement(X, { "aria-hidden": "true", className: "size-3.5" })
+    ) : null
+  );
+}
 function ChatAttachment({
+  className,
   data,
   onRemove,
   orientation,
+  resolveContent,
   ...props
 }) {
-  const mediaType = data.mediaType || data.contentType || String(data.type || "application/octet-stream");
-  const filename = data.filename || data.name || "Attachment";
-  const isImage = mediaType.startsWith("image/") && Boolean(data.url);
-  return React2.createElement(
+  const filename = attachmentFilename(data);
+  const { fileIconType, kind } = resolveAttachmentVisual(data);
+  if (kind === "image") {
+    return React.createElement(ChatImageAttachment, {
+      ...props,
+      className,
+      data,
+      onRemove,
+      resolveContent
+    });
+  }
+  return React.createElement(
     Attachment,
     {
-      orientation: orientation || (isImage ? "vertical" : "horizontal"),
+      className: cn("a24-chat-attachment", className),
+      orientation: orientation || "horizontal",
+      size: "sm",
       ...props
     },
-    React2.createElement(
+    React.createElement(
       AttachmentMedia,
-      { variant: isImage ? "image" : "icon" },
-      isImage ? React2.createElement("img", {
-        alt: filename,
-        className: "size-full object-cover",
-        src: data.url
-      }) : React2.createElement(
-        "span",
-        { "aria-hidden": "true", className: "text-sm" },
-        filename.slice(0, 1).toUpperCase()
-      )
+      Object.assign(
+        {
+          className: "a24-chat-attachment-icon",
+          style: { backgroundColor: solidFileIconBackground(fileIconType, kind) },
+          variant: "icon"
+        },
+        { "data-file-kind": kind }
+      ),
+      React.createElement(FileIcon, {
+        "aria-hidden": "true",
+        size: 28,
+        type: fileIconType,
+        variant: "solid"
+      })
     ),
-    React2.createElement(
+    React.createElement(
       AttachmentContent,
-      null,
-      React2.createElement(AttachmentTitle, null, filename),
-      React2.createElement(AttachmentDescription, null, mediaType)
+      { className: "a24-chat-attachment-content" },
+      React.createElement(AttachmentTitle, { title: filename }, filename)
     ),
-    onRemove ? React2.createElement(
+    onRemove ? React.createElement(
       "button",
       {
         "aria-label": "Remove attachment",
-        className: "relative z-20 mr-1 inline-flex size-6 shrink-0 items-center justify-center rounded-md text-muted-foreground hover:bg-muted hover:text-foreground",
+        className: "relative z-20 inline-flex size-6 shrink-0 items-center justify-center rounded-md text-muted-foreground hover:bg-muted hover:text-foreground",
         onClick: (event) => {
           event.stopPropagation();
           onRemove();
         },
         type: "button"
       },
-      React2.createElement("span", { "aria-hidden": "true" }, "x")
+      React.createElement(X, { "aria-hidden": "true", className: "size-3.5" })
     ) : null
   );
 }
-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
+import { jsx as jsx3, jsxs } from "react/jsx-runtime";
+function formatFileCount(files) {
+  if (files.length === 1) return files[0].filename;
+  return `${files.length} files`;
+}
+var pillButtonClass = "inline-flex size-8 shrink-0 items-center justify-center gap-2 rounded-lg border-0 bg-muted text-sm text-muted-foreground shadow-none transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-0 disabled:pointer-events-none disabled:opacity-50";
+var submitButtonClass = "inline-flex size-9 shrink-0 items-center justify-center gap-2 rounded-lg border-0 bg-primary text-sm text-primary-foreground shadow-none transition-[background-color,color,opacity,transform] duration-200 hover:bg-primary/90 focus-visible:outline-none focus-visible:ring-0 disabled:pointer-events-none disabled:opacity-50";
+function AgentChatComposer({
+  accept,
+  allowAttachments = true,
+  attachmentLayout = "flow",
   className,
-  ...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__ */ jsxs("div", { className: cn("a24-composer relative mx-auto w-full max-w-3xl overflow-visible", className), "data-agents24-chat-composer": "", children: [
+    files.length > 0 ? /* @__PURE__ */ jsx3(
+      "div",
+      {
+        "data-testid": "agent-chat-composer-attachments",
+        "data-layout": attachmentLayout,
+        className: cn(
+          "a24-composer__attachments min-w-0 py-1",
+          attachmentLayout === "overlay" ? "absolute bottom-full left-0 right-0 mb-1.5 flex-nowrap overflow-x-auto overflow-y-hidden overscroll-x-contain px-2" : "mb-2 flex-wrap px-1"
+        ),
+        children: /* @__PURE__ */ jsx3(
+          ChatAttachmentRows,
+          {
+            attachments: files,
+            onRemove: (attachment) => attachment.id && removeFile(attachment.id)
+          }
+        )
+      }
+    ) : null,
+    /* @__PURE__ */ jsx3(
+      "div",
+      {
+        "data-expanded": isExpanded ? "" : void 0,
+        className: cn(
+          "a24-composer__surface relative w-full border border-input bg-background shadow-sm",
+          isExpanded ? "rounded-xl p-2 pb-1.5" : "rounded-xl px-2 py-[3px]"
+        ),
+        children: /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: "a24-composer__grid w-full",
+            style: {
+              alignItems: "center",
+              display: "grid",
+              gridTemplateAreas: isExpanded ? `"textarea textarea textarea" "plus toolbar submit"` : `"plus textarea composer mic submit"`,
+              gridTemplateColumns: isExpanded ? "auto 1fr auto" : "auto 1fr auto auto auto",
+              gap: isExpanded ? "3px 10px" : "8px"
+            },
+            children: [
+              /* @__PURE__ */ jsxs("div", { style: { gridArea: "plus" }, className: "a24-composer__attach-slot flex shrink-0 items-center justify-center", children: [
+                /* @__PURE__ */ jsx3(
+                  "input",
+                  {
+                    ref: fileInputRef,
+                    accept,
+                    "aria-label": "Attach files",
+                    className: "hidden",
+                    multiple: true,
+                    name: "attachments",
+                    onChange: handleFilesChange,
+                    type: "file"
+                  }
+                ),
+                /* @__PURE__ */ jsx3(
+                  "button",
+                  {
+                    "aria-label": "Attach files",
+                    className: cn("a24-composer__attach", pillButtonClass),
+                    disabled: disabled || isSubmitting || isRunning || !allowAttachments,
+                    onClick: () => fileInputRef.current?.click(),
+                    title: "Attach files",
+                    type: "button",
+                    children: /* @__PURE__ */ jsx3(Plus, { className: "size-4" })
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsx3("div", { style: { gridArea: "textarea" }, className: "a24-composer__textarea-slot min-w-0 w-full", children: /* @__PURE__ */ jsx3(
+                "textarea",
+                {
+                  ref: setTextareaRef,
+                  "aria-label": "Message",
+                  autoComplete: "off",
+                  className: cn(
+                    "a24-composer__textarea w-full resize-none border-0 bg-transparent px-1 text-[15px] leading-relaxed text-foreground shadow-none outline-none placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-0",
+                    isExpanded ? "min-h-9 max-h-[224px] py-1" : "min-h-9 h-9 max-h-9 py-2"
+                  ),
+                  disabled: disabled || isSubmitting || isRunning,
+                  name: "message",
+                  onChange: (event) => {
+                    draftRevisionRef.current += 1;
+                    setText(event.target.value);
+                  },
+                  onKeyDown: handleKeyDown,
+                  placeholder,
+                  rows: isExpanded ? 2 : 1,
+                  value: text
+                }
+              ) }),
+              isExpanded ? /* @__PURE__ */ jsx3("div", { style: { gridArea: "toolbar" }, className: "a24-composer__toolbar flex min-w-0 items-center gap-1.5", children: inputToolbarContent }) : null,
+              !isExpanded ? /* @__PURE__ */ jsx3("div", { style: { gridArea: "composer" }, className: "flex min-w-0 items-center gap-1.5" }) : null,
+              !isExpanded ? /* @__PURE__ */ jsx3("div", { style: { gridArea: "mic" }, className: "flex shrink-0 items-center justify-end" }) : null,
+              /* @__PURE__ */ jsx3("div", { style: { gridArea: "submit" }, className: "a24-composer__submit-slot flex shrink-0 items-center justify-end", children: isRunning ? /* @__PURE__ */ jsx3(
+                "button",
+                {
+                  "aria-label": "Stop generating",
+                  className: cn("a24-composer__submit", submitButtonClass),
+                  disabled: disabled || !onStop,
+                  onClick: onStop,
+                  title: "Stop",
+                  type: "button",
+                  children: /* @__PURE__ */ jsx3(Square, { className: "size-3.5 fill-current" })
+                }
+              ) : /* @__PURE__ */ jsx3(
+                "button",
+                {
+                  "aria-label": files.length > 0 ? `Send ${formatFileCount(files)}` : "Send message",
+                  className: cn("a24-composer__submit", submitButtonClass, text.trim().length > 0 && "hover:scale-105"),
+                  disabled: !canSubmit,
+                  onClick: () => void submit(),
+                  title: "Send",
+                  type: "button",
+                  children: /* @__PURE__ */ jsx3(ArrowUp, { className: "size-4", strokeWidth: 2.5 })
+                }
+              ) })
+            ]
+          }
+        )
+      }
+    ),
+    !isExpanded && inputToolbarContent ? /* @__PURE__ */ jsx3("div", { className: "a24-composer__toolbar a24-composer__toolbar--external mt-2 flex items-center gap-2 px-1", children: inputToolbarContent }) : null
+  ] });
 }
 
 // src/ui/agent-chat-actions.tsx
+import * as React3 from "react";
+import { Check, Copy, RefreshCcw, ThumbsDown, ThumbsUp } from "lucide-react";
+import { Popover } from "radix-ui";
 import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
 var FEEDBACK_REASONS = [
   ["incorrect", "Incorrect"],
@@ -690,6 +990,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,
@@ -700,11 +1009,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__ */ jsxs2(ChatMessageActions, { className: "a24-user-message-actions", children: [
+      sentAt ? /* @__PURE__ */ jsx4("time", { dateTime: sentAt.dateTime, children: sentAt.label }) : null,
+      handlers.onCopy ? /* @__PURE__ */ jsx4(
+        ChatMessageAction,
+        {
+          label: "Copy",
+          onClick: copyMessage,
+          tooltip: copied ? "Copied!" : "Copy to clipboard",
+          className: "a24-user-message-copy",
+          children: copied ? /* @__PURE__ */ jsx4(Check, { className: "a24-user-message-copy__check text-green-600" }) : /* @__PURE__ */ jsx4(Copy, { className: "a24-user-message-copy__icon" })
+        }
+      ) : null
+    ] });
+  }
   const canWriteFeedback = Boolean(message.runId && handlers.onSetFeedback);
   return /* @__PURE__ */ jsxs2(ChatMessageActions, { children: [
     handlers.onRetry ? /* @__PURE__ */ jsx4(
@@ -815,9 +1156,9 @@ function AgentChatDefaultActions({
       ChatMessageAction,
       {
         label: "Copy",
-        onClick: () => handlers.onCopy?.(message.content || "", message.id),
-        tooltip: handlers.copied ? "Copied!" : "Copy to clipboard",
-        children: handlers.copied ? /* @__PURE__ */ jsx4(Check, { className: "size-4 text-green-600" }) : /* @__PURE__ */ jsx4(Copy, { className: "size-4" })
+        onClick: copyMessage,
+        tooltip: copied ? "Copied!" : "Copy to clipboard",
+        children: copied ? /* @__PURE__ */ jsx4(Check, { className: "size-4 text-green-600" }) : /* @__PURE__ */ jsx4(Copy, { className: "size-4" })
       }
     ) : null
   ] });
@@ -1573,10 +1914,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__ */ jsxs4("div", { className: cn("a24-tool-trigger-row", textOnlyRoot && "a24-tool-trigger-row--text"), children: [
+    return /* @__PURE__ */ jsxs4("div", { className: "a24-tool-trigger-row", children: [
       onSelect && part ? /* @__PURE__ */ jsxs4("button", { className: triggerClassName, onClick: () => onSelect(part), type: "button", children: [
         showOrb ? /* @__PURE__ */ jsx8(ToolActivityOrb, { label: statusLabel }) : null,
         /* @__PURE__ */ jsx8("span", { className: "a24-tool-trigger__label", children: label })
@@ -1588,7 +1928,7 @@ function ToolDisclosure({
     ] });
   }
   return /* @__PURE__ */ jsxs4("div", { className: "a24-tool-disclosure", children: [
-    /* @__PURE__ */ jsxs4("div", { className: cn("a24-tool-trigger-row", textOnlyRoot && "a24-tool-trigger-row--text"), children: [
+    /* @__PURE__ */ jsxs4("div", { className: "a24-tool-trigger-row", children: [
       /* @__PURE__ */ jsxs4(
         "button",
         {
@@ -2094,11 +2434,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__ */ jsx10(
+    "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,
@@ -2131,48 +2507,58 @@ function AgentChatMessage({
       message
     }
   ) : null);
-  return /* @__PURE__ */ jsxs6(ChatMessage, { className, dir, from: message.role, children: [
-    showAttachments ? /* @__PURE__ */ jsx10(ChatAttachments, { className: "mb-2", dir, children: message.attachments?.map((attachment, index) => /* @__PURE__ */ jsx10(
-      ChatAttachment,
-      {
-        data: attachment,
-        dir: "ltr"
-      },
-      String(attachment.url || attachment.filename || index)
-    )) }) : null,
-    shouldRenderContent ? /* @__PURE__ */ jsxs6(
-      ChatMessageContent,
-      {
-        className: cn(isAssistant ? "bg-transparent p-0" : void 0, contentClassName),
-        dir,
-        from: message.role,
-        children: [
-          isAssistant ? renderAssistantContent ? renderAssistantContent({ isStreaming, message }) : /* @__PURE__ */ jsx10(
-            Timeline,
-            {
-              getHitlActionState,
-              isLoading: isStreaming,
-              message,
-              nodeActivityMode,
-              onHitlAction,
-              parts: message.parts
-            }
-          ) : null,
-          !isAssistant ? renderUserContent ? renderUserContent({ message }) : resolvedUserContent ? /* @__PURE__ */ jsx10(
-            AgentChatUserMessageContent,
-            {
-              collapsedLines: userMessageCollapsedLines,
-              collapseThreshold: userMessageCollapseThreshold,
-              content: resolvedUserContent,
-              showLessLabel: userMessageShowLessLabel,
-              showMoreLabel: userMessageShowMoreLabel
-            }
-          ) : null : null
-        ]
-      }
-    ) : null,
-    renderedActions ? /* @__PURE__ */ jsx10("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__ */ jsxs6(
+    ChatMessage,
+    {
+      className,
+      dir,
+      from: message.role,
+      children: [
+        showAttachments ? /* @__PURE__ */ jsx10(
+          ChatAttachmentRows,
+          {
+            attachments: message.attachments || [],
+            className: "mb-2",
+            dir,
+            resolveContent: attachmentContentResolver
+          }
+        ) : null,
+        shouldRenderContent ? /* @__PURE__ */ jsxs6(
+          ChatMessageContent,
+          {
+            className: cn(isAssistant ? "bg-transparent p-0" : void 0, contentClassName),
+            dir,
+            from: message.role,
+            children: [
+              isAssistant ? renderAssistantContent ? renderAssistantContent({ isStreaming, message }) : /* @__PURE__ */ jsx10(
+                Timeline,
+                {
+                  getHitlActionState,
+                  isLoading: isStreaming,
+                  message,
+                  nodeActivityMode,
+                  onHitlAction,
+                  parts: message.parts
+                }
+              ) : null,
+              !isAssistant ? renderUserContent ? renderUserContent({ message }) : resolvedUserContent ? /* @__PURE__ */ jsx10(
+                AgentChatUserMessageContent,
+                {
+                  collapsedLines: userMessageCollapsedLines,
+                  collapseThreshold: userMessageCollapseThreshold,
+                  content: resolvedUserContent,
+                  showLessLabel: userMessageShowLessLabel,
+                  showMoreLabel: userMessageShowMoreLabel
+                }
+              ) : null : null
+            ]
+          }
+        ) : null,
+        renderedActions ? defaultUserActions ? /* @__PURE__ */ jsx10(AgentChatUserMessageActionRow, { className: actionsClassName, children: renderedActions }) : /* @__PURE__ */ jsx10("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
@@ -2577,6 +2963,7 @@ export {
   AgentChatToolPart,
   AgentChatToolRow,
   AgentChatToolSession,
+  AgentChatUserMessageActionRow,
   AgentChatUserMessageContent,
   AgentResponseTimeline,
   AskUserInteraction,
@@ -2594,6 +2981,7 @@ export {
   BubbleGroup,
   BubbleReactions,
   ChatAttachment,
+  ChatAttachmentRows,
   ChatAttachments,
   ChatMessage,
   ChatMessageAction,
@@ -2607,6 +2995,7 @@ export {
   ChatMessageAction as MessageAction,
   ChatMessageActions as MessageActions,
   ChatAttachment as MessageAttachment,
+  ChatAttachmentRows as MessageAttachmentRows,
   ChatAttachments as MessageAttachments,
   MessageAvatar,
   ChatMessageContent as MessageContent,
@@ -2622,6 +3011,7 @@ export {
   bubbleVariants,
   cn,
   contextStatusMetrics,
+  createAgentChatComposerFile,
   hitlActionLabel,
   hitlTitle,
   isAgentChatSubagent,
@@ -2630,6 +3020,7 @@ export {
   markerVariants,
   partitionAgentChatToolTimeline,
   resolvedHitlLabel,
+  revokeAgentChatComposerFiles,
   shouldCollapseUserMessage,
   useAudioRecorder
 };