@lobehub/chat 1.68.11 → 1.69.0

package/src/app/[variants]/(main)/chat/(workspace)/_layout/Desktop/ChatHeader/HeaderAction.tsx

@@ -4,6 +4,7 @@ import { ActionIcon } from '@lobehub/ui';
 import { PanelRightClose, PanelRightOpen } from 'lucide-react';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
 
 import { DESKTOP_HEADER_ICON_SIZE } from '@/const/layoutTokens';
 import { useGlobalStore } from '@/store/global';
@@ -24,7 +25,7 @@ const HeaderAction = memo(() => {
   const { isAgentEditable } = useServerConfigStore(featureFlagsSelectors);
 
   return (
-    <>
+    <Flexbox gap={4} horizontal>
       <ShareButton />
       <ActionIcon
         icon={showAgentSettings ? PanelRightClose : PanelRightOpen}
@@ -33,7 +34,7 @@ const HeaderAction = memo(() => {
         title={t('roleAndArchive')}
       />
       {isAgentEditable && <SettingButton />}
-    </>
+    </Flexbox>
   );
 });
 

package/src/app/[variants]/(main)/chat/(workspace)/_layout/Desktop/ChatHeader/Main.tsx

@@ -1,8 +1,8 @@
 'use client';
 
 import { ActionIcon, Avatar } from '@lobehub/ui';
-import { ChatHeaderTitle } from '@lobehub/ui/chat';
 import { Skeleton } from 'antd';
+import { createStyles } from 'antd-style';
 import { PanelLeftClose, PanelLeftOpen } from 'lucide-react';
 import { parseAsBoolean, useQueryState } from 'nuqs';
 import { Suspense, memo } from 'react';
@@ -19,17 +19,38 @@ import { sessionMetaSelectors, sessionSelectors } from '@/store/session/selector
 
 import Tags from './Tags';
 
+const useStyles = createStyles(({ css }) => ({
+  container: css`
+    position: relative;
+    overflow: hidden;
+    flex: 1;
+    max-width: 100%;
+  `,
+  tag: css`
+    flex: none;
+    align-items: baseline;
+  `,
+  title: css`
+    overflow: hidden;
+
+    font-size: 14px;
+    font-weight: bold;
+    line-height: 1;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  `,
+}));
+
 const Main = memo(() => {
   const { t } = useTranslation('chat');
-
+  const { styles } = useStyles();
   useInitAgentConfig();
   const [isPinned] = useQueryState('pinned', parseAsBoolean);
 
-  const [init, isInbox, title, description, avatar, backgroundColor] = useSessionStore((s) => [
+  const [init, isInbox, title, avatar, backgroundColor] = useSessionStore((s) => [
     sessionSelectors.isSomeSessionActive(s),
     sessionSelectors.isInboxSession(s),
     sessionMetaSelectors.currentAgentTitle(s),
-    sessionMetaSelectors.currentAgentDescription(s),
     sessionMetaSelectors.currentAgentAvatar(s),
     sessionMetaSelectors.currentAgentBackgroundColor(s),
   ]);
@@ -37,34 +58,36 @@ const Main = memo(() => {
   const openChatSettings = useOpenChatSettings();
 
   const displayTitle = isInbox ? t('inbox.title') : title;
-  const displayDesc = isInbox ? t('inbox.desc') : description;
   const showSessionPanel = useGlobalStore(systemStatusSelectors.showSessionPanel);
   const updateSystemStatus = useGlobalStore((s) => s.updateSystemStatus);
 
-  return !init ? (
-    <Flexbox gap={4} horizontal>
-      {!isPinned && (
-        <ActionIcon
-          aria-label={t('agents')}
-          icon={showSessionPanel ? PanelLeftClose : PanelLeftOpen}
-          onClick={() => {
-            updateSystemStatus({
-              sessionsWidth: showSessionPanel ? 0 : 320,
-              showSessionPanel: !showSessionPanel,
-            });
-          }}
-          size={DESKTOP_HEADER_ICON_SIZE}
-          title={t('agents')}
+  if (!init)
+    return (
+      <Flexbox align={'center'} gap={8} horizontal>
+        {!isPinned && (
+          <ActionIcon
+            aria-label={t('agents')}
+            icon={showSessionPanel ? PanelLeftClose : PanelLeftOpen}
+            onClick={() => {
+              updateSystemStatus({
+                sessionsWidth: showSessionPanel ? 0 : 320,
+                showSessionPanel: !showSessionPanel,
+              });
+            }}
+            size={DESKTOP_HEADER_ICON_SIZE}
+            title={t('agents')}
+          />
+        )}
+        <Skeleton
+          active
+          avatar={{ shape: 'circle', size: 28 }}
+          paragraph={false}
+          title={{ style: { margin: 0, marginTop: 4 }, width: 200 }}
         />
-      )}
-      <Skeleton
-        active
-        avatar={{ shape: 'circle', size: 'default' }}
-        paragraph={false}
-        title={{ style: { margin: 0, marginTop: 8 }, width: 200 }}
-      />
-    </Flexbox>
-  ) : (
+      </Flexbox>
+    );
+
+  return (
     <Flexbox align={'center'} gap={4} horizontal>
       {!isPinned && (
         <ActionIcon
@@ -84,10 +107,13 @@ const Main = memo(() => {
         avatar={avatar}
         background={backgroundColor}
         onClick={() => openChatSettings()}
-        size={40}
+        size={32}
         title={title}
       />
-      <ChatHeaderTitle desc={displayDesc} tag={<Tags />} title={displayTitle} />
+      <Flexbox align={'center'} className={styles.container} gap={8} horizontal>
+        <div className={styles.title}>{displayTitle}</div>
+        <Tags />
+      </Flexbox>
     </Flexbox>
   );
 });

package/src/app/[variants]/(main)/chat/(workspace)/_layout/Desktop/ChatHeader/Tags/HistoryLimitTags.tsx

@@ -0,0 +1,26 @@
+import { Icon, Tag, Tooltip } from '@lobehub/ui';
+import { HistoryIcon } from 'lucide-react';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+
+import { useAgentStore } from '@/store/agent';
+import { agentChatConfigSelectors } from '@/store/agent/selectors';
+
+const SearchTag = memo(() => {
+  const { t } = useTranslation('chat');
+  const historyCount = useAgentStore(agentChatConfigSelectors.historyCount);
+
+  return (
+    <Tooltip title={t('history.title', { count: historyCount })}>
+      <Flexbox height={22}>
+        <Tag>
+          <Icon icon={HistoryIcon} />
+          <span>{historyCount}</span>
+        </Tag>
+      </Flexbox>
+    </Tooltip>
+  );
+});
+
+export default SearchTag;

package/src/app/[variants]/(main)/chat/(workspace)/_layout/Desktop/ChatHeader/{SearchTags.tsx → Tags/SearchTags.tsx}

@@ -2,15 +2,18 @@ import { Icon, Tag } from '@lobehub/ui';
 import { Globe } from 'lucide-react';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
 
 const SearchTag = memo(() => {
   const { t } = useTranslation('chat');
 
   return (
-    <Tag>
-      {<Icon icon={Globe} />}
-      <div>{t('search.title')}</div>
-    </Tag>
+    <Flexbox height={22}>
+      <Tag>
+        {<Icon icon={Globe} />}
+        <div>{t('search.title')}</div>
+      </Tag>
+    </Flexbox>
   );
 });
 

package/src/app/[variants]/(main)/chat/(workspace)/_layout/Desktop/ChatHeader/{Tags.tsx → Tags/index.tsx}

@@ -9,12 +9,13 @@ import PluginTag from '@/features/PluginTag';
 import { useAgentEnableSearch } from '@/hooks/useAgentEnableSearch';
 import { useModelSupportToolUse } from '@/hooks/useModelSupportToolUse';
 import { useAgentStore } from '@/store/agent';
-import { agentSelectors } from '@/store/agent/selectors';
+import { agentChatConfigSelectors, agentSelectors } from '@/store/agent/selectors';
 import { useUserStore } from '@/store/user';
 import { authSelectors } from '@/store/user/selectors';
 
 import KnowledgeTag from './KnowledgeTag';
 import SearchTags from './SearchTags';
+import HistoryLimitTags from './HistoryLimitTags';
 
 const TitleTags = memo(() => {
   const [model, provider, hasKnowledge, isLoading] = useAgentStore((s) => [
@@ -26,6 +27,7 @@ const TitleTags = memo(() => {
 
   const plugins = useAgentStore(agentSelectors.currentAgentPlugins, isEqual);
   const enabledKnowledge = useAgentStore(agentSelectors.currentEnabledKnowledge, isEqual);
+  const enableHistoryCount = useAgentStore(agentChatConfigSelectors.enableHistoryCount);
 
   const showPlugin = useModelSupportToolUse(model, provider);
   const isLogin = useUserStore(authSelectors.isLogin);
@@ -42,6 +44,7 @@ const TitleTags = memo(() => {
       {isAgentEnableSearch && <SearchTags />}
       {showPlugin && plugins?.length > 0 && <PluginTag plugins={plugins} />}
       {hasKnowledge && <KnowledgeTag data={enabledKnowledge} />}
+      {enableHistoryCount && <HistoryLimitTags />}
     </Flexbox>
   );
 });

package/src/app/[variants]/(main)/chat/(workspace)/_layout/Desktop/ChatHeader/index.tsx

@@ -16,7 +16,7 @@ const Header = () => {
       <ChatHeader
         left={<Main />}
         right={<HeaderAction />}
-        style={{ minHeight: 64, position: 'initial', zIndex: 11 }}
+        style={{ height: 48, minHeight: 48, paddingInline: 8, position: 'initial', zIndex: 11 }}
       />
     )
   );

package/src/config/aiModels/anthropic.ts

@@ -22,7 +22,7 @@ const anthropicChatModels: AIChatModelCard[] = [
     },
     releasedAt: '2025-02-24',
     settings: {
-      extendParams: ['enableReasoning', 'reasoningBudgetToken'],
+      extendParams: ['disableContextCaching', 'enableReasoning', 'reasoningBudgetToken'],
     },
     type: 'chat',
   },
@@ -45,6 +45,9 @@ const anthropicChatModels: AIChatModelCard[] = [
       writeCacheInput: 1.25,
     },
     releasedAt: '2024-11-05',
+    settings: {
+      extendParams: ['disableContextCaching'],
+    },
     type: 'chat',
   },
   {
@@ -66,6 +69,9 @@ const anthropicChatModels: AIChatModelCard[] = [
       writeCacheInput: 3.75,
     },
     releasedAt: '2024-10-22',
+    settings: {
+      extendParams: ['disableContextCaching'],
+    },
     type: 'chat',
   },
   {
@@ -86,6 +92,9 @@ const anthropicChatModels: AIChatModelCard[] = [
       writeCacheInput: 3.75,
     },
     releasedAt: '2024-06-20',
+    settings: {
+      extendParams: ['disableContextCaching'],
+    },
     type: 'chat',
   },
   {
@@ -104,6 +113,9 @@ const anthropicChatModels: AIChatModelCard[] = [
       output: 1.25,
     },
     releasedAt: '2024-03-07',
+    settings: {
+      extendParams: ['disableContextCaching'],
+    },
     type: 'chat',
   },
   {
@@ -141,6 +153,9 @@ const anthropicChatModels: AIChatModelCard[] = [
       output: 75,
     },
     releasedAt: '2024-02-29',
+    settings: {
+      extendParams: ['disableContextCaching'],
+    },
     type: 'chat',
   },
   {

package/src/config/modelProviders/anthropic.ts

@@ -180,12 +180,10 @@ const Anthropic: ModelProviderCard = {
     sdkType: 'anthropic',
     showModelFetcher: true,
     smoothing: {
-      speed: 5,
       text: true,
     },
   },
   smoothing: {
-    speed: 5,
     text: true,
   },
   url: 'https://anthropic.com',

package/src/const/layoutTokens.test.ts

@@ -6,6 +6,6 @@ describe('HEADER_ICON_SIZE', () => {
   });
 
   it('desktop', () => {
-    expect(HEADER_ICON_SIZE(false)).toEqual({ fontSize: 24 });
+    expect(HEADER_ICON_SIZE(false)).toEqual({ blockSize: 32, fontSize: 20 });
   });
 });

package/src/const/layoutTokens.ts

@@ -20,7 +20,7 @@ export const FORM_STYLE: FormProps = {
   style: { maxWidth: MAX_WIDTH, width: '100%' },
 };
 export const MOBILE_HEADER_ICON_SIZE = { blockSize: 36, fontSize: 22 };
-export const DESKTOP_HEADER_ICON_SIZE = { fontSize: 24 };
+export const DESKTOP_HEADER_ICON_SIZE = { blockSize: 32, fontSize: 20 };
 export const HEADER_ICON_SIZE = (mobile?: boolean) =>
   mobile ? MOBILE_HEADER_ICON_SIZE : DESKTOP_HEADER_ICON_SIZE;
 export const PWA_INSTALL_ID = 'pwa-install';

package/src/const/models.ts

@@ -0,0 +1,27 @@
+export const systemToUserModels = new Set([
+  'o1-preview',
+  'o1-preview-2024-09-12',
+  'o1-mini',
+  'o1-mini-2024-09-12',
+]);
+
+// TODO: 临时写法，后续要重构成 model card 展示配置
+export const disableStreamModels = new Set(['o1', 'o1-2024-12-17']);
+
+/**
+ * models support context caching
+ */
+export const contextCachingModels = new Set([
+  'claude-3-7-sonnet-latest',
+  'claude-3-7-sonnet-20250219',
+  'claude-3-5-sonnet-latest',
+  'claude-3-5-sonnet-20241022',
+  'claude-3-5-sonnet-20240620',
+  'claude-3-5-haiku-latest',
+  'claude-3-5-haiku-20241022',
+]);
+
+export const thinkingWithToolClaudeModels = new Set([
+  'claude-3-7-sonnet-latest',
+  'claude-3-7-sonnet-20250219',
+]);

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

@@ -7,15 +7,18 @@ import { Flexbox } from 'react-layout-kit';
 
 import { useIsMobile } from '@/hooks/useIsMobile';
 import { useAgentStore } from '@/store/agent';
-import { agentSelectors } from '@/store/agent/selectors';
+import { agentChatConfigSelectors } from '@/store/agent/selectors';
 
 const History = memo(() => {
   const { t } = useTranslation('setting');
   const [popoverOpen, setPopoverOpen] = useState(false);
 
   const [historyCount, enableHistoryCount, updateAgentConfig] = useAgentStore((s) => {
-    const config = agentSelectors.currentAgentChatConfig(s);
-    return [config.historyCount, config.enableHistoryCount, s.updateAgentChatConfig];
+    return [
+      agentChatConfigSelectors.historyCount(s),
+      agentChatConfigSelectors.enableHistoryCount(s),
+      s.updateAgentChatConfig,
+    ];
   });
 
   const title = t(

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

@@ -0,0 +1,20 @@
+import { Switch } from 'antd';
+import { memo } from 'react';
+
+interface ContextCachingSwitchProps {
+  onChange?: (value: boolean) => void;
+  value?: boolean;
+}
+
+const ContextCachingSwitch = memo<ContextCachingSwitchProps>(({ value, onChange }) => {
+  return (
+    <Switch
+      onChange={(checked) => {
+        onChange?.(!checked);
+      }}
+      value={!value}
+    />
+  );
+});
+
+export default ContextCachingSwitch;

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

@@ -1,14 +1,16 @@
 import { Form } from '@lobehub/ui';
 import type { FormItemProps } from '@lobehub/ui';
-import { Switch } from 'antd';
+import { Form as AntdForm, Switch } from 'antd';
 import isEqual from 'fast-deep-equal';
+import Link from 'next/link';
 import { memo } from 'react';
-import { useTranslation } from 'react-i18next';
+import { Trans, useTranslation } from 'react-i18next';
 
 import { useAgentStore } from '@/store/agent';
-import { agentSelectors } from '@/store/agent/slices/chat';
+import { agentChatConfigSelectors, agentSelectors } from '@/store/agent/selectors';
 import { aiModelSelectors, useAiInfraStore } from '@/store/aiInfra';
 
+import ContextCachingSwitch from './ContextCachingSwitch';
 import ReasoningTokenSlider from './ReasoningTokenSlider';
 
 const ControlsForm = memo(() => {
@@ -18,18 +20,57 @@ const ControlsForm = memo(() => {
     agentSelectors.currentAgentModelProvider(s),
     s.updateAgentChatConfig,
   ]);
-  const config = useAgentStore(agentSelectors.currentAgentChatConfig, isEqual);
+  const [form] = Form.useForm();
+  const enableReasoning = AntdForm.useWatch(['enableReasoning'], form);
+
+  const config = useAgentStore(agentChatConfigSelectors.currentChatConfig, isEqual);
 
   const modelExtendParams = useAiInfraStore(aiModelSelectors.modelExtendParams(model, provider));
 
-  const items: FormItemProps[] = [
+  const items = [
+    {
+      children: <ContextCachingSwitch />,
+      desc: (
+        <span style={{ display: 'inline-block', width: 300 }}>
+          <Trans i18nKey={'extendParams.disableContextCaching.desc'} ns={'chat'}>
+            单条对话生成成本最高可降低 90%，响应速度提升 4 倍（
+            <Link
+              href={'https://www.anthropic.com/news/prompt-caching?utm_source=lobechat'}
+              rel={'nofollow'}
+            >
+              了解更多
+            </Link>
+            ）。开启后将自动禁用历史记录限制
+          </Trans>
+        </span>
+      ),
+      label: t('extendParams.disableContextCaching.title'),
+      minWidth: undefined,
+      name: 'disableContextCaching',
+    },
     {
       children: <Switch />,
+      desc: (
+        <span style={{ display: 'inline-block', width: 300 }}>
+          <Trans i18nKey={'extendParams.enableReasoning.desc'} ns={'chat'}>
+            基于 Claude Thinking 机制限制（
+            <Link
+              href={
+                'https://docs.anthropic.com/en/docs/build-with-claude/extended-thinking?utm_source=lobechat#why-thinking-blocks-must-be-preserved'
+              }
+              rel={'nofollow'}
+            >
+              了解更多
+            </Link>
+            ），开启后将自动禁用历史消息数限制
+          </Trans>
+        </span>
+      ),
       label: t('extendParams.enableReasoning.title'),
       minWidth: undefined,
       name: 'enableReasoning',
     },
-    {
+    enableReasoning && {
       children: <ReasoningTokenSlider />,
       label: t('extendParams.reasoningBudgetToken.title'),
       layout: 'vertical',
@@ -39,10 +80,11 @@ const ControlsForm = memo(() => {
         paddingBottom: 0,
       },
     },
-  ];
+  ].filter(Boolean) as FormItemProps[];
 
   return (
     <Form
+      form={form}
       initialValues={config}
       items={
         (modelExtendParams || [])

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

@@ -6,7 +6,6 @@ import useMergeState from 'use-merge-value';
 const Kibi = 1024;
 
 const exponent = (num: number) => Math.log2(num);
-const getRealValue = (num: number) => Math.round(Math.pow(2, num));
 const powerKibi = (num: number) => Math.round(Math.pow(2, num) * Kibi);
 
 interface MaxTokenSliderProps {
@@ -15,7 +14,7 @@ interface MaxTokenSliderProps {
   value?: number;
 }
 
-const MaxTokenSlider = memo<MaxTokenSliderProps>(({ value, onChange, defaultValue }) => {
+const ReasoningTokenSlider = memo<MaxTokenSliderProps>(({ value, onChange, defaultValue }) => {
   const [token, setTokens] = useMergeState(0, {
     defaultValue,
     onChange,
@@ -30,7 +29,7 @@ const MaxTokenSlider = memo<MaxTokenSliderProps>(({ value, onChange, defaultValu
   const updateWithPowValue = (value: number) => {
     setPowValue(value);
 
-    setTokens(powerKibi(value));
+    setTokens(Math.min(powerKibi(value), 64_000));
   };
 
   const updateWithRealValue = (value: number) => {
@@ -52,7 +51,7 @@ const MaxTokenSlider = memo<MaxTokenSliderProps>(({ value, onChange, defaultValu
   }, []);
 
   return (
-    <Flexbox align={'center'} gap={12} horizontal>
+    <Flexbox align={'center'} gap={12} horizontal paddingInline={'4px 0'}>
       <Flexbox flex={1}>
         <Slider
           marks={marks}
@@ -60,21 +59,14 @@ const MaxTokenSlider = memo<MaxTokenSliderProps>(({ value, onChange, defaultValu
           min={exponent(1)}
           onChange={updateWithPowValue}
           step={null}
-          tooltip={{
-            formatter: (x) => {
-              if (typeof x === 'undefined') return;
-
-              let value = getRealValue(x);
-
-              if (value < Kibi) return ((value * Kibi) / 1000).toFixed(0) + 'k';
-            },
-          }}
+          tooltip={{ open: false }}
           value={powValue}
         />
       </Flexbox>
       <div>
         <InputNumber
           changeOnWheel
+          max={64_000}
           min={0}
           onChange={(e) => {
             if (!e && e !== 0) return;
@@ -89,4 +81,4 @@ const MaxTokenSlider = memo<MaxTokenSliderProps>(({ value, onChange, defaultValu
     </Flexbox>
   );
 });
-export default MaxTokenSlider;
+export default ReasoningTokenSlider;

package/src/features/ChatInput/ActionBar/Search/ModelBuiltinSearch.tsx

@@ -7,7 +7,7 @@ import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
 import { useAgentStore } from '@/store/agent';
-import { agentSelectors } from '@/store/agent/selectors';
+import { agentChatConfigSelectors, agentSelectors } from '@/store/agent/selectors';
 import { aiModelSelectors, useAiInfraStore } from '@/store/aiInfra';
 
 import ExaIcon from './ExaIcon';
@@ -37,7 +37,7 @@ const ModelBuiltinSearch = memo(() => {
   const [model, provider, checked, updateAgentChatConfig] = useAgentStore((s) => [
     agentSelectors.currentAgentModel(s),
     agentSelectors.currentAgentModelProvider(s),
-    agentSelectors.currentAgentChatConfig(s).useModelBuiltinSearch,
+    agentChatConfigSelectors.useModelBuiltinSearch(s),
     s.updateAgentChatConfig,
   ]);
 

package/src/features/ChatInput/ActionBar/Search/SwitchPanel.tsx

@@ -8,7 +8,7 @@ import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
 import { useAgentStore } from '@/store/agent';
-import { agentSelectors } from '@/store/agent/slices/chat';
+import { agentChatConfigSelectors, agentSelectors } from '@/store/agent/slices/chat';
 import { aiModelSelectors, useAiInfraStore } from '@/store/aiInfra';
 import { SearchMode } from '@/types/search';
 
@@ -84,7 +84,7 @@ const Item = memo<NetworkOption>(({ value, description, icon, label, disable })
   const { t } = useTranslation('chat');
   const { styles } = useStyles();
   const [mode, updateAgentChatConfig] = useAgentStore((s) => [
-    agentSelectors.agentSearchMode(s),
+    agentChatConfigSelectors.agentSearchMode(s),
     s.updateAgentChatConfig,
   ]);
 

package/src/features/ChatInput/ActionBar/Token/TokenTag.tsx

@@ -10,7 +10,7 @@ import { useModelContextWindowTokens } from '@/hooks/useModelContextWindowTokens
 import { useModelSupportToolUse } from '@/hooks/useModelSupportToolUse';
 import { useTokenCount } from '@/hooks/useTokenCount';
 import { useAgentStore } from '@/store/agent';
-import { agentSelectors } from '@/store/agent/selectors';
+import { agentChatConfigSelectors, agentSelectors } from '@/store/agent/selectors';
 import { useChatStore } from '@/store/chat';
 import { topicSelectors } from '@/store/chat/selectors';
 import { useToolStore } from '@/store/tool';
@@ -31,15 +31,13 @@ const Token = memo<TokenTagProps>(({ total: messageString }) => {
   ]);
 
   const [systemRole, model, provider] = useAgentStore((s) => {
-    const config = agentSelectors.currentAgentChatConfig(s);
-
     return [
       agentSelectors.currentAgentSystemRole(s),
       agentSelectors.currentAgentModel(s) as string,
       agentSelectors.currentAgentModelProvider(s) as string,
       // add these two params to enable the component to re-render
-      config.historyCount,
-      config.enableHistoryCount,
+      agentChatConfigSelectors.historyCount(s),
+      agentChatConfigSelectors.enableHistoryCount(s),
     ];
   });
 

package/src/features/Conversation/Messages/Assistant/Tool/Render/CustomRender.tsx

@@ -57,4 +57,6 @@ const CustomRender = memo<CustomRenderProps>(
   },
 );
 
+CustomRender.displayName = 'CustomRender';
+
 export default CustomRender;

package/src/features/Conversation/Messages/Assistant/Tool/Render/index.tsx

@@ -1,3 +1,4 @@
+import isEqual from 'fast-deep-equal';
 import { Suspense, memo } from 'react';
 
 import { LOADING_FLAT } from '@/const/message';
@@ -16,10 +17,11 @@ interface RenderProps {
   toolCallId: string;
   toolIndex: number;
 }
+
 const Render = memo<RenderProps>(
   ({ toolCallId, toolIndex, messageId, requestArgs, showPluginRender, setShowPluginRender }) => {
     const loading = useChatStore(chatSelectors.isToolCallStreaming(messageId, toolIndex));
-    const toolMessage = useChatStore(chatSelectors.getMessageByToolCallId(toolCallId));
+    const toolMessage = useChatStore(chatSelectors.getMessageByToolCallId(toolCallId), isEqual);
 
     // 如果处于 loading 或者找不到 toolMessage 则展示 Arguments
     if (loading || !toolMessage) return <Arguments arguments={requestArgs} />;
@@ -48,4 +50,6 @@ const Render = memo<RenderProps>(
   },
 );
 
+Render.displayName = 'ToolRender';
+
 export default Render;