Add drag and drop in file_viewer

app/components/file-viewer.module.css

@@ -76,3 +76,24 @@
   display: flex;
   flex-direction: column;
 }
+
+.dropzone {
+  border: 2px dashed #cccccc;
+  border-radius: 8px;
+  padding: 20px;
+  text-align: center;
+  cursor: pointer;
+  width: 100%;
+  max-width: 600px;
+  background-color: #fff;
+  transition: border-color 0.2s;
+}
+
+.dropzone p {
+  margin: 0;
+  color: #666666;
+}
+
+.dropzone:hover {
+  border-color: #888888;
+}

app/components/file-viewer.tsx

@@ -1,4 +1,5 @@
-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect, useCallback } from "react";
+import { useDropzone } from "react-dropzone";
 import styles from "./file-viewer.module.css";
 
 const TrashIcon = () => (
@@ -42,17 +43,25 @@ const FileViewer = () => {
       method: "DELETE",
       body: JSON.stringify({ fileId }),
     });
+    fetchFiles();
   };
 
-  const handleFileUpload = async (event) => {
-    const data = new FormData();
-    if (event.target.files.length < 0) return;
-    data.append("file", event.target.files[0]);
-    await fetch("/api/assistants/files", {
-      method: "POST",
-      body: data,
-    });
-  };
+  const onDrop = useCallback(async (acceptedFiles) => {
+    for (const file of acceptedFiles) {
+      const data = new FormData();
+      data.append("file", file);
+      await fetch("/api/assistants/files", {
+        method: "POST",
+        body: data,
+      });
+    }
+    fetchFiles();
+  }, []);
+
+  const { getRootProps, getInputProps } = useDropzone({
+    onDrop,
+    multiple: true,
+  });
 
   return (
     <div className={styles.fileViewer}>
@@ -78,20 +87,13 @@ const FileViewer = () => {
         )}
       </div>
       <div className={styles.fileUploadContainer}>
-        <label htmlFor="file-upload" className={styles.fileUploadBtn}>
-          Attach files
-        </label>
-        <input
-          type="file"
-          id="file-upload"
-          name="file-upload"
-          className={styles.fileUploadInput}
-          multiple
-          onChange={handleFileUpload}
-        />
+        <div {...getRootProps({ className: styles.dropzone })}>
+          <input {...getInputProps()} />
+          <p>Drag your files here or click to upload</p>
+        </div>
       </div>
     </div>
   );
 };
 
-export default FileViewer;
+export default FileViewer;

package.json

@@ -13,7 +13,8 @@
     "openai": "^4.46.0",
     "react": "^18",
     "react-dom": "^18",
-    "react-markdown": "^9.0.1"
+    "react-markdown": "^9.0.1",
+    "react-dropzone": "^14.2.3"
   },
   "devDependencies": {
     "@types/node": "20.12.7",