Merge pull request #306 from reorproject/fix-flashcards

Fix flashcards

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>

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}
-      widthType="indexingProgress"
     >
       <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">

src/components/Common/Modal.tsx

@@ -6,58 +6,17 @@ interface ModalProps {
   children: React.ReactNode;
   hideCloseButton?: boolean;
   tailwindStylesOnBackground?: string;
-  widthType?: ModalWidthType;
 }
 
-/*
- * 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,
 }) => {
   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)) {
@@ -78,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-${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  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 && (

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",

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}>
       <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

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}>
       <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

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}>
       <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

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}>
       <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

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

src/components/Flashcard/FlashcardMenuModal.tsx

@@ -36,7 +36,6 @@ const FlashcardMenuModal: React.FC<FlashcardMenuModalProps> = ({
     <ReorModal
       isOpen={isOpen}
       onClose={onClose}
-      widthType="flashcardMode"
       // 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">

src/components/Flashcard/FlashcardReviewModal.tsx

@@ -53,17 +53,13 @@ const FlashcardReviewModal: React.FC<FlashcardReviewModalProps> = ({
   }, [selectedFlashcardFile]);
 
   return (
-    <ReorModal
-      isOpen={isOpen}
-      onClose={onClose}
-      widthType="flashcardReviewMode"
-    >
-      <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 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 };
@@ -73,6 +69,7 @@ const FlashcardReviewModal: React.FC<FlashcardReviewModalProps> = ({
               setCurrentSelectedFlashcard(0);
               setSelectedFlashcardFile(value);
             }}
+            // className="w-full"
           />
         </div>
 

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, {

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,
                 });

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>
   );

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={() => {

src/components/Settings/EmbeddingSettings/modals/NewLocalEmbeddingModel.tsx

@@ -53,11 +53,7 @@ const NewLocalEmbeddingModelModal: React.FC<
   };
 
   return (
-    <ReorModal
-      isOpen={isOpen}
-      onClose={saveModelConfigToElectronStore}
-      widthType="newEmbeddingModel"
-    >
+    <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

src/components/Settings/EmbeddingSettings/modals/NewRemoteEmbeddingModel.tsx

@@ -46,11 +46,7 @@ const NewRemoteEmbeddingModelModal: React.FC<
   };
 
   return (
-    <ReorModal
-      isOpen={isOpen}
-      onClose={saveModelConfigToElectronStore}
-      widthType="newEmbeddingModel"
-    >
+    <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">

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.

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);

src/components/Settings/LLMSettings/InitialSetupLLMSettings.tsx

@@ -60,7 +60,6 @@ const InitialSetupLLMSettings: React.FC<InitialSetupLLMSettingsProps> = ({
             setIsSetupModalOpen(false);
             fetchAndUpdateModelConfigs();
           }}
-          widthType="newNote"
         >
           <LLMSettingsContent
             userHasCompleted={userHasCompleted}

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}

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}>
       <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: "",

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}>
       <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">