feat(ModelSetting): #1065 update state of model setting between threads (#1090)

Signed-off-by: James <james@jan.ai>
Co-authored-by: James <james@jan.ai>

web/containers/Checkbox/index.tsx

@@ -1,6 +1,6 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-import { useEffect, useState } from 'react'
+import { FieldValues, UseFormRegister } from 'react-hook-form'
 
+import { ModelRuntimeParams } from '@janhq/core'
 import { Switch } from '@janhq/uikit'
 
 import { useAtomValue } from 'jotai'
@@ -16,44 +16,32 @@ type Props = {
   name: string
   title: string
   checked: boolean
-  register: any
+  register: UseFormRegister<FieldValues>
 }
 
 const Checkbox: React.FC<Props> = ({ name, title, checked, register }) => {
-  const [currentChecked, setCurrentChecked] = useState<boolean>(checked)
   const { updateModelParameter } = useUpdateModelParameters()
   const threadId = useAtomValue(getActiveThreadIdAtom)
   const activeModelParams = useAtomValue(getActiveThreadModelRuntimeParamsAtom)
 
-  useEffect(() => {
-    setCurrentChecked(checked)
-  }, [checked])
+  const onCheckedChange = (checked: boolean) => {
+    if (!threadId || !activeModelParams) return
 
-  useEffect(() => {
-    updateSetting()
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [currentChecked])
-
-  const updateValue = [name].reduce((accumulator, value) => {
-    return { ...accumulator, [value]: currentChecked }
-  }, {})
-
-  const updateSetting = () => {
-    return updateModelParameter(String(threadId), {
+    const updatedModelParams: ModelRuntimeParams = {
       ...activeModelParams,
-      ...updateValue,
-    })
+      [name]: checked,
+    }
+
+    updateModelParameter(threadId, updatedModelParams)
   }
 
   return (
     <div className="flex justify-between">
       <label>{title}</label>
       <Switch
-        checked={currentChecked}
+        checked={checked}
         {...register(name)}
-        onCheckedChange={(e) => {
-          setCurrentChecked(e)
-        }}
+        onCheckedChange={onCheckedChange}
       />
     </div>
   )

web/containers/Slider/index.tsx

@@ -1,6 +1,6 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-import { useEffect, useState } from 'react'
+import { FieldValues, UseFormRegister } from 'react-hook-form'
 
+import { ModelRuntimeParams } from '@janhq/core'
 import { Slider, Input } from '@janhq/uikit'
 import { useAtomValue } from 'jotai'
 
@@ -18,7 +18,7 @@ type Props = {
   max: number
   step: number
   value: number
-  register: any
+  register: UseFormRegister<FieldValues>
 }
 
 const SliderRightPanel: React.FC<Props> = ({
@@ -30,30 +30,19 @@ const SliderRightPanel: React.FC<Props> = ({
   value,
   register,
 }) => {
-  const [currentValue, setCurrentValue] = useState<number>(value)
   const { updateModelParameter } = useUpdateModelParameters()
   const threadId = useAtomValue(getActiveThreadIdAtom)
   const activeModelParams = useAtomValue(getActiveThreadModelRuntimeParamsAtom)
 
-  useEffect(() => {
-    setCurrentValue(value)
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [value])
+  const onValueChanged = (e: number[]) => {
+    if (!threadId || !activeModelParams) return
 
-  useEffect(() => {
-    updateSetting()
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [currentValue])
-
-  const updateValue = [name].reduce((accumulator, value) => {
-    return { ...accumulator, [value]: currentValue }
-  }, {})
-
-  const updateSetting = () => {
-    return updateModelParameter(String(threadId), {
+    const updatedModelParams: ModelRuntimeParams = {
       ...activeModelParams,
-      ...updateValue,
-    })
+      [name]: Number(e[0]),
+    }
+
+    updateModelParameter(threadId, updatedModelParams)
   }
 
   return (
@@ -63,14 +52,10 @@ const SliderRightPanel: React.FC<Props> = ({
         <div className="relative w-full">
           <Slider
             {...register(name, {
-              setValueAs: (v: any) => parseInt(v),
+              setValueAs: (v: string) => parseInt(v),
             })}
-            value={[currentValue]}
-            onValueChange={async (e) => {
-              setCurrentValue(Number(e[0]))
-              await updateSetting()
-            }}
-            type="range"
+            value={[value]}
+            onValueChange={onValueChanged}
             min={min}
             max={max}
             step={step}
@@ -87,11 +72,8 @@ const SliderRightPanel: React.FC<Props> = ({
           className="-mt-4 h-8 w-16"
           min={min}
           max={max}
-          value={String(currentValue)}
-          onChange={async (e) => {
-            setCurrentValue(Number(e.target.value))
-            await updateSetting()
-          }}
+          value={String(value)}
+          onChange={(e) => onValueChanged([Number(e.target.value)])}
         />
       </div>
     </div>

web/screens/Chat/ModelSetting/index.tsx

@@ -1,5 +1,3 @@
-import { useEffect, useState } from 'react'
-
 import { useForm } from 'react-hook-form'
 
 import { ModelRuntimeParams } from '@janhq/core'
@@ -11,42 +9,31 @@ import settingComponentBuilder, {
   SettingComponentData,
 } from './settingComponentBuilder'
 
-import {
-  getActiveThreadIdAtom,
-  getActiveThreadModelRuntimeParamsAtom,
-} from '@/helpers/atoms/Thread.atom'
+import { getActiveThreadModelRuntimeParamsAtom } from '@/helpers/atoms/Thread.atom'
 
 export default function ModelSetting() {
-  const threadId = useAtomValue(getActiveThreadIdAtom)
-  const activeModelParams = useAtomValue(getActiveThreadModelRuntimeParamsAtom)
-  const [modelParams, setModelParams] = useState<
-    ModelRuntimeParams | undefined
-  >(activeModelParams)
-
   const { register } = useForm()
+  const activeModelParams = useAtomValue(getActiveThreadModelRuntimeParamsAtom)
 
-  useEffect(() => {
-    setModelParams(activeModelParams)
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [threadId])
-
-  if (!modelParams) {
-    return <div>This thread has no model parameters</div>
+  if (!activeModelParams) {
+    return null
   }
 
   const componentData: SettingComponentData[] = []
-  Object.keys(modelParams).forEach((key) => {
+  Object.keys(activeModelParams).forEach((key) => {
     const componentSetting = presetConfiguration[key]
 
     if (componentSetting) {
       if ('value' in componentSetting.controllerData) {
         componentSetting.controllerData.value = Number(
-          modelParams[key as keyof ModelRuntimeParams]
+          activeModelParams[key as keyof ModelRuntimeParams]
         )
       } else if ('checked' in componentSetting.controllerData) {
-        componentSetting.controllerData.checked = modelParams[
+        const checked = activeModelParams[
           key as keyof ModelRuntimeParams
         ] as boolean
+
+        componentSetting.controllerData.checked = checked
       }
       componentData.push(componentSetting)
     }

web/screens/Chat/ModelSetting/settingComponentBuilder.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable no-case-declarations */
-/* eslint-disable @typescript-eslint/no-explicit-any */
+import { FieldValues, UseFormRegister } from 'react-hook-form'
 
 import Checkbox from '@/containers/Checkbox'
 import Slider from '@/containers/Slider'
@@ -27,7 +27,7 @@ type CheckboxData = {
 
 const settingComponentBuilder = (
   componentData: SettingComponentData[],
-  register: any
+  register: UseFormRegister<FieldValues>
 ) => {
   const components = componentData.map((data) => {
     switch (data.controllerType) {