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

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

@@ -0,0 +1,103 @@
+'use client';
+
+import { Flexbox } from '@lobehub/ui';
+import { memo } from 'react';
+import { useParams } from 'react-router-dom';
+
+import { useQuery } from '@/hooks/useQuery';
+import { useDiscoverStore } from '@/store/discover';
+
+import NotFound from '../components/NotFound';
+import { TocProvider } from '../features/Toc/useToc';
+import Details from './features/Details';
+import { DetailProvider } from './features/DetailProvider';
+import Header from './features/Header';
+import StatusPage from './features/StatusPage';
+import Loading from './loading';
+
+interface GroupAgentDetailPageProps {
+  mobile?: boolean;
+}
+
+const GroupAgentDetailPage = memo<GroupAgentDetailPageProps>(({ mobile }) => {
+  const params = useParams<{ slug: string }>();
+  const identifier = decodeURIComponent(params.slug ?? '');
+  const { version } = useQuery() as { version?: string };
+
+  // Fetch group agent detail
+  const useGroupAgentDetail = useDiscoverStore((s) => s.useGroupAgentDetail);
+  const { data, isLoading } = useGroupAgentDetail({ identifier, version });
+
+  if (isLoading) return <Loading />;
+
+  if (!data) return <NotFound />;
+
+  // Check status and show appropriate page
+  const status = (data as any)?.group?.status || (data as any)?.status;
+  if (status === 'unpublished' || status === 'archived' || status === 'deprecated') {
+    return <StatusPage status={status} />;
+  }
+
+  // Transform API data to match DiscoverGroupAgentDetail type
+  const apiConfig = (data as any)?.currentVersion?.config || {};
+
+  const transformedData = {
+    // Top level fields
+    author: (data as any)?.author,
+    // From currentVersion
+    avatar: (data as any)?.currentVersion?.avatar,
+    backgroundColor: (data as any)?.currentVersion?.backgroundColor,
+    category: (data as any)?.currentVersion?.category,
+    commentCount: (data as any)?.group?.commentCount,
+
+    // From currentVersion.config - rename systemPrompt to systemRole for consistency
+    config: {
+      ...apiConfig,
+      allowDM: apiConfig.allowDM,
+      // Rename systemPrompt -> systemRole
+      openingMessage: apiConfig.openingMessage,
+      openingQuestions: apiConfig.openingQuestions,
+      revealDM: apiConfig.revealDM,
+      summary: apiConfig.summary,
+      systemRole: apiConfig.systemPrompt,
+    },
+
+    createdAt: (data as any)?.group?.createdAt,
+    // Version info
+    currentVersion: (data as any)?.currentVersion?.version,
+    currentVersionNumber: (data as any)?.currentVersion?.versionNumber,
+    description: (data as any)?.currentVersion?.description,
+    favoriteCount: (data as any)?.group?.favoriteCount,
+    homepage: (data as any)?.group?.homepage,
+    // From group
+    identifier: (data as any)?.group?.identifier,
+    installCount: (data as any)?.group?.installCount,
+    likeCount: (data as any)?.group?.likeCount,
+    locale: (data as any)?.locale,
+    memberAgents: (data as any)?.memberAgents || [],
+    status: (data as any)?.group?.status,
+    summary: (data as any)?.summary,
+    tags: (data as any)?.currentVersion?.tags,
+    title: (data as any)?.currentVersion?.name || (data as any)?.group?.name,
+    updatedAt: (data as any)?.group?.updatedAt,
+    userName: (data as any)?.author?.userName,
+    versions: (data as any)?.versions || [],
+    visibility: (data as any)?.group?.visibility,
+  };
+
+  return (
+    <TocProvider>
+      <DetailProvider config={transformedData}>
+        <Flexbox gap={16} width={'100%'}>
+          {/* Header Section */}
+          <Header mobile={mobile} />
+
+          {/* Details Section */}
+          <Details mobile={mobile} />
+        </Flexbox>
+      </DetailProvider>
+    </TocProvider>
+  );
+});
+
+export default GroupAgentDetailPage;

package/src/app/[variants]/(main)/community/(detail)/group_agent/loading.tsx

@@ -0,0 +1 @@
+export { DetailsLoading as default } from '../../components/ListLoading';

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

@@ -3,11 +3,17 @@
 import { type ReactNode, createContext, memo, use } from 'react';
 
 import { type MarketUserProfile } from '@/layout/AuthProvider/MarketAuth/types';
-import { type DiscoverAssistantItem, type DiscoverUserInfo } from '@/types/discover';
+import {
+  type DiscoverAssistantItem,
+  type DiscoverGroupAgentItem,
+  type DiscoverUserInfo,
+} from '@/types/discover';
 
 export interface UserDetailContextConfig {
   agentCount: number;
+  agentGroups?: DiscoverGroupAgentItem[];
   agents: DiscoverAssistantItem[];
+  groupCount: number;
   isOwner: boolean;
   mobile?: boolean;
   onEditProfile?: (onSuccess?: (profile: MarketUserProfile) => void) => void;

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

@@ -6,11 +6,13 @@ import { memo } from 'react';
 import UserAgentList from './UserAgentList';
 import UserFavoriteAgents from './UserFavoriteAgents';
 import UserFavoritePlugins from './UserFavoritePlugins';
+import UserGroupList from './UserGroupList';
 
 const UserContent = memo(() => {
   return (
     <Flexbox gap={32}>
       <UserAgentList />
+      <UserGroupList />
       <UserFavoriteAgents />
       <UserFavoritePlugins />
     </Flexbox>

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

@@ -0,0 +1,186 @@
+'use client';
+
+import { Avatar, Block, Flexbox, Icon, Tag, Text, Tooltip, TooltipGroup } from '@lobehub/ui';
+import { createStaticStyles } from 'antd-style';
+import { ClockIcon, DownloadIcon, UsersIcon } from 'lucide-react';
+import qs from 'query-string';
+import { memo, useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Link, useNavigate } from 'react-router-dom';
+import urlJoin from 'url-join';
+
+import PublishedTime from '@/components/PublishedTime';
+import { type DiscoverGroupAgentItem } from '@/types/discover';
+import { formatIntergerNumber } from '@/utils/format';
+
+const styles = createStaticStyles(({ css, cssVar }) => {
+  return {
+    desc: css`
+      flex: 1;
+      margin: 0 !important;
+      color: ${cssVar.colorTextSecondary};
+    `,
+    footer: css`
+      margin-block-start: 16px;
+      border-block-start: 1px dashed ${cssVar.colorBorder};
+      background: ${cssVar.colorBgContainer};
+    `,
+    secondaryDesc: css`
+      font-size: 12px;
+      color: ${cssVar.colorTextDescription};
+    `,
+    statTag: css`
+      border-radius: 4px;
+
+      font-family: ${cssVar.fontFamilyCode};
+      font-size: 11px;
+      color: ${cssVar.colorTextSecondary};
+
+      background: ${cssVar.colorFillTertiary};
+    `,
+    title: css`
+      margin: 0 !important;
+      font-size: 16px !important;
+      font-weight: 500 !important;
+
+      &:hover {
+        color: ${cssVar.colorLink};
+      }
+    `,
+  };
+});
+
+type UserGroupCardProps = DiscoverGroupAgentItem;
+
+const UserGroupCard = memo<UserGroupCardProps>(
+  ({ avatar, title, description, createdAt, category, installCount, identifier, memberCount }) => {
+    const { t } = useTranslation(['discover']);
+    const navigate = useNavigate();
+
+    const link = qs.stringifyUrl(
+      {
+        query: { source: 'new' },
+        url: urlJoin('/community/group_agent', identifier),
+      },
+      { skipNull: true },
+    );
+
+    const handleCardClick = useCallback(() => {
+      navigate(link);
+    }, [link, navigate]);
+
+    return (
+      <Block
+        clickable
+        height={'100%'}
+        onClick={handleCardClick}
+        style={{
+          cursor: 'pointer',
+          overflow: 'hidden',
+          position: 'relative',
+        }}
+        variant={'outlined'}
+        width={'100%'}
+      >
+        <Flexbox
+          align={'flex-start'}
+          gap={16}
+          horizontal
+          justify={'space-between'}
+          padding={16}
+          width={'100%'}
+        >
+          <Flexbox
+            gap={12}
+            horizontal
+            style={{
+              overflow: 'hidden',
+            }}
+          >
+            <Avatar avatar={avatar} shape={'square'} size={40} style={{ flex: 'none' }} />
+            <Flexbox
+              flex={1}
+              gap={2}
+              style={{
+                overflow: 'hidden',
+              }}
+            >
+              <Link
+                onClick={(e) => e.stopPropagation()}
+                style={{ color: 'inherit', flex: 1, overflow: 'hidden' }}
+                to={link}
+              >
+                <Text as={'h3'} className={styles.title} ellipsis style={{ flex: 1 }}>
+                  {title}
+                </Text>
+              </Link>
+            </Flexbox>
+          </Flexbox>
+        </Flexbox>
+        <Flexbox flex={1} gap={12} paddingInline={16}>
+          <Text
+            as={'p'}
+            className={styles.desc}
+            ellipsis={{
+              rows: 3,
+            }}
+          >
+            {description}
+          </Text>
+          <TooltipGroup>
+            <Flexbox align={'center'} gap={4} horizontal>
+              {memberCount !== undefined && memberCount > 0 && (
+                <Tooltip
+                  placement={'top'}
+                  styles={{ root: { pointerEvents: 'none' } }}
+                  title={t('groupAgents.memberCount', { defaultValue: 'Members' })}
+                >
+                  <Tag className={styles.statTag} icon={<Icon icon={UsersIcon} />}>
+                    {formatIntergerNumber(memberCount)}
+                  </Tag>
+                </Tooltip>
+              )}
+              {installCount !== undefined && installCount > 0 && (
+                <Tooltip
+                  placement={'top'}
+                  styles={{ root: { pointerEvents: 'none' } }}
+                  title={t('groupAgents.downloads', { defaultValue: 'Downloads' })}
+                >
+                  <Tag className={styles.statTag} icon={<Icon icon={DownloadIcon} />}>
+                    {formatIntergerNumber(installCount)}
+                  </Tag>
+                </Tooltip>
+              )}
+            </Flexbox>
+          </TooltipGroup>
+        </Flexbox>
+        <Flexbox
+          align={'center'}
+          className={styles.footer}
+          horizontal
+          justify={'space-between'}
+          padding={16}
+        >
+          <Flexbox
+            align={'center'}
+            className={styles.secondaryDesc}
+            horizontal
+            justify={'space-between'}
+          >
+            <Flexbox align={'center'} gap={4} horizontal>
+              <Icon icon={ClockIcon} size={14} />
+              <PublishedTime
+                className={styles.secondaryDesc}
+                date={createdAt}
+                template={'MMM DD, YYYY'}
+              />
+            </Flexbox>
+            {category && t(`category.groupAgent.${category}` as any, { defaultValue: category })}
+          </Flexbox>
+        </Flexbox>
+      </Block>
+    );
+  },
+);
+
+export default UserGroupCard;

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

@@ -0,0 +1,59 @@
+'use client';
+
+import { Flexbox, Grid, Tag, Text } from '@lobehub/ui';
+import { Pagination } from 'antd';
+import { memo, useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { useUserDetailContext } from './DetailProvider';
+import UserGroupCard from './UserGroupCard';
+
+interface UserGroupListProps {
+  pageSize?: number;
+  rows?: number;
+}
+
+const UserGroupList = memo<UserGroupListProps>(({ rows = 4, pageSize = 10 }) => {
+  const { t } = useTranslation('discover');
+  const { agentGroups, groupCount } = useUserDetailContext();
+  const [currentPage, setCurrentPage] = useState(1);
+
+  const paginatedGroups = useMemo(() => {
+    if (!agentGroups) return [];
+    const startIndex = (currentPage - 1) * pageSize;
+    return agentGroups.slice(startIndex, startIndex + pageSize);
+  }, [agentGroups, currentPage, pageSize]);
+
+  if (!agentGroups || agentGroups.length === 0) return null;
+
+  const showPagination = agentGroups.length > pageSize;
+
+  return (
+    <Flexbox gap={16}>
+      <Flexbox align={'center'} gap={8} horizontal>
+        <Text fontSize={16} weight={500}>
+          {t('user.publishedGroups', { defaultValue: '创作的群组' })}
+        </Text>
+        {groupCount > 0 && <Tag>{groupCount}</Tag>}
+      </Flexbox>
+      <Grid rows={rows} width={'100%'}>
+        {paginatedGroups.map((item, index) => (
+          <UserGroupCard key={item.identifier || index} {...item} />
+        ))}
+      </Grid>
+      {showPagination && (
+        <Flexbox align={'center'} justify={'center'}>
+          <Pagination
+            current={currentPage}
+            onChange={(page) => setCurrentPage(page)}
+            pageSize={pageSize}
+            showSizeChanger={false}
+            total={agentGroups.length}
+          />
+        </Flexbox>
+      )}
+    </Flexbox>
+  );
+});
+
+export default UserGroupList;

package/src/app/[variants]/(main)/community/(detail)/user/index.tsx

@@ -58,11 +58,13 @@ const UserDetailPage = memo<UserDetailPageProps>(({ mobile }) => {
 
   const contextConfig = useMemo(() => {
     if (!data || !data.user) return null;
-    const { user, agents } = data;
+    const { user, agents, agentGroups } = data;
     const totalInstalls = agents.reduce((sum, agent) => sum + (agent.installCount || 0), 0);
     return {
       agentCount: agents.length,
+      agentGroups: agentGroups || [],
       agents,
+      groupCount: agentGroups?.length || 0,
       isOwner,
       mobile,
       onEditProfile: handleEditProfile,

package/src/app/[variants]/(main)/community/(list)/assistant/features/List/Item.tsx

@@ -1,4 +1,4 @@
-import { Avatar, Block, Flexbox, Icon, Text } from '@lobehub/ui';
+import { Avatar, Block, Flexbox, Icon, Tag, Text } from '@lobehub/ui';
 import { createStaticStyles } from 'antd-style';
 import { ClockIcon } from 'lucide-react';
 import qs from 'query-string';
@@ -9,8 +9,8 @@ import urlJoin from 'url-join';
 
 import PublishedTime from '@/components/PublishedTime';
 import { useQuery } from '@/hooks/useQuery';
-import { type AssistantMarketSource, type DiscoverAssistantItem } from '@/types/discover';
 import { discoverService } from '@/services/discover';
+import { type AssistantMarketSource, type DiscoverAssistantItem } from '@/types/discover';
 
 import TokenTag from './TokenTag';
 
@@ -68,13 +68,16 @@ const AssistantItem = memo<DiscoverAssistantItem>(
     installCount,
     backgroundColor,
     userName,
+    type,
   }) => {
     const navigate = useNavigate();
     const { source } = useQuery() as { source?: AssistantMarketSource };
+    const isGroupAgent = type === 'agent-group';
+    const basePath = isGroupAgent ? '/community/group_agent' : '/community/assistant';
     const link = qs.stringifyUrl(
       {
         query: { source },
-        url: urlJoin('/community/assistant', identifier),
+        url: urlJoin(basePath, identifier),
       },
       { skipNull: true },
     );
@@ -93,11 +96,13 @@ const AssistantItem = memo<DiscoverAssistantItem>(
     );
 
     const handleClick = useCallback(() => {
-      discoverService.reportAgentEvent({
-        event: 'click',
-        identifier,
-        source: location.pathname,
-      }).catch(() => {});
+      discoverService
+        .reportAgentEvent({
+          event: 'click',
+          identifier,
+          source: location.pathname,
+        })
+        .catch(() => {});
 
       navigate(link);
     }, [identifier, link, navigate]);
@@ -115,6 +120,19 @@ const AssistantItem = memo<DiscoverAssistantItem>(
         variant={'outlined'}
         width={'100%'}
       >
+        {isGroupAgent && (
+          <Tag
+            color="info"
+            style={{
+              position: 'absolute',
+              right: 12,
+              top: 12,
+              zIndex: 1,
+            }}
+          >
+            {t('groupAgents.tag', { defaultValue: '群组' })}
+          </Tag>
+        )}
         <Flexbox
           align={'flex-start'}
           gap={16}

package/src/app/[variants]/(main)/community/(list)/assistant/index.tsx

@@ -16,6 +16,7 @@ const AssistantPage = memo(() => {
   const useAssistantList = useDiscoverStore((s) => s.useAssistantList);
   const { data, isLoading } = useAssistantList({
     category,
+    includeAgentGroup: true,
     order,
     page,
     pageSize: 21,

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

@@ -14,6 +14,7 @@ import { agentGroupSelectors } from '@/store/agentGroup/selectors';
 import { useGroupProfileStore } from '@/store/groupProfile';
 
 import AutoSaveHint from '../Header/AutoSaveHint';
+import GroupPublishButton from '../Header/GroupPublishButton';
 import GroupHeader from './GroupHeader';
 
 const GroupProfile = memo(() => {
@@ -75,6 +76,7 @@ const GroupProfile = memo(() => {
           >
             {t('startConversation')}
           </Button>
+          <GroupPublishButton />
         </Flexbox>
       </Flexbox>
       <Divider />

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

@@ -19,7 +19,8 @@ const PublishResultModal = memo<PublishResultModalProps>(({ identifier, onCancel
 
   const handleGoToMarket = () => {
     if (identifier) {
-      navigate(`/community/assistant/${identifier}`);
+      console.log('identifier', identifier);
+      navigate(`/community/group_agent/${identifier}`);
     }
     onCancel();
   };

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

@@ -0,0 +1,60 @@
+'use client';
+
+import { Avatar, Flexbox, Modal } from '@lobehub/ui';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import type { OriginalGroupInfo } from './types';
+
+interface GroupForkConfirmModalProps {
+  loading?: boolean;
+  onCancel: () => void;
+  onConfirm: () => void;
+  open: boolean;
+  originalGroup: OriginalGroupInfo | null;
+}
+
+const GroupForkConfirmModal = memo<GroupForkConfirmModalProps>(
+  ({ open, onCancel, onConfirm, originalGroup, loading }) => {
+    const { t } = useTranslation('setting');
+
+    if (!originalGroup) return null;
+
+    const authorName = originalGroup.author?.name || originalGroup.author?.userName || 'Unknown';
+
+    return (
+      <Modal
+        cancelText={t('cancel', { ns: 'common' })}
+        centered
+        closable
+        confirmLoading={loading}
+        okText={t('marketPublish.forkConfirm.confirmGroup')}
+        onCancel={onCancel}
+        onOk={onConfirm}
+        open={open}
+        title={t('marketPublish.forkConfirm.titleGroup')}
+        width={480}
+      >
+        <Flexbox gap={16} style={{ marginTop: 16 }}>
+          <Flexbox align="center" gap={12} horizontal>
+            <Avatar avatar={originalGroup.avatar} size={48} style={{ flex: 'none' }} />
+            <Flexbox gap={4}>
+              <div style={{ fontWeight: 500 }}>{originalGroup.name}</div>
+              <div style={{ fontSize: 12, opacity: 0.6 }}>
+                {t('marketPublish.forkConfirm.by', { author: authorName })}
+              </div>
+            </Flexbox>
+          </Flexbox>
+
+          <p style={{ lineHeight: 1.6, margin: 0 }}>
+            {t('marketPublish.forkConfirm.descriptionGroup')}
+          </p>
+        </Flexbox>
+      </Modal>
+    );
+  },
+);
+
+GroupForkConfirmModal.displayName = 'GroupForkConfirmModal';
+
+export default GroupForkConfirmModal;

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

@@ -0,0 +1,62 @@
+'use client';
+
+import { FluentEmoji, Modal, Text } from '@lobehub/ui';
+import { Result } from 'antd';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useNavigate } from 'react-router-dom';
+
+interface GroupPublishResultModalProps {
+  identifier?: string;
+  onCancel: () => void;
+  open: boolean;
+}
+
+const GroupPublishResultModal = memo<GroupPublishResultModalProps>(
+  ({ identifier, onCancel, open }) => {
+    const navigate = useNavigate();
+    const { t } = useTranslation('setting');
+    const { t: tCommon } = useTranslation('common');
+
+    const handleGoToMarket = () => {
+      if (identifier) {
+        navigate(`/community/group_agent/${identifier}`);
+      }
+      onCancel();
+    };
+
+    return (
+      <Modal
+        cancelText={tCommon('cancel')}
+        centered
+        okText={t('marketPublish.resultModal.view')}
+        onCancel={onCancel}
+        onOk={handleGoToMarket}
+        open={open}
+        title={null}
+        width={440}
+      >
+        <Result
+          icon={<FluentEmoji emoji={'🎉'} size={96} type={'anim'} />}
+          style={{
+            paddingBottom: 32,
+            paddingTop: 48,
+            width: '100%',
+          }}
+          subTitle={
+            <Text fontSize={14} type={'secondary'}>
+              {t('marketPublish.resultModal.messageGroup')}
+            </Text>
+          }
+          title={
+            <Text fontSize={28} weight={'bold'}>
+              {t('marketPublish.resultModal.title')}
+            </Text>
+          }
+        />
+      </Modal>
+    );
+  },
+);
+
+export default GroupPublishResultModal;