Save chat history locally (#267)

frontend/app/chat/hooks/useQuestion.ts

@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useEffect, useState } from "react";
 
 import { useSupabase } from "@/app/supabase-provider";
 import { useBrainConfig } from "@/lib/context/BrainConfigProvider/hooks/useBrainConfig";
@@ -17,6 +17,16 @@ export const useQuestion = () => {
     redirect("/login");
   }
 
+  useEffect(()=>{
+    // Check if history exists in local storage. If it does, fetch it and set it as history
+    (async ()=>{
+      const localHistory = await localStorage.getItem('history')
+      if(localHistory){
+        setHistory(JSON.parse(localHistory))
+      }
+    })()
+  }, [])
+  
   const askQuestion = async () => {
     setHistory((hist) => [...hist, ["user", question]]);
     setIsPending(true);
@@ -29,15 +39,22 @@ export const useQuestion = () => {
       max_tokens: maxTokens,
     });
     setHistory(response.data.history);
+    localStorage.setItem('history', JSON.stringify(response.data.history))
     setQuestion("");
     setIsPending(false);
   };
 
+  const resetHistory = () => {
+    localStorage.setItem('history', JSON.stringify([]))
+    setHistory([])
+  }
+
   return {
     isPending,
     history,
     question,
     setQuestion,
+    resetHistory,
     askQuestion,
   };
 };

frontend/app/chat/page.tsx

@@ -1,6 +1,6 @@
 "use client";
 import Link from "next/link";
-import { MdMic, MdMicOff, MdSettings } from "react-icons/md";
+import { MdAutorenew, MdMic, MdMicOff, MdSettings } from "react-icons/md";
 import Button from "../components/ui/Button";
 import Card from "../components/ui/Card";
 import PageHeading from "../components/ui/PageHeading";
@@ -9,7 +9,7 @@ import { useQuestion } from "./hooks/useQuestion";
 import { useSpeech } from "./hooks/useSpeech";
 
 export default function ChatPage() {
-  const { history, isPending, question, askQuestion, setQuestion } =
+  const { history, isPending, question, askQuestion, setQuestion, resetHistory } =
     useQuestion();
   const { isListening, speechSupported, startListening } = useSpeech();
 
@@ -48,6 +48,16 @@ export default function ChatPage() {
             <Button type="submit" isLoading={isPending}>
               {isPending ? "Thinking..." : "Chat"}
             </Button>
+            {/* Reset Button */}
+            <Button
+              className="px-3"
+              variant={"tertiary"}
+              type="button"
+              onClick={resetHistory}
+              disabled={isPending}
+            >
+              <MdAutorenew className="text-2xl" />
+            </Button>
             {/* Mic Button */}
             <Button
               className="px-3"