Repository: LAION-AI/Open-Assistant
File: website/src/components/Chat/ChatConfigForm.tsx (TypeScript)

Code before:

const resetParameters = (setValue: UseFormSetValue<ChatConfigFormData>, params: SamplingParameters) => {
  for (const [key, value] of Object.entries(params) as Array<[keyof SamplingParameters, number]>) {
    setValue(key, value); // call setValue instead of setValues to avoid reset unwanted fields
  }
};

export const ChatConfigForm = memo(function ChatConfigForm() {
  const { t } = useTranslation("chat");
  const { modelInfos } = useChatInitialData();

  const { control, getValues, register, setValue } = useFormContext<ChatConfigFormData>();
  const selectedModel = getValues("model_config_name"); // have to use getValues to here to access latest value
  const selectedPlugins = getValues("plugins");
  const presets = modelInfos.find((model) => model.name === selectedModel)!.parameter_configs;
  const [selectedPresetName, setSelectedPresetName] = useState(() => findPresetName(presets, getValues()));

  const { customPresets, handleSavePreset, setCustomPresets, handleDeletePreset } = useCustomPresets({
    selectedPresetName,
    setSelectedPresetName,
  });

  const { hyrated, plugins, setPlugins } = useHydrateChatConfig({
    setCustomPresets,
    setSelectedPresetName,
  });

  const [lockPresetSelection, setLockPresetSelection] = useState(false);

  const handlePresetChange = useCallback(
    (e: ChangeEvent<HTMLSelectElement>) => {
      const newPresetName = e.target.value;
      if (newPresetName !== unKnownCustomPresetName) {
        const config = isCustomPresetName(newPresetName)
          ? customPresets.find((preset) => preset.name === newPresetName)!.config
          : presets.find((preset) => preset.name === newPresetName)!.sampling_parameters;

        resetParameters(setValue, config);
      }
      setSelectedPresetName(newPresetName);
    },
    [customPresets, presets, setValue]
  );

  // Lock preset selection if any plugin is enabled
  useEffect(() => {
    const activated = selectedPlugins.some((plugin) => plugin.enabled);
    if (activated) {
      handlePresetChange({ target: { value: "k50-Plugins" } } as any);
      setLockPresetSelection(true);
    } else {

Review comment (suggestion):
This state can be handled by react-hook-form. You just need to wrap the `CustomInstructions` with the `Controller` component.

Code after:
};

const findPresetName = (presets: ModelParameterConfig[], config: SamplingParameters) => {
  return (
    presets.find((preset) => areParametersEqual(preset.sampling_parameters, config))?.name ?? unKnownCustomPresetName
  );
};

const resetParameters = (setValue: UseFormSetValue<ChatConfigFormData>, params: SamplingParameters) => {
  for (const [key, value] of Object.entries(params) as Array<[keyof SamplingParameters, number]>) {
    setValue(key, value); // call setValue instead of setValues to avoid reset unwanted fields
  }
};

export const ChatConfigForm = memo(function ChatConfigForm() {
  const { t } = useTranslation("chat");
  const { modelInfos } = useChatInitialData();

  const { control, getValues, register, setValue } = useFormContext<ChatConfigFormData>();
  const selectedModel = getValues("model_config_name"); // have to use getValues to here to access latest value
  const selectedPlugins = getValues("plugins");
  const presets = modelInfos.find((model) => model.name === selectedModel)!.parameter_configs;
  const [customInstructions, setCustomInstructions] = useState<CustomInstructionsType>({
    user_profile: "",
    user_response_instructions: "",
  });
  const [selectedPresetName, setSelectedPresetName] = useState(() => findPresetName(presets, getValues()));

  const { customPresets, handleSavePreset, setCustomPresets, handleDeletePreset } = useCustomPresets({
    selectedPresetName,
    setSelectedPresetName,
  });

  const { hyrated, plugins, setPlugins } = useHydrateChatConfig({
    setCustomPresets,
    setSelectedPresetName,
    setCustomInstructions,
  });

  const [lockPresetSelection, setLockPresetSelection] = useState(false);

  const handlePresetChange = useCallback(
    (e: ChangeEvent<HTMLSelectElement>) => {
      const newPresetName = e.target.value;
      if (newPresetName !== unKnownCustomPresetName) {
        const config = isCustomPresetName(newPresetName)
          ? customPresets.find((preset) => preset.name === newPresetName)!.config
          : presets.find((preset) => preset.name === newPresetName)!.sampling_parameters;

        resetParameters(setValue, config);
      }