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

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

@@ -0,0 +1,147 @@
+'use client';
+
+import { Avatar, Flexbox } from '@lobehub/ui';
+import { createStaticStyles, cx } from 'antd-style';
+import { Plus } from 'lucide-react';
+import { ReactNode, memo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+const styles = createStaticStyles(({ css, cssVar: cv }) => ({
+  addButton: css`
+    cursor: pointer;
+
+    display: flex;
+    flex-shrink: 0;
+    align-items: center;
+    justify-content: center;
+
+    width: 28px;
+    height: 28px;
+    border-radius: 6px;
+
+    color: ${cv.colorTextTertiary};
+
+    background: transparent;
+
+    transition: all 0.2s;
+
+    &:hover {
+      color: ${cv.colorTextSecondary};
+      background: ${cv.colorFillTertiary};
+    }
+  `,
+  container: css`
+    display: flex;
+    gap: 2px;
+    align-items: center;
+  `,
+  externalTag: css`
+    flex-shrink: 0;
+
+    padding-block: 1px;
+    padding-inline: 4px;
+    border-radius: 4px;
+
+    font-size: 10px;
+    line-height: 1.2;
+
+    background: ${cv.colorFillSecondary};
+  `,
+  tab: css`
+    cursor: pointer;
+
+    display: flex;
+    flex-shrink: 0;
+    gap: 6px;
+    align-items: center;
+
+    height: 32px;
+    padding-block: 6px;
+    padding-inline: 12px;
+    border-radius: 8px;
+
+    color: ${cv.colorTextTertiary};
+
+    background: transparent;
+
+    transition: all 0.2s;
+
+    &:hover {
+      color: ${cv.colorTextSecondary};
+      background: ${cv.colorFillTertiary};
+    }
+  `,
+  tabActive: css`
+    color: ${cv.colorText};
+    background: ${cv.colorFillTertiary};
+
+    &:hover {
+      color: ${cv.colorText};
+      background: ${cv.colorFillTertiary};
+    }
+  `,
+  tabTitle: css`
+    overflow: hidden;
+
+    max-width: 120px;
+
+    font-size: 13px;
+    line-height: 1.2;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  `,
+}));
+
+export interface ChromeTabItem {
+  avatar?: string;
+  icon?: ReactNode;
+  id: string;
+  isExternal?: boolean;
+  title: string;
+}
+
+interface ChromeTabsProps {
+  activeId: string;
+  items: ChromeTabItem[];
+  onAdd?: () => void;
+  onChange: (id: string) => void;
+}
+
+const ChromeTabs = memo<ChromeTabsProps>(({ items, activeId, onChange, onAdd }) => {
+  const { t } = useTranslation('chat');
+
+  return (
+    <div className={styles.container}>
+      {items.map((item) => {
+        const isActive = item.id === activeId;
+
+        return (
+          <div
+            className={cx(styles.tab, isActive && styles.tabActive)}
+            key={item.id}
+            onClick={() => onChange(item.id)}
+          >
+            <Flexbox align="center" gap={6} horizontal>
+              {item.icon ? (
+                item.icon
+              ) : item.avatar ? (
+                <Avatar avatar={item.avatar} size={18} />
+              ) : null}
+              <span className={styles.tabTitle}>{item.title}</span>
+              {item.isExternal && (
+                <span className={styles.externalTag}>{t('group.profile.external')}</span>
+              )}
+            </Flexbox>
+          </div>
+        );
+      })}
+      {onAdd && (
+        <div className={styles.addButton} onClick={onAdd}>
+          <Plus size={16} />
+        </div>
+      )}
+    </div>
+  );
+});
+
+export default ChromeTabs;

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

@@ -1,23 +1,114 @@
-import { memo } from 'react';
+'use client';
 
-import NavHeader from '@/features/NavHeader';
-import WideScreenButton from '@/features/WideScreenContainer/WideScreenButton';
+import { Flexbox } from '@lobehub/ui';
+import { createStyles } from 'antd-style';
+import { Crown, Users } from 'lucide-react';
+import { memo, useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import AddGroupMemberModal from '@/app/[variants]/(main)/group/_layout/Sidebar/AddGroupMemberModal';
+import { parseAsString, useQueryState } from '@/hooks/useQueryParam';
+import { useAgentGroupStore } from '@/store/agentGroup';
+import { agentGroupSelectors } from '@/store/agentGroup/selectors';
 
 import AgentBuilderToggle from './AgentBuilderToggle';
-import AutoSaveHint from './AutoSaveHint';
+import ChromeTabs, { type ChromeTabItem } from './ChromeTabs';
+
+const useStyles = createStyles(({ css, token }) => ({
+  header: css`
+    overflow: hidden;
+    flex: none;
+
+    width: 100%;
+    height: 44px;
+    padding-block: 8px;
+    padding-inline: 12px;
+    border-block-end: 1px solid ${token.colorBorderSecondary};
+  `,
+  tabsWrapper: css`
+    scrollbar-width: none;
+    overflow-x: auto;
+    flex: 1;
+    min-width: 0;
+
+    &::-webkit-scrollbar {
+      display: none;
+    }
+  `,
+}));
 
 const Header = memo(() => {
+  const { t } = useTranslation('chat');
+  const { styles } = useStyles();
+
+  const [showAddModal, setShowAddModal] = useState(false);
+
+  const members = useAgentGroupStore(agentGroupSelectors.currentGroupAgents);
+  const activeGroupId = useAgentGroupStore(agentGroupSelectors.activeGroupId);
+  const addAgentsToGroup = useAgentGroupStore((s) => s.addAgentsToGroup);
+
+  // Use URL query param for selected tab
+  const [selectedTabId, setSelectedTabId] = useQueryState(
+    'tab',
+    parseAsString.withDefault('group'),
+  );
+
+  const existingMemberIds = useMemo(() => members.map((a) => a.id), [members]);
+
+  const tabItems = useMemo<ChromeTabItem[]>(() => {
+    const items: ChromeTabItem[] = [
+      {
+        icon: <Users size={16} />,
+        id: 'group',
+        title: t('group.profile.groupSettings'),
+      },
+    ];
+
+    // Add agent tabs
+    for (const agent of members) {
+      items.push({
+        avatar: agent.isSupervisor ? undefined : agent.avatar || undefined,
+        icon: agent.isSupervisor ? <Crown size={16} /> : undefined,
+        id: agent.id,
+        isExternal: !agent.isSupervisor && !agent.virtual,
+        title: agent.isSupervisor ? t('group.profile.supervisor') : agent.title || 'Untitled Agent',
+      });
+    }
+
+    return items;
+  }, [members, t]);
+
+  const handleAddMembers = async (agentIds: string[]) => {
+    if (!activeGroupId) return;
+    await addAgentsToGroup(activeGroupId, agentIds);
+    setShowAddModal(false);
+  };
+
   return (
-    <NavHeader
-      left={<AutoSaveHint />}
-      right={
-        <>
-          <WideScreenButton />
+    <>
+      <Flexbox align="center" className={styles.header} horizontal justify="space-between">
+        <div className={styles.tabsWrapper}>
+          <ChromeTabs
+            activeId={selectedTabId}
+            items={tabItems}
+            onAdd={() => setShowAddModal(true)}
+            onChange={setSelectedTabId}
+          />
+        </div>
+        <Flexbox align="center" flex="none" gap={8} horizontal style={{ marginInlineStart: 12 }}>
           <AgentBuilderToggle />
-          {/* TODO: Add GroupPublishButton when group publishing is supported */}
-        </>
-      }
-    />
+        </Flexbox>
+      </Flexbox>
+      {activeGroupId && (
+        <AddGroupMemberModal
+          existingMembers={existingMemberIds}
+          groupId={activeGroupId}
+          onCancel={() => setShowAddModal(false)}
+          onConfirm={handleAddMembers}
+          open={showAddModal}
+        />
+      )}
+    </>
   );
 });
 

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

@@ -0,0 +1,222 @@
+'use client';
+
+import { DEFAULT_AVATAR, EDITOR_DEBOUNCE_TIME } from '@lobechat/const';
+import { Block, Flexbox, Icon, Input, Skeleton, Tooltip } from '@lobehub/ui';
+import { useDebounceFn } from 'ahooks';
+import { message } from 'antd';
+import isEqual from 'fast-deep-equal';
+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 EmojiPicker from '@/components/EmojiPicker';
+import BackgroundSwatches from '@/features/AgentSetting/AgentMeta/BackgroundSwatches';
+import { useAgentStore } from '@/store/agent';
+import { agentSelectors } from '@/store/agent/selectors';
+import { useFileStore } from '@/store/file';
+import { useGlobalStore } from '@/store/global';
+import { globalGeneralSelectors } from '@/store/global/selectors';
+import { useGroupProfileStore } from '@/store/groupProfile';
+
+const MAX_AVATAR_SIZE = 1024 * 1024; // 1MB limit for server actions
+
+interface AgentHeaderProps {
+  /**
+   * When true, shows fixed title (supervisor) and disables avatar editing
+   */
+  readOnly?: boolean;
+}
+
+const AgentHeader = memo<AgentHeaderProps>(({ readOnly }) => {
+  const { t } = useTranslation(['setting', 'common', 'chat']);
+  const locale = useGlobalStore(globalGeneralSelectors.currentLanguage);
+
+  // Get agentId from profile store
+  const agentId = useGroupProfileStore((s) => s.activeTabId);
+
+  // Get agent meta by agentId
+  const agentMeta = useAgentStore(agentSelectors.getAgentMetaById(agentId), isEqual);
+  const optimisticUpdateAgentMeta = useAgentStore((s) => s.optimisticUpdateAgentMeta);
+
+  // File upload
+  const uploadWithProgress = useFileStore((s) => s.uploadWithProgress);
+  const [uploading, setUploading] = useState(false);
+
+  // Local state for inputs (to avoid stuttering during typing)
+  const [localTitle, setLocalTitle] = useState(agentMeta.title || '');
+
+  // Sync local state when meta changes from external source
+  useEffect(() => {
+    setLocalTitle(agentMeta.title || '');
+  }, [agentMeta.title]);
+
+  // Debounced save for title - save to agent store
+  const { run: debouncedSaveTitle } = useDebounceFn(
+    (value: string) => {
+      optimisticUpdateAgentMeta(agentId, { title: value });
+    },
+    { wait: EDITOR_DEBOUNCE_TIME },
+  );
+
+  // Handle avatar change (immediate save) - save to agent store (supervisor agent)
+  const handleAvatarChange = (emoji: string) => {
+    optimisticUpdateAgentMeta(agentId, { avatar: emoji });
+  };
+
+  // Handle avatar upload
+  const handleAvatarUpload = useCallback(
+    async (file: File) => {
+      if (file.size > MAX_AVATAR_SIZE) {
+        message.error(t('settingAgent.avatar.sizeExceeded', { ns: 'setting' }));
+        return;
+      }
+
+      setUploading(true);
+      try {
+        const result = await uploadWithProgress({ file });
+        console.log('result', result);
+        if (result?.url) {
+          optimisticUpdateAgentMeta(agentId, { avatar: result.url });
+        }
+      } finally {
+        setUploading(false);
+      }
+    },
+    [uploadWithProgress, optimisticUpdateAgentMeta, agentId, t],
+  );
+
+  // Handle avatar delete
+  const handleAvatarDelete = useCallback(() => {
+    optimisticUpdateAgentMeta(agentId, { avatar: undefined });
+  }, [optimisticUpdateAgentMeta, agentId]);
+
+  // Handle background color change (immediate save) - save to agent store (supervisor agent)
+  const handleBackgroundColorChange = (color?: string) => {
+    if (color !== undefined) {
+      optimisticUpdateAgentMeta(agentId, { backgroundColor: color });
+    }
+  };
+
+  // ReadOnly mode: show fixed avatar and title (for supervisor)
+  if (readOnly) {
+    return (
+      <Flexbox
+        gap={16}
+        onClick={(e) => {
+          e.stopPropagation();
+          e.preventDefault();
+        }}
+        paddingBlock={16}
+        style={{
+          cursor: 'default',
+        }}
+      >
+        <Block height={72} width={72}>
+          <SupervisorAvatar size={72} />
+        </Block>
+        <Flexbox
+          style={{
+            fontSize: 36,
+            fontWeight: 600,
+          }}
+        >
+          {t('group.profile.supervisor', { ns: 'chat' })}
+        </Flexbox>
+      </Flexbox>
+    );
+  }
+
+  return (
+    <Flexbox
+      gap={16}
+      onClick={(e) => {
+        e.stopPropagation();
+        e.preventDefault();
+      }}
+      paddingBlock={16}
+      style={{
+        cursor: 'default',
+      }}
+    >
+      <EmojiPicker
+        allowDelete={!!agentMeta.avatar}
+        allowUpload
+        background={
+          agentMeta.backgroundColor && agentMeta.backgroundColor !== 'rgba(0,0,0,0)'
+            ? agentMeta.backgroundColor
+            : undefined
+        }
+        customRender={
+          agentMeta.avatar && agentMeta.avatar !== DEFAULT_AVATAR
+            ? undefined
+            : () => {
+                return (
+                  <Block clickable height={72} width={72}>
+                    <SupervisorAvatar size={72} />
+                  </Block>
+                );
+              }
+        }
+        customTabs={[
+          {
+            label: (
+              <Tooltip title={t('settingAgent.backgroundColor.title', { ns: 'setting' })}>
+                <Icon icon={PaletteIcon} size={{ size: 20, strokeWidth: 2.5 }} />
+              </Tooltip>
+            ),
+            render: () => (
+              <Flexbox padding={8} width={332}>
+                <Suspense
+                  fallback={
+                    <Flexbox gap={8}>
+                      <Skeleton.Button block style={{ height: 38 }} />
+                      <Skeleton.Button block style={{ height: 38 }} />
+                    </Flexbox>
+                  }
+                >
+                  <BackgroundSwatches
+                    gap={8}
+                    onChange={handleBackgroundColorChange}
+                    shape={'square'}
+                    size={38}
+                    value={agentMeta.backgroundColor}
+                  />
+                </Suspense>
+              </Flexbox>
+            ),
+            value: 'background',
+          },
+        ]}
+        loading={uploading}
+        locale={locale}
+        onChange={handleAvatarChange}
+        onDelete={handleAvatarDelete}
+        onUpload={handleAvatarUpload}
+        popupProps={{
+          placement: 'bottomLeft',
+        }}
+        shape={'square'}
+        size={72}
+        value={agentMeta.avatar}
+      />
+      <Input
+        onChange={(e) => {
+          setLocalTitle(e.target.value);
+          debouncedSaveTitle(e.target.value);
+        }}
+        placeholder={t('settingAgent.name.placeholder', { ns: 'setting' })}
+        style={{
+          fontSize: 36,
+          fontWeight: 600,
+          padding: 0,
+          width: '100%',
+        }}
+        value={localTitle}
+        variant={'borderless'}
+      />
+    </Flexbox>
+  );
+});
+
+export default AgentHeader;

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

@@ -0,0 +1,155 @@
+'use client';
+
+import { Alert, Button, Flexbox, Icon } from '@lobehub/ui';
+import { Divider } from 'antd';
+import isEqual from 'fast-deep-equal';
+import { InfoIcon, PlayIcon } from 'lucide-react';
+import React, { memo, useCallback, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import urlJoin from 'url-join';
+
+import { EditorCanvas } from '@/features/EditorCanvas';
+import ModelSelect from '@/features/ModelSelect';
+import { useQueryRoute } from '@/hooks/useQueryRoute';
+import { useAgentStore } from '@/store/agent';
+import { agentByIdSelectors } from '@/store/agent/selectors';
+import { useAgentGroupStore } from '@/store/agentGroup';
+import { agentGroupSelectors } from '@/store/agentGroup/selectors';
+import { useGroupProfileStore } from '@/store/groupProfile';
+
+import AutoSaveHint from '../Header/AutoSaveHint';
+import AgentHeader from './AgentHeader';
+import AgentTool from './AgentTool';
+
+const MemberProfile = memo(() => {
+  const { t } = useTranslation(['setting', 'chat']);
+
+  // Get agentId from profile store (activeTabId is the selected agent ID)
+  const agentId = useGroupProfileStore((s) => s.activeTabId);
+  const editor = useGroupProfileStore((s) => s.editor);
+  const handleContentChange = useGroupProfileStore((s) => s.handleContentChange);
+
+  // Get agent config by agentId
+  const config = useAgentStore(agentByIdSelectors.getAgentConfigById(agentId), isEqual);
+  const updateAgentConfigById = useAgentStore((s) => s.updateAgentConfigById);
+
+  const groupId = useAgentGroupStore(agentGroupSelectors.activeGroupId);
+  const currentGroup = useAgentGroupStore(agentGroupSelectors.currentGroup);
+  const currentGroupAgents = useAgentGroupStore(agentGroupSelectors.currentGroupAgents);
+  const router = useQueryRoute();
+
+  // Check if the current agent is the supervisor
+  const isSupervisor = currentGroup?.supervisorAgentId === agentId;
+
+  // Compute isExternal based on group member properties
+  const isExternal = useMemo(() => {
+    const agent = currentGroupAgents.find((a) => a.id === agentId);
+    return agent ? !agent.isSupervisor && !agent.virtual : false;
+  }, [currentGroupAgents, agentId]);
+
+  // Wrap updateAgentConfigById for saving editor content
+  const updateContent = useCallback(
+    async (payload: { content: string; editorData: Record<string, any> }) => {
+      await updateAgentConfigById(agentId, {
+        editorData: payload.editorData,
+        systemRole: payload.content,
+      });
+    },
+    [updateAgentConfigById, agentId],
+  );
+
+  // Handle editor content change
+  const onContentChange = useCallback(() => {
+    handleContentChange(updateContent);
+  }, [handleContentChange, updateContent]);
+
+  // Wrap updateAgentConfigById for ModelSelect
+  const updateAgentConfig = useCallback(
+    async (config: { model?: string; provider?: string }) => {
+      await updateAgentConfigById(agentId, config);
+    },
+    [updateAgentConfigById, agentId],
+  );
+
+  return (
+    <>
+      {/* External agent warning or AutoSaveHint */}
+      <Flexbox height={66} width={'100%'}>
+        {isExternal && !isSupervisor && (
+          <Alert
+            icon={<Icon icon={InfoIcon} />}
+            style={{ width: '100%' }}
+            title={t('group.profile.externalAgentWarning', { ns: 'chat' })}
+            type="secondary"
+            variant={'outlined'}
+          />
+        )}
+        <Flexbox paddingBlock={12}>
+          <AutoSaveHint />
+        </Flexbox>
+      </Flexbox>
+      <Flexbox
+        onClick={(e) => {
+          e.stopPropagation();
+        }}
+        style={{ cursor: 'default', marginBottom: 12 }}
+      >
+        {/* Header: Avatar + Name */}
+        <AgentHeader readOnly={isSupervisor} />
+        {/* Config Bar: Model Selector */}
+        <Flexbox
+          align={'center'}
+          gap={8}
+          horizontal
+          justify={'flex-start'}
+          style={{ marginBottom: 12 }}
+        >
+          <ModelSelect
+            onChange={updateAgentConfig}
+            value={{
+              model: config?.model,
+              provider: config?.provider,
+            }}
+          />
+        </Flexbox>
+        <AgentTool />
+        <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 />
+      {/* Main Content: Prompt Editor */}
+      <EditorCanvas
+        editor={editor}
+        editorData={{
+          content: config?.systemRole,
+          editorData: config?.editorData,
+        }}
+        key={agentId}
+        onContentChange={onContentChange}
+        placeholder={
+          isSupervisor
+            ? t('group.profile.supervisorPlaceholder', { ns: 'chat' })
+            : t('settingAgent.prompt.placeholder')
+        }
+      />
+    </>
+  );
+});
+
+export default MemberProfile;