Persist chat config (#2367)

Closes #2224

Author: AbdBarho

website/src/components/Chat/ChatSection.tsx

@@ -1,4 +1,5 @@
 import { FormProvider, useForm } from "react-hook-form";
+import { getCachedChatForm, useCacheChatForm } from "src/hooks/chat/useCacheConfig";
 import { ChatConfigForm } from "src/types/Chat";
 
 import { ChatConfigSummary } from "./ChatConfigSummary";
@@ -10,12 +11,16 @@ export const ChatSection = ({ chatId }: { chatId: string }) => {
 
   console.assert(modelInfos.length > 0, "No model config was found");
   const form = useForm<ChatConfigForm>({
-    defaultValues: {
+    //NOTE: we should at some point validate the cache, in case models were added or deleted
+    // or certain parameters disabled
+    defaultValues: getCachedChatForm() ?? {
       ...modelInfos[0].parameter_configs[0].sampling_parameters,
       model_config_name: modelInfos[0].name,
     },
   });
 
+  useCacheChatForm(form);
+
   return (
     <FormProvider {...form}>
       <ChatConversation chatId={chatId} />

website/src/hooks/chat/useCacheConfig.ts

@@ -0,0 +1,25 @@
+import { useEffect } from "react";
+import { UseFormReturn } from "react-hook-form";
+import { ChatConfigForm } from "src/types/Chat";
+
+const CHAT_CONFIG_KEY = "CHAT_CONFIG";
+
+export const getCachedChatForm = (): ChatConfigForm | null => {
+  if (typeof localStorage !== "undefined") {
+    const oldConfig = localStorage.getItem(CHAT_CONFIG_KEY);
+    if (oldConfig) {
+      return JSON.parse(oldConfig);
+    }
+  }
+  return null;
+};
+
+export const useCacheChatForm = (form: UseFormReturn<ChatConfigForm>) => {
+  const config = form.watch();
+
+  useEffect(() => {
+    if (typeof localStorage !== "undefined") {
+      localStorage.setItem(CHAT_CONFIG_KEY, JSON.stringify(config));
+    }
+  }, [config]);
+};