From bd19e97cf84755e4ac20c731bae292c2a09b76b7 Mon Sep 17 00:00:00 2001
From: Snow Kawashiro <snow.kawashiro@outlook.com>
Date: Wed, 28 Feb 2024 20:05:13 +0800
Subject: [PATCH 1/3] add_image_pasting

---
 app/components/chat.tsx | 40 ++++++++++++++++++++++++++++++++++++++++
 1 file changed, 40 insertions(+)

diff --git a/app/components/chat.tsx b/app/components/chat.tsx
index 9144f9a5f45..22acb8e4f9a 100644
--- a/app/components/chat.tsx
+++ b/app/components/chat.tsx
@@ -1100,6 +1100,45 @@ function _Chat() {
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
+  
+  const handlePaste = useCallback(
+    async (event: React.ClipboardEvent<HTMLTextAreaElement>) => {
+      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<string[]>((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],
+  );
 
   async function uploadImage() {
     const images: string[] = [];
@@ -1449,6 +1488,7 @@ function _Chat() {
             onKeyDown={onInputKeyDown}
             onFocus={scrollToBottom}
             onClick={scrollToBottom}
+            onPaste={handlePaste}
             rows={inputRows}
             autoFocus={autoFocus}
             style={{

From e7051353eb8aff0e89a5e0a5da13cfcc5bcb4b6f Mon Sep 17 00:00:00 2001
From: Snow Kawashiro <snow.kawashiro@outlook.com>
Date: Wed, 28 Feb 2024 20:38:00 +0800
Subject: [PATCH 2/3] vision_model_only

---
 app/components/chat.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/app/components/chat.tsx b/app/components/chat.tsx
index 22acb8e4f9a..d730a4a102c 100644
--- a/app/components/chat.tsx
+++ b/app/components/chat.tsx
@@ -1102,6 +1102,8 @@ function _Chat() {
   }, []);
   
   const handlePaste = useCallback(
+    const currentModel = chatStore.currentSession().mask.modelConfig.model;
+    if(!isVisionModel(currentModel)){return;}
     async (event: React.ClipboardEvent<HTMLTextAreaElement>) => {
       const items = (event.clipboardData || window.clipboardData).items;
       for (const item of items) {
@@ -1137,7 +1139,7 @@ function _Chat() {
         }
       }
     },
-    [attachImages],
+    [attachImages, chatStore],
   );
 
   async function uploadImage() {

From 9775660da7a7fd6b9edc616c42def0dc69b534d4 Mon Sep 17 00:00:00 2001
From: Snow Kawashiro <snow.kawashiro@outlook.com>
Date: Wed, 28 Feb 2024 20:45:42 +0800
Subject: [PATCH 3/3] Update chat.tsx

---
 app/components/chat.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/components/chat.tsx b/app/components/chat.tsx
index d730a4a102c..bcd0e605df2 100644
--- a/app/components/chat.tsx
+++ b/app/components/chat.tsx
@@ -1102,9 +1102,9 @@ function _Chat() {
   }, []);
   
   const handlePaste = useCallback(
-    const currentModel = chatStore.currentSession().mask.modelConfig.model;
-    if(!isVisionModel(currentModel)){return;}
     async (event: React.ClipboardEvent<HTMLTextAreaElement>) => {
+      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/")) {