@lobehub/lobehub 2.0.0-next.295 → 2.0.0-next.297

package/src/app/[variants]/(main)/community/(detail)/group_agent/features/Details/Members/index.tsx

@@ -0,0 +1,137 @@
+import { Avatar, Flexbox, Tag } from '@lobehub/ui';
+import { Card, Typography } from 'antd';
+import { Crown, User } from 'lucide-react';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { useDetailContext } from '../../DetailProvider';
+
+const { Title, Text, Paragraph } = Typography;
+
+const MemberCard = memo(
+  ({
+    agent,
+    currentVersion,
+  }: {
+    agent: any;
+    currentVersion: any;
+  }) => {
+    const { t } = useTranslation('discover');
+    const isSupervisor = agent.role === 'supervisor';
+
+    return (
+      <Card hoverable>
+        <Flexbox gap={12}>
+          {/* Avatar and Basic Info */}
+          <Flexbox align="center" gap={12} horizontal>
+            <Avatar avatar={currentVersion.avatar || agent.name[0]} size={48} />
+            <Flexbox flex={1} gap={4}>
+              <Flexbox align="center" gap={8} horizontal>
+                <Title level={5} style={{ margin: 0 }}>
+                  {currentVersion.name || agent.name}
+                </Title>
+                {isSupervisor ? (
+                  <Tag color="gold" icon={<Crown size={12} />}>
+                    {t('members.supervisor', { defaultValue: 'Supervisor' })}
+                  </Tag>
+                ) : (
+                  <Tag color="blue" icon={<User size={12} />}>
+                    {t('members.participant', { defaultValue: 'Participant' })}
+                  </Tag>
+                )}
+              </Flexbox>
+              <Text type="secondary">{agent.identifier}</Text>
+            </Flexbox>
+          </Flexbox>
+
+          {/* Description */}
+          {currentVersion.description && (
+            <Paragraph ellipsis={{ rows: 2 }} style={{ margin: 0 }} type="secondary">
+              {currentVersion.description}
+            </Paragraph>
+          )}
+
+          {/* System Role (if available) */}
+          {currentVersion.config?.systemRole && (
+            <Flexbox gap={4}>
+              <Text strong>{t('members.systemRole', { defaultValue: 'System Role' })}:</Text>
+              <Paragraph ellipsis={{ rows: 3 }} style={{ margin: 0 }} type="secondary">
+                {currentVersion.config.systemRole}
+              </Paragraph>
+            </Flexbox>
+          )}
+
+          {/* Metadata */}
+          <Flexbox gap={8} horizontal wrap="wrap">
+            {currentVersion.version && (
+              <Text type="secondary">
+                {t('members.version', { defaultValue: 'Version' })}: {currentVersion.version}
+              </Text>
+            )}
+            {currentVersion.tokenUsage !== undefined && (
+              <Text type="secondary">
+                {t('members.tokenUsage', { defaultValue: 'Token Usage' })}:{' '}
+                {currentVersion.tokenUsage}
+              </Text>
+            )}
+          </Flexbox>
+
+          {/* URL */}
+          {currentVersion.url && (
+            <Text
+              copyable={{ text: currentVersion.url }}
+              ellipsis
+              style={{ fontSize: 12 }}
+              type="secondary"
+            >
+              {currentVersion.url}
+            </Text>
+          )}
+        </Flexbox>
+      </Card>
+    );
+  },
+);
+
+MemberCard.displayName = 'MemberCard';
+
+const Members = memo(() => {
+  const { t } = useTranslation('discover');
+  const { memberAgents = [] } = useDetailContext();
+
+  // Sort: supervisors first, then by displayOrder
+  const sortedMembers = [...(memberAgents || [])].sort((a: any, b: any) => {
+    const aRole = a.role || a.agent?.role;
+    const bRole = b.role || b.agent?.role;
+    if (aRole === 'supervisor' && bRole !== 'supervisor') return -1;
+    if (aRole !== 'supervisor' && bRole === 'supervisor') return 1;
+    const aOrder = a.displayOrder || a.agent?.displayOrder || 0;
+    const bOrder = b.displayOrder || b.agent?.displayOrder || 0;
+    return aOrder - bOrder;
+  });
+
+  return (
+    <Flexbox gap={16}>
+      <Title level={4}>
+        {t('members.title', { defaultValue: 'Member Agents' })} ({memberAgents?.length || 0})
+      </Title>
+
+      <Flexbox gap={12}>
+        {sortedMembers.map((member: any, index) => {
+          // Support both flat structure and nested structure
+          const agent = member.agent || member;
+          const currentVersion = member.currentVersion || member;
+          return (
+            <MemberCard
+              agent={agent}
+              currentVersion={currentVersion}
+              key={agent.identifier || index}
+            />
+          );
+        })}
+      </Flexbox>
+    </Flexbox>
+  );
+});
+
+export default Members;

package/src/app/[variants]/(main)/community/(detail)/group_agent/features/Details/Nav.tsx

@@ -0,0 +1,88 @@
+'use client';
+
+import { SOCIAL_URL } from '@lobechat/business-const';
+import { Flexbox, Icon, Tabs } from '@lobehub/ui';
+import { createStaticStyles } from 'antd-style';
+import { BookOpenIcon, HistoryIcon, SquareUserIcon } from 'lucide-react';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+
+const styles = createStaticStyles(({ css, cssVar }) => {
+  return {
+    link: css`
+      color: ${cssVar.colorTextDescription};
+
+      &:hover {
+        color: ${cssVar.colorInfo};
+      }
+    `,
+    nav: css`
+      border-block-end: 1px solid ${cssVar.colorBorder};
+    `,
+  };
+});
+
+export enum GroupAgentNavKey {
+  Overview = 'overview',
+  SystemRole = 'systemRole',
+  Versions = 'versions',
+}
+
+interface NavProps {
+  activeTab?: GroupAgentNavKey;
+  mobile?: boolean;
+  setActiveTab?: (tab: GroupAgentNavKey) => void;
+}
+
+const Nav = memo<NavProps>(({ mobile, setActiveTab, activeTab = GroupAgentNavKey.Overview }) => {
+  const { t } = useTranslation('discover');
+
+  const nav = (
+    <Tabs
+      activeKey={activeTab}
+      compact={mobile}
+      items={[
+        {
+          icon: <Icon icon={BookOpenIcon} size={16} />,
+          key: GroupAgentNavKey.Overview,
+          label: t('groupAgents.details.overview.title', { defaultValue: 'Overview' }),
+        },
+        {
+          icon: <Icon icon={SquareUserIcon} size={16} />,
+          key: GroupAgentNavKey.SystemRole,
+          label: t('groupAgents.details.systemRole.title', { defaultValue: 'System Role' }),
+        },
+        {
+          icon: <Icon icon={HistoryIcon} size={16} />,
+          key: GroupAgentNavKey.Versions,
+          label: t('groupAgents.details.versions.title', { defaultValue: 'Versions' }),
+        },
+      ]}
+      onChange={(key) => setActiveTab?.(key as GroupAgentNavKey)}
+    />
+  );
+
+  return mobile ? (
+    nav
+  ) : (
+    <Flexbox align={'center'} className={styles.nav} horizontal justify={'space-between'}>
+      {nav}
+      <Flexbox gap={12} horizontal>
+        <a className={styles.link} href={SOCIAL_URL.discord} rel="noreferrer" target="_blank">
+          {t('groupAgents.details.nav.needHelp', { defaultValue: 'Need help?' })}
+        </a>
+        <a
+          className={styles.link}
+          href="https://github.com/lobehub/lobe-chat/issues/new/choose"
+          rel="noreferrer"
+          target="_blank"
+        >
+          {t('groupAgents.details.nav.reportIssue', { defaultValue: 'Report issue' })}
+        </a>
+      </Flexbox>
+    </Flexbox>
+  );
+});
+
+export default Nav;

package/src/app/[variants]/(main)/community/(detail)/group_agent/features/Details/Overview/index.tsx

@@ -0,0 +1,213 @@
+import { BRANDING_NAME } from '@lobechat/business-const';
+import { Avatar, Block, Collapse, Flexbox, Grid, Text } from '@lobehub/ui';
+import { ChatList } from '@lobehub/ui/chat';
+import { createStaticStyles, useTheme } from 'antd-style';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { DEFAULT_USER_AVATAR_URL } from '@/const/meta';
+import { useUserStore } from '@/store/user';
+import { authSelectors, userProfileSelectors } from '@/store/user/selectors';
+
+import Title from '../../../../../features/Title';
+import { useDetailContext } from '../../DetailProvider';
+
+const styles = createStaticStyles(({ css, cssVar }) => {
+  return {
+    desc: css`
+      flex: 1;
+      margin: 0 !important;
+      color: ${cssVar.colorTextSecondary};
+    `,
+    title: css`
+      margin: 0 !important;
+      font-size: 14px !important;
+      font-weight: 500 !important;
+    `,
+  };
+});
+
+const MemberCard = memo(
+  ({
+    agent,
+    currentVersion,
+  }: {
+    agent: any;
+    currentVersion: any;
+  }) => {
+    return (
+      <Block
+        height={'100%'}
+        style={{
+          cursor: 'default',
+          overflow: 'hidden',
+        }}
+        variant={'outlined'}
+        width={'100%'}
+      >
+        <Flexbox gap={12} padding={16}>
+          {/* Avatar and Basic Info */}
+          <Flexbox align={'flex-start'} gap={12} horizontal>
+            <Avatar
+              avatar={currentVersion.avatar || agent.name?.[0]}
+              shape={'square'}
+              size={40}
+              style={{ flex: 'none' }}
+            />
+            <Flexbox
+              flex={1}
+              gap={4}
+              style={{
+                overflow: 'hidden',
+              }}
+            >
+              <Text as={'h3'} className={styles.title} ellipsis>
+                {currentVersion.name || agent.name}
+              </Text>
+            </Flexbox>
+          </Flexbox>
+
+          {/* Description */}
+          {currentVersion.description && currentVersion.description !== 'No description provided' && (
+            <Text
+              as={'p'}
+              className={styles.desc}
+              ellipsis={{
+                rows: 2,
+              }}
+            >
+              {currentVersion.description}
+            </Text>
+          )}
+        </Flexbox>
+      </Block>
+    );
+  },
+);
+
+MemberCard.displayName = 'MemberCard';
+
+const Overview = memo(() => {
+  const [userAvatar, username] = useUserStore((s) => [
+    userProfileSelectors.userAvatar(s),
+    userProfileSelectors.username(s),
+  ]);
+
+  const isSignedIn = useUserStore(authSelectors.isLogin);
+  const { t } = useTranslation('discover');
+  const theme = useTheme();
+  const {
+    examples = [],
+    description,
+    summary,
+    avatar,
+    title,
+    backgroundColor,
+    config,
+    memberAgents = [],
+  } = useDetailContext();
+
+  const data: any = [
+    {
+      content: config?.openingMessage,
+      role: 'assistant',
+    },
+    ...examples,
+  ].map((item, index) => {
+    let meta = {
+      avatar,
+      backgroundColor: backgroundColor || 'transparent',
+      title,
+    };
+    if (item.role === 'user') {
+      meta = {
+        avatar: isSignedIn && !!userAvatar ? userAvatar : DEFAULT_USER_AVATAR_URL,
+        backgroundColor: 'transparent',
+        title: isSignedIn && !!username ? username : BRANDING_NAME,
+      };
+    }
+
+    return {
+      extra: {},
+      id: index,
+      ...item,
+      meta,
+    };
+  });
+
+  // Sort: supervisors first, then by displayOrder
+  const sortedMembers = [...(memberAgents || [])].sort((a: any, b: any) => {
+    const aRole = a.role || a.agent?.role;
+    const bRole = b.role || b.agent?.role;
+    if (aRole === 'supervisor' && bRole !== 'supervisor') return -1;
+    if (aRole !== 'supervisor' && bRole === 'supervisor') return 1;
+    const aOrder = a.displayOrder || a.agent?.displayOrder || 0;
+    const bOrder = b.displayOrder || b.agent?.displayOrder || 0;
+    return aOrder - bOrder;
+  });
+
+  return (
+    <Flexbox gap={16}>
+      <Collapse
+        defaultActiveKey={['summary']}
+        expandIconPlacement={'end'}
+        items={[
+          {
+            children: summary || description,
+            key: 'summary',
+            label: t('groupAgents.details.summary.title', { defaultValue: 'Summary' }),
+          },
+        ]}
+        variant={'outlined'}
+      />
+
+      {/* Members Section */}
+      {memberAgents.length > 0 && (
+        <>
+          <Title>
+            {t('groupAgents.details.members.title', { defaultValue: 'Member Agents' })} (
+            {memberAgents.length})
+          </Title>
+          <Grid rows={4} width={'100%'}>
+            {sortedMembers.map((member: any, index) => {
+              // Support both flat structure and nested structure
+              const agent = member.agent || member;
+              const currentVersion = member.currentVersion || member;
+              return (
+                <MemberCard
+                  agent={agent}
+                  currentVersion={currentVersion}
+                  key={agent.identifier || index}
+                />
+              );
+            })}
+          </Grid>
+        </>
+      )}
+
+      {data.length > 0 && config?.openingMessage && (
+        <>
+          <Title>
+            {t('groupAgents.details.overview.example', { defaultValue: 'Conversation Example' })}
+          </Title>
+          <Block
+            style={{
+              background: theme.colorBgContainerSecondary,
+            }}
+            variant={'outlined'}
+          >
+            <ChatList
+              data={data}
+              renderMessages={{
+                default: ({ id, editableContent }) => <div id={id}>{editableContent}</div>,
+              }}
+              style={{ width: '100%' }}
+            />
+          </Block>
+        </>
+      )}
+    </Flexbox>
+  );
+});
+
+export default Overview;

package/src/app/[variants]/(main)/community/(detail)/group_agent/features/Details/Related/index.tsx

@@ -0,0 +1,85 @@
+import { Avatar, Flexbox, Text , Grid } from '@lobehub/ui';
+import qs from 'query-string';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useNavigate } from 'react-router-dom';
+import urlJoin from 'url-join';
+
+import { type DiscoverGroupAgentItem } from '@/types/discover';
+
+import Title from '../../../../../features/Title';
+import { useDetailContext } from '../../DetailProvider';
+
+const GroupAgentCard = memo<DiscoverGroupAgentItem>((item) => {
+  const navigate = useNavigate();
+
+  const handleClick = () => {
+    if (!item.identifier) return;
+    navigate(qs.stringifyUrl({
+      url: urlJoin('/community/group_agent', item.identifier),
+    }));
+  };
+
+  return (
+    <Flexbox
+      gap={12}
+      onClick={handleClick}
+      padding={16}
+      style={{
+        border: '1px solid var(--lobe-border-color)',
+        borderRadius: 8,
+        cursor: 'pointer',
+        transition: 'all 0.2s',
+      }}
+    >
+      <Flexbox align="center" gap={12} horizontal>
+        <Avatar avatar={item.avatar || item.title[0]} shape="square" size={48} />
+        <Flexbox flex={1} gap={4}>
+          <Text ellipsis style={{ fontWeight: 500 }}>
+            {item.title}
+          </Text>
+          <Text ellipsis style={{ fontSize: 12, opacity: 0.65 }} type="secondary">
+            {item.description}
+          </Text>
+        </Flexbox>
+      </Flexbox>
+    </Flexbox>
+  );
+});
+
+const Related = memo(() => {
+  const { t } = useTranslation('discover');
+  const { related = [], category } = useDetailContext();
+
+  return (
+    <Flexbox gap={16}>
+      <Title
+        more={t('groupAgents.details.related.more', { defaultValue: 'View More' })}
+        moreLink={qs.stringifyUrl(
+          {
+            query: {
+              category,
+            },
+            url: '/community/group_agent',
+          },
+          { skipNull: true },
+        )}
+      >
+        {t('groupAgents.details.related.listTitle', { defaultValue: 'Related Group Agents' })}
+      </Title>
+      {related.length > 0 ? (
+        <Grid rows={4}>
+          {related.map((item) => (
+            <GroupAgentCard key={item.identifier} {...item} />
+          ))}
+        </Grid>
+      ) : (
+        <Flexbox align="center" padding={32} style={{ color: '#999' }}>
+          {t('groupAgents.details.related.empty', { defaultValue: 'No related group agents found' })}
+        </Flexbox>
+      )}
+    </Flexbox>
+  );
+});
+
+export default Related;

package/src/app/[variants]/(main)/community/(detail)/group_agent/features/Details/SystemRole/TagList.tsx

@@ -0,0 +1,20 @@
+import { Tag as AntdTag, Flexbox } from '@lobehub/ui';
+import { memo } from 'react';
+
+interface TagListProps {
+  tags?: string[];
+}
+
+const TagList = memo<TagListProps>(({ tags = [] }) => {
+  if (!tags || tags.length === 0) return null;
+
+  return (
+    <Flexbox gap={8} horizontal wrap={'wrap'}>
+      {tags.map((tag, index) => (
+        <AntdTag key={index}>{tag}</AntdTag>
+      ))}
+    </Flexbox>
+  );
+});
+
+export default TagList;

package/src/app/[variants]/(main)/community/(detail)/group_agent/features/Details/SystemRole/index.tsx

@@ -0,0 +1,71 @@
+import { Block, Flexbox, Icon, Tag } from '@lobehub/ui';
+import { cssVar } from 'antd-style';
+import { MessageCircleHeartIcon, MessageCircleQuestionIcon } from 'lucide-react';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import Title from '../../../../../features/Title';
+import MarkdownRender from '../../../../features/MakedownRender';
+import { useDetailContext } from '../../DetailProvider';
+import TagList from './TagList';
+
+const SystemRole = memo(() => {
+  const { t } = useTranslation('discover');
+  const { tokenUsage, tags = [], config } = useDetailContext();
+
+  const { systemRole, openingMessage, openingQuestions } = config || {};
+  return (
+    <Flexbox gap={16}>
+      {systemRole && (
+        <>
+          <Title tag={tokenUsage && <Tag>{t('groupAgents.details.tokenUsage', { defaultValue: `${tokenUsage} tokens` })}</Tag>}>
+            {t('groupAgents.details.systemRole.title', { defaultValue: 'System Role' })}
+          </Title>
+          <Block gap={16} padding={16} variant={'outlined'}>
+            {<MarkdownRender>{systemRole.trimEnd()}</MarkdownRender>}
+            <TagList tags={tags} />
+          </Block>
+        </>
+      )}
+      {openingMessage && (
+        <>
+          <Title>
+            {t('groupAgents.details.systemRole.openingMessage', {
+              defaultValue: 'Opening Message',
+            })}
+          </Title>
+          <Block align={'flex-start'} gap={12} horizontal padding={16} variant={'outlined'}>
+            <Icon
+              color={cssVar.colorError}
+              icon={MessageCircleHeartIcon}
+              size={20}
+              style={{
+                marginTop: 4,
+              }}
+            />
+            <MarkdownRender>{openingMessage?.trimEnd()}</MarkdownRender>
+          </Block>
+        </>
+      )}
+      {openingQuestions && openingQuestions.length > 0 && (
+        <>
+          <Title tag={<Tag>{openingQuestions?.length}</Tag>}>
+            {t('groupAgents.details.systemRole.openingQuestions', {
+              defaultValue: 'Opening Questions',
+            })}
+          </Title>
+          <Flexbox gap={8}>
+            {openingQuestions?.map((item, key) => (
+              <Block gap={12} horizontal key={key} padding={16} variant={'outlined'}>
+                <Icon color={cssVar.colorWarning} icon={MessageCircleQuestionIcon} size={20} />
+                <MarkdownRender>{item}</MarkdownRender>
+              </Block>
+            ))}
+          </Flexbox>
+        </>
+      )}
+    </Flexbox>
+  );
+});
+
+export default SystemRole;