@lobehub/chat 1.141.7 → 1.141.9

package/src/app/[variants]/(main)/chat/@session/_layout/Desktop/SessionHeader.tsx

@@ -46,6 +46,8 @@ const Header = memo(() => {
   const { showCreateSession, enableGroupChat } = useServerConfigStore(featureFlagsSelectors);
   const [isGroupWizardOpen, setIsGroupWizardOpen] = useState(false);
 
+  // const enableGroupChatInLabs = useUserStore(preferenceSelectors.enableGroupChat);
+
   // We need pass inital member list so we cannot use mutate
   const [isCreatingGroup, setIsCreatingGroup] = useState(false);
 

package/src/app/[variants]/(main)/chat/@session/features/SessionListContent/CollapseGroup/Actions.tsx

@@ -82,11 +82,28 @@ const Actions = memo<ActionsProps>(
       },
     };
 
-    const handleCreateGroupWithMembers = async (selectedAgents: string[]) => {
+    const handleCreateGroupWithMembers = async (
+      selectedAgents: string[],
+      hostConfig?: { model?: string; provider?: string },
+      enableSupervisor?: boolean,
+    ) => {
       try {
         setIsCreatingGroup(true);
+
+        const config: any = {};
+
+        if (enableSupervisor !== undefined) {
+          config.enableSupervisor = enableSupervisor;
+        }
+
+        if (hostConfig) {
+          config.orchestratorModel = hostConfig.model;
+          config.orchestratorProvider = hostConfig.provider;
+        }
+
         await createGroup(
           {
+            config: Object.keys(config).length > 0 ? config : undefined,
             title: 'New Group Chat',
           },
           selectedAgents,

package/src/components/ChatGroupWizard/ChatGroupWizard.tsx

@@ -5,11 +5,11 @@ import { Button, Checkbox, Empty, Switch } from 'antd';
 import { createStyles, useTheme } from 'antd-style';
 import { omit } from 'lodash-es';
 import { Users } from 'lucide-react';
-import { ChangeEvent, memo, useCallback, useEffect, useMemo, useState } from 'react';
+import { ChangeEvent, memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
-import { DEFAULT_AVATAR, DEFAULT_SUPERVISOR_AVATAR } from '@/const/meta';
+import { DEFAULT_AVATAR } from '@/const/meta';
 import ModelSelect from '@/features/ModelSelect';
 import { useEnabledChatModels } from '@/hooks/useEnabledChatModels';
 import { useSessionStore } from '@/store/session';
@@ -233,6 +233,7 @@ const ChatGroupWizard = memo<ChatGroupWizardProps>(
       return { model: undefined, provider: undefined };
     }, [enabledModels]);
 
+    const [inputValue, setInputValue] = useState('');
     const [searchTerm, setSearchTerm] = useState('');
     const [selectedTemplate, setSelectedTemplate] = useState<string>('');
     const [selectedAgents, setSelectedAgents] = useState<string[]>([]);
@@ -244,6 +245,8 @@ const ChatGroupWizard = memo<ChatGroupWizardProps>(
     const [isCreatingCustom, setIsCreatingCustom] = useState(false);
     const [activePanel, setActivePanel] = useState<'templates' | 'agents'>('templates');
 
+    const debounceTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
     const isCreatingFromTemplate = externalLoading ?? false;
 
     const handleTemplateToggle = useCallback((templateId: string) => {
@@ -278,10 +281,16 @@ const ChatGroupWizard = memo<ChatGroupWizardProps>(
     const handleReset = () => {
       setSelectedTemplate('');
       setSelectedAgents([]);
+      setInputValue('');
       setSearchTerm('');
       setRemovedMembers({});
       setIsHostRemoved(false);
       setHostModelConfig(defaultModel.model && defaultModel.provider ? defaultModel : {});
+
+      // Clear any pending debounce timer
+      if (debounceTimerRef.current) {
+        clearTimeout(debounceTimerRef.current);
+      }
     };
 
     const handleHostModelChange = useCallback((config: { model?: string; provider?: string }) => {
@@ -319,11 +328,31 @@ const ChatGroupWizard = memo<ChatGroupWizardProps>(
     }, []);
 
     const handleSearchChange = useCallback((event: ChangeEvent<HTMLInputElement>) => {
-      setSearchTerm(event.target.value);
+      const value = event.target.value;
+      setInputValue(value);
+
+      // Clear previous timer
+      if (debounceTimerRef.current) {
+        clearTimeout(debounceTimerRef.current);
+      }
+
+      // Set new timer to update searchTerm after 300ms
+      debounceTimerRef.current = setTimeout(() => {
+        setSearchTerm(value);
+      }, 300);
     }, []);
 
     const agentCount = visibleAgentSessions.length;
 
+    // Cleanup debounce timer on unmount
+    useEffect(() => {
+      return () => {
+        if (debounceTimerRef.current) {
+          clearTimeout(debounceTimerRef.current);
+        }
+      };
+    }, []);
+
     useEffect(() => {
       if (!open) return;
 
@@ -551,7 +580,7 @@ const ChatGroupWizard = memo<ChatGroupWizardProps>(
               onChange={handleSearchChange}
               placeholder={t('memberSelection.searchAgents')}
               style={{ margin: `${theme.paddingSM}px ${theme.paddingSM}px 0 ${theme.paddingSM}px` }}
-              value={searchTerm}
+              value={inputValue}
               variant="filled"
             />
             <Flexbox flex={1} style={{ overflowY: 'auto', padding: `0 ${theme.paddingSM}px` }}>
@@ -636,7 +665,6 @@ const ChatGroupWizard = memo<ChatGroupWizardProps>(
           <Flexbox className={styles.rightColumn} flex={1}>
             <Flexbox flex={1} gap={16} style={{ overflowY: 'auto' }}>
               <Flexbox align="center" className={styles.hostCard} gap={12} horizontal>
-                <Avatar avatar={DEFAULT_SUPERVISOR_AVATAR} shape="circle" size={40} />
                 <Flexbox flex={1} gap={2}>
                   <Text
                     style={{ fontSize: 14, fontWeight: 500 }}

package/src/components/MemberSelectionModal/MemberSelectionModal.tsx

@@ -1,8 +1,8 @@
 'use client';
 
-import { ActionIcon, Avatar, List, Modal, SearchBar } from '@lobehub/ui';
+import { ActionIcon, Avatar, List, Modal, SearchBar, Text, Tooltip } from '@lobehub/ui';
 import { useHover } from 'ahooks';
-import { List as AntdList, Button, Checkbox, Empty, Typography } from 'antd';
+import { List as AntdList, Button, Checkbox, Empty, Switch, Typography } from 'antd';
 import { createStyles } from 'antd-style';
 import { X } from 'lucide-react';
 import { type ChangeEvent, memo, useCallback, useMemo, useRef, useState } from 'react';
@@ -10,10 +10,12 @@ import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
 import { DEFAULT_AVATAR } from '@/const/meta';
+import ModelSelect from '@/features/ModelSelect';
+import { useEnabledChatModels } from '@/hooks/useEnabledChatModels';
 import { useSessionStore } from '@/store/session';
 import { LobeAgentSession, LobeSessionType } from '@/types/session';
 
-const { Text } = Typography;
+const { Text: AntText } = Typography;
 
 const AvailableAgentItem = memo<{
   agent: LobeAgentSession;
@@ -56,11 +58,11 @@ const AvailableAgentItem = memo<{
           />
         </Flexbox>
         <Flexbox flex={1} gap={2} style={{ minWidth: 0 }}>
-          <Text className={styles.title}>{title}</Text>
+          <AntText className={styles.title}>{title}</AntText>
           {description && (
-            <Text className={styles.description} ellipsis>
+            <AntText className={styles.description} ellipsis>
               {description}
-            </Text>
+            </AntText>
           )}
         </Flexbox>
       </Flexbox>
@@ -82,6 +84,14 @@ const useStyles = createStyles(({ css, token }) => ({
     line-height: 1.2;
     color: ${token.colorTextSecondary};
   `,
+  hostCard: css`
+    margin-block-end: ${token.paddingSM}px;
+    padding: ${token.padding}px;
+    border: 1px solid ${token.colorBorderSecondary};
+    border-radius: ${token.borderRadiusLG}px;
+
+    background: ${token.colorFillTertiary};
+  `,
   leftColumn: css`
     user-select: none;
 
@@ -107,6 +117,9 @@ const useStyles = createStyles(({ css, token }) => ({
       background: ${token.colorFillTertiary};
     }
   `,
+  modelSelectDisabled: css`
+    pointer-events: none;
+  `,
   rightColumn: css`
     overflow-y: auto;
     flex: 1;
@@ -121,6 +134,14 @@ const useStyles = createStyles(({ css, token }) => ({
 export type MemberSelectionMode = 'create' | 'add';
 
 export interface MemberSelectionModalProps {
+  /**
+   * Current host configuration (for add mode)
+   */
+  currentHostConfig?: {
+    enableSupervisor?: boolean;
+    orchestratorModel?: string;
+    orchestratorProvider?: string;
+  };
   /**
    * Existing group members to exclude from available agents (for add mode)
    */
@@ -136,7 +157,11 @@ export interface MemberSelectionModalProps {
    */
   mode: MemberSelectionMode;
   onCancel: () => void;
-  onConfirm: (selectedAgents: string[]) => void | Promise<void>;
+  onConfirm: (
+    selectedAgents: string[],
+    hostConfig?: { model?: string; provider?: string },
+    enableSupervisor?: boolean,
+  ) => void | Promise<void>;
   open: boolean;
   /**
    * Pre-selected agent IDs (useful for editing existing groups)
@@ -145,15 +170,56 @@ export interface MemberSelectionModalProps {
 }
 
 const MemberSelectionModal = memo<MemberSelectionModalProps>(
-  ({ existingMembers = [], mode, onCancel, onConfirm, open, preSelectedAgents = [] }) => {
+  ({
+    currentHostConfig,
+    existingMembers = [],
+    mode,
+    onCancel,
+    onConfirm,
+    open,
+    preSelectedAgents = [],
+  }) => {
     const { t } = useTranslation(['chat', 'common']);
     const { styles, cx } = useStyles();
+    const enabledModels = useEnabledChatModels();
     const [selectedAgents, setSelectedAgents] = useState<string[]>(preSelectedAgents);
     const [searchTerm, setSearchTerm] = useState('');
 
+    // Determine if host card should be shown
+    const isHostCurrentlyEnabled = mode === 'add' && currentHostConfig?.enableSupervisor === true;
+
+    // Initialize host state:
+    // - In create mode: default to enabled (isHostRemoved = false)
+    // - In add mode with host disabled: default to disabled (isHostRemoved = true)
+    const [isHostRemoved, setIsHostRemoved] = useState(mode === 'add' ? true : false);
+    const [hostModelConfig, setHostModelConfig] = useState<{ model?: string; provider?: string }>(
+      () => {
+        if (mode === 'add' && currentHostConfig) {
+          return {
+            model: currentHostConfig.orchestratorModel,
+            provider: currentHostConfig.orchestratorProvider,
+          };
+        }
+        // Set default for create mode
+        if (enabledModels.length > 0 && enabledModels[0].children.length > 0) {
+          const firstProvider = enabledModels[0];
+          const firstModel = firstProvider.children[0];
+
+          return {
+            model: firstModel.id,
+            provider: firstProvider.id,
+          };
+        }
+        return {};
+      },
+    );
+
     const agentSessions = useSessionStore((s) => {
       const allSessions = s.sessions || [];
-      return allSessions.filter((session) => session.type === LobeSessionType.Agent);
+      return allSessions.filter(
+        (session): session is LobeAgentSession =>
+          session.type === LobeSessionType.Agent && !session.config?.virtual,
+      );
     });
 
     const currentSessionId = useSessionStore((s) => s.activeId);
@@ -172,6 +238,14 @@ const MemberSelectionModal = memo<MemberSelectionModalProps>(
       setSearchTerm(e.target.value);
     }, []);
 
+    const handleHostToggle = useCallback((enabled: boolean) => {
+      setIsHostRemoved(!enabled);
+    }, []);
+
+    const handleHostModelChange = useCallback((config: { model?: string; provider?: string }) => {
+      setHostModelConfig(config);
+    }, []);
+
     // Filter logic based on mode
     const availableAgents = useMemo(() => {
       if (mode === 'create') {
@@ -237,14 +311,35 @@ const MemberSelectionModal = memo<MemberSelectionModalProps>(
     const handleReset = () => {
       setSelectedAgents(preSelectedAgents);
       setSearchTerm('');
+      setIsHostRemoved(mode === 'add' ? true : false);
+      if (mode === 'add' && currentHostConfig) {
+        setHostModelConfig({
+          model: currentHostConfig.orchestratorModel,
+          provider: currentHostConfig.orchestratorProvider,
+        });
+      }
     };
 
     const [isAdding, setIsAdding] = useState(false);
 
+    const normalizedHostModelConfig = useMemo(() => {
+      const model = hostModelConfig.model;
+      const provider = hostModelConfig.provider;
+
+      if (!model || !provider) return undefined;
+
+      return { model, provider };
+    }, [hostModelConfig]);
+
     const handleConfirm = async () => {
       try {
         setIsAdding(true);
-        await onConfirm(selectedAgents);
+        // Only pass host config if the host card is visible (being managed in this modal)
+        const shouldManageHost = !isHostCurrentlyEnabled;
+        const hostConfig =
+          shouldManageHost && !isHostRemoved ? normalizedHostModelConfig : undefined;
+        const enableSupervisor = shouldManageHost ? !isHostRemoved : undefined;
+        await onConfirm(selectedAgents, hostConfig, enableSupervisor);
         handleReset();
       } catch (error) {
         console.error('Failed to confirm action:', error);
@@ -265,8 +360,13 @@ const MemberSelectionModal = memo<MemberSelectionModalProps>(
     const confirmButtonText =
       mode === 'create' ? t('memberSelection.createGroup') : t('memberSelection.addMember');
 
+    // Calculate total member count including host if enabled
+    // Only count the host when the host card is visible (create mode or add mode with host disabled)
+    const shouldShowHostCard = !isHostCurrentlyEnabled;
+    const totalMemberCount = selectedAgents.length + (shouldShowHostCard && !isHostRemoved ? 1 : 0);
+
     const minMembersRequired = mode === 'create' ? 1 : 0; // At least 1 member for group creation
-    const isConfirmDisabled = selectedAgents.length < minMembersRequired || isAdding;
+    const isConfirmDisabled = totalMemberCount < minMembersRequired || isAdding;
 
     return (
       <Modal
@@ -280,7 +380,7 @@ const MemberSelectionModal = memo<MemberSelectionModalProps>(
               onClick={handleConfirm}
               type="primary"
             >
-              {confirmButtonText} ({selectedAgents.length})
+              {confirmButtonText} ({totalMemberCount})
             </Button>
           </Flexbox>
         }
@@ -337,22 +437,66 @@ const MemberSelectionModal = memo<MemberSelectionModalProps>(
             </Flexbox>
           </Flexbox>
 
-          {/* Right Column - Selected Agents */}
+          {/* Right Column - Host and Selected Agents */}
           <Flexbox className={styles.rightColumn} flex={1}>
-            {selectedAgentListItems.length === 0 ? (
-              <Flexbox align="center" flex={1} justify="center">
-                <Empty
-                  description={
-                    mode === 'create'
-                      ? t('memberSelection.noSelectedAgents')
-                      : t('memberSelection.noSelectedAgents')
-                  }
-                  image={Empty.PRESENTED_IMAGE_SIMPLE}
-                />
+            <Flexbox gap={16}>
+              {/* Host Card - Only show in create mode or when host is disabled in add mode */}
+              {!isHostCurrentlyEnabled && (
+                <Flexbox align="center" className={styles.hostCard} gap={12} horizontal>
+                  <Flexbox flex={1} gap={2}>
+                    <Text
+                      style={{ fontSize: 14, fontWeight: 500 }}
+                      type={isHostRemoved ? 'secondary' : undefined}
+                    >
+                      {t('groupWizard.host.title')}
+                    </Text>
+                    <Text
+                      style={{ color: '#999', fontSize: 12 }}
+                      type={isHostRemoved ? 'secondary' : undefined}
+                    >
+                      {t('groupWizard.host.description')}
+                    </Text>
+                  </Flexbox>
+                  <Flexbox align="center" gap={12} horizontal>
+                    <div
+                      className={cx(isHostRemoved && styles.modelSelectDisabled)}
+                      style={{ opacity: isHostRemoved ? 0.6 : 1 }}
+                    >
+                      <ModelSelect
+                        onChange={handleHostModelChange}
+                        requiredAbilities={['functionCall']}
+                        value={normalizedHostModelConfig}
+                      />
+                    </div>
+                    <Tooltip title={t('groupWizard.host.tooltip')}>
+                      <Switch
+                        checked={!isHostRemoved}
+                        onChange={(checked) => handleHostToggle(checked)}
+                        size="small"
+                      />
+                    </Tooltip>
+                  </Flexbox>
+                </Flexbox>
+              )}
+
+              {/* Selected Agents List */}
+              <Flexbox flex={1}>
+                {selectedAgentListItems.length === 0 ? (
+                  <Flexbox align="center" flex={1} justify="center">
+                    <Empty
+                      description={
+                        mode === 'create'
+                          ? t('memberSelection.noSelectedAgents')
+                          : t('memberSelection.noSelectedAgents')
+                      }
+                      image={Empty.PRESENTED_IMAGE_SIMPLE}
+                    />
+                  </Flexbox>
+                ) : (
+                  <List items={selectedAgentListItems} />
+                )}
               </Flexbox>
-            ) : (
-              <List items={selectedAgentListItems} />
-            )}
+            </Flexbox>
           </Flexbox>
         </Flexbox>
       </Modal>

package/src/features/Conversation/Messages/Assistant/Actions/index.tsx

@@ -8,6 +8,8 @@ import ShareMessageModal from '@/features/Conversation/components/ShareMessageMo
 import { VirtuosoContext } from '@/features/Conversation/components/VirtualizedList/VirtuosoContext';
 import { useChatStore } from '@/store/chat';
 import { threadSelectors } from '@/store/chat/selectors';
+import { useSessionStore } from '@/store/session';
+import { sessionSelectors } from '@/store/session/selectors';
 import { ChatMessage } from '@/types/message';
 
 import { InPortalThreadContext } from '../../../context/InPortalThreadContext';
@@ -25,6 +27,7 @@ export const AssistantActionsBar = memo<AssistantActionsProps>(({ id, data, inde
     !!s.activeThreadId,
     threadSelectors.hasThreadBySourceMsgId(id)(s),
   ]);
+  const isGroupSession = useSessionStore(sessionSelectors.isCurrentSessionGroupSession);
   const [showShareModal, setShareModal] = useState(false);
 
   const {
@@ -49,8 +52,10 @@ export const AssistantActionsBar = memo<AssistantActionsProps>(({ id, data, inde
   const items = useMemo(() => {
     if (hasTools) return [delAndRegenerate, copy];
 
-    return [edit, copy, inThread ? null : branching].filter(Boolean) as ActionIconGroupItemType[];
-  }, [inThread, hasTools]);
+    return [edit, copy, inThread || isGroupSession ? null : branching].filter(
+      Boolean,
+    ) as ActionIconGroupItemType[];
+  }, [inThread, hasTools, isGroupSession]);
 
   const { t } = useTranslation('common');
   const searchParams = useSearchParams();

package/src/features/Conversation/Messages/Assistant/Tool/Render/index.tsx

@@ -52,8 +52,10 @@ const Render = memo<RenderProps>(
 
       // 如果是 LOADING_FLAT 则说明还在加载中
       // 而 standalone 模式的插件 content 应该始终是 LOADING_FLAT
-      if (toolMessage.content === LOADING_FLAT && toolMessage.plugin?.type !== 'standalone')
-        return placeholder;
+      const inPlaceholder =
+        toolMessage.content === LOADING_FLAT && toolMessage.plugin?.type !== 'standalone';
+
+      if (inPlaceholder) return placeholder;
 
       return (
         <Suspense fallback={placeholder}>

package/src/features/Conversation/Messages/User/Actions.tsx

@@ -9,6 +9,8 @@ import { useTranslation } from 'react-i18next';
 
 import { useChatStore } from '@/store/chat';
 import { threadSelectors } from '@/store/chat/selectors';
+import { useSessionStore } from '@/store/session';
+import { sessionSelectors } from '@/store/session/selectors';
 
 import { VirtuosoContext } from '../../components/VirtualizedList/VirtuosoContext';
 import { InPortalThreadContext } from '../../context/InPortalThreadContext';
@@ -54,6 +56,8 @@ export const UserActionsBar = memo<UserActionsProps>(({ id, data, index }) => {
     s.delAndResendThreadMessage,
   ]);
 
+  const isGroupSession = useSessionStore(sessionSelectors.isCurrentSessionGroupSession);
+
   const { regenerate, edit, copy, divider, del, branching, tts, translate } = useChatListActionsBar(
     { hasThread },
   );
@@ -63,8 +67,10 @@ export const UserActionsBar = memo<UserActionsProps>(({ id, data, index }) => {
 
   const items = useMemo(
     () =>
-      [regenerate, edit, inThread ? null : branching].filter(Boolean) as ActionIconGroupItemType[],
-    [inThread],
+      [regenerate, edit, inThread || isGroupSession ? null : branching].filter(
+        Boolean,
+      ) as ActionIconGroupItemType[],
+    [inThread, isGroupSession],
   );
 
   const { message } = App.useApp();

package/src/features/GroupChatSettings/{ChatGroupSettings.tsx → AgentTeamChatSettings.tsx}

@@ -22,9 +22,9 @@ import { selectors, useStore } from './store';
 const { TextArea } = Input;
 
 /**
- * Chat Settings for Group Chat
+ * Chat Settings for Agent Team (Group Chat)
  */
-const ChatGroupSettings = memo(() => {
+const AgentTeamChatSettings = memo(() => {
   const { t } = useTranslation(['setting', 'common']);
   const [form] = Form.useForm();
   const updateConfig = useStore((s) => s.updateGroupConfig);
@@ -171,8 +171,9 @@ const ChatGroupSettings = memo(() => {
       itemsType={'group'}
       onFinish={async ({ _modelConfig, ...rest }) => {
         await updateConfig({
-          orchestratorModel: _modelConfig?.model,
-          orchestratorProvider: _modelConfig?.provider,
+          // Preserve existing values when _modelConfig is undefined (enableSupervisor is false)
+          orchestratorModel: _modelConfig?.model ?? config?.orchestratorModel,
+          orchestratorProvider: _modelConfig?.provider ?? config?.orchestratorProvider,
           ...rest,
         });
 
@@ -184,4 +185,4 @@ const ChatGroupSettings = memo(() => {
   );
 });
 
-export default ChatGroupSettings;
+export default AgentTeamChatSettings;