folders (#108)

* folders

* fixes

* storage fix

pages/index.tsx

@@ -1,16 +1,18 @@
 import { Chat } from "@/components/Chat/Chat";
 import { Navbar } from "@/components/Mobile/Navbar";
 import { Sidebar } from "@/components/Sidebar/Sidebar";
-import { ChatBody, Conversation, KeyValuePair, Message, OpenAIModel, OpenAIModelID, OpenAIModels } from "@/types";
+import { ChatBody, ChatFolder, Conversation, KeyValuePair, Message, OpenAIModel, OpenAIModelID, OpenAIModels } from "@/types";
 import { cleanConversationHistory, cleanSelectedConversation } from "@/utils/app/clean";
 import { DEFAULT_SYSTEM_PROMPT } from "@/utils/app/const";
 import { saveConversation, saveConversations, updateConversation } from "@/utils/app/conversation";
-import { exportConversations, importConversations } from "@/utils/app/data";
+import { saveFolders } from "@/utils/app/folders";
+import { exportConversations, importConversations } from "@/utils/app/importExport";
 import { IconArrowBarLeft, IconArrowBarRight } from "@tabler/icons-react";
 import Head from "next/head";
 import { useEffect, useRef, useState } from "react";
 
 export default function Home() {
+  const [folders, setFolders] = useState<ChatFolder[]>([]);
   const [conversations, setConversations] = useState<Conversation[]>([]);
   const [selectedConversation, setSelectedConversation] = useState<Conversation>();
   const [loading, setLoading] = useState<boolean>(false);
@@ -21,6 +23,8 @@ export default function Home() {
   const [apiKey, setApiKey] = useState<string>("");
   const [messageError, setMessageError] = useState<boolean>(false);
   const [modelError, setModelError] = useState<boolean>(false);
+  const [isUsingEnv, setIsUsingEnv] = useState<boolean>(false);
+
   const stopConversationRef = useRef<boolean>(false);
 
   const handleSend = async (message: Message, isResend: boolean) => {
@@ -201,6 +205,11 @@ export default function Home() {
     localStorage.setItem("apiKey", apiKey);
   };
 
+  const handleEnvChange = (isUsingEnv: boolean) => {
+    setIsUsingEnv(isUsingEnv);
+    localStorage.setItem("isUsingEnv", isUsingEnv.toString());
+  };
+
   const handleExportConversations = () => {
     exportConversations();
   };
@@ -216,6 +225,55 @@ export default function Home() {
     saveConversation(conversation);
   };
 
+  const handleCreateFolder = (name: string) => {
+    const lastFolder = folders[folders.length - 1];
+
+    const newFolder: ChatFolder = {
+      id: lastFolder ? lastFolder.id + 1 : 1,
+      name
+    };
+
+    const updatedFolders = [...folders, newFolder];
+
+    setFolders(updatedFolders);
+    saveFolders(updatedFolders);
+  };
+
+  const handleDeleteFolder = (folderId: number) => {
+    const updatedFolders = folders.filter((f) => f.id !== folderId);
+    setFolders(updatedFolders);
+    saveFolders(updatedFolders);
+
+    const updatedConversations: Conversation[] = conversations.map((c) => {
+      if (c.folderId === folderId) {
+        return {
+          ...c,
+          folderId: 0
+        };
+      }
+
+      return c;
+    });
+    setConversations(updatedConversations);
+    saveConversations(updatedConversations);
+  };
+
+  const handleUpdateFolder = (folderId: number, name: string) => {
+    const updatedFolders = folders.map((f) => {
+      if (f.id === folderId) {
+        return {
+          ...f,
+          name
+        };
+      }
+
+      return f;
+    });
+
+    setFolders(updatedFolders);
+    saveFolders(updatedFolders);
+  };
+
   const handleNewConversation = () => {
     const lastConversation = conversations[conversations.length - 1];
 
@@ -224,7 +282,8 @@ export default function Home() {
       name: `Conversation ${lastConversation ? lastConversation.id + 1 : 1}`,
       messages: [],
       model: OpenAIModels[OpenAIModelID.GPT_3_5],
-      prompt: DEFAULT_SYSTEM_PROMPT
+      prompt: DEFAULT_SYSTEM_PROMPT,
+      folderId: 0
     };
 
     const updatedConversations = [...conversations, newConversation];
@@ -252,7 +311,8 @@ export default function Home() {
         name: "New conversation",
         messages: [],
         model: OpenAIModels[OpenAIModelID.GPT_3_5],
-        prompt: DEFAULT_SYSTEM_PROMPT
+        prompt: DEFAULT_SYSTEM_PROMPT,
+        folderId: 0
       });
       localStorage.removeItem("selectedConversation");
     }
@@ -279,9 +339,16 @@ export default function Home() {
       name: "New conversation",
       messages: [],
       model: OpenAIModels[OpenAIModelID.GPT_3_5],
-      prompt: DEFAULT_SYSTEM_PROMPT
+      prompt: DEFAULT_SYSTEM_PROMPT,
+      folderId: 0
     });
     localStorage.removeItem("selectedConversation");
+
+    setFolders([]);
+    localStorage.removeItem("folders");
+
+    setIsUsingEnv(false);
+    localStorage.removeItem("isUsingEnv");
   };
 
   useEffect(() => {
@@ -308,10 +375,21 @@ export default function Home() {
       fetchModels(apiKey);
     }
 
+    const usingEnv = localStorage.getItem("isUsingEnv");
+    if (usingEnv) {
+      setIsUsingEnv(usingEnv === "true");
+      fetchModels("");
+    }
+
     if (window.innerWidth < 640) {
       setShowSidebar(false);
     }
 
+    const folders = localStorage.getItem("folders");
+    if (folders) {
+      setFolders(JSON.parse(folders));
+    }
+
     const conversationHistory = localStorage.getItem("conversationHistory");
     if (conversationHistory) {
       const parsedConversationHistory: Conversation[] = JSON.parse(conversationHistory);
@@ -330,7 +408,8 @@ export default function Home() {
         name: "New conversation",
         messages: [],
         model: OpenAIModels[OpenAIModelID.GPT_3_5],
-        prompt: DEFAULT_SYSTEM_PROMPT
+        prompt: DEFAULT_SYSTEM_PROMPT,
+        folderId: 0
       });
     }
   }, []);
@@ -370,7 +449,11 @@ export default function Home() {
                   lightMode={lightMode}
                   selectedConversation={selectedConversation}
                   apiKey={apiKey}
+                  folders={folders}
                   onToggleLightMode={handleLightMode}
+                  onCreateFolder={handleCreateFolder}
+                  onDeleteFolder={handleDeleteFolder}
+                  onUpdateFolder={handleUpdateFolder}
                   onNewConversation={handleNewConversation}
                   onSelectConversation={handleSelectConversation}
                   onDeleteConversation={handleDeleteConversation}
@@ -398,6 +481,7 @@ export default function Home() {
               conversation={selectedConversation}
               messageIsStreaming={messageIsStreaming}
               apiKey={apiKey}
+              isUsingEnv={isUsingEnv}
               modelError={modelError}
               messageError={messageError}
               models={models}
@@ -405,6 +489,7 @@ export default function Home() {
               lightMode={lightMode}
               onSend={handleSend}
               onUpdateConversation={handleUpdateConversation}
+              onAcceptEnv={handleEnvChange}
               stopConversationRef={stopConversationRef}
             />
           </article>