From a0ceea52580ad0aac4bbd908728ac123edf374e8 Mon Sep 17 00:00:00 2001
From: AbdBarho <ka70911@gmail.com>
Date: Sat, 22 Apr 2023 17:28:10 +0200
Subject: [PATCH 1/4] Fix saving model between chats

---
 website/src/components/Chat/ChatConfigForm.tsx  | 13 ++++++++++---
 website/src/components/Chat/ChatConfigSaver.tsx |  9 +++------
 2 files changed, 13 insertions(+), 9 deletions(-)

diff --git a/website/src/components/Chat/ChatConfigForm.tsx b/website/src/components/Chat/ChatConfigForm.tsx
index 94032cefda..560b6e0773 100644
--- a/website/src/components/Chat/ChatConfigForm.tsx
+++ b/website/src/components/Chat/ChatConfigForm.tsx
@@ -17,7 +17,7 @@ import {
   Tooltip,
 } from "@chakra-ui/react";
 import { useTranslation } from "next-i18next";
-import { ChangeEvent, memo, useCallback, useState } from "react";
+import { ChangeEvent, memo, SyntheticEvent, useCallback, useState } from "react";
 import { Controller, useFormContext, useWatch } from "react-hook-form";
 import { ChatConfigFormData, SamplingParameters } from "src/types/Chat";
 
@@ -85,7 +85,7 @@ export const ChatConfigForm = memo(function ChatConfigForm() {
   const { t } = useTranslation("chat");
   const { modelInfos } = useChatContext();
 
-  const { control, register, reset, getValues } = useFormContext<ChatConfigFormData>();
+  const { control, register, reset, getValues, setValue } = useFormContext<ChatConfigFormData>();
   const selectedModel = useWatch({ name: "model_config_name", control: control });
   const presets = modelInfos.find((model) => model.name === selectedModel)!.parameter_configs;
   const [selectedPresetName, setSelectedPresetName] = useState(
@@ -105,11 +105,18 @@ export const ChatConfigForm = memo(function ChatConfigForm() {
     [presets, reset, selectedModel]
   );
 
+  // I have no idea why we need to do this manually, it seems that the model name keeps resetting if we are just using
+  // react-form default "register"
+  const handleModelChange = useCallback(
+    (e: SyntheticEvent<HTMLSelectElement>) => setValue("model_config_name", e.currentTarget.value),
+    [setValue]
+  );
+
   return (
     <Stack gap="4">
       <FormControl>
         <FormLabel>{t("model")}</FormLabel>
-        <Select {...register("model_config_name")}>
+        <Select {...register("model_config_name")} onChange={handleModelChange}>
           {modelInfos.map(({ name }) => (
             <option value={name} key={name}>
               {name}
diff --git a/website/src/components/Chat/ChatConfigSaver.tsx b/website/src/components/Chat/ChatConfigSaver.tsx
index 2d258d0a09..698317d09f 100644
--- a/website/src/components/Chat/ChatConfigSaver.tsx
+++ b/website/src/components/Chat/ChatConfigSaver.tsx
@@ -4,14 +4,11 @@ import { ChatConfigFormData } from "src/types/Chat";
 import { setConfigCache } from "src/utils/chat";
 
 export const ChatConfigSaver = () => {
-  const { watch, formState } = useFormContext<ChatConfigFormData>();
+  const { watch } = useFormContext<ChatConfigFormData>();
   const config = watch();
   useEffect(() => {
-    // only update when form is changed
-    if (formState.isDirty) {
-      setConfigCache(config);
-    }
-  }, [config, formState.isDirty]);
+    setConfigCache(config);
+  }, [config]);
 
   return null;
 };

From eda4deebee607c788e58b8885ac6f86f9ac1f2b7 Mon Sep 17 00:00:00 2001
From: AbdBarho <ka70911@gmail.com>
Date: Mon, 24 Apr 2023 19:19:55 +0200
Subject: [PATCH 2/4] use `Controller`

---
 .../src/components/Chat/ChatConfigForm.tsx    | 28 +++++++++----------
 .../src/components/Chat/ChatConfigSaver.tsx   | 11 ++++++--
 2 files changed, 21 insertions(+), 18 deletions(-)

diff --git a/website/src/components/Chat/ChatConfigForm.tsx b/website/src/components/Chat/ChatConfigForm.tsx
index 560b6e0773..131ff1c290 100644
--- a/website/src/components/Chat/ChatConfigForm.tsx
+++ b/website/src/components/Chat/ChatConfigForm.tsx
@@ -99,30 +99,28 @@ export const ChatConfigForm = memo(function ChatConfigForm() {
         newPresetName === customPresetName
           ? customPresetDefaultValue
           : presets.find((preset) => preset.name === newPresetName)!.sampling_parameters;
-      reset({ ...config, model_config_name: selectedModel });
+      reset({ ...config, model_config_name: selectedModel }, { keepDirty: true });
       setSelectedPresetName(newPresetName);
     },
     [presets, reset, selectedModel]
   );
 
-  // I have no idea why we need to do this manually, it seems that the model name keeps resetting if we are just using
-  // react-form default "register"
-  const handleModelChange = useCallback(
-    (e: SyntheticEvent<HTMLSelectElement>) => setValue("model_config_name", e.currentTarget.value),
-    [setValue]
-  );
-
   return (
     <Stack gap="4">
       <FormControl>
         <FormLabel>{t("model")}</FormLabel>
-        <Select {...register("model_config_name")} onChange={handleModelChange}>
-          {modelInfos.map(({ name }) => (
-            <option value={name} key={name}>
-              {name}
-            </option>
-          ))}
-        </Select>
+        <Controller
+          name="model_config_name"
+          render={({ field: { value, onChange } }) => (
+            <Select value={value} onChange={onChange}>
+              {modelInfos.map(({ name }) => (
+                <option value={name} key={name}>
+                  {name}
+                </option>
+              ))}
+            </Select>
+          )}
+        />
       </FormControl>
       <FormControl>
         <FormLabel>{t("preset")}</FormLabel>
diff --git a/website/src/components/Chat/ChatConfigSaver.tsx b/website/src/components/Chat/ChatConfigSaver.tsx
index 698317d09f..20df8cff33 100644
--- a/website/src/components/Chat/ChatConfigSaver.tsx
+++ b/website/src/components/Chat/ChatConfigSaver.tsx
@@ -4,11 +4,16 @@ import { ChatConfigFormData } from "src/types/Chat";
 import { setConfigCache } from "src/utils/chat";
 
 export const ChatConfigSaver = () => {
-  const { watch } = useFormContext<ChatConfigFormData>();
+  const { watch, formState, reset } = useFormContext<ChatConfigFormData>();
   const config = watch();
   useEffect(() => {
-    setConfigCache(config);
-  }, [config]);
+    // only update when form is changed
+    if (formState.isDirty) {
+      setConfigCache(config);
+      // unset isDirty
+      reset(config);
+    }
+  }, [config, formState.isDirty, reset]);
 
   return null;
 };

From 57715a24170a62fb5d138606baba2bfd9b09bc30 Mon Sep 17 00:00:00 2001
From: AbdBarho <ka70911@gmail.com>
Date: Mon, 24 Apr 2023 19:21:48 +0200
Subject: [PATCH 3/4] clean up

---
 website/src/components/Chat/ChatConfigForm.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/website/src/components/Chat/ChatConfigForm.tsx b/website/src/components/Chat/ChatConfigForm.tsx
index 131ff1c290..fe40a423f7 100644
--- a/website/src/components/Chat/ChatConfigForm.tsx
+++ b/website/src/components/Chat/ChatConfigForm.tsx
@@ -17,7 +17,7 @@ import {
   Tooltip,
 } from "@chakra-ui/react";
 import { useTranslation } from "next-i18next";
-import { ChangeEvent, memo, SyntheticEvent, useCallback, useState } from "react";
+import { ChangeEvent, memo, useCallback, useState } from "react";
 import { Controller, useFormContext, useWatch } from "react-hook-form";
 import { ChatConfigFormData, SamplingParameters } from "src/types/Chat";
 
@@ -85,7 +85,7 @@ export const ChatConfigForm = memo(function ChatConfigForm() {
   const { t } = useTranslation("chat");
   const { modelInfos } = useChatContext();
 
-  const { control, register, reset, getValues, setValue } = useFormContext<ChatConfigFormData>();
+  const { control, reset, getValues } = useFormContext<ChatConfigFormData>();
   const selectedModel = useWatch({ name: "model_config_name", control: control });
   const presets = modelInfos.find((model) => model.name === selectedModel)!.parameter_configs;
   const [selectedPresetName, setSelectedPresetName] = useState(

From 6c7c4d860c674715f7829b537bb0887fd94a00b5 Mon Sep 17 00:00:00 2001
From: notmd <notmd1811@gmail.com>
Date: Tue, 25 Apr 2023 15:13:00 +0700
Subject: [PATCH 4/4] correct fix

---
 .../src/components/Chat/ChatConfigForm.tsx    | 52 +++++++++++--------
 .../src/components/Chat/ChatConfigSaver.tsx   |  7 +--
 website/src/components/Chat/ChatSection.tsx   |  1 +
 3 files changed, 32 insertions(+), 28 deletions(-)

diff --git a/website/src/components/Chat/ChatConfigForm.tsx b/website/src/components/Chat/ChatConfigForm.tsx
index fe40a423f7..02ffde678c 100644
--- a/website/src/components/Chat/ChatConfigForm.tsx
+++ b/website/src/components/Chat/ChatConfigForm.tsx
@@ -17,9 +17,9 @@ import {
   Tooltip,
 } from "@chakra-ui/react";
 import { useTranslation } from "next-i18next";
-import { ChangeEvent, memo, useCallback, useState } from "react";
-import { Controller, useFormContext, useWatch } from "react-hook-form";
-import { ChatConfigFormData, SamplingParameters } from "src/types/Chat";
+import { ChangeEvent, memo, useCallback, useEffect, useState } from "react";
+import { Controller, useFormContext } from "react-hook-form";
+import { ChatConfigFormData, ModelParameterConfig, SamplingParameters } from "src/types/Chat";
 
 import { useChatContext } from "./ChatContext";
 import { areParametersEqual } from "./WorkParameters";
@@ -81,17 +81,19 @@ const parameterLabel: Record<keyof SamplingParameters, string> = {
   typical_p: "Typical P",
 };
 
+const findPresetName = (presets: ModelParameterConfig[], config: SamplingParameters) => {
+  return presets.find((preset) => areParametersEqual(preset.sampling_parameters, config))?.name ?? customPresetName;
+};
+
 export const ChatConfigForm = memo(function ChatConfigForm() {
   const { t } = useTranslation("chat");
   const { modelInfos } = useChatContext();
 
-  const { control, reset, getValues } = useFormContext<ChatConfigFormData>();
-  const selectedModel = useWatch({ name: "model_config_name", control: control });
+  const { control, getValues, register, setValue } = useFormContext<ChatConfigFormData>();
+  const selectedModel = getValues("model_config_name"); // have to use getValues to here to access latest value
   const presets = modelInfos.find((model) => model.name === selectedModel)!.parameter_configs;
-  const [selectedPresetName, setSelectedPresetName] = useState(
-    () =>
-      presets.find((preset) => areParametersEqual(preset.sampling_parameters, getValues()))?.name ?? customPresetName
-  );
+  const [selectedPresetName, setSelectedPresetName] = useState(() => findPresetName(presets, getValues()));
+
   const handlePresetChange = useCallback(
     (e: ChangeEvent<HTMLSelectElement>) => {
       const newPresetName = e.target.value;
@@ -99,28 +101,32 @@ export const ChatConfigForm = memo(function ChatConfigForm() {
         newPresetName === customPresetName
           ? customPresetDefaultValue
           : presets.find((preset) => preset.name === newPresetName)!.sampling_parameters;
-      reset({ ...config, model_config_name: selectedModel }, { keepDirty: true });
+
+      for (const [key, value] of Object.entries(config) as Array<[keyof SamplingParameters, number]>) {
+        setValue(key, value, { shouldDirty: true }); // force dirty so the ChatConfigSaver will update the cache
+      }
       setSelectedPresetName(newPresetName);
     },
-    [presets, reset, selectedModel]
+    [presets, setValue]
   );
 
+  const config = getValues(); // have to use getValues to here to access latest value
+
+  useEffect(() => {
+    setSelectedPresetName(findPresetName(presets, config as SamplingParameters));
+  }, [config, presets]);
+
   return (
     <Stack gap="4">
       <FormControl>
         <FormLabel>{t("model")}</FormLabel>
-        <Controller
-          name="model_config_name"
-          render={({ field: { value, onChange } }) => (
-            <Select value={value} onChange={onChange}>
-              {modelInfos.map(({ name }) => (
-                <option value={name} key={name}>
-                  {name}
-                </option>
-              ))}
-            </Select>
-          )}
-        />
+        <Select {...register("model_config_name")}>
+          {modelInfos.map(({ name }) => (
+            <option value={name} key={name}>
+              {name}
+            </option>
+          ))}
+        </Select>
       </FormControl>
       <FormControl>
         <FormLabel>{t("preset")}</FormLabel>
diff --git a/website/src/components/Chat/ChatConfigSaver.tsx b/website/src/components/Chat/ChatConfigSaver.tsx
index 20df8cff33..c8938947cc 100644
--- a/website/src/components/Chat/ChatConfigSaver.tsx
+++ b/website/src/components/Chat/ChatConfigSaver.tsx
@@ -4,16 +4,13 @@ import { ChatConfigFormData } from "src/types/Chat";
 import { setConfigCache } from "src/utils/chat";
 
 export const ChatConfigSaver = () => {
-  const { watch, formState, reset } = useFormContext<ChatConfigFormData>();
+  const { watch, formState } = useFormContext<ChatConfigFormData>();
   const config = watch();
   useEffect(() => {
-    // only update when form is changed
     if (formState.isDirty) {
       setConfigCache(config);
-      // unset isDirty
-      reset(config);
     }
-  }, [config, formState.isDirty, reset]);
+  }, [config, formState.isDirty]);
 
   return null;
 };
diff --git a/website/src/components/Chat/ChatSection.tsx b/website/src/components/Chat/ChatSection.tsx
index c52ba54618..ca32412b49 100644
--- a/website/src/components/Chat/ChatSection.tsx
+++ b/website/src/components/Chat/ChatSection.tsx
@@ -24,6 +24,7 @@ export const ChatSection = ({ chatId }: { chatId: string | null }) => {
     const cache = getConfigCache();
     const model = modelInfos.find((model) => model.name === cache?.model_config_name);
     if (model && cache) {
+      console.log(`resseting form`);
       form.reset(cache);
     }
   }, [form.reset, modelInfos]);