style: update supervisor

packages/builtin-tool-group-management/src/client/Inspector/Broadcast/index.tsx

@@ -78,7 +78,7 @@ export const BroadcastInspector = memo<BuiltinInspectorProps<BroadcastParams>>(
         <span className={styles.title}>
           {t('builtins.lobe-group-management.inspector.broadcast.title')}
         </span>
-        {avatarItems.length > 0 && <Avatar.Group items={avatarItems} shape={'square'} size={24} />}
+        {avatarItems.length > 0 && <Avatar.Group items={avatarItems} shape={'circle'} size={24} />}
       </Flexbox>
     );
   },

packages/builtin-tool-web-browsing/src/client/Portal/Search/ResultList/SearchItem/Video.tsx

@@ -102,6 +102,7 @@ const VideoItem = memo<SearchResultProps>(
                       key: engine,
                       title: engine,
                     }))}
+                    shape={'circle'}
                     size={20}
                   />
                   <Flexbox className={styles.title}>{title}</Flexbox>

src/features/Conversation/ChatItem/ChatItem.tsx

@@ -16,6 +16,7 @@ const ChatItem = memo<ChatItemProps>(
   ({
     onAvatarClick,
     avatarProps,
+    customAvatarRender,
     actions,
     className,
     loading,
@@ -71,16 +72,19 @@ const ChatItem = memo<ChatItemProps>(
           direction={isUser ? 'horizontal-reverse' : 'horizontal'}
           gap={8}
         >
-          {showAvatar && (
-            <Avatar
-              alt={avatarProps?.alt || avatar.title || 'avatar'}
-              loading={loading}
-              onClick={onAvatarClick}
-              shape={'square'}
-              {...avatarProps}
-              avatar={avatar}
-            />
-          )}
+          {showAvatar &&
+            (customAvatarRender ? (
+              customAvatarRender(avatar)
+            ) : (
+              <Avatar
+                alt={avatarProps?.alt || avatar.title || 'avatar'}
+                loading={loading}
+                onClick={onAvatarClick}
+                shape={'square'}
+                {...avatarProps}
+                avatar={avatar}
+              />
+            ))}
           <Title avatar={avatar} showTitle={showTitle} time={time} titleAddon={titleAddon} />
         </Flexbox>
         <Flexbox

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

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} />

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',