feat(ui): handle image paste

[TheodoreSpeaks]

Summary

Allow pasting images into mothership chat

Type of Change

• Bug fix
• New feature
• Breaking change
• Documentation
• Other: ___________

Testing

Validated images can be pasted in both mothership and copilot chats

Checklist

• Code follows project style guidelines
• Self-reviewed my changes
• Tests added/updated and passing
• No new warnings introduced
• I confirm that I have read and agree to the terms outlined in the Contributor License Agreement (CLA)

Screenshots/Videos

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

1 Skipped Deployment

Project	Deployment	Actions	Updated (UTC)
docs	Skipped		Mar 28, 2026 8:49pm

[TheodoreSpeaks]

@cursor review

[cursor]

PR Summary

Medium Risk
Adds a new clipboard-driven path into the existing file upload/attachment flow, which could introduce edge cases around unintended uploads or multiple image handling but is scoped to the chat UI.

Overview
Enables image pasting into the mothership chat textarea by intercepting onPaste, extracting image files from the clipboard, and feeding them into the existing attachment pipeline.

Updates useFileAttachments to publicly return processFiles so pasted (and other programmatically provided) files can be processed using the same upload/preview logic as drag-and-drop and file picker selection.

^{Written by Cursor Bugbot for commit 474c1fd. This will update automatically on new commits. Configure here.}

[TheodoreSpeaks]

@greptile review

[cursor]

✅ Bugbot reviewed your changes and found no new issues!

Comment @cursor review or bugbot run to trigger another review on this PR

[greptile-apps]

Greptile Summary

This PR adds image paste support to the mothership chat input. When a user pastes clipboard content containing image files, the images are extracted, assembled into a synthetic FileList via DataTransfer, and forwarded to the existing processFiles upload pipeline. To enable this, processFiles was also exported from the copilot's useFileAttachments hook (which is shared with the home user-input.tsx via import). A small opportunistic refactor in hybrid.ts tightens the hasExternalApiCredentials helper using optional chaining.

Key changes:

• user-input.tsx: New handlePaste callback intercepts clipboard paste events, filters for image items, and calls filesRef.current.processFiles(dt.files) — only suppressing default behavior when image files are actually present (text-only pastes pass through unaffected).
• use-file-attachments.ts (copilot): processFiles added to the hook's return value so the home user-input.tsx can access it via filesRef.current.
• hybrid.ts: auth !== null && auth.startsWith(BEARER_PREFIX) → auth?.startsWith(BEARER_PREFIX) ?? false — functionally equivalent, cleaner style.

Confidence Score: 5/5

Safe to merge — the paste handler is correctly scoped to image-only payloads and reuses the battle-tested processFiles upload pipeline.

All three files contain straightforward, low-risk changes. The paste logic only intercepts events containing image files (text-only pastes fall through untouched), the DataTransfer/FileList construction is the standard browser pattern, the useCallback with empty deps is correct because filesRef is a stable ref updated each render, and the hybrid.ts change is semantically equivalent. No new error paths, no security concerns, and the processFiles upload path has existing error handling. No P0/P1 issues found.

No files require special attention.

Important Files Changed

Filename	Overview
apps/sim/app/workspace/[workspaceId]/home/components/user-input/user-input.tsx	Adds a handlePaste callback that correctly intercepts image-only pastes, builds a synthetic FileList via DataTransfer, and delegates to the existing processFiles upload pipeline via the stable filesRef pattern.
apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/user-input/hooks/use-file-attachments.ts	Adds processFiles to the hook's return value, making it accessible to consumers (home user-input.tsx) via the filesRef pattern. No logic changes.
apps/sim/lib/auth/hybrid.ts	Minor style refactor: null-check + startsWith replaced with optional chaining + nullish coalescing. Semantically identical, no logic change.

Sequence Diagram

sequenceDiagram
    participant User
    participant Textarea as Textarea (onPaste)
    participant HandlePaste as handlePaste
    participant DataTransfer as DataTransfer API
    participant ProcessFiles as processFiles (useFileAttachments)
    participant S3 as /api/files/upload

    User->>Textarea: Ctrl+V (paste with image)
    Textarea->>HandlePaste: ClipboardEvent
    HandlePaste->>HandlePaste: Filter clipboard items for image/* files
    alt No image files found
        HandlePaste-->>Textarea: return (default paste proceeds)
    else Image files found
        HandlePaste->>HandlePaste: e.preventDefault()
        HandlePaste->>DataTransfer: new DataTransfer(), add image files
        HandlePaste->>ProcessFiles: filesRef.current.processFiles(dt.files)
        ProcessFiles->>ProcessFiles: createObjectURL (preview)
        ProcessFiles->>ProcessFiles: setAttachedFiles (uploading: true)
        ProcessFiles->>S3: POST /api/files/upload
        S3-->>ProcessFiles: { fileInfo: { path, key } }
        ProcessFiles->>ProcessFiles: setAttachedFiles (uploading: false, path/key set)
    end

Loading

_{Reviews (2): Last reviewed commit: "Fix type error" | Re-trigger Greptile}