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

package/packages/utils/src/uriParser.ts

@@ -5,20 +5,20 @@ interface UriParserResult {
 }
 
 export const parseDataUri = (dataUri: string): UriParserResult => {
-  // 正则表达式匹配整个 Data URI 结构
+  // Regular expression to match the entire Data URI structure
   const dataUriMatch = dataUri.match(/^data:([^;]+);base64,(.+)$/);
 
   if (dataUriMatch) {
-    // 如果是合法的 Data URI
+    // If it's a valid Data URI
     return { base64: dataUriMatch[2], mimeType: dataUriMatch[1], type: 'base64' };
   }
 
   try {
     new URL(dataUri);
-    // 如果是合法的 URL
+    // If it's a valid URL
     return { base64: null, mimeType: null, type: 'url' };
   } catch {
-    // 既不是 Data URI 也不是合法 URL
+    // Neither a Data URI nor a valid URL
     return { base64: null, mimeType: null, type: null };
   }
 };

package/src/features/ChatItem/components/Title.tsx

@@ -1,5 +1,5 @@
 import dayjs from 'dayjs';
-import { memo } from 'react';
+import { CSSProperties, memo } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
 import { useStyles } from '../style';
@@ -10,6 +10,7 @@ export interface TitleProps {
   className?: string;
   placement?: ChatItemProps['placement'];
   showTitle?: ChatItemProps['showTitle'];
+  style?: CSSProperties;
   time?: ChatItemProps['time'];
   titleAddon?: ChatItemProps['titleAddon'];
 }
@@ -27,21 +28,24 @@ const formatTime = (time: number): string => {
   }
 };
 
-const Title = memo<TitleProps>(({ showTitle, placement, time, avatar, titleAddon, className }) => {
-  const { styles, cx } = useStyles({ placement, showTitle, time });
+const Title = memo<TitleProps>(
+  ({ showTitle, placement, time, avatar, titleAddon, className, style }) => {
+    const { styles, cx } = useStyles({ placement, showTitle, time });
 
-  return (
-    <Flexbox
-      align={'center'}
-      className={cx(styles.name, className)}
-      direction={placement === 'left' ? 'horizontal' : 'horizontal-reverse'}
-      gap={4}
-    >
-      {showTitle ? avatar.title || 'untitled' : undefined}
-      {showTitle ? titleAddon : undefined}
-      {time && <time>{formatTime(time)}</time>}
-    </Flexbox>
-  );
-});
+    return (
+      <Flexbox
+        align={'center'}
+        className={cx(styles.name, className)}
+        direction={placement === 'left' ? 'horizontal' : 'horizontal-reverse'}
+        gap={4}
+        style={style}
+      >
+        {showTitle ? avatar.title || 'untitled' : undefined}
+        {showTitle ? titleAddon : undefined}
+        {time && <time>{formatTime(time)}</time>}
+      </Flexbox>
+    );
+  },
+);
 
 export default Title;

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

@@ -4,6 +4,7 @@ import { LOADING_FLAT } from '@lobechat/const';
 import { UIChatMessage } from '@lobechat/types';
 import { Tag } from '@lobehub/ui';
 import { useResponsive } from 'antd-style';
+import isEqual from 'fast-deep-equal';
 import { ReactNode, memo, useCallback, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
@@ -213,12 +214,12 @@ const AssistantMessage = memo<AssistantMessageProps>((props) => {
           onClick={onAvatarClick}
           placement={placement}
           size={MOBILE_AVATAR_SIZE}
-          style={{ marginTop: 6 }}
         />
         <Title
           avatar={avatar}
           placement={placement}
           showTitle
+          style={{ marginBlockEnd: 0 }}
           time={createdAt}
           titleAddon={dmIndicator}
         />
@@ -274,6 +275,6 @@ const AssistantMessage = memo<AssistantMessageProps>((props) => {
       {mobile && <BorderSpacing borderSpacing={MOBILE_AVATAR_SIZE} />}
     </Flexbox>
   );
-});
+}, isEqual);
 
 export default AssistantMessage;

package/src/features/Conversation/Messages/Group/index.tsx

@@ -2,6 +2,7 @@
 
 import { UIChatMessage } from '@lobechat/types';
 import { useResponsive } from 'antd-style';
+import isEqual from 'fast-deep-equal';
 import { memo, useCallback } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
@@ -49,6 +50,7 @@ const GroupMessage = memo<GroupMessageProps>((props) => {
     provider,
   } = props;
   const avatar = meta;
+  console.log('render');
   const { mobile } = useResponsive();
   const placement = 'left';
   const type = useAgentStore(agentChatConfigSelectors.displayMode);
@@ -96,9 +98,14 @@ const GroupMessage = memo<GroupMessageProps>((props) => {
           onClick={onAvatarClick}
           placement={placement}
           size={MOBILE_AVATAR_SIZE}
-          style={{ marginTop: 6 }}
         />
-        <Title avatar={avatar} placement={placement} showTitle time={createdAt} />
+        <Title
+          avatar={avatar}
+          placement={placement}
+          showTitle
+          style={{ marginBlockEnd: 0 }}
+          time={createdAt}
+        />
       </Flexbox>
       {isEditing && contentId ? (
         <EditState content={lastAssistantMsg?.content} id={contentId} />
@@ -141,6 +148,6 @@ const GroupMessage = memo<GroupMessageProps>((props) => {
       {mobile && <BorderSpacing borderSpacing={MOBILE_AVATAR_SIZE} />}
     </Flexbox>
   );
-});
+}, isEqual);
 
 export default GroupMessage;

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/chat/slices/aiChat/actions/conversationLifecycle.ts

@@ -166,7 +166,11 @@ export const conversationLifecycle: StateCreator<
         topicId = data.topicId;
       }
 
-      get().replaceMessages(data.messages, { sessionId: activeId, topicId: topicId });
+      get().replaceMessages(data.messages, {
+        sessionId: activeId,
+        topicId: topicId,
+        action: 'sendMessage/serverResponse',
+      });
 
       if (data.isCreateNewTopic && data.topicId) {
         await get().switchTopic(data.topicId, true);
@@ -250,7 +254,9 @@ export const conversationLifecycle: StateCreator<
         .map((f) => f?.id)
         .filter(Boolean) as string[];
 
-      await getAgentStoreState().addFilesToAgent(userFiles, false);
+      if (userFiles.length > 0) {
+        await getAgentStoreState().addFilesToAgent(userFiles, false);
+      }
     } catch (e) {
       console.error(e);
     } finally {

package/src/store/chat/slices/aiChat/actions/streamingExecutor.ts

@@ -521,10 +521,7 @@ export const streamingExecutor: StateCreator<
       // Handle completion and error events
       for (const event of result.events) {
         if (event.type === 'done') {
-          log('[internal_execAgentRuntime] Received done event, syncing to database');
-          // Sync final state to database
-          const finalMessages = get().messagesMap[messageKey] || [];
-          get().replaceMessages(finalMessages);
+          log('[internal_execAgentRuntime] Received done event');
         }
 
         if (event.type === 'error') {

package/src/store/chat/slices/message/actions/optimisticUpdate.ts

@@ -195,7 +195,7 @@ export const messageOptimisticUpdate: StateCreator<
     );
 
     if (result && result.success && result.messages) {
-      replaceMessages(result.messages);
+      replaceMessages(result.messages, { action: 'optimisticUpdateMessageContent' });
     } else {
       await refreshMessages();
     }

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,
 };