@lobehub/lobehub 2.0.0-next.47 → 2.0.0-next.48

package/src/app/[variants]/(main)/discover/(detail)/assistant/[...slugs]/features/Details/SystemRole/TagList.tsx

@@ -7,6 +7,9 @@ import qs from 'query-string';
 import { memo } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
+import { useQuery } from '@/hooks/useQuery';
+import { AssistantMarketSource } from '@/types/discover';
+
 const useStyles = createStyles(({ token, css }) => {
   return {
     tag: css`
@@ -22,18 +25,24 @@ const useStyles = createStyles(({ token, css }) => {
 
 const TagList = memo<{ tags: string[] }>(({ tags }) => {
   const { styles } = useStyles();
+  const { source } = useQuery() as { source?: AssistantMarketSource };
+  const marketSource = source === 'legacy' ? 'legacy' : undefined;
   const showTags = Boolean(tags?.length && tags?.length > 0);
   return (
     showTags && (
       <Flexbox gap={8} horizontal wrap={'wrap'}>
         {tags.map((tag) => (
           <Link
-            href={qs.stringifyUrl({
-              query: {
-                q: tag,
+            href={qs.stringifyUrl(
+              {
+                query: {
+                  q: tag,
+                  source: marketSource,
+                },
+                url: '/discover/assistant',
               },
-              url: '/discover/assistant',
-            })}
+              { skipNull: true },
+            )}
             key={tag}
           >
             <Tag className={styles.tag}>{tag}</Tag>

package/src/app/[variants]/(main)/discover/(detail)/assistant/[...slugs]/features/Details/SystemRole/index.tsx

@@ -15,38 +15,52 @@ const Overview = memo(() => {
   const { t } = useTranslation('discover');
   const { tokenUsage, tags = [], config } = useDetailContext();
   const theme = useTheme();
+
+  const { systemRole, openingMessage, openingQuestions } = config || {};
   return (
     <Flexbox gap={16}>
-      <Title tag={tokenUsage && <TokenTag tokenUsage={tokenUsage} />}>
-        {t('assistants.details.systemRole.title')}
-      </Title>
-      <Block gap={16} padding={16} variant={'outlined'}>
-        {<MarkdownRender>{config?.systemRole.trimEnd()}</MarkdownRender>}
-        <TagList tags={tags} />
-      </Block>
-      <Title>{t('assistants.details.systemRole.openingMessage')}</Title>
-      <Block align={'flex-start'} gap={12} horizontal padding={16} variant={'outlined'}>
-        <Icon
-          color={theme.colorError}
-          icon={MessageCircleHeartIcon}
-          size={20}
-          style={{
-            marginTop: 4,
-          }}
-        />
-        <MarkdownRender>{config?.openingMessage?.trimEnd()}</MarkdownRender>
-      </Block>
-      <Title tag={<Tag>{config?.openingQuestions?.length}</Tag>}>
-        {t('assistants.details.systemRole.openingQuestions')}
-      </Title>
-      <Flexbox gap={8}>
-        {config?.openingQuestions?.map((item, key) => (
-          <Block gap={12} horizontal key={key} padding={16} variant={'outlined'}>
-            <Icon color={theme.colorWarning} icon={MessageCircleQuestionIcon} size={20} />
-            <MarkdownRender>{item}</MarkdownRender>
+      {systemRole && (
+        <>
+          <Title tag={tokenUsage && <TokenTag tokenUsage={tokenUsage} />}>
+            {t('assistants.details.systemRole.title')}
+          </Title>
+          <Block gap={16} padding={16} variant={'outlined'}>
+            {<MarkdownRender>{systemRole.trimEnd()}</MarkdownRender>}
+            <TagList tags={tags} />
+          </Block>
+        </>
+      )}
+      {openingMessage && (
+        <>
+          <Title>{t('assistants.details.systemRole.openingMessage')}</Title>
+          <Block align={'flex-start'} gap={12} horizontal padding={16} variant={'outlined'}>
+            <Icon
+              color={theme.colorError}
+              icon={MessageCircleHeartIcon}
+              size={20}
+              style={{
+                marginTop: 4,
+              }}
+            />
+            <MarkdownRender>{openingMessage?.trimEnd()}</MarkdownRender>
           </Block>
-        ))}
-      </Flexbox>
+        </>
+      )}
+      {openingQuestions && (
+        <>
+          <Title tag={<Tag>{openingQuestions?.length}</Tag>}>
+            {t('assistants.details.systemRole.openingQuestions')}
+          </Title>
+          <Flexbox gap={8}>
+            {openingQuestions?.map((item, key) => (
+              <Block gap={12} horizontal key={key} padding={16} variant={'outlined'}>
+                <Icon color={theme.colorWarning} icon={MessageCircleQuestionIcon} size={20} />
+                <MarkdownRender>{item}</MarkdownRender>
+              </Block>
+            ))}
+          </Flexbox>
+        </>
+      )}
     </Flexbox>
   );
 });

package/src/app/[variants]/(main)/discover/(detail)/assistant/[...slugs]/features/Details/Versions/index.tsx

@@ -0,0 +1,137 @@
+import { Block, Icon, Tag } from '@lobehub/ui';
+import { useTheme } from 'antd-style';
+import { CheckIcon, MinusIcon } from 'lucide-react';
+import Link from 'next/link';
+import { usePathname } from 'next/navigation';
+import qs from 'query-string';
+import { memo, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+
+import InlineTable from '@/components/InlineTable';
+import PublishedTime from '@/components/PublishedTime';
+import { useQuery } from '@/hooks/useQuery';
+import { AssistantMarketSource, AssistantNavKey } from '@/types/discover';
+
+import Title from '../../../../../../features/Title';
+import { useDetailContext } from '../../DetailProvider';
+
+const Versions = memo(() => {
+  const { t } = useTranslation('discover');
+  const theme = useTheme();
+  const pathname = usePathname();
+  const { versions = [], currentVersion } = useDetailContext();
+  const { source } = useQuery() as { source?: AssistantMarketSource };
+  const marketSource = source === 'legacy' ? 'legacy' : undefined;
+
+  const statusTagMap = useMemo(
+    () => ({
+      archived: {
+        color: 'default' as const,
+        label: t('assistants.details.version.status.archived'),
+      },
+      deprecated: {
+        color: 'warning' as const,
+        label: t('assistants.details.version.status.deprecated'),
+      },
+    }),
+    [t],
+  );
+
+  const disableClickStatuses = useMemo(
+    () => new Set<keyof typeof statusTagMap>(['archived', 'deprecated']),
+    [],
+  );
+
+  if (!versions.length) {
+    return (
+      <Flexbox gap={16}>
+        <Title>{t('assistants.details.version.title')}</Title>
+        <Block padding={24} variant={'outlined'}>
+          {t('assistants.details.version.empty')}
+        </Block>
+      </Flexbox>
+    );
+  }
+
+  return (
+    <Flexbox gap={16}>
+      <Title>{t('assistants.details.version.title')}</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;
+                  const content = (
+                    <Flexbox align={'center'} gap={8} horizontal>
+                      <code style={{ fontSize: 14 }}>{record.version}</code>
+                      {(record.isLatest || record.version === currentVersion) && (
+                        <Tag color={'info'}>{t('assistants.details.version.table.isLatest')}</Tag>
+                      )}
+                      {statusMeta && <Tag color={statusMeta.color}>{statusMeta.label}</Tag>}
+                    </Flexbox>
+                  );
+
+                  if (statusKey && disableClickStatuses.has(statusKey)) return content;
+
+                  return (
+                    <Link
+                      href={qs.stringifyUrl(
+                        {
+                          query: {
+                            activeTab: AssistantNavKey.Version,
+                            source: marketSource,
+                            version: record.version,
+                          },
+                          url: pathname,
+                        },
+                        { skipNull: true },
+                      )}
+                      style={{ color: 'inherit' }}
+                    >
+                      {content}
+                    </Link>
+                  );
+                })(),
+              title: t('assistants.details.version.table.version'),
+            },
+            {
+              align: 'center',
+              dataIndex: 'isValidated',
+              render: (_: any, record: any) => (
+                <Icon
+                  color={record.isValidated ? theme.colorSuccess : theme.colorTextDescription}
+                  icon={record.isValidated ? CheckIcon : MinusIcon}
+                />
+              ),
+              title: t('assistants.details.version.table.isValidated'),
+            },
+            {
+              align: 'end',
+              dataIndex: 'createdAt',
+              render: (_: any, record: any) => (
+                <PublishedTime date={record.createdAt} showPrefix={false} />
+              ),
+              title: t('assistants.details.version.table.publishAt'),
+            },
+          ]}
+          dataSource={versions}
+          rowKey={'version'}
+          size={'middle'}
+        />
+      </Block>
+    </Flexbox>
+  );
+});
+
+Versions.displayName = 'AssistantVersions';
+
+export default Versions;

package/src/app/[variants]/(main)/discover/(detail)/assistant/[...slugs]/features/Details/index.tsx

@@ -13,6 +13,7 @@ import Nav from './Nav';
 import Overview from './Overview';
 import Related from './Related';
 import SystemRole from './SystemRole';
+import Versions from './Versions';
 
 const Details = memo<{ mobile?: boolean }>(({ mobile: isMobile }) => {
   const { mobile = isMobile } = useResponsive();
@@ -38,6 +39,7 @@ const Details = memo<{ mobile?: boolean }>(({ mobile: isMobile }) => {
           {activeTab === AssistantNavKey.Overview && <Overview />}
           {activeTab === AssistantNavKey.SystemRole && <SystemRole />}
           {activeTab === AssistantNavKey.Capabilities && <Capabilities />}
+          {activeTab === AssistantNavKey.Version && <Versions />}
           {activeTab === AssistantNavKey.Related && <Related />}
         </Flexbox>
         <Sidebar mobile={mobile} />

package/src/app/[variants]/(main)/discover/(detail)/assistant/[...slugs]/features/Header.tsx

@@ -4,12 +4,11 @@ import { Github, MCP } from '@lobehub/icons';
 import { ActionIcon, Avatar, Button, Icon, Text, Tooltip } from '@lobehub/ui';
 import { createStyles, useResponsive } from 'antd-style';
 import { BookTextIcon, CoinsIcon, DotIcon } from 'lucide-react';
-import NextLink from 'next/link';
+import Link from 'next/link';
 import qs from 'query-string';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
-import { Link as RouterLink } from 'react-router-dom';
 import urlJoin from 'url-join';
 
 import { formatIntergerNumber } from '@/utils/format';
@@ -53,16 +52,16 @@ const Header = memo<{ mobile?: boolean }>(({ mobile: isMobile }) => {
   const cate = categories.find((c) => c.key === category);
 
   const cateButton = (
-    <RouterLink
-      to={qs.stringifyUrl({
+    <Link
+      href={qs.stringifyUrl({
         query: { category: cate?.key },
-        url: '/assistant',
+        url: '/discover/assistant',
       })}
     >
       <Button icon={cate?.icon} size={'middle'} variant={'outlined'}>
         {cate?.label}
       </Button>
-    </RouterLink>
+    </Link>
   );
 
   return (
@@ -106,7 +105,7 @@ const Header = memo<{ mobile?: boolean }>(({ mobile: isMobile }) => {
               </Text>
             </Flexbox>
             <Flexbox align={'center'} gap={6} horizontal>
-              <NextLink
+              <Link
                 href={urlJoin(
                   'https://github.com/lobehub/lobe-chat-agents/tree/main/locales',
                   identifier as string,
@@ -115,14 +114,14 @@ const Header = memo<{ mobile?: boolean }>(({ mobile: isMobile }) => {
                 target={'_blank'}
               >
                 <ActionIcon fill={theme.colorTextDescription} icon={Github} />
-              </NextLink>
+              </Link>
             </Flexbox>
           </Flexbox>
           <Flexbox align={'center'} gap={4} horizontal>
             {author && (
-              <NextLink href={urlJoin('https://github.com', author)} target={'_blank'}>
+              <Link href={urlJoin('https://github.com', author)} target={'_blank'}>
                 {author}
-              </NextLink>
+              </Link>
             )}
             <Icon icon={DotIcon} />
             <PublishedTime

package/src/app/[variants]/(main)/discover/(detail)/assistant/[...slugs]/features/Sidebar/ActionButton/AddAgent.tsx

@@ -10,6 +10,7 @@ import { useTranslation } from 'react-i18next';
 
 import { SESSION_CHAT_URL } from '@/const/url';
 import { useSessionStore } from '@/store/session';
+import type { LobeAgentConfig } from '@/types/agent';
 
 import { useDetailContext } from '../../DetailProvider';
 
@@ -21,12 +22,54 @@ const useStyles = createStyles(({ css }) => ({
   `,
 }));
 
+type MarketAgentModel =
+  | LobeAgentConfig['model']
+  | {
+      model: LobeAgentConfig['model'];
+      parameters?: Partial<LobeAgentConfig['params']>;
+      provider?: LobeAgentConfig['provider'];
+    };
+
+type MarketAgentConfig = Partial<Omit<LobeAgentConfig, 'model' | 'params'>> & {
+  model?: MarketAgentModel;
+  params?: Partial<LobeAgentConfig['params']>;
+};
+
+const normalizeMarketAgentConfig = (
+  config?: MarketAgentConfig,
+): Partial<LobeAgentConfig> | undefined => {
+  if (!config) return undefined;
+
+  const { model, params, ...rest } = config;
+  const normalized: Partial<LobeAgentConfig> = { ...rest };
+
+  const modelInfo = model;
+
+  const mergedParams: Partial<LobeAgentConfig['params']> = {};
+  if (typeof modelInfo === 'object' && modelInfo) {
+    Object.assign(mergedParams, modelInfo.parameters ?? {});
+    normalized.provider = normalized.provider ?? modelInfo.provider;
+    normalized.model = modelInfo.model;
+  } else {
+    normalized.model = modelInfo;
+  }
+  Object.assign(mergedParams, params ?? {});
+
+  normalized.params = Object.keys(mergedParams).length > 0 ? mergedParams : undefined;
+
+  normalized.plugins = normalized.plugins ?? [];
+
+  return normalized;
+};
+
 const AddAgent = memo<{ mobile?: boolean }>(({ mobile }) => {
-  const { avatar, description, tags, title, config, backgroundColor } = useDetailContext();
+  const { avatar, description, tags, title, config, backgroundColor, identifier } =
+    useDetailContext();
   const { styles } = useStyles();
   const [isLoading, setIsLoading] = useState(false);
   const createSession = useSessionStore((s) => s.createSession);
-  const { message } = App.useApp();
+  const sessions = useSessionStore((s) => s.sessions);
+  const { message, modal } = App.useApp();
   const router = useRouter();
   const { t } = useTranslation('discover');
 
@@ -34,29 +77,77 @@ const AddAgent = memo<{ mobile?: boolean }>(({ mobile }) => {
     avatar,
     backgroundColor,
     description,
+    marketIdentifier: identifier,
     tags,
     title,
   };
 
-  const handleAddAgentAndConverse = async () => {
+  const checkDuplicateAgent = () => {
+    if (!identifier) return false;
+    return sessions.some((session) => session.meta?.marketIdentifier === identifier);
+  };
+
+  const showDuplicateConfirmation = (callback: () => void) => {
+    modal.confirm({
+      cancelText: '取消',
+      content: `当前已经添加过「${title}」Agent，是否需要重复添加？`,
+      okText: '确认添加',
+      onOk: callback,
+      title: '重复添加确认',
+    });
+  };
+
+  const createSessionWithMarketIdentifier = async (isSwitchSession = true) => {
     if (!config) return;
 
-    setIsLoading(true);
-    const session = await createSession({
-      config,
+    const sessionData = {
+      config: normalizeMarketAgentConfig(config),
       meta,
-    });
-    setIsLoading(false);
-    message.success(t('assistants.addAgentSuccess'));
-    router.push(SESSION_CHAT_URL(session, mobile));
+    };
+
+    const session = await createSession(sessionData, isSwitchSession);
+    return session;
+  };
+
+  const handleCreateAndConverse = async () => {
+    setIsLoading(true);
+    try {
+      const session = await createSessionWithMarketIdentifier(true);
+      message.success(t('assistants.addAgentSuccess'));
+      router.push(SESSION_CHAT_URL(session, mobile));
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const handleCreate = async () => {
+    setIsLoading(true);
+    try {
+      await createSessionWithMarketIdentifier(false);
+      message.success(t('assistants.addAgentSuccess'));
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const handleAddAgentAndConverse = async () => {
+    if (!config) return;
+
+    if (checkDuplicateAgent()) {
+      showDuplicateConfirmation(handleCreateAndConverse);
+    } else {
+      await handleCreateAndConverse();
+    }
   };
 
   const handleAddAgent = async () => {
     if (!config) return;
-    setIsLoading(true);
-    createSession({ config, meta }, false);
-    message.success(t('assistants.addAgentSuccess'));
-    setIsLoading(false);
+
+    if (checkDuplicateAgent()) {
+      showDuplicateConfirmation(handleCreate);
+    } else {
+      await handleCreate();
+    }
   };
 
   return (

package/src/app/[variants]/(main)/discover/(detail)/assistant/[...slugs]/features/Sidebar/Related/index.tsx

@@ -6,29 +6,43 @@ import { Link } from 'react-router-dom';
 import urlJoin from 'url-join';
 
 import Title from '../../../../../../features/Title';
+import { useQuery } from '@/hooks/useQuery';
+import { AssistantMarketSource } from '@/types/discover';
 import { useDetailContext } from '../../DetailProvider';
 import Item from './Item';
 
 const Related = memo(() => {
   const { t } = useTranslation('discover');
   const { related, category } = useDetailContext();
+  const { source } = useQuery() as { source?: AssistantMarketSource };
+  const marketSource = source === 'legacy' ? 'legacy' : undefined;
 
   return (
     <Flexbox gap={16}>
       <Title
         more={t('assistants.details.related.more')}
-        moreLink={qs.stringifyUrl({
-          query: {
-            category,
+        moreLink={qs.stringifyUrl(
+          {
+            query: {
+              category,
+              source: marketSource,
+            },
+            url: '/discover/assistant',
           },
-          url: '/discover/assistant',
-        })}
+          { skipNull: true },
+        )}
       >
         {t('assistants.details.related.listTitle')}
       </Title>
       <Flexbox gap={8}>
         {related?.map((item, index) => {
-          const link = urlJoin('/assistant', item.identifier);
+          const link = qs.stringifyUrl(
+            {
+              query: marketSource ? { source: marketSource } : undefined,
+              url: urlJoin('/discover/assistant', item.identifier),
+            },
+            { skipNull: true },
+          );
           return (
             <Link key={index} style={{ color: 'inherit', overflow: 'hidden' }} to={link}>
               <Item {...item} />

package/src/app/[variants]/(main)/discover/(detail)/assistant/[...slugs]/features/StatusPage/index.tsx

@@ -0,0 +1,113 @@
+'use client';
+
+import {
+  ClockCircleOutlined,
+  ExclamationCircleOutlined,
+  FolderOpenOutlined,
+} from '@ant-design/icons';
+import { Button, Result } from 'antd';
+import { useRouter } from 'next/navigation';
+import { memo } from 'react';
+import { Trans, useTranslation } from 'react-i18next';
+
+interface StatusPageProps {
+  status: 'unpublished' | 'archived' | 'deprecated';
+}
+
+const StatusPage = memo<StatusPageProps>(({ status }) => {
+  const router = useRouter();
+  const { t } = useTranslation('discover');
+
+  const handleBackToMarket = () => {
+    router.push('/discover/assistant');
+  };
+
+  // 审核中状态
+  if (status === 'unpublished') {
+    return (
+      <div
+        style={{
+          alignItems: 'center',
+          display: 'flex',
+          flex: 1,
+          justifyContent: 'center',
+          minHeight: '60vh',
+          padding: '20px',
+        }}
+      >
+        <Result
+          extra={
+            <Button onClick={handleBackToMarket} type="primary">
+              {t('assistants.status.backToMarket')}
+            </Button>
+          }
+          icon={<ClockCircleOutlined style={{ color: '#faad14' }} />}
+          subTitle={
+            <div style={{ color: '#666', lineHeight: 1.6 }}>
+              <Trans i18nKey="assistants.status.unpublished.subtitle" ns="discover">
+                当前访问的助手正在进行版本审核中，如果有疑问复制链接发送问题到{' '}
+                <a href="mailto:support@lobehub.com" style={{ color: '#1890ff' }}>
+                  support@lobehub.com
+                </a>{' '}
+                进行咨询。
+              </Trans>
+            </div>
+          }
+          title={t('assistants.status.unpublished.title')}
+        />
+      </div>
+    );
+  }
+
+  // 归档/拒绝状态
+  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('assistants.status.backToMarket')}
+          </Button>
+        }
+        icon={statusIcon}
+        subTitle={
+          <div style={{ color: '#666', lineHeight: 1.6 }}>
+            <p>{t(`assistants.status.${statusKey}.subtitle`)}</p>
+            <ul style={{ margin: '16px 0', paddingLeft: '20px', textAlign: 'left' }}>
+              <li>{t(`assistants.status.${statusKey}.reasons.owner`)}</li>
+              <li>{t(`assistants.status.${statusKey}.reasons.official`)}</li>
+            </ul>
+            <p>
+              <Trans i18nKey="assistants.status.support" ns="discover">
+                有各种问题请复制链接发送到{' '}
+                <a href="mailto:support@lobehub.com" style={{ color: '#1890ff' }}>
+                  support@lobehub.com
+                </a>{' '}
+                进行咨询。
+              </Trans>
+            </p>
+          </div>
+        }
+        title={t(`assistants.status.${statusKey}.title`)}
+      />
+    </div>
+  );
+});
+
+export default StatusPage;