From f0b5cbf0106aa6aa127681e9b91b8b16a2e7d009 Mon Sep 17 00:00:00 2001
From: shatfield4 <seanhatfield5@gmail.com>
Date: Wed, 18 Sep 2024 15:47:38 -0700
Subject: [PATCH] wip paste image/screenshot to chat input

---
 embed                                         |  2 +-
 .../ChatContainer/DnDWrapper/index.jsx        | 26 ++++++++++++++++---
 .../PromptInput/AttachItem/index.jsx          | 25 ++++++++++++++++++
 3 files changed, 49 insertions(+), 4 deletions(-)

diff --git a/embed b/embed
index 22a0848d5..64faa5b64 160000
--- a/embed
+++ b/embed
@@ -1 +1 @@
-Subproject commit 22a0848d58e3a758d85d93d9204a72a65854ea94
+Subproject commit 64faa5b647cc6d7356204ba8ebbad567ee505a0a
diff --git a/frontend/src/components/WorkspaceChat/ChatContainer/DnDWrapper/index.jsx b/frontend/src/components/WorkspaceChat/ChatContainer/DnDWrapper/index.jsx
index 6d6f34535..266966c15 100644
--- a/frontend/src/components/WorkspaceChat/ChatContainer/DnDWrapper/index.jsx
+++ b/frontend/src/components/WorkspaceChat/ChatContainer/DnDWrapper/index.jsx
@@ -160,9 +160,8 @@ export function DnDFileUploaderProvider({ workspace, children }) {
 }
 
 export default function DnDFileUploaderWrapper({ children }) {
-  const { onDrop, ready, dragging, setDragging } =
-    useContext(DndUploaderContext);
-  const { getRootProps, getInputProps } = useDropzone({
+  const { onDrop, ready, dragging, setDragging } = useContext(DndUploaderContext);
+  const { getRootProps, getInputProps, inputRef } = useDropzone({
     onDrop,
     disabled: !ready,
     noClick: true,
@@ -171,6 +170,27 @@ 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]);
+
   return (
     <div
       className={`relative flex flex-col h-full w-full md:mt-0 mt-[40px] p-[1px]`}
diff --git a/frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/AttachItem/index.jsx b/frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/AttachItem/index.jsx
index bebbfe570..6a5a28a8e 100644
--- a/frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/AttachItem/index.jsx
+++ b/frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/AttachItem/index.jsx
@@ -1,6 +1,7 @@
 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.
@@ -10,6 +11,30 @@ 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