From 3d6cd41befac326018d8cc49c419f9a3ae4a6019 Mon Sep 17 00:00:00 2001
From: joseplayero <claudeshannon11@outlook.com>
Date: Wed, 10 Jul 2024 22:41:24 +0100
Subject: [PATCH 1/4] clean up modal logic

---
 src/components/Common/IndexingProgress.tsx    |  2 +-
 src/components/Common/Modal.tsx               | 49 +++----------------
 src/components/File/NewDirectory.tsx          |  2 +-
 src/components/File/NewNote.tsx               |  2 +-
 src/components/File/RenameDirectory.tsx       |  2 +-
 src/components/File/RenameNote.tsx            |  2 +-
 .../Flashcard/FlashcardMenuModal.tsx          |  2 +-
 .../Flashcard/FlashcardReviewModal.tsx        |  6 +--
 src/components/MainPage.tsx                   |  1 +
 .../modals/NewLocalEmbeddingModel.tsx         |  2 +-
 .../modals/NewRemoteEmbeddingModel.tsx        |  2 +-
 .../LLMSettings/InitialSetupLLMSettings.tsx   |  2 +-
 .../LLMSettings/modals/CloudLLMSetup.tsx      | 10 ++--
 .../LLMSettings/modals/NewOllamaModel.tsx     |  2 +-
 .../LLMSettings/modals/RemoteLLMSetup.tsx     |  6 +--
 15 files changed, 24 insertions(+), 68 deletions(-)

diff --git a/src/components/Common/IndexingProgress.tsx b/src/components/Common/IndexingProgress.tsx
index fe37a27a..de0062d3 100644
--- a/src/components/Common/IndexingProgress.tsx
+++ b/src/components/Common/IndexingProgress.tsx
@@ -35,7 +35,7 @@ const IndexingProgress: React.FC<IndexingProgressProps> = ({
       isOpen={true}
       onClose={() => console.log("Not allowing a close for now")}
       hideCloseButton={true}
-      widthType="indexingProgress"
+      width="850px"
     >
       <div className="w-[500px] h-[100px] ml-3 mb-3 mt-2 mr-3">
         <h6 className="mt-2 mb-2 text-2xl font-semibold text-white">
diff --git a/src/components/Common/Modal.tsx b/src/components/Common/Modal.tsx
index ba06fd3f..ce806ac0 100644
--- a/src/components/Common/Modal.tsx
+++ b/src/components/Common/Modal.tsx
@@ -1,63 +1,26 @@
 import React, { useRef, useEffect } from "react";
 
+type ValidDimension = "500px" | "750px" | "300px" | "full" | "850px";
+
 interface ModalProps {
   isOpen: boolean;
   onClose: () => void;
   children: React.ReactNode;
   hideCloseButton?: boolean;
   tailwindStylesOnBackground?: string;
-  widthType?: ModalWidthType;
+  width?: ValidDimension;
 }
 
-/*
- * Modal is used in many places for different functions. The dimensions that newNote window
- * should display is different than what settings should be. This is a wrapper to select the width
- * that should be displayed.
- */
-type ModalWidthType =
-  | "newNote"
-  | "newDirectory"
-  | "renameNote"
-  | "renameDirectory"
-  | "flashcardMode"
-  | "flashcardReviewMode"
-  | "newEmbeddingModel"
-  | "localLLMSetting"
-  | "remoteLLMSetting"
-  | "indexingProgress";
-
-type Dimension = "[500px]" | "[750px]" | "[300px]" | "full" | "[850px]";
-
-const customDimensionsMap: Record<ModalWidthType, Dimension> = {
-  newNote: "[500px]",
-  newDirectory: "[500px]",
-  renameNote: "[500px]",
-  renameDirectory: "[500px]",
-  flashcardMode: "[750px]",
-  flashcardReviewMode: "[300px]",
-  newEmbeddingModel: "[500px]",
-  localLLMSetting: "[500px]",
-  remoteLLMSetting: "[500px]",
-  indexingProgress: "[850px]",
-};
-
-const getDimension = (name: ModalWidthType | undefined): Dimension => {
-  if (name === undefined) {
-    return "full";
-  }
-  return customDimensionsMap[name] || "full";
-};
-
 const ReorModal: React.FC<ModalProps> = ({
   isOpen,
   onClose,
   children,
   hideCloseButton,
   tailwindStylesOnBackground,
-  widthType,
+  width,
 }) => {
   const modalRef = useRef<HTMLDivElement>(null);
-  const widthClass = getDimension(widthType as ModalWidthType);
+  // const widthClass = getDimension(widthType as ModalWidthType);
 
   const handleOffClick = (event: MouseEvent) => {
     if (modalRef.current && !modalRef.current.contains(event.target as Node)) {
@@ -82,7 +45,7 @@ const ReorModal: React.FC<ModalProps> = ({
     >
       <div
         ref={modalRef}
-        className={`bg-dark-gray-c-three rounded-lg shadow-xl w-${widthClass} max-w-4xl flex flex-col justify-center items-center border-solid border-gray-600 border`}
+        className={`bg-dark-gray-c-three rounded-lg shadow-xl w-[${width}] max-w-4xl flex flex-col justify-center items-center border-solid border-gray-600 border`}
       >
         <div className="w-full items-end border-b border-gray-700 px-4 h-0 z-50">
           {!hideCloseButton && (
diff --git a/src/components/File/NewDirectory.tsx b/src/components/File/NewDirectory.tsx
index 934abf9e..136b230e 100644
--- a/src/components/File/NewDirectory.tsx
+++ b/src/components/File/NewDirectory.tsx
@@ -79,7 +79,7 @@ const NewDirectoryComponent: React.FC<NewDirectoryComponentProps> = ({
   };
 
   return (
-    <ReorModal isOpen={isOpen} onClose={onClose} widthType="newDirectory">
+    <ReorModal isOpen={isOpen} onClose={onClose} width="500px">
       <div className="ml-3 mr-6 mt-2 mb-2 h-full min-w-[400px]">
         <h2 className="text-xl font-semibold mb-3 text-white">New Directory</h2>
         <input
diff --git a/src/components/File/NewNote.tsx b/src/components/File/NewNote.tsx
index 0ff6b661..375ac509 100644
--- a/src/components/File/NewNote.tsx
+++ b/src/components/File/NewNote.tsx
@@ -65,7 +65,7 @@ const NewNoteComponent: React.FC<NewNoteComponentProps> = ({
   };
 
   return (
-    <ReorModal isOpen={isOpen} onClose={onClose} widthType="newNote">
+    <ReorModal isOpen={isOpen} onClose={onClose} width="500px">
       <div className="ml-3 mr-6 mt-2 mb-2 h-full min-w-[400px]">
         <h2 className="text-xl font-semibold mb-3 text-white">New Note</h2>
         <input
diff --git a/src/components/File/RenameDirectory.tsx b/src/components/File/RenameDirectory.tsx
index 25a84107..8048fd22 100644
--- a/src/components/File/RenameDirectory.tsx
+++ b/src/components/File/RenameDirectory.tsx
@@ -96,7 +96,7 @@ const RenameDirModal: React.FC<RenameDirModalProps> = ({
   };
 
   return (
-    <ReorModal isOpen={isOpen} onClose={onClose} widthType="renameDirectory">
+    <ReorModal isOpen={isOpen} onClose={onClose} width="500px">
       <div className="ml-3 mr-6 mt-2 mb-2 h-full min-w-[400px]">
         <h2 className="text-xl font-semibold mb-3 text-white">
           Rename Directory
diff --git a/src/components/File/RenameNote.tsx b/src/components/File/RenameNote.tsx
index 5d287c63..7bbca005 100644
--- a/src/components/File/RenameNote.tsx
+++ b/src/components/File/RenameNote.tsx
@@ -98,7 +98,7 @@ const RenameNoteModal: React.FC<RenameNoteModalProps> = ({
   };
 
   return (
-    <ReorModal isOpen={isOpen} onClose={onClose} widthType="renameNote">
+    <ReorModal isOpen={isOpen} onClose={onClose} width="500px">
       <div className="ml-3 mr-6 mt-2 mb-2 h-full min-w-[400px]">
         <h2 className="text-xl font-semibold mb-3 text-white">Rename Note</h2>
         <input
diff --git a/src/components/Flashcard/FlashcardMenuModal.tsx b/src/components/Flashcard/FlashcardMenuModal.tsx
index 2a04d054..9b1e94d2 100644
--- a/src/components/Flashcard/FlashcardMenuModal.tsx
+++ b/src/components/Flashcard/FlashcardMenuModal.tsx
@@ -36,7 +36,7 @@ const FlashcardMenuModal: React.FC<FlashcardMenuModalProps> = ({
     <ReorModal
       isOpen={isOpen}
       onClose={onClose}
-      widthType="flashcardMode"
+      width="750px"
       // tailwindStylesOnBackground="bg-gradient-to-r from-orange-900 to-yellow-900"
     >
       <div className="ml-6 mr-6 mt-2 mb-6 w-full h-full flex-col align-center justify-center">
diff --git a/src/components/Flashcard/FlashcardReviewModal.tsx b/src/components/Flashcard/FlashcardReviewModal.tsx
index a67cce2f..4b03d54e 100644
--- a/src/components/Flashcard/FlashcardReviewModal.tsx
+++ b/src/components/Flashcard/FlashcardReviewModal.tsx
@@ -53,11 +53,7 @@ const FlashcardReviewModal: React.FC<FlashcardReviewModalProps> = ({
   }, [selectedFlashcardFile]);
 
   return (
-    <ReorModal
-      isOpen={isOpen}
-      onClose={onClose}
-      widthType="flashcardReviewMode"
-    >
+    <ReorModal isOpen={isOpen} onClose={onClose} width="750px">
       <div className="ml-6 mt-2 mb-6 w-full h-full w-[200px] flex-col ">
         <h2 className="text-xl font-semibold mb-3 text-white">
           Flashcard Review Mode
diff --git a/src/components/MainPage.tsx b/src/components/MainPage.tsx
index f2fc1b9f..67c36213 100644
--- a/src/components/MainPage.tsx
+++ b/src/components/MainPage.tsx
@@ -198,6 +198,7 @@ const FileEditorContainer: React.FC<FileEditorContainerProps> = () => {
               showSimilarFiles={showSimilarFiles} // This might need to be managed differently now
               chatFilters={chatFilters}
               setChatFilters={(chatFilters: ChatFilters) => {
+                console.log("CALLING ADD FILE TO CHAT");
                 posthog.capture("add_file_to_chat", {
                   chatFilesLength: chatFilters.files.length,
                 });
diff --git a/src/components/Settings/EmbeddingSettings/modals/NewLocalEmbeddingModel.tsx b/src/components/Settings/EmbeddingSettings/modals/NewLocalEmbeddingModel.tsx
index 590f179f..3ef64149 100644
--- a/src/components/Settings/EmbeddingSettings/modals/NewLocalEmbeddingModel.tsx
+++ b/src/components/Settings/EmbeddingSettings/modals/NewLocalEmbeddingModel.tsx
@@ -56,7 +56,7 @@ const NewLocalEmbeddingModelModal: React.FC<
     <ReorModal
       isOpen={isOpen}
       onClose={saveModelConfigToElectronStore}
-      widthType="newEmbeddingModel"
+      width="500px"
     >
       <div className="w-[400px] ml-2 mr-2 mb-2 pl-3">
         <h3 className="text-white font-semibold mb-0">
diff --git a/src/components/Settings/EmbeddingSettings/modals/NewRemoteEmbeddingModel.tsx b/src/components/Settings/EmbeddingSettings/modals/NewRemoteEmbeddingModel.tsx
index 0b35b3ca..a2770f10 100644
--- a/src/components/Settings/EmbeddingSettings/modals/NewRemoteEmbeddingModel.tsx
+++ b/src/components/Settings/EmbeddingSettings/modals/NewRemoteEmbeddingModel.tsx
@@ -49,7 +49,7 @@ const NewRemoteEmbeddingModelModal: React.FC<
     <ReorModal
       isOpen={isOpen}
       onClose={saveModelConfigToElectronStore}
-      widthType="newEmbeddingModel"
+      width="500px"
     >
       <div className="w-[400px] ml-2 mr-2 mb-2 pl-3">
         <h2 className="text-white  font-semibold mb-0">Set up remote model</h2>
diff --git a/src/components/Settings/LLMSettings/InitialSetupLLMSettings.tsx b/src/components/Settings/LLMSettings/InitialSetupLLMSettings.tsx
index 8bb54910..2195c8d7 100644
--- a/src/components/Settings/LLMSettings/InitialSetupLLMSettings.tsx
+++ b/src/components/Settings/LLMSettings/InitialSetupLLMSettings.tsx
@@ -60,7 +60,7 @@ const InitialSetupLLMSettings: React.FC<InitialSetupLLMSettingsProps> = ({
             setIsSetupModalOpen(false);
             fetchAndUpdateModelConfigs();
           }}
-          widthType="newNote"
+          width="500px"
         >
           <LLMSettingsContent
             userHasCompleted={userHasCompleted}
diff --git a/src/components/Settings/LLMSettings/modals/CloudLLMSetup.tsx b/src/components/Settings/LLMSettings/modals/CloudLLMSetup.tsx
index e0d6938f..12644d8f 100644
--- a/src/components/Settings/LLMSettings/modals/CloudLLMSetup.tsx
+++ b/src/components/Settings/LLMSettings/modals/CloudLLMSetup.tsx
@@ -59,7 +59,7 @@ const CloudLLMSetupModal: React.FC<CloudLLMSetupModalProps> = ({
   };
 
   return (
-    <ReorModal isOpen={isOpen} onClose={handleSave} widthType="newNote">
+    <ReorModal isOpen={isOpen} onClose={handleSave} width="500px">
       <div className="w-[300px] ml-3 mr-2 mb-2">
         <h3 className="font-semibold mb-0 text-white">
           {LLMDisplayName} Setup
@@ -96,16 +96,16 @@ const CloudLLMSetupModal: React.FC<CloudLLMSetupModalProps> = ({
 
 const openAIDefaultModels: OpenAILLMConfig[] = [
   {
-    contextLength: 16385,
-    modelName: "gpt-3.5-turbo",
+    contextLength: 128000,
+    modelName: "gpt-4o",
     engine: "openai",
     type: "openai",
     apiKey: "",
     apiURL: "",
   },
   {
-    contextLength: 128000,
-    modelName: "gpt-4o",
+    contextLength: 16385,
+    modelName: "gpt-3.5-turbo",
     engine: "openai",
     type: "openai",
     apiKey: "",
diff --git a/src/components/Settings/LLMSettings/modals/NewOllamaModel.tsx b/src/components/Settings/LLMSettings/modals/NewOllamaModel.tsx
index 4fc015cd..f2498809 100644
--- a/src/components/Settings/LLMSettings/modals/NewOllamaModel.tsx
+++ b/src/components/Settings/LLMSettings/modals/NewOllamaModel.tsx
@@ -81,7 +81,7 @@ const NewOllamaModelModal: React.FC<NewOllamaModelModalProps> = ({
   }, []);
 
   return (
-    <ReorModal isOpen={isOpen} onClose={onClose} widthType="localLLMSetting">
+    <ReorModal isOpen={isOpen} onClose={onClose} width="500px">
       <div className="w-[400px] ml-2 mr-2 mb-2 pl-3">
         <h2 className="text-white  font-semibold mb-0">New Local LLM</h2>
         <p className="text-white text-xs mb-6 mt-1">
diff --git a/src/components/Settings/LLMSettings/modals/RemoteLLMSetup.tsx b/src/components/Settings/LLMSettings/modals/RemoteLLMSetup.tsx
index 9709c764..083b75fc 100644
--- a/src/components/Settings/LLMSettings/modals/RemoteLLMSetup.tsx
+++ b/src/components/Settings/LLMSettings/modals/RemoteLLMSetup.tsx
@@ -66,11 +66,7 @@ const RemoteLLMSetupModal: React.FC<RemoteLLMModalProps> = ({
     }
   };
   return (
-    <ReorModal
-      isOpen={isOpen}
-      onClose={handleClose}
-      widthType="remoteLLMSetting"
-    >
+    <ReorModal isOpen={isOpen} onClose={handleClose} width="500px">
       <div className="w-[400px] ml-3 mr-2 mb-2">
         <h2 className="font-semibold mb-0 text-white">Remote LLM Setup</h2>
         <p className="text-gray-100 mb-2 mt-2 text-sm">

From 54b552310171a8d1575a3b41ca9b2b6226b17c84 Mon Sep 17 00:00:00 2001
From: joseplayero <claudeshannon11@outlook.com>
Date: Wed, 10 Jul 2024 23:08:52 +0100
Subject: [PATCH 2/4] remove width from being defined by modal

---
 .../Chat/AddContextFiltersModal.tsx           |  2 +-
 src/components/Common/IndexingProgress.tsx    |  1 -
 src/components/Common/Modal.tsx               |  8 +---
 src/components/File/NewDirectory.tsx          |  2 +-
 src/components/File/NewNote.tsx               |  2 +-
 src/components/File/RenameDirectory.tsx       |  2 +-
 src/components/File/RenameNote.tsx            |  2 +-
 .../Flashcard/FlashcardCreateModal.tsx        |  2 +-
 .../Flashcard/FlashcardMenuModal.tsx          |  1 -
 .../Flashcard/FlashcardReviewModal.tsx        |  4 +-
 .../modals/NewLocalEmbeddingModel.tsx         |  6 +--
 .../modals/NewRemoteEmbeddingModel.tsx        |  6 +--
 .../LLMSettings/InitialSetupLLMSettings.tsx   |  1 -
 .../LLMSettings/modals/CloudLLMSetup.tsx      |  2 +-
 .../LLMSettings/modals/NewOllamaModel.tsx     |  2 +-
 .../LLMSettings/modals/RemoteLLMSetup.tsx     |  2 +-
 src/components/Settings/Settings.tsx          | 38 ++-----------------
 17 files changed, 18 insertions(+), 65 deletions(-)

diff --git a/src/components/Chat/AddContextFiltersModal.tsx b/src/components/Chat/AddContextFiltersModal.tsx
index aa668230..ce829344 100644
--- a/src/components/Chat/AddContextFiltersModal.tsx
+++ b/src/components/Chat/AddContextFiltersModal.tsx
@@ -120,7 +120,7 @@ const AddContextFiltersModal: React.FC<Props> = ({
 
   return (
     <ReorModal isOpen={isOpen} onClose={onClose}>
-      <div className="ml-6 mt-2 mb-6 h-full w-[800px] max-h-[90vh] overflow-y-auto overflow-x-hidden">
+      <div className="ml-6 mt-2 mb-6 h-full w-[800px] max-h-[90vh] overflow-y-auto overflow-x-hidden p-4">
         <h4 className="text-white text-2xl mb-4 text-center">
           Choose specific context files or customise the RAG search
         </h4>
diff --git a/src/components/Common/IndexingProgress.tsx b/src/components/Common/IndexingProgress.tsx
index de0062d3..05ec42ea 100644
--- a/src/components/Common/IndexingProgress.tsx
+++ b/src/components/Common/IndexingProgress.tsx
@@ -35,7 +35,6 @@ const IndexingProgress: React.FC<IndexingProgressProps> = ({
       isOpen={true}
       onClose={() => console.log("Not allowing a close for now")}
       hideCloseButton={true}
-      width="850px"
     >
       <div className="w-[500px] h-[100px] ml-3 mb-3 mt-2 mr-3">
         <h6 className="mt-2 mb-2 text-2xl font-semibold text-white">
diff --git a/src/components/Common/Modal.tsx b/src/components/Common/Modal.tsx
index ce806ac0..230e5d01 100644
--- a/src/components/Common/Modal.tsx
+++ b/src/components/Common/Modal.tsx
@@ -1,14 +1,11 @@
 import React, { useRef, useEffect } from "react";
 
-type ValidDimension = "500px" | "750px" | "300px" | "full" | "850px";
-
 interface ModalProps {
   isOpen: boolean;
   onClose: () => void;
   children: React.ReactNode;
   hideCloseButton?: boolean;
   tailwindStylesOnBackground?: string;
-  width?: ValidDimension;
 }
 
 const ReorModal: React.FC<ModalProps> = ({
@@ -17,7 +14,6 @@ const ReorModal: React.FC<ModalProps> = ({
   children,
   hideCloseButton,
   tailwindStylesOnBackground,
-  width,
 }) => {
   const modalRef = useRef<HTMLDivElement>(null);
   // const widthClass = getDimension(widthType as ModalWidthType);
@@ -41,11 +37,11 @@ const ReorModal: React.FC<ModalProps> = ({
 
   return (
     <div
-      className={`fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-40 ${tailwindStylesOnBackground}`}
+      className={`fixed inset-0 z-50 flex items-center justify-center h-full bg-black bg-opacity-40 ${tailwindStylesOnBackground}`}
     >
       <div
         ref={modalRef}
-        className={`bg-dark-gray-c-three rounded-lg shadow-xl w-[${width}] max-w-4xl flex flex-col justify-center items-center border-solid border-gray-600 border`}
+        className={`bg-dark-gray-c-three rounded-lg shadow-xl  max-w-4xl max-h-3xl flex flex-col justify-center items-center border-solid border-gray-600 border`}
       >
         <div className="w-full items-end border-b border-gray-700 px-4 h-0 z-50">
           {!hideCloseButton && (
diff --git a/src/components/File/NewDirectory.tsx b/src/components/File/NewDirectory.tsx
index 136b230e..90a9c1a5 100644
--- a/src/components/File/NewDirectory.tsx
+++ b/src/components/File/NewDirectory.tsx
@@ -79,7 +79,7 @@ const NewDirectoryComponent: React.FC<NewDirectoryComponentProps> = ({
   };
 
   return (
-    <ReorModal isOpen={isOpen} onClose={onClose} width="500px">
+    <ReorModal isOpen={isOpen} onClose={onClose}>
       <div className="ml-3 mr-6 mt-2 mb-2 h-full min-w-[400px]">
         <h2 className="text-xl font-semibold mb-3 text-white">New Directory</h2>
         <input
diff --git a/src/components/File/NewNote.tsx b/src/components/File/NewNote.tsx
index 375ac509..7656af3f 100644
--- a/src/components/File/NewNote.tsx
+++ b/src/components/File/NewNote.tsx
@@ -65,7 +65,7 @@ const NewNoteComponent: React.FC<NewNoteComponentProps> = ({
   };
 
   return (
-    <ReorModal isOpen={isOpen} onClose={onClose} width="500px">
+    <ReorModal isOpen={isOpen} onClose={onClose}>
       <div className="ml-3 mr-6 mt-2 mb-2 h-full min-w-[400px]">
         <h2 className="text-xl font-semibold mb-3 text-white">New Note</h2>
         <input
diff --git a/src/components/File/RenameDirectory.tsx b/src/components/File/RenameDirectory.tsx
index 8048fd22..27eb931a 100644
--- a/src/components/File/RenameDirectory.tsx
+++ b/src/components/File/RenameDirectory.tsx
@@ -96,7 +96,7 @@ const RenameDirModal: React.FC<RenameDirModalProps> = ({
   };
 
   return (
-    <ReorModal isOpen={isOpen} onClose={onClose} width="500px">
+    <ReorModal isOpen={isOpen} onClose={onClose}>
       <div className="ml-3 mr-6 mt-2 mb-2 h-full min-w-[400px]">
         <h2 className="text-xl font-semibold mb-3 text-white">
           Rename Directory
diff --git a/src/components/File/RenameNote.tsx b/src/components/File/RenameNote.tsx
index 7bbca005..d89bbfa1 100644
--- a/src/components/File/RenameNote.tsx
+++ b/src/components/File/RenameNote.tsx
@@ -98,7 +98,7 @@ const RenameNoteModal: React.FC<RenameNoteModalProps> = ({
   };
 
   return (
-    <ReorModal isOpen={isOpen} onClose={onClose} width="500px">
+    <ReorModal isOpen={isOpen} onClose={onClose}>
       <div className="ml-3 mr-6 mt-2 mb-2 h-full min-w-[400px]">
         <h2 className="text-xl font-semibold mb-3 text-white">Rename Note</h2>
         <input
diff --git a/src/components/Flashcard/FlashcardCreateModal.tsx b/src/components/Flashcard/FlashcardCreateModal.tsx
index 27a44ca7..f16ca3fc 100644
--- a/src/components/Flashcard/FlashcardCreateModal.tsx
+++ b/src/components/Flashcard/FlashcardCreateModal.tsx
@@ -107,7 +107,7 @@ const FlashcardCreateModal: React.FC<FlashcardCreateModalProps> = ({
 
   return (
     <ReorModal isOpen={isOpen} onClose={onClose}>
-      <div className="ml-6 mt-2 mb-6 w-[800px] h-full">
+      <div className="ml-6 mt-2 mb-6 mr-6 w-[800px] h-full">
         <h2 className="text-xl font-semibold mb-3 text-white">
           Select a file to generate flashcards for:
           <input
diff --git a/src/components/Flashcard/FlashcardMenuModal.tsx b/src/components/Flashcard/FlashcardMenuModal.tsx
index 9b1e94d2..b98faf32 100644
--- a/src/components/Flashcard/FlashcardMenuModal.tsx
+++ b/src/components/Flashcard/FlashcardMenuModal.tsx
@@ -36,7 +36,6 @@ const FlashcardMenuModal: React.FC<FlashcardMenuModalProps> = ({
     <ReorModal
       isOpen={isOpen}
       onClose={onClose}
-      width="750px"
       // tailwindStylesOnBackground="bg-gradient-to-r from-orange-900 to-yellow-900"
     >
       <div className="ml-6 mr-6 mt-2 mb-6 w-full h-full flex-col align-center justify-center">
diff --git a/src/components/Flashcard/FlashcardReviewModal.tsx b/src/components/Flashcard/FlashcardReviewModal.tsx
index 4b03d54e..0da5a793 100644
--- a/src/components/Flashcard/FlashcardReviewModal.tsx
+++ b/src/components/Flashcard/FlashcardReviewModal.tsx
@@ -53,8 +53,8 @@ const FlashcardReviewModal: React.FC<FlashcardReviewModalProps> = ({
   }, [selectedFlashcardFile]);
 
   return (
-    <ReorModal isOpen={isOpen} onClose={onClose} width="750px">
-      <div className="ml-6 mt-2 mb-6 w-full h-full w-[200px] flex-col ">
+    <ReorModal isOpen={isOpen} onClose={onClose}>
+      <div className="ml-6 mt-2 mb-6 w-[800px] h-full flex-col  ">
         <h2 className="text-xl font-semibold mb-3 text-white">
           Flashcard Review Mode
         </h2>
diff --git a/src/components/Settings/EmbeddingSettings/modals/NewLocalEmbeddingModel.tsx b/src/components/Settings/EmbeddingSettings/modals/NewLocalEmbeddingModel.tsx
index 3ef64149..e59a9fcc 100644
--- a/src/components/Settings/EmbeddingSettings/modals/NewLocalEmbeddingModel.tsx
+++ b/src/components/Settings/EmbeddingSettings/modals/NewLocalEmbeddingModel.tsx
@@ -53,11 +53,7 @@ const NewLocalEmbeddingModelModal: React.FC<
   };
 
   return (
-    <ReorModal
-      isOpen={isOpen}
-      onClose={saveModelConfigToElectronStore}
-      width="500px"
-    >
+    <ReorModal isOpen={isOpen} onClose={saveModelConfigToElectronStore}>
       <div className="w-[400px] ml-2 mr-2 mb-2 pl-3">
         <h3 className="text-white font-semibold mb-0">
           Upload and attach local model
diff --git a/src/components/Settings/EmbeddingSettings/modals/NewRemoteEmbeddingModel.tsx b/src/components/Settings/EmbeddingSettings/modals/NewRemoteEmbeddingModel.tsx
index a2770f10..4b39b347 100644
--- a/src/components/Settings/EmbeddingSettings/modals/NewRemoteEmbeddingModel.tsx
+++ b/src/components/Settings/EmbeddingSettings/modals/NewRemoteEmbeddingModel.tsx
@@ -46,11 +46,7 @@ const NewRemoteEmbeddingModelModal: React.FC<
   };
 
   return (
-    <ReorModal
-      isOpen={isOpen}
-      onClose={saveModelConfigToElectronStore}
-      width="500px"
-    >
+    <ReorModal isOpen={isOpen} onClose={saveModelConfigToElectronStore}>
       <div className="w-[400px] ml-2 mr-2 mb-2 pl-3">
         <h2 className="text-white  font-semibold mb-0">Set up remote model</h2>
         <p className="text-white text-sm mb-6 mt-2 text-xs">
diff --git a/src/components/Settings/LLMSettings/InitialSetupLLMSettings.tsx b/src/components/Settings/LLMSettings/InitialSetupLLMSettings.tsx
index 2195c8d7..db6f6462 100644
--- a/src/components/Settings/LLMSettings/InitialSetupLLMSettings.tsx
+++ b/src/components/Settings/LLMSettings/InitialSetupLLMSettings.tsx
@@ -60,7 +60,6 @@ const InitialSetupLLMSettings: React.FC<InitialSetupLLMSettingsProps> = ({
             setIsSetupModalOpen(false);
             fetchAndUpdateModelConfigs();
           }}
-          width="500px"
         >
           <LLMSettingsContent
             userHasCompleted={userHasCompleted}
diff --git a/src/components/Settings/LLMSettings/modals/CloudLLMSetup.tsx b/src/components/Settings/LLMSettings/modals/CloudLLMSetup.tsx
index 12644d8f..b23c5025 100644
--- a/src/components/Settings/LLMSettings/modals/CloudLLMSetup.tsx
+++ b/src/components/Settings/LLMSettings/modals/CloudLLMSetup.tsx
@@ -59,7 +59,7 @@ const CloudLLMSetupModal: React.FC<CloudLLMSetupModalProps> = ({
   };
 
   return (
-    <ReorModal isOpen={isOpen} onClose={handleSave} width="500px">
+    <ReorModal isOpen={isOpen} onClose={handleSave}>
       <div className="w-[300px] ml-3 mr-2 mb-2">
         <h3 className="font-semibold mb-0 text-white">
           {LLMDisplayName} Setup
diff --git a/src/components/Settings/LLMSettings/modals/NewOllamaModel.tsx b/src/components/Settings/LLMSettings/modals/NewOllamaModel.tsx
index f2498809..6b7e362f 100644
--- a/src/components/Settings/LLMSettings/modals/NewOllamaModel.tsx
+++ b/src/components/Settings/LLMSettings/modals/NewOllamaModel.tsx
@@ -81,7 +81,7 @@ const NewOllamaModelModal: React.FC<NewOllamaModelModalProps> = ({
   }, []);
 
   return (
-    <ReorModal isOpen={isOpen} onClose={onClose} width="500px">
+    <ReorModal isOpen={isOpen} onClose={onClose}>
       <div className="w-[400px] ml-2 mr-2 mb-2 pl-3">
         <h2 className="text-white  font-semibold mb-0">New Local LLM</h2>
         <p className="text-white text-xs mb-6 mt-1">
diff --git a/src/components/Settings/LLMSettings/modals/RemoteLLMSetup.tsx b/src/components/Settings/LLMSettings/modals/RemoteLLMSetup.tsx
index 083b75fc..e5468b7c 100644
--- a/src/components/Settings/LLMSettings/modals/RemoteLLMSetup.tsx
+++ b/src/components/Settings/LLMSettings/modals/RemoteLLMSetup.tsx
@@ -66,7 +66,7 @@ const RemoteLLMSetupModal: React.FC<RemoteLLMModalProps> = ({
     }
   };
   return (
-    <ReorModal isOpen={isOpen} onClose={handleClose} width="500px">
+    <ReorModal isOpen={isOpen} onClose={handleClose}>
       <div className="w-[400px] ml-3 mr-2 mb-2">
         <h2 className="font-semibold mb-0 text-white">Remote LLM Setup</h2>
         <p className="text-gray-100 mb-2 mt-2 text-sm">
diff --git a/src/components/Settings/Settings.tsx b/src/components/Settings/Settings.tsx
index bf6b4344..b2aa3e6f 100644
--- a/src/components/Settings/Settings.tsx
+++ b/src/components/Settings/Settings.tsx
@@ -48,18 +48,8 @@ const SettingsModal: React.FC<ModalProps> = ({
         handleSave();
       }}
     >
-      <div className="flex w-full h-full">
-        <div className="flex flex-col w-[150px] h-[600px] bg-dark-gray-c-seven text-white border-r-[0.1px] border-gray-700 border-solid border-b-0 border-t-0 border-l-0 p-2">
-          {/* <div
-            className={`flex items-center mt-2 rounded cursor-pointer p-2 border-b border-gray-200 hover:bg-neutral-600 text-sm ${
-              activeTab === SettingsTab.GeneralSettings
-                ? "bg-neutral-700 text-white font-semibold"
-                : "text-gray-200"
-            }`}
-            onClick={() => setActiveTab(SettingsTab.GeneralSettings)}
-          >
-            General
-          </div> */}
+      <div className="flex w-[850px] h-[600px]">
+        <div className="flex flex-col w-[150px] h-full bg-dark-gray-c-seven text-white border-r-[0.1px] border-gray-700 border-solid border-b-0 border-t-0 border-l-0 p-2">
           <div
             className={`flex items-center rounded cursor-pointer p-2 border-b border-gray-200 hover:bg-neutral-600 text-sm ${
               activeTab === SettingsTab.LLMSettings
@@ -124,7 +114,7 @@ const SettingsModal: React.FC<ModalProps> = ({
         </div>
 
         {/* Right Content Area */}
-        <div className="w-full h-[600px] flex-1 ml-2 pl-16 pr-16">
+        <div className="w-full h-full flex-1 ml-2 pl-16 pr-16">
           {/* <h2 className="text-2xl font-semibold mb-4 text-white">Settings</h2> */}
           {activeTab === SettingsTab.GeneralSettings && (
             <div className="w-full h-full">
@@ -155,28 +145,6 @@ const SettingsModal: React.FC<ModalProps> = ({
               <AnalyticsSettings />
             </div>
           )}
-
-          {/* {activeTab === SettingsTab.RAG && (
-            <div className="w-full">
-              <h2 className="text-2xl font-semibold mb-5 text-white">RAG</h2>{" "}
-              <RagSettings>
-                <p className="mt-5 text-sm text-gray-100 mb-1 flex pb-3">
-                  Number of notes to feed to the LLM during Q&A
-                </p>
-              </RagSettings>
-              <ChunkSizeSettings>
-                <p className="mt-5 text-sm text-gray-100 mb-1 flex pb-3">
-                  Change the Chunk Size
-                </p>
-              </ChunkSizeSettings>
-            </div>
-          )} */}
-
-          {activeTab === SettingsTab.GeneralSettings && (
-            <div className="w-full">
-              <GeneralSettings />
-            </div>
-          )}
         </div>
       </div>
     </ReorModal>

From 7ae9fb58f3fb960064d73eb1cb823eb135516112 Mon Sep 17 00:00:00 2001
From: joseplayero <claudeshannon11@outlook.com>
Date: Wed, 10 Jul 2024 23:12:31 +0100
Subject: [PATCH 3/4] fix flashcards width

---
 src/components/Flashcard/FlashcardsCore.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/Flashcard/FlashcardsCore.tsx b/src/components/Flashcard/FlashcardsCore.tsx
index 7a17af8f..b9c5abc9 100644
--- a/src/components/Flashcard/FlashcardsCore.tsx
+++ b/src/components/Flashcard/FlashcardsCore.tsx
@@ -42,8 +42,8 @@ export const FlashcardCore = ({
             flipDirection="vertical"
           >
             <Button
-              className="bg-orange-900  mt-3 mb-2 border-none rounded-md h-10
-            cursor-pointer w-[900px] h-full
+              className="bg-orange-900  mt-3 mb-2 border-none rounded-md 
+            cursor-pointer w-full h-full
             text-center text-lg normal-case"
               onClick={() =>
                 updateFlashcardUnderReview(currentSelectedFlashcard, {
@@ -60,8 +60,8 @@ export const FlashcardCore = ({
             </Button>
             {flashcardQAPairs[currentSelectedFlashcard].isFlipped && ( // this boolean is required to ensure that we check the flipped boolean to prevent the answer from leaking
               <Button
-                className="bg-slate-700 mt-3 mb-2 border-none rounded-md h-10
-              hover:bg-slate-900 cursor-pointer w-[900px] h-full
+                className="bg-slate-700 mt-3 mb-2 border-none rounded-md 
+              hover:bg-slate-900 cursor-pointer w-full h-full
               text-center text-lg normal-case"
                 onClick={() =>
                   updateFlashcardUnderReview(currentSelectedFlashcard, {

From 062ab2f521daa14c6dece98f532f4a776e226be1 Mon Sep 17 00:00:00 2001
From: joseplayero <claudeshannon11@outlook.com>
Date: Wed, 10 Jul 2024 23:46:32 +0100
Subject: [PATCH 4/4] fix bugs with select

---
 src/components/Common/Select.tsx              |  6 ++---
 .../Flashcard/FlashcardReviewModal.tsx        |  5 ++--
 src/components/Settings/ChunkSizeSettings.tsx | 18 +++++++-------
 .../InitialEmbeddingSettings.tsx              | 24 ++++++++++---------
 .../Settings/InitialSettingsSinglePage.tsx    |  2 +-
 .../LLMSettings/DefaultLLMSelector.tsx        | 20 ----------------
 .../LLMSettings/LLMSettingsContent.tsx        |  2 +-
 7 files changed, 31 insertions(+), 46 deletions(-)

diff --git a/src/components/Common/Select.tsx b/src/components/Common/Select.tsx
index 953a70a3..3855ef28 100644
--- a/src/components/Common/Select.tsx
+++ b/src/components/Common/Select.tsx
@@ -60,9 +60,9 @@ const CustomSelect: React.FC<CustomSelectProps> = ({
   };
 
   return (
-    <div className="flex flex-end" ref={wrapperRef}>
+    <div className="flex flex-end w-full" ref={wrapperRef}>
       <div
-        className="flex justify-between items-center w-[192px] py-2 border border-gray-300 rounded-md cursor-pointer bg-dark-gray-c-eight hover:bg-dark-gray-c-ten"
+        className="flex justify-between w-full items-center  py-2 border border-gray-300 rounded-md cursor-pointer bg-dark-gray-c-eight hover:bg-dark-gray-c-ten"
         onClick={toggleDropdown}
       >
         {centerText ? <span></span> : null}
@@ -76,7 +76,7 @@ const CustomSelect: React.FC<CustomSelectProps> = ({
       </div>
       {isOpen && (
         <div
-          className="absolute w-[192px] text-[13px] border text-gray-600 border-gray-300 rounded-md shadow-lg z-10 bg-white max-h-60 overflow-auto"
+          className="absolute  text-[13px] border text-gray-600 border-gray-300 rounded-md shadow-lg z-10 bg-white max-h-60 overflow-auto"
           style={{
             position: "fixed",
             top: "auto",
diff --git a/src/components/Flashcard/FlashcardReviewModal.tsx b/src/components/Flashcard/FlashcardReviewModal.tsx
index 0da5a793..d5786491 100644
--- a/src/components/Flashcard/FlashcardReviewModal.tsx
+++ b/src/components/Flashcard/FlashcardReviewModal.tsx
@@ -54,12 +54,12 @@ const FlashcardReviewModal: React.FC<FlashcardReviewModalProps> = ({
 
   return (
     <ReorModal isOpen={isOpen} onClose={onClose}>
-      <div className="ml-6 mt-2 mb-6 w-[800px] h-full flex-col  ">
+      <div className="ml-6 mt-2 mb-6 mr-6 w-[800px] h-full flex-col  ">
         <h2 className="text-xl font-semibold mb-3 text-white">
           Flashcard Review Mode
         </h2>
 
-        <div className="py-2">
+        <div className="py-2 w-full mb-2">
           <CustomSelect
             options={flashcardFiles.map((file) => {
               return { label: file, value: file };
@@ -69,6 +69,7 @@ const FlashcardReviewModal: React.FC<FlashcardReviewModalProps> = ({
               setCurrentSelectedFlashcard(0);
               setSelectedFlashcardFile(value);
             }}
+            // className="w-full"
           />
         </div>
 
diff --git a/src/components/Settings/ChunkSizeSettings.tsx b/src/components/Settings/ChunkSizeSettings.tsx
index dae6751f..d43383ab 100644
--- a/src/components/Settings/ChunkSizeSettings.tsx
+++ b/src/components/Settings/ChunkSizeSettings.tsx
@@ -43,14 +43,16 @@ const ChunkSizeSettings: React.FC<ChunkSizeSettingsProps> = ({ children }) => {
     <div className="flex justify-between items-center w-full gap-5 border-b-2 border-solid border-neutral-700 border-0 pb-2 pt-3">
       {children}
       {chunkSize && (
-        <CustomSelect
-          options={possibleChunkSizes.map((num) => ({
-            label: num.toString(),
-            value: num.toString(),
-          }))}
-          selectedValue={chunkSize?.toString()}
-          onChange={handleChangeOnChunkSizeSelect}
-        />
+        <div className="w-[140px]">
+          <CustomSelect
+            options={possibleChunkSizes.map((num) => ({
+              label: num.toString(),
+              value: num.toString(),
+            }))}
+            selectedValue={chunkSize?.toString()}
+            onChange={handleChangeOnChunkSizeSelect}
+          />
+        </div>
       )}
     </div>
   );
diff --git a/src/components/Settings/EmbeddingSettings/InitialEmbeddingSettings.tsx b/src/components/Settings/EmbeddingSettings/InitialEmbeddingSettings.tsx
index b3a927ef..3047db30 100644
--- a/src/components/Settings/EmbeddingSettings/InitialEmbeddingSettings.tsx
+++ b/src/components/Settings/EmbeddingSettings/InitialEmbeddingSettings.tsx
@@ -94,17 +94,19 @@ const InitialEmbeddingModelSettings: React.FC<
         value={selectedModel}
         onChange={handleChangeOnModelSelect}
       /> */}
-      <CustomSelect
-        options={Object.keys(embeddingModels).map((model) => {
-          return { label: model, value: model };
-        })}
-        selectedValue={selectedModel}
-        onChange={handleChangeOnModelSelect}
-        addButton={{
-          label: "Attach a Custom Embedding Model",
-          onClick: () => setShowNewEmbeddingModelModal(true),
-        }}
-      />
+      <div className="w-[200px]">
+        <CustomSelect
+          options={Object.keys(embeddingModels).map((model) => {
+            return { label: model, value: model };
+          })}
+          selectedValue={selectedModel}
+          onChange={handleChangeOnModelSelect}
+          addButton={{
+            label: "Attach a Custom Embedding Model",
+            onClick: () => setShowNewEmbeddingModelModal(true),
+          }}
+        />
+      </div>
       <NewEmbeddingModelModalBothTypes
         isOpen={showNewEmbeddingModelModal}
         onClose={() => {
diff --git a/src/components/Settings/InitialSettingsSinglePage.tsx b/src/components/Settings/InitialSettingsSinglePage.tsx
index 8b57c4cd..28caa325 100644
--- a/src/components/Settings/InitialSettingsSinglePage.tsx
+++ b/src/components/Settings/InitialSettingsSinglePage.tsx
@@ -33,7 +33,7 @@ const InitialSetupSinglePage: React.FC<OldInitialSettingsProps> = ({
       onClose={() => console.log("Not allowing a close for now")}
       hideCloseButton={true}
     >
-      <div className="max-w-[550px] mr-4 ml-2 py-3">
+      <div className="w-[620px] mr-4 ml-2 py-3">
         <div className="ml-2 mt-0 h-[450px]  ">
           <h2 className="text-2xl font-semibold mb-0 text-white text-center">
             Welcome to the Reor Project.
diff --git a/src/components/Settings/LLMSettings/DefaultLLMSelector.tsx b/src/components/Settings/LLMSettings/DefaultLLMSelector.tsx
index 4d2fc6e4..4ba8b467 100644
--- a/src/components/Settings/LLMSettings/DefaultLLMSelector.tsx
+++ b/src/components/Settings/LLMSettings/DefaultLLMSelector.tsx
@@ -18,26 +18,6 @@ const DefaultLLMSelector: React.FC<DefaultLLMSelectorProps> = ({
   defaultLLM,
   setDefaultLLM,
 }) => {
-  // const [llmConfigs, setLLMConfigs] = useState<LLMConfig[]>([]);
-  // const [defaultModel, setDefaultModel] = useState("");
-
-  // useEffect(() => {
-  //   const fetchAndUpdateModelConfigs = async () => {
-  //     try {
-  //       const fetchedLLMConfigs = await window.llm.getLLMConfigs();
-  //       setLLMConfigs(fetchedLLMConfigs);
-  //       const defaultModelName = await window.llm.getDefaultLLMName();
-  //       setDefaultModel(defaultModelName);
-  //       onModelChange(defaultModelName);
-  //     } catch (error) {
-  //       console.error("Failed to fetch model configurations:", error);
-  //       onModelError("Failed to fetch model configurations");
-  //     }
-  //   };
-
-  //   fetchAndUpdateModelConfigs();
-  // }, []);
-
   const handleDefaultModelChange = (selectedModel: string) => {
     setDefaultLLM(selectedModel);
     window.llm.setDefaultLLM(selectedModel);
diff --git a/src/components/Settings/LLMSettings/LLMSettingsContent.tsx b/src/components/Settings/LLMSettings/LLMSettingsContent.tsx
index effd7ecb..f83086ce 100644
--- a/src/components/Settings/LLMSettings/LLMSettingsContent.tsx
+++ b/src/components/Settings/LLMSettings/LLMSettingsContent.tsx
@@ -52,7 +52,7 @@ const LLMSettingsContent: React.FC<LLMSettingsContentProps> = ({
       {llmConfigs.length > 0 && (
         <div className="flex justify-between items-center w-full gap-5 border-b-2 border-solid border-neutral-700 border-0 pb-2">
           <h4 className="text-gray-200 text-center font-normal">Default LLM</h4>
-          <div className="mb-1">
+          <div className="mb-1 w-[140px]">
             <DefaultLLMSelector
               onModelChange={handleModelChange}
               llmConfigs={llmConfigs}