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

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;

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;