zeroclaw-labs/zeroclaw

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

Open

#5,649 建立於 2026年4月11日

在 GitHub 查看
 (2 留言) (0 反應) (0 負責人)Rust (31,341 star) (4,614 fork)batch import
desktopenhancementgatewayhelp wantedpriority:p2risk: mediumstatus:acceptedstatus:no-stale

描述

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.

貢獻者指南

技術棧
javascripthtmlcss
領域
frontend
議題類型
feature
難度面向新貢獻者的預計實作難度，1 表示很小改動，5 表示專家級工作。
2
預計時間有經驗貢獻者完成調查、實作、測試並準備 pull request 的粗略時間範圍。
half day
活動狀態議題目前的可參與程度：新鮮、活躍、陳舊、阻塞或等待維護者輸入。
fresh
清晰度議題是否清楚說明預期改動、驗收標準和下一步。
clear
前置要求
Basic web developmentClipboard APIFileReader API
新手友善度1-100 的估計分數，表示該議題對首次貢獻者的友善程度。
75
研究方向
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.