diff --git a/app/components/chat.tsx b/app/components/chat.tsx index 9144f9a5f45..bcd0e605df2 100644 --- a/app/components/chat.tsx +++ b/app/components/chat.tsx @@ -1100,6 +1100,47 @@ function _Chat() { }; // eslint-disable-next-line react-hooks/exhaustive-deps }, []); + + const handlePaste = useCallback( + async (event: React.ClipboardEvent) => { + const currentModel = chatStore.currentSession().mask.modelConfig.model; + if(!isVisionModel(currentModel)){return;} + const items = (event.clipboardData || window.clipboardData).items; + for (const item of items) { + if (item.kind === "file" && item.type.startsWith("image/")) { + event.preventDefault(); + const file = item.getAsFile(); + if (file) { + const images: string[] = []; + images.push(...attachImages); + images.push( + ...(await new Promise((res, rej) => { + setUploading(true); + const imagesData: string[] = []; + compressImage(file, 256 * 1024) + .then((dataUrl) => { + imagesData.push(dataUrl); + setUploading(false); + res(imagesData); + }) + .catch((e) => { + setUploading(false); + rej(e); + }); + })), + ); + const imagesLength = images.length; + + if (imagesLength > 3) { + images.splice(3, imagesLength - 3); + } + setAttachImages(images); + } + } + } + }, + [attachImages, chatStore], + ); async function uploadImage() { const images: string[] = []; @@ -1449,6 +1490,7 @@ function _Chat() { onKeyDown={onInputKeyDown} onFocus={scrollToBottom} onClick={scrollToBottom} + onPaste={handlePaste} rows={inputRows} autoFocus={autoFocus} style={{