Skip to content

feat: image paste support for web UI#942

Open
chaehyun2 wants to merge 2 commits intoslopus:mainfrom
chaehyun2:feat/image-paste
Open

feat: image paste support for web UI#942
chaehyun2 wants to merge 2 commits intoslopus:mainfrom
chaehyun2:feat/image-paste

Conversation

@chaehyun2
Copy link
Copy Markdown

Summary

  • Web UI image paste: clipboard image handling in MultiTextInput.web.tsx, thumbnail preview in AgentInput.tsx, state management in SessionView.tsx
  • Sync transport: images field added to sync.ts sendMessage and typesRaw.ts schema
  • CLI pipeline: ImageAttachment type in MessageQueue2, buildContent() in claudeRemote.ts converts images to base64 content blocks for Claude API, passthrough in claudeRemoteLauncher.ts and runClaude.ts
  • Web Crypto AES encryption (aes.web.ts) for large image data — prevents stack overflow from rn-encryption on web platform
  • base64.ts chunked encoding to avoid stack overflow on large buffers
  • mediaType captured synchronously before DataTransferItem invalidates after paste event

How it works

  1. User pastes image in web chat input → onPaste handler reads as base64
  2. Thumbnail preview shown with remove button
  3. On send, images array passed through sync.sendMessage() → encrypted → server
  4. CLI receives message with images field → MessageQueue2 batches with images → claudeRemote.buildContent() builds content array with image blocks + text
  5. Claude API receives images as base64 source type content blocks

Test plan

  • Paste image in web UI → thumbnail appears
  • Remove image via X button
  • Send image + text → Claude responds with image understanding
  • Send text only → works as before (no regression)
  • Large images don't cause stack overflow
  • Mobile app compatibility maintained

🤖 Generated with Claude Code

Chaehyun Lee and others added 2 commits March 30, 2026 23:42
Users can paste images from clipboard in the web chat input.
Images flow through the full pipeline: web UI → sync → CLI → Claude SDK
as base64 content blocks.

- Web UI: onPaste handler, preview thumbnails, remove button
- Sync: images field in message schema and sendMessage
- CLI: images in MessageQueue2, claudeRemote buildContent, launcher passthrough
- Fix base64 encoding stack overflow for large image buffers

Generated with [Claude Code](https://claude.ai/code)
via [Happy](https://happy.engineering)

Co-Authored-By: Claude <noreply@anthropic.com>
Co-Authored-By: Happy <yesreply@happy.engineering>
This file was lost when switching to origin/main base. Without it,
web UI image encryption fails silently (rn-encryption can't handle
large base64 payloads on web platform).

Generated with [Claude Code](https://claude.ai/code)
via [Happy](https://happy.engineering)

Co-Authored-By: Claude <noreply@anthropic.com>
Co-Authored-By: Happy <yesreply@happy.engineering>
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