@lobehub/chat 1.141.5 → 1.141.7

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

@@ -1,7 +1,10 @@
 import { Form, type FormItemProps, Tag } from '@lobehub/ui';
+import { Form as AntdForm, Checkbox } from 'antd';
+import { createStyles } from 'antd-style';
 import isEqual from 'fast-deep-equal';
 import { debounce } from 'lodash-es';
-import { memo } from 'react';
+import { memo, useCallback, useEffect, useRef } from 'react';
+import type { ComponentType } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
@@ -20,75 +23,283 @@ interface ControlsProps {
   setUpdating: (updating: boolean) => void;
   updating: boolean;
 }
+
+type ParamKey = 'temperature' | 'top_p' | 'presence_penalty' | 'frequency_penalty';
+
+type ParamLabelKey =
+  | 'settingModel.temperature.title'
+  | 'settingModel.topP.title'
+  | 'settingModel.presencePenalty.title'
+  | 'settingModel.frequencyPenalty.title';
+
+type ParamDescKey =
+  | 'settingModel.temperature.desc'
+  | 'settingModel.topP.desc'
+  | 'settingModel.presencePenalty.desc'
+  | 'settingModel.frequencyPenalty.desc';
+
+const useStyles = createStyles(({ css, token }) => ({
+  checkbox: css`
+    .ant-checkbox-inner {
+      border-radius: 4px;
+    }
+
+    &:hover .ant-checkbox-inner {
+      border-color: ${token.colorPrimary};
+    }
+  `,
+  label: css`
+    user-select: none;
+  `,
+  sliderWrapper: css`
+    display: flex;
+    gap: 16px;
+    align-items: center;
+    width: 100%;
+  `,
+}));
+
+// Wrapper component to handle checkbox + slider
+interface ParamControlWrapperProps {
+  Component: ComponentType<any>;
+  checked: boolean;
+  disabled: boolean;
+  onChange?: (value: number) => void;
+  onToggle: (checked: boolean) => void;
+  styles: any;
+  value?: number;
+}
+
+const ParamControlWrapper = memo<ParamControlWrapperProps>(
+  ({ Component, value, onChange, disabled, checked, onToggle, styles }) => {
+    return (
+      <div className={styles.sliderWrapper}>
+        <Checkbox
+          checked={checked}
+          className={styles.checkbox}
+          onChange={(e) => {
+            e.stopPropagation();
+            onToggle(e.target.checked);
+          }}
+        />
+        <div style={{ flex: 1 }}>
+          <Component disabled={disabled} onChange={onChange} value={value} />
+        </div>
+      </div>
+    );
+  },
+);
+
+const PARAM_NAME_MAP: Record<ParamKey, (string | number)[]> = {
+  frequency_penalty: ['params', 'frequency_penalty'],
+  presence_penalty: ['params', 'presence_penalty'],
+  temperature: ['params', 'temperature'],
+  top_p: ['params', 'top_p'],
+};
+
+const PARAM_DEFAULTS: Record<ParamKey, number> = {
+  frequency_penalty: 0,
+  presence_penalty: 0,
+  temperature: 0.7,
+  top_p: 1,
+};
+
+const PARAM_CONFIG = {
+  frequency_penalty: {
+    Component: FrequencyPenalty,
+    descKey: 'settingModel.frequencyPenalty.desc',
+    labelKey: 'settingModel.frequencyPenalty.title',
+    tag: 'frequency_penalty',
+  },
+  presence_penalty: {
+    Component: PresencePenalty,
+    descKey: 'settingModel.presencePenalty.desc',
+    labelKey: 'settingModel.presencePenalty.title',
+    tag: 'presence_penalty',
+  },
+  temperature: {
+    Component: Temperature,
+    descKey: 'settingModel.temperature.desc',
+    labelKey: 'settingModel.temperature.title',
+    tag: 'temperature',
+  },
+  top_p: {
+    Component: TopP,
+    descKey: 'settingModel.topP.desc',
+    labelKey: 'settingModel.topP.title',
+    tag: 'top_p',
+  },
+} satisfies Record<
+  ParamKey,
+  {
+    Component: ComponentType<any>;
+    descKey: ParamDescKey;
+    labelKey: ParamLabelKey;
+    tag: string;
+  }
+>;
+
 const Controls = memo<ControlsProps>(({ setUpdating }) => {
   const { t } = useTranslation('setting');
   const mobile = useServerConfigStore((s) => s.isMobile);
   const updateAgentConfig = useAgentStore((s) => s.updateAgentConfig);
+  const { styles } = useStyles();
 
   const config = useAgentStore(agentSelectors.currentAgentConfig, isEqual);
+  const [form] = Form.useForm();
 
-  const items: FormItemProps[] = [
-    {
-      children: <Temperature />,
-      label: (
-        <Flexbox align={'center'} gap={8} horizontal justify={'space-between'}>
-          {t('settingModel.temperature.title')}
-          <InfoTooltip title={t('settingModel.temperature.desc')} />
-        </Flexbox>
-      ),
-      name: ['params', 'temperature'],
-      tag: 'temperature',
-    },
-    {
-      children: <TopP />,
-      label: (
-        <Flexbox gap={8} horizontal>
-          {t('settingModel.topP.title')}
-          <InfoTooltip title={t('settingModel.topP.desc')} />
-        </Flexbox>
-      ),
-      name: ['params', 'top_p'],
-      tag: 'top_p',
+  const { frequency_penalty, presence_penalty, temperature, top_p } = config.params ?? {};
+
+  const lastValuesRef = useRef<Record<ParamKey, number | undefined>>({
+    frequency_penalty,
+    presence_penalty,
+    temperature,
+    top_p,
+  });
+
+  useEffect(() => {
+    form.setFieldsValue(config);
+
+    if (typeof temperature === 'number') lastValuesRef.current.temperature = temperature;
+    if (typeof top_p === 'number') lastValuesRef.current.top_p = top_p;
+    if (typeof presence_penalty === 'number') {
+      lastValuesRef.current.presence_penalty = presence_penalty;
+    }
+    if (typeof frequency_penalty === 'number') {
+      lastValuesRef.current.frequency_penalty = frequency_penalty;
+    }
+  }, [config, form, frequency_penalty, presence_penalty, temperature, top_p]);
+
+  const temperatureValue = AntdForm.useWatch(PARAM_NAME_MAP.temperature, form);
+  const topPValue = AntdForm.useWatch(PARAM_NAME_MAP.top_p, form);
+  const presencePenaltyValue = AntdForm.useWatch(PARAM_NAME_MAP.presence_penalty, form);
+  const frequencyPenaltyValue = AntdForm.useWatch(PARAM_NAME_MAP.frequency_penalty, form);
+
+  useEffect(() => {
+    if (typeof temperatureValue === 'number') lastValuesRef.current.temperature = temperatureValue;
+  }, [temperatureValue]);
+
+  useEffect(() => {
+    if (typeof topPValue === 'number') lastValuesRef.current.top_p = topPValue;
+  }, [topPValue]);
+
+  useEffect(() => {
+    if (typeof presencePenaltyValue === 'number') {
+      lastValuesRef.current.presence_penalty = presencePenaltyValue;
+    }
+  }, [presencePenaltyValue]);
+
+  useEffect(() => {
+    if (typeof frequencyPenaltyValue === 'number') {
+      lastValuesRef.current.frequency_penalty = frequencyPenaltyValue;
+    }
+  }, [frequencyPenaltyValue]);
+
+  const enabledMap: Record<ParamKey, boolean> = {
+    frequency_penalty: typeof frequencyPenaltyValue === 'number',
+    presence_penalty: typeof presencePenaltyValue === 'number',
+    temperature: typeof temperatureValue === 'number',
+    top_p: typeof topPValue === 'number',
+  };
+
+  const handleToggle = useCallback(
+    async (key: ParamKey, enabled: boolean) => {
+      const namePath = PARAM_NAME_MAP[key];
+      let newValue: number | undefined;
+
+      if (!enabled) {
+        const currentValue = form.getFieldValue(namePath);
+        if (typeof currentValue === 'number') {
+          lastValuesRef.current[key] = currentValue;
+        }
+        newValue = undefined;
+        form.setFieldValue(namePath, undefined);
+      } else {
+        const fallback = lastValuesRef.current[key];
+        const nextValue = typeof fallback === 'number' ? fallback : PARAM_DEFAULTS[key];
+        lastValuesRef.current[key] = nextValue;
+        newValue = nextValue;
+        form.setFieldValue(namePath, nextValue);
+      }
+
+      // 立即保存变更 - 手动构造配置对象确保使用最新值
+      setUpdating(true);
+      const currentValues = form.getFieldsValue();
+      const prevParams = (currentValues.params ?? {}) as Record<ParamKey, number | undefined>;
+      const currentParams: Record<ParamKey, number | undefined> = { ...prevParams };
+
+      if (newValue === undefined) {
+        // 显式删除该属性，而不是设置为 undefined
+        // 这样可以确保 Form 表单状态同步
+        delete currentParams[key];
+        // 使用 null 作为禁用标记（数据库会保留 null，前端据此判断复选框状态）
+        currentParams[key] = null as any;
+      } else {
+        currentParams[key] = newValue;
+      }
+
+      const updatedConfig = {
+        ...currentValues,
+        params: currentParams,
+      };
+
+      await updateAgentConfig(updatedConfig);
+      setUpdating(false);
     },
-    {
-      children: <PresencePenalty />,
-      label: (
-        <Flexbox gap={8} horizontal>
-          {t('settingModel.presencePenalty.title')}
-          <InfoTooltip title={t('settingModel.presencePenalty.desc')} />
-        </Flexbox>
+    [form, setUpdating, updateAgentConfig],
+  );
+
+  // 使用 useMemo 确保防抖函数只创建一次
+  const handleValuesChange = useCallback(
+    debounce(async (values) => {
+      setUpdating(true);
+      await updateAgentConfig(values);
+      setUpdating(false);
+    }, 500),
+    [updateAgentConfig, setUpdating],
+  );
+
+  const baseItems: FormItemProps[] = (Object.keys(PARAM_CONFIG) as ParamKey[]).map((key) => {
+    const meta = PARAM_CONFIG[key];
+    const Component = meta.Component;
+    const enabled = enabledMap[key];
+
+    return {
+      children: (
+        <ParamControlWrapper
+          Component={Component}
+          checked={enabled}
+          disabled={!enabled}
+          onToggle={(checked) => handleToggle(key, checked)}
+          styles={styles}
+        />
       ),
-      name: ['params', 'presence_penalty'],
-      tag: 'presence_penalty',
-    },
-    {
-      children: <FrequencyPenalty />,
       label: (
-        <Flexbox gap={8} horizontal>
-          {t('settingModel.frequencyPenalty.title')}
-          <InfoTooltip title={t('settingModel.frequencyPenalty.desc')} />
+        <Flexbox align={'center'} className={styles.label} gap={8} horizontal>
+          {t(meta.labelKey)}
+          <InfoTooltip title={t(meta.descKey)} />
         </Flexbox>
       ),
-      name: ['params', 'frequency_penalty'],
-      tag: 'frequency_penalty',
-    },
-  ];
+      name: PARAM_NAME_MAP[key],
+      tag: meta.tag,
+    } satisfies FormItemProps;
+  });
 
   return (
     <Form
+      form={form}
       initialValues={config}
-      itemMinWidth={200}
+      itemMinWidth={220}
       items={
         mobile
-          ? items
-          : items.map(({ tag, ...item }) => ({ ...item, desc: <Tag size={'small'}>{tag}</Tag> }))
+          ? baseItems
+          : baseItems.map(({ tag, ...item }) => ({
+              ...item,
+              desc: <Tag size={'small'}>{tag}</Tag>,
+            }))
       }
       itemsType={'flat'}
-      onValuesChange={debounce(async (values) => {
-        setUpdating(true);
-        await updateAgentConfig(values);
-        setUpdating(false);
-      }, 500)}
+      onValuesChange={handleValuesChange}
       styles={{
         group: {
           background: 'transparent',

package/src/features/ModelParamsControl/FrequencyPenalty.tsx

@@ -5,16 +5,20 @@ import { memo } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
 interface FrequencyPenaltyProps {
+  disabled?: boolean;
   onChange?: (value: number) => void;
   value?: number;
 }
 
-const FrequencyPenalty = memo<FrequencyPenaltyProps>(({ value, onChange }) => {
+const FrequencyPenalty = memo<FrequencyPenaltyProps>(({ value, onChange, disabled }) => {
   const theme = useTheme();
 
   return (
-    <Flexbox style={{ paddingInlineStart: 8 }}>
+    <Flexbox style={{ width: '100%' }}>
       <SliderWithInput
+        changeOnWheel
+        controls={false}
+        disabled={disabled}
         marks={{
           '-2': (
             <Icon icon={FileIcon} size={'small'} style={{ color: theme.colorTextQuaternary }} />
@@ -29,9 +33,10 @@ const FrequencyPenalty = memo<FrequencyPenaltyProps>(({ value, onChange }) => {
         onChange={onChange}
         size={'small'}
         step={0.1}
+        style={{ height: 42 }}
         styles={{
           input: {
-            maxWidth: 64,
+            maxWidth: 43,
           },
         }}
         value={value}

package/src/features/ModelParamsControl/PresencePenalty.tsx

@@ -5,16 +5,20 @@ import { memo } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
 interface PresencePenaltyProps {
+  disabled?: boolean;
   onChange?: (value: number) => void;
   value?: number;
 }
 
-const PresencePenalty = memo<PresencePenaltyProps>(({ value, onChange }) => {
+const PresencePenalty = memo<PresencePenaltyProps>(({ value, onChange, disabled }) => {
   const theme = useTheme();
 
   return (
-    <Flexbox style={{ paddingInlineStart: 8 }}>
+    <Flexbox style={{ width: '100%' }}>
       <SliderWithInput
+        changeOnWheel
+        controls={false}
+        disabled={disabled}
         marks={{
           '-2': (
             <Icon icon={RepeatIcon} size={'small'} style={{ color: theme.colorTextQuaternary }} />
@@ -27,9 +31,10 @@ const PresencePenalty = memo<PresencePenaltyProps>(({ value, onChange }) => {
         onChange={onChange}
         size={'small'}
         step={0.1}
+        style={{ height: 42 }}
         styles={{
           input: {
-            maxWidth: 64,
+            maxWidth: 43,
           },
         }}
         value={value}

package/src/features/ModelParamsControl/Temperature.tsx

@@ -41,16 +41,19 @@ const Warning = memo(() => {
 });
 
 interface TemperatureProps {
+  disabled?: boolean;
   onChange?: (value: number) => void;
   value?: number;
 }
 
-const Temperature = memo<TemperatureProps>(({ value, onChange }) => {
+const Temperature = memo<TemperatureProps>(({ value, onChange, disabled }) => {
   const theme = useTheme();
   return (
-    <Flexbox gap={4} style={{ paddingInlineStart: 8 }}>
+    <Flexbox gap={4} style={{ width: '100%' }}>
       <SliderWithInput
+        changeOnWheel
         controls={false}
+        disabled={disabled}
         marks={{
           0: <Icon icon={Sparkle} size={'small'} style={{ color: theme.colorTextQuaternary }} />,
           1: <div />,
@@ -60,15 +63,15 @@ const Temperature = memo<TemperatureProps>(({ value, onChange }) => {
         onChange={onChange}
         size={'small'}
         step={0.1}
-        style={{ height: 48 }}
+        style={{ height: 42 }}
         styles={{
           input: {
-            maxWidth: 64,
+            maxWidth: 43,
           },
         }}
         value={value}
       />
-      <Warning />
+      {!disabled && <Warning />}
     </Flexbox>
   );
 });

package/src/features/ModelParamsControl/TopP.tsx

@@ -5,16 +5,20 @@ import { memo } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
 interface TopPProps {
+  disabled?: boolean;
   onChange?: (value: number) => void;
   value?: number;
 }
 
-const TopP = memo<TopPProps>(({ value, onChange }) => {
+const TopP = memo<TopPProps>(({ value, onChange, disabled }) => {
   const theme = useTheme();
 
   return (
-    <Flexbox style={{ paddingInlineStart: 8 }}>
+    <Flexbox style={{ width: '100%' }}>
       <SliderWithInput
+        changeOnWheel
+        controls={false}
+        disabled={disabled}
         marks={{
           0: (
             <Icon
@@ -31,9 +35,10 @@ const TopP = memo<TopPProps>(({ value, onChange }) => {
         onChange={onChange}
         size={'small'}
         step={0.1}
+        style={{ height: 42 }}
         styles={{
           input: {
-            maxWidth: 64,
+            maxWidth: 43,
           },
         }}
         value={value}

package/src/layout/GlobalProvider/Query.tsx

@@ -1,7 +1,6 @@
 'use client';
 
-import { QueryClient } from '@tanstack/query-core';
-import { QueryClientProvider } from '@tanstack/react-query';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import React, { PropsWithChildren, useState } from 'react';
 
 import { lambdaQuery, lambdaQueryClient } from '@/libs/trpc/client';

package/src/services/chat/index.ts

@@ -274,6 +274,12 @@ class ChatService {
       { ...res, apiMode, model },
     );
 
+    // Convert null to undefined for model params to prevent sending null values to API
+    if (payload.temperature === null) payload.temperature = undefined;
+    if (payload.top_p === null) payload.top_p = undefined;
+    if (payload.presence_penalty === null) payload.presence_penalty = undefined;
+    if (payload.frequency_penalty === null) payload.frequency_penalty = undefined;
+    
     const sdkType = resolveRuntimeProvider(provider);
 
     /**

package/e2e/routes.spec.ts

@@ -1,73 +0,0 @@
-import { expect, test } from '@playwright/test';
-
-// 覆盖核心可访问路径（含重定向来源）
-const baseRoutes: string[] = [
-  '/',
-  '/chat',
-  '/discover',
-  '/image',
-  '/files',
-  '/repos', // next.config.ts -> /files
-  '/changelog',
-];
-
-// settings 路由改为通过 query 参数控制 active tab
-// 参考 SettingsTabs: about, agent, common, hotkey, llm, provider, proxy, storage, system-agent, tts
-const settingsTabs = [
-  'common',
-  'llm',
-  'provider',
-  'about',
-  'hotkey',
-  'proxy',
-  'storage',
-  'tts',
-  'system-agent',
-  'agent',
-];
-
-const routes: string[] = [...baseRoutes, ...settingsTabs.map((key) => `/settings?active=${key}`)];
-
-// CI 环境下跳过容易不稳定或受特性开关影响的路由
-const ciSkipPaths = new Set<string>([
-  '/image',
-  '/changelog',
-  '/settings?active=common',
-  '/settings?active=llm',
-]);
-
-// @ts-ignore
-async function assertNoPageErrors(page: Parameters<typeof test>[0]['page']) {
-  const pageErrors: Error[] = [];
-  const consoleErrors: string[] = [];
-
-  page.on('pageerror', (err: Error) => pageErrors.push(err));
-  page.on('console', (msg: any) => {
-    if (msg.type() === 'error') consoleErrors.push(msg.text());
-  });
-
-  // 仅校验页面级错误，忽略控制台 error 以提升稳定性
-  expect
-    .soft(pageErrors, `page errors: ${pageErrors.map((e) => e.message).join('\n')}`)
-    .toHaveLength(0);
-}
-
-test.describe('Smoke: core routes', () => {
-  for (const path of routes) {
-    test(`should open ${path} without error`, async ({ page }) => {
-      if (process.env.CI && ciSkipPaths.has(path)) test.skip(true, 'skip flaky route on CI');
-      const response = await page.goto(path, { waitUntil: 'commit' });
-      // 2xx 或 3xx 视为可接受（允许中间件/重定向）
-      const status = response?.status() ?? 0;
-      expect(status, `unexpected status for ${path}: ${status}`).toBeLessThan(400);
-
-      // 一般错误标题防御
-      await expect(page).not.toHaveTitle(/not found|error/i);
-
-      // body 可见
-      await expect(page.locator('body')).toBeVisible();
-
-      await assertNoPageErrors(page);
-    });
-  }
-});

package/playwright.config.ts

@@ -1,35 +0,0 @@
-import { defineConfig, devices } from '@playwright/test';
-
-const PORT = process.env.PORT ? Number(process.env.PORT) : 3010;
-
-export default defineConfig({
-  expect: { timeout: 10_000 },
-  fullyParallel: true,
-  projects: [
-    {
-      name: 'chromium',
-      use: { ...devices['Desktop Chrome'] },
-    },
-  ],
-  reporter: 'list',
-  retries: 0,
-  testDir: './e2e',
-  timeout: 1_200_000,
-  use: {
-    baseURL: `http://localhost:${PORT}`,
-    trace: 'on-first-retry',
-  },
-  webServer: {
-    command: 'npm run dev',
-    env: {
-      ENABLE_AUTH_PROTECTION: '0',
-      ENABLE_OIDC: '0',
-      NEXT_PUBLIC_ENABLE_CLERK_AUTH: '0',
-      NEXT_PUBLIC_ENABLE_NEXT_AUTH: '0',
-      NODE_OPTIONS: '--max-old-space-size=6144',
-    },
-    reuseExistingServer: true,
-    timeout: 120_000,
-    url: `http://localhost:${PORT}/chat`,
-  },
-});