From 9c3cef242fd498889592a299b89ca499aea8747d Mon Sep 17 00:00:00 2001
From: shatfield4 <seanhatfield5@gmail.com>
Date: Thu, 19 Sep 2024 12:07:32 -0700
Subject: [PATCH] move paste image logic to hook + remove unneeded

---
 embed                                         |  2 +-
 .../ChatContainer/DnDWrapper/index.jsx        | 26 ++++---------------
 .../PromptInput/AttachItem/index.jsx          | 25 ------------------
 frontend/src/hooks/useImagePaste.js           | 24 +++++++++++++++++
 4 files changed, 30 insertions(+), 47 deletions(-)
 create mode 100644 frontend/src/hooks/useImagePaste.js

diff --git a/embed b/embed
index 64faa5b64..6bd51d251 160000
--- a/embed
+++ b/embed
@@ -1 +1 @@
-Subproject commit 64faa5b647cc6d7356204ba8ebbad567ee505a0a
+Subproject commit 6bd51d251ff1b204d7d88cdda0061df00676386e
diff --git a/frontend/src/components/WorkspaceChat/ChatContainer/DnDWrapper/index.jsx b/frontend/src/components/WorkspaceChat/ChatContainer/DnDWrapper/index.jsx
index 266966c15..224ac4c7d 100644
--- a/frontend/src/components/WorkspaceChat/ChatContainer/DnDWrapper/index.jsx
+++ b/frontend/src/components/WorkspaceChat/ChatContainer/DnDWrapper/index.jsx
@@ -5,6 +5,7 @@ import { useDropzone } from "react-dropzone";
 import DndIcon from "./dnd-icon.png";
 import Workspace from "@/models/workspace";
 import useUser from "@/hooks/useUser";
+import { useImagePaste } from "@/hooks/useImagePaste";
 
 export const DndUploaderContext = createContext();
 export const REMOVE_ATTACHMENT_EVENT = "ATTACHMENT_REMOVE";
@@ -161,7 +162,7 @@ export function DnDFileUploaderProvider({ workspace, children }) {
 
 export default function DnDFileUploaderWrapper({ children }) {
   const { onDrop, ready, dragging, setDragging } = useContext(DndUploaderContext);
-  const { getRootProps, getInputProps, inputRef } = useDropzone({
+  const { getRootProps, getInputProps } = useDropzone({
     onDrop,
     disabled: !ready,
     noClick: true,
@@ -170,26 +171,9 @@ export default function DnDFileUploaderWrapper({ children }) {
     onDragLeave: () => setDragging(false),
   });
 
-  useEffect(() => {
-    const handlePasteAnywhere = (e) => {
-      const items = e.clipboardData.items;
-      for (let i = 0; i < items.length; i++) {
-        if (items[i].type.indexOf('image/') !== -1) {
-          e.preventDefault();
-          const blob = items[i].getAsFile();
-          const fileName = blob.name !== "image.png" ? blob.name : `pasted-image.${blob.type.split('/')[1]}`;
-          const file = new File([blob], fileName, { type: blob.type });
-          onDrop([file], []);
-          break;
-        }
-      }
-    };
-
-    document.addEventListener('paste', handlePasteAnywhere);
-    return () => {
-      document.removeEventListener('paste', handlePasteAnywhere);
-    };
-  }, [onDrop]);
+  useImagePaste((file) => {
+    onDrop([file], []);
+  });
 
   return (
     <div
diff --git a/frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/AttachItem/index.jsx b/frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/AttachItem/index.jsx
index 6a5a28a8e..bebbfe570 100644
--- a/frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/AttachItem/index.jsx
+++ b/frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/AttachItem/index.jsx
@@ -1,7 +1,6 @@
 import useUser from "@/hooks/useUser";
 import { PaperclipHorizontal } from "@phosphor-icons/react";
 import { Tooltip } from "react-tooltip";
-import { useEffect } from "react";
 
 /**
  * This is a simple proxy component that clicks on the DnD file uploader for the user.
@@ -11,30 +10,6 @@ export default function AttachItem() {
   const { user } = useUser();
   if (!!user && user.role === "default") return null;
 
-  const handlePaste = (e) => {
-    const items = e.clipboardData.items;
-    for (let i = 0; i < items.length; i++) {
-      if (items[i].type.indexOf('image') !== -1) {
-        const blob = items[i].getAsFile();
-        handleImagePaste(blob);
-        break;
-      }
-    }
-  };
-
-  useEffect(() => {
-    document.addEventListener('paste', handlePaste);
-    return () => {
-      document.removeEventListener('paste', handlePaste);
-    };
-  }, []);
-
-  const handleImagePaste = (blob) => {
-    const file = new File([blob], "pasted-image.png", { type: "image/png" });
-    document.getElementById("dnd-chat-file-uploader").files = new FileList([file]);
-    document.getElementById("dnd-chat-file-uploader").dispatchEvent(new Event('change', { bubbles: true }));
-  };
-
   return (
     <>
       <button
diff --git a/frontend/src/hooks/useImagePaste.js b/frontend/src/hooks/useImagePaste.js
new file mode 100644
index 000000000..8a800644f
--- /dev/null
+++ b/frontend/src/hooks/useImagePaste.js
@@ -0,0 +1,24 @@
+import { useEffect } from 'react';
+
+export function useImagePaste(onImagePaste) {
+  useEffect(() => {
+    const handlePaste = (e) => {
+      const items = e.clipboardData.items;
+      for (let i = 0; i < items.length; i++) {
+        if (items[i].type.indexOf('image/') !== -1) {
+          e.preventDefault();
+          const blob = items[i].getAsFile();
+          const fileName = blob.name !== "image.png" ? blob.name : `pasted-image.${blob.type.split('/')[1]}`;
+          const file = new File([blob], fileName, { type: blob.type });
+          onImagePaste(file);
+          break;
+        }
+      }
+    };
+
+    document.addEventListener('paste', handlePaste);
+    return () => {
+      document.removeEventListener('paste', handlePaste);
+    };
+  }, [onImagePaste]);
+}
\ No newline at end of file