@agents24/chat-react 0.5.30 → 0.5.31

package/dist/ui/index.js

@@ -4,8 +4,8 @@ import {
 } from "../chunk-5PWUQTLK.js";
 import {
   attachmentFileAccept,
+  canonicalInputMimeType,
   inputMimeTypes,
-  normalizeAttachmentMimeType,
   validateAgentChatSubmission
 } from "../chunk-INO5DSSJ.js";
 
@@ -489,6 +489,7 @@ function attachmentRenderKey(data, index, rowKind) {
 function ChatImageAttachment({
   className,
   data,
+  presentation = "message",
   onRemove,
   resolveContent,
   ...props
@@ -568,7 +569,7 @@ function ChatImageAttachment({
     Attachment,
     {
       ...props,
-      className: cn("a24-chat-image-attachment", className),
+      className: cn("a24-chat-image-attachment", presentation === "composer" && "a24-composer-attachment-card", className),
       orientation: "vertical",
       ref: rootRef,
       state: status === "error" ? "error" : status === "done" ? "done" : "processing",
@@ -591,6 +592,7 @@ function ChatImageAttachment({
       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
     ),
+    presentation === "composer" ? React.createElement("span", { className: "a24-composer-image-caption", title: filename }, filename) : null,
     onRemove ? React.createElement(
       "button",
       {
@@ -609,6 +611,7 @@ function ChatImageAttachment({
 function ChatAttachment({
   className,
   data,
+  presentation = "message",
   onRemove,
   orientation,
   resolveContent,
@@ -621,6 +624,7 @@ function ChatAttachment({
       ...props,
       className,
       data,
+      presentation,
       onRemove,
       resolveContent
     });
@@ -628,11 +632,16 @@ function ChatAttachment({
   return React.createElement(
     Attachment,
     {
-      className: cn("a24-chat-attachment", className),
+      className: cn("a24-chat-attachment", presentation === "composer" && "a24-composer-attachment-card", className),
       orientation: orientation || "horizontal",
       size: "sm",
       ...props
     },
+    presentation === "composer" ? React.createElement(
+      "div",
+      { className: "a24-composer-file-preview", "aria-hidden": true },
+      React.createElement(FileIcon, { size: 64, type: fileIconType, variant: "solid" })
+    ) : null,
     React.createElement(
       AttachmentMedia,
       Object.assign(
@@ -690,6 +699,7 @@ function ChatAttachments({
 }
 function ChatAttachmentRows({
   attachments,
+  layout = "message",
   className,
   dir,
   onRemove,
@@ -705,6 +715,7 @@ function ChatAttachmentRows({
     items.map(
       (attachment, index) => React.createElement(ChatAttachment, {
         data: attachment,
+        presentation: layout,
         dir: "ltr",
         key: attachmentRenderKey(attachment, index, kind),
         onRemove: onRemove ? () => onRemove(attachment) : void 0,
@@ -715,12 +726,12 @@ function ChatAttachmentRows({
   return React.createElement(
     "div",
     {
-      className: cn("a24-chat-attachment-rows", className),
+      className: cn("a24-chat-attachment-rows", layout === "composer" && "a24-composer-attachment-row", className),
       dir,
       ...props
     },
-    renderRow(imageAttachments, "images"),
-    renderRow(fileAttachments, "files")
+    layout === "composer" ? renderRow(attachments, "mixed") : renderRow(imageAttachments, "images"),
+    layout === "message" ? renderRow(fileAttachments, "files") : null
   );
 }
 
@@ -728,7 +739,7 @@ function ChatAttachmentRows({
 import * as React4 from "react";
 
 // src/ui/composer-attachments.ts
-import { normalizeAttachmentMimeType as normalizeAttachmentMimeType2 } from "@agents24/client";
+import { normalizeAttachmentMimeType } from "@agents24/client";
 var createId = () => typeof crypto !== "undefined" && "randomUUID" in crypto ? crypto.randomUUID() : `file-${Date.now()}-${Math.random().toString(36).slice(2)}`;
 function createAgentChatComposerFile(file) {
   return {
@@ -736,7 +747,7 @@ function createAgentChatComposerFile(file) {
     type: "file",
     url: URL.createObjectURL(file),
     filename: file.name || "attachment",
-    mediaType: normalizeAttachmentMimeType2(file.type, file.name),
+    mediaType: normalizeAttachmentMimeType(file.type, file.name),
     source: file
   };
 }
@@ -791,32 +802,38 @@ function useChatComposerFocus({ textareaRef, disabled, focusKey, restoredDraft,
 // src/ui/use-audio-recorder.ts
 import * as React3 from "react";
 var RECORDING_CANDIDATES = ["audio/webm;codecs=opus", "audio/webm", "audio/mp4"];
-function recordingExtension(mimeType) {
-  return mimeType.startsWith("audio/mp4") ? "m4a" : "webm";
-}
 function useAudioRecorder(onRecorded, options = {}) {
-  const mountedRef = React3.useRef(true);
-  const startingRef = React3.useRef(false);
   const recorderRef = React3.useRef(null);
   const streamRef = React3.useRef(null);
+  const pendingRef = React3.useRef(false);
+  const generationRef = React3.useRef(0);
   const onRecordedRef = React3.useRef(onRecorded);
   const onStreamChangeRef = React3.useRef(options.onStreamChange);
-  onRecordedRef.current = onRecorded;
-  onStreamChangeRef.current = options.onStreamChange;
+  React3.useEffect(() => {
+    onRecordedRef.current = onRecorded;
+    onStreamChangeRef.current = options.onStreamChange;
+  });
   const [isRecording, setIsRecording] = React3.useState(false);
   const [error, setError] = React3.useState(null);
+  const release = React3.useCallback(() => {
+    streamRef.current?.getTracks().forEach((track) => track.stop());
+    streamRef.current = null;
+    recorderRef.current = null;
+    onStreamChangeRef.current?.(null);
+  }, []);
   const stop = React3.useCallback(() => {
-    if (recorderRef.current && recorderRef.current.state !== "inactive") recorderRef.current.stop();
+    const recorder = recorderRef.current;
+    if (recorder && recorder.state !== "inactive") recorder.stop();
   }, []);
   const start = React3.useCallback(async () => {
-    if (startingRef.current || recorderRef.current) return;
-    startingRef.current = true;
+    if (pendingRef.current || recorderRef.current) return;
     setError(null);
     if (!navigator.mediaDevices?.getUserMedia || typeof MediaRecorder === "undefined") {
       setError("Audio recording is not supported in this browser.");
-      startingRef.current = false;
       return;
     }
+    pendingRef.current = true;
+    const generation = generationRef.current;
     try {
       const mimeType = RECORDING_CANDIDATES.find((candidate) => MediaRecorder.isTypeSupported(candidate));
       if (!mimeType) {
@@ -824,158 +841,169 @@ function useAudioRecorder(onRecorded, options = {}) {
         return;
       }
       const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
-      if (!mountedRef.current) {
+      if (generation !== generationRef.current) {
         stream.getTracks().forEach((track) => track.stop());
         return;
       }
       streamRef.current = stream;
-      onStreamChangeRef.current?.(stream);
       const recorder = new MediaRecorder(stream, { mimeType });
+      recorderRef.current = recorder;
       const chunks = [];
       recorder.ondataavailable = (event) => {
         if (event.data.size) chunks.push(event.data);
       };
       recorder.onstop = () => {
-        const actualType = recorder.mimeType || "audio/webm";
-        if (mountedRef.current) onRecordedRef.current(new File([new Blob(chunks, { type: actualType })], `recording-${Date.now()}.${recordingExtension(actualType)}`, { type: actualType }));
-        stream.getTracks().forEach((track) => track.stop());
-        onStreamChangeRef.current?.(null);
-        recorderRef.current = null;
-        streamRef.current = null;
-        if (mountedRef.current) setIsRecording(false);
+        if (generation !== generationRef.current) return;
+        const actualType = recorder.mimeType || mimeType;
+        const extension = actualType.startsWith("audio/mp4") ? "m4a" : "webm";
+        try {
+          onRecordedRef.current(new File([new Blob(chunks, { type: actualType })], `recording-${Date.now()}.${extension}`, { type: actualType }));
+        } finally {
+          release();
+          setIsRecording(false);
+        }
+      };
+      recorder.onerror = () => {
+        recorder.onstop = null;
+        if (recorder.state !== "inactive") recorder.stop();
+        release();
+        setIsRecording(false);
+        setError("Audio recording failed. Try again.");
       };
-      recorderRef.current = recorder;
-      streamRef.current = stream;
       recorder.start();
       setIsRecording(true);
+      onStreamChangeRef.current?.(stream);
     } catch {
-      streamRef.current?.getTracks().forEach((track) => track.stop());
-      onStreamChangeRef.current?.(null);
-      streamRef.current = null;
-      recorderRef.current = null;
-      if (mountedRef.current) setError("Microphone access is unavailable.");
+      if (generation === generationRef.current) {
+        release();
+        setIsRecording(false);
+        setError("Microphone access is unavailable.");
+      }
     } finally {
-      startingRef.current = false;
-    }
-  }, []);
-  React3.useEffect(() => {
-    mountedRef.current = true;
-    return () => {
-      mountedRef.current = false;
-      if (recorderRef.current && recorderRef.current.state !== "inactive") recorderRef.current.stop();
-      streamRef.current?.getTracks().forEach((track) => track.stop());
-      onStreamChangeRef.current?.(null);
-    };
-  }, []);
+      if (generation === generationRef.current) pendingRef.current = false;
+    }
+  }, [release]);
+  React3.useEffect(() => () => {
+    generationRef.current += 1;
+    pendingRef.current = false;
+    const recorder = recorderRef.current;
+    if (recorder) {
+      recorder.onstop = null;
+      recorder.onerror = null;
+      if (recorder.state !== "inactive") recorder.stop();
+    }
+    release();
+  }, [release]);
   return { error, isRecording, start, stop };
 }
 
 // src/ui/use-agent-chat-composer.ts
-function useAgentChatComposer({
-  disabled = false,
-  isRunning = false,
-  isCancelling = false,
-  inputContract,
-  recordingEnabled,
-  focusKey,
-  restoredDraft,
-  textareaRef,
-  onSubmit
-}) {
-  const [text, setDraftText] = React4.useState("");
-  const [files, setDraftFiles] = React4.useState([]);
-  const [isSubmitting, setIsSubmitting] = React4.useState(false);
+function useAgentChatComposer(options) {
+  const [text, setTextState] = React4.useState("");
+  const [files, setFiles] = React4.useState([]);
   const [attachmentError, setAttachmentError] = React4.useState(null);
-  const draftRef = React4.useRef({ text, files, revision: 0 });
-  const inFlightRef = React4.useRef([]);
+  const [isSubmitting, setIsSubmitting] = React4.useState(false);
+  const localTextareaRef = React4.useRef(null);
+  const textareaRef = options.textareaRef ?? localTextareaRef;
+  const filesRef = React4.useRef(files);
+  const inFlightFilesRef = React4.useRef([]);
+  const revisionRef = React4.useRef(0);
   const submittingRef = React4.useRef(false);
-  const mountedRef = React4.useRef(true);
-  const updateDraft = (nextText, nextFiles) => {
-    draftRef.current = { text: nextText, files: nextFiles, revision: draftRef.current.revision + 1 };
-    setDraftText(nextText);
-    setDraftFiles(nextFiles);
-  };
   React4.useEffect(() => {
-    mountedRef.current = true;
-    return () => {
-      mountedRef.current = false;
-      revokeAgentChatComposerFiles(draftRef.current.files);
-      revokeAgentChatComposerFiles(inFlightRef.current);
-    };
+    filesRef.current = files;
+  }, [files]);
+  React4.useEffect(() => () => {
+    revokeAgentChatComposerFiles(filesRef.current);
+    revokeAgentChatComposerFiles(inFlightFilesRef.current);
   }, []);
-  const focus = useChatComposerFocus({ textareaRef, disabled, focusKey, restoredDraft, onRestore: (draft) => {
-    revokeAgentChatComposerFiles(draftRef.current.files.filter((file) => !draft.files.includes(file)));
-    updateDraft(draft.text, draft.files);
-  } });
-  const accept = inputContract ? inputMimeTypes(inputContract) : null;
+  const focusComposer = useChatComposerFocus({
+    textareaRef,
+    disabled: Boolean(options.disabled),
+    focusKey: options.focusKey,
+    restoredDraft: options.restoredDraft,
+    onRestore: (draft) => {
+      revisionRef.current += 1;
+      revokeAgentChatComposerFiles(filesRef.current);
+      setTextState(draft.text);
+      setFiles(draft.files);
+    }
+  });
+  const attachmentMimeTypes = inputMimeTypes(options.inputContract);
+  const setText = (value) => {
+    revisionRef.current += 1;
+    setTextState(value);
+  };
   const addFiles = (selected) => {
-    const accepted = accept ? selected.filter((file) => accept.includes(normalizeAttachmentMimeType(file.type, file.name))) : selected;
+    const accepted = selected.filter((file) => attachmentMimeTypes.includes(canonicalInputMimeType(file.type, file.name)));
+    revisionRef.current += 1;
+    const additions = accepted.map(createAgentChatComposerFile);
+    setFiles((current) => [...current, ...additions]);
     setAttachmentError(accepted.length === selected.length ? null : "One or more selected file types are not supported by this Agent.");
-    updateDraft(draftRef.current.text, [...draftRef.current.files, ...accepted.map(createAgentChatComposerFile)]);
   };
-  const recordedRef = React4.useRef(addFiles);
-  recordedRef.current = addFiles;
-  const recorder = useAudioRecorder((file) => {
-    if (mountedRef.current) recordedRef.current([file]);
-  });
-  const recordingAllowed = inputContract ? inputContract.modalities.audio.enabled && inputContract.modalities.audio.recording_enabled && recordingEnabled !== false : recordingEnabled === true;
-  const validationError = inputContract ? validateAgentChatSubmission(
-    inputContract,
+  const removeFile = (id) => {
+    revisionRef.current += 1;
+    const removed = filesRef.current.find((file) => file.id === id);
+    if (removed) revokeAgentChatComposerFiles([removed]);
+    setFiles((current) => current.filter((file) => file.id !== id));
+  };
+  const recorder = useAudioRecorder((file) => addFiles([file]), { onStreamChange: options.onRecordingStreamChange });
+  const validationError = options.inputContract ? validateAgentChatSubmission(
+    options.inputContract,
     text,
-    files.map((file) => ({ data: file.source || new Uint8Array(), mediaType: file.mediaType, name: file.filename, byteSize: file.source ? void 0 : file.byteSize }))
+    files.map((file) => ({ data: file.source || new Uint8Array(), mediaType: file.mediaType, name: file.filename }))
   ) : null;
-  const canSubmit = !disabled && !isCancelling && !isSubmitting && !recorder.isRecording && !validationError && Boolean(text.trim() || files.length);
+  const canSubmit = Boolean(text.trim() || files.length) && !options.disabled && !options.isCancelling && !isSubmitting && !recorder.isRecording && !validationError;
   const submit = async () => {
     if (!canSubmit || submittingRef.current) return;
-    const submitted = draftRef.current;
+    const value = text;
+    const selectedFiles = files;
+    const clearedRevision = ++revisionRef.current;
     submittingRef.current = true;
-    inFlightRef.current = submitted.files;
     setIsSubmitting(true);
-    updateDraft("", []);
-    const clearedRevision = draftRef.current.revision;
-    focus();
+    inFlightFilesRef.current = selectedFiles;
+    setTextState("");
+    setFiles([]);
+    focusComposer();
     try {
-      await onSubmit({
-        text: submitted.text,
-        files: submitted.files,
-        attachmentIds: submitted.files.flatMap((file) => file.persistedAttachmentId ? [file.persistedAttachmentId] : [])
-      });
-      revokeAgentChatComposerFiles(submitted.files);
+      await options.onSubmit(value, selectedFiles);
+      revokeAgentChatComposerFiles(selectedFiles);
     } catch {
-      if (mountedRef.current && draftRef.current.revision === clearedRevision) updateDraft(submitted.text, submitted.files);
-      else revokeAgentChatComposerFiles(submitted.files);
+      if (revisionRef.current === clearedRevision) {
+        revisionRef.current += 1;
+        setTextState(value);
+        setFiles(selectedFiles);
+      } else revokeAgentChatComposerFiles(selectedFiles);
     } finally {
-      inFlightRef.current = [];
+      inFlightFilesRef.current = [];
       submittingRef.current = false;
-      if (mountedRef.current) setIsSubmitting(false);
+      setIsSubmitting(false);
     }
   };
   return {
     text,
+    setText,
     files,
-    isSubmitting,
+    addFiles,
+    removeFile,
+    textareaRef,
+    submit,
     canSubmit,
-    validationError,
+    isSubmitting,
     attachmentError,
-    recordingAllowed,
+    attachmentMimeTypes,
+    validationError,
     recorder,
-    accept,
-    fileAccept: accept ? attachmentFileAccept(accept) : void 0,
-    allowAttachments: accept ? accept.length > 0 : true,
-    action: chatComposerAction({ hasDraft: Boolean(text.trim() || files.length), isRunning, isCancelling }),
-    setText: (value) => updateDraft(value, draftRef.current.files),
-    addFiles,
-    removeFile: (id) => {
-      revokeAgentChatComposerFiles(draftRef.current.files.filter((file) => file.id === id));
-      updateDraft(draftRef.current.text, draftRef.current.files.filter((file) => file.id !== id));
-    },
-    submit,
+    recordingAllowed: options.recordingEnabled ?? options.inputContract?.modalities.audio.recording_enabled ?? false,
+    fileAccept: attachmentFileAccept(attachmentMimeTypes),
     onKeyDown: (event) => {
       if (event.key === "Enter" && !event.shiftKey && !event.nativeEvent.isComposing) {
         event.preventDefault();
         void submit();
       }
-    }
+    },
+    allowAttachments: attachmentMimeTypes.length > 0,
+    isExpanded: Boolean(options.forceExpanded || text.includes("\n") || text.length > 62),
+    action: chatComposerAction({ hasDraft: Boolean(text.trim() || files.length), isRunning: Boolean(options.isRunning), isCancelling: Boolean(options.isCancelling) })
   };
 }
 
@@ -1094,7 +1122,6 @@ function AgentChatComposer({
   contextWindow,
   accept,
   allowAttachments = true,
-  attachmentLayout = "flow",
   className,
   disabled = false,
   forceExpanded = false,
@@ -1120,7 +1147,7 @@ function AgentChatComposer({
     focusKey,
     restoredDraft,
     textareaRef: localTextareaRef,
-    onSubmit: (input) => onSubmit({ ...input, text: input.text.trim() })
+    onSubmit: (text2, files2) => onSubmit({ text: text2.trim(), files: files2, attachmentIds: files2.flatMap((file) => file.id ? [file.id] : []) })
   });
   const { text, files, setText, isSubmitting, canSubmit, action, submit } = composer;
   const isExpanded = forceExpanded || text.includes("\n") || text.length > 62;
@@ -1156,26 +1183,8 @@ function AgentChatComposer({
     event.currentTarget.value = "";
   };
   return /* @__PURE__ */ jsxs2("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__ */ jsx4(
-      "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__ */ jsx4(
-          ChatAttachmentRows,
-          {
-            attachments: files,
-            onRemove: (attachment) => attachment.id && composer.removeFile(attachment.id)
-          }
-        )
-      }
-    ) : null,
     composer.attachmentError || composer.recorder.error ? /* @__PURE__ */ jsx4("p", { role: "alert", children: composer.attachmentError || composer.recorder.error }) : null,
-    /* @__PURE__ */ jsx4(
+    /* @__PURE__ */ jsxs2(
       "div",
       {
         "data-expanded": isExpanded ? "" : void 0,
@@ -1183,118 +1192,129 @@ function AgentChatComposer({
           "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__ */ jsxs2(
-          "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__ */ jsxs2("div", { style: { gridArea: "plus" }, className: "a24-composer__attach-slot flex shrink-0 items-center justify-center", children: [
-                /* @__PURE__ */ jsx4(
-                  "input",
-                  {
-                    ref: fileInputRef,
-                    accept: composer.fileAccept ?? accept,
-                    "aria-label": "Attach files",
-                    className: "hidden",
-                    multiple: true,
-                    name: "attachments",
-                    onChange: handleFilesChange,
-                    type: "file"
-                  }
-                ),
-                /* @__PURE__ */ jsx4(
-                  "button",
-                  {
-                    "aria-label": "Attach files",
-                    className: cn("a24-composer__attach", pillButtonClass),
-                    disabled: disabled || isSubmitting || !allowAttachments || !composer.allowAttachments,
-                    onClick: () => fileInputRef.current?.click(),
-                    title: "Attach files",
-                    type: "button",
-                    children: /* @__PURE__ */ jsx4(Plus, { className: "size-4" })
-                  }
-                )
-              ] }),
-              /* @__PURE__ */ jsx4("div", { style: { gridArea: "textarea" }, className: "a24-composer__textarea-slot min-w-0 w-full", children: /* @__PURE__ */ jsx4(
-                "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"
+        children: [
+          files.length > 0 ? /* @__PURE__ */ jsx4(
+            ChatAttachmentRows,
+            {
+              "data-testid": "agent-chat-composer-attachments",
+              layout: "composer",
+              attachments: files,
+              onRemove: (attachment) => attachment.id && composer.removeFile(attachment.id)
+            }
+          ) : null,
+          /* @__PURE__ */ jsxs2(
+            "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__ */ jsxs2("div", { style: { gridArea: "plus" }, className: "a24-composer__attach-slot flex shrink-0 items-center justify-center", children: [
+                  /* @__PURE__ */ jsx4(
+                    "input",
+                    {
+                      ref: fileInputRef,
+                      accept: composer.fileAccept ?? accept,
+                      "aria-label": "Attach files",
+                      className: "hidden",
+                      multiple: true,
+                      name: "attachments",
+                      onChange: handleFilesChange,
+                      type: "file"
+                    }
                   ),
-                  disabled,
-                  name: "message",
-                  onChange: (event) => setText(event.target.value),
-                  onKeyDown: composer.onKeyDown,
-                  placeholder,
-                  rows: isExpanded ? 2 : 1,
-                  value: text
-                }
-              ) }),
-              isExpanded ? /* @__PURE__ */ jsxs2("div", { style: { gridArea: "toolbar" }, className: "a24-composer__toolbar flex min-w-0 items-center gap-1.5", children: [
-                inputToolbarContent,
-                /* @__PURE__ */ jsx4(AgentChatContextStatus, { contextWindow }),
-                composer.recordingAllowed ? /* @__PURE__ */ jsx4(
-                  "button",
+                  /* @__PURE__ */ jsx4(
+                    "button",
+                    {
+                      "aria-label": "Attach files",
+                      className: cn("a24-composer__attach", pillButtonClass),
+                      disabled: disabled || isSubmitting || !allowAttachments || !composer.allowAttachments,
+                      onClick: () => fileInputRef.current?.click(),
+                      title: "Attach files",
+                      type: "button",
+                      children: /* @__PURE__ */ jsx4(Plus, { className: "size-4" })
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsx4("div", { style: { gridArea: "textarea" }, className: "a24-composer__textarea-slot min-w-0 w-full", children: /* @__PURE__ */ jsx4(
+                  "textarea",
                   {
-                    type: "button",
-                    className: pillButtonClass,
-                    "aria-label": composer.recorder.isRecording ? "Stop recording" : "Record audio",
-                    disabled: disabled || isRunning || isSubmitting,
-                    onClick: () => {
-                      if (composer.recorder.isRecording) composer.recorder.stop();
-                      else void composer.recorder.start();
-                    },
-                    children: composer.recorder.isRecording ? /* @__PURE__ */ jsx4(Square, {}) : /* @__PURE__ */ jsx4(Mic, {})
+                    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,
+                    name: "message",
+                    onChange: (event) => setText(event.target.value),
+                    onKeyDown: composer.onKeyDown,
+                    placeholder,
+                    rows: isExpanded ? 2 : 1,
+                    value: text
                   }
-                ) : null
-              ] }) : null,
-              !isExpanded ? /* @__PURE__ */ jsx4("div", { style: { gridArea: "composer" }, className: "flex min-w-0 items-center gap-1.5" }) : null,
-              !isExpanded ? /* @__PURE__ */ jsxs2("div", { style: { gridArea: "mic" }, className: "flex shrink-0 items-center justify-end", children: [
-                /* @__PURE__ */ jsx4(AgentChatContextStatus, { contextWindow }),
-                composer.recordingAllowed ? /* @__PURE__ */ jsx4(
+                ) }),
+                isExpanded ? /* @__PURE__ */ jsxs2("div", { style: { gridArea: "toolbar" }, className: "a24-composer__toolbar flex min-w-0 items-center gap-1.5", children: [
+                  inputToolbarContent,
+                  /* @__PURE__ */ jsx4(AgentChatContextStatus, { contextWindow }),
+                  composer.recordingAllowed ? /* @__PURE__ */ jsx4(
+                    "button",
+                    {
+                      type: "button",
+                      className: pillButtonClass,
+                      "aria-label": composer.recorder.isRecording ? "Stop recording" : "Record audio",
+                      disabled: disabled || isRunning || isSubmitting,
+                      onClick: () => {
+                        if (composer.recorder.isRecording) composer.recorder.stop();
+                        else void composer.recorder.start();
+                      },
+                      children: composer.recorder.isRecording ? /* @__PURE__ */ jsx4(Square, {}) : /* @__PURE__ */ jsx4(Mic, {})
+                    }
+                  ) : null
+                ] }) : null,
+                !isExpanded ? /* @__PURE__ */ jsx4("div", { style: { gridArea: "composer" }, className: "flex min-w-0 items-center gap-1.5" }) : null,
+                !isExpanded ? /* @__PURE__ */ jsxs2("div", { style: { gridArea: "mic" }, className: "flex shrink-0 items-center justify-end", children: [
+                  /* @__PURE__ */ jsx4(AgentChatContextStatus, { contextWindow }),
+                  composer.recordingAllowed ? /* @__PURE__ */ jsx4(
+                    "button",
+                    {
+                      type: "button",
+                      className: pillButtonClass,
+                      "aria-label": composer.recorder.isRecording ? "Stop recording" : "Record audio",
+                      disabled: disabled || isRunning || isSubmitting,
+                      onClick: () => {
+                        if (composer.recorder.isRecording) composer.recorder.stop();
+                        else void composer.recorder.start();
+                      },
+                      children: composer.recorder.isRecording ? /* @__PURE__ */ jsx4(Square, {}) : /* @__PURE__ */ jsx4(Mic, {})
+                    }
+                  ) : null
+                ] }) : null,
+                /* @__PURE__ */ jsx4("div", { style: { gridArea: "submit" }, className: "a24-composer__submit-slot flex shrink-0 items-center justify-end gap-1", children: /* @__PURE__ */ jsx4(
                   "button",
                   {
-                    type: "button",
-                    className: pillButtonClass,
-                    "aria-label": composer.recorder.isRecording ? "Stop recording" : "Record audio",
-                    disabled: disabled || isRunning || isSubmitting,
+                    "aria-label": isCancelling ? "Cancelling response" : action === "stop" ? "Stop generating" : files.length > 0 ? `Send ${formatFileCount(files)}` : isRunning ? "Queue message" : "Send message",
+                    className: cn("a24-composer__submit", submitButtonClass, text.trim().length > 0 && "hover:scale-105"),
+                    disabled: isCancelling || (action === "stop" ? disabled : !canSubmit),
                     onClick: () => {
-                      if (composer.recorder.isRecording) composer.recorder.stop();
-                      else void composer.recorder.start();
+                      if (action === "stop") onStop?.();
+                      else void submit();
                     },
-                    children: composer.recorder.isRecording ? /* @__PURE__ */ jsx4(Square, {}) : /* @__PURE__ */ jsx4(Mic, {})
+                    title: composer.validationError || (action === "stop" ? "Stop" : isRunning ? "Queue message" : "Send"),
+                    type: "button",
+                    children: isCancelling ? /* @__PURE__ */ jsx4(Loader2, { className: "size-3.5 animate-spin" }) : action === "stop" ? /* @__PURE__ */ jsx4(Square, { className: "size-3.5 fill-current" }) : /* @__PURE__ */ jsx4(ArrowUp, { className: "size-4", strokeWidth: 2.5 })
                   }
-                ) : null
-              ] }) : null,
-              /* @__PURE__ */ jsx4("div", { style: { gridArea: "submit" }, className: "a24-composer__submit-slot flex shrink-0 items-center justify-end gap-1", children: /* @__PURE__ */ jsx4(
-                "button",
-                {
-                  "aria-label": isCancelling ? "Cancelling response" : action === "stop" ? "Stop generating" : files.length > 0 ? `Send ${formatFileCount(files)}` : isRunning ? "Queue message" : "Send message",
-                  className: cn("a24-composer__submit", submitButtonClass, text.trim().length > 0 && "hover:scale-105"),
-                  disabled: isCancelling || (action === "stop" ? disabled : !canSubmit),
-                  onClick: () => {
-                    if (action === "stop") onStop?.();
-                    else void submit();
-                  },
-                  title: composer.validationError || (action === "stop" ? "Stop" : isRunning ? "Queue message" : "Send"),
-                  type: "button",
-                  children: isCancelling ? /* @__PURE__ */ jsx4(Loader2, { className: "size-3.5 animate-spin" }) : action === "stop" ? /* @__PURE__ */ jsx4(Square, { className: "size-3.5 fill-current" }) : /* @__PURE__ */ jsx4(ArrowUp, { className: "size-4", strokeWidth: 2.5 })
-                }
-              ) })
-            ]
-          }
-        )
+                ) })
+              ]
+            }
+          )
+        ]
       }
     ),
     !isExpanded && inputToolbarContent ? /* @__PURE__ */ jsx4("div", { className: "a24-composer__toolbar a24-composer__toolbar--external mt-2 flex items-center gap-2 px-1", children: inputToolbarContent }) : null
@@ -1325,7 +1345,7 @@ function QueueRow({ message, onRemove, onEdit }) {
       /* @__PURE__ */ jsx5(CornerDownLeft, { "aria-hidden": true, className: "size-4 shrink-0 text-muted-foreground" }),
       /* @__PURE__ */ jsx5("span", { className: "a24-queue__text min-w-0 flex-1 truncate text-foreground", title: message.text, children: message.text || `${message.attachment_ids.length} attachment${message.attachment_ids.length === 1 ? "" : "s"}` }),
       message.status === "blocked" ? /* @__PURE__ */ jsx5("span", { className: "shrink-0 text-xs text-amber-700", children: "Needs attention" }) : null,
-      ["steer_pending", "delivering"].includes(message.status) ? /* @__PURE__ */ jsx5("span", { className: "shrink-0 text-xs text-muted-foreground", children: "Steering\u2026" }) : null,
+      ["steer_pending", "delivering"].includes(message.status) ? /* @__PURE__ */ jsx5("span", { className: "shrink-0 text-xs text-muted-foreground", children: "Sending\u2026" }) : null,
       editable ? /* @__PURE__ */ jsxs3(Fragment, { children: [
         /* @__PURE__ */ jsx5(
           "button",
@@ -1439,6 +1459,21 @@ function AgentChatDefaultActions({
   React8.useEffect(() => () => {
     if (copyResetTimer.current !== null) window.clearTimeout(copyResetTimer.current);
   }, []);
+  const [feedbackPending, setFeedbackPending] = React8.useState(false);
+  const feedbackInFlight = React8.useRef(false);
+  const writeFeedback = async (input, close = false) => {
+    if (feedbackInFlight.current) return;
+    feedbackInFlight.current = true;
+    setFeedbackPending(true);
+    try {
+      await handlers?.onSetFeedback?.(message, input);
+      if (close) setFeedbackOpen(false);
+    } catch {
+    } finally {
+      feedbackInFlight.current = false;
+      setFeedbackPending(false);
+    }
+  };
   const copied = handlers?.copied ?? optimisticCopied;
   const copyMessage = () => {
     handlers?.onCopy?.(message.content || "", message.id);
@@ -1482,7 +1517,8 @@ function AgentChatDefaultActions({
       ChatMessageAction,
       {
         label: "Like",
-        onClick: () => void handlers.onSetFeedback?.(message, {
+        disabled: feedbackPending,
+        onClick: () => void writeFeedback({
           rating: handlers.feedback?.rating === "like" ? null : "like"
         }),
         tooltip: "Like this response",
@@ -1493,10 +1529,11 @@ function AgentChatDefaultActions({
       /* @__PURE__ */ jsx6(Popover.Trigger, { asChild: true, children: /* @__PURE__ */ jsx6(
         ChatMessageAction,
         {
+          disabled: feedbackPending,
           label: "Dislike",
           onClick: () => {
             if (handlers.feedback?.rating !== "dislike") {
-              void handlers.onSetFeedback?.(message, { rating: "dislike" });
+              void writeFeedback({ rating: "dislike" });
             }
             setFeedbackOpen(true);
           },
@@ -1546,9 +1583,10 @@ function AgentChatDefaultActions({
                   /* @__PURE__ */ jsx6(
                     "button",
                     {
+                      disabled: feedbackPending,
                       className: "rounded-md px-3 py-2 text-sm font-medium hover:bg-muted",
                       onClick: () => {
-                        void Promise.resolve(handlers.onSetFeedback?.(message, { rating: null })).then(() => setFeedbackOpen(false)).catch(() => void 0);
+                        void writeFeedback({ rating: null }, true);
                       },
                       type: "button",
                       children: "Remove feedback"
@@ -1557,9 +1595,10 @@ function AgentChatDefaultActions({
                   /* @__PURE__ */ jsx6(
                     "button",
                     {
+                      disabled: feedbackPending,
                       className: "rounded-md bg-primary px-3 py-2 text-sm font-medium text-primary-foreground hover:opacity-90",
                       onClick: () => {
-                        void Promise.resolve(handlers.onSetFeedback?.(message, { rating: "dislike", reason, comment })).then(() => setFeedbackOpen(false)).catch(() => void 0);
+                        void writeFeedback({ rating: "dislike", reason, comment }, true);
                       },
                       type: "button",
                       children: "Save"
@@ -2286,16 +2325,17 @@ function ToolActivityReel({
     /* @__PURE__ */ jsx10("span", { className: previous ? "a24-tool-reel__current" : void 0, children: displayed })
   ] });
 }
-function ToolActivityOrb({ label }) {
-  return /* @__PURE__ */ jsx10("span", { className: "a24-tool-orb", children: /* @__PURE__ */ jsx10(ThinkingOrb, { "aria-label": label || "Working", size: 20, speed: 0.8, state: "searching" }) });
+function ToolActivityOrb({ label = "Working", kind = "tool", part, renderActivityIcon }) {
+  return /* @__PURE__ */ jsx10("span", { className: "a24-tool-orb", children: renderActivityIcon ? renderActivityIcon({ label, kind, part }) : /* @__PURE__ */ jsx10(ThinkingOrb, { "aria-label": label, size: 20, speed: 0.8, state: "searching" }) });
 }
 function AgentChatActivityRow({
   label,
   modelTurnId,
+  renderActivityIcon,
   onSelect
 }) {
   const content = /* @__PURE__ */ jsxs6(Fragment3, { children: [
-    /* @__PURE__ */ jsx10(ToolActivityOrb, { label }),
+    /* @__PURE__ */ jsx10(ToolActivityOrb, { label, kind: "planning", renderActivityIcon }),
     /* @__PURE__ */ jsx10("span", { className: "a24-tool-trigger__label a24-tool-shimmer", children: /* @__PURE__ */ jsx10(ToolActivityReel, { label }) })
   ] });
   return /* @__PURE__ */ jsx10("div", { className: "a24-tool-trigger-row a24-tool-trigger-row--root", "data-agents24-model-turn": modelTurnId, role: "status", children: onSelect ? /* @__PURE__ */ jsx10("button", { className: "a24-tool-trigger a24-tool-trigger--root a24-tool-trigger--active", onClick: onSelect, type: "button", children: content }) : /* @__PURE__ */ jsx10("div", { className: "a24-tool-trigger a24-tool-trigger--root a24-tool-trigger--active", children: content }) });
@@ -2304,6 +2344,7 @@ function AgentChatModelTurnRow({ part }) {
   return /* @__PURE__ */ jsx10(AgentChatActivityRow, { label: "Planning next moves", modelTurnId: part.modelTurnId });
 }
 function AgentChatNodeActivityRow({
+  renderActivityIcon,
   onSelect,
   part
 }) {
@@ -2322,10 +2363,10 @@ function AgentChatNodeActivityRow({
   const label = running ? /* @__PURE__ */ jsx10("span", { className: "a24-tool-shimmer", children: /* @__PURE__ */ jsx10(ToolActivityReel, { label: part.label }) }) : part.label;
   if (!failed) {
     return /* @__PURE__ */ jsx10("div", { className: "a24-tool-trigger-row", role: "status", children: onSelect ? /* @__PURE__ */ jsxs6("button", { className: triggerClassName, onClick: () => onSelect(part), type: "button", children: [
-      running ? /* @__PURE__ */ jsx10(ToolActivityOrb, { label: part.label }) : null,
+      running ? /* @__PURE__ */ jsx10(ToolActivityOrb, { label: part.label, kind: "node", part, renderActivityIcon }) : null,
       /* @__PURE__ */ jsx10("span", { className: "a24-tool-trigger__label", children: label })
     ] }) : /* @__PURE__ */ jsxs6("div", { className: triggerClassName, children: [
-      running ? /* @__PURE__ */ jsx10(ToolActivityOrb, { label: part.label }) : null,
+      running ? /* @__PURE__ */ jsx10(ToolActivityOrb, { label: part.label, kind: "node", part, renderActivityIcon }) : null,
       /* @__PURE__ */ jsx10("span", { className: "a24-tool-trigger__label", children: label })
     ] }) });
   }
@@ -2371,6 +2412,7 @@ function ToolDisclosure({
   root,
   showOrb,
   statusLabel,
+  renderActivityIcon,
   accessory
 }) {
   const [open, setOpen] = React11.useState(false);
@@ -2380,10 +2422,10 @@ function ToolDisclosure({
     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__ */ jsxs6("div", { className: cn("a24-tool-trigger-row", root && "a24-tool-trigger-row--root"), children: [
       onSelect && part ? /* @__PURE__ */ jsxs6("button", { className: triggerClassName, onClick: () => onSelect(part), type: "button", children: [
-        showOrb ? /* @__PURE__ */ jsx10(ToolActivityOrb, { label: statusLabel }) : null,
+        showOrb ? /* @__PURE__ */ jsx10(ToolActivityOrb, { label: statusLabel || "Working", kind: grouped ? "group" : "tool", part, renderActivityIcon }) : null,
         /* @__PURE__ */ jsx10("span", { className: "a24-tool-trigger__label", children: label })
       ] }) : /* @__PURE__ */ jsxs6("div", { className: triggerClassName, children: [
-        showOrb ? /* @__PURE__ */ jsx10(ToolActivityOrb, { label: statusLabel }) : null,
+        showOrb ? /* @__PURE__ */ jsx10(ToolActivityOrb, { label: statusLabel || "Working", kind: grouped ? "group" : "tool", part, renderActivityIcon }) : null,
         /* @__PURE__ */ jsx10("span", { className: "a24-tool-trigger__label", children: label })
       ] }),
       accessory
@@ -2405,7 +2447,7 @@ function ToolDisclosure({
           },
           type: "button",
           children: [
-            showOrb ? /* @__PURE__ */ jsx10(ToolActivityOrb, { label: statusLabel }) : null,
+            showOrb ? /* @__PURE__ */ jsx10(ToolActivityOrb, { label: statusLabel || "Working", kind: grouped ? "group" : "tool", part, renderActivityIcon }) : null,
             /* @__PURE__ */ jsx10("span", { className: "a24-tool-trigger__label", children: label }),
             open ? /* @__PURE__ */ jsx10(ChevronDown2, { "aria-hidden": "true", className: "a24-tool-trigger__chevron" }) : /* @__PURE__ */ jsx10(ChevronRight2, { "aria-hidden": "true", className: "a24-tool-trigger__chevron" })
           ]
@@ -2466,6 +2508,7 @@ function AgentChatToolRow({
   return /* @__PURE__ */ jsx10("div", { "data-agents24-tool-part": part.type, "data-state": part.state, children: /* @__PURE__ */ jsxs6(
     ToolDisclosure,
     {
+      renderActivityIcon: slots?.renderActivityIcon,
       error: failed,
       accessory: toolAccessory(context, slots),
       label: /* @__PURE__ */ jsx10(ToolLabel, { active, label: context.label, part, slots }),
@@ -2512,6 +2555,7 @@ function AgentChatToolSession({
   return /* @__PURE__ */ jsx10(
     ToolDisclosure,
     {
+      renderActivityIcon: slots?.renderActivityIcon,
       error: failed,
       grouped: true,
       label: labelContent,
@@ -2556,6 +2600,7 @@ function AgentChatSubagentGroup({ isLatestActivity = true, isLive = false, part,
   return /* @__PURE__ */ jsx10(
     ToolDisclosure,
     {
+      renderActivityIcon: slots?.renderActivityIcon,
       accessory: slots?.renderToolAccessory?.(context),
       error: failed,
       grouped: true,
@@ -2815,14 +2860,14 @@ function AgentResponseTimeline({
     if (part.kind === "model-turn") {
       const key = activeActivityClaimed ? part.id : `${message.id}-active-activity`;
       activeActivityClaimed = true;
-      rendered.push(/* @__PURE__ */ jsx11(AgentChatActivityRow, { label: "Planning next moves", modelTurnId: part.modelTurnId }, key));
+      rendered.push(/* @__PURE__ */ jsx11(AgentChatActivityRow, { renderActivityIcon: toolSlots?.renderActivityIcon, label: "Planning next moves", modelTurnId: part.modelTurnId }, key));
       continue;
     }
     if (part.kind === "node-activity") {
       const key = activeActivityClaimed ? part.id : `${message.id}-active-activity`;
       if (part.status === "running") activeActivityClaimed = true;
       rendered.push(
-        part.status === "running" ? /* @__PURE__ */ jsx11(AgentChatActivityRow, { label: part.label, onSelect: onNodeSelect ? () => onNodeSelect(part) : void 0 }, key) : /* @__PURE__ */ jsx11(AgentChatNodeActivityRow, { onSelect: onNodeSelect, part }, part.id)
+        part.status === "running" ? /* @__PURE__ */ jsx11(AgentChatActivityRow, { renderActivityIcon: toolSlots?.renderActivityIcon, label: part.label, onSelect: onNodeSelect ? () => onNodeSelect(part) : void 0 }, key) : /* @__PURE__ */ jsx11(AgentChatNodeActivityRow, { renderActivityIcon: toolSlots?.renderActivityIcon, onSelect: onNodeSelect, part }, part.id)
       );
       continue;
     }
@@ -2851,7 +2896,7 @@ function AgentResponseTimeline({
     rendered.push(/* @__PURE__ */ jsx11(MessageResponse, { children: message.content }, `${message.id}-fallback`));
   }
   if (rendered.length === 0 && isLoading) {
-    rendered.push(/* @__PURE__ */ jsx11(AgentChatActivityRow, { label: "Thinking" }, `${message.id}-active-activity`));
+    rendered.push(/* @__PURE__ */ jsx11(AgentChatActivityRow, { renderActivityIcon: toolSlots?.renderActivityIcon, label: "Thinking" }, `${message.id}-active-activity`));
   }
   return /* @__PURE__ */ jsx11("div", { className: "space-y-3", children: rendered });
 }