@lobehub/lobehub 2.0.0-next.44 → 2.0.0-next.46

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

@@ -29,28 +29,20 @@ import EditState from './EditState';
 
 const MOBILE_AVATAR_SIZE = 32;
 
-interface GroupMessageProps extends UIChatMessage {
+interface GroupMessageProps {
   disableEditing?: boolean;
+  id: string;
   index: number;
-  showTitle?: boolean;
 }
 
-const GroupMessage = memo<GroupMessageProps>((props) => {
-  const {
-    showTitle,
-    id,
-    disableEditing,
-    usage,
-    index,
-    createdAt,
-    meta,
-    children,
-    performance,
-    model,
-    provider,
-  } = props;
+const GroupMessage = memo<GroupMessageProps>(({ id, index, disableEditing }) => {
+  const item = useChatStore(
+    displayMessageSelectors.getDisplayMessageById(id),
+    isEqual,
+  ) as UIChatMessage;
+  const { usage, createdAt, meta, children, performance, model, provider } = item;
   const avatar = meta;
-  console.log('render');
+
   const { mobile } = useResponsive();
   const placement = 'left';
   const type = useAgentStore(agentChatConfigSelectors.displayMode);
@@ -60,7 +52,7 @@ const GroupMessage = memo<GroupMessageProps>((props) => {
     editing: false,
     placement,
     primary: false,
-    showTitle,
+    showTitle: true,
     time: createdAt,
     title: avatar.title,
     variant,
@@ -129,14 +121,14 @@ const GroupMessage = memo<GroupMessageProps>((props) => {
           )}
 
           {model && (
-            <Usage metadata={{ ...performance, ...usage }} model={model} provider={provider!} />
+            <Usage model={model} performance={performance} provider={provider!} usage={usage} />
           )}
           {!disableEditing && (
             <Flexbox align={'flex-start'} className={styles.actions} role="menubar">
               <GroupActionsBar
                 contentBlock={lastAssistantMsg}
                 contentId={contentId}
-                data={props}
+                data={item}
                 id={id}
                 index={index}
               />

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

@@ -4,6 +4,7 @@ import { UIChatMessage } from '@lobechat/types';
 import { ModelIcon } from '@lobehub/icons';
 import { Button, Text } from '@lobehub/ui';
 import { createStyles, useTheme } from 'antd-style';
+import isEqual from 'fast-deep-equal';
 import { LucideRefreshCw } from 'lucide-react';
 import { memo, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -12,6 +13,7 @@ import { Flexbox } from 'react-layout-kit';
 import { DEFAULT_SUPERVISOR_AVATAR } from '@/const/meta';
 import { ChatItem } from '@/features/ChatItem';
 import { useChatStore } from '@/store/chat';
+import { displayMessageSelectors } from '@/store/chat/slices/message/selectors';
 import { ChatErrorType } from '@/types/fetch';
 
 import TodoList, { TodoData } from './TodoList';
@@ -54,13 +56,20 @@ const parseMarkdownTodos = (content: string): TodoData => {
   };
 };
 
-interface SupervisorMessageProps extends UIChatMessage {
+interface SupervisorMessageProps {
   disableEditing?: boolean;
+  id: string;
   index: number;
 }
 
-const SupervisorMessage = memo<SupervisorMessageProps>((props) => {
-  const { id, content, error, groupId, role, updatedAt, createdAt } = props;
+const SupervisorMessage = memo<SupervisorMessageProps>(({ id }) => {
+  const item = useChatStore(
+    displayMessageSelectors.getDisplayMessageById(id),
+    isEqual,
+  ) as UIChatMessage;
+
+  const { content, error, groupId, role, updatedAt, createdAt } = item;
+
   const { t } = useTranslation('chat');
   const theme = useTheme();
   const { styles } = useStyles();
@@ -128,8 +137,8 @@ const SupervisorMessage = memo<SupervisorMessageProps>((props) => {
 
   // Render todo message with dedicated component
   if (isTodoMessage && todoData) {
-    const model = props.extra?.model;
-    const provider = props.extra?.provider;
+    const model = item.extra?.model;
+    const provider = item.extra?.provider;
     const hasModelInfo = model || provider;
 
     return (

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,7 +16,7 @@ import { useUserAvatar } from '@/hooks/useUserAvatar';
 import { useAgentStore } from '@/store/agent';
 import { agentChatConfigSelectors } from '@/store/agent/selectors';
 import { useChatStore } from '@/store/chat';
-import { messageStateSelectors } 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';
@@ -28,8 +29,9 @@ 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();
@@ -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(
@@ -178,7 +184,7 @@ const UserMessage = memo<UserMessageProps>((props) => {
       </Flexbox>
 
       <Flexbox direction={'horizontal-reverse'}>
-        <Actions data={props} disableEditing={disableEditing} id={id} index={index} />
+        <Actions data={item} disableEditing={disableEditing} id={id} index={index} />
       </Flexbox>
     </Flexbox>
   );

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

@@ -10,7 +10,7 @@ import {
   removeVirtuosoVisibleItem,
   upsertVirtuosoVisibleItem,
 } from '@/features/Conversation/components/VirtualizedList/VirtuosoContext';
-import { useChatStore } from '@/store/chat';
+import { getChatStoreState, useChatStore } from '@/store/chat';
 import { displayMessageSelectors, messageStateSelectors } from '@/store/chat/selectors';
 
 import History from '../components/History';
@@ -56,9 +56,10 @@ const Item = memo<ChatListItemProps>(
     const { styles, cx } = useStyles();
     const containerRef = useRef<HTMLDivElement | null>(null);
 
-    const item = useChatStore(displayMessageSelectors.getDisplayMessageById(id), isEqual);
-
-    const [isMessageLoading] = useChatStore((s) => [messageStateSelectors.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
@@ -104,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');
 
@@ -114,45 +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
-              {...item}
-              disableEditing={disableEditing}
-              index={index}
-              showTitle={item.groupId ? true : false}
-            />
-          );
+          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}>
@@ -169,6 +158,7 @@ const Item = memo<ChatListItemProps>(
       </InPortalThreadContext.Provider>
     );
   },
+  isEqual,
 );
 
 Item.displayName = 'ChatItem';

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

@@ -1,4 +1,4 @@
-import { MessageMetadata } from '@lobechat/types';
+import { ModelPerformance, ModelUsage } from '@lobechat/types';
 import { Icon } from '@lobehub/ui';
 import { Divider, Popover } from 'antd';
 import { useTheme } from 'antd-style';
@@ -20,12 +20,13 @@ import TokenProgress, { TokenProgressItem } from './TokenProgress';
 import { getDetailsToken } from './tokens';
 
 interface TokenDetailProps {
-  meta: MessageMetadata;
   model: string;
+  performance?: ModelPerformance;
   provider: string;
+  usage: ModelUsage;
 }
 
-const TokenDetail = memo<TokenDetailProps>(({ meta, model, provider }) => {
+const TokenDetail = memo<TokenDetailProps>(({ usage, performance, model, provider }) => {
   const { t } = useTranslation('chat');
   const theme = useTheme();
   const isMobile = useIsMobile();
@@ -37,7 +38,7 @@ const TokenDetail = memo<TokenDetailProps>(({ meta, model, provider }) => {
   const modelCard = useAiInfraStore(aiModelSelectors.getModelCard(model, provider));
   const isShowCredit = useGlobalStore(systemStatusSelectors.isShowCredit) && !!modelCard?.pricing;
 
-  const detailTokens = getDetailsToken(meta, modelCard);
+  const detailTokens = getDetailsToken(usage, modelCard);
   const inputDetails = [
     !!detailTokens.inputAudio && {
       color: theme.cyan9,
@@ -130,8 +131,8 @@ const TokenDetail = memo<TokenDetailProps>(({ meta, model, provider }) => {
     2,
   );
 
-  const tps = meta?.tps ? formatNumber(meta.tps, 2) : undefined;
-  const ttft = meta?.ttft ? formatNumber(meta.ttft / 1000, 2) : undefined;
+  const tps = performance?.tps ? formatNumber(performance.tps, 2) : undefined;
+  const ttft = performance?.ttft ? formatNumber(performance.ttft / 1000, 2) : undefined;
 
   return (
     <Popover

package/src/features/Conversation/components/Extras/Usage/UsageDetail/tokens.ts

@@ -1,4 +1,4 @@
-import type { ModelTokensUsage } from '@lobechat/types';
+import { ModelUsage } from '@lobechat/types';
 import { LobeDefaultAiModelListItem } from 'model-bank';
 
 import { getAudioInputUnitRate, getAudioOutputUnitRate } from '@/utils/pricing';
@@ -11,10 +11,7 @@ const calcCredit = (token: number, pricing?: number) => {
   return parseInt((token * pricing).toFixed(0));
 };
 
-export const getDetailsToken = (
-  usage: ModelTokensUsage,
-  modelCard?: LobeDefaultAiModelListItem,
-) => {
+export const getDetailsToken = (usage: ModelUsage, modelCard?: LobeDefaultAiModelListItem) => {
   const inputTextTokens = usage.inputTextTokens || (usage as any).inputTokens || 0;
   const totalInputTokens = usage.totalInputTokens || (usage as any).inputTokens || 0;
 

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

@@ -1,6 +1,7 @@
-import { MessageMetadata } from '@lobechat/types';
+import { ModelPerformance, ModelUsage } from '@lobechat/types';
 import { ModelIcon } from '@lobehub/icons';
 import { createStyles } from 'antd-style';
+import isEqual from 'fast-deep-equal';
 import { memo } from 'react';
 import { Center, Flexbox } from 'react-layout-kit';
 
@@ -14,12 +15,13 @@ export const useStyles = createStyles(({ token, css, cx }) => ({
 }));
 
 interface UsageProps {
-  metadata: MessageMetadata;
   model: string;
+  performance?: ModelPerformance;
   provider: string;
+  usage?: ModelUsage;
 }
 
-const Usage = memo<UsageProps>(({ model, metadata, provider }) => {
+const Usage = memo<UsageProps>(({ model, usage, performance, provider }) => {
   const { styles } = useStyles();
 
   return (
@@ -35,11 +37,16 @@ const Usage = memo<UsageProps>(({ model, metadata, provider }) => {
         {model}
       </Center>
 
-      {!!metadata.totalTokens && (
-        <TokenDetail meta={metadata} model={model as string} provider={provider} />
+      {!!usage?.totalTokens && (
+        <TokenDetail
+          model={model as string}
+          performance={performance}
+          provider={provider}
+          usage={usage}
+        />
       )}
     </Flexbox>
   );
-});
+}, isEqual);
 
 export default Usage;