Skip to content

feat(ui): handle image paste#3826

Merged
TheodoreSpeaks merged 3 commits intostagingfrom
feat/paste-image-mothership
Mar 28, 2026
Merged

feat(ui): handle image paste#3826
TheodoreSpeaks merged 3 commits intostagingfrom
feat/paste-image-mothership

Conversation

@TheodoreSpeaks
Copy link
Copy Markdown
Collaborator

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
Copy link
Copy Markdown

vercel bot commented Mar 28, 2026

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

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

Request Review

@TheodoreSpeaks
Copy link
Copy Markdown
Collaborator Author

@cursor review

@cursor
Copy link
Copy Markdown

cursor bot commented Mar 28, 2026

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
Copy link
Copy Markdown
Collaborator Author

@greptile review

Copy link
Copy Markdown

@cursor cursor bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

✅ Bugbot reviewed your changes and found no new issues!

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

@greptile-apps
Copy link
Copy Markdown
Contributor

greptile-apps bot commented Mar 28, 2026

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

@TheodoreSpeaks TheodoreSpeaks marked this pull request as ready for review March 28, 2026 21:02
@TheodoreSpeaks TheodoreSpeaks merged commit 0ea7326 into staging Mar 28, 2026
11 checks passed
@TheodoreSpeaks TheodoreSpeaks deleted the feat/paste-image-mothership branch March 28, 2026 21:15
TheodoreSpeaks added a commit that referenced this pull request Mar 28, 2026
* feat(ui): handle image paste

* Fix lint

* Fix type error

---------

Co-authored-by: Theodore Li <theo@sim.ai>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant