@lobehub/lobehub 2.0.0-next.296 → 2.0.0-next.298

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)/home/_layout/HomeAgentIdSync.tsx

@@ -0,0 +1,23 @@
+import { useUnmount } from 'ahooks';
+import { createStoreUpdater } from 'zustand-utils';
+
+import { useAgentStore } from '@/store/agent';
+import { builtinAgentSelectors } from '@/store/agent/selectors';
+
+const HomeAgentIdSync = () => {
+  const useAgentStoreUpdater = createStoreUpdater(useAgentStore);
+
+  const inboxAgentId = useAgentStore(builtinAgentSelectors.inboxAgentId);
+
+  // Sync inbox agent id to activeAgentId when on home page
+  useAgentStoreUpdater('activeAgentId', inboxAgentId);
+
+  // Clear activeAgentId when unmounting (leaving home page)
+  useUnmount(() => {
+    useAgentStore.setState({ activeAgentId: undefined });
+  });
+
+  return null;
+};
+
+export default HomeAgentIdSync;

package/src/app/[variants]/(main)/home/_layout/index.tsx

@@ -6,6 +6,7 @@ import { Outlet, useLocation, useNavigate } from 'react-router-dom';
 import { useIsDark } from '@/hooks/useIsDark';
 import { useHomeStore } from '@/store/home';
 
+import HomeAgentIdSync from './HomeAgentIdSync';
 import RecentHydration from './RecentHydration';
 import Sidebar from './Sidebar';
 import { styles } from './style';
@@ -56,6 +57,7 @@ const Layout: FC<LayoutProps> = ({ children }) => {
           {content}
         </Flexbox>
 
+        <HomeAgentIdSync />
         <RecentHydration />
       </Flexbox>
     </Activity>

package/src/app/[variants]/router/desktopRouter.config.tsx

@@ -168,6 +168,13 @@ export const desktopRoutes: RouteConfig[] = [
                 ),
                 path: 'assistant/:slug',
               },
+              {
+                element: dynamicElement(
+                  () => import('../(main)/community/(detail)/group_agent'),
+                  'Desktop > Discover > Detail > Group Agent',
+                ),
+                path: 'group_agent/:slug',
+              },
               {
                 element: dynamicElement(
                   () => import('../(main)/community/(detail)/model'),

package/src/locales/default/setting.ts

@@ -187,9 +187,13 @@ export default {
   'llm.waitingForMoreLinkAriaLabel': 'Open the Provider request form',
   'marketPublish.forkConfirm.by': 'by {{author}}',
   'marketPublish.forkConfirm.confirm': 'Confirm Publish',
+  'marketPublish.forkConfirm.confirmGroup': 'Confirm Publish',
   'marketPublish.forkConfirm.description':
     'You are about to publish a derivative version based on an existing agent from the community. Your new agent will be created as a separate entry in the marketplace.',
+  'marketPublish.forkConfirm.descriptionGroup':
+    'You are about to publish a derivative version based on an existing group from the community. Your new group will be created as a separate entry in the marketplace.',
   'marketPublish.forkConfirm.title': 'Publish Derivative Agent',
+  'marketPublish.forkConfirm.titleGroup': 'Publish Derivative Group',
   'marketPublish.modal.changelog.extra':
     'Describe the key changes and improvements in this version',
   'marketPublish.modal.changelog.label': 'Changelog',
@@ -209,11 +213,14 @@ export default {
   'marketPublish.modal.identifier.required': 'Please enter the agent identifier',
   'marketPublish.modal.loading.fetchingRemote': 'Loading remote data...',
   'marketPublish.modal.loading.submit': 'Submitting Agent...',
+  'marketPublish.modal.loading.submitGroup': 'Submitting Group...',
   'marketPublish.modal.loading.upload': 'Publishing new version...',
+  'marketPublish.modal.loading.uploadGroup': 'Publishing new group version...',
   'marketPublish.modal.messages.createVersionFailed': 'Failed to create version: {{message}}',
   'marketPublish.modal.messages.fetchRemoteFailed': 'Failed to fetch remote agent data',
   'marketPublish.modal.messages.missingIdentifier':
     'This Agent doesn’t have a Community identifier yet.',
+  'marketPublish.modal.messages.noGroup': 'No group selected',
   'marketPublish.modal.messages.notAuthenticated': 'Sign in to your Community account first.',
   'marketPublish.modal.messages.publishFailed': 'Publish failed: {{message}}',
   'marketPublish.modal.submitButton': 'Publish',
@@ -221,12 +228,16 @@ export default {
   'marketPublish.modal.title.upload': 'Publish New Version',
   'marketPublish.resultModal.message':
     'Your Agent has been submitted for review. Once approved, it will go live automatically.',
+  'marketPublish.resultModal.messageGroup':
+    'Your Group has been submitted for review. Once approved, it will go live automatically.',
   'marketPublish.resultModal.title': 'Submission Successful',
   'marketPublish.resultModal.view': 'View in Community',
   'marketPublish.submit.button': 'Share to Community',
   'marketPublish.submit.tooltip': 'Share this Agent to the Community',
+  'marketPublish.submitGroup.tooltip': 'Share this Group to the Community',
   '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',
   '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',
@@ -551,6 +562,7 @@ export default {
   'submitAgentModal.placeholder': 'Enter a unique identifier for the agent, e.g. web-development',
   'submitAgentModal.success': 'Agent submitted successfully',
   'submitAgentModal.tooltips': 'Share to Agent Community',
+  'submitGroupModal.tooltips': 'Share to Group Community',
   'sync.device.deviceName.hint': 'Add a name for easy identification',
   'sync.device.deviceName.placeholder': 'Enter device name',
   'sync.device.deviceName.title': 'Device Name',