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

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

@@ -0,0 +1,253 @@
+'use client';
+
+import {
+  ActionIcon,
+  Avatar,
+  Button,
+  Flexbox,
+  Icon,
+  Text,
+  Tooltip,
+  TooltipGroup,
+} from '@lobehub/ui';
+import { App } from 'antd';
+import { createStaticStyles, cssVar, useResponsive } from 'antd-style';
+import { BookmarkCheckIcon, BookmarkIcon, DotIcon, HeartIcon, UsersIcon } from 'lucide-react';
+import qs from 'query-string';
+import { memo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Link } from 'react-router-dom';
+import useSWR from 'swr';
+import urlJoin from 'url-join';
+
+import PublishedTime from '@/components/PublishedTime';
+import { useMarketAuth } from '@/layout/AuthProvider/MarketAuth';
+import { socialService } from '@/services/social';
+
+import { useDetailContext } from './DetailProvider';
+
+const styles = createStaticStyles(({ css, cssVar }) => ({
+  time: css`
+    font-size: 12px;
+    color: ${cssVar.colorTextDescription};
+  `,
+}));
+
+const Header = memo<{ mobile?: boolean }>(({ mobile: isMobile }) => {
+  const { t } = useTranslation('discover');
+  const { message } = App.useApp();
+  const data = useDetailContext();
+  const { mobile = isMobile } = useResponsive();
+  const { isAuthenticated, signIn, session } = useMarketAuth();
+  const [favoriteLoading, setFavoriteLoading] = useState(false);
+  const [likeLoading, setLikeLoading] = useState(false);
+
+  const {
+    memberAgents = [],
+    author,
+    avatar,
+    title,
+    category,
+    identifier,
+    createdAt,
+    userName,
+  } = data;
+
+  const displayAvatar = avatar || title?.[0] || '👥';
+  const memberCount = memberAgents?.length || 0;
+
+  // Set access token for social service
+  if (session?.accessToken) {
+    socialService.setAccessToken(session.accessToken);
+  }
+
+  // TODO: Use 'group_agent' type when social service supports it
+  // Fetch favorite status
+  const { data: favoriteStatus, mutate: mutateFavorite } = useSWR(
+    identifier && isAuthenticated ? ['favorite-status', 'agent', identifier] : null,
+    () => socialService.checkFavoriteStatus('agent', identifier!),
+    { revalidateOnFocus: false },
+  );
+
+  const isFavorited = favoriteStatus?.isFavorited ?? false;
+
+  // Fetch like status
+  const { data: likeStatus, mutate: mutateLike } = useSWR(
+    identifier && isAuthenticated ? ['like-status', 'agent', identifier] : null,
+    () => socialService.checkLikeStatus('agent', identifier!),
+    { revalidateOnFocus: false },
+  );
+  const isLiked = likeStatus?.isLiked ?? false;
+
+  const handleFavoriteClick = async () => {
+    if (!isAuthenticated) {
+      await signIn();
+      return;
+    }
+
+    if (!identifier) return;
+
+    setFavoriteLoading(true);
+    try {
+      if (isFavorited) {
+        await socialService.removeFavorite('agent', identifier);
+        message.success(t('assistant.unfavoriteSuccess'));
+      } else {
+        await socialService.addFavorite('agent', identifier);
+        message.success(t('assistant.favoriteSuccess'));
+      }
+      await mutateFavorite();
+    } catch {
+      message.error(t('assistant.favoriteFailed'));
+    } finally {
+      setFavoriteLoading(false);
+    }
+  };
+
+  const handleLikeClick = async () => {
+    if (!isAuthenticated) {
+      await signIn();
+      return;
+    }
+
+    if (!identifier) return;
+
+    setLikeLoading(true);
+    try {
+      if (isLiked) {
+        await socialService.unlike('agent', identifier);
+        message.success(t('assistant.unlikeSuccess'));
+      } else {
+        await socialService.like('agent', identifier);
+        message.success(t('assistant.likeSuccess'));
+      }
+      await mutateLike();
+    } catch {
+      message.error(t('assistant.likeFailed'));
+    } finally {
+      setLikeLoading(false);
+    }
+  };
+
+  const cateButton = category ? (
+    <Link
+      to={qs.stringifyUrl({
+        query: { category },
+        url: '/community/group_agent',
+      })}
+    >
+      <Button size={'middle'} variant={'outlined'}>
+        {category}
+      </Button>
+    </Link>
+  ) : null;
+
+  return (
+    <Flexbox gap={12}>
+      <Flexbox align={'flex-start'} gap={16} horizontal width={'100%'}>
+        <Avatar avatar={displayAvatar} shape={'square'} size={mobile ? 48 : 64} />
+        <Flexbox
+          flex={1}
+          gap={4}
+          style={{
+            overflow: 'hidden',
+          }}
+        >
+          <Flexbox
+            align={'center'}
+            gap={8}
+            horizontal
+            justify={'space-between'}
+            style={{
+              overflow: 'hidden',
+              position: 'relative',
+            }}
+          >
+            <Flexbox
+              align={'center'}
+              flex={1}
+              gap={12}
+              horizontal
+              style={{
+                overflow: 'hidden',
+                position: 'relative',
+              }}
+            >
+              <Text
+                as={'h1'}
+                ellipsis
+                style={{ fontSize: mobile ? 18 : 24, margin: 0 }}
+                title={identifier}
+              >
+                {title}
+              </Text>
+            </Flexbox>
+            <Tooltip title={isLiked ? t('assistant.unlike') : t('assistant.like')}>
+              <ActionIcon
+                icon={HeartIcon}
+                loading={likeLoading}
+                onClick={handleLikeClick}
+                style={isLiked ? { color: '#ff4d4f' } : undefined}
+              />
+            </Tooltip>
+            <Tooltip title={isFavorited ? t('assistant.unfavorite') : t('assistant.favorite')}>
+              <ActionIcon
+                icon={isFavorited ? BookmarkCheckIcon : BookmarkIcon}
+                loading={favoriteLoading}
+                onClick={handleFavoriteClick}
+                variant={isFavorited ? 'outlined' : undefined}
+              />
+            </Tooltip>
+          </Flexbox>
+          <Flexbox align={'center'} gap={4} horizontal>
+            {(() => {
+              // API returns author as object {avatar, name, userName}, but type definition says string
+              const authorObj =
+                typeof author === 'object' && author !== null ? (author as any) : null;
+              const authorName = authorObj ? authorObj.name || authorObj.userName : author;
+
+              return authorName && userName ? (
+                <Link style={{ color: 'inherit' }} to={urlJoin('/community/user', userName)}>
+                  {authorName}
+                </Link>
+              ) : (
+                authorName
+              );
+            })()}
+            <Icon icon={DotIcon} />
+            <PublishedTime
+              className={styles.time}
+              date={createdAt as string}
+              template={'MMM DD, YYYY'}
+            />
+          </Flexbox>
+        </Flexbox>
+      </Flexbox>
+      <TooltipGroup>
+        <Flexbox
+          align={'center'}
+          gap={mobile ? 12 : 24}
+          horizontal
+          style={{
+            color: cssVar.colorTextSecondary,
+          }}
+        >
+          {!mobile && cateButton}
+          {Boolean(memberCount) && (
+            <Tooltip
+              styles={{ root: { pointerEvents: 'none' } }}
+              title={t('groupAgents.memberCount', { defaultValue: 'Members' })}
+            >
+              <Flexbox align={'center'} gap={6} horizontal>
+                <Icon icon={UsersIcon} />
+                {memberCount}
+              </Flexbox>
+            </Tooltip>
+          )}
+        </Flexbox>
+      </TooltipGroup>
+    </Flexbox>
+  );
+});
+
+export default Header;

package/src/app/[variants]/(main)/community/(detail)/group_agent/features/Sidebar/ActionButton/AddGroupAgent.tsx

@@ -0,0 +1,222 @@
+'use client';
+
+import { Button, DropdownMenu, Flexbox, Icon } from '@lobehub/ui';
+import { App } from 'antd';
+import { createStaticStyles } from 'antd-style';
+import { ChevronDownIcon } from 'lucide-react';
+import { memo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useNavigate } from 'react-router-dom';
+import urlJoin from 'url-join';
+
+import { chatGroupService } from '@/services/chatGroup';
+import { discoverService } from '@/services/discover';
+import { useAgentGroupStore } from '@/store/agentGroup';
+
+import { useDetailContext } from '../../DetailProvider';
+
+const styles = createStaticStyles(({ css }) => ({
+  buttonGroup: css`
+    width: 100%;
+  `,
+  menuButton: css`
+    padding-inline: 8px;
+    border-start-start-radius: 0 !important;
+    border-end-start-radius: 0 !important;
+  `,
+  primaryButton: css`
+    border-start-end-radius: 0 !important;
+    border-end-end-radius: 0 !important;
+  `,
+}));
+
+const AddGroupAgent = memo<{ mobile?: boolean }>(() => {
+  const {
+    avatar,
+    description,
+    tags,
+    title,
+    config,
+    backgroundColor,
+    identifier,
+    memberAgents = [],
+  } = useDetailContext();
+  const [isLoading, setIsLoading] = useState(false);
+  const { message, modal } = App.useApp();
+  const { t } = useTranslation('discover');
+  const navigate = useNavigate();
+  const loadGroups = useAgentGroupStore((s) => s.loadGroups);
+
+  const meta = {
+    avatar,
+    backgroundColor,
+    description,
+    tags,
+    title,
+  };
+
+  // Check if a group with the same title already exists
+  const checkDuplicateGroup = async () => {
+    if (!title) return false;
+    try {
+      const groups = await chatGroupService.getGroups();
+      return groups.some((g) => g.title === title);
+    } catch {
+      return false;
+    }
+  };
+
+  const showDuplicateConfirmation = (callback: () => void) => {
+    modal.confirm({
+      cancelText: t('cancel', { ns: 'common' }),
+      content: t('groupAgents.duplicateAdd.content', {
+        defaultValue: 'This group agent has already been added. Do you want to add it again?',
+        title,
+      }),
+      okText: t('groupAgents.duplicateAdd.ok', { defaultValue: 'Add Anyway' }),
+      onOk: callback,
+      title: t('groupAgents.duplicateAdd.title', { defaultValue: 'Group Already Added' }),
+    });
+  };
+
+  const createGroupFromMarket = async (shouldNavigate = true) => {
+    if (!config) {
+      message.error(
+        t('groupAgents.noConfig', { defaultValue: 'Group configuration not available' }),
+      );
+      return;
+    }
+
+    // Prepare group config
+    const groupConfig = {
+      config: {
+        allowDM: config.allowDM,
+        openingMessage: config.openingMessage,
+        openingQuestions: config.openingQuestions,
+        revealDM: config.revealDM,
+      },
+      content: config.systemRole,
+      ...meta,
+    };
+
+    // Prepare member agents from market data
+    const members = memberAgents.map((member: any) => {
+      const agent = member.agent || member;
+      const currentVersion = member.currentVersion || member;
+      return {
+        avatar: currentVersion.avatar,
+        backgroundColor: currentVersion.backgroundColor,
+        description: currentVersion.description,
+        model: currentVersion.model,
+        plugins: currentVersion.plugins,
+        provider: currentVersion.provider,
+        systemRole: currentVersion.systemRole || currentVersion.content,
+        tags: currentVersion.tags,
+        title: currentVersion.name || agent.name,
+      };
+    });
+
+    try {
+      // Create group with all members in one request
+      const result = await chatGroupService.createGroupWithMembers(groupConfig, members);
+
+      // Refresh group list
+      await loadGroups();
+
+      // Report installation to marketplace
+      if (identifier) {
+        discoverService.reportAgentInstall(identifier);
+        discoverService.reportAgentEvent({
+          event: 'add',
+          identifier,
+          source: location.pathname,
+        });
+      }
+
+      message.success(
+        t('groupAgents.addSuccess', { defaultValue: 'Group agent added successfully!' }),
+      );
+
+      if (shouldNavigate) {
+        navigate(urlJoin('/group', result.groupId));
+      }
+
+      return result;
+    } catch (error) {
+      console.error('Failed to create group from market:', error);
+      message.error(
+        t('groupAgents.addError', {
+          defaultValue: 'Failed to add group agent. Please try again.',
+        }),
+      );
+      throw error;
+    }
+  };
+
+  const handleAddAndConverse = async () => {
+    setIsLoading(true);
+    try {
+      const isDuplicate = await checkDuplicateGroup();
+      if (isDuplicate) {
+        showDuplicateConfirmation(() => createGroupFromMarket(true));
+      } else {
+        await createGroupFromMarket(true);
+      }
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const handleAdd = async () => {
+    setIsLoading(true);
+    try {
+      const isDuplicate = await checkDuplicateGroup();
+      if (isDuplicate) {
+        showDuplicateConfirmation(() => createGroupFromMarket(false));
+      } else {
+        await createGroupFromMarket(false);
+      }
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const menuItems = [
+    {
+      key: 'addGroup',
+      label: t('groupAgents.addGroup', { defaultValue: 'Add Group' }),
+      onClick: handleAdd,
+    },
+  ];
+
+  return (
+    <Flexbox className={styles.buttonGroup} gap={0} horizontal>
+      <Button
+        block
+        className={styles.primaryButton}
+        loading={isLoading}
+        onClick={handleAddAndConverse}
+        size={'large'}
+        style={{ flex: 1, width: 'unset' }}
+        type={'primary'}
+      >
+        {t('groupAgents.addAndConverse', { defaultValue: 'Add & Start Conversation' })}
+      </Button>
+      <DropdownMenu
+        items={menuItems}
+        popupProps={{ style: { minWidth: 267 } }}
+        triggerProps={{ disabled: isLoading }}
+      >
+        <Button
+          className={styles.menuButton}
+          disabled={isLoading}
+          icon={<Icon icon={ChevronDownIcon} />}
+          size={'large'}
+          type={'primary'}
+        />
+      </DropdownMenu>
+    </Flexbox>
+  );
+});
+
+export default AddGroupAgent;

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

@@ -0,0 +1,34 @@
+'use client';
+
+import { Flexbox } from '@lobehub/ui';
+import { memo } from 'react';
+import urlJoin from 'url-join';
+
+import { OFFICIAL_URL } from '@/const/url';
+
+import ShareButton from '../../../../features/ShareButton';
+import { useDetailContext } from '../../DetailProvider';
+import AddGroupAgent from './AddGroupAgent';
+
+const ActionButton = memo<{ mobile?: boolean }>(({ mobile }) => {
+  const { avatar, title, description, tags, identifier } = useDetailContext();
+
+  return (
+    <Flexbox align={'center'} gap={8} horizontal>
+      <AddGroupAgent mobile={mobile} />
+      {identifier && (
+        <ShareButton
+          meta={{
+            avatar: avatar,
+            desc: description,
+            hashtags: tags,
+            title: title,
+            url: urlJoin(OFFICIAL_URL, '/community/group_agent', identifier),
+          }}
+        />
+      )}
+    </Flexbox>
+  );
+});
+
+export default ActionButton;

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

@@ -0,0 +1,42 @@
+import { Collapse } from '@lobehub/ui';
+import { cssVar } from 'antd-style';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { useDetailContext } from '../../DetailProvider';
+
+const Summary = memo(() => {
+  const { description, summary } = useDetailContext();
+  const { t } = useTranslation('discover');
+
+  const displayDescription = summary || description || 'No description provided';
+
+  return (
+    <Collapse
+      defaultActiveKey={['summary']}
+      expandIconPlacement={'end'}
+      items={[
+        {
+          children: (
+            <p
+              style={{
+                color: cssVar.colorTextSecondary,
+                margin: 0,
+              }}
+            >
+              {displayDescription}
+            </p>
+          ),
+          key: 'summary',
+          label: t('groupAgents.details.summary.title', {
+            defaultValue: 'What can you use this group for?',
+          }),
+        },
+      ]}
+      size={'small'}
+      variant={'borderless'}
+    />
+  );
+});
+
+export default Summary;

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

@@ -0,0 +1,41 @@
+import { Flexbox, ScrollShadow } from '@lobehub/ui';
+import { memo } from 'react';
+
+import { useQuery } from '@/hooks/useQuery';
+
+import { GroupAgentNavKey } from '../Details/Nav';
+import ActionButton from './ActionButton';
+import Summary from './Summary';
+
+const Sidebar = memo<{ mobile?: boolean }>(({ mobile }) => {
+  const { activeTab = GroupAgentNavKey.Overview } = useQuery() as { activeTab: GroupAgentNavKey };
+
+  if (mobile) {
+    return (
+      <Flexbox gap={32}>
+        <ActionButton mobile />
+      </Flexbox>
+    );
+  }
+
+  return (
+    <ScrollShadow
+      flex={'none'}
+      gap={32}
+      hideScrollBar
+      size={4}
+      style={{
+        maxHeight: 'calc(100vh - 76px)',
+        paddingBottom: 24,
+        position: 'sticky',
+        top: 16,
+      }}
+      width={360}
+    >
+      <ActionButton />
+      {activeTab !== GroupAgentNavKey.Overview && <Summary />}
+    </ScrollShadow>
+  );
+});
+
+export default Sidebar;

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

@@ -0,0 +1,104 @@
+'use client';
+
+import { ExclamationCircleOutlined, FolderOpenOutlined } from '@ant-design/icons';
+import { Button, FluentEmoji, Text } from '@lobehub/ui';
+import { Result } from 'antd';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useNavigate } from 'react-router-dom';
+
+interface StatusPageProps {
+  status: 'unpublished' | 'archived' | 'deprecated';
+}
+
+const StatusPage = memo<StatusPageProps>(({ status }) => {
+  const navigate = useNavigate();
+  const { t } = useTranslation('discover');
+
+  const handleBackToMarket = () => {
+    navigate('/community');
+  };
+
+  // Unpublished status
+  if (status === 'unpublished') {
+    return (
+      <div
+        style={{
+          alignItems: 'center',
+          display: 'flex',
+          flex: 1,
+          justifyContent: 'center',
+          minHeight: '60vh',
+          padding: '20px',
+        }}
+      >
+        <Result
+          extra={
+            <Button onClick={handleBackToMarket} size={'large'} type="primary">
+              {t('groupAgents.status.backToMarket', { defaultValue: 'Back to Market' })}
+            </Button>
+          }
+          icon={<FluentEmoji emoji={'⌛'} size={96} type={'anim'} />}
+          subTitle={
+            <Text fontSize={16} type={'secondary'}>
+              {t('groupAgents.status.unpublished.subtitle', {
+                defaultValue:
+                  'This group agent is under review. Please contact support@lobehub.com if you have questions.',
+              })}
+            </Text>
+          }
+          title={
+            <Text fontSize={28} weight={'bold'}>
+              {t('groupAgents.status.unpublished.title', { defaultValue: 'Under Review' })}
+            </Text>
+          }
+        />
+      </div>
+    );
+  }
+
+  // Archived/Deprecated status
+  const isArchived = status === 'archived';
+  const statusKey = isArchived ? 'archived' : 'deprecated';
+  const statusIcon = isArchived ? (
+    <FolderOpenOutlined style={{ color: '#8c8c8c' }} />
+  ) : (
+    <ExclamationCircleOutlined style={{ color: '#ff4d4f' }} />
+  );
+
+  return (
+    <div
+      style={{
+        alignItems: 'center',
+        display: 'flex',
+        flex: 1,
+        justifyContent: 'center',
+        minHeight: '60vh',
+        padding: '20px',
+      }}
+    >
+      <Result
+        extra={
+          <Button onClick={handleBackToMarket} type="primary">
+            {t('groupAgents.status.backToMarket', { defaultValue: 'Back to Market' })}
+          </Button>
+        }
+        icon={statusIcon}
+        subTitle={
+          <div style={{ color: '#666', lineHeight: 1.6 }}>
+            <p>
+              {t(`groupAgents.status.${statusKey}.subtitle`, {
+                defaultValue: `This group agent has been ${statusKey}.`,
+              })}
+            </p>
+          </div>
+        }
+        title={t(`groupAgents.status.${statusKey}.title`, {
+          defaultValue: isArchived ? 'Archived' : 'Deprecated',
+        })}
+      />
+    </div>
+  );
+});
+
+export default StatusPage;