wip paste image/screenshot to chat input

embed

@@ -1 +1 @@
-Subproject commit 22a0848d58e3a758d85d93d9204a72a65854ea94
+Subproject commit 64faa5b647cc6d7356204ba8ebbad567ee505a0a

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]`}

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