@lobehub/lobehub 2.0.0-next.273 → 2.0.0-next.275

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

@@ -1,10 +1,12 @@
 'use client';
 
 import type { AgentItem } from '@lobechat/types';
-import { Avatar, Center, Flexbox, Popover, Text, Tooltip } from '@lobehub/ui';
+import { ActionIcon, Avatar, Center, Flexbox, Popover, Text, Tooltip } from '@lobehub/ui';
 import { createStaticStyles, cssVar } from 'antd-style';
+import { Settings } from 'lucide-react';
 import { type PropsWithChildren, memo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
+import { useNavigate } from 'react-router-dom';
 
 import { DEFAULT_AVATAR } from '@/const/meta';
 import ModelSelect from '@/features/ModelSelect';
@@ -73,6 +75,7 @@ interface AgentProfilePopupProps extends PropsWithChildren {
 
 const AgentProfilePopup = memo<AgentProfilePopupProps>(({ agent, groupId, children }) => {
   const { t } = useTranslation('chat');
+  const navigate = useNavigate();
   const [open, setOpen] = useState(false);
   const [loading, setLoading] = useState(false);
 
@@ -90,10 +93,10 @@ const AgentProfilePopup = memo<AgentProfilePopupProps>(({ agent, groupId, childr
     }
   };
 
-  // const handleChat = () => {
-  //   setOpen(false);
-  //   onChat();
-  // };
+  const handleSettings = () => {
+    setOpen(false);
+    navigate(`/group/${groupId}/profile?tab=${agent.id}`);
+  };
 
   const content = (
     <Flexbox className={styles.container}>
@@ -127,9 +130,26 @@ const AgentProfilePopup = memo<AgentProfilePopupProps>(({ agent, groupId, childr
           }}
         />
         <Flexbox gap={2}>
-          <Text className={styles.name} ellipsis>
-            {agent.title || t('defaultSession', { ns: 'common' })}
-          </Text>
+          <Flexbox align={'center'} horizontal justify={'space-between'}>
+            <Text className={styles.name} ellipsis>
+              {agent.title || t('defaultSession', { ns: 'common' })}
+            </Text>
+
+            {/* Settings Button */}
+            <Flexbox
+              align="center"
+              horizontal
+              justify="flex-end"
+              style={{ paddingBlockStart: 0 }}
+            >
+              <ActionIcon
+                icon={Settings}
+                onClick={handleSettings}
+                size="small"
+                title={t('groupSidebar.agentProfile.settings')}
+              />
+            </Flexbox>
+          </Flexbox>
           {agent.description && (
             <Tooltip title={agent.description}>
               <Text className={styles.description} ellipsis={{ rows: 2 }}>
@@ -149,18 +169,6 @@ const AgentProfilePopup = memo<AgentProfilePopupProps>(({ agent, groupId, childr
           value={{ model: agent.model!, provider: agent.provider! }}
         />
       </Flexbox>
-
-      {/* Actions */}
-      {/*<Flexbox className={styles.section} style={{ paddingBlockStart: 0 }}>*/}
-      {/*  <Button*/}
-      {/*    className={styles.chatButton}*/}
-      {/*    icon={<MessageSquare size={14} />}*/}
-      {/*    onClick={handleChat}*/}
-      {/*    type="primary"*/}
-      {/*  >*/}
-      {/*    {t('groupSidebar.agentProfile.chat')}*/}
-      {/*  </Button>*/}
-      {/*</Flexbox>*/}
     </Flexbox>
   );
 
@@ -171,7 +179,7 @@ const AgentProfilePopup = memo<AgentProfilePopupProps>(({ agent, groupId, childr
       open={open}
       placement="right"
       styles={{
-        content: { overflow: 'hidden', padding: 0 },
+        content: { borderRadius: 12, overflow: 'hidden', padding: 0 },
       }}
       trigger="click"
     >

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

@@ -109,6 +109,7 @@ const GroupMember = memo<GroupMemberProps>(({ addModalOpen, onAddModalOpenChange
                   }
                   avatar={item.avatar || DEFAULT_AVATAR}
                   background={item.backgroundColor ?? undefined}
+                  isExternal={!item.virtual}
                   title={item.title || t('defaultSession', { ns: 'common' })}
                 />
               </div>

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

@@ -1,7 +1,8 @@
 'use client';
 
-import { Avatar } from '@lobehub/ui';
+import { Avatar, Flexbox, Tag } from '@lobehub/ui';
 import { type ReactNode, memo } from 'react';
+import { useTranslation } from 'react-i18next';
 
 import { DEFAULT_AVATAR } from '@/const/meta';
 import NavItem from '@/features/NavPanel/components/NavItem';
@@ -10,26 +11,42 @@ interface GroupMemberItemProps {
   actions?: ReactNode;
   avatar?: string;
   background?: string;
+  isExternal?: boolean;
   onClick?: () => void;
   title: string;
 }
 
-const GroupMemberItem = memo<GroupMemberItemProps>(({ title, avatar, background, actions }) => {
-  return (
-    <NavItem
-      actions={actions}
-      icon={
-        <Avatar
-          avatar={avatar || DEFAULT_AVATAR}
-          background={background}
-          emojiScaleWithBackground
-          size={24}
-          style={{ flex: 'none' }}
-        />
-      }
-      title={title}
-    />
-  );
-});
+const GroupMemberItem = memo<GroupMemberItemProps>(
+  ({ title, avatar, background, actions, isExternal }) => {
+    const { t } = useTranslation('chat');
+
+    return (
+      <NavItem
+        actions={actions}
+        icon={
+          <Avatar
+            avatar={avatar || DEFAULT_AVATAR}
+            background={background}
+            emojiScaleWithBackground
+            size={24}
+            style={{ flex: 'none' }}
+          />
+        }
+        title={
+          <Flexbox align="center" gap={4} horizontal>
+            <span style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
+              {title}
+            </span>
+            {isExternal && (
+              <Tag size="small" style={{ flexShrink: 0 }}>
+                {t('group.profile.external')}
+              </Tag>
+            )}
+          </Flexbox>
+        }
+      />
+    );
+  },
+);
 
 export default GroupMemberItem;

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

@@ -4,12 +4,9 @@ import { ActionIcon } from '@lobehub/ui';
 import { MessageSquarePlusIcon } from 'lucide-react';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
-import urlJoin from 'url-join';
 
 import { DESKTOP_HEADER_ICON_SIZE } from '@/const/layoutTokens';
-import { useQueryRoute } from '@/hooks/useQueryRoute';
 import { useAgentGroupStore } from '@/store/agentGroup';
-import { useChatStore } from '@/store/chat';
 import { useUserStore } from '@/store/user';
 import { settingsSelectors } from '@/store/user/selectors';
 import { HotkeyEnum } from '@/types/hotkey';
@@ -17,17 +14,12 @@ import { HotkeyEnum } from '@/types/hotkey';
 const AddTopicButon = memo(() => {
   const { t } = useTranslation('topic');
   const hotkey = useUserStore(settingsSelectors.getHotkeyById(HotkeyEnum.SaveTopic));
-  const activeGroupId = useAgentGroupStore((s) => s.activeGroupId);
-  const router = useQueryRoute();
+  const switchToNewTopic = useAgentGroupStore((s) => s.switchToNewTopic);
 
   return (
     <ActionIcon
       icon={MessageSquarePlusIcon}
-      onClick={() => {
-        if (!activeGroupId) return;
-        useChatStore.setState({ activeTopicId: undefined });
-        router.push(urlJoin('/group', activeGroupId), { query: { thread: null, topic: null } });
-      }}
+      onClick={switchToNewTopic}
       size={DESKTOP_HEADER_ICON_SIZE}
       title={t('actions.addNewTopic')}
       tooltipProps={{

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

@@ -2,7 +2,7 @@
 
 import { Flexbox } from '@lobehub/ui';
 import { BotPromptIcon } from '@lobehub/ui/icons';
-import { SearchIcon } from 'lucide-react';
+import { MessageSquarePlusIcon, SearchIcon } from 'lucide-react';
 import { usePathname } from 'next/navigation';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -11,12 +11,14 @@ import urlJoin from 'url-join';
 
 import NavItem from '@/features/NavPanel/components/NavItem';
 import { useQueryRoute } from '@/hooks/useQueryRoute';
+import { useAgentGroupStore } from '@/store/agentGroup';
 import { useChatStore } from '@/store/chat';
 import { useGlobalStore } from '@/store/global';
 import { featureFlagsSelectors, useServerConfigStore } from '@/store/serverConfig';
 
 const Nav = memo(() => {
   const { t } = useTranslation('chat');
+  const { t: tTopic } = useTranslation('topic');
   const params = useParams();
   const groupId = params.gid;
   const pathname = usePathname();
@@ -25,15 +27,21 @@ const Nav = memo(() => {
   const { isAgentEditable } = useServerConfigStore(featureFlagsSelectors);
   const toggleCommandMenu = useGlobalStore((s) => s.toggleCommandMenu);
   const switchTopic = useChatStore((s) => s.switchTopic);
+  const switchToNewTopic = useAgentGroupStore((s) => s.switchToNewTopic);
 
   return (
     <Flexbox gap={1} paddingInline={4}>
+      <NavItem
+        icon={MessageSquarePlusIcon}
+        onClick={switchToNewTopic}
+        title={tTopic('actions.addNewTopic')}
+      />
       {isAgentEditable && (
         <NavItem
           active={isProfileActive}
           icon={BotPromptIcon}
           onClick={() => {
-            switchTopic(undefined, true);
+            switchTopic(null, { skipRefreshMessage: true });
             router.push(urlJoin('/group', groupId!, 'profile'));
           }}
           title={t('tab.groupProfile')}

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

@@ -4,14 +4,13 @@ import { type PropsWithChildren, memo } from 'react';
 
 import SideBarHeaderLayout from '@/features/NavPanel/SideBarHeaderLayout';
 
-import AddTopicButon from './AddTopicButon';
 import Agent from './Agent';
 import Nav from './Nav';
 
 const HeaderInfo = memo<PropsWithChildren>(() => {
   return (
     <>
-      <SideBarHeaderLayout left={<Agent />} right={<AddTopicButon />} />
+      <SideBarHeaderLayout left={<Agent />} />
       <Nav />
     </>
   );

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

@@ -16,6 +16,7 @@ interface AgentBuilderProviderProps {
  * Uses 'group_agent_builder' scope with groupId to isolate messages per group
  */
 const AgentBuilderProvider = memo<AgentBuilderProviderProps>(({ agentId, children }) => {
+  // Use activeTopicId from chatStore (synced with URL query 'bt' via ProfileHydration)
   const activeTopicId = useChatStore((s) => s.activeTopicId);
 
   // Build conversation context for group agent builder

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

@@ -1,6 +1,6 @@
 import { ActionIcon, DropdownMenu, type DropdownMenuCheckboxItem, Tag } from '@lobehub/ui';
 import { Clock3Icon, PlusIcon } from 'lucide-react';
-import { memo, useMemo } from 'react';
+import { memo, useCallback, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { DESKTOP_HEADER_ICON_SIZE } from '@/const/layoutTokens';
@@ -18,11 +18,17 @@ const TopicSelector = memo<TopicSelectorProps>(({ agentId }) => {
   // Fetch topics for the group agent builder
   useChatStore((s) => s.useFetchTopics)(true, { agentId });
 
-  const [activeTopicId, switchTopic, topics] = useChatStore((s) => [
-    s.activeTopicId,
-    s.switchTopic,
-    topicSelectors.getTopicsByAgentId(agentId)(s),
-  ]);
+  // Use activeTopicId from chatStore (synced with URL query 'bt' via ProfileHydration)
+  const [activeTopicId, switchTopic] = useChatStore((s) => [s.activeTopicId, s.switchTopic]);
+  const topics = useChatStore((s) => topicSelectors.getTopicsByAgentId(agentId)(s));
+
+  // Switch topic - ProfileHydration handles URL sync automatically
+  const handleSwitchTopic = useCallback(
+    (topicId?: string) => {
+      switchTopic(topicId);
+    },
+    [switchTopic],
+  );
 
   // Find active topic from the agent's topics list directly
   const activeTopic = useMemo(
@@ -39,12 +45,12 @@ const TopicSelector = memo<TopicSelectorProps>(({ agentId }) => {
         label: topic.title,
         onCheckedChange: (checked) => {
           if (checked) {
-            switchTopic(topic.id);
+            handleSwitchTopic(topic.id);
           }
         },
         type: 'checkbox',
       })),
-    [topics, switchTopic, activeTopicId],
+    [topics, handleSwitchTopic, activeTopicId],
   );
   const isEmpty = !topics || topics.length === 0;
 
@@ -55,7 +61,7 @@ const TopicSelector = memo<TopicSelectorProps>(({ agentId }) => {
         <>
           <ActionIcon
             icon={PlusIcon}
-            onClick={() => switchTopic()}
+            onClick={() => handleSwitchTopic(undefined)}
             size={DESKTOP_HEADER_ICON_SIZE}
             title={t('actions.addNewTopic')}
           />

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

@@ -1,22 +1,27 @@
 import { BUILTIN_AGENT_SLUGS } from '@lobechat/builtin-agents';
 import { DraggablePanel } from '@lobehub/ui';
 import { cssVar } from 'antd-style';
-import { memo, useState } from 'react';
+import { memo } from 'react';
 
 import Loading from '@/components/Loading/BrandTextLoading';
 import { useAgentStore } from '@/store/agent';
 import { builtinAgentSelectors } from '@/store/agent/selectors';
+import { useGlobalStore } from '@/store/global';
+import { systemStatusSelectors } from '@/store/global/selectors';
+import { useGroupProfileStore } from '@/store/groupProfile';
 
-import { useProfileStore } from '../store';
 import AgentBuilderConversation from './AgentBuilderConversation';
 import AgentBuilderProvider from './AgentBuilderProvider';
 
 const AgentBuilder = memo(() => {
-  const chatPanelExpanded = useProfileStore((s) => s.chatPanelExpanded);
-  const setChatPanelExpanded = useProfileStore((s) => s.setChatPanelExpanded);
+  const chatPanelExpanded = useGroupProfileStore((s) => s.chatPanelExpanded);
+  const setChatPanelExpanded = useGroupProfileStore((s) => s.setChatPanelExpanded);
   const groupAgentBuilderId = useAgentStore(builtinAgentSelectors.groupAgentBuilderId);
 
-  const [width, setWidth] = useState<string | number>(360);
+  const [width, updateSystemStatus] = useGlobalStore((s) => [
+    systemStatusSelectors.groupAgentBuilderPanelWidth(s),
+    s.updateSystemStatus,
+  ]);
 
   const useInitBuiltinAgent = useAgentStore((s) => s.useInitBuiltinAgent);
   useInitBuiltinAgent(BUILTIN_AGENT_SLUGS.groupAgentBuilder);
@@ -31,7 +36,8 @@ const AgentBuilder = memo(() => {
       onExpandChange={setChatPanelExpanded}
       onSizeChange={(_, size) => {
         if (size?.width) {
-          setWidth(size.width);
+          const w = typeof size.width === 'string' ? Number.parseInt(size.width) : size.width;
+          if (!!w) updateSystemStatus({ groupAgentBuilderPanelWidth: w });
         }
       }}
       placement="right"

package/src/app/[variants]/(main)/group/profile/features/{ProfileEditor/AgentHeader.tsx → GroupProfile/GroupHeader.tsx}

@@ -1,6 +1,6 @@
 'use client';
 
-import { DEFAULT_AVATAR, EDITOR_DEBOUNCE_TIME } from '@lobechat/const';
+import { EDITOR_DEBOUNCE_TIME } from '@lobechat/const';
 import { Block, Flexbox, Icon, Input, Skeleton, Tooltip } from '@lobehub/ui';
 import { useDebounceFn } from 'ahooks';
 import { message } from 'antd';
@@ -9,11 +9,9 @@ import { PaletteIcon } from 'lucide-react';
 import { Suspense, memo, useCallback, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
-import SupervisorAvatar from '@/app/[variants]/(main)/group/features/GroupAvatar';
+import GroupAvatar from '@/app/[variants]/(main)/group/features/GroupAvatar';
 import EmojiPicker from '@/components/EmojiPicker';
 import BackgroundSwatches from '@/features/AgentSetting/AgentMeta/BackgroundSwatches';
-import { useAgentStore } from '@/store/agent';
-import { agentSelectors } from '@/store/agent/selectors';
 import { useAgentGroupStore } from '@/store/agentGroup';
 import { agentGroupSelectors } from '@/store/agentGroup/selectors';
 import { useFileStore } from '@/store/file';
@@ -22,23 +20,19 @@ import { globalGeneralSelectors } from '@/store/global/selectors';
 
 const MAX_AVATAR_SIZE = 1024 * 1024; // 1MB limit for server actions
 
-const AgentHeader = memo(() => {
+const GroupHeader = memo(() => {
   const { t } = useTranslation(['setting', 'common']);
   const locale = useGlobalStore(globalGeneralSelectors.currentLanguage);
 
-  // Get title from agentGroup store (groupMap.title)
+  // Get group meta from agentGroup store
   const groupMeta = useAgentGroupStore(agentGroupSelectors.currentGroupMeta, isEqual);
   const updateGroupMeta = useAgentGroupStore((s) => s.updateGroupMeta);
 
-  // Get avatar/backgroundColor from supervisor agent (useAgentStore)
-  const agentMeta = useAgentStore(agentSelectors.currentAgentMeta, isEqual);
-  const updateAgentMeta = useAgentStore((s) => s.updateAgentMeta);
-
   // File upload
   const uploadWithProgress = useFileStore((s) => s.uploadWithProgress);
   const [uploading, setUploading] = useState(false);
 
-  // Local state for inputs (to avoid stuttering during typing)
+  // Local state for inputs
   const [localTitle, setLocalTitle] = useState(groupMeta.title || '');
 
   // Sync local state when meta changes from external source
@@ -46,7 +40,7 @@ const AgentHeader = memo(() => {
     setLocalTitle(groupMeta.title || '');
   }, [groupMeta.title]);
 
-  // Debounced save for title - save to group store
+  // Debounced save for title
   const { run: debouncedSaveTitle } = useDebounceFn(
     (value: string) => {
       updateGroupMeta({ title: value });
@@ -54,9 +48,9 @@ const AgentHeader = memo(() => {
     { wait: EDITOR_DEBOUNCE_TIME },
   );
 
-  // Handle avatar change (immediate save) - save to agent store (supervisor agent)
+  // Handle avatar change (immediate save)
   const handleAvatarChange = (emoji: string) => {
-    updateAgentMeta({ avatar: emoji });
+    updateGroupMeta({ avatar: emoji });
   };
 
   // Handle avatar upload
@@ -70,26 +64,25 @@ const AgentHeader = memo(() => {
       setUploading(true);
       try {
         const result = await uploadWithProgress({ file });
-        console.log('result', result);
         if (result?.url) {
-          updateAgentMeta({ avatar: result.url });
+          updateGroupMeta({ avatar: result.url });
         }
       } finally {
         setUploading(false);
       }
     },
-    [uploadWithProgress, updateAgentMeta, t],
+    [uploadWithProgress, updateGroupMeta, t],
   );
 
   // Handle avatar delete
   const handleAvatarDelete = useCallback(() => {
-    updateAgentMeta({ avatar: undefined });
-  }, [updateAgentMeta]);
+    updateGroupMeta({ avatar: undefined });
+  }, [updateGroupMeta]);
 
-  // Handle background color change (immediate save) - save to agent store (supervisor agent)
+  // Handle background color change
   const handleBackgroundColorChange = (color?: string) => {
     if (color !== undefined) {
-      updateAgentMeta({ backgroundColor: color });
+      updateGroupMeta({ backgroundColor: color });
     }
   };
 
@@ -106,20 +99,20 @@ const AgentHeader = memo(() => {
       }}
     >
       <EmojiPicker
-        allowDelete={!!agentMeta.avatar}
+        allowDelete={!!groupMeta.avatar}
         allowUpload
         background={
-          agentMeta.backgroundColor && agentMeta.backgroundColor !== 'rgba(0,0,0,0)'
-            ? agentMeta.backgroundColor
+          groupMeta.backgroundColor && groupMeta.backgroundColor !== 'rgba(0,0,0,0)'
+            ? groupMeta.backgroundColor
             : undefined
         }
         customRender={
-          agentMeta.avatar && agentMeta.avatar !== DEFAULT_AVATAR
+          groupMeta.avatar
             ? undefined
             : () => {
                 return (
                   <Block clickable height={72} width={72}>
-                    <SupervisorAvatar size={72} />
+                    <GroupAvatar size={72} />
                   </Block>
                 );
               }
@@ -146,7 +139,7 @@ const AgentHeader = memo(() => {
                     onChange={handleBackgroundColorChange}
                     shape={'square'}
                     size={38}
-                    value={agentMeta.backgroundColor}
+                    value={groupMeta.backgroundColor}
                   />
                 </Suspense>
               </Flexbox>
@@ -164,7 +157,7 @@ const AgentHeader = memo(() => {
         }}
         shape={'square'}
         size={72}
-        value={agentMeta.avatar}
+        value={groupMeta.avatar}
       />
       <Input
         onChange={(e) => {
@@ -185,4 +178,4 @@ const AgentHeader = memo(() => {
   );
 });
 
-export default AgentHeader;
+export default GroupHeader;

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

@@ -0,0 +1,96 @@
+'use client';
+
+import { Button, Flexbox } from '@lobehub/ui';
+import { Divider } from 'antd';
+import { PlayIcon } from 'lucide-react';
+import { memo, useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+import urlJoin from 'url-join';
+
+import { EditorCanvas } from '@/features/EditorCanvas';
+import { useQueryRoute } from '@/hooks/useQueryRoute';
+import { useAgentGroupStore } from '@/store/agentGroup';
+import { agentGroupSelectors } from '@/store/agentGroup/selectors';
+import { useGroupProfileStore } from '@/store/groupProfile';
+
+import AutoSaveHint from '../Header/AutoSaveHint';
+import GroupHeader from './GroupHeader';
+
+const GroupProfile = memo(() => {
+  const { t } = useTranslation(['setting', 'chat']);
+  const groupId = useAgentGroupStore(agentGroupSelectors.activeGroupId);
+  const currentGroup = useAgentGroupStore(agentGroupSelectors.currentGroup);
+  const updateGroup = useAgentGroupStore((s) => s.updateGroup);
+  const router = useQueryRoute();
+
+  const editor = useGroupProfileStore((s) => s.editor);
+  const handleContentChange = useGroupProfileStore((s) => s.handleContentChange);
+
+  // Create save callback that captures latest groupId
+  const saveContent = useCallback(
+    async (payload: { content: string; editorData: Record<string, any> }) => {
+      if (!groupId) return;
+      await updateGroup(groupId, {
+        content: payload.content,
+        editorData: payload.editorData,
+      });
+    },
+    [updateGroup, groupId],
+  );
+
+  const onContentChange = useCallback(() => {
+    handleContentChange(saveContent);
+  }, [handleContentChange, saveContent]);
+
+  return (
+    <>
+      <Flexbox
+        onClick={(e) => {
+          e.stopPropagation();
+        }}
+        style={{ cursor: 'default', marginBottom: 12 }}
+      >
+        <Flexbox height={66} width={'100%'}>
+          <Flexbox paddingBlock={12}>
+            <AutoSaveHint />
+          </Flexbox>
+        </Flexbox>
+        {/* Header: Group Avatar + Title */}
+        <GroupHeader />
+        {/* Start Conversation Button */}
+        <Flexbox
+          align={'center'}
+          gap={8}
+          horizontal
+          justify={'flex-start'}
+          style={{ marginTop: 16 }}
+        >
+          <Button
+            icon={PlayIcon}
+            onClick={() => {
+              if (!groupId) return;
+              router.push(urlJoin('/group', groupId));
+            }}
+            type={'primary'}
+          >
+            {t('startConversation')}
+          </Button>
+        </Flexbox>
+      </Flexbox>
+      <Divider />
+      {/* Group Content Editor */}
+      <EditorCanvas
+        editor={editor}
+        editorData={{
+          content: currentGroup?.content ?? undefined,
+          editorData: currentGroup?.editorData,
+        }}
+        key={groupId}
+        onContentChange={onContentChange}
+        placeholder={t('group.profile.contentPlaceholder', { ns: 'chat' })}
+      />
+    </>
+  );
+});
+
+export default GroupProfile;

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

@@ -3,12 +3,11 @@ import { BotMessageSquareIcon } from 'lucide-react';
 import { memo } from 'react';
 
 import { DESKTOP_HEADER_ICON_SIZE } from '@/const/layoutTokens';
-
-import { useProfileStore } from '../store';
+import { useGroupProfileStore } from '@/store/groupProfile';
 
 const AgentBuilderToggle = memo(() => {
-  const chatPanelExpanded = useProfileStore((s) => s.chatPanelExpanded);
-  const setChatPanelExpanded = useProfileStore((s) => s.setChatPanelExpanded);
+  const chatPanelExpanded = useGroupProfileStore((s) => s.chatPanelExpanded);
+  const setChatPanelExpanded = useGroupProfileStore((s) => s.setChatPanelExpanded);
 
   return (
     <ActionIcon

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

@@ -3,15 +3,19 @@
 import { memo } from 'react';
 
 import AutoSaveHintBase from '@/components/Editor/AutoSaveHint';
+import { useGroupProfileStore } from '@/store/groupProfile';
+import { selectors } from '@/store/groupProfile/selectors';
 
-/**
- * AutoSaveHint - Save status indicator for group settings
- * TODO: Add saveStatus and lastUpdatedTime to agentGroupStore when needed
- */
 const AutoSaveHint = memo(() => {
-  // Group profile currently doesn't track save status
-  // Return idle state for now
-  return <AutoSaveHintBase lastUpdatedTime={null} saveStatus={'idle'} />;
+  const activeTabId = useGroupProfileStore((s) => s.activeTabId);
+  const saveState = useGroupProfileStore(selectors.getSaveState(activeTabId));
+
+  return (
+    <AutoSaveHintBase
+      lastUpdatedTime={saveState.lastUpdatedTime}
+      saveStatus={saveState.saveStatus}
+    />
+  );
 });
 
 export default AutoSaveHint;