@lobehub/lobehub 2.0.0-next.306 → 2.0.0-next.307

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

@@ -21,9 +21,16 @@ const hotArea = css`
   }
 `;
 
-export const useTopicActionsDropdownMenu = (): MenuProps['items'] => {
+interface UseTopicActionsDropdownMenuOptions {
+  onUploadClose?: () => void;
+}
+
+export const useTopicActionsDropdownMenu = (
+  options: UseTopicActionsDropdownMenuOptions = {},
+): MenuProps['items'] => {
   const { t } = useTranslation(['topic', 'common']);
   const { modal } = App.useApp();
+  const { onUploadClose } = options;
 
   const [removeUnstarredTopic, removeAllTopic, importTopic] = useChatStore((s) => [
     s.removeUnstarredTopic,
@@ -33,6 +40,7 @@ export const useTopicActionsDropdownMenu = (): MenuProps['items'] => {
 
   const handleImport = useCallback(
     async (file: File) => {
+      onUploadClose?.();
       try {
         const text = await file.text();
         // Validate JSON format
@@ -46,7 +54,7 @@ export const useTopicActionsDropdownMenu = (): MenuProps['items'] => {
       }
       return false; // Prevent default upload behavior
     },
-    [importTopic, modal, t],
+    [importTopic, modal, onUploadClose, t],
   );
 
   const [topicDisplayMode, updatePreference] = useUserStore((s) => [
@@ -101,6 +109,7 @@ export const useTopicActionsDropdownMenu = (): MenuProps['items'] => {
             <div className={cx(hotArea)}>{t('actions.import')}</div>
           </Upload>
         ),
+        ...(onUploadClose ? { closeOnClick: false } : null),
       },
       {
         type: 'divider' as const,
@@ -143,6 +152,7 @@ export const useTopicActionsDropdownMenu = (): MenuProps['items'] => {
     updatePreference,
     updateSystemStatus,
     handleImport,
+    onUploadClose,
     removeUnstarredTopic,
     removeAllTopic,
     t,

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

@@ -87,6 +87,42 @@ const AddGroupAgent = memo<{ mobile?: boolean }>(() => {
       return;
     }
 
+    // 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) {
+      // Type assertion needed because actual API data structure differs from type definition
+      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),
+      );
+    }
+
     // Prepare group config
     const groupConfig = {
       config: {
@@ -95,30 +131,46 @@ const AddGroupAgent = memo<{ mobile?: boolean }>(() => {
         openingQuestions: config.openingQuestions,
         revealDM: config.revealDM,
       },
-      content: config.systemRole,
+      // Group content is the supervisor's systemRole (for backward compatibility)
+      content: supervisorConfig?.systemRole || config.systemRole,
       ...meta,
     };
 
     // Prepare member agents from market data
-    const members = memberAgents.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.model,
-        plugins: currentVersion.plugins,
-        provider: currentVersion.provider,
-        systemRole: currentVersion.systemRole || currentVersion.content,
-        tags: currentVersion.tags,
-        title: currentVersion.name || agent.name,
-      };
-    });
+    // 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,
+        };
+      });
 
     try {
       // Create group with all members in one request
-      const result = await chatGroupService.createGroupWithMembers(groupConfig, members);
+      const result = await chatGroupService.createGroupWithMembers(
+        groupConfig,
+        members,
+        supervisorConfig,
+      );
 
       // Refresh group list
       await loadGroups();

package/src/app/[variants]/(main)/group/_layout/Sidebar/Topic/Actions.tsx

@@ -1,14 +1,15 @@
 import { ActionIcon, DropdownMenu } from '@lobehub/ui';
 import { MoreHorizontal } from 'lucide-react';
-import { memo } from 'react';
+import { memo, useState } from 'react';
 
 import { useTopicActionsDropdownMenu } from './useDropdownMenu';
 
 const Actions = memo(() => {
-  const menuItems = useTopicActionsDropdownMenu();
+  const [open, setOpen] = useState(false);
+  const menuItems = useTopicActionsDropdownMenu({ onUploadClose: () => setOpen(false) });
 
   return (
-    <DropdownMenu items={menuItems}>
+    <DropdownMenu items={menuItems} onOpenChange={setOpen} open={open}>
       <ActionIcon icon={MoreHorizontal} size={'small'} />
     </DropdownMenu>
   );

package/src/app/[variants]/(main)/group/_layout/Sidebar/Topic/useDropdownMenu.tsx

@@ -21,9 +21,16 @@ const hotArea = css`
   }
 `;
 
-export const useTopicActionsDropdownMenu = (): MenuProps['items'] => {
+interface UseTopicActionsDropdownMenuOptions {
+  onUploadClose?: () => void;
+}
+
+export const useTopicActionsDropdownMenu = (
+  options: UseTopicActionsDropdownMenuOptions = {},
+): MenuProps['items'] => {
   const { t } = useTranslation(['topic', 'common']);
   const { modal } = App.useApp();
+  const { onUploadClose } = options;
 
   const [removeUnstarredTopic, removeAllTopic, importTopic] = useChatStore((s) => [
     s.removeUnstarredTopic,
@@ -33,6 +40,7 @@ export const useTopicActionsDropdownMenu = (): MenuProps['items'] => {
 
   const handleImport = useCallback(
     async (file: File) => {
+      onUploadClose?.();
       try {
         const text = await file.text();
         // Validate JSON format
@@ -46,7 +54,7 @@ export const useTopicActionsDropdownMenu = (): MenuProps['items'] => {
       }
       return false; // Prevent default upload behavior
     },
-    [importTopic, modal, t],
+    [importTopic, modal, onUploadClose, t],
   );
 
   const [topicDisplayMode, updatePreference] = useUserStore((s) => [
@@ -101,6 +109,7 @@ export const useTopicActionsDropdownMenu = (): MenuProps['items'] => {
             <div className={cx(hotArea)}>{t('actions.import')}</div>
           </Upload>
         ),
+        ...(onUploadClose ? { closeOnClick: false } : null),
       },
       {
         type: 'divider' as const,
@@ -143,6 +152,7 @@ export const useTopicActionsDropdownMenu = (): MenuProps['items'] => {
     updatePreference,
     updateSystemStatus,
     handleImport,
+    onUploadClose,
     removeUnstarredTopic,
     removeAllTopic,
     t,

package/src/features/ChatInput/ActionBar/Upload/ServerMode.tsx

@@ -1,5 +1,5 @@
 import { validateVideoFileSize } from '@lobechat/utils/client';
-import { Icon, type ItemType, type MenuProps, Tooltip } from '@lobehub/ui';
+import { Icon, type ItemType, Tooltip } from '@lobehub/ui';
 import { Upload } from 'antd';
 import { css, cx } from 'antd-style';
 import isEqual from 'fast-deep-equal';
@@ -21,6 +21,7 @@ import { preferenceSelectors } from '@/store/user/selectors';
 
 import { useAgentId } from '../../hooks/useAgentId';
 import Action from '../components/Action';
+import type { ActionDropdownMenuItems } from '../components/ActionDropdown';
 import CheckboxItem from '../components/CheckboxWithLoading';
 
 const hotArea = css`
@@ -48,6 +49,7 @@ const FileUpload = memo(() => {
     s.updateGuideState,
   ]);
   const [modalOpen, setModalOpen] = useState(false);
+  const [dropdownOpen, setDropdownOpen] = useState(false);
   const [updating, setUpdating] = useState(false);
 
   const files = useAgentStore((s) => agentByIdSelectors.getAgentFilesById(agentId)(s), isEqual);
@@ -61,8 +63,9 @@ const FileUpload = memo(() => {
     s.toggleKnowledgeBase,
   ]);
 
-  const uploadItems: MenuProps['items'] = [
+  const uploadItems: ActionDropdownMenuItems = [
     {
+      closeOnClick: false,
       disabled: !canUploadImage,
       icon: ImageUp,
       key: 'upload-image',
@@ -70,6 +73,7 @@ const FileUpload = memo(() => {
         <Upload
           accept={'image/*'}
           beforeUpload={async (file) => {
+            setDropdownOpen(false);
             await upload([file]);
 
             return false;
@@ -86,6 +90,7 @@ const FileUpload = memo(() => {
       ),
     },
     {
+      closeOnClick: false,
       icon: FileUp,
       key: 'upload-file',
       label: (
@@ -105,6 +110,7 @@ const FileUpload = memo(() => {
               return false;
             }
 
+            setDropdownOpen(false);
             await upload([file]);
 
             return false;
@@ -117,6 +123,7 @@ const FileUpload = memo(() => {
       ),
     },
     {
+      closeOnClick: false,
       icon: FolderUp,
       key: 'upload-folder',
       label: (
@@ -136,6 +143,7 @@ const FileUpload = memo(() => {
               return false;
             }
 
+            setDropdownOpen(false);
             await upload([file]);
 
             return false;
@@ -214,7 +222,7 @@ const FileUpload = memo(() => {
     },
   );
 
-  const items: MenuProps['items'] = [
+  const items: ActionDropdownMenuItems = [
     ...uploadItems,
     ...(knowledgeItems.length > 0 ? knowledgeItems : []),
   ];
@@ -229,6 +237,8 @@ const FileUpload = memo(() => {
       }}
       icon={Paperclip}
       loading={updating}
+      onOpenChange={setDropdownOpen}
+      open={dropdownOpen}
       showTooltip={false}
       title={t('upload.action.tooltip')}
       trigger={'both'}

package/src/features/ChatInput/ActionBar/components/ActionDropdown.tsx

@@ -8,6 +8,7 @@ import {
   type DropdownMenuProps,
   DropdownMenuRoot,
   DropdownMenuTrigger,
+  type MenuItemType,
   type MenuProps,
   type PopoverTrigger,
   renderDropdownMenuItems,
@@ -16,6 +17,7 @@ import { createStaticStyles, cx } from 'antd-style';
 import {
   type CSSProperties,
   type ReactNode,
+  isValidElement,
   memo,
   useCallback,
   useEffect,
@@ -34,8 +36,15 @@ const styles = createStaticStyles(({ css }) => ({
   `,
 }));
 
-type ActionDropdownMenu = Omit<Pick<MenuProps, 'className' | 'onClick' | 'style'>, 'items'> & {
-  items: MenuProps['items'] | (() => MenuProps['items']);
+export type ActionDropdownMenuItem = MenuItemType;
+
+export type ActionDropdownMenuItems = MenuProps<ActionDropdownMenuItem>['items'];
+
+type ActionDropdownMenu = Omit<
+  Pick<MenuProps<ActionDropdownMenuItem>, 'className' | 'onClick' | 'style'>,
+  'items'
+> & {
+  items: ActionDropdownMenuItems | (() => ActionDropdownMenuItems);
 };
 
 export interface ActionDropdownProps extends Omit<DropdownMenuProps, 'items'> {
@@ -116,7 +125,7 @@ const ActionDropdown = memo<ActionDropdownProps>(
     }, [openOnHover, triggerProps]);
 
     const decorateMenuItems = useCallback(
-      (items: MenuProps['items']): MenuProps['items'] => {
+      (items: ActionDropdownMenuItems): ActionDropdownMenuItems => {
         if (!items) return items;
 
         return items.map((item) => {
@@ -136,10 +145,24 @@ const ActionDropdown = memo<ActionDropdownProps>(
             };
           }
           const itemOnClick = 'onClick' in item ? item.onClick : undefined;
+          const closeOnClick = 'closeOnClick' in item ? item.closeOnClick : undefined;
+          const keepOpenOnClick = closeOnClick === false;
+          const itemLabel = 'label' in item ? item.label : undefined;
+          const shouldKeepOpen = isValidElement(itemLabel);
+
+          const resolvedCloseOnClick = closeOnClick ?? (shouldKeepOpen ? false : undefined);
 
           return {
             ...item,
+            ...(resolvedCloseOnClick !== undefined ? { closeOnClick: resolvedCloseOnClick } : null),
             onClick: (info) => {
+              if (keepOpenOnClick) {
+                info.domEvent.stopPropagation();
+                menu.onClick?.(info);
+                itemOnClick?.(info);
+                return;
+              }
+
               info.domEvent.preventDefault();
               menu.onClick?.(info);
               itemOnClick?.(info);

package/src/features/ResourceManager/components/Header/AddButton.tsx

@@ -5,7 +5,7 @@ import { Notion } from '@lobehub/icons';
 import { Button, DropdownMenu, Icon, type MenuProps } from '@lobehub/ui';
 import { Upload } from 'antd';
 import { FilePenLine, FileUp, FolderIcon, FolderUp, Link, Plus } from 'lucide-react';
-import { useCallback, useMemo } from 'react';
+import { type ChangeEvent, useCallback, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { useResourceManagerStore } from '@/app/[variants]/(main)/resource/features/store';
@@ -23,6 +23,7 @@ const AddButton = () => {
   const pushDockFileList = useFileStore((s) => s.pushDockFileList);
   const uploadFolderWithStructure = useFileStore((s) => s.uploadFolderWithStructure);
   const createResourceAndSync = useFileStore((s) => s.createResourceAndSync);
+  const [menuOpen, setMenuOpen] = useState(false);
 
   // TODO: Migrate Notion import to use createResource
   // Keep old functions temporarily for components not yet migrated
@@ -121,6 +122,13 @@ const AddButton = () => {
     t,
     uploadFolderWithStructure,
   });
+  const handleFolderUploadWithClose = useCallback(
+    (event: ChangeEvent<HTMLInputElement>) => {
+      setMenuOpen(false);
+      return handleFolderUpload(event);
+    },
+    [handleFolderUpload],
+  );
 
   const items = useMemo<MenuProps['items']>(
     () => [
@@ -144,11 +152,13 @@ const AddButton = () => {
         type: 'divider',
       },
       {
+        closeOnClick: false,
         icon: <Icon icon={FileUp} />,
         key: 'upload-file',
         label: (
           <Upload
             beforeUpload={async (file) => {
+              setMenuOpen(false);
               await pushDockFileList([file], libraryId, currentFolderId ?? undefined);
 
               return false;
@@ -161,6 +171,7 @@ const AddButton = () => {
         ),
       },
       {
+        closeOnClick: false,
         icon: <Icon icon={FolderUp} />,
         key: 'upload-folder',
         label: <label htmlFor="folder-upload-input">{t('header.actions.uploadFolder')}</label>,
@@ -211,7 +222,13 @@ const AddButton = () => {
 
   return (
     <>
-      <DropdownMenu items={items} placement="bottomRight" trigger="both">
+      <DropdownMenu
+        items={items}
+        onOpenChange={setMenuOpen}
+        open={menuOpen}
+        placement="bottomRight"
+        trigger="both"
+      >
         <Button data-no-highlight icon={Plus} type="primary">
           {t('addLibrary')}
         </Button>
@@ -233,7 +250,7 @@ const AddButton = () => {
       <input
         id="folder-upload-input"
         multiple
-        onChange={handleFolderUpload}
+        onChange={handleFolderUploadWithClose}
         style={{ display: 'none' }}
         type="file"
         // @ts-expect-error - webkitdirectory is not in the React types

package/src/server/routers/lambda/__tests__/agentGroup.test.ts

@@ -171,6 +171,7 @@ describe('agentGroupRouter', () => {
           config: { ...DEFAULT_CHAT_GROUP_CHAT_CONFIG, allowDM: true },
         },
         ['agent-1', 'agent-2'],
+        undefined,
       );
       expect(result).toEqual({
         agentIds: ['agent-1', 'agent-2'],

package/src/server/routers/lambda/agentGroup.ts

@@ -129,6 +129,19 @@ export const agentGroupRouter = router({
             })
             .partial(),
         ),
+        supervisorConfig: z
+          .object({
+            avatar: z.string().nullish(),
+            backgroundColor: z.string().nullish(),
+            description: z.string().nullish(),
+            model: z.string().nullish(),
+            params: z.any().nullish(),
+            provider: z.string().nullish(),
+            systemRole: z.string().nullish(),
+            tags: z.array(z.string()).nullish(),
+            title: z.string().nullish(),
+          })
+          .optional(),
       }),
     )
     .mutation(async ({ input, ctx }) => {
@@ -144,6 +157,14 @@ export const agentGroupRouter = router({
       const memberAgentIds = createdAgents.map((agent) => agent.id);
 
       // 2. Create group with supervisor and member agents
+      // Filter out null/undefined values from supervisorConfig
+      const supervisorConfig = input.supervisorConfig
+        ? Object.fromEntries(
+            // eslint-disable-next-line @typescript-eslint/no-unused-vars, eqeqeq
+            Object.entries(input.supervisorConfig).filter(([_, v]) => v != null),
+          )
+        : undefined;
+
       const { group, supervisorAgentId } = await ctx.agentGroupRepo.createGroupWithSupervisor(
         {
           ...input.groupConfig,
@@ -152,6 +173,7 @@ export const agentGroupRouter = router({
           ),
         },
         memberAgentIds,
+        supervisorConfig as any,
       );
 
       return { agentIds: memberAgentIds, groupId: group.id, supervisorAgentId };

package/src/services/chat/index.ts

@@ -138,6 +138,7 @@ class ChatService {
       plugins: pluginIds,
     } = resolveAgentConfig({
       agentId: targetAgentId,
+      groupId, // Pass groupId for supervisor detection
       model: payload.model,
       plugins: enabledPlugins,
       provider: payload.provider,