zeroclaw-labs/zeroclaw

[Feature]: Clipboard paste & drag-and-drop image support in Web Chat UI

Open

#5649 opened on Apr 11, 2026

View on GitHub
 (2 comments) (0 reactions) (0 assignees)Rust (31,341 stars) (4,614 forks)batch import
desktopenhancementgatewayhelp wantedpriority:p2risk: mediumstatus:acceptedstatus:no-stale

Description

Summary

WebUI's Agent tab, ability to paste clipbaord images or drag & drop images.

Problem statement

When using the web chat UI, there's no way to paste a screenshot from clipboard (Ctrl+V) or drag-and-drop an image file into the chat composer. Both feel like natural gestures and currently do nothing.

Proposed solution

The backend already handles [IMAGE:...] markers and multimodal payloads (fixed in #1615, #2376) — this is purely a missing frontend wiring issue.

  • Bind paste event on the composer to intercept image/* clipboard items
  • Bind dragover / drop events on the chat input area
  • Convert the file/blob to base64 and inject as an image marker before sending

No backend changes required. Would make the web UI on par with every other channel that already supports image input (Discord, Telegram, etc.).

Non-goals / out of scope

No response

Alternatives considered

No response

Acceptance criteria

No response

Architecture impact

No response

Risk and rollback

No response

Breaking change?

No

Data hygiene checks

  • I removed personal/sensitive data from examples, payloads, and logs.
  • I used neutral, project-focused wording and placeholders.

Contributor guide

Tech stack
javascripthtmlcss
Domain
frontend
Issue type
feature
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
2
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
half day
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
fresh
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
clear
Prerequisites
Basic web developmentClipboard APIFileReader API
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
75
Research direction
Investigate the chat UI source code, likely in a `web/` or `ui/` directory. Locate the message composer component that handles text input. Add paste event listeners for clipboard images and drag and drop event listeners, converting images to base64 using FileReader. Format the result as the existing image marker (e.g., [IMAGE:base64data]). No backend changes are needed; refer to prior fixes #1615 and #2376 for context on marker handling. Consider writing a small unit test for the conversion logic.