fix: not able to update model setting in local api (#2687)

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

web/containers/Checkbox/index.tsx

@@ -14,7 +14,7 @@ import { InfoIcon } from 'lucide-react'
 type Props = {
   name: string
   title: string
-  enabled?: boolean
+  disabled?: boolean
   description: string
   checked: boolean
   onValueChanged?: (e: string | number | boolean) => void
@@ -23,7 +23,7 @@ type Props = {
 const Checkbox: React.FC<Props> = ({
   title,
   checked,
-  enabled = true,
+  disabled = false,
   description,
   onValueChanged,
 }) => {
@@ -52,7 +52,7 @@ const Checkbox: React.FC<Props> = ({
       <Switch
         checked={checked}
         onCheckedChange={onCheckedChange}
-        disabled={!enabled}
+        disabled={disabled}
       />
     </div>
   )

web/containers/ModelConfigInput/index.tsx

@@ -11,7 +11,7 @@ import { InfoIcon } from 'lucide-react'
 
 type Props = {
   title: string
-  enabled?: boolean
+  disabled?: boolean
   name: string
   description: string
   placeholder: string
@@ -21,7 +21,7 @@ type Props = {
 
 const ModelConfigInput: React.FC<Props> = ({
   title,
-  enabled = true,
+  disabled = false,
   value,
   description,
   placeholder,
@@ -48,7 +48,7 @@ const ModelConfigInput: React.FC<Props> = ({
       placeholder={placeholder}
       onChange={(e) => onValueChanged?.(e.target.value)}
       value={value}
-      disabled={!enabled}
+      disabled={disabled}
     />
   </div>
 )

web/containers/SliderRightPanel/index.tsx

@@ -17,7 +17,7 @@ import { useClickOutside } from '@/hooks/useClickOutside'
 type Props = {
   name: string
   title: string
-  enabled: boolean
+  disabled: boolean
   description: string
   min: number
   max: number
@@ -28,7 +28,7 @@ type Props = {
 
 const SliderRightPanel: React.FC<Props> = ({
   title,
-  enabled,
+  disabled,
   min,
   max,
   step,
@@ -65,7 +65,7 @@ const SliderRightPanel: React.FC<Props> = ({
             min={min}
             max={max}
             step={step}
-            disabled={!enabled}
+            disabled={disabled}
           />
           <div className="relative mt-2 flex items-center justify-between text-gray-400">
             <p className="text-sm">{min}</p>
@@ -80,7 +80,7 @@ const SliderRightPanel: React.FC<Props> = ({
               min={min}
               max={max}
               value={String(value)}
-              disabled={!enabled}
+              disabled={disabled}
               onBlur={(e) => {
                 if (Number(e.target.value) > Number(max)) {
                   onValueChanged?.(Number(max))

web/screens/Chat/EngineSetting/index.tsx

@@ -1,54 +1,23 @@
-import { useCallback } from 'react'
-
 import { SettingComponentProps } from '@janhq/core/.'
 
-import { useAtomValue, useSetAtom } from 'jotai'
-
-import { useActiveModel } from '@/hooks/useActiveModel'
-import useUpdateModelParameters from '@/hooks/useUpdateModelParameters'
-
 import SettingComponentBuilder from '../../Chat/ModelSetting/SettingComponent'
 
-import { serverEnabledAtom } from '@/helpers/atoms/LocalServer.atom'
-import {
-  activeThreadAtom,
-  engineParamsUpdateAtom,
-} from '@/helpers/atoms/Thread.atom'
-
 type Props = {
   componentData: SettingComponentProps[]
+  onValueChanged: (key: string, value: string | number | boolean) => void
+  disabled?: boolean
 }
 
-const EngineSetting: React.FC<Props> = ({ componentData }) => {
+const EngineSetting: React.FC<Props> = ({
-  const isLocalServerRunning = useAtomValue(serverEnabledAtom)
+  componentData,
-  const activeThread = useAtomValue(activeThreadAtom)
+  onValueChanged,
-
+  disabled = false,
-  const { stopModel } = useActiveModel()
+}) => (
-  const { updateModelParameter } = useUpdateModelParameters()
+  <SettingComponentBuilder
-
+    componentProps={componentData}
-  const setEngineParamsUpdate = useSetAtom(engineParamsUpdateAtom)
+    disabled={disabled}
-
+    onValueUpdated={onValueChanged}
-  const onValueChanged = useCallback(
+  />
-    (key: string, value: string | number | boolean) => {
+)
-      if (!activeThread) return
-
-      setEngineParamsUpdate(true)
-      stopModel()
-
-      updateModelParameter(activeThread, {
-        params: { [key]: value },
-      })
-    },
-    [activeThread, setEngineParamsUpdate, stopModel, updateModelParameter]
-  )
-
-  return (
-    <SettingComponentBuilder
-      componentProps={componentData}
-      enabled={!isLocalServerRunning}
-      onValueUpdated={onValueChanged}
-    />
-  )
-}
 
 export default EngineSetting

web/screens/Chat/ModelSetting/SettingComponent.tsx

@@ -11,13 +11,13 @@ import SliderRightPanel from '@/containers/SliderRightPanel'
 
 type Props = {
   componentProps: SettingComponentProps[]
-  enabled?: boolean
+  disabled?: boolean
   onValueUpdated: (key: string, value: string | number | boolean) => void
 }
 
 const SettingComponent: React.FC<Props> = ({
   componentProps,
-  enabled = true,
+  disabled = false,
   onValueUpdated,
 }) => {
   const components = componentProps.map((data) => {
@@ -35,7 +35,7 @@ const SettingComponent: React.FC<Props> = ({
             step={step}
             value={value}
             name={data.key}
-            enabled={enabled}
+            disabled={disabled}
             onValueChanged={(value) => onValueUpdated(data.key, value)}
           />
         )
@@ -47,7 +47,7 @@ const SettingComponent: React.FC<Props> = ({
         return (
           <ModelConfigInput
             title={data.title}
-            enabled={enabled}
+            disabled={disabled}
             key={data.key}
             name={data.key}
             description={data.description}
@@ -63,7 +63,7 @@ const SettingComponent: React.FC<Props> = ({
         return (
           <Checkbox
             key={data.key}
-            enabled={enabled}
+            disabled={disabled}
             name={data.key}
             description={data.description}
             title={data.title}

web/screens/Chat/ModelSetting/index.tsx

@@ -1,49 +1,25 @@
-import React, { useCallback } from 'react'
+import React from 'react'
 
 import { SettingComponentProps } from '@janhq/core/.'
 
-import { useAtomValue } from 'jotai'
-
-import useUpdateModelParameters from '@/hooks/useUpdateModelParameters'
-
 import SettingComponentBuilder from './SettingComponent'
 
-import { serverEnabledAtom } from '@/helpers/atoms/LocalServer.atom'
-import { activeThreadAtom } from '@/helpers/atoms/Thread.atom'
-
 type Props = {
   componentProps: SettingComponentProps[]
+  onValueChanged: (key: string, value: string | number | boolean) => void
+  disabled?: boolean
 }
 
-const ModelSetting: React.FC<Props> = ({ componentProps }) => {
+const ModelSetting: React.FC<Props> = ({
-  const isLocalServerRunning = useAtomValue(serverEnabledAtom)
+  componentProps,
-  const activeThread = useAtomValue(activeThreadAtom)
+  onValueChanged,
-  const { updateModelParameter } = useUpdateModelParameters()
+  disabled = false,
-
+}) => (
-  const onValueChanged = useCallback(
+  <SettingComponentBuilder
-    (key: string, value: string | number | boolean) => {
+    disabled={!disabled}
-      if (!activeThread) return
+    componentProps={componentProps}
-
+    onValueUpdated={onValueChanged}
-      if (key === 'stop' && typeof value === 'string') {
+  />
-        updateModelParameter(activeThread, {
+)
-          params: { [key]: [value] },
-        })
-      } else {
-        updateModelParameter(activeThread, {
-          params: { [key]: value },
-        })
-      }
-    },
-    [activeThread, updateModelParameter]
-  )
-
-  return (
-    <SettingComponentBuilder
-      enabled={!isLocalServerRunning}
-      componentProps={componentProps}
-      onValueUpdated={onValueChanged}
-    />
-  )
-}
 
 export default React.memo(ModelSetting)

web/screens/Chat/Sidebar/index.tsx

@@ -2,7 +2,7 @@ import React, { useCallback, useMemo } from 'react'
 
 import { Input, Textarea } from '@janhq/uikit'
 
-import { atom, useAtomValue } from 'jotai'
+import { atom, useAtomValue, useSetAtom } from 'jotai'
 
 import { twMerge } from 'tailwind-merge'
 
@@ -13,8 +13,11 @@ import DropdownListSidebar, {
   selectedModelAtom,
 } from '@/containers/DropdownListSidebar'
 
+import { useActiveModel } from '@/hooks/useActiveModel'
 import { useCreateNewThread } from '@/hooks/useCreateNewThread'
 
+import useUpdateModelParameters from '@/hooks/useUpdateModelParameters'
+
 import { getConfigurationsData } from '@/utils/componentSettings'
 import { toRuntimeParams, toSettingParams } from '@/utils/modelParam'
 
@@ -27,6 +30,7 @@ import PromptTemplateSetting from './PromptTemplateSetting'
 
 import {
   activeThreadAtom,
+  engineParamsUpdateAtom,
   getActiveThreadModelParamsAtom,
 } from '@/helpers/atoms/Thread.atom'
 
@@ -39,6 +43,10 @@ const Sidebar: React.FC = () => {
   const selectedModel = useAtomValue(selectedModelAtom)
   const { updateThreadMetadata } = useCreateNewThread()
 
+  const setEngineParamsUpdate = useSetAtom(engineParamsUpdateAtom)
+  const { stopModel } = useActiveModel()
+  const { updateModelParameter } = useUpdateModelParameters()
+
   const modelSettings = useMemo(() => {
     const modelRuntimeParams = toRuntimeParams(activeModelParams)
 
@@ -96,6 +104,22 @@ const Sidebar: React.FC = () => {
     [activeThread, updateThreadMetadata]
   )
 
+  const onValueChanged = useCallback(
+    (key: string, value: string | number | boolean) => {
+      if (!activeThread) {
+        return
+      }
+
+      setEngineParamsUpdate(true)
+      stopModel()
+
+      updateModelParameter(activeThread, {
+        params: { [key]: value },
+      })
+    },
+    [activeThread, setEngineParamsUpdate, stopModel, updateModelParameter]
+  )
+
   return (
     <div
       className={twMerge(
@@ -170,7 +194,10 @@ const Sidebar: React.FC = () => {
             {modelSettings.length > 0 && (
               <CardSidebar title="Inference Parameters" asChild>
                 <div className="px-2 py-4">
-                  <ModelSetting componentProps={modelSettings} />
+                  <ModelSetting
+                    componentProps={modelSettings}
+                    onValueChanged={onValueChanged}
+                  />
                 </div>
               </CardSidebar>
             )}
@@ -188,7 +215,10 @@ const Sidebar: React.FC = () => {
             {engineSettings.length > 0 && (
               <CardSidebar title="Engine Parameters" asChild>
                 <div className="px-2 py-4">
-                  <EngineSetting componentData={engineSettings} />
+                  <EngineSetting
+                    componentData={engineSettings}
+                    onValueChanged={onValueChanged}
+                  />
                 </div>
               </CardSidebar>
             )}

web/screens/LocalServer/index.tsx

@@ -73,10 +73,15 @@ const LocalServerScreen = () => {
   const { startModel, stateModel } = useActiveModel()
   const selectedModel = useAtomValue(selectedModelAtom)
 
-  const modelEngineParams = toSettingParams(selectedModel?.settings)
   const modelRuntimeParams = toRuntimeParams(selectedModel?.settings)
 
-  const componentDataEngineSetting = getConfigurationsData(modelEngineParams)
+  const [currentModelSettingParams, setCurrentModelSettingParams] = useState(
+    toSettingParams(selectedModel?.settings)
+  )
+
+  const componentDataEngineSetting = getConfigurationsData(
+    currentModelSettingParams
+  )
   const componentDataRuntimeSetting = getConfigurationsData(
     modelRuntimeParams,
     selectedModel
@@ -177,6 +182,16 @@ const LocalServerScreen = () => {
     }
   }
 
+  const onValueChanged = useCallback(
+    (key: string, value: string | number | boolean) => {
+      setCurrentModelSettingParams({
+        ...currentModelSettingParams,
+        [key]: value,
+      })
+    },
+    [currentModelSettingParams]
+  )
+
   return (
     <div className="flex h-full w-full" data-testid="local-server-testid">
       {/* Left SideBar */}
@@ -495,7 +510,11 @@ const LocalServerScreen = () => {
             <div className="mt-4">
               <CardSidebar title="Model Parameters" asChild>
                 <div className="px-2 py-4">
-                  <ModelSetting componentProps={modelSettings} />
+                  <ModelSetting
+                    componentProps={modelSettings}
+                    disabled={serverEnabled}
+                    onValueChanged={onValueChanged}
+                  />
                 </div>
               </CardSidebar>
             </div>
@@ -505,7 +524,11 @@ const LocalServerScreen = () => {
             <div className="my-4">
               <CardSidebar title="Engine Parameters" asChild>
                 <div className="px-2 py-4">
-                  <EngineSetting componentData={engineSettings} />
+                  <EngineSetting
+                    disabled={serverEnabled}
+                    componentData={engineSettings}
+                    onValueChanged={onValueChanged}
+                  />
                 </div>
               </CardSidebar>
             </div>