@lobehub/lobehub 2.0.0-next.280 → 2.0.0-next.282

package/src/app/[variants]/(main)/agent/_layout/Sidebar/Topic/List/Item/index.tsx

@@ -1,8 +1,9 @@
 import { ActionIcon, Flexbox, Icon, Skeleton, Tag } from '@lobehub/ui';
 import { cssVar } from 'antd-style';
 import { MessageSquareDashed, Star } from 'lucide-react';
-import { Suspense, memo, useCallback } from 'react';
+import { Suspense, memo, useCallback, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
+import urlJoin from 'url-join';
 
 import { isDesktop } from '@/const/version';
 import NavItem from '@/features/NavPanel/components/NavItem';
@@ -29,6 +30,12 @@ const TopicItem = memo<TopicItemProps>(({ id, title, fav, active, threadId }) =>
   const openTopicInNewWindow = useGlobalStore((s) => s.openTopicInNewWindow);
   const activeAgentId = useAgentStore((s) => s.activeAgentId);
 
+  // Construct href for cmd+click support
+  const href = useMemo(() => {
+    if (!activeAgentId || !id) return undefined;
+    return urlJoin('/chat', `?agent=${activeAgentId}&topic=${id}`);
+  }, [activeAgentId, id]);
+
   const [editing, isLoading] = useChatStore((s) => [
     id ? s.topicRenamingId === id : false,
     id ? s.topicLoadingIds.includes(id) : false,
@@ -97,6 +104,7 @@ const TopicItem = memo<TopicItemProps>(({ id, title, fav, active, threadId }) =>
         active={active && !threadId && !isInAgentSubRoute}
         contextMenuItems={dropdownMenu}
         disabled={editing}
+        href={href}
         icon={
           <ActionIcon
             color={fav ? cssVar.colorWarning : undefined}

package/src/app/[variants]/(main)/agent/features/Conversation/ConversationArea.tsx

@@ -1,20 +1,14 @@
 'use client';
 
 import { Flexbox } from '@lobehub/ui';
-import { Suspense, memo, useEffect, useMemo } from 'react';
+import { Suspense, memo, useMemo } from 'react';
 
 import ChatMiniMap from '@/features/ChatMiniMap';
 import { ChatList, ConversationProvider, TodoProgress } from '@/features/Conversation';
 import ZenModeToast from '@/features/ZenModeToast';
 import { useOperationState } from '@/hooks/useOperationState';
-import { useAgentStore } from '@/store/agent';
-import { agentSelectors } from '@/store/agent/selectors';
 import { useChatStore } from '@/store/chat';
-import { topicSelectors } from '@/store/chat/selectors';
 import { messageMapKey } from '@/store/chat/utils/messageMapKey';
-import { useUserStore } from '@/store/user';
-import { settingsSelectors } from '@/store/user/selectors';
-import { useUserMemoryStore } from '@/store/userMemory';
 
 import WelcomeChatItem from './AgentWelcome';
 import ChatHydration from './ChatHydration';
@@ -33,27 +27,6 @@ import { useAgentContext } from './useAgentContext';
 const Conversation = memo(() => {
   const context = useAgentContext();
 
-  const [useFetchUserMemory, setActiveMemoryContext] = useUserMemoryStore((s) => [
-    s.useFetchUserMemory,
-    s.setActiveMemoryContext,
-  ]);
-  const [currentAgentMeta, activeTopic] = [
-    useAgentStore(agentSelectors.currentAgentMeta),
-    useChatStore(topicSelectors.currentActiveTopic),
-  ];
-  const enableUserMemories = useUserStore(settingsSelectors.memoryEnabled);
-
-  useEffect(() => {
-    if (!enableUserMemories) {
-      setActiveMemoryContext(undefined);
-      return;
-    }
-
-    setActiveMemoryContext({ agent: currentAgentMeta, topic: activeTopic });
-  }, [activeTopic, currentAgentMeta, enableUserMemories, setActiveMemoryContext]);
-
-  useFetchUserMemory(Boolean(enableUserMemories && context.agentId));
-
   // Get raw dbMessages from ChatStore for this context
   // ConversationStore will parse them internally to generate displayMessages
   const chatKey = useMemo(

package/src/app/[variants]/(main)/community/(detail)/features/MakedownRender.tsx

@@ -3,7 +3,7 @@
 import { Center, Empty, Markdown } from '@lobehub/ui';
 import { FileText } from 'lucide-react';
 import Link from 'next/link';
-import { memo } from 'react';
+import { type ReactNode, memo } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { H1, H2, H3, H4, H5 } from './Toc/Heading';
@@ -26,7 +26,7 @@ const MarkdownRender = memo<{ children?: string }>(({ children }) => {
     <Markdown
       allowHtml
       components={{
-        a: ({ href, ...rest }) => {
+        a: ({ href, ...rest }: { children?: ReactNode; href?: string }) => {
           if (href && href.startsWith('http'))
             return <Link {...rest} href={href} target={'_blank'} />;
           return rest?.children;
@@ -36,7 +36,7 @@ const MarkdownRender = memo<{ children?: string }>(({ children }) => {
         h3: H3,
         h4: H4,
         h5: H5,
-        img: ({ src, ...rest }) => {
+        img: ({ src, ...rest }: { alt?: string; src?: string | Blob }) => {
           // FIXME ignore experimental blob image prop passing
           if (typeof src !== 'string') return null;
           if (src.includes('glama.ai')) return null;

package/src/app/[variants]/(main)/group/_layout/Sidebar/GroupConfig/GroupMember.tsx

@@ -8,6 +8,7 @@ import { useTranslation } from 'react-i18next';
 import { DEFAULT_AVATAR } from '@/const/meta';
 import NavItem from '@/features/NavPanel/components/NavItem';
 import UserAvatar from '@/features/User/UserAvatar';
+import { useQueryRoute } from '@/hooks/useQueryRoute';
 import { useAgentGroupStore } from '@/store/agentGroup';
 import { agentGroupSelectors } from '@/store/agentGroup/selectors';
 import { useChatStore } from '@/store/chat';
@@ -30,6 +31,7 @@ interface GroupMemberProps {
  */
 const GroupMember = memo<GroupMemberProps>(({ addModalOpen, onAddModalOpenChange, groupId }) => {
   const { t } = useTranslation('chat');
+  const router = useQueryRoute();
   const [nickname, username] = useUserStore((s) => [
     userProfileSelectors.nickName(s),
     userProfileSelectors.username(s),
@@ -80,6 +82,11 @@ const GroupMember = memo<GroupMemberProps>(({ addModalOpen, onAddModalOpenChange
     pushPortalView({ agentId, type: PortalViewType.GroupThread });
   };
 
+  const handleMemberDoubleClick = (agentId: string) => {
+    if (!groupId) return;
+    router.push(`/group/${groupId}/profile`, { query: { tab: agentId }, replace: true });
+  };
+
   return (
     <>
       <Flexbox gap={2}>
@@ -93,7 +100,7 @@ const GroupMember = memo<GroupMemberProps>(({ addModalOpen, onAddModalOpenChange
               key={item.id}
               onChat={() => handleMemberClick(item.id)}
             >
-              <div>
+              <div onDoubleClick={() => handleMemberDoubleClick(item.id)}>
                 <GroupMemberItem
                   actions={
                     <ActionIcon

package/src/app/[variants]/(main)/group/_layout/Sidebar/GroupConfig/Header/Avatar.tsx

@@ -3,15 +3,10 @@
 import { Block } from '@lobehub/ui';
 import { memo } from 'react';
 
-import GroupAvatar from '@/features/GroupAvatar';
+import SupervisorAvatar from '@/app/[variants]/(main)/group/features/GroupAvatar';
 import { useOpenChatSettings } from '@/hooks/useInterceptingRoutes';
-import { useAgentGroupStore } from '@/store/agentGroup';
-import { agentGroupSelectors } from '@/store/agentGroup/selectors';
 
 const HeaderAvatar = memo<{ size?: number }>(() => {
-  const currentGroup = useAgentGroupStore(agentGroupSelectors.currentGroup);
-  const agents = currentGroup?.agents || [];
-
   const openChatSettings = useOpenChatSettings();
 
   return (
@@ -30,13 +25,7 @@ const HeaderAvatar = memo<{ size?: number }>(() => {
       variant={'borderless'}
       width={32}
     >
-      <GroupAvatar
-        avatars={agents.map((agent) => ({
-          avatar: agent.avatar,
-          background: agent.backgroundColor || undefined,
-        }))}
-        size={28}
-      />
+      <SupervisorAvatar size={28} />
     </Block>
   );
 });

package/src/app/[variants]/(main)/group/_layout/Sidebar/Header/Agent/index.tsx

@@ -5,7 +5,7 @@ import { ChevronsUpDownIcon } from 'lucide-react';
 import React, { type PropsWithChildren, memo } from 'react';
 import { useTranslation } from 'react-i18next';
 
-import GroupAvatar from '@/features/GroupAvatar';
+import SupervisorAvatar from '@/app/[variants]/(main)/group/features/GroupAvatar';
 import { SkeletonItem } from '@/features/NavPanel/components/SkeletonList';
 import { useAgentGroupStore } from '@/store/agentGroup';
 import { agentGroupSelectors } from '@/store/agentGroup/selectors';
@@ -15,10 +15,9 @@ import SwitchPanel from './SwitchPanel';
 const Agent = memo<PropsWithChildren>(() => {
   const { t } = useTranslation(['chat', 'common']);
 
-  const [isGroupsInit, groupMeta, memberAvatars] = useAgentGroupStore((s) => [
+  const [isGroupsInit, groupMeta] = useAgentGroupStore((s) => [
     agentGroupSelectors.isGroupsInit(s),
     agentGroupSelectors.currentGroupMeta(s),
-    agentGroupSelectors.currentGroupMemberAvatars(s),
   ]);
 
   const displayTitle = groupMeta?.title || t('untitledGroup', { ns: 'chat' });
@@ -39,7 +38,7 @@ const Agent = memo<PropsWithChildren>(() => {
         }}
         variant={'borderless'}
       >
-        <GroupAvatar avatars={memberAvatars} size={28} />
+        <SupervisorAvatar size={28} />
         <Text ellipsis weight={500}>
           {displayTitle}
         </Text>

package/src/app/[variants]/(main)/group/_layout/Sidebar/Topic/List/Item/index.tsx

@@ -1,17 +1,18 @@
 import { ActionIcon, Flexbox, Icon, Skeleton, Tag } from '@lobehub/ui';
 import { cssVar } from 'antd-style';
 import { MessageSquareDashed, Star } from 'lucide-react';
-import { Suspense, memo, useCallback } from 'react';
+import { Suspense, memo, useCallback, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
+import urlJoin from 'url-join';
 
 import { isDesktop } from '@/const/version';
 import NavItem from '@/features/NavPanel/components/NavItem';
 import { useAgentStore } from '@/store/agent';
+import { useAgentGroupStore } from '@/store/agentGroup';
 import { useChatStore } from '@/store/chat';
 import { useGlobalStore } from '@/store/global';
 
 import ThreadList from '../../TopicListContent/ThreadList';
-import { useTopicNavigation } from '../../hooks/useTopicNavigation';
 import Actions from './Actions';
 import Editing from './Editing';
 import { useTopicItemDropdownMenu } from './useDropdownMenu';
@@ -27,7 +28,15 @@ interface TopicItemProps {
 const TopicItem = memo<TopicItemProps>(({ id, title, fav, active, threadId }) => {
   const { t } = useTranslation('topic');
   const openTopicInNewWindow = useGlobalStore((s) => s.openTopicInNewWindow);
+  const toggleMobileTopic = useGlobalStore((s) => s.toggleMobileTopic);
   const activeAgentId = useAgentStore((s) => s.activeAgentId);
+  const [activeGroupId, switchTopic] = useAgentGroupStore((s) => [s.activeGroupId, s.switchTopic]);
+
+  // Construct href for cmd+click support
+  const href = useMemo(() => {
+    if (!activeGroupId || !id) return undefined;
+    return urlJoin('/group', activeGroupId, `?topic=${id}`);
+  }, [activeGroupId, id]);
 
   const [editing, isLoading] = useChatStore((s) => [
     id ? s.topicRenamingId === id : false,
@@ -36,8 +45,6 @@ const TopicItem = memo<TopicItemProps>(({ id, title, fav, active, threadId }) =>
 
   const [favoriteTopic] = useChatStore((s) => [s.favoriteTopic]);
 
-  const { navigateToTopic, isInAgentSubRoute } = useTopicNavigation();
-
   const toggleEditing = useCallback(
     (visible?: boolean) => {
       useChatStore.setState({ topicRenamingId: visible && id ? id : '' });
@@ -47,8 +54,9 @@ const TopicItem = memo<TopicItemProps>(({ id, title, fav, active, threadId }) =>
 
   const handleClick = useCallback(() => {
     if (editing) return;
-    navigateToTopic(id);
-  }, [editing, id, navigateToTopic]);
+    switchTopic(id);
+    toggleMobileTopic(false);
+  }, [editing, id, switchTopic, toggleMobileTopic]);
 
   const handleDoubleClick = useCallback(() => {
     if (!id || !activeAgentId) return;
@@ -66,7 +74,7 @@ const TopicItem = memo<TopicItemProps>(({ id, title, fav, active, threadId }) =>
   if (!id) {
     return (
       <NavItem
-        active={active && !isInAgentSubRoute}
+        active={active}
         icon={
           <Icon color={cssVar.colorTextDescription} icon={MessageSquareDashed} size={'small'} />
         }
@@ -94,9 +102,10 @@ const TopicItem = memo<TopicItemProps>(({ id, title, fav, active, threadId }) =>
     <Flexbox style={{ position: 'relative' }}>
       <NavItem
         actions={<Actions dropdownMenu={dropdownMenu} />}
-        active={active && !threadId && !isInAgentSubRoute}
+        active={active && !threadId}
         contextMenuItems={dropdownMenu}
         disabled={editing}
+        href={!editing ? href : undefined}
         icon={
           <ActionIcon
             color={fav ? cssVar.colorWarning : undefined}

package/src/app/[variants]/(main)/group/features/Conversation/ConversationArea.tsx

@@ -1,20 +1,14 @@
 'use client';
 
 import { Flexbox } from '@lobehub/ui';
-import { Suspense, memo, useEffect, useMemo } from 'react';
+import { Suspense, memo, useMemo } from 'react';
 
 import ChatMiniMap from '@/features/ChatMiniMap';
 import { ChatList, ConversationProvider } from '@/features/Conversation';
 import ZenModeToast from '@/features/ZenModeToast';
 import { useOperationState } from '@/hooks/useOperationState';
-import { useAgentStore } from '@/store/agent';
-import { agentSelectors } from '@/store/agent/selectors';
 import { useChatStore } from '@/store/chat';
-import { topicSelectors } from '@/store/chat/selectors';
 import { messageMapKey } from '@/store/chat/utils/messageMapKey';
-import { useUserStore } from '@/store/user';
-import { settingsSelectors } from '@/store/user/selectors';
-import { useUserMemoryStore } from '@/store/userMemory';
 
 import WelcomeChatItem from './AgentWelcome';
 import ChatHydration from './ChatHydration';
@@ -39,28 +33,6 @@ interface ConversationAreaProps {
 const Conversation = memo<ConversationAreaProps>(({ mobile = false }) => {
   const context = useGroupContext();
 
-  const [useFetchUserMemory, setActiveMemoryContext] = useUserMemoryStore((s) => [
-    s.useFetchUserMemory,
-    s.setActiveMemoryContext,
-  ]);
-  const [currentAgentMeta, activeTopic] = [
-    useAgentStore(agentSelectors.currentAgentMeta),
-    useChatStore(topicSelectors.currentActiveTopic),
-  ];
-
-  const enableUserMemories = useUserStore(settingsSelectors.memoryEnabled);
-
-  useEffect(() => {
-    if (!enableUserMemories) {
-      setActiveMemoryContext(undefined);
-      return;
-    }
-
-    setActiveMemoryContext({ agent: currentAgentMeta, topic: activeTopic });
-  }, [activeTopic, currentAgentMeta, enableUserMemories, setActiveMemoryContext]);
-
-  useFetchUserMemory(Boolean(enableUserMemories && context.agentId));
-
   // Get raw dbMessages from ChatStore for this context
   // ConversationStore will parse them internally to generate displayMessages
   const chatKey = useMemo(

package/src/app/[variants]/(main)/group/features/Conversation/Header/ShareButton/index.tsx

@@ -11,8 +11,6 @@ import { DESKTOP_HEADER_ICON_SIZE, MOBILE_HEADER_ICON_SIZE } from '@/const/layou
 import { useWorkspaceModal } from '@/hooks/useWorkspaceModal';
 import { useChatStore } from '@/store/chat';
 
-console.log('ENABLE_TOPIC_LINK_SHARE', ENABLE_TOPIC_LINK_SHARE);
-
 const ShareModal = dynamic(() => import('@/features/ShareModal'));
 const SharePopover = dynamic(() => import('@/features/SharePopover'));
 

package/src/app/[variants]/(main)/group/features/GroupAvatar.tsx

@@ -1,19 +1,27 @@
 'use client';
 
 import isEqual from 'fast-deep-equal';
-import React, { memo } from 'react';
+import { memo } from 'react';
 
-import GroupAvatar from '@/features/GroupAvatar';
+import AgentGroupAvatar from '@/features/AgentGroupAvatar';
 import { useAgentGroupStore } from '@/store/agentGroup';
 import { agentGroupSelectors } from '@/store/agentGroup/selectors';
 
-const SupervisorAvatar = memo<{ size?: number }>(({ size = 28 }) => {
-  const memberAvatars = useAgentGroupStore(
-    (s) => agentGroupSelectors.currentGroupMemberAvatars(s),
-    isEqual,
-  );
+/**
+ * Connected AgentGroupAvatar that reads from agentGroup store
+ */
+const CurrentAgentGroupAvatar = memo<{ size?: number }>(({ size = 28 }) => {
+  const groupMeta = useAgentGroupStore(agentGroupSelectors.currentGroupMeta, isEqual);
+  const memberAvatars = useAgentGroupStore(agentGroupSelectors.currentGroupMemberAvatars, isEqual);
 
-  return <GroupAvatar avatars={memberAvatars} size={size} />;
+  return (
+    <AgentGroupAvatar
+      avatar={groupMeta.avatar}
+      backgroundColor={groupMeta.backgroundColor}
+      memberAvatars={memberAvatars}
+      size={size}
+    />
+  );
 });
 
-export default SupervisorAvatar;
+export default CurrentAgentGroupAvatar;

package/src/app/[variants]/(main)/group/profile/features/AgentBuilder/TopicSelector.tsx

@@ -5,6 +5,7 @@ import { useTranslation } from 'react-i18next';
 
 import { DESKTOP_HEADER_ICON_SIZE } from '@/const/layoutTokens';
 import NavHeader from '@/features/NavHeader';
+import { useQueryState } from '@/hooks/useQueryParam';
 import { useChatStore } from '@/store/chat';
 import { topicSelectors } from '@/store/chat/slices/topic/selectors';
 
@@ -18,16 +19,18 @@ const TopicSelector = memo<TopicSelectorProps>(({ agentId }) => {
   // Fetch topics for the group agent builder
   useChatStore((s) => s.useFetchTopics)(true, { agentId });
 
-  // Use activeTopicId from chatStore (synced with URL query 'bt' via ProfileHydration)
-  const [activeTopicId, switchTopic] = useChatStore((s) => [s.activeTopicId, s.switchTopic]);
+  // Use activeTopicId from chatStore (synced from URL query 'bt' via ProfileHydration)
+  const activeTopicId = useChatStore((s) => s.activeTopicId);
   const topics = useChatStore((s) => topicSelectors.getTopicsByAgentId(agentId)(s));
 
-  // Switch topic - ProfileHydration handles URL sync automatically
+  // Directly update URL query 'bt' to switch topic in profile page
+  const [, setBuilderTopicId] = useQueryState('bt');
+
   const handleSwitchTopic = useCallback(
     (topicId?: string) => {
-      switchTopic(topicId);
+      setBuilderTopicId(topicId ?? null);
     },
-    [switchTopic],
+    [setBuilderTopicId],
   );
 
   // Find active topic from the agent's topics list directly

package/src/app/[variants]/(main)/group/profile/features/Header/ChromeTabs/index.tsx

@@ -3,7 +3,7 @@
 import { Avatar, Flexbox } from '@lobehub/ui';
 import { createStaticStyles, cx } from 'antd-style';
 import { Plus } from 'lucide-react';
-import { ReactNode, memo } from 'react';
+import { ReactNode, memo, useEffect, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
 
 const styles = createStaticStyles(({ css, cssVar: cv }) => ({
@@ -109,15 +109,33 @@ interface ChromeTabsProps {
 
 const ChromeTabs = memo<ChromeTabsProps>(({ items, activeId, onChange, onAdd }) => {
   const { t } = useTranslation('chat');
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (!containerRef.current || !activeId) return;
+
+    const activeTab = containerRef.current.querySelector(`[data-tab-id="${activeId}"]`);
+    if (!activeTab) return;
+
+    const containerRect = containerRef.current.getBoundingClientRect();
+    const tabRect = activeTab.getBoundingClientRect();
+
+    const isVisible = tabRect.left >= containerRect.left && tabRect.right <= containerRect.right;
+
+    if (!isVisible) {
+      activeTab.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'nearest' });
+    }
+  }, [activeId]);
 
   return (
-    <div className={styles.container}>
+    <div className={styles.container} ref={containerRef}>
       {items.map((item) => {
         const isActive = item.id === activeId;
 
         return (
           <div
             className={cx(styles.tab, isActive && styles.tabActive)}
+            data-tab-id={item.id}
             key={item.id}
             onClick={() => onChange(item.id)}
           >

package/src/app/[variants]/(main)/group/profile/features/MemberProfile/AgentTool.tsx

@@ -5,12 +5,14 @@ import { useGroupProfileStore } from '@/store/groupProfile';
 
 /**
  * AgentTool for group profile editor
- * - Uses default settings (no web browsing, no filterAvailableInWeb, uses metaList)
+ * - showWebBrowsing: Group member profile supports web browsing toggle
+ * - filterAvailableInWeb: Filter out desktop-only tools in web version
+ * - useAllMetaList: Use allMetaList to include hidden tools
  * - Passes agentId from group profile store to display the correct member's plugins
  */
 const AgentTool = () => {
   const agentId = useGroupProfileStore((s) => s.activeTabId);
-  return <SharedAgentTool agentId={agentId} />;
+  return <SharedAgentTool agentId={agentId} filterAvailableInWeb showWebBrowsing useAllMetaList />;
 };
 
 export default AgentTool;

package/src/app/[variants]/(main)/group/profile/features/ProfileHydration.tsx

@@ -2,7 +2,7 @@
 
 import { useEditor, useEditorState } from '@lobehub/editor/react';
 import { useUnmount } from 'ahooks';
-import { memo, useEffect, useRef } from 'react';
+import { memo, useEffect } from 'react';
 import { createStoreUpdater } from 'zustand-utils';
 
 import { useRegisterFilesHotkeys, useSaveDocumentHotkey } from '@/hooks/useHotkeys';
@@ -25,34 +25,15 @@ const ProfileHydration = memo(() => {
   const [activeTabId] = useQueryState('tab', parseAsString.withDefault('group'));
   storeUpdater('activeTabId', activeTabId);
 
-  // Bidirectional sync between URL query 'bt' and chatStore.activeTopicId
-  const [builderTopicId, setBuilderTopicId] = useQueryState('bt');
-  const activeTopicId = useChatStore((s) => s.activeTopicId);
+  // Sync URL query 'bt' → chatStore.activeTopicId (one-way only)
+  // Store → URL sync is handled directly by TopicSelector using setBuilderTopicId
+  const [builderTopicId] = useQueryState('bt');
 
-  // Track if the change came from URL to prevent sync loops
-  const isUrlChangeRef = useRef(false);
-
-  // Sync URL → Store (when URL changes)
   useEffect(() => {
     const urlTopicId = builderTopicId ?? undefined;
-    if (urlTopicId !== activeTopicId) {
-      isUrlChangeRef.current = true;
-      useChatStore.setState({ activeTopicId: urlTopicId });
-    }
+    useChatStore.setState({ activeTopicId: urlTopicId });
   }, [builderTopicId]);
 
-  // Sync Store → URL (when store changes, but not from URL)
-  useEffect(() => {
-    if (isUrlChangeRef.current) {
-      isUrlChangeRef.current = false;
-      return;
-    }
-    const urlTopicId = builderTopicId ?? undefined;
-    if (activeTopicId !== urlTopicId) {
-      setBuilderTopicId(activeTopicId ?? null);
-    }
-  }, [activeTopicId]);
-
   // Register hotkeys
   useRegisterFilesHotkeys();
   useSaveDocumentHotkey(flushSave);
@@ -65,7 +46,6 @@ const ProfileHydration = memo(() => {
       editorState: undefined,
       saveStateMap: {},
     });
-    useChatStore.setState({ activeTopicId: undefined });
   });
 
   return null;

package/src/features/AgentGroupAvatar/index.tsx

@@ -0,0 +1,38 @@
+'use client';
+
+import { Avatar } from '@lobehub/ui';
+import { memo } from 'react';
+
+import GroupAvatar from '@/features/GroupAvatar';
+
+export interface AgentGroupAvatarProps {
+  /**
+   * Custom avatar for the group (emoji or url)
+   */
+  avatar?: string;
+  /**
+   * Background color for custom avatar
+   */
+  backgroundColor?: string;
+  /**
+   * Member avatars to display when no custom avatar
+   */
+  memberAvatars?: { avatar?: string; background?: string }[];
+  /**
+   * Avatar size
+   */
+  size?: number;
+}
+
+const AgentGroupAvatar = memo<AgentGroupAvatarProps>(
+  ({ avatar, backgroundColor, memberAvatars = [], size = 28 }) => {
+    // If group has custom avatar, show it; otherwise show member avatars composition
+    if (avatar) {
+      return <Avatar avatar={avatar} background={backgroundColor} shape="square" size={size} />;
+    }
+
+    return <GroupAvatar avatars={memberAvatars} size={size} />;
+  },
+);
+
+export default AgentGroupAvatar;

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

@@ -6,9 +6,9 @@ import { type MouseEventHandler, memo, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { MESSAGE_ACTION_BAR_PORTAL_ATTRIBUTES } from '@/const/messageActionPortal';
+import AgentGroupAvatar from '@/features/AgentGroupAvatar';
 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';
 
@@ -90,7 +90,13 @@ const GroupMessage = memo<GroupMessageProps>(({ id, index, disableEditing, isLat
         </>
       }
       avatar={{ ...avatar, title: groupMeta.title }}
-      customAvatarRender={() => <GroupAvatar avatars={memberAvatars} />}
+      customAvatarRender={() => (
+        <AgentGroupAvatar
+          avatar={groupMeta.avatar}
+          backgroundColor={groupMeta.backgroundColor}
+          memberAvatars={memberAvatars}
+        />
+      )}
       newScreen={newScreen}
       onMouseEnter={onMouseEnter}
       placement={'left'}

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

@@ -30,12 +30,11 @@ export const useMarkdown = (id: string): Partial<MarkdownProps> => {
     () =>
       ({
         components: Object.fromEntries(
-          // @ts-expect-error
           markdownElements.map((element) => {
             const Component = element.Component;
             return [element.tag, (props: any) => <Component {...props} id={id} />];
           }),
-        ),
+        ) as any,
         customRender: (dom: ReactNode, { text }: { text: string }) => {
           if (text.length > 30_000) return <ContentPreview content={text} id={id} />;
           return dom;