@lobehub/chat 1.53.12 → 1.55.0

package/src/features/ChatInput/ActionBar/Params/ParamsControls.tsx

@@ -0,0 +1,95 @@
+import { Form, Tag } from '@lobehub/ui';
+import type { FormItemProps } from '@lobehub/ui/es/Form/components/FormItem';
+import isEqual from 'fast-deep-equal';
+import { debounce } from 'lodash-es';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+
+import InfoTooltip from '@/components/InfoTooltip';
+import {
+  FrequencyPenalty,
+  PresencePenalty,
+  Temperature,
+  TopP,
+} from '@/features/ModelParamsControl';
+import { useAgentStore } from '@/store/agent';
+import { agentSelectors } from '@/store/agent/selectors';
+
+interface ParamsControlsProps {
+  setUpdating: (updating: boolean) => void;
+}
+const ParamsControls = memo<ParamsControlsProps>(({ setUpdating }) => {
+  const { t } = useTranslation('setting');
+
+  const updateAgentConfig = useAgentStore((s) => s.updateAgentConfig);
+
+  const config = useAgentStore(agentSelectors.currentAgentConfig, isEqual);
+
+  const items: FormItemProps[] = [
+    {
+      children: <Temperature />,
+      desc: <Tag>temperature</Tag>,
+      label: (
+        <Flexbox gap={8} horizontal>
+          {t('settingModel.temperature.title')}
+          <InfoTooltip title={t('settingModel.temperature.desc')} />
+        </Flexbox>
+      ),
+      name: ['params', 'temperature'],
+    },
+    {
+      children: <TopP />,
+      desc: <Tag>top_p</Tag>,
+      label: (
+        <Flexbox gap={8} horizontal>
+          {t('settingModel.topP.title')}
+          <InfoTooltip title={t('settingModel.topP.desc')} />
+        </Flexbox>
+      ),
+      name: ['params', 'top_p'],
+    },
+    {
+      children: <PresencePenalty />,
+      desc: <Tag>presence_penalty</Tag>,
+      label: (
+        <Flexbox gap={8} horizontal>
+          {t('settingModel.presencePenalty.title')}
+          <InfoTooltip title={t('settingModel.presencePenalty.desc')} />
+        </Flexbox>
+      ),
+      name: ['params', 'presence_penalty'],
+    },
+    {
+      children: <FrequencyPenalty />,
+      desc: <Tag>frequency_penalty</Tag>,
+      label: (
+        <Flexbox gap={8} horizontal>
+          {t('settingModel.frequencyPenalty.title')}
+          <InfoTooltip title={t('settingModel.frequencyPenalty.desc')} />
+        </Flexbox>
+      ),
+      name: ['params', 'frequency_penalty'],
+    },
+  ];
+
+  return (
+    <Form
+      initialValues={config}
+      itemMinWidth={200}
+      items={items}
+      itemsType={'flat'}
+      onValuesChange={debounce(async (values) => {
+        setUpdating(true);
+        console.log(values);
+        await updateAgentConfig(values);
+        setUpdating(false);
+      }, 500)}
+      size={'small'}
+      style={{ fontSize: 12 }}
+      variant={'pure'}
+    />
+  );
+});
+
+export default ParamsControls;

package/src/features/ChatInput/ActionBar/Params/index.tsx

@@ -0,0 +1,47 @@
+import { ActionIcon } from '@lobehub/ui';
+import { Popover } from 'antd';
+import { useTheme } from 'antd-style';
+import { Settings2Icon } from 'lucide-react';
+import { memo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+
+import UpdateLoading from '@/components/Loading/UpdateLoading';
+
+import ParamsControls from './ParamsControls';
+
+const Params = memo(() => {
+  const { t } = useTranslation('setting');
+  const [popoverOpen, setPopoverOpen] = useState(false);
+  const [isUpdating, setUpdating] = useState(false);
+
+  const theme = useTheme();
+  return (
+    <Popover
+      arrow={false}
+      content={<ParamsControls setUpdating={setUpdating} />}
+      onOpenChange={setPopoverOpen}
+      open={popoverOpen}
+      placement={'top'}
+      styles={{
+        body: { minWidth: 400 },
+      }}
+      title={
+        <Flexbox horizontal justify={'space-between'}>
+          {t('settingModel.params.title')}
+
+          {isUpdating && <UpdateLoading style={{ color: theme.colorTextSecondary }} />}
+        </Flexbox>
+      }
+      trigger={'click'}
+    >
+      <ActionIcon
+        icon={Settings2Icon}
+        placement={'bottom'}
+        title={popoverOpen ? undefined : t('settingModel.params.title')}
+      />
+    </Popover>
+  );
+});
+
+export default Params;

package/src/features/ChatInput/ActionBar/config.ts

@@ -3,7 +3,7 @@ import Clear from './Clear';
 import History from './History';
 import Knowledge from './Knowledge';
 import ModelSwitch from './ModelSwitch';
-import Temperature from './Temperature';
+import Params from './Params';
 import { MainToken, PortalToken } from './Token';
 import Tools from './Tools';
 import Upload from './Upload';
@@ -15,9 +15,10 @@ export const actionMap = {
   knowledgeBase: Knowledge,
   mainToken: MainToken,
   model: ModelSwitch,
+  params: Params,
   portalToken: PortalToken,
   stt: STT,
-  temperature: Temperature,
+  temperature: Params,
   tools: Tools,
 } as const;
 

package/src/features/ChatInput/Mobile/index.tsx

@@ -20,9 +20,9 @@ const defaultLeftActions: ActionKeys[] = [
   'model',
   'fileUpload',
   'knowledgeBase',
-  'temperature',
   'history',
   'tools',
+  'params',
   'mainToken',
 ];
 

package/src/features/ModelParamsControl/FrequencyPenalty.tsx

@@ -0,0 +1,37 @@
+import { Icon, SliderWithInput } from '@lobehub/ui';
+import { useTheme } from 'antd-style';
+import { BookOpenText, FileIcon } from 'lucide-react';
+import { memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+interface FrequencyPenaltyProps {
+  onChange?: (value: number) => void;
+  value?: number;
+}
+
+const FrequencyPenalty = memo<FrequencyPenaltyProps>(({ value, onChange }) => {
+  const theme = useTheme();
+
+  return (
+    <Flexbox style={{ paddingInlineStart: 8 }}>
+      <SliderWithInput
+        marks={{
+          '-2': (
+            <Icon icon={FileIcon} size={'small'} style={{ color: theme.colorTextQuaternary }} />
+          ),
+          0: <div />,
+          2: (
+            <Icon icon={BookOpenText} size={'small'} style={{ color: theme.colorTextQuaternary }} />
+          ),
+        }}
+        max={2}
+        min={-2}
+        onChange={onChange}
+        size={'small'}
+        step={0.1}
+        value={value}
+      />
+    </Flexbox>
+  );
+});
+export default FrequencyPenalty;

package/src/features/ModelParamsControl/PresencePenalty.tsx

@@ -0,0 +1,35 @@
+import { Icon, SliderWithInput } from '@lobehub/ui';
+import { useTheme } from 'antd-style';
+import { AtomIcon, RepeatIcon } from 'lucide-react';
+import { memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+interface PresencePenaltyProps {
+  onChange?: (value: number) => void;
+  value?: number;
+}
+
+const PresencePenalty = memo<PresencePenaltyProps>(({ value, onChange }) => {
+  const theme = useTheme();
+
+  return (
+    <Flexbox style={{ paddingInlineStart: 8 }}>
+      <SliderWithInput
+        marks={{
+          '-2': (
+            <Icon icon={RepeatIcon} size={'small'} style={{ color: theme.colorTextQuaternary }} />
+          ),
+          0: <div />,
+          2: <Icon icon={AtomIcon} size={'small'} style={{ color: theme.colorTextQuaternary }} />,
+        }}
+        max={2}
+        min={-2}
+        onChange={onChange}
+        size={'small'}
+        step={0.1}
+        value={value}
+      />
+    </Flexbox>
+  );
+});
+export default PresencePenalty;

package/src/features/ModelParamsControl/Temperature.tsx

@@ -0,0 +1,71 @@
+import { Alert, Icon, SliderWithInput } from '@lobehub/ui';
+import { css, cx, useTheme } from 'antd-style';
+import { Sparkle, Sparkles } from 'lucide-react';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+
+import { useAgentStore } from '@/store/agent';
+import { agentSelectors } from '@/store/agent/selectors';
+
+const alertCls = css`
+  .ant-alert-message {
+    font-size: 12px;
+    line-height: 18px !important;
+  }
+
+  .ant-alert-icon {
+    height: 18px !important;
+  }
+`;
+
+const Warning = memo(() => {
+  const { t } = useTranslation('setting');
+  const [temperature] = useAgentStore((s) => {
+    const config = agentSelectors.currentAgentConfig(s);
+    return [config.params?.temperature];
+  });
+
+  return (
+    typeof temperature === 'number' &&
+    temperature >= 1.5 && (
+      <Alert
+        classNames={{ alert: cx(alertCls) }}
+        message={t('settingModel.temperature.warning')}
+        style={{ fontSize: 12 }}
+        type={'warning'}
+        variant={'pure'}
+      />
+    )
+  );
+});
+
+interface TemperatureProps {
+  onChange?: (value: number) => void;
+  value?: number;
+}
+
+const Temperature = memo<TemperatureProps>(({ value, onChange }) => {
+  const theme = useTheme();
+  return (
+    <Flexbox gap={4} style={{ paddingInlineStart: 8 }}>
+      <SliderWithInput
+        controls={false}
+        marks={{
+          0: <Icon icon={Sparkle} size={'small'} style={{ color: theme.colorTextQuaternary }} />,
+          1: <div />,
+          2: <Icon icon={Sparkles} size={'small'} style={{ color: theme.colorTextQuaternary }} />,
+        }}
+        max={2}
+        onChange={onChange}
+        size={'small'}
+        step={0.1}
+        style={{ height: 48 }}
+        value={value}
+      />
+      <Warning />
+    </Flexbox>
+  );
+});
+
+export default Temperature;

package/src/features/ModelParamsControl/TopP.tsx

@@ -0,0 +1,39 @@
+import { Icon, SliderWithInput } from '@lobehub/ui';
+import { useTheme } from 'antd-style';
+import { FlowerIcon, TrainFrontTunnel } from 'lucide-react';
+import { memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+interface TopPProps {
+  onChange?: (value: number) => void;
+  value?: number;
+}
+
+const TopP = memo<TopPProps>(({ value, onChange }) => {
+  const theme = useTheme();
+
+  return (
+    <Flexbox style={{ paddingInlineStart: 8 }}>
+      <SliderWithInput
+        marks={{
+          0: (
+            <Icon
+              icon={TrainFrontTunnel}
+              size={'small'}
+              style={{ color: theme.colorTextQuaternary }}
+            />
+          ),
+          0.9: <div />,
+          1: <Icon icon={FlowerIcon} size={'small'} style={{ color: theme.colorTextQuaternary }} />,
+        }}
+        max={1}
+        min={0}
+        onChange={onChange}
+        size={'small'}
+        step={0.1}
+        value={value}
+      />
+    </Flexbox>
+  );
+});
+export default TopP;

package/src/features/ModelParamsControl/index.ts

@@ -0,0 +1,4 @@
+export { default as FrequencyPenalty } from './FrequencyPenalty';
+export { default as PresencePenalty } from './PresencePenalty';
+export { default as Temperature } from './Temperature';
+export { default as TopP } from './TopP';

package/src/libs/agent-runtime/AgentRuntime.ts

@@ -26,6 +26,7 @@ import { LobeMinimaxAI } from './minimax';
 import { LobeMistralAI } from './mistral';
 import { LobeMoonshotAI } from './moonshot';
 import { LobeNovitaAI } from './novita';
+import { LobeNvidiaAI } from './nvidia';
 import { LobeOllamaAI } from './ollama';
 import { LobeOpenAI } from './openai';
 import { LobeOpenRouterAI } from './openrouter';
@@ -48,6 +49,7 @@ import {
   TextToSpeechPayload,
 } from './types';
 import { LobeUpstageAI } from './upstage';
+import { LobeVLLMAI } from './vllm';
 import { LobeWenxinAI } from './wenxin';
 import { LobeXAI } from './xai';
 import { LobeZeroOneAI } from './zeroone';
@@ -157,6 +159,7 @@ class AgentRuntime {
       mistral: Partial<ClientOptions>;
       moonshot: Partial<ClientOptions>;
       novita: Partial<ClientOptions>;
+      nvidia: Partial<ClientOptions>;
       ollama: Partial<ClientOptions>;
       openai: Partial<ClientOptions>;
       openrouter: Partial<ClientOptions>;
@@ -170,6 +173,7 @@ class AgentRuntime {
       tencentcloud: Partial<ClientOptions>;
       togetherai: Partial<ClientOptions>;
       upstage: Partial<ClientOptions>;
+      vllm: Partial<ClientOptions>;
       wenxin: Partial<ClientOptions>;
       xai: Partial<ClientOptions>;
       zeroone: Partial<ClientOptions>;
@@ -225,6 +229,11 @@ class AgentRuntime {
         break;
       }
 
+      case ModelProvider.VLLM: {
+        runtimeModel = new LobeVLLMAI(params.vllm);
+        break;
+      }
+
       case ModelProvider.Perplexity: {
         runtimeModel = new LobePerplexityAI(params.perplexity);
         break;
@@ -300,6 +309,11 @@ class AgentRuntime {
         break;
       }
 
+      case ModelProvider.Nvidia: {
+        runtimeModel = new LobeNvidiaAI(params.nvidia);
+        break;
+      }
+
       case ModelProvider.Baichuan: {
         runtimeModel = new LobeBaichuanAI(params.baichuan ?? {});
         break;

package/src/libs/agent-runtime/nvidia/index.ts

@@ -0,0 +1,44 @@
+import { ModelProvider } from '../types';
+import { LobeOpenAICompatibleFactory } from '../utils/openaiCompatibleFactory';
+
+import type { ChatModelCard } from '@/types/llm';
+
+export interface NvidiaModelCard {
+  id: string;
+}
+
+export const LobeNvidiaAI = LobeOpenAICompatibleFactory({
+  baseURL: 'https://integrate.api.nvidia.com/v1',
+  debug: {
+    chatCompletion: () => process.env.DEBUG_NVIDIA_CHAT_COMPLETION === '1',
+  },
+  models: async ({ client }) => {
+    const { LOBE_DEFAULT_MODEL_LIST } = await import('@/config/aiModels');
+
+    const modelsPage = await client.models.list() as any;
+    const modelList: NvidiaModelCard[] = modelsPage.data;
+
+    return modelList
+      .map((model) => {
+        const knownModel = LOBE_DEFAULT_MODEL_LIST.find((m) => model.id.toLowerCase() === m.id.toLowerCase());
+
+        return {
+          contextWindowTokens: knownModel?.contextWindowTokens ?? undefined,
+          displayName: knownModel?.displayName ?? undefined,
+          enabled: knownModel?.enabled || false,
+          functionCall:
+            knownModel?.abilities?.functionCall
+            || false,
+          id: model.id,
+          reasoning:
+            knownModel?.abilities?.reasoning
+            || false,
+          vision:
+            knownModel?.abilities?.vision
+            || false,
+        };
+      })
+      .filter(Boolean) as ChatModelCard[];
+  },
+  provider: ModelProvider.Nvidia,
+});

package/src/libs/agent-runtime/types/type.ts

@@ -45,6 +45,7 @@ export enum ModelProvider {
   Mistral = 'mistral',
   Moonshot = 'moonshot',
   Novita = 'novita',
+  Nvidia = 'nvidia',
   Ollama = 'ollama',
   OpenAI = 'openai',
   OpenRouter = 'openrouter',
@@ -58,6 +59,7 @@ export enum ModelProvider {
   TencentCloud = 'tencentcloud',
   TogetherAI = 'togetherai',
   Upstage = 'upstage',
+  VLLM = 'vllm',
   Wenxin = 'wenxin',
   XAI = 'xai',
   ZeroOne = 'zeroone',

package/src/libs/agent-runtime/vllm/index.ts

@@ -0,0 +1,44 @@
+import { ModelProvider } from '../types';
+import { LobeOpenAICompatibleFactory } from '../utils/openaiCompatibleFactory';
+
+import type { ChatModelCard } from '@/types/llm';
+
+export interface VLLMModelCard {
+  id: string;
+}
+
+export const LobeVLLMAI = LobeOpenAICompatibleFactory({
+  baseURL: 'http://localhost:8000/v1',
+  debug: {
+    chatCompletion: () => process.env.DEBUG_VLLM_CHAT_COMPLETION === '1',
+  },
+  models: async ({ client }) => {
+    const { LOBE_DEFAULT_MODEL_LIST } = await import('@/config/aiModels');
+
+    const modelsPage = await client.models.list() as any;
+    const modelList: VLLMModelCard[] = modelsPage.data;
+
+    return modelList
+      .map((model) => {
+        const knownModel = LOBE_DEFAULT_MODEL_LIST.find((m) => model.id.toLowerCase() === m.id.toLowerCase());
+
+        return {
+          contextWindowTokens: knownModel?.contextWindowTokens ?? undefined,
+          displayName: knownModel?.displayName ?? undefined,
+          enabled: knownModel?.enabled || false,
+          functionCall:
+            knownModel?.abilities?.functionCall
+            || false,
+          id: model.id,
+          reasoning:
+            knownModel?.abilities?.reasoning
+            || false,
+          vision:
+            knownModel?.abilities?.vision
+            || false,
+        };
+      })
+      .filter(Boolean) as ChatModelCard[];
+  },
+  provider: ModelProvider.VLLM,
+});

package/src/locales/default/setting.ts

@@ -206,8 +206,8 @@ export default {
       title: '开启推理强度调整',
     },
     frequencyPenalty: {
-      desc: '值越大，越有可能降低重复字词',
-      title: '频率惩罚度',
+      desc: '值越大，用词越丰富多样；值越低，用词更朴实简单',
+      title: '词汇丰富度',
     },
     maxTokens: {
       desc: '单次交互所用的最大 Token 数',
@@ -217,9 +217,12 @@ export default {
       desc: '{{provider}} 模型',
       title: '模型',
     },
+    params: {
+      title: '高级参数',
+    },
     presencePenalty: {
-      desc: '值越大，越有可能扩展到新话题',
-      title: '话题新鲜度',
+      desc: '值越大，越倾向不同的表达方式，避免概念重复；值越小，越倾向使用重复的概念或叙述，表达更具一致性',
+      title: '表述发散度',
     },
     reasoningEffort: {
       desc: '值越大，推理能力越强，但可能会增加响应时间和 Token 消耗',
@@ -231,14 +234,14 @@ export default {
       title: '推理强度',
     },
     temperature: {
-      desc: '值越大，回复越随机',
-      title: '随机性',
-      titleWithValue: '随机性 {{value}}',
+      desc: '数值越大，回答越有创意和想象力；数值越小，回答越严谨',
+      title: '创意活跃度',
+      warning: '创意活跃度数值过大，输出可能会产生乱码',
     },
     title: '模型设置',
     topP: {
-      desc: '与随机性类似，但不要和随机性一起更改',
-      title: '核采样',
+      desc: '考虑多少种可能性，值越大，接受更多可能的回答；值越小，倾向选择最可能的回答。不推荐和创意活跃度一起更改',
+      title: '思维开放度',
     },
   },
   settingPlugin: {

package/src/types/user/settings/keyVaults.ts

@@ -50,6 +50,7 @@ export interface UserKeyVaults {
   mistral?: OpenAICompatibleKeyVault;
   moonshot?: OpenAICompatibleKeyVault;
   novita?: OpenAICompatibleKeyVault;
+  nvidia?: OpenAICompatibleKeyVault;
   ollama?: OpenAICompatibleKeyVault;
   openai?: OpenAICompatibleKeyVault;
   openrouter?: OpenAICompatibleKeyVault;
@@ -64,6 +65,7 @@ export interface UserKeyVaults {
   tencentcloud?: OpenAICompatibleKeyVault;
   togetherai?: OpenAICompatibleKeyVault;
   upstage?: OpenAICompatibleKeyVault;
+  vllm?: OpenAICompatibleKeyVault;
   wenxin?: OpenAICompatibleKeyVault;
   xai?: OpenAICompatibleKeyVault;
   zeroone?: OpenAICompatibleKeyVault;

package/src/features/ChatInput/ActionBar/Temperature.tsx

@@ -1,49 +0,0 @@
-import { ActionIcon, SliderWithInput } from '@lobehub/ui';
-import { Popover } from 'antd';
-import { Thermometer } from 'lucide-react';
-import { memo, useState } from 'react';
-import { useTranslation } from 'react-i18next';
-
-import { useAgentStore } from '@/store/agent';
-import { agentSelectors } from '@/store/agent/selectors';
-
-const Temperature = memo(() => {
-  const { t } = useTranslation('setting');
-  const [popoverOpen, setPopoverOpen] = useState(false);
-
-  const [temperature, updateAgentConfig] = useAgentStore((s) => {
-    const config = agentSelectors.currentAgentConfig(s);
-    return [config.params?.temperature, s.updateAgentConfig];
-  });
-
-  const title = t('settingModel.temperature.titleWithValue', { value: temperature });
-
-  return (
-    <Popover
-      arrow={false}
-      content={
-        <SliderWithInput
-          controls={false}
-          max={2}
-          min={0}
-          onChange={(v) => {
-            updateAgentConfig({ params: { temperature: v } });
-          }}
-          size={'small'}
-          step={0.1}
-          style={{ width: 160 }}
-          value={temperature}
-        />
-      }
-      onOpenChange={setPopoverOpen}
-      open={popoverOpen}
-      placement={'top'}
-      title={t('settingModel.temperature.title')}
-      trigger={'click'}
-    >
-      <ActionIcon icon={Thermometer} placement={'bottom'} title={popoverOpen ? undefined : title} />
-    </Popover>
-  );
-});
-
-export default Temperature;