@lobehub/lobehub 2.0.0-next.321 → 2.0.0-next.323

package/src/app/[variants]/(auth)/auth-error/page.tsx

@@ -1,15 +1,15 @@
 'use client';
 
 import { SiDiscord } from '@icons-pack/react-simple-icons';
+import { SOCIAL_URL } from '@lobechat/business-const';
 import { Alert, Button, Flexbox, Icon } from '@lobehub/ui';
-import Link from '@/libs/next/Link';
+import { cssVar } from 'antd-style';
 import { parseAsString, useQueryState } from 'nuqs';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import AuthCard from '@/features/AuthCard';
-
-const DISCORD_URL = 'https://discord.gg/AYFPHvv2jT';
+import Link from '@/libs/next/Link';
 
 const normalizeErrorCode = (code?: string | null) =>
   (code || 'UNKNOWN').trim().toUpperCase().replaceAll('-', '_');
@@ -35,8 +35,8 @@ const AuthErrorPage = memo(() => {
               {t('actions.home')}
             </Button>
           </Link>
-          <Link href={DISCORD_URL} rel="noopener noreferrer" target="_blank">
-            <Button block icon={<Icon icon={SiDiscord} />} type="text">
+          <Link href={SOCIAL_URL.discord} rel="noopener noreferrer" target="_blank">
+            <Button block icon={<Icon fill={cssVar.colorText} icon={SiDiscord} />} type="text">
               {t('actions.discord')}
             </Button>
           </Link>

package/src/app/[variants]/(main)/agent/_layout/Sidebar/Topic/List/Item/index.tsx

@@ -3,7 +3,6 @@ import { cssVar } from 'antd-style';
 import { MessageSquareDashed, Star } from 'lucide-react';
 import { Suspense, memo, useCallback, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
-import urlJoin from 'url-join';
 
 import { isDesktop } from '@/const/version';
 import NavItem from '@/features/NavPanel/components/NavItem';
@@ -33,7 +32,7 @@ const TopicItem = memo<TopicItemProps>(({ id, title, fav, active, threadId }) =>
   // Construct href for cmd+click support
   const href = useMemo(() => {
     if (!activeAgentId || !id) return undefined;
-    return urlJoin('/chat', `?agent=${activeAgentId}&topic=${id}`);
+    return `/agent/${activeAgentId}?topic=${id}`;
   }, [activeAgentId, id]);
 
   const [editing, isLoading] = useChatStore((s) => [

package/src/app/[variants]/(main)/agent/profile/index.tsx

@@ -8,6 +8,7 @@ import AgentBuilder from '@/features/AgentBuilder';
 import WideScreenContainer from '@/features/WideScreenContainer';
 import { useAgentStore } from '@/store/agent';
 import { agentSelectors } from '@/store/agent/selectors';
+import { StyleSheet } from '@/utils/styles';
 
 import Header from './features/Header';
 import ProfileEditor from './features/ProfileEditor';
@@ -15,13 +16,25 @@ import ProfileHydration from './features/ProfileHydration';
 import ProfileProvider from './features/ProfileProvider';
 import { useProfileStore } from './features/store';
 
+const styles = StyleSheet.create({
+  contentWrapper: {
+    cursor: 'text',
+    display: 'flex',
+    overflowY: 'auto',
+    position: 'relative',
+  },
+  profileArea: {
+    minWidth: 0,
+  },
+});
+
 const ProfileArea = memo(() => {
   const editor = useProfileStore((s) => s.editor);
   const isAgentConfigLoading = useAgentStore(agentSelectors.isAgentConfigLoading);
 
   return (
     <>
-      <Flexbox flex={1} height={'100%'}>
+      <Flexbox flex={1} height={'100%'} style={styles.profileArea}>
         {isAgentConfigLoading ? (
           <Loading debugId="ProfileArea" />
         ) : (
@@ -33,7 +46,7 @@ const ProfileArea = memo(() => {
               onClick={() => {
                 editor?.focus();
               }}
-              style={{ cursor: 'text', display: 'flex', overflowY: 'auto', position: 'relative' }}
+              style={styles.contentWrapper}
               width={'100%'}
             >
               <WideScreenContainer>

package/src/app/[variants]/(main)/community/(detail)/agent/features/Header.tsx

@@ -19,6 +19,8 @@ import {
   BookmarkIcon,
   CoinsIcon,
   DotIcon,
+  GitBranchIcon,
+  GitForkIcon,
   HeartIcon,
 } from 'lucide-react';
 import qs from 'query-string';
@@ -29,6 +31,7 @@ import useSWR from 'swr';
 import urlJoin from 'url-join';
 
 import { useMarketAuth } from '@/layout/AuthProvider/MarketAuth';
+import { marketApiService } from '@/services/marketApi';
 import { socialService } from '@/services/social';
 import { formatIntergerNumber } from '@/utils/format';
 
@@ -57,6 +60,8 @@ const Header = memo<{ mobile?: boolean }>(({ mobile: isMobile }) => {
     pluginCount,
     knowledgeCount,
     userName,
+    forkCount,
+    forkedFromAgentId,
   } = useDetailContext();
   const { mobile = isMobile } = useResponsive();
   const { isAuthenticated, signIn, session } = useMarketAuth();
@@ -85,6 +90,13 @@ const Header = memo<{ mobile?: boolean }>(({ mobile: isMobile }) => {
   );
   const isLiked = likeStatus?.isLiked ?? false;
 
+  // Fetch fork source info
+  const { data: forkSource } = useSWR(
+    identifier && forkedFromAgentId ? ['fork-source', identifier] : null,
+    () => marketApiService.getAgentForkSource(identifier!),
+    { revalidateOnFocus: false },
+  );
+
   const handleFavoriteClick = async () => {
     if (!isAuthenticated) {
       await signIn();
@@ -223,6 +235,31 @@ const Header = memo<{ mobile?: boolean }>(({ mobile: isMobile }) => {
               template={'MMM DD, YYYY'}
             />
           </Flexbox>
+
+          {/* Fork information */}
+          {(forkSource?.source || (forkCount && forkCount > 0)) && (
+            <Flexbox align={'center'} gap={12} horizontal>
+              {forkSource?.source && (
+                <Flexbox align={'center'} gap={6} horizontal>
+                  <Icon icon={GitForkIcon} size={'small'} />
+                  <Text className={styles.time} type={'secondary'}>
+                    {t('fork.forkedFrom')}:{' '}
+                    <Link to={urlJoin('/community/agent', forkSource.source.identifier)}>
+                      {forkSource.source.name}
+                    </Link>
+                  </Text>
+                </Flexbox>
+              )}
+              {forkCount && forkCount > 0 && (
+                <Flexbox align={'center'} gap={6} horizontal>
+                  <Icon icon={GitBranchIcon} size={'small'} />
+                  <Text className={styles.time} type={'secondary'}>
+                    {forkCount} {t('fork.forks')}
+                  </Text>
+                </Flexbox>
+              )}
+            </Flexbox>
+          )}
         </Flexbox>
       </Flexbox>
       <TooltipGroup>

package/src/app/[variants]/(main)/community/(detail)/agent/features/Sidebar/ActionButton/ForkAndChat.tsx

@@ -0,0 +1,133 @@
+'use client';
+
+import { Button } from '@lobehub/ui';
+import { App } from 'antd';
+import { createStaticStyles } from 'antd-style';
+import { customAlphabet } from 'nanoid/non-secure';
+import { memo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useNavigate } from 'react-router-dom';
+
+import { SESSION_CHAT_URL } from '@/const/url';
+import { agentService } from '@/services/agent';
+import { discoverService } from '@/services/discover';
+import { marketApiService } from '@/services/marketApi';
+import { useAgentStore } from '@/store/agent';
+import { useHomeStore } from '@/store/home';
+
+import { useDetailContext } from '../../DetailProvider';
+
+const styles = createStaticStyles(({ css }) => ({
+  buttonGroup: css`
+    width: 100%;
+  `,
+}));
+
+/**
+ * Generate a market identifier (8-character lowercase alphanumeric string)
+ */
+const generateMarketIdentifier = () => {
+  const alphabet = '0123456789abcdefghijklmnopqrstuvwxyz';
+  const generate = customAlphabet(alphabet, 8);
+  return generate();
+};
+
+const ForkAndChat = memo<{ mobile?: boolean }>(({ mobile }) => {
+  const { identifier, title, config, avatar, backgroundColor, description, tags, editorData } =
+    useDetailContext();
+  const [isLoading, setIsLoading] = useState(false);
+  const createAgent = useAgentStore((s) => s.createAgent);
+  const refreshAgentList = useHomeStore((s) => s.refreshAgentList);
+  const { message } = App.useApp();
+  const navigate = useNavigate();
+  const { t } = useTranslation('discover');
+
+  const meta = {
+    avatar,
+    backgroundColor,
+    description,
+    marketIdentifier: identifier,
+    tags,
+    title,
+  };
+
+  const handleForkAndChat = async () => {
+    try {
+      setIsLoading(true);
+
+      // Step 1: Check if user has already forked this agent
+      const existingAgentId = await agentService.getAgentByForkedFromIdentifier(identifier!);
+
+      if (existingAgentId) {
+        // User has already forked this agent, navigate to existing fork
+        message.info(t('fork.alreadyForked'));
+        navigate(SESSION_CHAT_URL(existingAgentId, mobile));
+        return;
+      }
+
+      // Generate a unique identifier for the forked agent
+      const newIdentifier = generateMarketIdentifier();
+
+      // Step 2: Fork the agent via Market API
+      const forkResult = await marketApiService.forkAgent(identifier!, {
+        identifier: newIdentifier,
+        name: title,
+        status: 'published',
+        visibility: 'public',
+      });
+
+      // Step 3: Create agent config with forked data
+      if (!config) throw new Error('Agent config is missing');
+
+      const agentData = {
+        config: {
+          ...config,
+          editorData,
+          ...meta,
+          marketIdentifier: forkResult.agent.identifier,
+          params: {
+            ...config.params,
+            forkedFromIdentifier: identifier, // Store the source agent identifier
+          },
+          title: forkResult.agent.name,
+        },
+      };
+
+      // Step 4: Add to local agent list
+      const result = await createAgent(agentData);
+      await refreshAgentList();
+
+      // Step 5: Report fork event (using 'add' event type)
+      discoverService.reportAgentEvent({
+        event: 'add',
+        identifier: forkResult.agent.identifier,
+        source: location.pathname,
+      });
+
+      message.success(t('fork.success'));
+
+      // Step 6: Navigate to chat
+      navigate(SESSION_CHAT_URL(result!.agentId || result!.sessionId, mobile));
+    } catch (error: any) {
+      console.error('Fork failed:', error);
+      message.error(t('fork.failed'));
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <Button
+      block
+      className={styles.buttonGroup}
+      loading={isLoading}
+      onClick={handleForkAndChat}
+      size={'large'}
+      type={'primary'}
+    >
+      {t('fork.forkAndChat')}
+    </Button>
+  );
+});
+
+export default ForkAndChat;

package/src/app/[variants]/(main)/community/(detail)/agent/features/Sidebar/ActionButton/index.tsx

@@ -8,13 +8,13 @@ import { OFFICIAL_URL } from '@/const/url';
 
 import ShareButton from '../../../../features/ShareButton';
 import { useDetailContext } from '../../DetailProvider';
-import AddAgent from './AddAgent';
+import ForkAndChat from './ForkAndChat';
 
 const ActionButton = memo<{ mobile?: boolean }>(({ mobile }) => {
   const { avatar, description, tags, title, identifier } = useDetailContext();
   return (
     <Flexbox align={'center'} gap={8} horizontal>
-      <AddAgent mobile={mobile} />
+      <ForkAndChat mobile={mobile} />
       <ShareButton
         meta={{
           avatar: avatar,

package/src/app/[variants]/(main)/community/(detail)/group_agent/features/Details/index.tsx

@@ -1,8 +1,9 @@
 import { Flexbox } from '@lobehub/ui';
 import { useResponsive } from 'antd-style';
-import { useQueryState } from 'nuqs';
 import { memo } from 'react';
 
+import { useQueryState } from '@/hooks/useQueryParam';
+
 import Sidebar from '../Sidebar';
 import Nav, { GroupAgentNavKey } from './Nav';
 import Overview from './Overview';
@@ -11,37 +12,33 @@ import Versions from './Versions';
 
 const Details = memo<{ mobile?: boolean }>(({ mobile: isMobile }) => {
   const { mobile = isMobile } = useResponsive();
-  const [activeTabParam, setActiveTab] = useQueryState('activeTab');
-  const activeTab = activeTabParam || GroupAgentNavKey.Overview;
+  const [activeTab, setActiveTab] = useQueryState('activeTab', {
+    clearOnDefault: true,
+    defaultValue: GroupAgentNavKey.Overview,
+  });
 
   return (
     <Flexbox gap={24}>
-      {/* Navigation */}
       <Nav
         activeTab={activeTab as GroupAgentNavKey}
         mobile={mobile}
-        setActiveTab={(tab) => setActiveTab(tab)}
+        setActiveTab={setActiveTab}
       />
-
       <Flexbox
         gap={48}
         horizontal={!mobile}
         style={mobile ? { flexDirection: 'column-reverse' } : undefined}
       >
-        {/* Main Content */}
         <Flexbox
           style={{
             overflow: 'hidden',
           }}
           width={'100%'}
         >
-          {/* Tab Content */}
           {activeTab === GroupAgentNavKey.Overview && <Overview />}
           {activeTab === GroupAgentNavKey.SystemRole && <SystemRole />}
           {activeTab === GroupAgentNavKey.Versions && <Versions />}
         </Flexbox>
-
-        {/* Sidebar */}
         <Sidebar mobile={mobile} />
       </Flexbox>
     </Flexbox>

package/src/app/[variants]/(main)/community/(detail)/group_agent/features/Sidebar/ActionButton/ForkGroupAndChat.tsx

@@ -0,0 +1,208 @@
+'use client';
+
+import { Button } from '@lobehub/ui';
+import { App } from 'antd';
+import { createStaticStyles } from 'antd-style';
+import { customAlphabet } from 'nanoid/non-secure';
+import { memo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useNavigate } from 'react-router-dom';
+import urlJoin from 'url-join';
+
+import { chatGroupService } from '@/services/chatGroup';
+import { discoverService } from '@/services/discover';
+import { marketApiService } from '@/services/marketApi';
+import { useAgentGroupStore } from '@/store/agentGroup';
+
+import { useDetailContext } from '../../DetailProvider';
+
+const styles = createStaticStyles(({ css }) => ({
+  buttonGroup: css`
+    width: 100%;
+  `,
+}));
+
+/**
+ * Generate a market identifier (8-character lowercase alphanumeric string)
+ */
+const generateMarketIdentifier = () => {
+  const alphabet = '0123456789abcdefghijklmnopqrstuvwxyz';
+  const generate = customAlphabet(alphabet, 8);
+  return generate();
+};
+
+const ForkGroupAndChat = memo<{ mobile?: boolean }>(() => {
+  const {
+    avatar,
+    backgroundColor,
+    description,
+    tags,
+    title,
+    config,
+    identifier,
+    memberAgents = [],
+  } = useDetailContext();
+  const [isLoading, setIsLoading] = useState(false);
+  const { message } = App.useApp();
+  const { t } = useTranslation('discover');
+  const navigate = useNavigate();
+  const loadGroups = useAgentGroupStore((s) => s.loadGroups);
+
+  const meta = {
+    avatar,
+    backgroundColor,
+    description,
+    tags,
+    title,
+  };
+
+  const handleForkAndChat = async () => {
+    try {
+      setIsLoading(true);
+
+      // Step 1: Check if user has already forked this group
+      const existingGroupId = await chatGroupService.getGroupByForkedFromIdentifier(identifier!);
+
+      if (existingGroupId) {
+        // User has already forked this group, navigate to existing fork
+        message.info(t('fork.alreadyForked'));
+        navigate(urlJoin('/group', existingGroupId));
+        return;
+      }
+
+      if (!config) {
+        message.error(
+          t('groupAgents.noConfig', { defaultValue: 'Group configuration not available' }),
+        );
+        return;
+      }
+
+      // Generate a unique identifier for the forked group
+      const newIdentifier = generateMarketIdentifier();
+
+      // Step 2: Fork the group via Market API
+      const forkResult = await marketApiService.forkAgentGroup(identifier!, {
+        identifier: newIdentifier,
+        name: title,
+        status: 'published',
+        visibility: 'public',
+      });
+
+      // Step 3: Find supervisor from memberAgents
+      const supervisorMember = memberAgents.find((member: any) => {
+        const agent = member.agent || member;
+        const role = member.role || agent.role;
+        return role === 'supervisor';
+      });
+
+      // Prepare supervisor config
+      let supervisorConfig;
+      if (supervisorMember) {
+        const member = supervisorMember as any;
+        const agent = member.agent || member;
+        const currentVersion = member.currentVersion || member;
+        const rawConfig = {
+          avatar: currentVersion.avatar,
+          backgroundColor: currentVersion.backgroundColor,
+          description: currentVersion.description,
+          model: currentVersion.config?.model || currentVersion.model,
+          params: currentVersion.config?.params || currentVersion.params,
+          provider: currentVersion.config?.provider || currentVersion.provider,
+          systemRole:
+            currentVersion.config?.systemRole ||
+            currentVersion.config?.systemPrompt ||
+            currentVersion.systemRole ||
+            currentVersion.content,
+          tags: currentVersion.tags,
+          title: currentVersion.name || agent.name || 'Supervisor',
+        };
+        // Filter out null/undefined values
+        supervisorConfig = Object.fromEntries(
+          // eslint-disable-next-line eqeqeq, @typescript-eslint/no-unused-vars
+          Object.entries(rawConfig).filter(([_, v]) => v != null),
+        );
+      }
+
+      // Step 4: Prepare group config
+      const groupConfig = {
+        config: {
+          ...config,
+          forkedFromIdentifier: identifier, // Store the source group identifier
+        },
+        // Group content is the supervisor's systemRole (for backward compatibility)
+        content: supervisorConfig?.systemRole || config.systemRole,
+        ...meta,
+      };
+
+      // Step 5: Prepare member agents from market data
+      // Filter out supervisor role as it will be created separately using supervisorConfig
+      const members = memberAgents
+        .filter((member: any) => {
+          const agent = member.agent || member;
+          const role = member.role || agent.role;
+          return role !== 'supervisor';
+        })
+        .map((member: any) => {
+          const agent = member.agent || member;
+          const currentVersion = member.currentVersion || member;
+          return {
+            avatar: currentVersion.avatar,
+            backgroundColor: currentVersion.backgroundColor,
+            description: currentVersion.description,
+            model: currentVersion.config?.model || currentVersion.model,
+            plugins: currentVersion.plugins,
+            provider: currentVersion.config?.provider || currentVersion.provider,
+            systemRole:
+              currentVersion.config?.systemRole ||
+              currentVersion.config?.systemPrompt ||
+              currentVersion.systemRole ||
+              currentVersion.content,
+            tags: currentVersion.tags,
+            title: currentVersion.name || agent.name,
+          };
+        });
+
+      // Step 6: Create group with all members in one request
+      const result = await chatGroupService.createGroupWithMembers(
+        groupConfig,
+        members,
+        supervisorConfig,
+      );
+
+      // Refresh group list
+      await loadGroups();
+
+      // Step 7: Report fork event (using 'add' event type)
+      discoverService.reportAgentEvent({
+        event: 'add',
+        identifier: forkResult.group.identifier,
+        source: location.pathname,
+      });
+
+      message.success(t('fork.success'));
+
+      // Step 8: Navigate to chat
+      navigate(urlJoin('/group', result.groupId));
+    } catch (error: any) {
+      console.error('Fork group failed:', error);
+      message.error(t('fork.failed'));
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <Button
+      block
+      className={styles.buttonGroup}
+      loading={isLoading}
+      onClick={handleForkAndChat}
+      size={'large'}
+      type={'primary'}
+    >
+      {t('fork.forkAndChat')}
+    </Button>
+  );
+});
+
+export default ForkGroupAndChat;

package/src/app/[variants]/(main)/community/(detail)/group_agent/features/Sidebar/ActionButton/index.tsx

@@ -8,14 +8,14 @@ import { OFFICIAL_URL } from '@/const/url';
 
 import ShareButton from '../../../../features/ShareButton';
 import { useDetailContext } from '../../DetailProvider';
-import AddGroupAgent from './AddGroupAgent';
+import ForkGroupAndChat from './ForkGroupAndChat';
 
 const ActionButton = memo<{ mobile?: boolean }>(({ mobile }) => {
   const { avatar, title, description, tags, identifier } = useDetailContext();
 
   return (
     <Flexbox align={'center'} gap={8} horizontal>
-      <AddGroupAgent mobile={mobile} />
+      <ForkGroupAndChat mobile={mobile} />
       {identifier && (
         <ShareButton
           meta={{

package/src/app/[variants]/(main)/community/(detail)/user/features/DetailProvider.tsx

@@ -13,6 +13,8 @@ export interface UserDetailContextConfig {
   agentCount: number;
   agentGroups?: DiscoverGroupAgentItem[];
   agents: DiscoverAssistantItem[];
+  forkedAgentGroups?: DiscoverGroupAgentItem[];
+  forkedAgents?: DiscoverAssistantItem[];
   groupCount: number;
   isOwner: boolean;
   mobile?: boolean;

package/src/app/[variants]/(main)/community/(detail)/user/features/UserContent.tsx

@@ -3,16 +3,23 @@
 import { Flexbox } from '@lobehub/ui';
 import { memo } from 'react';
 
+import { useUserDetailContext } from './DetailProvider';
 import UserAgentList from './UserAgentList';
 import UserFavoriteAgents from './UserFavoriteAgents';
 import UserFavoritePlugins from './UserFavoritePlugins';
+import UserForkedAgentGroups from './UserForkedAgentGroups';
+import UserForkedAgents from './UserForkedAgents';
 import UserGroupList from './UserGroupList';
 
 const UserContent = memo(() => {
+  const { forkedAgents, forkedAgentGroups } = useUserDetailContext();
+
   return (
     <Flexbox gap={32}>
       <UserAgentList />
       <UserGroupList />
+      <UserForkedAgents agents={forkedAgents} />
+      <UserForkedAgentGroups agentGroups={forkedAgentGroups} />
       <UserFavoriteAgents />
       <UserFavoritePlugins />
     </Flexbox>