cleanup

package-lock.json

@@ -22,6 +22,7 @@
                 "next": "13.4.2",
                 "react": "18.2.0",
                 "react-dom": "18.2.0",
+                "react-dropzone": "^14.2.3",
                 "react95": "^4.0.0",
                 "typescript": "5.0.4",
                 "uuid": "^9.0.0"
@@ -1750,6 +1751,14 @@
             "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
             "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q=="
         },
+        "node_modules/attr-accept": {
+            "version": "2.2.2",
+            "resolved": "https://registry.npmjs.org/attr-accept/-/attr-accept-2.2.2.tgz",
+            "integrity": "sha512-7prDjvt9HmqiZ0cl5CRjtS84sEyhsHP2coDkaZKRKVfCDo9s7iw7ChVmar78Gu9pC4SoR/28wFu/G5JJhTnqEg==",
+            "engines": {
+                "node": ">=4"
+            }
+        },
         "node_modules/autoprefixer": {
             "version": "10.4.14",
             "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.14.tgz",
@@ -3099,6 +3108,17 @@
                 "node": "^10.12.0 || >=12.0.0"
             }
         },
+        "node_modules/file-selector": {
+            "version": "0.6.0",
+            "resolved": "https://registry.npmjs.org/file-selector/-/file-selector-0.6.0.tgz",
+            "integrity": "sha512-QlZ5yJC0VxHxQQsQhXvBaC7VRJ2uaxTf+Tfpu4Z/OcVQJVpZO+DGU0rkoVW5ce2SccxugvpBJoMvUs59iILYdw==",
+            "dependencies": {
+                "tslib": "^2.4.0"
+            },
+            "engines": {
+                "node": ">= 12"
+            }
+        },
         "node_modules/filelist": {
             "version": "1.0.4",
             "resolved": "https://registry.npmjs.org/filelist/-/filelist-1.0.4.tgz",
@@ -5383,6 +5403,22 @@
                 "react": "^18.2.0"
             }
         },
+        "node_modules/react-dropzone": {
+            "version": "14.2.3",
+            "resolved": "https://registry.npmjs.org/react-dropzone/-/react-dropzone-14.2.3.tgz",
+            "integrity": "sha512-O3om8I+PkFKbxCukfIR3QAGftYXDZfOE2N1mr/7qebQJHs7U+/RSL/9xomJNpRg9kM5h9soQSdf0Gc7OHF5Fug==",
+            "dependencies": {
+                "attr-accept": "^2.2.2",
+                "file-selector": "^0.6.0",
+                "prop-types": "^15.8.1"
+            },
+            "engines": {
+                "node": ">= 10.13"
+            },
+            "peerDependencies": {
+                "react": ">= 16.8 || 18.0.0"
+            }
+        },
         "node_modules/react-is": {
             "version": "16.13.1",
             "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",

package.json

@@ -22,6 +22,7 @@
         "next": "13.4.2",
         "react": "18.2.0",
         "react-dom": "18.2.0",
+        "react-dropzone": "^14.2.3",
         "react95": "^4.0.0",
         "typescript": "5.0.4",
         "uuid": "^9.0.0"

src/components/ChatWindow.jsx

@@ -2,7 +2,7 @@ import useLLM from "@react-llm/headless";
 import Image from "next/image";
 import { useCallback, useEffect, useState } from "react";
 import MessageList from './MessageList';
-
+import {FileLoader} from './FileLoader';
 import Loader from "./Loader";
 
 function ChatWindow({
@@ -64,6 +64,7 @@ function ChatWindow({
               <form onSubmit={handleSubmit}>
                 <div className="flex">
                   <input
+                    style={{ width: '95%', padding: '10px'}}
                     value={userInput}
                     placeholder="Say something..."
                     onChange={handleChange}
@@ -75,8 +76,10 @@ function ChatWindow({
                   <span>is typing...</span>
                 )}
               </div>
+              
               <div className="flex justify-start m-2">
                 <div>
+                  <div>
                   <button
                     onClick={handleSubmit}
                     className="submit"
@@ -95,6 +98,9 @@ function ChatWindow({
                       height="40"
                     />
                   </button>
+                  <FileLoader />
+                  </div>
+                  
                   <div
                     className="w-full h-1 mt-2"
                     style={{
@@ -105,6 +111,7 @@ function ChatWindow({
                       marginTop: "2px",
                     }}
                   ></div>
+                  
                 </div>
               </div>
             </div>

src/components/FileEmbedder.tsx

@@ -0,0 +1,55 @@
+import React, { useCallback, useState } from 'react';
+import { useDropzone } from 'react-dropzone';
+interface FileEmbedderProps {
+  handleEmbed: (acceptedFiles: File[]) => void;
+}
+
+export const FileEmbedder: React.FC<FileEmbedderProps> = ({ handleEmbed }) => {
+  const [isDragActive, setIsDragActive] = useState(false);
+
+  const onDrop = useCallback(
+    (acceptedFiles: File[]) => {
+      handleEmbed(acceptedFiles);
+      setIsDragActive(false);
+    },
+    [handleEmbed],
+  );
+
+  const { acceptedFiles, getRootProps, getInputProps, isDragReject } =
+    useDropzone({
+      onDrop,
+      accept: {
+        'application/pdf': ['.pdf'],
+        'text/plain': ['.txt', '.md'],
+      },
+      onDragEnter: () => setIsDragActive(true),
+      onDragLeave: () => setIsDragActive(false),
+    });
+
+  const acceptedFileItems = acceptedFiles.map((file: any) => (
+    <li key={file.name}>
+      {file.name} - {file.size} bytes
+    </li>
+  ));
+
+  return (
+    <>
+      <div
+        {...getRootProps()}
+        className={`border-2 border-dashed border-gray-300 p-6 rounded-md cursor-pointer ${
+          isDragActive ? 'active' : ''
+        } ${isDragReject ? 'reject' : ''}`}
+      >
+        <input {...getInputProps()} />
+        {isDragActive ? (
+          <p>Drop the files here...</p>
+        ) : (
+          <p><u>Click or drag and drop files here (PDF, MD, TXT)</u></p>
+        )}
+      </div>
+      <aside>
+        <ul>{acceptedFileItems}</ul>
+      </aside>
+    </>
+  );
+};

src/components/FileLoader.tsx

@@ -0,0 +1,29 @@
+import { useState } from 'react';
+import { MouseEventHandler, ReactElement } from 'react';
+
+import { FileEmbedder } from './FileEmbedder';
+
+export const FileLoader = () => {
+  const [files, setFiles] = useState<File[]>()
+  const handleEmbed = (files: File[]) => {
+    setFiles(files)
+    console.log(files);
+  };
+
+  const handleClick: MouseEventHandler<HTMLButtonElement> = (e) => {
+    console.log(e);
+  };
+
+  return (
+    <>
+      <FileEmbedder handleEmbed={handleEmbed} />
+      <button
+        onClick={() => {
+          console.log('sure');
+        }}
+      >
+        <div>Embed</div>
+      </button>
+    </>
+  );
+};

src/components/MessageList.jsx

@@ -21,7 +21,7 @@ function MessageList({
   }, [conversation, messages.length]);
 
   return (
-    <ScrollView style={{ height: "350px" }} className="w-full">
+    <ScrollView style={{ height: "65vh" }} className="w-full">
       <div className="p-2 leading-6 w-full min-h-full">
         {conversation?.messages.map((m) => (
           <div key={m.id} style={{ display: "flex" }}>