@lobehub/chat 1.84.9 → 1.84.11

package/src/config/aiModels/siliconcloud.ts

@@ -3,6 +3,95 @@ import { AIChatModelCard } from '@/types/aiModel';
 // https://siliconflow.cn/zh-cn/models
 
 const siliconcloudChatModels: AIChatModelCard[] = [
+  {
+    abilities: {
+      functionCall: true,
+      reasoning: true,
+    },
+    contextWindowTokens: 131_072,
+    description:
+      'Qwen3是一款能力大幅提升的新一代通义千问大模型，在推理、通用、Agent和多语言等多个核心能力上均达到业界领先水平，并支持思考模式切换。',
+    displayName: 'Qwen3 32B',
+    id: 'Qwen/Qwen3-32B',
+    organization: 'Qwen',
+    pricing: {
+      currency: 'CNY',
+      input: 0.5,
+      output: 2,
+    },
+    releasedAt: '2025-04-28',
+    settings: {
+      extendParams: ['enableReasoning', 'reasoningBudgetToken'],
+    },
+    type: 'chat',
+  },
+  {
+    abilities: {
+      functionCall: true,
+      reasoning: true,
+    },
+    contextWindowTokens: 131_072,
+    description:
+      'Qwen3是一款能力大幅提升的新一代通义千问大模型，在推理、通用、Agent和多语言等多个核心能力上均达到业界领先水平，并支持思考模式切换。',
+    displayName: 'Qwen3 30B A3B',
+    id: 'Qwen/Qwen3-30B-A3B',
+    organization: 'Qwen',
+    pricing: {
+      currency: 'CNY',
+      input: 0.35,
+      output: 1.4,
+    },
+    releasedAt: '2025-04-28',
+    settings: {
+      extendParams: ['enableReasoning', 'reasoningBudgetToken'],
+    },
+    type: 'chat',
+  },
+  {
+    abilities: {
+      functionCall: true,
+      reasoning: true,
+    },
+    contextWindowTokens: 131_072,
+    description:
+      'Qwen3是一款能力大幅提升的新一代通义千问大模型，在推理、通用、Agent和多语言等多个核心能力上均达到业界领先水平，并支持思考模式切换。',
+    displayName: 'Qwen3 14B',
+    id: 'Qwen/Qwen3-14B',
+    organization: 'Qwen',
+    pricing: {
+      currency: 'CNY',
+      input: 0.25,
+      output: 1,
+    },
+    releasedAt: '2025-04-28',
+    settings: {
+      extendParams: ['enableReasoning', 'reasoningBudgetToken'],
+    },
+    type: 'chat',
+  },
+  {
+    abilities: {
+      functionCall: true,
+      reasoning: true,
+    },
+    contextWindowTokens: 131_072,
+    description:
+      'Qwen3是一款能力大幅提升的新一代通义千问大模型，在推理、通用、Agent和多语言等多个核心能力上均达到业界领先水平，并支持思考模式切换。',
+    displayName: 'Qwen3 8B',
+    enabled: true,
+    id: 'Qwen/Qwen3-8B',
+    organization: 'Qwen',
+    pricing: {
+      currency: 'CNY',
+      input: 0,
+      output: 0,
+    },
+    releasedAt: '2025-04-28',
+    settings: {
+      extendParams: ['enableReasoning', 'reasoningBudgetToken'],
+    },
+    type: 'chat',
+  },
   {
     abilities: {
       reasoning: true,
@@ -11,7 +100,6 @@ const siliconcloudChatModels: AIChatModelCard[] = [
     description:
       'GLM-Z1-Rumination-32B-0414 是一个具有沉思能力的深度推理模型（与 OpenAI 的 Deep Research 对标）。与典型的深度思考模型不同，沉思模型采用更长时间的深度思考来解决更开放和复杂的问题。',
     displayName: 'GLM-Z1-Rumination 32B 0414',
-    enabled: true,
     id: 'THUDM/GLM-Z1-Rumination-32B-0414',
     pricing: {
       currency: 'CNY',
@@ -28,7 +116,6 @@ const siliconcloudChatModels: AIChatModelCard[] = [
     description:
       'GLM-Z1-32B-0414 是一个具有深度思考能力的推理模型。该模型基于 GLM-4-32B-0414 通过冷启动和扩展强化学习开发，并在数学、代码和逻辑任务上进行了进一步训练。与基础模型相比，GLM-Z1-32B-0414 显著提升了数学能力和解决复杂任务的能力。',
     displayName: 'GLM-Z1 32B 0414',
-    enabled: true,
     id: 'THUDM/GLM-Z1-32B-0414',
     pricing: {
       currency: 'CNY',
@@ -59,7 +146,6 @@ const siliconcloudChatModels: AIChatModelCard[] = [
     description:
       'GLM-4-32B-0414 是 GLM 系列的新一代开源模型，拥有 320 亿参数。该模型性能可与 OpenAI 的 GPT 系列和 DeepSeek 的 V3/R1 系列相媲美。',
     displayName: 'GLM-4 32B 0414',
-    enabled: true,
     id: 'THUDM/GLM-4-32B-0414',
     pricing: {
       currency: 'CNY',
@@ -91,7 +177,6 @@ const siliconcloudChatModels: AIChatModelCard[] = [
     description:
       'DeepSeek-R1 是一款强化学习（RL）驱动的推理模型，解决了模型中的重复性和可读性问题。在 RL 之前，DeepSeek-R1 引入了冷启动数据，进一步优化了推理性能。它在数学、代码和推理任务中与 OpenAI-o1 表现相当，并且通过精心设计的训练方法，提升了整体效果。',
     displayName: 'DeepSeek R1',
-    enabled: true,
     id: 'deepseek-ai/DeepSeek-R1',
     pricing: {
       currency: 'CNY',
@@ -108,7 +193,6 @@ const siliconcloudChatModels: AIChatModelCard[] = [
     description:
       'DeepSeek-V3 是一款拥有 6710 亿参数的混合专家（MoE）语言模型，采用多头潜在注意力（MLA）和 DeepSeekMoE 架构，结合无辅助损失的负载平衡策略，优化推理和训练效率。通过在 14.8 万亿高质量tokens上预训练，并进行监督微调和强化学习，DeepSeek-V3 在性能上超越其他开源模型，接近领先闭源模型。',
     displayName: 'DeepSeek V3',
-    enabled: true,
     id: 'deepseek-ai/DeepSeek-V3',
     pricing: {
       currency: 'CNY',
@@ -303,7 +387,6 @@ const siliconcloudChatModels: AIChatModelCard[] = [
     description:
       'QVQ-72B-Preview 是由 Qwen 团队开发的专注于视觉推理能力的研究型模型，其在复杂场景理解和解决视觉相关的数学问题方面具有独特优势。',
     displayName: 'QVQ 72B Preview',
-    enabled: true,
     id: 'Qwen/QVQ-72B-Preview',
     pricing: {
       currency: 'CNY',
@@ -320,7 +403,6 @@ const siliconcloudChatModels: AIChatModelCard[] = [
     description:
       'QwQ 是 Qwen 系列的推理模型。与传统的指令调优模型相比，QwQ 具备思考和推理能力，能够在下游任务中实现显著增强的性能，尤其是在解决困难问题方面。QwQ-32B 是中型推理模型，能够在与最先进的推理模型（如 DeepSeek-R1、o1-mini）的对比中取得有竞争力的性能。该模型采用 RoPE、SwiGLU、RMSNorm 和 Attention QKV bias 等技术，具有 64 层网络结构和 40 个 Q 注意力头（GQA 架构中 KV 为 8 个）。',
     displayName: 'QwQ 32B',
-    enabled: true,
     id: 'Qwen/QwQ-32B',
     pricing: {
       currency: 'CNY',

package/src/config/modelProviders/google.ts

@@ -3,6 +3,22 @@ import { ModelProviderCard } from '@/types/llm';
 // ref: https://ai.google.dev/gemini-api/docs/models/gemini
 const Google: ModelProviderCard = {
   chatModels: [
+    {
+      contextWindowTokens: 1_048_576 + 65_536,
+      description:
+        'Gemini 2.5 Pro Experimental 是 Google 最先进的思维模型，能够对代码、数学和STEM领域的复杂问题进行推理，以及使用长上下文分析大型数据集、代码库和文档。',
+      displayName: 'Gemini 2.5 Pro Experimental 03-25',
+      enabled: true,
+      functionCall: true,
+      id: 'gemini-2.5-pro-exp-03-25',
+      maxOutput: 65_536,
+      pricing: {
+        input: 0,
+        output: 0,
+      },
+      releasedAt: '2025-03-25',
+      vision: true,
+    },
     {
       contextWindowTokens: 2_097_152 + 8192,
       description:

package/src/features/ChatInput/ActionBar/{Clear.tsx → Clear/index.tsx}

@@ -1,4 +1,3 @@
-import { ActionIcon } from '@lobehub/ui';
 import { Popconfirm } from 'antd';
 import { Eraser } from 'lucide-react';
 import { memo, useCallback, useState } from 'react';
@@ -11,6 +10,8 @@ import { useUserStore } from '@/store/user';
 import { settingsSelectors } from '@/store/user/selectors';
 import { HotkeyEnum } from '@/types/hotkey';
 
+import Action from '../components/Action';
+
 export const useClearCurrentMessages = () => {
   const clearMessage = useChatStore((s) => s.clearMessage);
   const clearImageList = useFileStore((s) => s.clearChatUploadFileList);
@@ -47,7 +48,7 @@ const Clear = memo(() => {
         </div>
       }
     >
-      <ActionIcon
+      <Action
         icon={Eraser}
         title={actionTitle}
         tooltipProps={{

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

@@ -0,0 +1,72 @@
+import { Form, type FormItemProps, SliderWithInput } from '@lobehub/ui';
+import { Switch } from 'antd';
+import { debounce } from 'lodash-es';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { useAgentStore } from '@/store/agent';
+import { agentChatConfigSelectors } from '@/store/agent/selectors';
+
+interface ControlsProps {
+  setUpdating: (updating: boolean) => void;
+  updating: boolean;
+}
+const Controls = memo<ControlsProps>(({ updating, setUpdating }) => {
+  const { t } = useTranslation('setting');
+
+  const [historyCount, enableHistoryCount, updateAgentConfig] = useAgentStore((s) => {
+    return [
+      agentChatConfigSelectors.historyCount(s),
+      agentChatConfigSelectors.enableHistoryCount(s),
+      s.updateAgentChatConfig,
+    ];
+  });
+
+  let items: FormItemProps[] = [
+    {
+      children: <Switch loading={updating} size={'small'} />,
+      label: t('settingChat.enableHistoryCount.title'),
+      layout: 'horizontal',
+      minWidth: undefined,
+      name: 'enableHistoryCount',
+      valuePropName: 'checked',
+    },
+    {
+      children: (
+        <SliderWithInput
+          disabled={!enableHistoryCount}
+          max={20}
+          min={0}
+          size={'small'}
+          step={1}
+          style={{ marginBlock: 8, paddingLeft: 4 }}
+        />
+      ),
+      name: 'historyCount',
+      noStyle: true,
+    },
+  ];
+
+  return (
+    <Form
+      initialValues={{
+        enableHistoryCount,
+        historyCount,
+      }}
+      items={items}
+      itemsType={'flat'}
+      onValuesChange={debounce(async (values) => {
+        setUpdating(true);
+        await updateAgentConfig(values);
+        setUpdating(false);
+      }, 500)}
+      styles={{
+        group: {
+          background: 'transparent',
+        },
+      }}
+    />
+  );
+});
+
+export default Controls;

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

@@ -0,0 +1,46 @@
+import { Timer, TimerOff } from 'lucide-react';
+import { memo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { useAgentStore } from '@/store/agent';
+import { agentChatConfigSelectors, agentSelectors } from '@/store/agent/selectors';
+
+import Action from '../components/Action';
+import Controls from './Controls';
+
+const History = memo(() => {
+  const [isLoading] = useAgentStore((s) => [agentSelectors.isAgentConfigLoading(s)]);
+  const [updating, setUpdating] = useState(false);
+  const { t } = useTranslation('setting');
+
+  const [historyCount, enableHistoryCount] = useAgentStore((s) => {
+    return [
+      agentChatConfigSelectors.historyCount(s),
+      agentChatConfigSelectors.enableHistoryCount(s),
+    ];
+  });
+
+  if (isLoading) return <Action disabled icon={TimerOff} />;
+
+  const title = t(
+    enableHistoryCount
+      ? 'settingChat.enableHistoryCount.limited'
+      : 'settingChat.enableHistoryCount.unlimited',
+    { number: historyCount || 0 },
+  );
+
+  return (
+    <Action
+      icon={enableHistoryCount ? Timer : TimerOff}
+      loading={updating}
+      popover={{
+        content: <Controls setUpdating={setUpdating} updating={updating} />,
+        minWidth: 240,
+      }}
+      showTooltip={false}
+      title={title}
+    />
+  );
+});
+
+export default History;

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

@@ -1,54 +1,59 @@
-import { ActionIcon } from '@lobehub/ui';
-import { LibraryBig, LucideLoader2 } from 'lucide-react';
-import { Suspense, memo } from 'react';
+import { LibraryBig } from 'lucide-react';
+import { Suspense, memo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import TipGuide from '@/components/TipGuide';
 import { LOBE_CHAT_CLOUD } from '@/const/branding';
 import { isServerMode } from '@/const/version';
+import { AssignKnowledgeBaseModal } from '@/features/KnowledgeBaseModal';
 import { featureFlagsSelectors, useServerConfigStore } from '@/store/serverConfig';
 import { useUserStore } from '@/store/user';
 import { preferenceSelectors } from '@/store/user/selectors';
 
-import DropdownMenu from './Dropdown';
+import Action from '../components/Action';
+import { useControls } from './useControls';
 
 const enableKnowledge = isServerMode;
 
 const Knowledge = memo(() => {
   const { t } = useTranslation('chat');
-
   const { enableKnowledgeBase } = useServerConfigStore(featureFlagsSelectors);
-
   const [showTip, updateGuideState] = useUserStore((s) => [
     preferenceSelectors.showUploadFileInKnowledgeBaseTip(s),
     s.updateGuideState,
   ]);
+  const [modalOpen, setModalOpen] = useState(false);
+  const [updating, setUpdating] = useState(false);
 
-  if (!enableKnowledgeBase) {
-    return null;
-  }
+  const items = useControls({ setModalOpen, setUpdating });
 
-  const icon = (
-    <ActionIcon
-      disabled={!enableKnowledge}
-      icon={LibraryBig}
-      title={
-        enableKnowledge
-          ? t('knowledgeBase.title')
-          : t('knowledgeBase.disabled', { cloud: LOBE_CHAT_CLOUD })
-      }
-      tooltipProps={{
-        placement: 'bottom',
+  if (!enableKnowledgeBase) return null;
+  if (!enableKnowledge)
+    return (
+      <Action
+        disabled
+        icon={LibraryBig}
+        showTooltip={true}
+        title={t('knowledgeBase.disabled', { cloud: LOBE_CHAT_CLOUD })}
+      />
+    );
+
+  const content = (
+    <Action
+      dropdown={{
+        maxWidth: 320,
+        menu: { items },
+        minWidth: 240,
       }}
+      icon={LibraryBig}
+      loading={updating}
+      showTooltip={false}
+      title={t('knowledgeBase.title')}
     />
   );
 
-  if (!enableKnowledge) return icon;
-
-  const content = <DropdownMenu>{icon}</DropdownMenu>;
-
   return (
-    <Suspense fallback={<ActionIcon icon={LucideLoader2} spin />}>
+    <Suspense fallback={<Action disabled icon={LibraryBig} title={t('knowledgeBase.title')} />}>
       {showTip ? (
         <TipGuide
           onOpenChange={() => {
@@ -63,6 +68,7 @@ const Knowledge = memo(() => {
       ) : (
         content
       )}
+      <AssignKnowledgeBaseModal open={modalOpen} setOpen={setModalOpen} />
     </Suspense>
   );
 });

package/src/features/ChatInput/ActionBar/Knowledge/{Dropdown.tsx → useControls.tsx}

@@ -1,24 +1,24 @@
-import { DropdownProps, Icon, ItemType } from '@lobehub/ui';
+import { Icon, ItemType } from '@lobehub/ui';
 import isEqual from 'fast-deep-equal';
 import { ArrowRight, LibraryBig } from 'lucide-react';
-import { PropsWithChildren, memo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import FileIcon from '@/components/FileIcon';
 import RepoIcon from '@/components/RepoIcon';
-import { AssignKnowledgeBaseModal } from '@/features/KnowledgeBaseModal';
 import { useAgentStore } from '@/store/agent';
 import { agentSelectors } from '@/store/agent/selectors';
 
-import ActionDropdown from '../../components/ActionDropdown';
-import ListItem from './ListItem';
+import CheckboxItem from '../components/CheckbokWithLoading';
 
-const DropdownMenu = memo<PropsWithChildren>(({ children }) => {
+export const useControls = ({
+  setModalOpen,
+  setUpdating,
+}: {
+  setModalOpen: (open: boolean) => void;
+  setUpdating: (updating: boolean) => void;
+}) => {
   const { t } = useTranslation('chat');
 
-  const [open, setOpen] = useState(false);
-  const [dropdownOpen, setDropdownOpen] = useState(false);
-
   const files = useAgentStore(agentSelectors.currentAgentFiles, isEqual);
   const knowledgeBases = useAgentStore(agentSelectors.currentAgentKnowledgeBases, isEqual);
 
@@ -57,12 +57,14 @@ const DropdownMenu = memo<PropsWithChildren>(({ children }) => {
           icon: <FileIcon fileName={item.name} fileType={item.type} size={20} />,
           key: item.id,
           label: (
-            <ListItem
-              enabled={item.enabled}
+            <CheckboxItem
+              checked={item.enabled}
               id={item.id}
               label={item.name}
               onUpdate={async (id, enabled) => {
+                setUpdating(true);
                 await toggleFile(id, enabled);
+                setUpdating(false);
               }}
             />
           ),
@@ -73,12 +75,14 @@ const DropdownMenu = memo<PropsWithChildren>(({ children }) => {
           icon: <RepoIcon />,
           key: item.id,
           label: (
-            <ListItem
-              enabled={item.enabled}
+            <CheckboxItem
+              checked={item.enabled}
               id={item.id}
               label={item.name}
               onUpdate={async (id, enabled) => {
+                setUpdating(true);
                 await toggleKnowledgeBase(id, enabled);
+                setUpdating(false);
               }}
             />
           ),
@@ -97,34 +101,10 @@ const DropdownMenu = memo<PropsWithChildren>(({ children }) => {
       key: 'knowledge-base-store',
       label: t('knowledgeBase.viewMore'),
       onClick: () => {
-        setDropdownOpen(false);
-        setOpen(true);
+        setModalOpen(true);
       },
     },
   ];
 
-  const handleOpenChange: DropdownProps['onOpenChange'] = (nextOpen, info) => {
-    if (info.source === 'trigger' || nextOpen) {
-      setDropdownOpen(nextOpen);
-    }
-  };
-
-  return (
-    <>
-      <ActionDropdown
-        maxHeight={500}
-        menu={{
-          items,
-        }}
-        minWidth={240}
-        onOpenChange={handleOpenChange}
-        open={dropdownOpen}
-      >
-        {children}
-      </ActionDropdown>
-      <AssignKnowledgeBaseModal open={open} setOpen={setOpen} />
-    </>
-  );
-});
-
-export default DropdownMenu;
+  return items;
+};

package/src/features/ChatInput/ActionBar/Model/ControlsForm.tsx

@@ -13,7 +13,12 @@ import { aiModelSelectors, useAiInfraStore } from '@/store/aiInfra';
 import ContextCachingSwitch from './ContextCachingSwitch';
 import ReasoningTokenSlider from './ReasoningTokenSlider';
 
-const ControlsForm = memo(() => {
+interface ControlsProps {
+  setUpdating: (updating: boolean) => void;
+  updating: boolean;
+}
+
+const ControlsForm = memo<ControlsProps>(({ setUpdating }) => {
   const { t } = useTranslation('chat');
   const [model, provider, updateAgentChatConfig] = useAgentStore((s) => [
     agentSelectors.currentAgentModel(s),
@@ -94,7 +99,9 @@ const ControlsForm = memo(() => {
       }
       itemsType={'flat'}
       onValuesChange={async (_, values) => {
+        setUpdating(true);
         await updateAgentChatConfig(values);
+        setUpdating(false);
       }}
       size={'small'}
       style={{ fontSize: 12 }}

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

@@ -1,8 +1,8 @@
 import { ModelIcon } from '@lobehub/icons';
-import { ActionIcon } from '@lobehub/ui';
+import { Icon } from '@lobehub/ui';
 import { createStyles } from 'antd-style';
-import { Settings2Icon } from 'lucide-react';
-import { memo } from 'react';
+import { Loader2Icon, Settings2Icon } from 'lucide-react';
+import { memo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Center, Flexbox } from 'react-layout-kit';
 
@@ -11,7 +11,7 @@ import { useAgentStore } from '@/store/agent';
 import { agentSelectors } from '@/store/agent/selectors';
 import { aiModelSelectors, useAiInfraStore } from '@/store/aiInfra';
 
-import ActionPopover from '../../components/ActionPopover';
+import Action from '../components/Action';
 import ControlsForm from './ControlsForm';
 
 const useStyles = createStyles(({ css, token, cx }) => ({
@@ -55,7 +55,9 @@ const useStyles = createStyles(({ css, token, cx }) => ({
 
 const ModelSwitch = memo(() => {
   const { t } = useTranslation('chat');
-  const { styles, cx } = useStyles();
+  const { styles, cx, theme } = useStyles();
+  const [updating, setUpdating] = useState(false);
+  const [controlsUpdating, setControlsUpdating] = useState(false);
 
   const [model, provider] = useAgentStore((s) => [
     agentSelectors.currentAgentModel(s),
@@ -68,29 +70,35 @@ const ModelSwitch = memo(() => {
 
   return (
     <Flexbox align={'center'} className={isModelHasExtendParams ? styles.container : ''} horizontal>
-      <ModelSwitchPanel>
+      <ModelSwitchPanel setUpdating={setUpdating} updating={updating}>
         <Center
           className={cx(styles.model, isModelHasExtendParams && styles.modelWithControl)}
           height={36}
           width={36}
         >
-          <div className={styles.icon}>
-            <ModelIcon model={model} size={22} />
-          </div>
+          {updating ? (
+            <Icon color={theme.colorTextDescription} icon={Loader2Icon} size={18} spin />
+          ) : (
+            <div className={styles.icon}>
+              <ModelIcon model={model} size={22} />
+            </div>
+          )}
         </Center>
       </ModelSwitchPanel>
 
       {isModelHasExtendParams && (
-        <ActionPopover content={<ControlsForm />} minWidth={350} placement={'topLeft'}>
-          <ActionIcon
-            icon={Settings2Icon}
-            style={{ borderRadius: 20, marginInlineStart: -4 }}
-            title={t('extendParams.title')}
-            tooltipProps={{
-              placement: 'bottom',
-            }}
-          />
-        </ActionPopover>
+        <Action
+          icon={Settings2Icon}
+          loading={controlsUpdating}
+          popover={{
+            content: <ControlsForm setUpdating={setControlsUpdating} updating={controlsUpdating} />,
+            minWidth: 350,
+            placement: 'topLeft',
+          }}
+          showTooltip={false}
+          style={{ borderRadius: 20, marginInlineStart: -4 }}
+          title={t('extendParams.title')}
+        />
       )}
     </Flexbox>
   );

package/src/features/ChatInput/ActionBar/Params/{ParamsControls.tsx → Controls.tsx}

@@ -16,17 +16,18 @@ import { useAgentStore } from '@/store/agent';
 import { agentSelectors } from '@/store/agent/selectors';
 import { useServerConfigStore } from '@/store/serverConfig';
 
-interface ParamsControlsProps {
+interface ControlsProps {
   setUpdating: (updating: boolean) => void;
+  updating: boolean;
 }
-const ParamsControls = memo<ParamsControlsProps>(({ setUpdating }) => {
+const Controls = memo<ControlsProps>(({ setUpdating }) => {
   const { t } = useTranslation('setting');
   const mobile = useServerConfigStore((s) => s.isMobile);
   const updateAgentConfig = useAgentStore((s) => s.updateAgentConfig);
 
   const config = useAgentStore(agentSelectors.currentAgentConfig, isEqual);
 
-  let items: FormItemProps[] = [
+  const items: FormItemProps[] = [
     {
       children: <Temperature />,
       label: (
@@ -78,7 +79,9 @@ const ParamsControls = memo<ParamsControlsProps>(({ setUpdating }) => {
       initialValues={config}
       itemMinWidth={200}
       items={
-        mobile ? items : items.map(({ tag, ...item }) => ({ ...item, desc: <Tag>{tag}</Tag> }))
+        mobile
+          ? items
+          : items.map(({ tag, ...item }) => ({ ...item, desc: <Tag size={'small'}>{tag}</Tag> }))
       }
       itemsType={'flat'}
       onValuesChange={debounce(async (values) => {
@@ -86,17 +89,14 @@ const ParamsControls = memo<ParamsControlsProps>(({ setUpdating }) => {
         await updateAgentConfig(values);
         setUpdating(false);
       }, 500)}
-      style={{ fontSize: 12 }}
       styles={{
         group: {
           background: 'transparent',
-          paddingBottom: mobile ? 16 : 0,
-          paddingInline: 0,
+          paddingBottom: 12,
         },
       }}
-      variant={'borderless'}
     />
   );
 });
 
-export default ParamsControls;
+export default Controls;