feat(core): Support max output tokens parameter (#2218)

web/new-components/chat/content/ChatCompletion.tsx

@@ -19,8 +19,16 @@ const ChatCompletion: React.FC = () => {
   const chatId = searchParams?.get('id') ?? '';
 
   const { currentDialogInfo, model } = useContext(ChatContext);
-  const { history, handleChat, refreshDialogList, setAppInfo, setModelValue, setTemperatureValue, setResourceValue } =
-    useContext(ChatContentContext);
+  const {
+    history,
+    handleChat,
+    refreshDialogList,
+    setAppInfo,
+    setModelValue,
+    setTemperatureValue,
+    setMaxNewTokensValue,
+    setResourceValue,
+  } = useContext(ChatContentContext);
 
   const [jsonModalOpen, setJsonModalOpen] = useState(false);
   const [jsonValue, setJsonValue] = useState<string>('');
@@ -49,15 +57,18 @@ const ChatCompletion: React.FC = () => {
         const paramKey: string[] = res?.param_need?.map(i => i.type) || [];
         const resModel = res?.param_need?.filter(item => item.type === 'model')[0]?.value || model;
         const temperature = res?.param_need?.filter(item => item.type === 'temperature')[0]?.value || 0.5;
+        const maxNewTokens = res?.param_need?.filter(item => item.type === 'max_new_tokens')[0]?.value || 2048;
         const resource = res?.param_need?.filter(item => item.type === 'resource')[0]?.bind_value;
         setAppInfo(res || ({} as IApp));
         setTemperatureValue(temperature || 0.5);
+        setMaxNewTokensValue(maxNewTokens || 2048);
         setModelValue(resModel);
         setResourceValue(resource);
         await handleChat(initMessage.message, {
           app_code: res?.app_code,
           model_name: resModel,
           ...(paramKey?.includes('temperature') && { temperature }),
+          ...(paramKey?.includes('max_new_tokens') && { max_new_tokens: maxNewTokens }),
           ...(paramKey.includes('resource') && {
             select_param: typeof resource === 'string' ? resource : JSON.stringify(resource),
           }),

web/new-components/chat/input/ChatInputPanel.tsx

@@ -17,6 +17,7 @@ const ChatInputPanel: React.FC<{ ctrl: AbortController }> = ({ ctrl }) => {
     appInfo,
     currentDialogue,
     temperatureValue,
+    maxNewTokensValue,
     resourceValue,
     refreshDialogList,
   } = useContext(ChatContentContext);
@@ -47,6 +48,7 @@ const ChatInputPanel: React.FC<{ ctrl: AbortController }> = ({ ctrl }) => {
     await handleChat(userInput, {
       app_code: appInfo.app_code || '',
       ...(paramKey.includes('temperature') && { temperature: temperatureValue }),
+      ...(paramKey.includes('max_new_tokens') && { max_new_tokens: maxNewTokensValue }),
       select_param,
       ...(paramKey.includes('resource') && {
         select_param:

web/new-components/chat/input/MaxNewTokens.tsx

@@ -0,0 +1,80 @@
+import { ChatContentContext } from '@/pages/chat';
+import { ControlOutlined } from '@ant-design/icons';
+import { InputNumber, Popover, Slider, Tooltip } from 'antd';
+import React, { memo, useContext, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+const MaxNewTokens: React.FC<{
+  maxNewTokensValue: number;
+  setMaxNewTokensValue: (value: number) => void;
+}> = ({ maxNewTokensValue, setMaxNewTokensValue }) => {
+  const { appInfo } = useContext(ChatContentContext);
+  const { t } = useTranslation();
+
+  const paramKey: string[] = useMemo(() => {
+    return appInfo.param_need?.map(i => i.type) || [];
+  }, [appInfo.param_need]);
+
+  if (!paramKey.includes('max_new_tokens')) {
+    return (
+      <Tooltip title={t('max_new_tokens_tip')}>
+        <div className='flex w-8 h-8 items-center justify-center rounded-md hover:bg-[rgb(221,221,221,0.6)] cursor-pointer'>
+          <ControlOutlined className='text-xl cursor-not-allowed opacity-30' />
+        </div>
+      </Tooltip>
+    );
+  }
+
+  // 处理 InputNumber 的值变化
+  const handleInputChange = (value: number | null) => {
+    if (value === null || isNaN(value)) {
+      return;
+    }
+    setMaxNewTokensValue(value);
+  };
+
+  // 处理 Slider 的值变化
+  const handleSliderChange = (value: number) => {
+    setMaxNewTokensValue(value);
+  };
+
+  return (
+    <div className='flex items-center'>
+      <Popover
+        arrow={false}
+        trigger={['click']}
+        placement='topLeft'
+        content={() => (
+          <div className='flex items-center gap-2'>
+            <Slider
+              className='w-32'
+              min={1}
+              max={20480}
+              step={1}
+              onChange={handleSliderChange}
+              value={typeof maxNewTokensValue === 'number' ? maxNewTokensValue : 2048}
+            />
+            <InputNumber
+              size='small'
+              className='w-20'
+              min={1}
+              max={20480}
+              step={1}
+              onChange={handleInputChange}
+              value={maxNewTokensValue}
+            />
+          </div>
+        )}
+      >
+        <Tooltip title={t('max_new_tokens')} placement='bottom' arrow={false}>
+          <div className='flex w-8 h-8 items-center justify-center rounded-md hover:bg-[rgb(221,221,221,0.6)] cursor-pointer'>
+            <ControlOutlined />
+          </div>
+        </Tooltip>
+      </Popover>
+      <span className='text-sm ml-2'>{maxNewTokensValue}</span>
+    </div>
+  );
+};
+
+export default memo(MaxNewTokens);

web/new-components/chat/input/ToolsBar.tsx

@@ -8,6 +8,7 @@ import Image from 'next/image';
 import React, { useContext, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
+import MaxNewTokens from './MaxNewTokens';
 import ModelSwitcher from './ModelSwitcher';
 import Resource from './Resource';
 import Temperature from './Temperature';
@@ -33,8 +34,10 @@ const ToolsBar: React.FC<{
     currentDialogue,
     appInfo,
     temperatureValue,
+    maxNewTokensValue,
     resourceValue,
     setTemperatureValue,
+    setMaxNewTokensValue,
     refreshHistory,
     setCanAbort,
     setReplyLoading,
@@ -78,6 +81,7 @@ const ToolsBar: React.FC<{
           handleChat(lastHuman?.context || '', {
             app_code: appInfo.app_code,
             ...(paramKey.includes('temperature') && { temperature: temperatureValue }),
+            ...(paramKey.includes('max_new_tokens') && { max_new_tokens: maxNewTokensValue }),
             ...(paramKey.includes('resource') && {
               select_param:
                 typeof resourceValue === 'string'
@@ -170,6 +174,7 @@ const ToolsBar: React.FC<{
           <ModelSwitcher />
           <Resource fileList={fileList} setFileList={setFileList} setLoading={setLoading} fileName={fileName} />
           <Temperature temperatureValue={temperatureValue} setTemperatureValue={setTemperatureValue} />
+          <MaxNewTokens maxNewTokensValue={maxNewTokensValue} setMaxNewTokensValue={setMaxNewTokensValue} />
         </div>
         <div className='flex gap-1'>{returnTools(rightToolsConfig)}</div>
       </div>