@lobehub/chat 1.68.10 → 1.69.0

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/aiModels/google.ts

@@ -75,6 +75,23 @@ const googleChatModels: AIChatModelCard[] = [
     },
     type: 'chat',
   },
+  {
+    abilities: {
+      vision: true,
+    },
+    contextWindowTokens: 1_048_576 + 8192,
+    description: 'Gemini 2.0 Flash 模型变体，针对成本效益和低延迟等目标进行了优化。',
+    displayName: 'Gemini 2.0 Flash-Lite',
+    id: 'gemini-2.0-flash-lite',
+    maxOutput: 8192,
+    pricing: {
+      cachedInput: 0.018_75,
+      input: 0.075,
+      output: 0.3,
+    },
+    releasedAt: '2025-02-05',
+    type: 'chat',
+  },
   {
     abilities: {
       vision: true,
@@ -92,6 +109,26 @@ const googleChatModels: AIChatModelCard[] = [
     releasedAt: '2025-02-05',
     type: 'chat',
   },
+  {
+    abilities: {
+      reasoning: true,
+      vision: true,
+    },
+    contextWindowTokens: 1_048_576 + 65_536,
+    description:
+      'Gemini 2.0 Flash Thinking Exp 是 Google 的实验性多模态推理AI模型，能对复杂问题进行推理，拥有新的思维能力。',
+    displayName: 'Gemini 2.0 Flash Thinking Experimental',
+    enabled: true,
+    id: 'gemini-2.0-flash-thinking-exp',
+    maxOutput: 65_536,
+    pricing: {
+      cachedInput: 0,
+      input: 0,
+      output: 0,
+    },
+    releasedAt: '2025-01-21',
+    type: 'chat',
+  },
   {
     abilities: {
       reasoning: true,

package/src/config/aiModels/qwen.ts

@@ -3,6 +3,28 @@ import { AIChatModelCard } from '@/types/aiModel';
 // https://help.aliyun.com/zh/model-studio/developer-reference/use-qwen-by-calling-api#e1fada1a719u7
 
 const qwenChatModels: AIChatModelCard[] = [
+  {
+    abilities: {
+      reasoning: true,
+    },
+    contextWindowTokens: 131_072,
+    description: '基于 Qwen2.5 模型训练的 QwQ 推理模型，通过强化学习大幅度提升了模型推理能力。模型数学代码等核心指标（AIME 24/25、LiveCodeBench）以及部分通用指标（IFEval、LiveBench等）达到DeepSeek-R1 满血版水平。',
+    displayName: 'QwQ Plus',
+    enabled: true,
+    id: 'qwq-plus-latest',
+    maxOutput: 8192,
+    organization: 'Qwen',
+    pricing: {
+      currency: 'CNY',
+      input: 0,
+      output: 0,
+    },
+    releasedAt: '2025-03-06',
+    settings: {
+      searchImpl: 'params',
+    },
+    type: 'chat',
+  },
   {
     abilities: {
       functionCall: true,
@@ -71,10 +93,14 @@ const qwenChatModels: AIChatModelCard[] = [
     type: 'chat',
   },
   {
+    abilities: {
+      functionCall: true,
+    },
     contextWindowTokens: 1_000_000,
     description:
       '通义千问超大规模语言模型，支持长文本上下文，以及基于长文档、多文档等多个场景的对话功能。',
     displayName: 'Qwen Long',
+    enabled: true,
     id: 'qwen-long',
     maxOutput: 6000,
     organization: 'Qwen',
@@ -85,6 +111,24 @@ const qwenChatModels: AIChatModelCard[] = [
     },
     type: 'chat',
   },
+  {
+    abilities: {
+      vision: true,
+    },
+    contextWindowTokens: 32_768,
+    description: 'Qwen-Omni 系列模型支持输入多种模态的数据，包括视频、音频、图片、文本，并输出音频与文本。',
+    displayName: 'Qwen Omni Turbo',
+    enabled: true,
+    id: 'qwen-omni-turbo-latest',
+    maxOutput: 2048,
+    organization: 'Qwen',
+    pricing: {
+      currency: 'CNY',
+      input: 1.5, // use image input price
+      output: 4.5,
+    },
+    type: 'chat',
+  },
   {
     abilities: {
       vision: true,
@@ -199,7 +243,24 @@ const qwenChatModels: AIChatModelCard[] = [
   },
   {
     abilities: {
-      functionCall: true,
+      reasoning: true,
+    },
+    contextWindowTokens: 131_072,
+    description: '基于 Qwen2.5-32B 模型训练的 QwQ 推理模型，通过强化学习大幅度提升了模型推理能力。模型数学代码等核心指标（AIME 24/25、LiveCodeBench）以及部分通用指标（IFEval、LiveBench等）达到DeepSeek-R1 满血版水平，各指标均显著超过同样基于 Qwen2.5-32B 的 DeepSeek-R1-Distill-Qwen-32B。',
+    displayName: 'QwQ 32B',
+    id: 'qwq-32b',
+    maxOutput: 8192,
+    organization: 'Qwen',
+    pricing: {
+      currency: 'CNY',
+      input: 0,
+      output: 0,
+    },
+    releasedAt: '2025-03-06',
+    type: 'chat',
+  },
+  {
+    abilities: {
       reasoning: true,
     },
     contextWindowTokens: 32_768,
@@ -210,8 +271,8 @@ const qwenChatModels: AIChatModelCard[] = [
     organization: 'Qwen',
     pricing: {
       currency: 'CNY',
-      input: 3.5,
-      output: 7,
+      input: 2,
+      output: 6,
     },
     releasedAt: '2024-11-28',
     type: 'chat',
@@ -410,23 +471,6 @@ const qwenChatModels: AIChatModelCard[] = [
     },
     type: 'chat',
   },
-  {
-    abilities: {
-      vision: true,
-    },
-    contextWindowTokens: 32_768,
-    description: 'Qwen-Omni 系列模型支持输入多种模态的数据，包括视频、音频、图片、文本，并输出音频与文本。',
-    displayName: 'Qwen Omni Turbo',
-    id: 'qwen-omni-turbo-latest',
-    maxOutput: 2048,
-    organization: 'Qwen',
-    pricing: {
-      currency: 'CNY',
-      input: 0,
-      output: 0,
-    },
-    type: 'chat',
-  },
   {
     abilities: {
       vision: true,
@@ -473,7 +517,6 @@ const qwenChatModels: AIChatModelCard[] = [
     description:
       'DeepSeek-R1 在后训练阶段大规模使用了强化学习技术，在仅有极少标注数据的情况下，极大提升了模型推理能力。在数学、代码、自然语言推理等任务上，性能较高，能力较强。',
     displayName: 'DeepSeek R1',
-    enabled: true,
     id: 'deepseek-r1',
     maxOutput: 8192,
     organization: 'DeepSeek',
@@ -486,14 +529,10 @@ const qwenChatModels: AIChatModelCard[] = [
     type: 'chat',
   },
   {
-    abilities: {
-      functionCall: true,
-    },
     contextWindowTokens: 65_792,
     description:
       'DeepSeek-V3 为自研 MoE 模型，671B 参数，激活 37B，在 14.8T token 上进行了预训练，在长文本、代码、数学、百科、中文能力上表现优秀。',
     displayName: 'DeepSeek V3',
-    enabled: true,
     id: 'deepseek-v3',
     maxOutput: 8192,
     organization: 'DeepSeek',

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;

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

@@ -52,4 +52,6 @@ const Tool = memo<InspectorProps>(
   },
 );
 
+Tool.displayName = 'AssistantTool';
+
 export default Tool;

package/src/features/Conversation/components/ChatItem/index.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/selectors';
+import { agentChatConfigSelectors } from '@/store/agent/selectors';
 import { useChatStore } from '@/store/chat';
 import { chatSelectors } from '@/store/chat/selectors';
 import { useUserStore } from '@/store/user';
@@ -65,15 +65,12 @@ const Item = memo<ChatListItemProps>(
     disableEditing,
     inPortalThread = false,
   }) => {
-    const fontSize = useUserStore(userGeneralSettingsSelectors.fontSize);
     const { t } = useTranslation('common');
     const { styles, cx } = useStyles();
-    const [type = 'chat'] = useAgentStore((s) => {
-      const config = agentSelectors.currentAgentChatConfig(s);
-      return [config.displayMode];
-    });
 
+    const type = useAgentStore(agentChatConfigSelectors.displayMode);
     const item = useChatStore(chatSelectors.getMessageById(id), isEqual);
+    const fontSize = useUserStore(userGeneralSettingsSelectors.fontSize);
 
     const [
       isMessageLoading,