experimental-a2 0.18.1 → 0.19.0

package/examples/playground/app/a0/chat.tsx

@@ -1,9 +1,22 @@
 'use client'
-import type { ReactNode } from 'react'
-import { useEffect, useRef, useState } from 'react'
+import type { DragEvent, ReactNode, SetStateAction } from 'react'
+import { Fragment, useEffect, useLayoutEffect, useRef, useState } from 'react'
 import { useRouter, useSearchParams } from 'next/navigation'
-import { Asterisk, LoaderCircle, Zap } from 'lucide-react'
+import {
+  Asterisk,
+  ChevronDown,
+  LoaderCircle,
+  Paperclip,
+  Pause,
+  Play,
+  Square,
+  X,
+  Zap,
+} from 'lucide-react'
+import type { FileUIPart } from 'ai'
 import { inputs } from 'experimental-a2/ai'
+import { type Attachments, attachedLink, useAttachments } from './attachments'
+import { ContextMenu } from './context-menu'
 import { queryString } from './flags'
 import {
   type AppMessage,
@@ -25,12 +38,17 @@ const suggestions = [
   'A tip calculator that splits the bill',
 ]
 
-/** The coding agent's conversation: its words, and one line per tool step. */
+/**
+ * The coding agent's conversation: its words, and one line per tool step.
+ * Files dropped anywhere on it attach to the next message.
+ */
 export function Chat({
+  appId,
   harness,
   onPrompt,
   autoFocus,
 }: {
+  appId: string
   harness: Harness
   onPrompt: (prompt: string) => void
   autoFocus: boolean
@@ -53,18 +71,69 @@ export function Chat({
   const [chosen, setChosen] = useState<ModelChoice | null>(null)
   const settings = chosen ?? state.modelChoice
 
+  const fail = (cause: unknown): void =>
+    setError(cause instanceof Error ? cause.message : String(cause))
+
+  const [draft, setDraft] = useState('')
+  const attachments = useAttachments({
+    appId,
+    onLink: (line) =>
+      setDraft((current) =>
+        !current || current.endsWith('\n')
+          ? `${current}${line}`
+          : `${current}\n${line}`,
+      ),
+    onError: fail,
+  })
+  const [dragging, setDragging] = useState(false)
+
   const last = state.messages.at(-1)
+  const turn = state.active
+  const paused = state.status === 'paused'
   // A send is optimistic, and so is the turn it starts, so this holds from
   // the moment it's pushed rather than once the server accepts it.
   const working =
-    state.starting || state.status === 'generating' || state.active !== null
+    state.starting || state.status === 'generating' || turn !== null
   const waiting =
     working &&
+    !paused &&
     (last?.role !== 'assistant' || !last.parts.some((part) => isVisible(part)))
 
-  const send = async (text: string): Promise<void> => {
+  // The view follows the conversation's end until the reader scrolls up from
+  // it; a send follows it again.
+  const view = useRef<HTMLDivElement>(null)
+  const list = useRef<HTMLOListElement>(null)
+  const following = useRef(true)
+  useEffect(() => {
+    const scroller = view.current
+    const transcript = list.current
+    if (!scroller || !transcript) return
+    const observer = new ResizeObserver(() => {
+      if (following.current) toEnd(scroller, transcript)
+    })
+    observer.observe(scroller)
+    observer.observe(transcript)
+    return () => observer.disconnect()
+  }, [])
+
+  const send = async ({
+    text,
+    files = [],
+    mode,
+  }: {
+    text: string
+    files?: FileUIPart[]
+    mode: SendMode
+  }): Promise<void> => {
     setError(null)
-    onPrompt(text)
+    onPrompt(text || files.map((file) => file.filename ?? 'image').join(', '))
+    following.current = true
+    if (view.current && list.current) toEnd(view.current, list.current)
+    const message: AppMessage = {
+      id: crypto.randomUUID(),
+      role: 'user',
+      parts: [...files, ...(text ? [{ type: 'text' as const, text }] : [])],
+    }
     try {
       await push(
         ...(chosen === null
@@ -75,30 +144,61 @@ export function Chat({
                 payload: { ...chosen, model: chosen.model.trim() },
               },
             ]),
-        ...inputs.message({
-          id: crypto.randomUUID(),
-          role: 'user',
-          parts: [{ type: 'text', text }],
-        }),
+        ...(mode === 'steer' && turn
+          ? inputs.steer({ turnId: turn.turnId, message })
+          : inputs.message(message)),
       )
       setChosen(null)
     } catch (cause) {
-      setError(cause instanceof Error ? cause.message : String(cause))
+      fail(cause)
       throw cause
     }
   }
-  const stop = (): void => {
-    if (!state.active) return
-    push(...inputs.stop({ turnId: state.active.turnId })).catch((cause) =>
-      setError(cause instanceof Error ? cause.message : String(cause)),
-    )
-  }
 
   return (
-    <>
-      {/* Reversed, so it opens at the newest message and stays there. */}
-      <div className="a0-transcript-scroll">
-        <ol className="a0-transcript" aria-label="Conversation">
+    // Lays nothing out: the chat's column holds its parts, and the overlay
+    // covers that column.
+    <div
+      className="a0-chat-drop"
+      onDragEnter={(event) => {
+        if (!carriesFiles(event)) return
+        event.preventDefault()
+        setDragging(true)
+      }}
+      onDragOver={(event) => {
+        if (!carriesFiles(event)) return
+        event.preventDefault()
+        event.dataTransfer.dropEffect = 'copy'
+      }}
+      onDragLeave={(event) => {
+        // Where the files went: null once they leave the window.
+        const to = event.relatedTarget
+        if (!(to instanceof Node && event.currentTarget.contains(to)))
+          setDragging(false)
+      }}
+      onDrop={(event) => {
+        if (!carriesFiles(event)) return
+        event.preventDefault()
+        setDragging(false)
+        attachments.add(Array.from(event.dataTransfer.files))
+      }}
+    >
+      {dragging && (
+        <div className="a0-drop" aria-hidden>
+          <Paperclip size={14} aria-hidden />
+          Drop to attach
+        </div>
+      )}
+      {/* Reversed, so it opens at the newest message before any script runs. */}
+      <div
+        ref={view}
+        className="a0-transcript-scroll"
+        onScroll={() => {
+          if (view.current && list.current)
+            following.current = below(view.current, list.current) < FOLLOW_GAP
+        }}
+      >
+        <ol ref={list} className="a0-transcript" aria-label="Conversation">
           {!state.messages.length && (
             <li className="a0-suggestions">
               {suggestions.map((suggestion) => (
@@ -107,7 +207,11 @@ export function Chat({
                   type="button"
                   className="a0-suggestion"
                   disabled={!settings.model.trim()}
-                  onClick={() => void send(suggestion).catch(() => {})}
+                  onClick={() =>
+                    void send({ text: suggestion, mode: 'queue' }).catch(
+                      () => {},
+                    )
+                  }
                 >
                   <Asterisk size={12} aria-hidden />
                   {suggestion}
@@ -115,21 +219,29 @@ export function Chat({
               ))}
             </li>
           )}
-          {state.messages.flatMap((message) =>
-            message.parts.map((part, index) => (
+          {state.messages.flatMap((message) => [
+            <MessageFiles key={`${message.id}:files`} message={message} />,
+            ...message.parts.map((part, index) => (
               <MessagePart
                 key={`${message.id}:${index}`}
                 message={message}
                 part={part}
+                paused={paused}
               />
             )),
-          )}
+          ])}
           {waiting && (
             <li className="a0-step">
               <LoaderCircle size={12} className="a0-spin" aria-hidden />
               Thinking
             </li>
           )}
+          {paused && (
+            <li className="a0-step">
+              <Pause size={12} aria-hidden />
+              Paused
+            </li>
+          )}
           {state.error && (
             <li role="alert" className="a0-error">
               {state.error}
@@ -142,37 +254,263 @@ export function Chat({
           {error}
         </p>
       )}
+      {!!state.inbox.items.length && (
+        <ol className="a0-queue" aria-label="Queued messages">
+          {state.inbox.items.map((item) => (
+            <li key={item.id}>
+              <span title={summaryOf(item.message)}>
+                {summaryOf(item.message)}
+              </span>
+              {turn && (
+                <button
+                  type="button"
+                  className="a0-ghost"
+                  aria-label="Steer with it now"
+                  title="Steer with it now, at the agent's next step"
+                  onClick={() =>
+                    void push(
+                      ...inputs.queue.sendNow({
+                        inputId: item.id,
+                        turnId: turn.turnId,
+                      }),
+                    ).catch(fail)
+                  }
+                >
+                  Steer
+                </button>
+              )}
+              <button
+                type="button"
+                className="a0-icon-button"
+                aria-label="Remove"
+                title="Remove"
+                onClick={() =>
+                  void push(...inputs.queue.remove({ inputId: item.id })).catch(
+                    fail,
+                  )
+                }
+              >
+                <X size={12} aria-hidden />
+              </button>
+            </li>
+          ))}
+        </ol>
+      )}
       <Composer
+        text={draft}
+        onText={setDraft}
+        attachments={attachments}
         onSend={send}
-        working={working}
-        // A turn can be stopped once it's accepted and has an id.
-        onStop={state.active ? stop : null}
-        queued={state.inbox.items.length}
+        // A turn can be steered or queued behind, and stopped, once it's
+        // accepted and has an id.
+        steerable={turn !== null}
+        controls={
+          (working || state.inbox.paused) && (
+            <Player
+              paused={state.inbox.paused}
+              onPause={() =>
+                void push(...inputs.pause({ when: 'now' })).catch(fail)
+              }
+              onResume={() => void push(...inputs.resume()).catch(fail)}
+              // A player's stop also ends its pause, so the next message
+              // goes out instead of waiting for Play.
+              onStop={
+                turn
+                  ? () =>
+                      void push(
+                        ...inputs.stop({ turnId: turn.turnId }),
+                        ...(state.inbox.paused ? inputs.resume() : []),
+                      ).catch(fail)
+                  : null
+              }
+            />
+          )
+        }
         settings={settings}
         onSettings={setChosen}
         harness={harness}
         onHarness={state.messages.length ? null : pickHarness}
         autoFocus={autoFocus}
       />
-    </>
+    </div>
+  )
+}
+
+const carriesFiles = (event: DragEvent): boolean =>
+  event.dataTransfer.types.includes('Files')
+
+/** How a message goes out during a turn: into it at its next step, or after it. */
+type SendMode = 'steer' | 'queue'
+
+// Closer than this to the end, the view keeps following it.
+const FOLLOW_GAP = 24
+
+/** How far the transcript's end is below the bottom of its view. */
+const below = (view: HTMLElement, list: HTMLElement): number =>
+  list.getBoundingClientRect().bottom - view.getBoundingClientRect().bottom
+
+const toEnd = (view: HTMLElement, list: HTMLElement): void => {
+  view.scrollTop += below(view, list)
+}
+
+const textOf = (message: AppMessage): string =>
+  message.parts
+    .flatMap((part) => (part.type === 'text' ? [part.text] : []))
+    .join('\n')
+
+const filesOf = (message: AppMessage): FileUIPart[] =>
+  message.parts.filter((part): part is FileUIPart => part.type === 'file')
+
+/** A message in one line: its text, or the files it sends. */
+const summaryOf = (message: AppMessage): string =>
+  textOf(message) ||
+  filesOf(message)
+    .map((file) => file.filename ?? 'image')
+    .join(', ')
+
+/** A message's files: images as thumbnails, any other file by its name. */
+function MessageFiles({ message }: { message: AppMessage }): ReactNode {
+  const files = filesOf(message)
+  if (!files.length) return null
+  return (
+    <li className="a0-files" data-role={message.role}>
+      {files.map((file, index) => (
+        <a
+          key={index}
+          href={file.url}
+          target="_blank"
+          rel="noreferrer"
+          title={file.filename}
+        >
+          {file.mediaType.startsWith('image/') ? (
+            <img src={file.url} alt={file.filename ?? 'Image'} />
+          ) : (
+            <span className="a0-file">
+              <Paperclip size={12} aria-hidden />
+              {file.filename ?? 'File'}
+            </span>
+          )}
+        </a>
+      ))}
+    </li>
   )
 }
 
+/** A user's text, where each link the composer added shows as its file. */
+function Linked({ text }: { text: string }): ReactNode {
+  return text.split('\n').map((line, index) => {
+    const link = attachedLink(line)
+    return (
+      <Fragment key={index}>
+        {index > 0 && '\n'}
+        {link ? (
+          <a
+            className="a0-file"
+            href={link.url}
+            target="_blank"
+            rel="noreferrer"
+          >
+            <Paperclip size={12} aria-hidden />
+            {link.name}
+          </a>
+        ) : (
+          line
+        )}
+      </Fragment>
+    )
+  })
+}
+
+/** An image's thumbnail from the file itself, while and after it uploads. */
+function Thumbnail({ file }: { file: File }): ReactNode {
+  const [src, setSrc] = useState<string | null>(null)
+  useEffect(() => {
+    const url = URL.createObjectURL(file)
+    setSrc(url)
+    return () => URL.revokeObjectURL(url)
+  }, [file])
+  return src && <img src={src} alt="" />
+}
+
 const isVisible = (part: Part): boolean =>
   ((part.type === 'text' || part.type === 'reasoning') && !!part.text.trim()) ||
   part.type.startsWith('tool-')
 
+/**
+ * What a call writes that its one line can't show: a file's text, an edit, or
+ * a command over several lines. It streams in as the model writes the call.
+ */
+function written(name: string, input: unknown): string | undefined {
+  if (typeof input !== 'object' || input === null) return
+  const { content, edits, command } = input as {
+    content?: unknown
+    edits?: unknown
+    command?: unknown
+  }
+  const text =
+    name === 'write' && typeof content === 'string'
+      ? content
+      : name === 'edit'
+        ? editsOf(input, edits).map(edited).join('\n…\n')
+        : name === 'bash' &&
+            typeof command === 'string' &&
+            command.includes('\n')
+          ? command
+          : undefined
+  return text || undefined
+}
+
+/** Pi's edits: a list, one edit, or the edit's own fields on the call. */
+const editsOf = (input: object, edits: unknown): unknown[] =>
+  Array.isArray(edits)
+    ? edits
+    : typeof edits === 'object' && edits !== null
+      ? [edits]
+      : 'oldText' in input || 'newText' in input
+        ? [input]
+        : []
+
+const signed = (text: unknown, sign: string): string[] =>
+  typeof text === 'string'
+    ? text.split('\n').map((line) => `${sign} ${line}`)
+    : []
+
+/** One of Pi's edits as a diff: the text it replaces, then its replacement. */
+function edited(edit: unknown): string {
+  const { oldText, newText } = (edit ?? {}) as {
+    oldText?: unknown
+    newText?: unknown
+  }
+  return [...signed(oldText, '-'), ...signed(newText, '+')].join('\n')
+}
+
+/** A call's written text, kept scrolled to its newest line while it streams. */
+function Written({ text, live }: { text: string; live: boolean }): ReactNode {
+  const pre = useRef<HTMLPreElement>(null)
+  useLayoutEffect(() => {
+    if (live && pre.current) pre.current.scrollTop = pre.current.scrollHeight
+  }, [text, live])
+  return (
+    <pre ref={pre} className="a0-tool-text">
+      {text}
+    </pre>
+  )
+}
+
 function MessagePart({
   message,
   part,
+  paused,
 }: {
   message: AppMessage
   part: Part
+  /** The turn is paused: a call still open waits for Resume. */
+  paused: boolean
 }): ReactNode {
   if (part.type === 'text' && part.text.trim())
     return (
       <li className="a0-text" data-role={message.role}>
-        {part.text}
+        {message.role === 'user' ? <Linked text={part.text} /> : part.text}
       </li>
     )
   if (part.type === 'reasoning' && part.text.trim()) {
@@ -208,18 +546,41 @@ function MessagePart({
     (part.state === 'input-streaming' && writingLabels[name]) ||
     toolLabels[name] ||
     name
-  return (
-    <li className="a0-step" data-tool={name} data-failed={failed || undefined}>
+  const running = !done && !failed && !paused
+  const line = (
+    <>
       {done || failed ? (
         <Asterisk size={12} className="a0-step-done" aria-hidden />
-      ) : (
+      ) : running ? (
         <LoaderCircle size={12} className="a0-spin" aria-hidden />
+      ) : (
+        <Pause size={12} aria-hidden />
       )}
       <span className="a0-step-label">{label}</span>
       {typeof detail === 'string' && <code>{detail}</code>}
       {done && typeof took === 'number' && (
         <span className="a0-step-took">{duration(took)}</span>
       )}
+    </>
+  )
+  const text = written(name, input)
+  if (text === undefined)
+    return (
+      <li
+        className="a0-step"
+        data-tool={name}
+        data-failed={failed || undefined}
+      >
+        {line}
+      </li>
+    )
+  return (
+    <li className="a0-tool" data-tool={name} data-failed={failed || undefined}>
+      {/* Open while the call is written and runs, folded once it's done. */}
+      <details open={running}>
+        <summary className="a0-step">{line}</summary>
+        <Written text={text} live={running} />
+      </details>
     </li>
   )
 }
@@ -234,22 +595,146 @@ const reasoningLabel = (level: ModelChoice['reasoning']): string =>
       ? 'extra high'
       : level
 
-/** The message box: a dotted frame, then the model settings it sends with. */
+/** A turn's controls, as a player's: pause or resume, and stop. */
+function Player({
+  paused,
+  onPause,
+  onResume,
+  onStop,
+}: {
+  paused: boolean
+  onPause: () => void
+  onResume: () => void
+  /** Once the turn is accepted and has an id. */
+  onStop: (() => void) | null
+}): ReactNode {
+  return (
+    <div className="a0-player" role="group" aria-label="Turn">
+      {paused ? (
+        <button
+          type="button"
+          className="a0-icon-button"
+          aria-label="Resume"
+          title="Resume"
+          onClick={onResume}
+        >
+          <Play size={13} fill="currentColor" aria-hidden />
+        </button>
+      ) : (
+        <button
+          type="button"
+          className="a0-icon-button"
+          aria-label="Pause"
+          title="Pause: stop the model and tools now, and keep the turn"
+          onClick={onPause}
+        >
+          <Pause size={13} fill="currentColor" aria-hidden />
+        </button>
+      )}
+      <button
+        type="button"
+        className="a0-icon-button"
+        aria-label="Stop"
+        title="Stop: end the turn"
+        disabled={!onStop}
+        onClick={onStop ?? undefined}
+      >
+        <Square size={11} fill="currentColor" aria-hidden />
+      </button>
+    </div>
+  )
+}
+
+const sendTitles: Record<SendMode, string> = {
+  steer: 'Steer: the agent reads it at its next step, in this turn',
+  queue: 'Queue: it goes out when this turn ends',
+}
+
+/**
+ * The send button during a turn: Steer or Queue, with the chevron choosing
+ * which. Its menu goes with it when the turn ends.
+ */
+function SteerOrQueue({
+  ready,
+  mode,
+  onMode,
+  onClose,
+}: {
+  ready: boolean
+  mode: SendMode
+  onMode: (mode: SendMode) => void
+  /** After a pick or Escape, for focus to go back to the message. */
+  onClose: () => void
+}): ReactNode {
+  const [menu, setMenu] = useState<{ x: number; y: number } | null>(null)
+  const chevron = useRef<HTMLButtonElement>(null)
+  return (
+    <div className="a0-send">
+      <button type="submit" disabled={!ready} title={sendTitles[mode]}>
+        {mode === 'steer' ? 'Steer' : 'Queue'}
+      </button>
+      <button
+        ref={chevron}
+        type="button"
+        className="a0-send-mode"
+        aria-label="Send mode"
+        aria-haspopup="menu"
+        aria-expanded={menu !== null}
+        onClick={(event) => {
+          const box = event.currentTarget.getBoundingClientRect()
+          setMenu((open) => (open ? null : { x: box.right, y: box.top - 4 }))
+        }}
+      >
+        <ChevronDown size={14} aria-hidden />
+      </button>
+      {menu && (
+        <ContextMenu
+          at={menu}
+          corner="bottom-right"
+          trigger={chevron}
+          items={(['steer', 'queue'] as const).map((option) => ({
+            label: option === 'steer' ? 'Steer' : 'Queue',
+            checked: mode === option,
+            onSelect: () => onMode(option),
+          }))}
+          onClose={({ returnFocus }) => {
+            setMenu(null)
+            if (returnFocus) onClose()
+          }}
+        />
+      )}
+    </div>
+  )
+}
+
+/**
+ * The message box: a dotted frame with the files attached so far, then the
+ * model settings it sends with.
+ */
 function Composer({
+  text,
+  onText,
+  attachments,
   onSend,
-  working,
-  onStop,
-  queued,
+  steerable,
+  controls,
   settings,
   onSettings,
   harness,
   onHarness,
   autoFocus,
 }: {
-  onSend: (text: string) => Promise<void>
-  working: boolean
-  onStop: (() => void) | null
-  queued: number
+  text: string
+  onText: (text: SetStateAction<string>) => void
+  attachments: Attachments
+  onSend: (message: {
+    text: string
+    files: FileUIPart[]
+    mode: SendMode
+  }) => Promise<void>
+  /** A turn is active: a message steers it or queues behind it. */
+  steerable: boolean
+  controls: ReactNode
   settings: ModelChoice
   onSettings: (settings: ModelChoice) => void
   harness: Harness
@@ -257,8 +742,9 @@ function Composer({
   onHarness: ((harness: Harness) => void) | null
   autoFocus: boolean
 }): ReactNode {
-  const [text, setText] = useState('')
+  const [mode, setMode] = useState<SendMode>('steer')
   const input = useRef<HTMLTextAreaElement>(null)
+  const picker = useRef<HTMLInputElement>(null)
   // Typing anywhere else starts a message. Focus moves on keydown, so the
   // key itself lands in the box.
   useEffect(() => {
@@ -289,7 +775,13 @@ function Composer({
     textarea.style.height = 'auto'
     textarea.style.height = `${Math.min(textarea.scrollHeight, 208)}px`
   }, [text])
-  const ready = !!text.trim() && !!settings.model.trim()
+  // A file that isn't an image joins the text once it's uploaded, so nothing
+  // goes out while one is still uploading.
+  const uploading = attachments.list.some((item) => !item.part)
+  const ready =
+    (!!text.trim() || attachments.list.length > 0) &&
+    !uploading &&
+    !!settings.model.trim()
   return (
     <form
       className="a0-composer"
@@ -297,19 +789,69 @@ function Composer({
         event.preventDefault()
         const message = text.trim()
         if (!ready) return
-        setText('')
-        await onSend(message).catch(() =>
-          setText((current) => current || message),
-        )
+        const sent = attachments.list
+        onText('')
+        attachments.clear()
+        await onSend({
+          text: message,
+          files: sent.flatMap((item) => (item.part ? [item.part] : [])),
+          mode,
+        }).catch(() => {
+          onText((current) => current || message)
+          attachments.restore(sent)
+        })
       }}
     >
+      {!!attachments.list.length && (
+        <ul className="a0-attachments" aria-label="Attachments">
+          {attachments.list.map((item) => (
+            <li
+              key={item.id}
+              data-kind={item.kind}
+              data-uploading={!item.part || undefined}
+              title={item.file.name}
+            >
+              {item.kind === 'image' ? (
+                <Thumbnail file={item.file} />
+              ) : (
+                <>
+                  <Paperclip size={12} aria-hidden />
+                  <span>{item.file.name}</span>
+                </>
+              )}
+              {!item.part && (
+                <LoaderCircle
+                  size={12}
+                  className="a0-spin"
+                  aria-label="Uploading"
+                />
+              )}
+              <button
+                type="button"
+                className="a0-icon-button"
+                aria-label={`Remove ${item.file.name}`}
+                title="Remove"
+                onClick={() => attachments.remove(item.id)}
+              >
+                <X size={12} aria-hidden />
+              </button>
+            </li>
+          ))}
+        </ul>
+      )}
       <textarea
         ref={input}
         aria-label="Message"
         value={text}
         rows={2}
         autoFocus={autoFocus}
-        onChange={(event) => setText(event.target.value)}
+        onChange={(event) => onText(event.target.value)}
+        onPaste={(event) => {
+          const files = Array.from(event.clipboardData.files)
+          if (!files.length) return
+          event.preventDefault()
+          attachments.add(files)
+        }}
         onKeyDown={(event) => {
           if (
             event.key === 'Enter' &&
@@ -389,20 +931,38 @@ function Composer({
           </button>
         </div>
         <div className="a0-composer-actions">
-          {!!queued && <span className="a0-queued">{queued} queued</span>}
-          {working && (
-            <button
-              type="button"
-              className="a0-ghost"
-              disabled={!onStop}
-              onClick={onStop ?? undefined}
-            >
-              Stop
+          <input
+            ref={picker}
+            type="file"
+            multiple
+            hidden
+            onChange={(event) => {
+              attachments.add(Array.from(event.target.files ?? []))
+              event.target.value = ''
+            }}
+          />
+          <button
+            type="button"
+            className="a0-icon-button"
+            aria-label="Attach files"
+            title="Attach files: images go with the message, other files as links"
+            onClick={() => picker.current?.click()}
+          >
+            <Paperclip size={14} aria-hidden />
+          </button>
+          {controls}
+          {steerable ? (
+            <SteerOrQueue
+              ready={ready}
+              mode={mode}
+              onMode={setMode}
+              onClose={() => input.current?.focus()}
+            />
+          ) : (
+            <button type="submit" disabled={!ready}>
+              Send
             </button>
           )}
-          <button type="submit" disabled={!ready}>
-            Send
-          </button>
         </div>
       </div>
     </form>