fix: validate max_token from context_length value (#2870)

web/hooks/useCreateNewThread.ts

@@ -99,6 +99,11 @@ export const useCreateNewThread = () => {
         ? { ctx_len: 2048 }
         : {}
 
+    const overriddenParameters =
+      defaultModel?.parameters.max_tokens && defaultModel.parameters.max_tokens
+        ? { max_tokens: 2048 }
+        : {}
+
     const createdAt = Date.now()
     const assistantInfo: ThreadAssistantInfo = {
       assistant_id: assistant.id,
@@ -107,7 +112,8 @@ export const useCreateNewThread = () => {
       model: {
         id: defaultModel?.id ?? '*',
         settings: { ...defaultModel?.settings, ...overriddenSettings } ?? {},
-        parameters: defaultModel?.parameters ?? {},
+        parameters:
+          { ...defaultModel?.parameters, ...overriddenParameters } ?? {},
         engine: defaultModel?.engine,
       },
       instructions: assistant.instructions,

web/screens/Chat/ModelSetting/SettingComponent.tsx

@@ -5,10 +5,14 @@ import {
   SliderComponentProps,
 } from '@janhq/core'
 
+import { useAtomValue } from 'jotai/react'
+
 import Checkbox from '@/containers/Checkbox'
 import ModelConfigInput from '@/containers/ModelConfigInput'
 import SliderRightPanel from '@/containers/SliderRightPanel'
 
+import { activeThreadAtom } from '@/helpers/atoms/Thread.atom'
+
 type Props = {
   componentProps: SettingComponentProps[]
   disabled?: boolean
@@ -20,6 +24,7 @@ const SettingComponent: React.FC<Props> = ({
   disabled = false,
   onValueUpdated,
 }) => {
+  const activeThread = useAtomValue(activeThreadAtom)
   const components = componentProps.map((data) => {
     switch (data.controllerType) {
       case 'slider': {
@@ -31,7 +36,14 @@ const SettingComponent: React.FC<Props> = ({
             title={data.title}
             description={data.description}
             min={min}
-            max={max}
+            max={
+              data.key === 'max_tokens'
+                ? Number(
+                    activeThread &&
+                      activeThread.assistants[0].model.settings.ctx_len
+                  )
+                : max
+            }
             step={step}
             value={value}
             name={data.key}

web/screens/Chat/Sidebar/index.tsx

@@ -118,6 +118,32 @@ const Sidebar: React.FC = () => {
       updateModelParameter(activeThread, {
         params: { [key]: value },
       })
+
+      if (
+        activeThread.assistants[0].model.parameters.max_tokens &&
+        activeThread.assistants[0].model.settings.ctx_len
+      ) {
+        if (
+          key === 'max_tokens' &&
+          Number(value) > activeThread.assistants[0].model.settings.ctx_len
+        ) {
+          updateModelParameter(activeThread, {
+            params: {
+              max_tokens: activeThread.assistants[0].model.settings.ctx_len,
+            },
+          })
+        }
+        if (
+          key === 'ctx_len' &&
+          Number(value) < activeThread.assistants[0].model.parameters.max_tokens
+        ) {
+          updateModelParameter(activeThread, {
+            params: {
+              max_tokens: activeThread.assistants[0].model.settings.ctx_len,
+            },
+          })
+        }
+      }
     },
     [activeThread, setEngineParamsUpdate, stopModel, updateModelParameter]
   )