🐛 fix: add the preview publish to market button preview check (#12105)

feat: add the preview publish to market button preview check

locales/en-US/setting.json

@@ -268,6 +268,9 @@
   "marketPublish.upload.button": "Publish New Version",
   "marketPublish.upload.tooltip": "Publish a new version to Agent Community",
   "marketPublish.uploadGroup.tooltip": "Publish a new version to Group Community",
+  "marketPublish.validation.confirmPublish": "Are you sure you want to publish to the market?",
+  "marketPublish.validation.emptyName": "Cannot publish: Name is required",
+  "marketPublish.validation.emptySystemRole": "Cannot publish: System Role is required",
   "memory.enabled.desc": "Allow LobeHub to extract preferences and info from conversations and use them later. You can view, edit, or clear memory anytime.",
   "memory.enabled.title": "Enable Memory",
   "memory.title": "Memory Settings",

locales/zh-CN/setting.json

@@ -268,6 +268,9 @@
   "marketPublish.upload.button": "发布新版本",
   "marketPublish.upload.tooltip": "发布新版本到助理社区",
   "marketPublish.uploadGroup.tooltip": "向群组社区发布新版本",
+  "marketPublish.validation.confirmPublish": "确定要发布到市场吗？",
+  "marketPublish.validation.emptyName": "无法发布：名称不能为空",
+  "marketPublish.validation.emptySystemRole": "无法发布：系统角色不能为空",
   "memory.enabled.desc": "允许 LobeHub 从对话中提取偏好和信息，并在之后使用。您可以随时查看、编辑或清除记忆内容。",
   "memory.enabled.title": "启用记忆功能",
   "memory.title": "记忆设置",

src/app/[variants]/(main)/agent/profile/features/Header/AgentPublishButton/PublishButton.tsx

@@ -1,11 +1,15 @@
 import { Button } from '@lobehub/ui';
 import { ShapesUploadIcon } from '@lobehub/ui/icons';
+import { Popconfirm } from 'antd';
+import isEqual from 'fast-deep-equal';
 import { memo, useCallback, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { message } from '@/components/AntdStaticMethods';
 import { useMarketAuth } from '@/layout/AuthProvider/MarketAuth';
 import { resolveMarketAuthError } from '@/layout/AuthProvider/MarketAuth/errors';
+import { useAgentStore } from '@/store/agent';
+import { agentSelectors } from '@/store/agent/selectors';
 
 import ForkConfirmModal from './ForkConfirmModal';
 import type { MarketPublishAction } from './types';
@@ -25,10 +29,17 @@ const PublishButton = memo<MarketPublishButtonProps>(({ action, onPublishSuccess
     onSuccess: onPublishSuccess,
   });
 
+  // Agent data for validation
+  const meta = useAgentStore(agentSelectors.currentAgentMeta, isEqual);
+  const systemRole = useAgentStore(agentSelectors.currentAgentSystemRole);
+
   // Fork confirmation modal state
   const [showForkModal, setShowForkModal] = useState(false);
   const [originalAgentInfo, setOriginalAgentInfo] = useState<OriginalAgentInfo | null>(null);
 
+  // Publish confirmation popconfirm state
+  const [confirmOpened, setConfirmOpened] = useState(false);
+
   const buttonConfig = useMemo(() => {
     if (action === 'upload') {
       return {
@@ -60,7 +71,25 @@ const PublishButton = memo<MarketPublishButtonProps>(({ action, onPublishSuccess
     await publish();
   }, [checkOwnership, publish]);
 
-  const handleButtonClick = useCallback(async () => {
+  const handleButtonClick = useCallback(() => {
+    // Validate name and systemRole
+    if (!meta?.title || meta.title.trim() === '') {
+      message.error({ content: t('marketPublish.validation.emptyName') });
+      return;
+    }
+
+    if (!systemRole || systemRole.trim() === '') {
+      message.error({ content: t('marketPublish.validation.emptySystemRole') });
+      return;
+    }
+
+    // Open popconfirm for user confirmation
+    setConfirmOpened(true);
+  }, [meta?.title, systemRole, t]);
+
+  const handleConfirmPublish = useCallback(async () => {
+    setConfirmOpened(false);
+
     if (!isAuthenticated) {
       try {
         await signIn();
@@ -98,14 +127,29 @@ const PublishButton = memo<MarketPublishButtonProps>(({ action, onPublishSuccess
 
   return (
     <>
-      <Button
-        icon={ShapesUploadIcon}
-        loading={loading}
-        onClick={handleButtonClick}
-        title={buttonTitle}
+      <Popconfirm
+        arrow={false}
+        okButtonProps={{ type: 'primary' }}
+        onCancel={() => setConfirmOpened(false)}
+        onConfirm={handleConfirmPublish}
+        onOpenChange={(open) => {
+          if (!open) {
+            setConfirmOpened(false);
+          }
+        }}
+        open={confirmOpened}
+        placement="bottomRight"
+        title={t('marketPublish.validation.confirmPublish')}
       >
-        {t('publishToCommunity')}
-      </Button>
+        <Button
+          icon={ShapesUploadIcon}
+          loading={loading}
+          onClick={handleButtonClick}
+          title={buttonTitle}
+        >
+          {t('publishToCommunity')}
+        </Button>
+      </Popconfirm>
       <ForkConfirmModal
         loading={isPublishing}
         onCancel={handleForkCancel}

src/app/[variants]/(main)/group/profile/features/Header/GroupPublishButton/PublishButton.tsx

@@ -1,11 +1,15 @@
 import { Button } from '@lobehub/ui';
 import { ShapesUploadIcon } from '@lobehub/ui/icons';
+import { Popconfirm } from 'antd';
+import isEqual from 'fast-deep-equal';
 import { memo, useCallback, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { message } from '@/components/AntdStaticMethods';
 import { useMarketAuth } from '@/layout/AuthProvider/MarketAuth';
 import { resolveMarketAuthError } from '@/layout/AuthProvider/MarketAuth/errors';
+import { useAgentGroupStore } from '@/store/agentGroup';
+import { agentGroupSelectors } from '@/store/agentGroup/selectors';
 
 import GroupForkConfirmModal from './GroupForkConfirmModal';
 import type { MarketPublishAction, OriginalGroupInfo } from './types';
@@ -25,10 +29,17 @@ const PublishButton = memo<GroupPublishButtonProps>(({ action, onPublishSuccess
     onSuccess: onPublishSuccess,
   });
 
+  // Group data for validation
+  const currentGroupMeta = useAgentGroupStore(agentGroupSelectors.currentGroupMeta, isEqual);
+  const currentGroup = useAgentGroupStore(agentGroupSelectors.currentGroup);
+
   // Fork confirmation modal state
   const [showForkModal, setShowForkModal] = useState(false);
   const [originalGroupInfo, setOriginalGroupInfo] = useState<OriginalGroupInfo | null>(null);
 
+  // Publish confirmation popconfirm state
+  const [confirmOpened, setConfirmOpened] = useState(false);
+
   const buttonConfig = useMemo(() => {
     if (action === 'upload') {
       return {
@@ -60,7 +71,25 @@ const PublishButton = memo<GroupPublishButtonProps>(({ action, onPublishSuccess
     await publish();
   }, [checkOwnership, publish]);
 
-  const handleButtonClick = useCallback(async () => {
+  const handleButtonClick = useCallback(() => {
+    // Validate name and systemRole (stored in content)
+    if (!currentGroupMeta?.title || currentGroupMeta.title.trim() === '') {
+      message.error({ content: t('marketPublish.validation.emptyName') });
+      return;
+    }
+
+    if (!currentGroup?.content || currentGroup.content.trim() === '') {
+      message.error({ content: t('marketPublish.validation.emptySystemRole') });
+      return;
+    }
+
+    // Open popconfirm for user confirmation
+    setConfirmOpened(true);
+  }, [currentGroupMeta?.title, currentGroup?.content, t]);
+
+  const handleConfirmPublish = useCallback(async () => {
+    setConfirmOpened(false);
+
     if (!isAuthenticated) {
       try {
         await signIn();
@@ -98,14 +127,29 @@ const PublishButton = memo<GroupPublishButtonProps>(({ action, onPublishSuccess
 
   return (
     <>
-      <Button
-        icon={ShapesUploadIcon}
-        loading={loading}
-        onClick={handleButtonClick}
-        title={buttonTitle}
+      <Popconfirm
+        arrow={false}
+        okButtonProps={{ type: 'primary' }}
+        onCancel={() => setConfirmOpened(false)}
+        onConfirm={handleConfirmPublish}
+        onOpenChange={(open) => {
+          if (!open) {
+            setConfirmOpened(false);
+          }
+        }}
+        open={confirmOpened}
+        placement="bottomRight"
+        title={t('marketPublish.validation.confirmPublish')}
       >
-        {t('publishToCommunity')}
-      </Button>
+        <Button
+          icon={ShapesUploadIcon}
+          loading={loading}
+          onClick={handleButtonClick}
+          title={buttonTitle}
+        >
+          {t('publishToCommunity')}
+        </Button>
+      </Popconfirm>
       <GroupForkConfirmModal
         loading={isPublishing}
         onCancel={handleForkCancel}

src/locales/default/setting.ts

@@ -294,6 +294,9 @@ export default {
   'marketPublish.upload.button': 'Publish New Version',
   'marketPublish.upload.tooltip': 'Publish a new version to Agent Community',
   'marketPublish.uploadGroup.tooltip': 'Publish a new version to Group Community',
+  'marketPublish.validation.confirmPublish': 'Are you sure you want to publish to the market?',
+  'marketPublish.validation.emptyName': 'Cannot publish: Name is required',
+  'marketPublish.validation.emptySystemRole': 'Cannot publish: System Role is required',
   'memory.enabled.desc':
     'Allow LobeHub to extract preferences and info from conversations and use them later. You can view, edit, or clear memory anytime.',
   'memory.enabled.title': 'Enable Memory',