diff --git a/packages/builtin-tool-group-management/src/client/Inspector/Broadcast/index.tsx b/packages/builtin-tool-group-management/src/client/Inspector/Broadcast/index.tsx index b12494cb23..3d021cba9d 100644 --- a/packages/builtin-tool-group-management/src/client/Inspector/Broadcast/index.tsx +++ b/packages/builtin-tool-group-management/src/client/Inspector/Broadcast/index.tsx @@ -78,7 +78,7 @@ export const BroadcastInspector = memo>( {t('builtins.lobe-group-management.inspector.broadcast.title')} - {avatarItems.length > 0 && } + {avatarItems.length > 0 && } ); }, diff --git a/packages/builtin-tool-web-browsing/src/client/Portal/Search/ResultList/SearchItem/Video.tsx b/packages/builtin-tool-web-browsing/src/client/Portal/Search/ResultList/SearchItem/Video.tsx index d3f79596e0..d0abc26574 100644 --- a/packages/builtin-tool-web-browsing/src/client/Portal/Search/ResultList/SearchItem/Video.tsx +++ b/packages/builtin-tool-web-browsing/src/client/Portal/Search/ResultList/SearchItem/Video.tsx @@ -102,6 +102,7 @@ const VideoItem = memo( key: engine, title: engine, }))} + shape={'circle'} size={20} /> {title} diff --git a/src/features/Conversation/ChatItem/ChatItem.tsx b/src/features/Conversation/ChatItem/ChatItem.tsx index 30389b2ffd..113871eba0 100644 --- a/src/features/Conversation/ChatItem/ChatItem.tsx +++ b/src/features/Conversation/ChatItem/ChatItem.tsx @@ -16,6 +16,7 @@ const ChatItem = memo( ({ onAvatarClick, avatarProps, + customAvatarRender, actions, className, loading, @@ -71,16 +72,19 @@ const ChatItem = memo( direction={isUser ? 'horizontal-reverse' : 'horizontal'} gap={8} > - {showAvatar && ( - - )} + {showAvatar && + (customAvatarRender ? ( + customAvatarRender(avatar) + ) : ( + + ))} </Flexbox> <Flexbox diff --git a/src/features/Conversation/ChatItem/type.ts b/src/features/Conversation/ChatItem/type.ts index d7c7a200f7..a717c5ce90 100644 --- a/src/features/Conversation/ChatItem/type.ts +++ b/src/features/Conversation/ChatItem/type.ts @@ -10,6 +10,7 @@ export interface ChatItemProps extends Omit<FlexboxProps, 'children' | 'onChange avatarProps?: AvatarProps; belowMessage?: ReactNode; children?: ReactNode; + customAvatarRender?: (avatar: MetaData) => ReactNode; customErrorRender?: (error: AlertProps) => ReactNode; /** * @description Whether the chat item is disabled diff --git a/src/features/Conversation/Messages/Supervisor/index.tsx b/src/features/Conversation/Messages/Supervisor/index.tsx index 5ef3122c73..86bcea477e 100644 --- a/src/features/Conversation/Messages/Supervisor/index.tsx +++ b/src/features/Conversation/Messages/Supervisor/index.tsx @@ -1,11 +1,16 @@ 'use client'; +import { Tag } from '@lobehub/ui'; import isEqual from 'fast-deep-equal'; import { type MouseEventHandler, memo, useCallback } from 'react'; +import { useTranslation } from 'react-i18next'; import { MESSAGE_ACTION_BAR_PORTAL_ATTRIBUTES } from '@/const/messageActionPortal'; import { ChatItem } from '@/features/Conversation/ChatItem'; import { useNewScreen } from '@/features/Conversation/Messages/components/useNewScreen'; +import GroupAvatar from '@/features/GroupAvatar'; +import { useAgentGroupStore } from '@/store/agentGroup'; +import { agentGroupSelectors } from '@/store/agentGroup/selectors'; import { useAgentMeta } from '../../hooks'; import { dataSelectors, messageStateSelectors, useConversationStore } from '../../store'; @@ -31,12 +36,23 @@ interface GroupMessageProps { } const GroupMessage = memo<GroupMessageProps>(({ id, index, disableEditing, isLatestItem }) => { + const { t } = useTranslation('chat'); + // Get message and actionsConfig from ConversationStore const item = useConversationStore(dataSelectors.getDisplayMessageById(id), isEqual)!; const { agentId, usage, createdAt, children, performance, model, provider, branch } = item; const avatar = useAgentMeta(agentId); + // Get group member avatars for GroupAvatar + const memberAvatars = useAgentGroupStore( + (s) => agentGroupSelectors.currentGroupMemberAvatars(s), + isEqual, + ); + + // Get group meta for title + const groupMeta = useAgentGroupStore(agentGroupSelectors.currentGroupMeta); + // Get editing state from ConversationStore const creating = useConversationStore(messageStateSelectors.isMessageCreating(id)); const newScreen = useNewScreen({ creating, isLatestItem }); @@ -75,12 +91,17 @@ const GroupMessage = memo<GroupMessageProps>(({ id, index, disableEditing, isLat </> ) } - avatar={avatar} + avatar={{ + ...avatar, + title: groupMeta.title, + }} + customAvatarRender={() => <GroupAvatar avatars={memberAvatars} />} newScreen={newScreen} onMouseEnter={onMouseEnter} placement={'left'} showTitle time={createdAt} + titleAddon={<Tag>{t('supervisor.label')}</Tag>} > {children && children.length > 0 && ( <Group blocks={children} disableEditing={disableEditing} id={id} messageIndex={index} /> diff --git a/src/locales/default/chat.ts b/src/locales/default/chat.ts index 003719e5d9..763aaac9be 100644 --- a/src/locales/default/chat.ts +++ b/src/locales/default/chat.ts @@ -308,6 +308,7 @@ export default { 'stt.action': 'Voice Input', 'stt.loading': 'Recognizing...', 'stt.prettifying': 'Polishing...', + 'supervisor.label': 'Supervisor', 'supervisor.todoList.allComplete': 'All tasks completed', 'supervisor.todoList.title': 'Tasks Completed', 'tab.groupProfile': 'Group Profile',