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

package/src/features/Conversation/Messages/User/{Actions.tsx → Actions/ActionsBar.tsx}

@@ -4,17 +4,15 @@ import { ActionIconGroupItemType } from '@lobehub/ui/es/ActionIconGroup';
 import { ActionIconGroupEvent } from '@lobehub/ui/es/ActionIconGroup/type';
 import { App } from 'antd';
 import { useSearchParams } from 'next/navigation';
-import { memo, use, useCallback, useMemo } from 'react';
+import { memo, use, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { useChatStore } from '@/store/chat';
-import { threadSelectors } from '@/store/chat/selectors';
-import { useSessionStore } from '@/store/session';
-import { sessionSelectors } from '@/store/session/selectors';
+import { messageStateSelectors, threadSelectors } from '@/store/chat/selectors';
 
-import { VirtuosoContext } from '../../components/VirtualizedList/VirtuosoContext';
-import { InPortalThreadContext } from '../../context/InPortalThreadContext';
-import { useChatListActionsBar } from '../../hooks/useChatListActionsBar';
+import { VirtuosoContext } from '../../../components/VirtualizedList/VirtuosoContext';
+import { InPortalThreadContext } from '../../../context/InPortalThreadContext';
+import { useChatListActionsBar } from '../../../hooks/useChatListActionsBar';
 
 interface UserActionsProps {
   data: UIChatMessage;
@@ -28,11 +26,12 @@ export const UserActionsBar = memo<UserActionsProps>(({ id, data, index }) => {
   const topic = searchParams.get('topic');
 
   const [
-    isThreadMode,
+    // isThreadMode,
     hasThread,
+    isRegenerating,
     toggleMessageEditing,
     deleteMessage,
-    regenerateMessage,
+    regenerateUserMessage,
     translateMessage,
     ttsMessage,
     delAndRegenerateMessage,
@@ -41,12 +40,13 @@ export const UserActionsBar = memo<UserActionsProps>(({ id, data, index }) => {
     resendThreadMessage,
     delAndResendThreadMessage,
   ] = useChatStore((s) => [
-    !!s.activeThreadId,
+    // !!s.activeThreadId,
     threadSelectors.hasThreadBySourceMsgId(id)(s),
+    messageStateSelectors.isMessageRegenerating(id)(s),
 
     s.toggleMessageEditing,
     s.deleteMessage,
-    s.regenerateMessage,
+    s.regenerateUserMessage,
     s.translateMessage,
     s.ttsMessage,
     s.delAndRegenerateMessage,
@@ -56,22 +56,21 @@ export const UserActionsBar = memo<UserActionsProps>(({ id, data, index }) => {
     s.delAndResendThreadMessage,
   ]);
 
-  const isGroupSession = useSessionStore(sessionSelectors.isCurrentSessionGroupSession);
+  // const isGroupSession = useSessionStore(sessionSelectors.isCurrentSessionGroupSession);
 
-  const { regenerate, edit, copy, divider, del, branching, tts, translate } = useChatListActionsBar(
-    { hasThread },
-  );
+  const { regenerate, edit, copy, divider, del, tts, translate } = useChatListActionsBar({
+    hasThread,
+    isRegenerating,
+  });
 
   const inPortalThread = use(InPortalThreadContext);
-  const inThread = isThreadMode || inPortalThread;
-
-  const items = useMemo(
-    () =>
-      [regenerate, edit, inThread || isGroupSession ? null : branching].filter(
-        Boolean,
-      ) as ActionIconGroupItemType[],
-    [inThread, isGroupSession],
-  );
+  // const inThread = isThreadMode || inPortalThread;
+
+  const items = [
+    regenerate,
+    edit,
+    // inThread || isGroupSession ? null : branching
+  ].filter(Boolean) as ActionIconGroupItemType[];
 
   const { message } = App.useApp();
 
@@ -113,7 +112,7 @@ export const UserActionsBar = memo<UserActionsProps>(({ id, data, index }) => {
         case 'regenerate': {
           if (inPortalThread) {
             resendThreadMessage(id);
-          } else regenerateMessage(id);
+          } else regenerateUserMessage(id);
 
           // if this message is an error message, we need to delete it
           if (data.error) deleteMessage(id);
@@ -153,6 +152,8 @@ export const UserActionsBar = memo<UserActionsProps>(({ id, data, index }) => {
         items: [edit, copy, divider, tts, translate, divider, regenerate, del],
       }}
       onActionClick={onActionClick}
+      size={'small'}
+      variant={'borderless'}
     />
   );
 });

package/src/features/Conversation/Messages/User/Actions/MessageBranch.tsx

@@ -0,0 +1,107 @@
+import { Icon } from '@lobehub/ui';
+import { createStyles } from 'antd-style';
+import { ChevronLeft, ChevronRight } from 'lucide-react';
+import { memo } from 'react';
+import { Center, Flexbox } from 'react-layout-kit';
+
+import { useChatStore } from '@/store/chat';
+
+const useStyles = createStyles(({ css, token, prefixCls }) => ({
+  button: css`
+    cursor: pointer;
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    width: 20px;
+    height: 20px;
+    border-radius: 4px;
+
+    color: ${token.colorTextSecondary};
+
+    transition: all 0.2s ease;
+
+    &:hover:not(.${prefixCls}-disabled) {
+      color: ${token.colorText};
+      background: ${token.colorFillSecondary};
+    }
+
+    &.${prefixCls}-disabled {
+      cursor: not-allowed;
+      opacity: 0.4;
+    }
+  `,
+  container: css`
+    user-select: none;
+
+    display: inline-flex;
+    gap: 4px;
+    align-items: center;
+
+    height: 20px;
+    padding-inline: 4px;
+    border-radius: ${token.borderRadiusSM}px;
+  `,
+  text: css`
+    min-width: 24px;
+    height: 20px;
+
+    font-size: 12px;
+    font-variant-numeric: tabular-nums;
+    color: ${token.colorTextSecondary};
+    text-align: center;
+  `,
+}));
+
+interface MessageBranchProps {
+  activeBranchIndex: number;
+  count: number;
+  messageId: string;
+}
+
+const MessageBranch = memo<MessageBranchProps>(({ activeBranchIndex, count, messageId }) => {
+  const { styles, cx, prefixCls } = useStyles();
+  const switchMessageBranch = useChatStore((s) => s.switchMessageBranch);
+
+  const handlePrevious = () => {
+    if (activeBranchIndex > 0) {
+      switchMessageBranch(messageId, activeBranchIndex - 1);
+    }
+  };
+
+  const handleNext = () => {
+    if (activeBranchIndex < count - 1) {
+      switchMessageBranch(messageId, activeBranchIndex + 1);
+    }
+  };
+
+  const canGoPrevious = activeBranchIndex > 0;
+  const canGoNext = activeBranchIndex < count - 1;
+
+  return (
+    <Flexbox className={styles.container} horizontal>
+      <div
+        className={cx(styles.button, !canGoPrevious && `${prefixCls}-disabled`)}
+        onClick={handlePrevious}
+        role="button"
+        tabIndex={canGoPrevious ? 0 : -1}
+      >
+        <Icon icon={ChevronLeft} size={16} />
+      </div>
+      <Center className={styles.text}>
+        {activeBranchIndex + 1}/{count}
+      </Center>
+      <div
+        className={cx(styles.button, !canGoNext && `${prefixCls}-disabled`)}
+        onClick={handleNext}
+        role="button"
+        tabIndex={canGoNext ? 0 : -1}
+      >
+        <Icon icon={ChevronRight} size={16} />
+      </div>
+    </Flexbox>
+  );
+});
+
+export default MessageBranch;

package/src/features/Conversation/Messages/User/Actions/index.tsx

@@ -0,0 +1,42 @@
+import { memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+import { useChatStore } from '@/store/chat';
+import { messageStateSelectors } from '@/store/chat/selectors';
+import { UIChatMessage } from '@/types/index';
+
+import { UserActionsBar } from './ActionsBar';
+import MessageBranch from './MessageBranch';
+
+interface ActionsProps {
+  data: UIChatMessage;
+  disableEditing?: boolean;
+  id: string;
+  index: number;
+}
+
+const Actions = memo<ActionsProps>(({ id, data, index, disableEditing }) => {
+  const { branch } = data;
+  const [editing] = useChatStore((s) => [messageStateSelectors.isMessageEditing(id)(s)]);
+
+  return (
+    !editing && (
+      <Flexbox align={'center'} horizontal>
+        {!disableEditing && (
+          <Flexbox align={'flex-start'} role="menubar">
+            <UserActionsBar data={data} id={id} index={index} />
+          </Flexbox>
+        )}
+        {branch && (
+          <MessageBranch
+            activeBranchIndex={branch.activeBranchIndex}
+            count={branch.count}
+            messageId={id}
+          />
+        )}
+      </Flexbox>
+    )
+  );
+});
+
+export default Actions;

package/src/features/Conversation/Messages/User/Extra.tsx

@@ -5,7 +5,7 @@ import ExtraContainer from '@/features/Conversation/components/Extras/ExtraConta
 import TTS from '@/features/Conversation/components/Extras/TTS';
 import Translate from '@/features/Conversation/components/Extras/Translate';
 import { useChatStore } from '@/store/chat';
-import { chatSelectors } from '@/store/chat/selectors';
+import { messageStateSelectors } from '@/store/chat/selectors';
 
 interface UserMessageExtraProps {
   content: string;
@@ -13,7 +13,7 @@ interface UserMessageExtraProps {
   id: string;
 }
 export const UserMessageExtra = memo<UserMessageExtraProps>(({ extra, id, content }) => {
-  const loading = useChatStore(chatSelectors.isMessageGenerating(id));
+  const loading = useChatStore(messageStateSelectors.isMessageGenerating(id));
 
   const showTranslate = !!extra?.translate;
   const showTTS = !!extra?.tts;

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

@@ -15,14 +15,14 @@ import { useUserAvatar } from '@/hooks/useUserAvatar';
 import { useAgentStore } from '@/store/agent';
 import { agentChatConfigSelectors } from '@/store/agent/selectors';
 import { useChatStore } from '@/store/chat';
-import { chatSelectors } from '@/store/chat/selectors';
+import { messageStateSelectors } from '@/store/chat/selectors';
 import { useSessionStore } from '@/store/session';
 import { sessionSelectors } from '@/store/session/selectors';
 import { useUserStore } from '@/store/user';
 import { userProfileSelectors } from '@/store/user/selectors';
 
 import { useDoubleClickEdit } from '../../hooks/useDoubleClickEdit';
-import { UserActionsBar } from './Actions';
+import Actions from './Actions';
 import { UserBelowMessage } from './BelowMessage';
 import { UserMessageExtra } from './Extra';
 import { MarkdownRender as UserMarkdownRender } from './MarkdownRender';
@@ -55,9 +55,9 @@ const UserMessage = memo<UserMessageProps>((props) => {
   const displayMode = useAgentStore(agentChatConfigSelectors.displayMode);
 
   const [editing, generating, isInRAGFlow] = useChatStore((s) => [
-    chatSelectors.isMessageEditing(id)(s),
-    chatSelectors.isMessageGenerating(id)(s),
-    chatSelectors.isMessageInRAGFlow(id)(s),
+    messageStateSelectors.isMessageEditing(id)(s),
+    messageStateSelectors.isMessageGenerating(id)(s),
+    messageStateSelectors.isMessageInRAGFlow(id)(s),
   ]);
 
   const loading = isInRAGFlow || generating;
@@ -127,60 +127,59 @@ const UserMessage = memo<UserMessageProps>((props) => {
   );
 
   return (
-    <Flexbox
-      className={styles.container}
-      direction={placement === 'left' ? 'horizontal' : 'horizontal-reverse'}
-      gap={mobile ? 6 : 12}
-    >
-      <Avatar
-        alt={title}
-        avatar={{ avatar, title }}
-        loading={loading}
-        placement={placement}
-        size={mobile ? 32 : undefined}
-        style={{ marginTop: 6 }}
-      />
+    <Flexbox className={styles.container} gap={8}>
       <Flexbox
-        align={placement === 'left' ? 'flex-start' : 'flex-end'}
-        className={styles.messageContainer}
+        direction={placement === 'left' ? 'horizontal' : 'horizontal-reverse'}
+        gap={mobile ? 6 : 12}
       >
-        <Title
+        <Avatar
+          alt={title}
           avatar={{ avatar, title }}
+          loading={loading}
           placement={placement}
-          showTitle={false}
-          time={createdAt}
-          titleAddon={dmIndicator}
+          size={32}
+          style={{ marginTop: 6 }}
         />
         <Flexbox
           align={placement === 'left' ? 'flex-start' : 'flex-end'}
-          className={styles.messageContent}
-          direction={placement === 'left' ? 'horizontal' : 'horizontal-reverse'}
-          gap={8}
+          className={styles.messageContainer}
         >
-          <Flexbox flex={1} style={{ maxWidth: '100%', minWidth: 0 }}>
-            <MessageContent
-              editing={editing}
-              id={id}
-              markdownProps={markdownProps}
-              message={content}
-              messageExtra={<UserMessageExtra content={content} extra={extra} id={id} />}
-              onDoubleClick={onDoubleClick}
-              placement={placement}
-              primary
-              renderMessage={renderMessage}
-              variant={variant}
-            />
-          </Flexbox>
-
-          {!disableEditing && !editing && (
-            <Flexbox align={'flex-start'} className={styles.actions} role="menubar">
-              <UserActionsBar data={props} id={id} index={index} />
+          <Title
+            avatar={{ avatar, title }}
+            placement={placement}
+            showTitle={false}
+            time={createdAt}
+            titleAddon={dmIndicator}
+          />
+          <Flexbox
+            align={placement === 'left' ? 'flex-start' : 'flex-end'}
+            className={styles.messageContent}
+            direction={placement === 'left' ? 'horizontal' : 'horizontal-reverse'}
+            gap={8}
+          >
+            <Flexbox flex={1} style={{ maxWidth: '100%', minWidth: 0 }}>
+              <MessageContent
+                editing={editing}
+                id={id}
+                markdownProps={markdownProps}
+                message={content}
+                messageExtra={<UserMessageExtra content={content} extra={extra} id={id} />}
+                onDoubleClick={onDoubleClick}
+                placement={placement}
+                primary
+                renderMessage={renderMessage}
+                variant={variant}
+              />
             </Flexbox>
-          )}
+          </Flexbox>
+          <UserBelowMessage content={content} id={id} ragQuery={ragQuery} />
         </Flexbox>
-        <UserBelowMessage content={content} id={id} ragQuery={ragQuery} />
+        {mobile && variant === 'bubble' && <BorderSpacing borderSpacing={32} />}
+      </Flexbox>
+
+      <Flexbox direction={'horizontal-reverse'}>
+        <Actions data={props} disableEditing={disableEditing} id={id} index={index} />
       </Flexbox>
-      {mobile && variant === 'bubble' && <BorderSpacing borderSpacing={32} />}
     </Flexbox>
   );
 });

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

@@ -1,21 +1,22 @@
 'use client';
 
+import { isDesktop } from '@lobechat/const';
 import { createStyles } from 'antd-style';
 import isEqual from 'fast-deep-equal';
 import { ReactNode, memo, useCallback, useEffect, useMemo, useRef } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
-import { isDesktop } from '@/const/version';
 import {
   removeVirtuosoVisibleItem,
   upsertVirtuosoVisibleItem,
 } from '@/features/Conversation/components/VirtualizedList/VirtuosoContext';
 import { useChatStore } from '@/store/chat';
-import { chatSelectors } from '@/store/chat/selectors';
+import { displayMessageSelectors, messageStateSelectors } from '@/store/chat/selectors';
 
 import History from '../components/History';
 import { InPortalThreadContext } from '../context/InPortalThreadContext';
 import AssistantMessage from './Assistant';
+import GroupMessage from './Group';
 import SupervisorMessage from './Supervisor';
 import UserMessage from './User';
 
@@ -55,9 +56,9 @@ const Item = memo<ChatListItemProps>(
     const { styles, cx } = useStyles();
     const containerRef = useRef<HTMLDivElement | null>(null);
 
-    const item = useChatStore(chatSelectors.getMessageById(id), isEqual);
+    const item = useChatStore(displayMessageSelectors.getDisplayMessageById(id), isEqual);
 
-    const [isMessageLoading] = useChatStore((s) => [chatSelectors.isMessageLoading(id)(s)]);
+    const [isMessageLoading] = useChatStore((s) => [messageStateSelectors.isMessageLoading(id)(s)]);
 
     // ======================= Performance Optimization ======================= //
     // these useMemo/useCallback are all for the performance optimization
@@ -132,6 +133,17 @@ const Item = memo<ChatListItemProps>(
           );
         }
 
+        case 'assistantGroup': {
+          return (
+            <GroupMessage
+              {...item}
+              disableEditing={disableEditing}
+              index={index}
+              showTitle={item.groupId ? true : false}
+            />
+          );
+        }
+
         case 'supervisor': {
           return <SupervisorMessage {...item} disableEditing={disableEditing} index={index} />;
         }

package/src/features/Conversation/components/AutoScroll.tsx

@@ -1,7 +1,7 @@
 import { memo, useEffect } from 'react';
 
 import { useChatStore } from '@/store/chat';
-import { chatSelectors } from '@/store/chat/selectors';
+import { displayMessageSelectors, messageStateSelectors } from '@/store/chat/selectors';
 
 import BackBottom from './BackBottom';
 
@@ -11,9 +11,9 @@ interface AutoScrollProps {
   onScrollToBottom: (type: 'auto' | 'click') => void;
 }
 const AutoScroll = memo<AutoScrollProps>(({ atBottom, isScrolling, onScrollToBottom }) => {
-  const trackVisibility = useChatStore(chatSelectors.isAIGenerating);
-  const str = useChatStore(chatSelectors.mainAIChatsMessageString);
-  const reasoningStr = useChatStore(chatSelectors.mainAILatestMessageReasoningContent);
+  const trackVisibility = useChatStore(messageStateSelectors.isAIGenerating);
+  const str = useChatStore(displayMessageSelectors.mainAIChatsMessageString);
+  const reasoningStr = useChatStore(displayMessageSelectors.mainAILatestMessageReasoningContent);
 
   useEffect(() => {
     if (atBottom && trackVisibility && !isScrolling) {

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

@@ -0,0 +1,55 @@
+import { memo, useEffect, useRef, useState } from 'react';
+
+interface AnimatedNumberProps {
+  duration?: number;
+  formatter?: (value: number) => string;
+  value: number;
+}
+
+const AnimatedNumber = memo<AnimatedNumberProps>(({ value, duration = 3000, formatter }) => {
+  const [displayValue, setDisplayValue] = useState(value);
+  const frameRef = useRef<number>(undefined);
+  const startTimeRef = useRef<number>(undefined);
+  const startValueRef = useRef(value);
+
+  useEffect(() => {
+    const startValue = startValueRef.current;
+    const diff = value - startValue;
+
+    if (diff === 0) return;
+
+    const animate = (currentTime: number) => {
+      if (!startTimeRef.current) {
+        startTimeRef.current = currentTime;
+      }
+
+      const elapsed = currentTime - startTimeRef.current;
+      const progress = Math.min(elapsed / duration, 1);
+
+      // 使用 easeOutCubic 缓动函数
+      const easeProgress = 1 - (1 - progress) ** 3;
+      const current = startValue + diff * easeProgress;
+
+      setDisplayValue(current);
+
+      if (progress < 1) {
+        frameRef.current = requestAnimationFrame(animate);
+      } else {
+        startValueRef.current = value;
+        startTimeRef.current = undefined;
+      }
+    };
+
+    frameRef.current = requestAnimationFrame(animate);
+
+    return () => {
+      if (frameRef.current) {
+        cancelAnimationFrame(frameRef.current);
+      }
+    };
+  }, [value, duration]);
+
+  return formatter ? formatter(displayValue) : displayValue.toString();
+});
+
+export default AnimatedNumber;

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

@@ -11,8 +11,9 @@ import InfoTooltip from '@/components/InfoTooltip';
 import { aiModelSelectors, useAiInfraStore } from '@/store/aiInfra';
 import { useGlobalStore } from '@/store/global';
 import { systemStatusSelectors } from '@/store/global/selectors';
-import { formatNumber } from '@/utils/format';
+import { formatNumber, formatShortenNumber } from '@/utils/format';
 
+import AnimatedNumber from './AnimatedNumber';
 import ModelCard from './ModelCard';
 import TokenProgress, { TokenProgressItem } from './TokenProgress';
 import { getDetailsToken } from './tokens';
@@ -111,10 +112,12 @@ const TokenDetail = memo<TokenDetailProps>(({ meta, model, provider }) => {
     },
   ].filter(Boolean) as TokenProgressItem[];
 
-  const displayTotal =
+  const totalCount =
     isShowCredit && !!detailTokens.totalTokens
-      ? formatNumber(detailTokens.totalTokens.credit)
-      : formatNumber(detailTokens.totalTokens!.token);
+      ? detailTokens.totalTokens.credit
+      : detailTokens.totalTokens!.token;
+
+  const detailTotal = formatNumber(totalCount);
 
   const averagePricing = formatNumber(
     detailTokens.totalTokens!.credit / detailTokens.totalTokens!.token,
@@ -171,7 +174,7 @@ const TokenDetail = memo<TokenDetailProps>(({ meta, model, provider }) => {
                 <div style={{ color: theme.colorTextSecondary }}>
                   {t('messages.tokenDetails.total')}
                 </div>
-                <div style={{ fontWeight: 500 }}>{displayTotal}</div>
+                <div style={{ fontWeight: 500 }}>{detailTotal}</div>
               </Flexbox>
               {isShowCredit && (
                 <Flexbox align={'center'} gap={4} horizontal justify={'space-between'}>
@@ -212,7 +215,13 @@ const TokenDetail = memo<TokenDetailProps>(({ meta, model, provider }) => {
     >
       <Center gap={2} horizontal style={{ cursor: 'default' }}>
         <Icon icon={isShowCredit ? BadgeCent : CoinsIcon} />
-        {displayTotal}
+        <AnimatedNumber
+          formatter={(value) => (formatShortenNumber(value) as string).toLowerCase?.()}
+          // Force remount when switching between token/credit to prevent unwanted animation
+          // See: https://github.com/lobehub/lobe-chat/pull/10098
+          key={isShowCredit ? 'credit' : 'token'}
+          value={totalCount}
+        />
       </Center>
     </Popover>
   );

package/src/features/Conversation/components/ShareMessageModal/ShareImage/Preview.tsx

@@ -1,3 +1,4 @@
+import { OFFICIAL_DOMAIN } from '@lobechat/const';
 import { UIChatMessage } from '@lobechat/types';
 import { ModelTag } from '@lobehub/icons';
 import { Avatar } from '@lobehub/ui';
@@ -14,7 +15,6 @@ import { agentSelectors } from '@/store/agent/selectors';
 import { useSessionStore } from '@/store/session';
 import { sessionMetaSelectors, sessionSelectors } from '@/store/session/selectors';
 
-import pkg from '../../../../../../package.json';
 import { useContainerStyles } from '../style';
 import { useStyles } from './style';
 import { FieldType } from './type';
@@ -75,7 +75,7 @@ const Preview = memo<PreviewProps>(
             {withFooter ? (
               <Flexbox align={'center'} className={styles.footer} gap={4}>
                 <ProductLogo type={'combine'} />
-                <div className={styles.url}>{pkg.homepage}</div>
+                <div className={styles.url}>{OFFICIAL_DOMAIN}</div>
               </Flexbox>
             ) : (
               <div />