From 43f50ba7efb7e5ecd4d9061db5edd58e48e43147 Mon Sep 17 00:00:00 2001
From: masudahiroto <96814344+masudahiroto@users.noreply.github.com>
Date: Fri, 11 Sep 2026 18:20:48 +0900
Subject: [PATCH] feat: give the Composer slot a file intake, and
 paste-to-attach

The Composer slot only received onOpenFilePicker, which is an action rather
than the ability to take files in, so no path that produces a File without the
OS picker could be wired up from a slot. Add `onAddFiles` next to the existing
flat props, so the change is additive and a type published in 1.18.0 keeps
working.

The built-in composer now attaches files pasted into it. The decision to claim
the paste is made synchronously from the clipboard types, so text is never
lost, and files are handed over unfiltered so a rejection surfaces its reason.

Files arriving with an empty name (screenshots in some browsers) get one filled
in from their MIME type; a name the browser did provide is left alone.

`fileUploadEnabled` keeps meaning "file upload is configured" rather than
folding in "no run in flight", which would make the attach button disappear for
the length of every run instead of greying out. The composer slot already
receives `loading`, so a composer that wants both facts can combine them.

AILAB-370

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
---
 .../example/src/pages/CustomSlotsDemoPage.tsx |  12 ++
 apps/example/src/pages/MultimodalPage.tsx     |   7 +-
 apps/example/test/file-paste.e2e.test.ts      | 105 +++++++++++++++++
 .../components/UseAIChatPanel.paste.test.tsx  | 107 ++++++++++++++++++
 .../client/src/components/UseAIChatPanel.tsx  |   2 +
 .../src/components/UseAIChatSlots.test.tsx    |  41 ++++++-
 .../components/chatSlots/DefaultComposer.tsx  |  10 ++
 .../client/src/components/chatSlots/types.ts  |  13 +++
 .../client/src/hooks/useFileUpload.test.tsx   |  33 ++++++
 packages/client/src/hooks/useFileUpload.tsx   |  26 ++++-
 10 files changed, 351 insertions(+), 5 deletions(-)
 create mode 100644 apps/example/test/file-paste.e2e.test.ts
 create mode 100644 packages/client/src/components/UseAIChatPanel.paste.test.tsx

diff --git a/apps/example/src/pages/CustomSlotsDemoPage.tsx b/apps/example/src/pages/CustomSlotsDemoPage.tsx
index 7ff8a0adc..5c10d0c17 100644
--- a/apps/example/src/pages/CustomSlotsDemoPage.tsx
+++ b/apps/example/src/pages/CustomSlotsDemoPage.tsx
@@ -238,11 +238,22 @@ function OrbitComposer({
   onAbort,
   onOpenFilePicker,
   onRemoveAttachment,
+  onAddFiles,
 }: ChatComposerSlotProps) {
   // ToolApproval is rendered independently by use-ai. Hide the composer while
   // an approval is pending to match the built-in interaction pattern.
   if (pendingApprovals.length > 0) return null;
 
+  // Files pasted into a replacement composer go through the chat's own file
+  // handling, so they end up on the message the panel sends.
+  const handlePaste = (event: React.ClipboardEvent) => {
+    if (!fileUploadEnabled || event.clipboardData.files.length === 0) return;
+    if (!event.clipboardData.types.includes('text/plain')) {
+      event.preventDefault();
+    }
+    onAddFiles(event.clipboardData.files);
+  };
+
   return (
     <footer className="orbit-composer-wrap" data-testid="orbit-composer">
       {attachments.length > 0 && (
@@ -260,6 +271,7 @@ function OrbitComposer({
           aria-label="Message Orbit"
           value={input}
           onChange={(event) => onInputChange(event.target.value)}
+          onPaste={handlePaste}
           onKeyDown={(event) => {
             if (event.key === 'Enter' && !event.shiftKey) {
               event.preventDefault();
diff --git a/apps/example/src/pages/MultimodalPage.tsx b/apps/example/src/pages/MultimodalPage.tsx
index a4d1c0f25..5f2f69b0c 100644
--- a/apps/example/src/pages/MultimodalPage.tsx
+++ b/apps/example/src/pages/MultimodalPage.tsx
@@ -12,6 +12,8 @@ export default function MultimodalPage() {
         <h2 style={docStyles.subtitle}>About</h2>
         <p style={docStyles.text}>
           Enable file uploads in chat with the <code style={docStyles.code}>fileUploadConfig</code> prop.
+          Files get in through the attach button, a drop anywhere on the chat panel, or a
+          paste into the input, all subject to the same limits.
           By default, files are base64-encoded and embedded in the message using{' '}
           <code style={docStyles.code}>EmbedFileUploadBackend</code>. Configure{' '}
           <code style={docStyles.code}>maxFileSize</code>,{' '}
@@ -89,8 +91,9 @@ export default function MultimodalPage() {
       <div style={docStyles.demoCard}>
         <h2 style={docStyles.subtitle}>Interactive Demo</h2>
         <p style={docStyles.text}>
-          This chat has file uploads enabled. Click the paperclip icon to attach an image
-          or PDF, then send it to the AI.
+          This chat has file uploads enabled. Attach an image or PDF with the paperclip
+          icon, drop one onto the chat, or copy a screenshot and paste it into the input,
+          then send it to the AI.
         </p>
         <UseAIProvider
           serverUrl="ws://localhost:8081"
diff --git a/apps/example/test/file-paste.e2e.test.ts b/apps/example/test/file-paste.e2e.test.ts
new file mode 100644
index 000000000..82645ca6b
--- /dev/null
+++ b/apps/example/test/file-paste.e2e.test.ts
@@ -0,0 +1,105 @@
+import { test, expect, type Page } from '@playwright/test';
+
+/**
+ * Pasting files into the built-in composer.
+ *
+ * A real browser is the only place the paste path can be exercised end to end:
+ * the clipboard payload, `preventDefault` on the paste, and the image preview
+ * (which goes through FileReader) all come from the browser.
+ */
+test.describe('Paste to attach', () => {
+  test.setTimeout(60000);
+
+  /**
+   * Pastes a clipboard entry into the composer and reports whether the
+   * composer took the paste over.
+   */
+  const pasteIntoComposer = (
+    page: Page,
+    clipboard: { fileName?: string; mimeType?: string; text?: string }
+  ) =>
+    page.evaluate(({ fileName, mimeType, text }) => {
+      const transfer = new DataTransfer();
+
+      if (mimeType) {
+        // A 1x1 transparent PNG, the smallest stand-in for a screenshot.
+        const png = Uint8Array.from(atob(
+          'iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNkYPhfDwAChwGA60e6kgAAAABJRU5ErkJggg=='
+        ), (char) => char.charCodeAt(0));
+        transfer.items.add(new File([png], fileName ?? '', { type: mimeType }));
+      }
+      if (text !== undefined) {
+        transfer.setData('text/plain', text);
+      }
+
+      const input = document.querySelector('[data-testid="chat-input"]');
+      if (!input) throw new Error('composer input not found');
+
+      const event = new ClipboardEvent('paste', {
+        clipboardData: transfer,
+        bubbles: true,
+        cancelable: true,
+      });
+      input.dispatchEvent(event);
+
+      return event.defaultPrevented;
+    }, clipboard);
+
+  test.beforeEach(async ({ page }) => {
+    // The example server needs a key to start, so the page cannot connect without one.
+    if (!process.env.ANTHROPIC_API_KEY) {
+      test.skip();
+    }
+
+    await page.goto('/');
+    await page.evaluate(() => localStorage.clear());
+    await page.reload();
+
+    await page.getByRole('button', { name: 'File Transformers' }).click();
+    await expect(page.getByRole('heading', { level: 2, name: 'File Transformers' })).toBeVisible();
+    await expect(page.getByTestId('chat-input')).toBeVisible({ timeout: 10000 });
+  });
+
+  test('attaches a pasted screenshot', async ({ page }) => {
+    const prevented = await pasteIntoComposer(page, { fileName: 'screenshot.png', mimeType: 'image/png' });
+
+    // Nothing to insert, so the composer takes the paste over.
+    expect(prevented).toBe(true);
+    await expect(page.getByTestId('file-chip')).toContainText('screenshot.png', { timeout: 5000 });
+
+    // The paste goes through the same pipeline as the picker, transformer included.
+    await expect(page.getByTestId('file-chip-processing')).toBeVisible({ timeout: 2000 });
+    await expect(page.getByTestId('file-chip-processing')).toBeHidden({ timeout: 10000 });
+  });
+
+  test('keeps the text insertion when the clipboard carries text too', async ({ page }) => {
+    const prevented = await pasteIntoComposer(page, {
+      fileName: 'cell.png',
+      mimeType: 'image/png',
+      text: 'Revenue: 1200',
+    });
+
+    expect(prevented).toBe(false);
+    await expect(page.getByTestId('file-chip')).toBeVisible({ timeout: 5000 });
+  });
+
+  test('labels a screenshot the browser gave no name', async ({ page }) => {
+    await pasteIntoComposer(page, { mimeType: 'image/png' });
+
+    await expect(page.getByTestId('file-chip')).toContainText('pasted-image.png', { timeout: 5000 });
+  });
+
+  test('shows why an unaccepted file was rejected', async ({ page }) => {
+    await pasteIntoComposer(page, { fileName: 'archive.zip', mimeType: 'application/zip' });
+
+    await expect(page.getByTestId('file-error')).toContainText('application/zip', { timeout: 5000 });
+    await expect(page.getByTestId('file-chip')).toHaveCount(0);
+  });
+
+  test('does nothing when the clipboard carries only text', async ({ page }) => {
+    const prevented = await pasteIntoComposer(page, { text: 'just text' });
+
+    expect(prevented).toBe(false);
+    await expect(page.getByTestId('file-chip')).toHaveCount(0);
+  });
+});
diff --git a/packages/client/src/components/UseAIChatPanel.paste.test.tsx b/packages/client/src/components/UseAIChatPanel.paste.test.tsx
new file mode 100644
index 000000000..0a2073608
--- /dev/null
+++ b/packages/client/src/components/UseAIChatPanel.paste.test.tsx
@@ -0,0 +1,107 @@
+import React from 'react';
+import { describe, test, expect, mock } from 'bun:test';
+import { fireEvent, render, waitFor } from '@testing-library/react';
+import { UseAIChatPanel } from './UseAIChatPanel';
+import type { FileUploadConfig } from '../fileUpload/types';
+
+// Images take the FileReader path for preview generation, which the test
+// environment does not provide, so these use PDFs. Pasting an image is covered
+// by the e2e test in apps/example.
+const config: FileUploadConfig = {
+  acceptedTypes: ['image/*', 'application/pdf'],
+};
+
+function renderPanel({ fileUpload = true }: { fileUpload?: boolean } = {}) {
+  return render(
+    <UseAIChatPanel
+      onSendMessage={mock(() => {})}
+      messages={[]}
+      loading={false}
+      connected
+      fileUploadConfig={fileUpload ? config : undefined}
+    />
+  );
+}
+
+/** A clipboard carrying `files`, and whatever `types` the source advertised. */
+function clipboard(types: string[], files: File[]) {
+  return {
+    clipboardData: {
+      files,
+      types,
+      getData: () => '',
+    },
+  };
+}
+
+const pdf = () => new File(['%PDF-1.4'], 'report.pdf', { type: 'application/pdf' });
+
+describe('pasting files into the built-in composer', () => {
+  test('attaches the pasted file', async () => {
+    const { getByTestId } = renderPanel();
+
+    fireEvent.paste(getByTestId('chat-input'), clipboard(['Files'], [pdf()]));
+
+    await waitFor(() => expect(getByTestId('file-chip')).toHaveTextContent('report.pdf'));
+  });
+
+  test('takes the paste over when the clipboard carries no text', async () => {
+    const { getByTestId } = renderPanel();
+
+    const notPrevented = fireEvent.paste(getByTestId('chat-input'), clipboard(['Files'], [pdf()]));
+
+    expect(notPrevented).toBe(false);
+    await waitFor(() => expect(getByTestId('file-chip')).toBeInTheDocument());
+  });
+
+  test('leaves the text insertion alone when the clipboard also carries text', async () => {
+    const { getByTestId } = renderPanel();
+
+    const notPrevented = fireEvent.paste(
+      getByTestId('chat-input'),
+      clipboard(['text/plain', 'text/html', 'Files'], [pdf()])
+    );
+
+    // The browser still inserts the text; the file is attached alongside it.
+    expect(notPrevented).toBe(true);
+    await waitFor(() => expect(getByTestId('file-chip')).toBeInTheDocument());
+  });
+
+  test('ignores a paste that carries no file', () => {
+    const { getByTestId, queryByTestId } = renderPanel();
+
+    const notPrevented = fireEvent.paste(getByTestId('chat-input'), clipboard(['text/plain'], []));
+
+    expect(notPrevented).toBe(true);
+    expect(queryByTestId('file-chip')).toBeNull();
+  });
+
+  test('reports why a file was rejected instead of doing nothing', async () => {
+    const { getByTestId, queryByTestId } = renderPanel();
+
+    const zip = new File(['zip'], 'archive.zip', { type: 'application/zip' });
+    fireEvent.paste(getByTestId('chat-input'), clipboard(['Files'], [zip]));
+
+    await waitFor(() => expect(getByTestId('file-error')).toHaveTextContent('application/zip'));
+    expect(queryByTestId('file-chip')).toBeNull();
+  });
+
+  test('labels a file the browser gave no name', async () => {
+    const { getByTestId } = renderPanel();
+
+    const unnamed = new File(['%PDF-1.4'], '', { type: 'application/pdf' });
+    fireEvent.paste(getByTestId('chat-input'), clipboard(['Files'], [unnamed]));
+
+    await waitFor(() => expect(getByTestId('file-chip')).toHaveTextContent('pasted-file.pdf'));
+  });
+
+  test('does nothing when file upload is not configured', () => {
+    const { getByTestId, queryByTestId } = renderPanel({ fileUpload: false });
+
+    const notPrevented = fireEvent.paste(getByTestId('chat-input'), clipboard(['Files'], [pdf()]));
+
+    expect(notPrevented).toBe(true);
+    expect(queryByTestId('file-chip')).toBeNull();
+  });
+});
+
diff --git a/packages/client/src/components/UseAIChatPanel.tsx b/packages/client/src/components/UseAIChatPanel.tsx
index b20b3cd84..27c0cfa92 100644
--- a/packages/client/src/components/UseAIChatPanel.tsx
+++ b/packages/client/src/components/UseAIChatPanel.tsx
@@ -238,6 +238,7 @@ export function UseAIChatPanel({
     acceptedTypes,
     processingState: fileProcessingState,
     fileInputRef,
+    handleFiles,
     removeAttachment,
     clearAttachments,
     openFilePicker,
@@ -466,6 +467,7 @@ export function UseAIChatPanel({
           onAbort,
           onOpenFilePicker: openFilePicker,
           onRemoveAttachment: removeAttachment,
+          onAddFiles: handleFiles,
           submitMode,
           attachmentProcessing: fileProcessingState,
           disclaimerVisible: showInputDisclaimer,
diff --git a/packages/client/src/components/UseAIChatSlots.test.tsx b/packages/client/src/components/UseAIChatSlots.test.tsx
index e3bf6266b..947cf7bfc 100644
--- a/packages/client/src/components/UseAIChatSlots.test.tsx
+++ b/packages/client/src/components/UseAIChatSlots.test.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { describe, test, expect, mock } from 'bun:test';
-import { fireEvent, render } from '@testing-library/react';
+import { fireEvent, render, waitFor } from '@testing-library/react';
 import { UseAIChatPanel } from './UseAIChatPanel';
 import type {
   ChatComposerSlotProps,
@@ -236,4 +236,43 @@ describe('UseAIChat component slots', () => {
 
     expect(onSendMessage).toHaveBeenCalledWith('Hello', undefined);
   });
+
+  test('sends files a custom Composer took in itself', async () => {
+    const onSendMessage = mock(() => {});
+    // A composer taking files in through its own UI: the file never goes
+    // through the panel's picker or drop zone.
+    const Composer = ({ canSend, onSend, attachments, onAddFiles }: ChatComposerSlotProps) => (
+      <div>
+        <button
+          data-testid="custom-attach"
+          onClick={() => onAddFiles([new File(['%PDF-1.4'], 'report.pdf', { type: 'application/pdf' })])}
+        >
+          Attach
+        </button>
+        <span data-testid="custom-attachments">
+          {attachments.map((attachment) => attachment.file.name).join(',')}
+        </span>
+        <button data-testid="custom-send" disabled={!canSend} onClick={onSend}>Send</button>
+      </div>
+    );
+
+    const { getByTestId } = renderPanel(
+      { Composer },
+      {
+        messages: [],
+        loading: false,
+        pendingApprovals: [],
+        onSendMessage,
+        fileUploadConfig: { acceptedTypes: ['application/pdf'] },
+      }
+    );
+
+    fireEvent.click(getByTestId('custom-attach'));
+    await waitFor(() => expect(getByTestId('custom-attachments')).toHaveTextContent('report.pdf'));
+
+    fireEvent.click(getByTestId('custom-send'));
+
+    const [, attachments] = onSendMessage.mock.calls[0] as unknown as [string, unknown[]];
+    expect(attachments).toHaveLength(1);
+  });
 });
diff --git a/packages/client/src/components/chatSlots/DefaultComposer.tsx b/packages/client/src/components/chatSlots/DefaultComposer.tsx
index 1f0ea00fd..30f1a0d90 100644
--- a/packages/client/src/components/chatSlots/DefaultComposer.tsx
+++ b/packages/client/src/components/chatSlots/DefaultComposer.tsx
@@ -24,6 +24,7 @@ export function DefaultComposer({
   onAbort,
   onOpenFilePicker,
   onRemoveAttachment,
+  onAddFiles,
   submitMode,
   attachmentProcessing,
   disclaimerVisible,
@@ -47,6 +48,14 @@ export function DefaultComposer({
     onInputChange(e.target.value);
   };
 
+  const handlePaste = (e: React.ClipboardEvent) => {
+    if (!fileUploadEnabled || e.clipboardData.files.length === 0) return;
+    if (!e.clipboardData.types.includes('text/plain')) {
+      e.preventDefault();
+    }
+    onAddFiles(e.clipboardData.files);
+  };
+
   const handleKeyDown = (e: React.KeyboardEvent) => {
     // Slash command navigation claims the key first.
     if (slashCommands.onKeyDown(e)) return;
@@ -126,6 +135,7 @@ export function DefaultComposer({
           value={input}
           onChange={handleInputChange}
           onKeyDown={handleKeyDown}
+          onPaste={handlePaste}
           placeholder={placeholder}
           disabled={!connected || loading || pendingApprovals.length > 0}
           rows={1}
diff --git a/packages/client/src/components/chatSlots/types.ts b/packages/client/src/components/chatSlots/types.ts
index 2b14647c1..988851fc4 100644
--- a/packages/client/src/components/chatSlots/types.ts
+++ b/packages/client/src/components/chatSlots/types.ts
@@ -133,6 +133,19 @@ export interface ChatComposerSlotProps extends ChatSlotProps {
   onAbort?: () => void;
   onOpenFilePicker: () => void;
   onRemoveAttachment: (attachmentId: string) => void;
+  /**
+   * Takes files in through this chat's own file handling, so they end up on
+   * the message `onSend` sends. Use it for a way in the panel does not already
+   * provide: a paste, a composer-sized drop area, a screenshot button. Size,
+   * type and count validation, previews and transformers all run on the way
+   * in, and a rejection surfaces through `fileError`, so files can be handed
+   * over unfiltered.
+   *
+   * Files are taken in asynchronously, which is too late to decide whether to
+   * call `preventDefault()` on a paste or drop event. Decide that from the
+   * event itself.
+   */
+  onAddFiles: (files: FileList | File[]) => void;
   /** How the Enter key should behave; see `UseAIChatProps.submitMode`. */
   submitMode: SubmitMode;
   /** Per-attachment transformation progress (e.g. OCR), keyed by attachment id. */
diff --git a/packages/client/src/hooks/useFileUpload.test.tsx b/packages/client/src/hooks/useFileUpload.test.tsx
index e4a59fef1..3f41410ee 100644
--- a/packages/client/src/hooks/useFileUpload.test.tsx
+++ b/packages/client/src/hooks/useFileUpload.test.tsx
@@ -250,6 +250,39 @@ describe('useFileUpload', () => {
       expect(result.current.fileError).toBeNull();
     });
 
+    it('accepts nothing while file operations are disabled', async () => {
+      const { result } = renderHook(() =>
+        useFileUpload({ getCurrentChat: mockGetCurrentChat, config, disabled: true })
+      );
+
+      await act(async () => {
+        await result.current.handleFiles([new File(['test'], 'test.pdf', { type: 'application/pdf' })]);
+      });
+
+      expect(result.current.attachments).toHaveLength(0);
+    });
+
+    it('names a file the browser gave no name', async () => {
+      const { result } = renderHook(() => useFileUpload({ getCurrentChat: mockGetCurrentChat, config }));
+
+      await act(async () => {
+        await result.current.handleFiles([new File(['test'], '', { type: 'application/pdf' })]);
+      });
+
+      expect(result.current.attachments[0].file.name).toBe('pasted-file.pdf');
+    });
+
+    it('keeps the name the browser did provide', async () => {
+      const { result } = renderHook(() => useFileUpload({ getCurrentChat: mockGetCurrentChat, config }));
+
+      const named = new File(['test'], 'quarterly-report.pdf', { type: 'application/pdf' });
+      await act(async () => {
+        await result.current.handleFiles([named]);
+      });
+
+      expect(result.current.attachments[0].file).toBe(named);
+    });
+
     it('removes attachment by id', async () => {
       const { result } = renderHook(() => useFileUpload({ getCurrentChat: mockGetCurrentChat, config }));
 
diff --git a/packages/client/src/hooks/useFileUpload.tsx b/packages/client/src/hooks/useFileUpload.tsx
index f37d8c478..38c81fc69 100644
--- a/packages/client/src/hooks/useFileUpload.tsx
+++ b/packages/client/src/hooks/useFileUpload.tsx
@@ -39,6 +39,23 @@ async function generateImagePreview(file: File): Promise<string | undefined> {
   });
 }
 
+/**
+ * Gives a file a name when the browser did not provide one.
+ *
+ * Pasted screenshots arrive with an empty `name` in some browsers, which would
+ * render as a blank chip label. The name is only filled in when it is missing,
+ * so a real name coming from the OS is never replaced.
+ */
+function withFallbackName(file: File): File {
+  if (file.name) return file;
+
+  const subtype = file.type.split('/')[1] ?? '';
+  const extension = subtype ? `.${subtype}` : '';
+  const base = file.type.startsWith('image/') ? 'pasted-image' : 'pasted-file';
+
+  return new File([file], `${base}${extension}`, { type: file.type, lastModified: file.lastModified });
+}
+
 /**
  * Checks if a MIME type matches accepted types.
  */
@@ -228,9 +245,14 @@ export function useFileUpload({
   /**
    * Validates and adds files to attachments.
    * If a transformer matches the file type, transformation starts immediately.
+   *
+   * Rejected files are reported through `fileError`, so files can be passed in
+   * unfiltered.
    */
   const handleFiles = useCallback(async (files: FileList | File[]) => {
-    const fileArray = Array.from(files);
+    if (!enabled || disabled) return;
+
+    const fileArray = Array.from(files).map(withFallbackName);
 
     // Running attachment count to enforce the per-message limit (existing + accepted in this batch).
     // Only successfully added files count toward the limit.
@@ -283,7 +305,7 @@ export function useFileUpload({
         runTransformer(attachmentId, file, transformerKey);
       }
     }
-  }, [maxFileSize, acceptedTypes, maxAttachments, strings, transformers, runTransformer]);
+  }, [enabled, disabled, maxFileSize, acceptedTypes, maxAttachments, strings, transformers, runTransformer]);
 
   /**
    * Removes a file attachment by ID.