From b1c4e02d675976b4be78aeb2b9b9a5241d767fe0 Mon Sep 17 00:00:00 2001
From: samlhuillier <sam.jansa123@gmail.com>
Date: Thu, 30 Nov 2023 15:45:23 -0600
Subject: [PATCH] beautify considerably the directory picker component

---
 electron/main/index.ts                  |  26 +-----
 src/components/File/DirectoryPicker.tsx | 111 +++++++++++++++++++++---
 src/components/Generic/Modal.tsx        |  26 ++++--
 3 files changed, 117 insertions(+), 46 deletions(-)

diff --git a/electron/main/index.ts b/electron/main/index.ts
index 92d53250..45827f8e 100644
--- a/electron/main/index.ts
+++ b/electron/main/index.ts
@@ -6,39 +6,17 @@ import Store from "electron-store";
 import * as path from "path";
 import * as fs from "fs";
 import { StoreKeys, StoreSchema } from "./Config/storeConfig";
-import {
-  LlamaCPPModelLoader,
-  LlamaCPPSessionService,
-} from "./llm/models/LlamaCpp";
+
 import * as lancedb from "vectordb";
+
 import {
-  Field,
-  type FixedSizeListBuilder,
-  Float32,
-  makeBuilder,
-  RecordBatchFileWriter,
-  Utf8,
-  Int32,
-  type Vector,
-  FixedSizeList,
-  vectorFromArray,
-  Schema,
-  Table as ArrowTable,
-  RecordBatchStreamWriter,
-  Float64,
-} from "apache-arrow";
-import { DatabaseFields } from "./database/Schema";
-import {
-  RagnoteDBEntry,
   RagnoteTable,
   maybeRePopulateTable,
   updateNoteInTable,
 } from "./database/Table";
 import { FSWatcher } from "fs";
-import chokidar from "chokidar";
 import {
   GetFilesInfoTree,
-  moveFileOrDirectoryInFileSystem,
   orchestrateEntryMove,
   startWatchingDirectory,
   updateFileListForRenderer,
diff --git a/src/components/File/DirectoryPicker.tsx b/src/components/File/DirectoryPicker.tsx
index 1016c42c..3acdc6da 100644
--- a/src/components/File/DirectoryPicker.tsx
+++ b/src/components/File/DirectoryPicker.tsx
@@ -1,30 +1,115 @@
 // import React from "react";
 
+import { useEffect, useState } from "react";
+import Modal from "../Generic/Modal";
+import { Button } from "@material-tailwind/react";
+
 interface Props {
   onDirectorySelected: (path: string) => void;
 }
 
 const DirectoryPicker: React.FC<Props> = ({ onDirectorySelected }) => {
+  const [isModalOpen, setIsModalOpen] = useState(true);
+  const [openAIKey, setOpenAIKey] = useState("");
+  const [userDirectory, setUserDirectory] = useState("");
+
+  useEffect(() => {
+    const key = window.electronStore.getOpenAIAPIKey() || ""; // Fallback to empty string if undefined
+    setOpenAIKey(key);
+  }, []);
+
+  const handleNext = () => {
+    window.electronStore.setOpenAIAPIKey(openAIKey);
+    if (userDirectory) {
+      window.electronStore.setUserDirectory(userDirectory);
+      onDirectorySelected(userDirectory);
+    }
+  };
+
   const handleDirectorySelection = async () => {
     const path = await window.files.openDirectoryDialog();
     if (path) {
-      window.electronStore.setUserDirectory(path);
-      onDirectorySelected(path);
+      setUserDirectory(path);
+      // window.electronStore.setUserDirectory(path);
+      // onDirectorySelected(path);
+    }
+  };
+  const handleKeyPress = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === "Enter") {
+      handleNext();
     }
   };
 
   return (
-    <div>
-      <button
-        className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
-        onClick={handleDirectorySelection}
-      >
-        Select Directory
-      </button>
-      After you select a directory, files currently in the directory will be
-      indexed. This may take a while and we currently haven't implemented a
-      progress bar :)
-    </div>
+    <Modal
+      isOpen={isModalOpen}
+      onClose={() => console.log("Not allowing a close for now")}
+      hideCloseButton={true}
+    >
+      <div className="">
+        <div className="ml-2 mr-6 mt-0 h-full  ">
+          <h2 className="text-2xl font-semibold mb-0 text-white">
+            Welcome to the Reor Project.
+          </h2>
+          <p className="mt-2 text-gray-100">
+            At its heart, this is a markdown editor with embedded AI. Everything
+            is written to a directory on your filesystem. Please choose that
+            directory here:
+          </p>
+          <Button
+            className="bg-slate-700 mt-2 border-none h-10 hover:bg-slate-900 cursor-pointer w-[140px] text-center pt-0 pb-0 pr-2 pl-2"
+            onClick={handleDirectorySelection}
+          >
+            Select Directory
+          </Button>
+          {userDirectory && (
+            <p className="mt-2 text-xs text-gray-100">
+              Selected: <strong>{userDirectory}</strong>
+            </p>
+          )}
+
+          <h4 className="font-semibold mb-2 text-white">Embedding Model</h4>
+          <input
+            type="text"
+            className="block w-[470px] px-3 py-2 mr-2 border border-gray-300 rounded-md bg-gray-200 cursor-not-allowed"
+            value={"BAAI/bge-base-en-v1.5"}
+            disabled
+            placeholder="Note Name"
+          />
+          <h4 className="font-semibold mb-2 text-white">LLM</h4>
+          <input
+            type="text"
+            className="block w-[470px] px-3 py-2 border border-gray-300 rounded-md bg-gray-200 cursor-not-allowed"
+            value={"GPT-3.5-turbo"}
+            disabled
+            placeholder="Note Name"
+          />
+          <p className="mt-2 text-xs text-gray-100">
+            *Models are currently hardcoded (custom models are coming soon).
+          </p>
+          <h4 className="font-semibold mb-2 text-white">Open AI Key</h4>
+          <input
+            type="text"
+            className="block w-[470px] px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:shadow-outline-blue focus:border-blue-300 transition duration-150 ease-in-out"
+            value={openAIKey}
+            onChange={(e) => setOpenAIKey(e.target.value)}
+            onKeyDown={handleKeyPress}
+            placeholder="Note Name"
+          />
+
+          <Button
+            className="bg-slate-700 mt-6 mb-2 border-none h-10 hover:bg-slate-900 cursor-pointer w-[80px] text-center pt-0 pb-0 pr-2 pl-2"
+            onClick={handleNext}
+          >
+            Next
+          </Button>
+          {/* <p className="text-xs text-white">
+            *Models are currently hardcoded. Custom models are coming very soon
+            :)
+          </p> */}
+        </div>
+      </div>
+    </Modal>
   );
 };
 
diff --git a/src/components/Generic/Modal.tsx b/src/components/Generic/Modal.tsx
index 67becc42..dff85eba 100644
--- a/src/components/Generic/Modal.tsx
+++ b/src/components/Generic/Modal.tsx
@@ -4,9 +4,15 @@ interface ModalProps {
   isOpen: boolean;
   onClose: () => void;
   children: React.ReactNode;
+  hideCloseButton?: boolean;
 }
 
-const Modal: React.FC<ModalProps> = ({ isOpen, onClose, children }) => {
+const Modal: React.FC<ModalProps> = ({
+  isOpen,
+  onClose,
+  children,
+  hideCloseButton,
+}) => {
   const modalRef = useRef<HTMLDivElement>(null);
 
   const handleOffClick = (event: MouseEvent) => {
@@ -33,14 +39,16 @@ const Modal: React.FC<ModalProps> = ({ isOpen, onClose, children }) => {
         className="flex bg-gray-800 rounded-lg shadow-xl max-w-lg p-2"
       >
         {children}
-        <div className="flex justify-end">
-          <button
-            onClick={onClose}
-            className="w-5 h-5 flex items-center justify-center text-gray-600 cursor-pointer bg-transparent border-none hover:bg-slate-700 hover:bg-opacity-40"
-          >
-            <span className="text-3xl leading-none">&times;</span>
-          </button>
-        </div>
+        {!hideCloseButton && (
+          <div className="flex justify-end">
+            <button
+              onClick={onClose}
+              className="w-5 h-5 flex items-center justify-center text-gray-600 cursor-pointer bg-transparent border-none hover:bg-slate-700 hover:bg-opacity-40"
+            >
+              <span className="text-3xl leading-none">&times;</span>
+            </button>
+          </div>
+        )}
       </div>
     </div>
   );