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

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

@@ -0,0 +1,349 @@
+'use client';
+
+import { ProDescriptions } from '@ant-design/pro-components';
+import { AgentItemDetail } from '@lobehub/market-sdk';
+import { Tag } from 'antd';
+import Image from 'next/image';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+
+import Tokens from '@/features/AgentSetting/AgentPrompt/TokenTag';
+
+interface AgentConfig {
+  params?: {
+    max_tokens?: number;
+    temperature?: number;
+    top_p?: number;
+  };
+}
+
+interface ChatConfig {
+  displayMode?: string;
+  enableHistoryCount?: boolean;
+  historyCount?: number;
+  searchMode?: string;
+}
+
+interface TTSConfig {
+  ttsService?: string;
+  voice?: any;
+}
+
+interface AgentInfoDescriptionProps {
+  agentConfig?: AgentConfig;
+  chatConfig?: ChatConfig;
+  files?: Array<{
+    enabled?: boolean;
+    id: string;
+    name: string;
+    type: string;
+  }>;
+  isRemote?: boolean;
+  knowledgeBases?: Array<{
+    enabled?: boolean;
+    id: string;
+    name: string;
+  }>;
+  meta?: Partial<AgentItemDetail> & {
+    description?: string;
+    name?: string;
+    title?: string;
+  };
+  model?: string;
+  plugins?: string[];
+  provider?: string;
+  systemRole?: string;
+  ttsConfig?: TTSConfig;
+}
+
+const AgentInfoDescription = memo<AgentInfoDescriptionProps>(
+  ({
+    agentConfig,
+    chatConfig,
+    files = [],
+    isRemote = false,
+    knowledgeBases = [],
+    meta,
+    model,
+    plugins = [],
+    provider,
+    systemRole,
+    ttsConfig,
+  }) => {
+    const { t } = useTranslation('setting');
+    // 转换远程数据格式
+    const getProcessedData = () => {
+      if (!isRemote || !meta) {
+        return {
+          agentConfig,
+          chatConfig,
+          files,
+          knowledgeBases,
+          meta,
+          model,
+          plugins,
+          provider,
+          systemRole,
+          ttsConfig,
+        };
+      }
+
+      // 远程数据格式转换
+      const remoteData = meta;
+      const config = remoteData.config || {};
+
+      return {
+        agentConfig: {
+          params: config.model?.parameters || {},
+        },
+        chatConfig: config.chatConfig || {},
+        files: config.files || [],
+        knowledgeBases: config.knowledgeBases || [],
+        meta: {
+          avatar: remoteData?.avatar,
+          description: remoteData?.description,
+          name: remoteData?.versionName,
+          tags: remoteData?.tags ? [remoteData.tags] : undefined,
+          title: remoteData?.name,
+        },
+        model: config.model?.model,
+        plugins: config.plugins?.map((p: any) => (typeof p === 'string' ? p : p.identifier)) || [],
+        provider: config.model?.provider,
+        systemRole: config.systemRole,
+        ttsConfig: config.tts || {},
+      };
+    };
+
+    const {
+      agentConfig: processedAgentConfig,
+      chatConfig: processedChatConfig,
+      meta: processedMeta,
+      model: processedModel,
+      plugins: processedPlugins,
+      provider: processedProvider,
+      systemRole: processedSystemRole,
+    } = getProcessedData();
+    const unsetText = t('agentInfoDescription.value.unset');
+    const unnamedText = t('agentInfoDescription.value.untitled');
+    const pluginEmptyText = t('agentInfoDescription.plugins.empty');
+    const renderAvatar = (avatar: string | undefined) => {
+      if (!avatar || avatar === '未设置') return unsetText;
+
+      // 如果是 http 或 https 链接，显示图片
+      if (avatar.startsWith('http://') || avatar.startsWith('https://')) {
+        return (
+          <Image alt="avatar" height={40} src={avatar} style={{ borderRadius: '50%' }} width={40} />
+        );
+      }
+
+      // 否则直接显示字符（emoji）
+      return (
+        <div
+          style={{
+            fontSize: '24px',
+            height: 40,
+            lineHeight: '40px',
+            textAlign: 'center',
+            width: 40,
+          }}
+        >
+          {avatar}
+        </div>
+      );
+    };
+
+    return (
+      <div style={{ height: '500px', overflow: 'auto' }}>
+        <Flexbox gap={16}>
+          {/* 基础信息 */}
+          <ProDescriptions
+            bordered
+            column={2}
+            columns={[
+              {
+                dataIndex: 'title',
+                key: 'title',
+                title: t('agentInfoDescription.basic.name'),
+              },
+              {
+                dataIndex: 'avatar',
+                key: 'avatar',
+                render: (_: any, record: any) => renderAvatar(record.avatar),
+                title: t('agentInfoDescription.basic.avatar'),
+              },
+              {
+                dataIndex: 'description',
+                key: 'description',
+                span: 2,
+                title: t('agentInfoDescription.basic.description'),
+              },
+              {
+                dataIndex: 'tags',
+                key: 'tags',
+                render: (_: any, record: any) => {
+                  const tags = record.tags;
+                  if (!tags || !tags.length) return unsetText;
+                  return tags.map((tag: string, index: number) => (
+                    <Tag color="blue" key={index}>
+                      {tag}
+                    </Tag>
+                  ));
+                },
+                span: 2,
+                title: t('agentInfoDescription.basic.tags'),
+              },
+            ]}
+            dataSource={{
+              avatar: processedMeta?.avatar || unsetText,
+              description: processedMeta?.description || unsetText,
+              tags: processedMeta?.tags?.length ? processedMeta.tags : undefined,
+              title: processedMeta?.title || processedMeta?.name || unnamedText,
+            }}
+            size="small"
+            title={t('agentInfoDescription.basic.title')}
+          />
+
+          {/* 角色设定 */}
+          <ProDescriptions
+            bordered
+            column={1}
+            columns={[
+              {
+                dataIndex: 'systemRole',
+                key: 'systemRole',
+                render: (_: any, record: any) => {
+                  const text = record.systemRole;
+                  if (text === unsetText) return text;
+                  return text;
+                },
+                title: t('agentInfoDescription.role.systemRole'),
+              },
+            ]}
+            dataSource={{
+              systemRole: processedSystemRole || unsetText,
+            }}
+            size="small"
+            title={
+              <Flexbox align={'center'} gap={8} horizontal>
+                <span>{t('agentInfoDescription.role.title')}</span>
+                <Tokens style={{ marginTop: 0 }} value={processedSystemRole || ''} />
+              </Flexbox>
+            }
+          />
+
+          {/* 模型设置 */}
+          <ProDescriptions
+            bordered
+            column={2}
+            columns={[
+              {
+                dataIndex: 'model',
+                key: 'model',
+                title: t('agentInfoDescription.model.model'),
+              },
+              {
+                dataIndex: 'provider',
+                key: 'provider',
+                title: t('agentInfoDescription.model.provider'),
+              },
+              {
+                dataIndex: 'temperature',
+                key: 'temperature',
+                title: t('agentInfoDescription.model.temperature'),
+              },
+              {
+                dataIndex: 'topP',
+                key: 'topP',
+                title: 'Top P',
+              },
+              {
+                dataIndex: 'maxTokens',
+                key: 'maxTokens',
+                span: 2,
+                title: t('agentInfoDescription.model.maxTokens'),
+              },
+            ]}
+            dataSource={{
+              maxTokens: processedAgentConfig?.params?.max_tokens ?? unsetText,
+              model: processedModel || unsetText,
+              provider: processedProvider || unsetText,
+              temperature: processedAgentConfig?.params?.temperature ?? unsetText,
+              topP: processedAgentConfig?.params?.top_p ?? unsetText,
+            }}
+            size="small"
+            title={t('agentInfoDescription.model.title')}
+          />
+
+          {/* 聊天偏好 */}
+          <ProDescriptions
+            bordered
+            column={2}
+            columns={[
+              {
+                dataIndex: 'historyCount',
+                key: 'historyCount',
+                title: t('agentInfoDescription.chat.historyCount'),
+              },
+              {
+                dataIndex: 'enableHistoryCount',
+                key: 'enableHistoryCount',
+                title: t('agentInfoDescription.chat.enableHistoryCount'),
+              },
+              {
+                dataIndex: 'displayMode',
+                key: 'displayMode',
+                title: t('agentInfoDescription.chat.displayMode'),
+              },
+              {
+                dataIndex: 'searchMode',
+                key: 'searchMode',
+                title: t('agentInfoDescription.chat.searchMode'),
+              },
+            ]}
+            dataSource={{
+              displayMode: processedChatConfig?.displayMode || unsetText,
+              enableHistoryCount: processedChatConfig?.enableHistoryCount
+                ? t('agentInfoDescription.chat.yes')
+                : t('agentInfoDescription.chat.no'),
+              historyCount: processedChatConfig?.historyCount ?? unsetText,
+              searchMode: processedChatConfig?.searchMode || unsetText,
+            }}
+            size="small"
+            title={t('agentInfoDescription.chat.title')}
+          />
+
+          <ProDescriptions
+            bordered
+            column={1}
+            columns={[
+              {
+                dataIndex: 'plugins',
+                key: 'plugins',
+                render: (_: any, record: any) => {
+                  const pluginList = record.plugins;
+                  if (!pluginList?.length) return pluginEmptyText;
+                  return pluginList.map((plugin: string, index: number) => (
+                    <Tag color="green" key={index}>
+                      {plugin}
+                    </Tag>
+                  ));
+                },
+                title: t('agentInfoDescription.plugins.title'),
+              },
+            ]}
+            dataSource={{
+              plugins: processedPlugins?.length ? processedPlugins : [],
+            }}
+            size="small"
+            title={t('agentInfoDescription.plugins.count', {
+              count: processedPlugins?.length || 0,
+            })}
+          />
+        </Flexbox>
+      </div>
+    );
+  },
+);
+
+export default AgentInfoDescription;

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

@@ -1,9 +1,9 @@
 import { memo } from 'react';
 
-import SubmitAgentButton from './SubmitAgentButton';
+import SmartAgentActionButton from './SmartAgentActionButton';
 
 export const HeaderContent = memo<{ mobile?: boolean; modal?: boolean }>(({ modal }) => {
-  return <SubmitAgentButton modal={modal} />;
+  return <SmartAgentActionButton modal={modal} />;
 });
 
 export default HeaderContent;

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

@@ -0,0 +1,64 @@
+'use client';
+
+import { CheckCircleOutlined } from '@ant-design/icons';
+import { Button, Modal, Space } from 'antd';
+import { useRouter } from 'next/navigation';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+interface PublishResultModalProps {
+  identifier?: string;
+  onCancel: () => void;
+  open: boolean;
+}
+
+const PublishResultModal = memo<PublishResultModalProps>(({ identifier, onCancel, open }) => {
+  const router = useRouter();
+  const { t } = useTranslation('setting');
+  const { t: tCommon } = useTranslation('common');
+
+  const handleGoToMarket = () => {
+    if (identifier) {
+      router.push(`/discover/assistant/${identifier}`);
+    }
+    onCancel();
+  };
+
+  const successContent = (
+    <div style={{ padding: '20px 0', textAlign: 'center' }}>
+      <CheckCircleOutlined
+        style={{
+          color: '#52c41a',
+          display: 'block',
+          fontSize: '48px',
+          marginBottom: '16px',
+        }}
+      />
+      <div style={{ fontSize: '16px', marginBottom: '24px' }}>
+        {t('marketPublish.resultModal.message')}
+      </div>
+      <Space>
+        <Button onClick={onCancel}>{tCommon('cancel')}</Button>
+        <Button onClick={handleGoToMarket} type="primary">
+          {t('marketPublish.resultModal.view')}
+        </Button>
+      </Space>
+    </div>
+  );
+
+  return (
+    <Modal
+      centered
+      closable={false}
+      footer={null}
+      onCancel={onCancel}
+      open={open}
+      title={null}
+      width={480}
+    >
+      {successContent}
+    </Modal>
+  );
+});
+
+export default PublishResultModal;

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;