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

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;

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

@@ -0,0 +1,119 @@
+import { Block, Flexbox, Icon, Tag } from '@lobehub/ui';
+import { cssVar } from 'antd-style';
+import { CheckIcon, MinusIcon } from 'lucide-react';
+import { memo, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import InlineTable from '@/components/InlineTable';
+import PublishedTime from '@/components/PublishedTime';
+
+import Title from '../../../../../features/Title';
+import { useDetailContext } from '../../DetailProvider';
+
+const Versions = memo(() => {
+  const { t } = useTranslation('discover');
+  const { versions = [], currentVersion } = useDetailContext();
+
+  const statusTagMap = useMemo(
+    () => ({
+      archived: {
+        color: 'default' as const,
+        label: t('groupAgents.details.version.status.archived', { defaultValue: 'Archived' }),
+      },
+      deprecated: {
+        color: 'warning' as const,
+        label: t('groupAgents.details.version.status.deprecated', { defaultValue: 'Deprecated' }),
+      },
+      published: {
+        color: 'success' as const,
+        label: t('groupAgents.details.version.status.published', { defaultValue: 'Published' }),
+      },
+      unpublished: {
+        color: 'default' as const,
+        label: t('groupAgents.details.version.status.unpublished', { defaultValue: 'Unpublished' }),
+      },
+    }),
+    [t],
+  );
+
+  if (!versions.length) {
+    return (
+      <Flexbox gap={16}>
+        <Title>
+          {t('groupAgents.details.version.title', { defaultValue: 'Version History' })}
+        </Title>
+        <Block padding={24} variant={'outlined'}>
+          {t('groupAgents.details.version.empty', { defaultValue: 'No version history available' })}
+        </Block>
+      </Flexbox>
+    );
+  }
+
+  return (
+    <Flexbox gap={16}>
+      <Title>
+        {t('groupAgents.details.version.title', { defaultValue: 'Version History' })}
+      </Title>
+      <Block variant={'outlined'}>
+        <InlineTable
+          columns={[
+            {
+              dataIndex: 'version',
+              render: (_: any, record: any) => {
+                const statusKey =
+                  record.status &&
+                  Object.prototype.hasOwnProperty.call(statusTagMap, record.status)
+                    ? (record.status as keyof typeof statusTagMap)
+                    : undefined;
+                const statusMeta = statusKey ? statusTagMap[statusKey] : undefined;
+
+                return (
+                  <Flexbox align={'center'} gap={8} horizontal>
+                    <code style={{ fontSize: 14 }}>{record.version}</code>
+                    {(record.isLatest || record.version === currentVersion) && (
+                      <Tag color={'info'}>
+                        {t('groupAgents.details.version.table.isLatest', { defaultValue: 'Latest' })}
+                      </Tag>
+                    )}
+                    {statusMeta && <Tag color={statusMeta.color}>{statusMeta.label}</Tag>}
+                  </Flexbox>
+                );
+              },
+              title: t('groupAgents.details.version.table.version', { defaultValue: 'Version' }),
+            },
+            {
+              align: 'center',
+              dataIndex: 'isValidated',
+              render: (_: any, record: any) => (
+                <Icon
+                  color={record.isValidated ? cssVar.colorSuccess : cssVar.colorTextDescription}
+                  icon={record.isValidated ? CheckIcon : MinusIcon}
+                />
+              ),
+              title: t('groupAgents.details.version.table.isValidated', {
+                defaultValue: 'Validated',
+              }),
+            },
+            {
+              align: 'end',
+              dataIndex: 'createdAt',
+              render: (_: any, record: any) => (
+                <PublishedTime date={record.createdAt} showPrefix={false} />
+              ),
+              title: t('groupAgents.details.version.table.publishAt', {
+                defaultValue: 'Published At',
+              }),
+            },
+          ]}
+          dataSource={versions}
+          rowKey={'version'}
+          size={'middle'}
+        />
+      </Block>
+    </Flexbox>
+  );
+});
+
+Versions.displayName = 'GroupAgentVersions';
+
+export default Versions;

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

@@ -0,0 +1,51 @@
+import { Flexbox } from '@lobehub/ui';
+import { useResponsive } from 'antd-style';
+import { useQueryState } from 'nuqs';
+import { memo } from 'react';
+
+import Sidebar from '../Sidebar';
+import Nav, { GroupAgentNavKey } from './Nav';
+import Overview from './Overview';
+import SystemRole from './SystemRole';
+import Versions from './Versions';
+
+const Details = memo<{ mobile?: boolean }>(({ mobile: isMobile }) => {
+  const { mobile = isMobile } = useResponsive();
+  const [activeTabParam, setActiveTab] = useQueryState('activeTab');
+  const activeTab = activeTabParam || GroupAgentNavKey.Overview;
+
+  return (
+    <Flexbox gap={24}>
+      {/* Navigation */}
+      <Nav
+        activeTab={activeTab as GroupAgentNavKey}
+        mobile={mobile}
+        setActiveTab={(tab) => setActiveTab(tab)}
+      />
+
+      <Flexbox
+        gap={48}
+        horizontal={!mobile}
+        style={mobile ? { flexDirection: 'column-reverse' } : undefined}
+      >
+        {/* Main Content */}
+        <Flexbox
+          style={{
+            overflow: 'hidden',
+          }}
+          width={'100%'}
+        >
+          {/* Tab Content */}
+          {activeTab === GroupAgentNavKey.Overview && <Overview />}
+          {activeTab === GroupAgentNavKey.SystemRole && <SystemRole />}
+          {activeTab === GroupAgentNavKey.Versions && <Versions />}
+        </Flexbox>
+
+        {/* Sidebar */}
+        <Sidebar mobile={mobile} />
+      </Flexbox>
+    </Flexbox>
+  );
+});
+
+export default Details;