fix: max value of max_tokens should follow context_length's value (#2969)

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

web/screens/Thread/ThreadRightPanel/index.tsx

@@ -1,5 +1,6 @@
 import { memo, useCallback, useMemo } from 'react'
 
+import { SettingComponentProps, SliderComponentProps } from '@janhq/core/.'
 import {
   Tabs,
   TabsContent,
@@ -51,27 +52,63 @@ const ThreadRightPanel = () => {
   const { stopModel } = useActiveModel()
   const { updateModelParameter } = useUpdateModelParameters()
 
-  const modelSettings = useMemo(() => {
+  const settings = useMemo(() => {
+    // runtime setting
     const modelRuntimeParams = toRuntimeParams(activeModelParams)
-
     const componentDataRuntimeSetting = getConfigurationsData(
       modelRuntimeParams,
       selectedModel
-    )
+    ).filter((x) => x.key !== 'prompt_template')
-    return componentDataRuntimeSetting.filter(
-      (x) => x.key !== 'prompt_template'
-    )
-  }, [activeModelParams, selectedModel])
 
-  const engineSettings = useMemo(() => {
+    // engine setting
     const modelEngineParams = toSettingParams(activeModelParams)
     const componentDataEngineSetting = getConfigurationsData(
       modelEngineParams,
       selectedModel
+    ).filter((x) => x.key !== 'prompt_template' && x.key !== 'embedding')
+
+    // the max value of max token has to follow context length
+    const maxTokens = componentDataRuntimeSetting.find(
+      (x) => x.key === 'max_tokens'
     )
-    return componentDataEngineSetting.filter(
+    const contextLength = componentDataEngineSetting.find(
-      (x) => x.key !== 'prompt_template' && x.key !== 'embedding'
+      (x) => x.key === 'ctx_len'
     )
+    if (maxTokens && contextLength) {
+      // replace maxToken to componentDataRuntimeSetting
+      const updatedComponentDataRuntimeSetting: SettingComponentProps[] =
+        componentDataRuntimeSetting.map((settingComponentProps) => {
+          if (settingComponentProps.key !== 'max_tokens')
+            return settingComponentProps
+          const contextLengthValue = Number(contextLength.controllerProps.value)
+          const maxTokenValue = Number(
+            settingComponentProps.controllerProps.value
+          )
+          const controllerProps =
+            settingComponentProps.controllerProps as SliderComponentProps
+          const sliderProps: SliderComponentProps = {
+            ...controllerProps,
+            max: contextLengthValue,
+            value: Math.min(maxTokenValue, contextLengthValue),
+          }
+
+          const updatedSettingProps: SettingComponentProps = {
+            ...settingComponentProps,
+            controllerProps: sliderProps,
+          }
+          return updatedSettingProps
+        })
+
+      return {
+        runtimeSettings: updatedComponentDataRuntimeSetting,
+        engineSettings: componentDataEngineSetting,
+      }
+    }
+
+    return {
+      runtimeSettings: componentDataRuntimeSetting,
+      engineSettings: componentDataEngineSetting,
+    }
   }, [activeModelParams, selectedModel])
 
   const promptTemplateSettings = useMemo(() => {
@@ -179,13 +216,13 @@ const ThreadRightPanel = () => {
             <ModelDropdown />
           </div>
           <Accordion defaultValue={[]}>
-            {modelSettings.length !== 0 && (
+            {settings.runtimeSettings.length !== 0 && (
               <AccordionItem
                 title="Inference Parameters"
                 value="Inference Parameters"
               >
                 <ModelSetting
-                  componentProps={modelSettings}
+                  componentProps={settings.runtimeSettings}
                   onValueChanged={onValueChanged}
                 />
               </AccordionItem>
@@ -197,13 +234,13 @@ const ThreadRightPanel = () => {
               </AccordionItem>
             )}
 
-            {engineSettings.length !== 0 && (
+            {settings.engineSettings.length !== 0 && (
               <AccordionItem
                 title="Engine Parameters"
                 value="Engine Parameters"
               >
                 <EngineSetting
-                  componentData={engineSettings}
+                  componentData={settings.engineSettings}
                   onValueChanged={onValueChanged}
                 />
               </AccordionItem>