Skip to content

fix(chat): support image paste from clipboard on Linux/Tauri #248

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
tingyuxuan123 wants to merge 1 commit into from
Closed

fix(chat): support image paste from clipboard on Linux/Tauri #248

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
44 changes: 38 additions & 6 deletions src/components/chat/message-input.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1294,14 +1294,46 @@ export function MessageInput({
)

const handlePaste = useCallback(
(event: React.ClipboardEvent<HTMLTextAreaElement>) => {
async (event: React.ClipboardEvent<HTMLTextAreaElement>) => {
if (disabled) return
const files = filesFromClipboard(event.clipboardData)
if (files.length === 0) return
event.preventDefault()
void appendFilesFromInput(files).catch((error) => {
console.error("[MessageInput] paste files failed:", error)
})
if (files.length > 0) {
event.preventDefault()
void appendFilesFromInput(files).catch((error) => {
console.error("[MessageInput] paste files failed:", error)
})
return
}

// Fallback for Linux/Tauri webview where DataTransfer API doesn't
// expose screenshot images (e.g. WeChat screenshot). The async
// Clipboard API can read raw image blobs when the sync paste event
// yields nothing.
if (navigator.clipboard?.read) {
Comment on lines +1308 to +1312

@xintaofei xintaofei Jun 5, 2026

Copy link
Copy Markdown
Owner

Choose a reason for hiding this comment

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

🔴 降级被过度触发 + 破坏「文本优先」设计

filesFromClipboard() 对纯文本也返回 []（见 :230，检测到 text/plain 即 return []），所以每一次普通文本粘贴都会进到这里执行 navigator.clipboard.read()——一次完整、权限/隐私敏感的全剪贴板读取。MessageInput 在桌面与浏览器/服务器模式共用，浏览器模式下这是无谓开销、部分浏览器还会弹权限；而本 bug 只存在于 Tauri WebKitGTK webview。

此外这段忽略了 filesFromClipboard()（:226-235）刻意的「文本优先」设计：复制电子表格单元格这类 text+image 混合内容时原本返回 [] 是为了让文本正常粘贴，这里会在所有平台把它劫持成图片附件；又因为是 await 之后才 preventDefault()，文本其实已经粘进输入框，最终是「文本 + 图片」双重动作。

建议把降级限定到 Tauri，并在同步剪贴板已有文本时直接返回（下方 suggestion，需额外 import { detectEnvironment } from "@/lib/transport/detect"；若确认 web 端 Linux 也受影响可再放宽该判断）：

Suggested change
// Fallback for Linux/Tauri webview where DataTransfer API doesn't
// expose screenshot images (e.g. WeChat screenshot). The async
// Clipboard API can read raw image blobs when the sync paste event
// yields nothing.
if (navigator.clipboard?.read) {
// Fallback for Linux/Tauri webview where DataTransfer API doesn't
// expose screenshot images (e.g. WeChat screenshot). The async
// Clipboard API can read raw image blobs when the sync paste event
// yields nothing. Gate to Tauri and bail when the clipboard already
// carries text, to preserve filesFromClipboard()'s text-first
// behaviour and avoid a full clipboard read on every plain-text paste.
if (detectEnvironment() !== "tauri") return
if (event.clipboardData?.getData("text/plain").trim()) return
if (navigator.clipboard?.read) {

try {
const items = await navigator.clipboard.read()
const imageFiles: File[] = []
for (const item of items) {
for (const type of item.types) {
if (type.startsWith("image/")) {
const blob = await item.getType(type)
const ext = type.split("/")[1] || "png"
imageFiles.push(
new File([blob], `clipboard-image.${ext}`, { type })
)
}
}
}
if (imageFiles.length > 0) {
event.preventDefault()

@xintaofei xintaofei Jun 5, 2026

Copy link
Copy Markdown
Owner

Choose a reason for hiding this comment

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

🟡 这里的 event.preventDefault() 实际是空操作：它在 await navigator.clipboard.read() 之后执行，此时浏览器默认 paste 行为已经发生。对纯截图（剪贴板无文本）无害，因为没有要阻止的默认行为；但在「文本优先」被绕过的混合内容场景下，文本已经粘进输入框，preventDefault 无法回收。属于上面问题 1/2 修复后会自然消解的点，这里一并标注。

void appendFilesFromInput(imageFiles).catch((error) => {
console.error("[MessageInput] paste files failed:", error)
})
}
} catch {
// Clipboard API may be blocked by permissions; silently fall through.
}
}
},
[appendFilesFromInput, disabled]
)
Expand Down
Loading