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

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

@@ -0,0 +1,196 @@
+import { ActionIcon, Button } from '@lobehub/ui';
+import { message } from 'antd';
+import { LogIn, Share2, Upload } from 'lucide-react';
+import { memo, useCallback, useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { HEADER_ICON_SIZE } from '@/const/layoutTokens';
+import { checkOwnership } from '@/hooks/useAgentOwnershipCheck';
+import { useMarketAuth } from '@/layout/AuthProvider/MarketAuth';
+import { resolveMarketAuthError } from '@/layout/AuthProvider/MarketAuth/errors';
+import { useServerConfigStore } from '@/store/serverConfig';
+
+import MarketPublishModal, { type MarketPublishAction } from './MarketPublishModal';
+
+interface MarketPublishButtonProps {
+  action: MarketPublishAction;
+  marketIdentifier?: string;
+  modal?: boolean;
+}
+
+const MarketPublishButton = memo<MarketPublishButtonProps>(
+  ({ action, marketIdentifier, modal }) => {
+    const { t: tSetting } = useTranslation('setting');
+    const { t: tMarketAuth } = useTranslation('marketAuth');
+    const mobile = useServerConfigStore((s) => s.isMobile);
+    const [openState, setOpenState] = useState<{ submit: boolean; upload: boolean }>({
+      submit: false,
+      upload: false,
+    });
+    const { isAuthenticated, isLoading, session, signIn } = useMarketAuth();
+
+    const buttonCopy = useMemo(() => {
+      if (action === 'upload') {
+        return {
+          authenticated: {
+            icon: Upload,
+            text: tSetting('marketPublish.upload.button'),
+            title: tSetting('marketPublish.upload.tooltip'),
+          },
+          successMessage: tMarketAuth('messages.success.upload'),
+          unauthenticated: {
+            icon: LogIn,
+            text: tSetting('marketPublish.upload.button'),
+            title: tSetting('marketPublish.upload.tooltip'),
+          },
+        } as const;
+      }
+
+      const submitText = tSetting('submitAgentModal.tooltips');
+
+      return {
+        authenticated: {
+          icon: Share2,
+          text: submitText,
+          title: submitText,
+        },
+        successMessage: tMarketAuth('messages.success.submit'),
+        unauthenticated: {
+          icon: LogIn,
+          text: tSetting('marketPublish.submit.button'),
+          title: tSetting('marketPublish.submit.tooltip'),
+        },
+      } as const;
+    }, [action, tMarketAuth, tSetting]);
+
+    const openModal = useCallback((target: MarketPublishAction) => {
+      setOpenState((prev) => ({ ...prev, [target]: true }));
+    }, []);
+
+    const closeModal = useCallback((target: MarketPublishAction) => {
+      setOpenState((prev) => ({ ...prev, [target]: false }));
+    }, []);
+
+    const handleButtonClick = useCallback(async () => {
+      console.log(
+        `[MarketPublishButton][${action}] Button clicked, isAuthenticated:`,
+        isAuthenticated,
+      );
+
+      if (isAuthenticated) {
+        console.log(`[MarketPublishButton][${action}] User is authenticated, opening modal`);
+        openModal(action);
+        return;
+      }
+
+      console.log(
+        `[MarketPublishButton][${action}] User not authenticated, starting authorization`,
+      );
+      try {
+        message.loading({ content: tMarketAuth('messages.loading'), key: 'market-auth' });
+        const accountId = await signIn();
+        message.success({ content: buttonCopy.successMessage, key: 'market-auth' });
+
+        let targetAction: MarketPublishAction = action;
+
+        if (marketIdentifier && accountId !== null) {
+          let accessToken = session?.accessToken;
+
+          if (!accessToken && typeof window !== 'undefined') {
+            const storedSession = sessionStorage.getItem('market_auth_session');
+            if (storedSession) {
+              try {
+                const parsed = JSON.parse(storedSession) as { accessToken?: string };
+                accessToken = parsed.accessToken;
+              } catch (parseError) {
+                console.error('[MarketPublishButton] Failed to parse stored session:', parseError);
+              }
+            }
+          }
+
+          if (accessToken) {
+            try {
+              const isOwner = await checkOwnership({
+                accessToken,
+                accountId,
+                marketIdentifier,
+                skipCache: true,
+              });
+
+              targetAction = isOwner ? 'upload' : 'submit';
+            } catch (ownershipError) {
+              console.error('[MarketPublishButton] Failed to confirm ownership:', ownershipError);
+            }
+          }
+        }
+
+        openModal(targetAction);
+      } catch (error) {
+        console.error(`[MarketPublishButton][${action}] Authorization failed:`, error);
+        const normalizedError = resolveMarketAuthError(error);
+        message.error({
+          content: tMarketAuth(`errors.${normalizedError.code}`),
+          key: 'market-auth',
+        });
+      }
+    }, [
+      action,
+      buttonCopy.successMessage,
+      isAuthenticated,
+      marketIdentifier,
+      openModal,
+      session?.accessToken,
+      signIn,
+      tMarketAuth,
+    ]);
+
+    const buttonProps = isAuthenticated ? buttonCopy.authenticated : buttonCopy.unauthenticated;
+
+    return (
+      <>
+        {modal ? (
+          <Button
+            block
+            disabled={isLoading}
+            icon={buttonProps.icon}
+            loading={isLoading}
+            onClick={handleButtonClick}
+            variant={'filled'}
+          >
+            {buttonProps.text}
+          </Button>
+        ) : (
+          <ActionIcon
+            icon={buttonProps.icon}
+            loading={isLoading}
+            onClick={handleButtonClick}
+            size={HEADER_ICON_SIZE(mobile)}
+            title={buttonProps.title}
+          />
+        )}
+
+        {isAuthenticated && (
+          <>
+            <MarketPublishModal
+              action="submit"
+              onCancel={() => closeModal('submit')}
+              onSuccess={() => closeModal('submit')}
+              open={openState.submit}
+            />
+
+            <MarketPublishModal
+              action="upload"
+              onCancel={() => closeModal('upload')}
+              onSuccess={() => closeModal('upload')}
+              open={openState.upload}
+            />
+          </>
+        )}
+      </>
+    );
+  },
+);
+
+MarketPublishButton.displayName = 'MarketPublishButton';
+
+export default MarketPublishButton;

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}>