@lobehub/lobehub 2.0.0-next.295 → 2.0.0-next.297

package/src/app/[variants]/(main)/group/profile/features/GroupProfile/index.tsx

@@ -14,6 +14,7 @@ import { agentGroupSelectors } from '@/store/agentGroup/selectors';
 import { useGroupProfileStore } from '@/store/groupProfile';
 
 import AutoSaveHint from '../Header/AutoSaveHint';
+import GroupPublishButton from '../Header/GroupPublishButton';
 import GroupHeader from './GroupHeader';
 
 const GroupProfile = memo(() => {
@@ -75,6 +76,7 @@ const GroupProfile = memo(() => {
           >
             {t('startConversation')}
           </Button>
+          <GroupPublishButton />
         </Flexbox>
       </Flexbox>
       <Divider />

package/src/app/[variants]/(main)/group/profile/features/Header/AgentPublishButton/PublishResultModal.tsx

@@ -19,7 +19,8 @@ const PublishResultModal = memo<PublishResultModalProps>(({ identifier, onCancel
 
   const handleGoToMarket = () => {
     if (identifier) {
-      navigate(`/community/assistant/${identifier}`);
+      console.log('identifier', identifier);
+      navigate(`/community/group_agent/${identifier}`);
     }
     onCancel();
   };

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

@@ -0,0 +1,60 @@
+'use client';
+
+import { Avatar, Flexbox, Modal } from '@lobehub/ui';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import type { OriginalGroupInfo } from './types';
+
+interface GroupForkConfirmModalProps {
+  loading?: boolean;
+  onCancel: () => void;
+  onConfirm: () => void;
+  open: boolean;
+  originalGroup: OriginalGroupInfo | null;
+}
+
+const GroupForkConfirmModal = memo<GroupForkConfirmModalProps>(
+  ({ open, onCancel, onConfirm, originalGroup, loading }) => {
+    const { t } = useTranslation('setting');
+
+    if (!originalGroup) return null;
+
+    const authorName = originalGroup.author?.name || originalGroup.author?.userName || 'Unknown';
+
+    return (
+      <Modal
+        cancelText={t('cancel', { ns: 'common' })}
+        centered
+        closable
+        confirmLoading={loading}
+        okText={t('marketPublish.forkConfirm.confirmGroup')}
+        onCancel={onCancel}
+        onOk={onConfirm}
+        open={open}
+        title={t('marketPublish.forkConfirm.titleGroup')}
+        width={480}
+      >
+        <Flexbox gap={16} style={{ marginTop: 16 }}>
+          <Flexbox align="center" gap={12} horizontal>
+            <Avatar avatar={originalGroup.avatar} size={48} style={{ flex: 'none' }} />
+            <Flexbox gap={4}>
+              <div style={{ fontWeight: 500 }}>{originalGroup.name}</div>
+              <div style={{ fontSize: 12, opacity: 0.6 }}>
+                {t('marketPublish.forkConfirm.by', { author: authorName })}
+              </div>
+            </Flexbox>
+          </Flexbox>
+
+          <p style={{ lineHeight: 1.6, margin: 0 }}>
+            {t('marketPublish.forkConfirm.descriptionGroup')}
+          </p>
+        </Flexbox>
+      </Modal>
+    );
+  },
+);
+
+GroupForkConfirmModal.displayName = 'GroupForkConfirmModal';
+
+export default GroupForkConfirmModal;

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

@@ -0,0 +1,62 @@
+'use client';
+
+import { FluentEmoji, Modal, Text } from '@lobehub/ui';
+import { Result } from 'antd';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useNavigate } from 'react-router-dom';
+
+interface GroupPublishResultModalProps {
+  identifier?: string;
+  onCancel: () => void;
+  open: boolean;
+}
+
+const GroupPublishResultModal = memo<GroupPublishResultModalProps>(
+  ({ identifier, onCancel, open }) => {
+    const navigate = useNavigate();
+    const { t } = useTranslation('setting');
+    const { t: tCommon } = useTranslation('common');
+
+    const handleGoToMarket = () => {
+      if (identifier) {
+        navigate(`/community/group_agent/${identifier}`);
+      }
+      onCancel();
+    };
+
+    return (
+      <Modal
+        cancelText={tCommon('cancel')}
+        centered
+        okText={t('marketPublish.resultModal.view')}
+        onCancel={onCancel}
+        onOk={handleGoToMarket}
+        open={open}
+        title={null}
+        width={440}
+      >
+        <Result
+          icon={<FluentEmoji emoji={'🎉'} size={96} type={'anim'} />}
+          style={{
+            paddingBottom: 32,
+            paddingTop: 48,
+            width: '100%',
+          }}
+          subTitle={
+            <Text fontSize={14} type={'secondary'}>
+              {t('marketPublish.resultModal.messageGroup')}
+            </Text>
+          }
+          title={
+            <Text fontSize={28} weight={'bold'}>
+              {t('marketPublish.resultModal.title')}
+            </Text>
+          }
+        />
+      </Modal>
+    );
+  },
+);
+
+export default GroupPublishResultModal;

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

@@ -0,0 +1,122 @@
+import { Button } from '@lobehub/ui';
+import { ShapesUploadIcon } from '@lobehub/ui/icons';
+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 GroupForkConfirmModal from './GroupForkConfirmModal';
+import type { MarketPublishAction, OriginalGroupInfo } from './types';
+import { useMarketGroupPublish } from './useMarketGroupPublish';
+
+interface GroupPublishButtonProps {
+  action: MarketPublishAction;
+  onPublishSuccess?: (identifier: string) => void;
+}
+
+const PublishButton = memo<GroupPublishButtonProps>(({ action, onPublishSuccess }) => {
+  const { t } = useTranslation(['setting', 'marketAuth']);
+
+  const { isAuthenticated, isLoading, signIn } = useMarketAuth();
+  const { checkOwnership, isCheckingOwnership, isPublishing, publish } = useMarketGroupPublish({
+    action,
+    onSuccess: onPublishSuccess,
+  });
+
+  // Fork confirmation modal state
+  const [showForkModal, setShowForkModal] = useState(false);
+  const [originalGroupInfo, setOriginalGroupInfo] = useState<OriginalGroupInfo | null>(null);
+
+  const buttonConfig = useMemo(() => {
+    if (action === 'upload') {
+      return {
+        authenticated: t('marketPublish.uploadGroup.tooltip'),
+        unauthenticated: t('marketPublish.uploadGroup.tooltip'),
+      } as const;
+    }
+
+    const submitText = t('submitGroupModal.tooltips');
+
+    return {
+      authenticated: submitText,
+      unauthenticated: t('marketPublish.submitGroup.tooltip'),
+    } as const;
+  }, [action, t]);
+
+  const doPublish = useCallback(async () => {
+    // Check ownership before publishing
+    const { needsForkConfirm, originalGroup } = await checkOwnership();
+
+    if (needsForkConfirm && originalGroup) {
+      // Show fork confirmation modal
+      setOriginalGroupInfo(originalGroup);
+      setShowForkModal(true);
+      return;
+    }
+
+    // No confirmation needed, proceed with publish
+    await publish();
+  }, [checkOwnership, publish]);
+
+  const handleButtonClick = useCallback(async () => {
+    if (!isAuthenticated) {
+      try {
+        await signIn();
+        // After authentication, proceed with ownership check and publish
+        await doPublish();
+      } catch (error) {
+        console.error(`[GroupPublishButton][${action}] Authorization failed:`, error);
+        const normalizedError = resolveMarketAuthError(error);
+        message.error({
+          content: t(`errors.${normalizedError.code}`, { ns: 'marketAuth' }),
+          key: 'market-auth',
+        });
+      }
+      return;
+    }
+
+    // User is authenticated, check ownership and publish
+    await doPublish();
+  }, [action, doPublish, isAuthenticated, signIn, t]);
+
+  const handleForkConfirm = useCallback(async () => {
+    setShowForkModal(false);
+    setOriginalGroupInfo(null);
+    // User confirmed, proceed with publish
+    await publish();
+  }, [publish]);
+
+  const handleForkCancel = useCallback(() => {
+    setShowForkModal(false);
+    setOriginalGroupInfo(null);
+  }, []);
+
+  const buttonTitle = isAuthenticated ? buttonConfig.authenticated : buttonConfig.unauthenticated;
+  const loading = isLoading || isCheckingOwnership || isPublishing;
+
+  return (
+    <>
+      <Button
+        icon={ShapesUploadIcon}
+        loading={loading}
+        onClick={handleButtonClick}
+        title={buttonTitle}
+      >
+        {t('publishToCommunity')}
+      </Button>
+      <GroupForkConfirmModal
+        loading={isPublishing}
+        onCancel={handleForkCancel}
+        onConfirm={handleForkConfirm}
+        open={showForkModal}
+        originalGroup={originalGroupInfo}
+      />
+    </>
+  );
+});
+
+PublishButton.displayName = 'GroupPublishButton';
+
+export default PublishButton;

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

@@ -0,0 +1,46 @@
+import isEqual from 'fast-deep-equal';
+import { memo, useCallback, useState } from 'react';
+
+import { useAgentGroupStore } from '@/store/agentGroup';
+import { agentGroupSelectors } from '@/store/agentGroup/selectors';
+
+import GroupPublishResultModal from './GroupPublishResultModal';
+import PublishButton from './PublishButton';
+
+/**
+ * Group Publish Button Component
+ *
+ * Simplified version - backend handles ownership check automatically.
+ * The action type (submit vs upload) is determined by backend based on:
+ * 1. Whether the identifier exists
+ * 2. Whether the current user is the owner
+ */
+const GroupPublishButton = memo(() => {
+  const currentGroup = useAgentGroupStore(agentGroupSelectors.currentGroup, isEqual);
+
+  const [showResultModal, setShowResultModal] = useState(false);
+  const [publishedIdentifier, setPublishedIdentifier] = useState<string>();
+
+  const handlePublishSuccess = useCallback((identifier: string) => {
+    setPublishedIdentifier(identifier);
+    setShowResultModal(true);
+  }, []);
+
+  // Determine action based on whether we have an existing marketIdentifier
+  // Backend will verify ownership and decide to create new or update
+  // marketIdentifier is stored in editorData
+  const action = currentGroup?.editorData?.marketIdentifier ? 'upload' : 'submit';
+
+  return (
+    <>
+      <PublishButton action={action} onPublishSuccess={handlePublishSuccess} />
+      <GroupPublishResultModal
+        identifier={publishedIdentifier}
+        onCancel={() => setShowResultModal(false)}
+        open={showResultModal}
+      />
+    </>
+  );
+});
+
+export default GroupPublishButton;

package/src/app/[variants]/(main)/group/profile/features/Header/GroupPublishButton/types.ts

@@ -0,0 +1,12 @@
+export type MarketPublishAction = 'submit' | 'upload';
+
+export interface OriginalGroupInfo {
+  author?: {
+    avatar?: string;
+    name?: string;
+    userName?: string;
+  };
+  avatar?: string;
+  identifier: string;
+  name: string;
+}

package/src/app/[variants]/(main)/group/profile/features/Header/GroupPublishButton/useMarketGroupPublish.ts

@@ -0,0 +1,211 @@
+import isEqual from 'fast-deep-equal';
+import { useCallback, useRef, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { message } from '@/components/AntdStaticMethods';
+import { useMarketAuth } from '@/layout/AuthProvider/MarketAuth';
+import { lambdaClient } from '@/libs/trpc/client';
+import { useAgentGroupStore } from '@/store/agentGroup';
+import { agentGroupSelectors } from '@/store/agentGroup/selectors';
+import { useGlobalStore } from '@/store/global';
+import { globalGeneralSelectors } from '@/store/global/selectors';
+
+import type { MarketPublishAction, OriginalGroupInfo } from './types';
+import { generateDefaultChangelog } from './utils';
+
+interface UseMarketGroupPublishOptions {
+  action: MarketPublishAction;
+  onSuccess?: (identifier: string) => void;
+}
+
+export interface CheckOwnershipResult {
+  needsForkConfirm: boolean;
+  originalGroup: OriginalGroupInfo | null;
+}
+
+export const useMarketGroupPublish = ({ action, onSuccess }: UseMarketGroupPublishOptions) => {
+  const { t } = useTranslation('setting');
+  const [isPublishing, setIsPublishing] = useState(false);
+  const [isCheckingOwnership, setIsCheckingOwnership] = useState(false);
+  const isPublishingRef = useRef(false);
+  const { isAuthenticated } = useMarketAuth();
+
+  // Group data from store
+  const currentGroup = useAgentGroupStore(agentGroupSelectors.currentGroup);
+  const currentGroupMeta = useAgentGroupStore(agentGroupSelectors.currentGroupMeta, isEqual);
+  const currentGroupConfig = useAgentGroupStore(agentGroupSelectors.currentGroupConfig, isEqual);
+  const currentGroupAgents = useAgentGroupStore(agentGroupSelectors.currentGroupAgents);
+  const updateGroupMeta = useAgentGroupStore((s) => s.updateGroupMeta);
+  const language = useGlobalStore(globalGeneralSelectors.currentLanguage);
+
+  const isSubmit = action === 'submit';
+
+  /**
+   * Check ownership before publishing
+   * Returns whether fork confirmation is needed and original group info
+   */
+  const checkOwnership = useCallback(async (): Promise<CheckOwnershipResult> => {
+    // marketIdentifier is stored in editorData
+    const identifier = currentGroup?.editorData?.marketIdentifier as string | undefined;
+
+    // No identifier means new group, no need to check
+    if (!identifier) {
+      return { needsForkConfirm: false, originalGroup: null };
+    }
+
+    try {
+      setIsCheckingOwnership(true);
+      const result = await lambdaClient.market.agentGroup.checkOwnership.query({ identifier });
+
+      // If group doesn't exist or user is owner, no confirmation needed
+      if (!result.exists || result.isOwner) {
+        return { needsForkConfirm: false, originalGroup: null };
+      }
+
+      // User is not owner, need fork confirmation
+      return {
+        needsForkConfirm: true,
+        originalGroup: result.originalGroup as OriginalGroupInfo,
+      };
+    } catch (error) {
+      console.error('[useMarketGroupPublish] Failed to check ownership:', error);
+      // On error, proceed without confirmation
+      return { needsForkConfirm: false, originalGroup: null };
+    } finally {
+      setIsCheckingOwnership(false);
+    }
+  }, [currentGroup]);
+
+  const publish = useCallback(async () => {
+    // Prevent duplicate publishing
+    if (isPublishingRef.current) {
+      return { success: false };
+    }
+
+    // Check authentication
+    if (!isAuthenticated) {
+      return { success: false };
+    }
+
+    if (!currentGroup) {
+      message.error({ content: t('marketPublish.modal.messages.noGroup') });
+      return { success: false };
+    }
+
+    const messageKey = isSubmit ? 'submit-group' : 'upload-group-version';
+    const loadingMessage = isSubmit
+      ? t('marketPublish.modal.loading.submitGroup')
+      : t('marketPublish.modal.loading.uploadGroup');
+
+    const changelog = generateDefaultChangelog();
+
+    try {
+      isPublishingRef.current = true;
+      setIsPublishing(true);
+      message.loading({ content: loadingMessage, key: messageKey });
+
+      // Prepare member agents data
+      const memberAgents = currentGroupAgents.map((agent, index) => ({
+        // Only include avatar if it's not null/undefined
+        ...(agent.avatar ? { avatar: agent.avatar } : {}),
+        config: {
+          // Include agent configuration
+          model: agent.model,
+          params: agent.params,
+          systemRole: agent.systemRole,
+        },
+        // Market requires at least 1 character for description
+        description: agent.description || 'No description provided',
+        displayOrder: index,
+        identifier: agent.id, // Use local agent ID as identifier
+        name: agent.title || 'Untitled Agent',
+        role: agent.isSupervisor ? ('supervisor' as const) : ('participant' as const),
+        // TODO: Construct proper A2A URL for the agent
+        url: `https://api.lobehub.com/a2a/agents/${agent.id}`,
+      }));
+
+      // Use tRPC publishOrCreate
+      const result = await lambdaClient.market.agentGroup.publishOrCreate.mutate({
+        // Only include avatar if it's not null/undefined
+        ...(currentGroupMeta.avatar ? { avatar: currentGroupMeta.avatar } : {}),
+        // Only include backgroundColor if it's not null/undefined
+        ...(currentGroup.backgroundColor ? { backgroundColor: currentGroup.backgroundColor } : {}),
+        category: 'productivity', // TODO: Allow user to select category
+        changelog,
+        // Include group-level config (systemPrompt from content, openingMessage, etc.)
+        config: {
+          // Group systemPrompt is stored in currentGroup.content
+          ...(currentGroup.content !== undefined &&
+            currentGroup.content !== null && {
+              systemPrompt: currentGroup.content,
+            }),
+          ...(currentGroupConfig.openingMessage !== undefined && {
+            openingMessage: currentGroupConfig.openingMessage,
+          }),
+          ...(currentGroupConfig.openingQuestions !== undefined &&
+            currentGroupConfig.openingQuestions.length > 0 && {
+            openingQuestions: currentGroupConfig.openingQuestions,
+          }),
+          ...(currentGroupConfig.allowDM !== undefined && { allowDM: currentGroupConfig.allowDM }),
+          ...(currentGroupConfig.revealDM !== undefined && { revealDM: currentGroupConfig.revealDM }),
+        },
+        // Market requires at least 1 character for description
+        description: currentGroupMeta.description || 'No description provided',
+        // marketIdentifier is stored in editorData
+        identifier: currentGroup.editorData?.marketIdentifier as string | undefined,
+        memberAgents,
+        name: currentGroupMeta.title || 'Untitled Group',
+        visibility: 'public', // TODO: Allow user to select visibility
+      });
+
+      // Save marketIdentifier to editorData if new group
+      if (result.isNewGroup) {
+        await updateGroupMeta({
+          editorData: {
+            ...currentGroup.editorData,
+            marketIdentifier: result.identifier,
+          },
+        });
+      }
+
+      message.success({
+        content: t('submitAgentModal.success'),
+        key: messageKey,
+      });
+
+      onSuccess?.(result.identifier);
+      return { identifier: result.identifier, success: true };
+    } catch (error) {
+      const errorMessage =
+        error instanceof Error ? error.message : t('unknownError', { ns: 'common' });
+      message.error({
+        content: t('marketPublish.modal.messages.publishFailed', {
+          message: errorMessage,
+        }),
+        key: messageKey,
+      });
+      return { success: false };
+    } finally {
+      isPublishingRef.current = false;
+      setIsPublishing(false);
+    }
+  }, [
+    currentGroup,
+    currentGroupAgents,
+    currentGroupConfig,
+    currentGroupMeta,
+    isAuthenticated,
+    isSubmit,
+    language,
+    onSuccess,
+    t,
+    updateGroupMeta,
+  ]);
+
+  return {
+    checkOwnership,
+    isCheckingOwnership,
+    isPublishing,
+    publish,
+  };
+};

package/src/app/[variants]/(main)/group/profile/features/Header/GroupPublishButton/utils.ts

@@ -0,0 +1,22 @@
+import { customAlphabet } from 'nanoid/non-secure';
+
+/**
+ * Generate a market identifier (8-character lowercase alphanumeric string)
+ * Format: [a-z0-9]{8}
+ * @returns A unique 8-character market identifier
+ */
+export const generateMarketIdentifier = () => {
+  const alphabet = '0123456789abcdefghijklmnopqrstuvwxyz';
+  const generate = customAlphabet(alphabet, 8);
+  return generate();
+};
+
+/**
+ * Generate a default changelog based on current timestamp
+ * @returns A timestamp-based changelog string
+ */
+export const generateDefaultChangelog = () => {
+  const now = new Date();
+  const formattedDate = now.toISOString().split('T')[0];
+  return `Release ${formattedDate}`;
+};

package/src/app/[variants]/(main)/resource/features/DndContextWrapper.tsx

@@ -193,14 +193,16 @@ export const DndContextWrapper = memo<PropsWithChildren>(({ children }) => {
 
     document.addEventListener('dragstart', handleDragStart);
     document.addEventListener('drag', handleDrag);
-    document.addEventListener('drop', handleDrop);
+    // Use capture phase so drops still work even if some UI stops propagation
+    // (e.g., header dropdowns / menus).
+    document.addEventListener('drop', handleDrop, true);
     document.addEventListener('dragover', handleDragOver);
     document.addEventListener('dragend', handleDragEnd);
 
     return () => {
       document.removeEventListener('dragstart', handleDragStart);
       document.removeEventListener('drag', handleDrag);
-      document.removeEventListener('drop', handleDrop);
+      document.removeEventListener('drop', handleDrop, true);
       document.removeEventListener('dragover', handleDragOver);
       document.removeEventListener('dragend', handleDragEnd);
     };