Fix custom preset selection (LAION-AI#2511)

The old implementation will not work if the custom preset have the same
config as one of the predefined presets. The predefined preset will take
president over the custom making the inputs is disabled.
I also fix the config cache bug.

Author: notmd

website/src/components/Chat/ChatConfigDrawer.tsx

@@ -25,7 +25,7 @@ import {
 } from "@chakra-ui/react";
 import { Settings } from "lucide-react";
 import { useTranslation } from "next-i18next";
-import { ChangeEvent, memo, useCallback } from "react";
+import { ChangeEvent, memo, useCallback, useState } from "react";
 import { Controller, useFormContext, useWatch } from "react-hook-form";
 import { ChatConfigFormData, SamplingParameters } from "src/types/Chat";
 
@@ -118,7 +118,10 @@ const ChatConfigForm = () => {
   const { control, register, 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(
+    () =>
+      presets.find((preset) => areParametersEqual(preset.sampling_parameters, getValues()))?.name ?? customPresetName
+  );
   const handlePresetChange = useCallback(
     (e: ChangeEvent<HTMLSelectElement>) => {
       const newPresetName = e.target.value;
@@ -127,13 +130,11 @@ const ChatConfigForm = () => {
           ? customPresetDefaultValue
           : presets.find((preset) => preset.name === newPresetName)!.sampling_parameters;
       reset({ ...config, model_config_name: selectedModel });
+      setSelectedPresetName(newPresetName);
     },
     [presets, reset, selectedModel]
   );
 
-  const selectedPresetName =
-    presets.find((preset) => areParametersEqual(preset.sampling_parameters, getValues()))?.name ?? customPresetName;
-
   return (
     <Stack gap="4">
       <FormControl>

website/src/components/Chat/ChatConfigSaver.tsx

@@ -1,18 +1,14 @@
 import { useEffect } from "react";
 import { useFormContext } from "react-hook-form";
-import { useCacheConfig } from "src/hooks/chat/useCacheConfig";
 import { ChatConfigFormData } from "src/types/Chat";
+import { setConfigCache } from "src/utils/chat";
 
 export const ChatConfigSaver = () => {
   const { watch } = useFormContext<ChatConfigFormData>();
-  const newValues = watch();
-  const [oldValues, setConfig] = useCacheConfig();
+  const config = watch();
   useEffect(() => {
-    // have to compare otherwise it will cause maximum update depth exceeded
-    if (JSON.stringify(oldValues) !== JSON.stringify(newValues)) {
-      setConfig(newValues);
-    }
-  }, [setConfig, newValues, oldValues]);
+    setConfigCache(config);
+  }, [config]);
 
   return null;
 };

website/src/components/Chat/ChatConfigSummary.tsx

@@ -1,12 +1,13 @@
 import { Grid, Text } from "@chakra-ui/react";
 import { useTranslation } from "next-i18next";
 import React from "react";
-import { useCacheConfig } from "src/hooks/chat/useCacheConfig";
+import { useFormContext } from "react-hook-form";
+import { ChatConfigFormData } from "src/types/Chat";
 
 export default function ChatConfigSummary() {
-  const [config] = useCacheConfig();
   const { t } = useTranslation("chat");
-
+  const { watch } = useFormContext<ChatConfigFormData>();
+  const config = watch();
   return (
     <Grid gridTemplateColumns="repeat(2, max-content)" columnGap={4} fontSize="sm">
       <Text>{t("model")}</Text>

website/src/components/Chat/ChatSection.tsx

@@ -1,8 +1,8 @@
 import { Card, CardBody, Divider } from "@chakra-ui/react";
 import dynamic from "next/dynamic";
 import { FormProvider, useForm } from "react-hook-form";
-import { useCacheConfig } from "src/hooks/chat/useCacheConfig";
 import { ChatConfigFormData } from "src/types/Chat";
+import { getConfigCache } from "src/utils/chat";
 
 import { ChatConfigSaver } from "./ChatConfigSaver";
 import { useChatContext } from "./ChatContext";
@@ -15,10 +15,12 @@ export const ChatSection = ({ chatId }: { chatId: string | null }) => {
   const { modelInfos } = useChatContext();
 
   console.assert(modelInfos.length > 0, "No model config was found");
-  const [config] = useCacheConfig();
 
   const form = useForm<ChatConfigFormData>({
-    defaultValues: config,
+    defaultValues: getConfigCache() ?? {
+      ...modelInfos[0].parameter_configs[0].sampling_parameters,
+      model_config_name: modelInfos[0].name,
+    },
   });
 
   return (

website/src/hooks/chat/useCacheConfig.ts

@@ -0,0 +1,20 @@
+import { ChatConfigFormData } from "src/types/Chat";
+
+const CHAT_CONFIG_KEY = "CHAT_CONFIG";
+
+export const setConfigCache = (config: ChatConfigFormData) => {
+  if (typeof localStorage !== "undefined") {
+    localStorage.setItem(CHAT_CONFIG_KEY, JSON.stringify(config));
+  }
+};
+
+export const getConfigCache = () => {
+  if (typeof localStorage !== "undefined") {
+    const oldConfig = localStorage.getItem(CHAT_CONFIG_KEY);
+    if (oldConfig) {
+      return JSON.parse(oldConfig);
+    }
+    return null;
+  }
+  return null;
+};