drag

QuivrHQ · May 20, 2024 · 3bb5ca1 · 3bb5ca1
1 parent 106885d
commit 3bb5ca1
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 2 deletions.
diff --git a/frontend/app/knowledge/KnowledgeList/BrainFolder/BrainFolder.tsx b/frontend/app/knowledge/KnowledgeList/BrainFolder/BrainFolder.tsx
@@ -79,6 +79,19 @@ const BrainFolder = ({ brain, searchValue }: BrainFolderProps): JSX.Element => {
     return folded ? "0" : `${contentRef.current?.scrollHeight}px`;
   };
 
+  const handleDrop = (event: React.DragEvent<HTMLDivElement>) => {
+    event.preventDefault();
+    const droppedKnowledge = JSON.parse(
+      event.dataTransfer.getData("text/plain")
+    ) as Knowledge;
+
+    console.log("Dropped knowledge:", droppedKnowledge, "to brain:", brain.id);
+  };
+
+  const handleDragOver = (event: React.DragEvent<HTMLDivElement>) => {
+    event.preventDefault();
+  };
+
   useEffect(() => {
     setStoredKnowledge([...allKnowledge]);
   }, [allKnowledge, storedKnowledge.length, searchValue]);
@@ -110,7 +123,11 @@ const BrainFolder = ({ brain, searchValue }: BrainFolderProps): JSX.Element => {
   }, [folded, storedKnowledge]);
 
   return (
-    <div className={styles.brain_folder_wrapper}>
+    <div
+      className={styles.brain_folder_wrapper}
+      onDrop={handleDrop}
+      onDragOver={handleDragOver}
+    >
       <div
         className={styles.brain_folder_header}
         onClick={() => setFolded(!folded)}

diff --git a/frontend/app/knowledge/KnowledgeList/BrainFolder/KnowledgeItem/KnowledgeItem.module.scss b/frontend/app/knowledge/KnowledgeList/BrainFolder/KnowledgeItem/KnowledgeItem.module.scss
@@ -8,6 +8,14 @@
   padding-left: Spacings.$spacing06;
   font-size: Typography.$tiny;
   border-radius: Radius.$small;
+  cursor: grab;
+  padding: Spacings.$spacing01;
+  border: 1px solid transparent;
+  border-radius: Radius.$normal;
+
+  &.dragging {
+    border-color: var(--primary-1);
+  }
 
   .knowledge_item_wrapper {
     display: flex;

diff --git a/frontend/app/knowledge/KnowledgeList/BrainFolder/KnowledgeItem/KnowledgeItem.tsx b/frontend/app/knowledge/KnowledgeList/BrainFolder/KnowledgeItem/KnowledgeItem.tsx
@@ -20,6 +20,7 @@ const KnowledgeItem = ({ knowledge }: KnowledgeItemProps): JSX.Element => {
   const { generateSignedUrlKnowledge } = useKnowledgeApi();
   const { updateContent } = useNotesEditorContext();
   const [optionsOpened, setOptionsOpened] = useState<boolean>(false);
+  const [dragActivated, setDragActivated] = useState<boolean>(false);
 
   const iconRef = useRef<HTMLDivElement | null>(null);
   const optionsRef = useRef<HTMLDivElement | null>(null);
@@ -48,6 +49,10 @@ const KnowledgeItem = ({ knowledge }: KnowledgeItemProps): JSX.Element => {
     },
   ];
 
+  const handleDragStart = (event: React.DragEvent<HTMLDivElement>) => {
+    event.dataTransfer.setData("text/plain", JSON.stringify(knowledge));
+  };
+
   const logFileContent = async () => {
     if (isUploadedKnowledge(knowledge)) {
       let download_url = await generateSignedUrlKnowledge({
@@ -98,7 +103,17 @@ const KnowledgeItem = ({ knowledge }: KnowledgeItemProps): JSX.Element => {
   }, []);
 
   return (
-    <div className={styles.knowledge_item_container}>
+    <div
+      className={`${styles.knowledge_item_container} ${
+        dragActivated ? styles.dragging : ""
+      }`}
+      draggable
+      onDragStart={(event) => {
+        handleDragStart(event);
+        setDragActivated(true);
+      }}
+      onDragEnd={() => setDragActivated(false)}
+    >
       <div
         className={`${styles.knowledge_item_wrapper} ${
           !canReadFile(