@lobehub/lobehub 2.0.0-next.5 → 2.0.0-next.50

package/src/app/[variants]/(main)/chat/settings/features/SmartAgentActionButton/MarketPublishModal.tsx

@@ -0,0 +1,358 @@
+'use client';
+
+import { ModalForm, ProFormText } from '@ant-design/pro-components';
+import { AgentItemDetail } from '@lobehub/market-sdk';
+import { type ModalProps } from '@lobehub/ui';
+import { Col, Row, Spin } from 'antd';
+import isEqual from 'fast-deep-equal';
+import { memo, useCallback, useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { message } from '@/components/AntdStaticMethods';
+import { useTokenCount } from '@/hooks/useTokenCount';
+import { useMarketAuth } from '@/layout/AuthProvider/MarketAuth';
+import { marketApiService } from '@/services/marketApi';
+import { useAgentStore } from '@/store/agent';
+import { agentChatConfigSelectors, agentSelectors } from '@/store/agent/selectors';
+import { useGlobalStore } from '@/store/global';
+import { globalGeneralSelectors } from '@/store/global/selectors';
+import { useSessionStore } from '@/store/session';
+import { sessionMetaSelectors } from '@/store/session/selectors';
+
+import AgentInfoDescription from '../AgentInfoDescription';
+import PublishResultModal from '../PublishResultModal';
+
+export type MarketPublishAction = 'submit' | 'upload';
+
+interface MarketPublishModalProps extends ModalProps {
+  action: MarketPublishAction;
+  onSuccess?: () => void;
+}
+
+interface MarketPublishFormValues {
+  changelog: string;
+  identifier?: string;
+}
+
+const MarketPublishModal = memo<MarketPublishModalProps>(
+  ({ action, open, onCancel, onSuccess }) => {
+    const { t } = useTranslation('setting');
+    const isSubmit = action === 'submit';
+    const isUpload = action === 'upload';
+
+    const { session: marketSession, isAuthenticated } = useMarketAuth();
+    const meta = useSessionStore(sessionMetaSelectors.currentAgentMeta, isEqual);
+    const updateSessionMeta = useSessionStore((s) => s.updateSessionMeta);
+
+    const systemRole = useAgentStore(agentSelectors.currentAgentSystemRole);
+    const language = useGlobalStore(globalGeneralSelectors.currentLanguage);
+    const agentConfig = useAgentStore(agentSelectors.currentAgentConfig);
+    const chatConfig = useAgentStore(agentChatConfigSelectors.currentChatConfig);
+    const plugins = useAgentStore(agentSelectors.currentAgentPlugins);
+    const ttsConfig = useAgentStore(agentSelectors.currentAgentTTS);
+    const model = useAgentStore(agentSelectors.currentAgentModel);
+    const provider = useAgentStore(agentSelectors.currentAgentModelProvider);
+    const knowledgeBases = useAgentStore(agentSelectors.currentAgentKnowledgeBases);
+    const files = useAgentStore(agentSelectors.currentAgentFiles);
+
+    const [remoteAgentData, setRemoteAgentData] = useState<
+      (AgentItemDetail & { description?: string; name?: string; title?: string }) | null
+    >(null);
+    const [loadingRemoteData, setLoadingRemoteData] = useState(false);
+    const [showResultModal, setShowResultModal] = useState(false);
+    const [publishResult, setPublishResult] = useState<{ identifier?: string }>({});
+
+    const messageKey = isSubmit ? 'submit' : 'upload-version';
+    const loadingMessage = isSubmit
+      ? t('marketPublish.modal.loading.submit')
+      : t('marketPublish.modal.loading.upload');
+    const submitButtonText = t('marketPublish.modal.submitButton');
+    const modalTitle = isSubmit
+      ? t('marketPublish.modal.title.submit')
+      : t('marketPublish.modal.title.upload');
+
+    useEffect(() => {
+      if (!isUpload) return;
+      const marketIdentifier = meta?.marketIdentifier;
+      const accessToken = marketSession?.accessToken;
+      if (!open || !isAuthenticated || !accessToken || !marketIdentifier) return;
+
+      let cancelled = false;
+
+      const run = async () => {
+        try {
+          setLoadingRemoteData(true);
+          marketApiService.setAccessToken(accessToken);
+          const data = await marketApiService.getAgentDetail(marketIdentifier);
+          if (!cancelled) {
+            console.log('data', data);
+            setRemoteAgentData(data);
+          }
+        } catch (error) {
+          console.error('Failed to fetch remote agent data:', error);
+          if (!cancelled) {
+            message.error(t('marketPublish.modal.messages.fetchRemoteFailed'));
+          }
+        } finally {
+          if (!cancelled) {
+            setLoadingRemoteData(false);
+          }
+        }
+      };
+
+      void run();
+
+      return () => {
+        cancelled = true;
+      };
+    }, [isAuthenticated, isUpload, marketSession?.accessToken, meta?.marketIdentifier, open]);
+
+    const tokenUsage = useTokenCount(systemRole);
+
+    const handleSubmit = useCallback(
+      async (values: MarketPublishFormValues) => {
+        if (!isAuthenticated || !marketSession?.accessToken) {
+          message.error(t('marketPublish.modal.messages.notAuthenticated'));
+          return false;
+        }
+
+        const changelog = values.changelog?.trim();
+        if (!changelog) {
+          message.error({ content: t('marketPublish.modal.changelog.required'), key: messageKey });
+          return false;
+        }
+
+        let identifier = meta?.marketIdentifier;
+
+        try {
+          message.loading({ content: loadingMessage, key: messageKey });
+          marketApiService.setAccessToken(marketSession.accessToken);
+
+          if (isSubmit) {
+            identifier = values.identifier?.trim();
+            if (!identifier) {
+              message.error({ content: t('marketPublish.modal.identifier.required'), key: messageKey });
+              return false;
+            }
+
+            try {
+              await marketApiService.getAgentDetail(identifier);
+            } catch {
+              const createPayload: Record<string, unknown> = {
+                identifier,
+                name: meta?.title || '',
+              };
+              await marketApiService.createAgent(createPayload as any);
+            }
+          } else if (!identifier) {
+            message.error({ content: t('marketPublish.modal.messages.missingIdentifier'), key: messageKey });
+            return false;
+          }
+
+          const versionPayload = {
+            avatar: meta?.avatar,
+            changelog,
+            config: {
+              chatConfig: {
+                displayMode: chatConfig?.displayMode,
+                enableHistoryCount: chatConfig?.enableHistoryCount,
+                historyCount: chatConfig?.historyCount,
+                maxTokens: agentConfig?.params?.max_tokens,
+                searchMode: chatConfig?.searchMode,
+                temperature: agentConfig?.params?.temperature,
+                topP: agentConfig?.params?.top_p,
+              },
+              description: meta?.description,
+              locale: language,
+              model: {
+                model,
+                parameters: agentConfig?.params,
+                provider,
+              },
+              plugins:
+                plugins?.map((plugin) => ({
+                  enabled: true,
+                  identifier: plugin,
+                  settings: {},
+                })) || [],
+              systemRole: systemRole,
+            },
+            description: meta?.description || '',
+            identifier: identifier,
+            name: meta?.title || '',
+            tags: meta?.tags,
+            tokenUsage: tokenUsage,
+          };
+
+          try {
+            await marketApiService.createAgentVersion(versionPayload);
+          } catch (versionError) {
+            const errorMessage = versionError instanceof Error ? versionError.message : '未知错误';
+            message.error({
+              content: t('marketPublish.modal.messages.createVersionFailed', { message: errorMessage }),
+              key: messageKey,
+            });
+            return false;
+          }
+
+          if (isSubmit) {
+            updateSessionMeta({ marketIdentifier: identifier });
+          }
+
+          setPublishResult({ identifier });
+          setShowResultModal(true);
+
+          message.destroy(messageKey);
+          onSuccess?.();
+          return true;
+        } catch (error) {
+          console.error('Market publish failed:', error);
+          const errorMessage = error instanceof Error ? error.message : '发布失败';
+          message.error({ content: t('marketPublish.modal.messages.publishFailed', { message: errorMessage }), key: messageKey });
+          return false;
+        }
+      },
+      [
+        agentConfig?.params,
+        chatConfig?.displayMode,
+        chatConfig?.enableHistoryCount,
+        chatConfig?.historyCount,
+        chatConfig?.searchMode,
+        isAuthenticated,
+        isSubmit,
+        language,
+        meta?.avatar,
+        meta?.description,
+        meta?.marketIdentifier,
+        meta?.tags,
+        meta?.title,
+        marketSession?.accessToken,
+        messageKey,
+        loadingMessage,
+        model,
+        onSuccess,
+        plugins,
+        provider,
+        systemRole,
+        tokenUsage,
+        updateSessionMeta,
+      ],
+    );
+
+    return (
+      <>
+        <ModalForm<MarketPublishFormValues>
+          modalProps={{
+            bodyStyle: { height: '70vh', overflow: 'auto' },
+            destroyOnClose: true,
+            onCancel,
+            style: { minWidth: 750 },
+          }}
+          onFinish={handleSubmit}
+          open={open}
+          submitter={{
+            resetButtonProps: {
+              style: { display: 'none' },
+            },
+            submitButtonProps: {
+              children: submitButtonText,
+            },
+          }}
+          title={modalTitle}
+          width="80vw"
+        >
+          {isSubmit && (
+            <ProFormText
+              extra={t('marketPublish.modal.identifier.extra')}
+              label={t('marketPublish.modal.identifier.label')}
+              name="identifier"
+              placeholder={t('marketPublish.modal.identifier.placeholder')}
+              rules={[
+                { message: t('marketPublish.modal.identifier.required'), required: true },
+                { message: t('marketPublish.modal.identifier.patternError'), pattern: /^[\da-z-]+$/ },
+                { max: 50, message: t('marketPublish.modal.identifier.lengthError'), min: 3 },
+              ]}
+            />
+          )}
+
+          <ProFormText
+            extra={t('marketPublish.modal.changelog.extra')}
+            label={t('marketPublish.modal.changelog.label')}
+            name="changelog"
+            placeholder={t('marketPublish.modal.changelog.placeholder')}
+            rules={[
+              { message: t('marketPublish.modal.changelog.required'), required: true },
+              { max: 500, message: t('marketPublish.modal.changelog.maxLengthError') },
+            ]}
+          />
+
+          {isUpload ? (
+            <Row gutter={24}>
+              <Col span={12}>
+                <div style={{ border: '1px solid #d9d9d9', borderRadius: '6px', padding: '16px' }}>
+                  <h3 style={{ marginBottom: '16px', textAlign: 'center' }}>
+                    {t('marketPublish.modal.comparison.remote')}
+                  </h3>
+                  {loadingRemoteData ? (
+                    <div style={{ padding: '40px', textAlign: 'center' }}>
+                      <Spin size="large" />
+                      <div style={{ marginTop: '16px' }}>
+                        {t('marketPublish.modal.loading.fetchingRemote')}
+                      </div>
+                    </div>
+                  ) : (
+                    <AgentInfoDescription isRemote={true} meta={remoteAgentData || undefined} />
+                  )}
+                </div>
+              </Col>
+              <Col span={12}>
+                <div style={{ border: '1px solid #d9d9d9', borderRadius: '6px', padding: '16px' }}>
+                  <h3 style={{ marginBottom: '16px', textAlign: 'center' }}>
+                    {t('marketPublish.modal.comparison.local')}
+                  </h3>
+                  <AgentInfoDescription
+                    agentConfig={agentConfig}
+                    chatConfig={chatConfig}
+                    files={files}
+                    knowledgeBases={knowledgeBases}
+                    meta={meta}
+                    model={model}
+                    plugins={plugins}
+                    provider={provider}
+                    systemRole={systemRole}
+                    ttsConfig={ttsConfig}
+                  />
+                </div>
+              </Col>
+            </Row>
+          ) : (
+            <div style={{ marginTop: 24 }}>
+              <AgentInfoDescription
+                agentConfig={agentConfig}
+                chatConfig={chatConfig}
+                files={files}
+                knowledgeBases={knowledgeBases}
+                meta={meta}
+                model={model}
+                plugins={plugins}
+                provider={provider}
+                systemRole={systemRole}
+                ttsConfig={ttsConfig}
+              />
+            </div>
+          )}
+        </ModalForm>
+
+        <PublishResultModal
+          identifier={publishResult.identifier}
+          onCancel={() => setShowResultModal(false)}
+          open={showResultModal}
+        />
+      </>
+    );
+  },
+);
+
+MarketPublishModal.displayName = 'MarketPublishModal';
+
+export default MarketPublishModal;

package/src/app/[variants]/(main)/chat/settings/features/SmartAgentActionButton/index.tsx

@@ -0,0 +1,75 @@
+import { Button } from '@lobehub/ui';
+import isEqual from 'fast-deep-equal';
+import { Loader2 } from 'lucide-react';
+import { memo, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { useAgentOwnershipCheck } from '@/hooks/useAgentOwnershipCheck';
+import { useSessionStore } from '@/store/session';
+import { sessionMetaSelectors } from '@/store/session/selectors';
+
+import MarketPublishButton from './MarketPublishButton';
+
+interface SmartAgentActionButtonProps {
+  modal?: boolean;
+}
+
+/**
+ * 智能Agent操作按钮组件
+ * 根据Agent的所有权自动决定显示"提交新Agent"还是"上传新版本"按钮
+ */
+const SmartAgentActionButton = memo<SmartAgentActionButtonProps>(({ modal }) => {
+  const { t } = useTranslation('setting');
+  const meta = useSessionStore(sessionMetaSelectors.currentAgentMeta, isEqual);
+  const { isOwnAgent } = useAgentOwnershipCheck(meta?.marketIdentifier);
+
+  const buttonType = useMemo(() => {
+    if (!meta?.marketIdentifier) {
+      return 'submit';
+    }
+
+    if (isOwnAgent === null) {
+      return 'loading';
+    }
+
+    if (isOwnAgent === true) {
+      return 'upload';
+    }
+
+    return 'submit';
+  }, [meta?.marketIdentifier, isOwnAgent]);
+
+  switch (buttonType) {
+    case 'upload': {
+      return (
+        <MarketPublishButton
+          action="upload"
+          marketIdentifier={meta?.marketIdentifier}
+          modal={modal}
+        />
+      );
+    }
+
+    case 'submit': {
+      return (
+        <MarketPublishButton
+          action="submit"
+          marketIdentifier={meta?.marketIdentifier}
+          modal={modal}
+        />
+      );
+    }
+
+    default: {
+      return (
+        <Button block={Boolean(modal)} disabled icon={Loader2} loading variant={'filled'}>
+          {t('checkingPermissions')}
+        </Button>
+      );
+    }
+  }
+});
+
+SmartAgentActionButton.displayName = 'SmartAgentActionButton';
+
+export default SmartAgentActionButton;

package/src/app/[variants]/(main)/discover/(detail)/assistant/AssistantDetailPage.tsx

@@ -5,8 +5,9 @@ import { Flexbox } from 'react-layout-kit';
 import { useParams } from 'react-router-dom';
 
 import { withSuspense } from '@/components/withSuspense';
+import { useQuery } from '@/hooks/useQuery';
 import { useDiscoverStore } from '@/store/discover';
-import { DiscoverTab } from '@/types/discover';
+import { AssistantMarketSource, DiscoverTab } from '@/types/discover';
 
 import NotFound from '../components/NotFound';
 import Breadcrumb from '../features/Breadcrumb';
@@ -14,6 +15,7 @@ import { TocProvider } from '../features/Toc/useToc';
 import { DetailProvider } from './[...slugs]/features/DetailProvider';
 import Details from './[...slugs]/features/Details';
 import Header from './[...slugs]/features/Header';
+import StatusPage from './[...slugs]/features/StatusPage';
 import Loading from './[...slugs]/loading';
 
 interface AssistantDetailPageProps {
@@ -24,13 +26,20 @@ const AssistantDetailPage = memo<AssistantDetailPageProps>(({ mobile }) => {
   const params = useParams();
   const slugs = params['*']?.split('/') || [];
   const identifier = decodeURIComponent(slugs.join('/'));
+  const { version, source } = useQuery() as { source?: AssistantMarketSource; version?: string };
 
   const useAssistantDetail = useDiscoverStore((s) => s.useAssistantDetail);
-  const { data, isLoading } = useAssistantDetail({ identifier });
+  const { data, isLoading } = useAssistantDetail({ identifier, source, version });
 
   if (isLoading) return <Loading />;
   if (!data) return <NotFound />;
 
+  // 检查助手状态
+  const status = (data as any)?.status;
+  if (status === 'unpublished' || status === 'archived' || status === 'deprecated') {
+    return <StatusPage status={status} />;
+  }
+
   return (
     <TocProvider>
       <DetailProvider config={data}>

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

@@ -5,12 +5,15 @@ import { memo } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
 import { withSuspense } from '@/components/withSuspense';
+import { useQuery } from '@/hooks/useQuery';
 import { useDiscoverStore } from '@/store/discover';
+import { AssistantMarketSource } from '@/types/discover';
 
 import { TocProvider } from '../../features/Toc/useToc';
 import { DetailProvider } from './features/DetailProvider';
 import Details from './features/Details';
 import Header from './features/Header';
+import StatusPage from './features/StatusPage';
 import Loading from './loading';
 
 interface ClientProps {
@@ -19,12 +22,20 @@ interface ClientProps {
 }
 
 const Client = memo<ClientProps>(({ identifier, mobile }) => {
+  const { version, source } = useQuery() as { source?: AssistantMarketSource; version?: string };
+  const marketSource = source as AssistantMarketSource | undefined;
   const useAssistantDetail = useDiscoverStore((s) => s.useAssistantDetail);
-  const { data, isLoading } = useAssistantDetail({ identifier });
+  const { data, isLoading } = useAssistantDetail({ identifier, source: marketSource, version });
 
   if (isLoading) return <Loading />;
   if (!data) return notFound();
 
+  // 检查助手状态
+  const status = (data as any)?.status;
+  if (status === 'unpublished' || status === 'archived' || status === 'deprecated') {
+    return <StatusPage status={status} />;
+  }
+
   return (
     <TocProvider>
       <DetailProvider config={data}>

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

@@ -2,7 +2,7 @@
 
 import { Icon, Tabs, Tag } from '@lobehub/ui';
 import { createStyles } from 'antd-style';
-import { BookOpenIcon, LayersIcon, ListIcon, SquareUserIcon } from 'lucide-react';
+import { BookOpenIcon, HistoryIcon, LayersIcon, ListIcon, SquareUserIcon } from 'lucide-react';
 import Link from 'next/link';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -10,7 +10,9 @@ import { Flexbox } from 'react-layout-kit';
 import urlJoin from 'url-join';
 
 import { SOCIAL_URL } from '@/const/branding';
-import { AssistantNavKey, McpNavKey } from '@/types/discover';
+import { AGENTS_INDEX_GITHUB, AGENTS_OFFICIAL_URL } from '@/const/url';
+import { useQuery } from '@/hooks/useQuery';
+import { AssistantNavKey } from '@/types/discover';
 
 import { useDetailContext } from '../DetailProvider';
 
@@ -38,6 +40,13 @@ const Nav = memo<NavProps>(({ mobile, setActiveTab, activeTab = AssistantNavKey.
   const { t } = useTranslation('discover');
   const { pluginCount, knowledgeCount, identifier } = useDetailContext();
   const { styles } = useStyles();
+  const { source } = useQuery() as { source?: string };
+  const isLegacy = source === 'legacy';
+  const marketplaceLink = identifier
+    ? isLegacy
+      ? urlJoin(AGENTS_INDEX_GITHUB, 'tree/main/locales', identifier)
+      : urlJoin(AGENTS_OFFICIAL_URL, identifier)
+    : undefined;
 
   const capabilitiesCount = Number(pluginCount) + Number(knowledgeCount);
 
@@ -76,9 +85,14 @@ const Nav = memo<NavProps>(({ mobile, setActiveTab, activeTab = AssistantNavKey.
               t('assistants.details.capabilities.title')
             ),
         },
+        {
+          icon: <Icon icon={HistoryIcon} size={16} />,
+          key: AssistantNavKey.Version,
+          label: t('assistants.details.version.title'),
+        },
         {
           icon: <Icon icon={ListIcon} size={16} />,
-          key: McpNavKey.Related,
+          key: AssistantNavKey.Related,
           label: t('assistants.details.related.title'),
         },
       ]}
@@ -95,15 +109,8 @@ const Nav = memo<NavProps>(({ mobile, setActiveTab, activeTab = AssistantNavKey.
         <Link className={styles.link} href={SOCIAL_URL.discord} target={'_blank'}>
           {t('mcp.details.nav.needHelp')}
         </Link>
-        {identifier && (
-          <Link
-            className={styles.link}
-            href={urlJoin(
-              'https://github.com/lobehub/lobe-chat-agents/tree/main/locales',
-              identifier,
-            )}
-            target={'_blank'}
-          >
+        {identifier && marketplaceLink && (
+          <Link className={styles.link} href={marketplaceLink} target={'_blank'}>
             {t('mcp.details.nav.viewSourceCode')}
           </Link>
         )}

package/src/app/[variants]/(main)/discover/(detail)/assistant/[...slugs]/features/Details/Overview/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/Overview/index.tsx

@@ -31,7 +31,9 @@ const Overview = memo(() => {
     backgroundColor,
     config,
   } = useDetailContext();
+  console.log('examples', examples);
 
+  console.log('summary', summary);
   const data: any = [
     {
       content: config?.openingMessage,

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

@@ -3,6 +3,9 @@ import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
+import { useQuery } from '@/hooks/useQuery';
+import { AssistantMarketSource } from '@/types/discover';
+
 import McpList from '../../../../../../(list)/assistant/features/List';
 import Title from '../../../../../../features/Title';
 import { useDetailContext } from '../../DetailProvider';
@@ -10,16 +13,22 @@ import { useDetailContext } from '../../DetailProvider';
 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>