@lobehub/lobehub 2.0.0-next.42 → 2.0.0-next.43

package/CHANGELOG.md

@@ -2,6 +2,31 @@
 
 # Changelog
 
+## [Version 2.0.0-next.43](https://github.com/lobehub/lobe-chat/compare/v2.0.0-next.42...v2.0.0-next.43)
+
+<sup>Released on **2025-11-09**</sup>
+
+#### 🐛 Bug Fixes
+
+- **misc**: Abnormal animation of tokens.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### What's fixed
+
+- **misc**: Abnormal animation of tokens, closes [#10106](https://github.com/lobehub/lobe-chat/issues/10106) ([129df7b](https://github.com/lobehub/lobe-chat/commit/129df7b))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
 ## [Version 2.0.0-next.42](https://github.com/lobehub/lobe-chat/compare/v2.0.0-next.41...v2.0.0-next.42)
 
 <sup>Released on **2025-11-09**</sup>

package/changelog/v1.json

@@ -1,4 +1,13 @@
 [
+  {
+    "children": {
+      "fixes": [
+        "Abnormal animation of tokens."
+      ]
+    },
+    "date": "2025-11-09",
+    "version": "2.0.0-next.43"
+  },
   {
     "children": {
       "fixes": [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/lobehub",
-  "version": "2.0.0-next.42",
+  "version": "2.0.0-next.43",
   "description": "LobeHub - an open-source,comprehensive AI Agent framework that supports speech synthesis, multimodal, and extensible Function Call plugin system. Supports one-click free deployment of your private ChatGPT/LLM web application.",
   "keywords": [
     "framework",

package/src/features/Conversation/components/Extras/Usage/UsageDetail/index.tsx

@@ -8,6 +8,7 @@ import { useTranslation } from 'react-i18next';
 import { Center, Flexbox } from 'react-layout-kit';
 
 import InfoTooltip from '@/components/InfoTooltip';
+import { useIsMobile } from '@/hooks/useIsMobile';
 import { aiModelSelectors, useAiInfraStore } from '@/store/aiInfra';
 import { useGlobalStore } from '@/store/global';
 import { systemStatusSelectors } from '@/store/global/selectors';
@@ -27,6 +28,11 @@ interface TokenDetailProps {
 const TokenDetail = memo<TokenDetailProps>(({ meta, model, provider }) => {
   const { t } = useTranslation('chat');
   const theme = useTheme();
+  const isMobile = useIsMobile();
+
+  // 使用 systemStatus 管理短格式显示状态
+  const isShortFormat = useGlobalStore(systemStatusSelectors.tokenDisplayFormatShort);
+  const updateSystemStatus = useGlobalStore((s) => s.updateSystemStatus);
 
   const modelCard = useAiInfraStore(aiModelSelectors.getModelCard(model, provider));
   const isShowCredit = useGlobalStore(systemStatusSelectors.isShowCredit) && !!modelCard?.pricing;
@@ -211,12 +217,32 @@ const TokenDetail = memo<TokenDetailProps>(({ meta, model, provider }) => {
         </Flexbox>
       }
       placement={'top'}
-      trigger={['hover', 'click']}
+      trigger={isMobile ? ['click'] : ['hover']}
     >
-      <Center gap={2} horizontal style={{ cursor: 'default' }}>
+      <Center
+        gap={2}
+        horizontal
+        onClick={(e) => {
+          // 移动端：让 Popover 处理点击事件
+          if (isMobile) return;
+
+          // 桌面端：阻止 Popover 并切换格式
+          e.preventDefault();
+          e.stopPropagation();
+          updateSystemStatus({ tokenDisplayFormatShort: !isShortFormat });
+        }}
+        style={{ cursor: isMobile ? 'default' : 'pointer' }}
+      >
         <Icon icon={isShowCredit ? BadgeCent : CoinsIcon} />
         <AnimatedNumber
-          formatter={(value) => (formatShortenNumber(value) as string).toLowerCase?.()}
+          duration={1500}
+          formatter={(value) => {
+            const roundedValue = Math.round(value);
+            if (isShortFormat) {
+              return (formatShortenNumber(roundedValue) as string).toLowerCase?.();
+            }
+            return new Intl.NumberFormat('en-US').format(roundedValue);
+          }}
           // Force remount when switching between token/credit to prevent unwanted animation
           // See: https://github.com/lobehub/lobe-chat/pull/10098
           key={isShowCredit ? 'credit' : 'token'}

package/src/store/global/initialState.ts

@@ -99,6 +99,10 @@ export interface SystemStatus {
    * theme mode
    */
   themeMode?: ThemeMode;
+  /**
+   * 是否使用短格式显示 token
+   */
+  tokenDisplayFormatShort?: boolean;
   zenMode?: boolean;
 }
 
@@ -151,6 +155,7 @@ export const INITIAL_STATUS = {
   showSystemRole: false,
   systemRoleExpandedMap: {},
   themeMode: 'auto',
+  tokenDisplayFormatShort: true,
   zenMode: false,
 } satisfies SystemStatus;
 

package/src/store/global/selectors/systemStatus.ts

@@ -66,6 +66,8 @@ const getAgentSystemRoleExpanded =
 const disabledModelProvidersSortType = (s: GlobalState) =>
   s.status.disabledModelProvidersSortType || 'default';
 const disabledModelsSortType = (s: GlobalState) => s.status.disabledModelsSortType || 'default';
+const tokenDisplayFormatShort = (s: GlobalState) =>
+  s.status.tokenDisplayFormatShort !== undefined ? s.status.tokenDisplayFormatShort : true;
 
 export const systemStatusSelectors = {
   chatInputHeight,
@@ -99,5 +101,6 @@ export const systemStatusSelectors = {
   showSystemRole,
   systemStatus,
   themeMode,
+  tokenDisplayFormatShort,
   wideScreen,
 };