@lobehub/lobehub 2.0.0-next.5 → 2.0.0-next.51

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

@@ -1,6 +1,7 @@
 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';
@@ -15,21 +16,22 @@ 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 { displayMessageSelectors, 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';
 import { UserMessageContent } from './MessageContent';
 
-interface UserMessageProps extends UIChatMessage {
+interface UserMessageProps {
   disableEditing?: boolean;
+  id: string;
   index: number;
 }
 
@@ -43,9 +45,13 @@ const remarkPlugins = markdownElements
   .map((element) => element.remarkPlugin)
   .filter(Boolean);
 
-const UserMessage = memo<UserMessageProps>((props) => {
-  const { id, ragQuery, content, createdAt, error, role, index, extra, disableEditing, targetId } =
-    props;
+const UserMessage = memo<UserMessageProps>(({ id, disableEditing, index }) => {
+  const item = useChatStore(
+    displayMessageSelectors.getDisplayMessageById(id),
+    isEqual,
+  ) as UIChatMessage;
+
+  const { ragQuery, content, createdAt, error, role, extra, targetId } = item;
 
   const { t } = useTranslation('chat');
   const { mobile } = useResponsive();
@@ -55,9 +61,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;
@@ -97,9 +103,9 @@ const UserMessage = memo<UserMessageProps>((props) => {
 
   const renderMessage = useCallback(
     (editableContent: ReactNode) => (
-      <UserMessageContent {...props} editableContent={editableContent} />
+      <UserMessageContent {...item} editableContent={editableContent} />
     ),
-    [props],
+    [item],
   );
 
   const components = useMemo(
@@ -127,60 +133,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={item} 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 { getChatStoreState, useChatStore } from '@/store/chat';
+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,10 @@ const Item = memo<ChatListItemProps>(
     const { styles, cx } = useStyles();
     const containerRef = useRef<HTMLDivElement | null>(null);
 
-    const item = useChatStore(chatSelectors.getMessageById(id), isEqual);
-
-    const [isMessageLoading] = useChatStore((s) => [chatSelectors.isMessageLoading(id)(s)]);
+    const [isMessageLoading, role] = useChatStore((s) => [
+      messageStateSelectors.isMessageLoading(id)(s),
+      displayMessageSelectors.getDisplayMessageById(id)(s)?.role,
+    ]);
 
     // ======================= Performance Optimization ======================= //
     // these useMemo/useCallback are all for the performance optimization
@@ -103,6 +105,8 @@ const Item = memo<ChatListItemProps>(
     }, [index]);
 
     const onContextMenu = useCallback(async () => {
+      const item = displayMessageSelectors.getDisplayMessageById(id)(getChatStoreState());
+
       if (isDesktop && item) {
         const { electronSystemService } = await import('@/services/electron/system');
 
@@ -113,34 +117,31 @@ const Item = memo<ChatListItemProps>(
           role: item.role,
         });
       }
-    }, [id, item]);
+    }, [id]);
 
     const renderContent = useMemo(() => {
-      switch (item?.role) {
+      switch (role) {
         case 'user': {
-          return <UserMessage {...item} disableEditing={disableEditing} index={index} />;
+          return <UserMessage disableEditing={disableEditing} id={id} index={index} />;
         }
 
         case 'assistant': {
-          return (
-            <AssistantMessage
-              {...item}
-              disableEditing={disableEditing}
-              index={index}
-              showTitle={item.groupId ? true : false}
-            />
-          );
+          return <AssistantMessage disableEditing={disableEditing} id={id} index={index} />;
+        }
+
+        case 'assistantGroup': {
+          return <GroupMessage disableEditing={disableEditing} id={id} index={index} />;
         }
 
         case 'supervisor': {
-          return <SupervisorMessage {...item} disableEditing={disableEditing} index={index} />;
+          return <SupervisorMessage disableEditing={disableEditing} id={id} index={index} />;
         }
       }
 
       return null;
-    }, [item]);
+    }, [role, disableEditing, id, index]);
 
-    if (!item) return;
+    if (!role) return;
 
     return (
       <InPortalThreadContext.Provider value={inPortalThread}>
@@ -157,6 +158,7 @@ const Item = memo<ChatListItemProps>(
       </InPortalThreadContext.Provider>
     );
   },
+  isEqual,
 );
 
 Item.displayName = 'ChatItem';

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/TTS/InitPlayer.tsx

@@ -1,3 +1,4 @@
+import { getMessageError } from '@lobechat/fetch-sse';
 import { ChatMessageError, ChatTTS } from '@lobechat/types';
 import { memo, useCallback, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -5,7 +6,6 @@ import { useTranslation } from 'react-i18next';
 import { useTTS } from '@/hooks/useTTS';
 import { useChatStore } from '@/store/chat';
 import { useFileStore } from '@/store/file';
-import { getMessageError } from '@/utils/fetch';
 
 import Player from './Player';
 

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;