@lobehub/lobehub 2.0.0-next.266 → 2.0.0-next.268

package/src/features/GroupChatSettings/AgentCard.tsx

@@ -1,154 +0,0 @@
-'use client';
-
-import { Avatar, Flexbox, Icon, Skeleton, Text, Tooltip } from '@lobehub/ui';
-import { Switch } from 'antd';
-import { createStaticStyles, cssVar, cx } from 'antd-style';
-import { Bot, Loader2 } from 'lucide-react';
-import { memo } from 'react';
-import { useTranslation } from 'react-i18next';
-
-import { DEFAULT_AVATAR } from '@/const/meta';
-import { useIsDark } from '@/hooks/useIsDark';
-import { type LobeAgentSession } from '@/types/session';
-
-const styles = createStaticStyles(({ css }) => ({
-  container: css`
-    position: relative;
-
-    overflow: hidden;
-
-    height: 100%;
-    border-radius: 12px;
-
-    background: ${cssVar.colorBgContainer};
-
-    transition: border-color 0.2s ${cssVar.motionEaseInOut};
-
-    &:hover {
-      border-color: ${cssVar.colorPrimary};
-    }
-  `,
-  containerDark: css`
-    border: 1px solid ${cssVar.colorBorder};
-  `,
-  containerLight: css`
-    border: 1px solid ${cssVar.colorBorderSecondary};
-  `,
-  desc: css`
-    overflow: hidden;
-
-    height: 3em;
-    margin-block-end: 0 !important;
-
-    line-height: 1.5;
-    color: ${cssVar.colorTextDescription};
-  `,
-  title: css`
-    line-height: 1.3;
-  `,
-}));
-
-interface AgentCardProps {
-  agent: LobeAgentSession;
-  inGroup: boolean;
-  isHost?: boolean;
-  loading?: boolean;
-  onAction: (agentId: string, action: 'add' | 'remove') => void;
-  operationLoading?: boolean;
-}
-
-const AgentCard = memo<AgentCardProps>(
-  ({ agent, inGroup, isHost, loading, onAction, operationLoading }) => {
-    const { t } = useTranslation('setting');
-    const isDarkMode = useIsDark();
-
-    if (loading) {
-      return (
-        <Flexbox
-          className={cx(
-            styles.container,
-            isDarkMode ? styles.containerDark : styles.containerLight,
-          )}
-          gap={24}
-          padding={16}
-        >
-          <Skeleton active />
-        </Flexbox>
-      );
-    }
-
-    const agentId = agent.config?.id;
-    const title = agent.meta?.title || t('settingGroupMembers.defaultAgent');
-    const description = agent.meta?.description || '';
-    const avatar = agent.meta?.avatar || DEFAULT_AVATAR;
-    const avatarBackground = agent.meta?.backgroundColor;
-
-    if (!agentId) return null;
-
-    const handleAction = (checked: boolean) => {
-      onAction(agentId, checked ? 'add' : 'remove');
-    };
-
-    return (
-      <Flexbox
-        className={cx(styles.container, isDarkMode ? styles.containerDark : styles.containerLight)}
-        gap={24}
-      >
-        <Flexbox gap={12} padding={16} width={'100%'}>
-          <Flexbox gap={12} width={'100%'}>
-            <Flexbox align={'center'} horizontal justify={'space-between'}>
-              <Flexbox align={'center'} flex={1} gap={8} horizontal style={{ minWidth: 0 }}>
-                <Avatar
-                  avatar={avatar}
-                  background={avatarBackground}
-                  shape={'square'}
-                  size={24}
-                  style={{ flexShrink: 0 }}
-                />
-                <Text
-                  className={styles.title}
-                  ellipsis
-                  style={{ fontSize: 16, fontWeight: 'bold', minWidth: 0 }}
-                >
-                  {title}
-                </Text>
-                {isHost && (
-                  <Tooltip title={t('settingGroupMembers.groupHost')}>
-                    <Icon icon={Bot} size="small" style={{ color: '#1890ff' }} />
-                  </Tooltip>
-                )}
-              </Flexbox>
-            </Flexbox>
-            <Text
-              className={styles.desc}
-              ellipsis={{
-                rows: 2,
-              }}
-            >
-              {description || t('settingGroupMembers.noDescription')}
-            </Text>
-          </Flexbox>
-          <Flexbox align="center" horizontal justify={'space-between'} width={'100%'}>
-            <Icon icon={Loader2} size="small" spin style={{ opacity: operationLoading ? 1 : 0 }} />
-            <Tooltip
-              title={
-                inGroup
-                  ? t('settingGroupMembers.removeFromGroup')
-                  : t('settingGroupMembers.addToGroup')
-              }
-            >
-              <Switch
-                checked={inGroup}
-                disabled={operationLoading}
-                onChange={handleAction}
-                size="small"
-              />
-            </Tooltip>
-          </Flexbox>
-        </Flexbox>
-      </Flexbox>
-    );
-  },
-);
-
-export default AgentCard;

package/src/features/GroupChatSettings/AgentTeamChatSettings.tsx

@@ -1,179 +0,0 @@
-'use client';
-
-import {
-  Form,
-  type FormGroupItemType,
-  Icon,
-  Segmented,
-  Select,
-  SliderWithInput,
-} from '@lobehub/ui';
-import { Form as AntdForm, App, Input, Switch } from 'antd';
-import { isEqual } from 'es-toolkit/compat';
-import { Coffee, Rabbit, Turtle } from 'lucide-react';
-import { memo } from 'react';
-import { useTranslation } from 'react-i18next';
-
-import { FORM_STYLE } from '@/const/layoutTokens';
-
-import ModelSelect from '../ModelSelect';
-import { selectors, useStore } from './store';
-
-const { TextArea } = Input;
-
-/**
- * Chat Settings for Agent Team (Group Chat)
- */
-const AgentTeamChatSettings = memo(() => {
-  const { t } = useTranslation(['setting', 'common']);
-  const [form] = Form.useForm();
-  const updateConfig = useStore((s) => s.updateGroupConfig);
-  const config = useStore(selectors.currentChatConfig, isEqual);
-
-  const { message } = App.useApp();
-
-  // Watch the allowDM value to conditionally show revealDM
-  const allowDM = AntdForm.useWatch('allowDM', form);
-  // Watch the enableSupervisor value to conditionally show host options
-  const enableSupervisor = AntdForm.useWatch('enableSupervisor', form);
-
-  const responseSpeedOptions = [
-    {
-      icon: <Icon icon={Turtle} size={16} />,
-      label: t('settingGroupChat.responseSpeed.options.slow'),
-      value: 'slow',
-    },
-    {
-      icon: <Icon icon={Coffee} size={16} />,
-      label: t('settingGroupChat.responseSpeed.options.medium'),
-      value: 'medium',
-    },
-    {
-      icon: <Icon icon={Rabbit} size={16} />,
-      label: t('settingGroupChat.responseSpeed.options.fast'),
-      value: 'fast',
-    },
-  ];
-
-  const supervisorOptions: FormGroupItemType = {
-    children: [
-      {
-        children: <Switch />,
-        desc: t('settingGroupChat.enableSupervisor.desc'),
-        divider: false,
-        label: t('settingGroupChat.enableSupervisor.title'),
-        name: 'enableSupervisor',
-      },
-      // Only show other options when enableSupervisor is true
-      ...(enableSupervisor
-        ? [
-            {
-              children: <ModelSelect requiredAbilities={['structuredOutput']} />,
-              desc: t('settingGroupChat.model.desc'),
-              label: t('settingGroupChat.model.title'),
-              name: '_modelConfig',
-            },
-            {
-              children: (
-                <TextArea
-                  autoSize={{ maxRows: 8, minRows: 3 }}
-                  placeholder={t('settingGroupChat.systemPrompt.placeholder')}
-                  rows={4}
-                />
-              ),
-              desc: t('settingGroupChat.systemPrompt.desc'),
-              label: t('settingGroupChat.systemPrompt.title'),
-              name: 'systemPrompt',
-            },
-          ]
-        : []),
-    ],
-    title: t('settingGroupChat.orchestratorTitle'),
-  };
-
-  const chatOptions: FormGroupItemType = {
-    children: [
-      {
-        children: <Segmented options={responseSpeedOptions} />,
-        desc: t('settingGroupChat.responseSpeed.desc'),
-        label: t('settingGroupChat.responseSpeed.title'),
-        name: 'responseSpeed',
-      },
-      {
-        children: (
-          <Select
-            options={[
-              {
-                label: t('settingGroupChat.responseOrder.options.sequential'),
-                value: 'sequential',
-              },
-              { label: t('settingGroupChat.responseOrder.options.natural'), value: 'natural' },
-            ]}
-            placeholder={t('settingGroupChat.responseOrder.placeholder')}
-          />
-        ),
-        desc: t('settingGroupChat.responseOrder.desc'),
-        label: t('settingGroupChat.responseOrder.title'),
-        name: 'responseOrder',
-      },
-      {
-        children: <SliderWithInput max={32} min={0} step={1} unlimitedInput={true} />,
-        desc: t('settingGroupChat.maxResponseInRow.desc'),
-        divider: false,
-        label: t('settingGroupChat.maxResponseInRow.title'),
-        name: 'maxResponseInRow',
-      },
-      {
-        children: <Switch />,
-        desc: t('settingGroupChat.allowDM.desc'),
-        divider: false,
-        label: t('settingGroupChat.allowDM.title'),
-        name: 'allowDM',
-      },
-      // Only show revealDM when allowDM is true
-      ...(allowDM
-        ? [
-            {
-              children: <Switch />,
-              desc: t('settingGroupChat.revealDM.desc'),
-              divider: false,
-              label: t('settingGroupChat.revealDM.title'),
-              name: 'revealDM',
-            },
-          ]
-        : []),
-    ],
-    title: t('settingGroupChat.title'),
-  };
-
-  return (
-    <Form
-      footer={<Form.SubmitFooter />}
-      form={form}
-      initialValues={{
-        ...config,
-        _modelConfig: {
-          model: config?.orchestratorModel,
-          provider: config?.orchestratorProvider,
-        },
-        enableSupervisor: config?.enableSupervisor ?? true,
-      }}
-      items={[supervisorOptions, ...(enableSupervisor ? [chatOptions] : [])]}
-      itemsType={'group'}
-      onFinish={async ({ _modelConfig, ...rest }) => {
-        await updateConfig({
-          // Preserve existing values when _modelConfig is undefined (enableSupervisor is false)
-          orchestratorModel: _modelConfig?.model ?? config?.orchestratorModel,
-          orchestratorProvider: _modelConfig?.provider ?? config?.orchestratorProvider,
-          ...rest,
-        });
-
-        message.success(t('message.success'));
-      }}
-      variant={'borderless'}
-      {...FORM_STYLE}
-    />
-  );
-});
-
-export default AgentTeamChatSettings;

package/src/features/GroupChatSettings/AgentTeamMembersSettings.tsx

@@ -1,244 +0,0 @@
-'use client';
-
-import { ActionIcon, Flexbox, Grid, Tag, Text } from '@lobehub/ui';
-import { createStaticStyles } from 'antd-style';
-import { Plus } from 'lucide-react';
-import { memo, useMemo, useState } from 'react';
-import { useTranslation } from 'react-i18next';
-
-import { DEFAULT_AVATAR } from '@/const/meta';
-import { useAgentGroupStore } from '@/store/agentGroup';
-import { agentGroupSelectors } from '@/store/agentGroup/selectors';
-import { useSessionStore } from '@/store/session';
-import { sessionSelectors } from '@/store/session/selectors';
-import { type LobeAgentSession, type LobeGroupSession, LobeSessionType } from '@/types/session';
-
-import AgentCard from './AgentCard';
-import HostMemberCard from './HostMemberCard';
-
-const styles = createStaticStyles(({ css }) => ({
-  container: css`
-    width: 100%;
-  `,
-}));
-
-const HOST_MEMBER_ID = 'supervisor';
-
-const AgentTeamMembersSettings = memo(() => {
-  const { t } = useTranslation('setting');
-  const [loadingAgentId, setLoadingAgentId] = useState<string | null>(null);
-  const [isCreatingMember, setIsCreatingMember] = useState(false);
-
-  const activeGroupId = useSessionStore((s) => s.activeId);
-  const currentSession = useSessionStore(sessionSelectors.currentSession) as LobeGroupSession;
-  const groupConfig = useAgentGroupStore(agentGroupSelectors.currentGroupConfig);
-
-  const addAgentsToGroup = useAgentGroupStore((s) => s.addAgentsToGroup);
-  const removeAgentFromGroup = useAgentGroupStore((s) => s.removeAgentFromGroup);
-  const updateGroupConfig = useAgentGroupStore((s) => s.updateGroupConfig);
-  const refreshSessions = useSessionStore((s) => s.refreshSessions);
-  const createSession = useSessionStore((s) => s.createSession);
-
-  // Get all agent sessions
-  const agentSessions = useSessionStore((s) => {
-    const allSessions = s.sessions || [];
-    return allSessions.filter(
-      (session) => session.type === LobeSessionType.Agent,
-    ) as LobeAgentSession[];
-  });
-
-  const currentSessionId = useSessionStore((s) => s.activeId);
-
-  const isSupervisorEnabled = Boolean(groupConfig?.enableSupervisor);
-
-  // Get member IDs from current session
-  const memberIds = useMemo(() => {
-    return currentSession?.members?.map((member: any) => member.id) || [];
-  }, [currentSession?.members]);
-
-  // Separate agents into two groups: in group and not in group
-  const { agentsInGroup, agentsNotInGroup } = useMemo(() => {
-    const inGroup: LobeAgentSession[] = [];
-    const notInGroup: LobeAgentSession[] = [];
-
-    agentSessions.forEach((agent) => {
-      const agentId = agent.config?.id;
-      if (!agentId || agent.id === currentSessionId) return; // Skip current session
-
-      if (memberIds.includes(agentId)) {
-        inGroup.push(agent);
-      } else {
-        notInGroup.push(agent);
-      }
-    });
-
-    return { agentsInGroup: inGroup, agentsNotInGroup: notInGroup };
-  }, [agentSessions, memberIds, currentSessionId]);
-
-  const handleAgentAction = async (agentId: string, action: 'add' | 'remove') => {
-    if (!activeGroupId) {
-      console.error('No active group to perform action on');
-      return;
-    }
-
-    // Check if this is the host member
-    const isHostMember = agentId === HOST_MEMBER_ID;
-
-    // Set loading state for this specific agent
-    setLoadingAgentId(agentId);
-
-    try {
-      if (action === 'add') {
-        if (isHostMember) {
-          // Host toggle updates supervisor flag instead of modifying members
-          await updateGroupConfig({ enableSupervisor: true });
-        } else {
-          await addAgentsToGroup(activeGroupId, [agentId]);
-        }
-      } else {
-        if (isHostMember) {
-          // Host toggle updates supervisor flag instead of modifying members
-          await updateGroupConfig({ enableSupervisor: false });
-        } else {
-          await removeAgentFromGroup(activeGroupId, agentId);
-        }
-      }
-
-      // Refresh session data to reflect the changes
-      await refreshSessions();
-    } catch (error) {
-      console.error(`Failed to ${action} agent ${action === 'add' ? 'to' : 'from'} group:`, error);
-    } finally {
-      // Clear loading state
-      setLoadingAgentId(null);
-    }
-  };
-
-  const hostOperationLoading = loadingAgentId === HOST_MEMBER_ID;
-
-  const handleHostToggle = (checked: boolean) => {
-    handleAgentAction(HOST_MEMBER_ID, checked ? 'add' : 'remove');
-  };
-
-  const handleCreateMember = async () => {
-    if (!activeGroupId || isCreatingMember) return;
-
-    setIsCreatingMember(true);
-
-    try {
-      // Create a virtual assistant
-      const sessionId = await createSession(
-        {
-          config: {
-            virtual: true,
-          },
-          meta: {
-            avatar: DEFAULT_AVATAR,
-            description: '',
-            title: t('settingGroupMembers.defaultAgent'),
-          },
-        },
-        false, // Don't switch to the new session
-      );
-
-      // Refresh sessions to get the latest data
-      await refreshSessions();
-
-      // Get the agent ID from the created session
-      const session = sessionSelectors.getSessionById(sessionId)(useSessionStore.getState());
-      if (session && session.type === LobeSessionType.Agent) {
-        const agentSession = session as LobeAgentSession;
-        const agentId = agentSession.config?.id;
-
-        if (agentId) {
-          // Add the agent to the current group
-          await addAgentsToGroup(activeGroupId, [agentId]);
-          await refreshSessions();
-        }
-      }
-    } catch (error) {
-      console.error('Failed to create virtual member:', error);
-    } finally {
-      setIsCreatingMember(false);
-    }
-  };
-
-  const groupMemberCount = agentsInGroup.length + (isSupervisorEnabled ? 1 : 0);
-  const availableAgentCount = agentsNotInGroup.length + (isSupervisorEnabled ? 0 : 1);
-
-  return (
-    <Flexbox className={styles.container} gap={40}>
-      {/* Agents in Group Section */}
-      <Flexbox gap={24}>
-        <Flexbox align={'center'} gap={8} horizontal justify="space-between">
-          <Flexbox align={'center'} gap={8} horizontal>
-            <Text strong style={{ fontSize: 18 }}>
-              {t('settingGroupMembers.groupMembers')}
-            </Text>
-            <Tag>{groupMemberCount}</Tag>
-          </Flexbox>
-          <ActionIcon
-            icon={Plus}
-            loading={isCreatingMember}
-            onClick={handleCreateMember}
-            title={t('settingGroupMembers.createMember')}
-          />
-        </Flexbox>
-        <Grid gap={16} rows={3}>
-          {isSupervisorEnabled && (
-            <HostMemberCard checked loading={hostOperationLoading} onToggle={handleHostToggle} />
-          )}
-          {agentsInGroup.map((agent) => (
-            <AgentCard
-              agent={agent}
-              inGroup={true}
-              key={agent.config?.id}
-              onAction={handleAgentAction}
-              operationLoading={loadingAgentId === agent.config?.id}
-            />
-          ))}
-          {agentsInGroup.length === 0 && !isSupervisorEnabled && (
-            <Text style={{ color: '#999', gridColumn: '1 / -1', padding: 40, textAlign: 'center' }}>
-              {t('settingGroupMembers.noMembersInGroup')}
-            </Text>
-          )}
-        </Grid>
-      </Flexbox>
-
-      {/* Agents not in Group Section */}
-      <Flexbox gap={24}>
-        <Flexbox align={'center'} gap={8} horizontal>
-          <Text strong style={{ fontSize: 18 }}>
-            {t('settingGroupMembers.availableAgents')}
-          </Text>
-          <Tag>{availableAgentCount}</Tag>
-        </Flexbox>
-        <Grid gap={16} rows={3}>
-          {!isSupervisorEnabled && (
-            <HostMemberCard
-              checked={false}
-              loading={hostOperationLoading}
-              onToggle={handleHostToggle}
-            />
-          )}
-          {agentsNotInGroup.map((agent) => (
-            <AgentCard
-              agent={agent}
-              inGroup={false}
-              key={agent.config?.id}
-              onAction={handleAgentAction}
-              operationLoading={loadingAgentId === agent.config?.id}
-            />
-          ))}
-          {agentsNotInGroup.length === 0 && isSupervisorEnabled && (
-            <Text style={{ color: '#999', gridColumn: '1 / -1', padding: 40, textAlign: 'center' }}>
-              {t('settingGroupMembers.noAvailableAgents')}
-            </Text>
-          )}
-        </Grid>
-      </Flexbox>
-    </Flexbox>
-  );
-});
-
-export default AgentTeamMembersSettings;

package/src/features/GroupChatSettings/AgentTeamMetaSettings.tsx

@@ -1,94 +0,0 @@
-'use client';
-
-import { Form, type FormGroupItemType, Icon, Segmented } from '@lobehub/ui';
-import { useUpdateEffect } from 'ahooks';
-import { Input } from 'antd';
-import isEqual from 'fast-deep-equal';
-import { Briefcase, Coffee } from 'lucide-react';
-import { memo } from 'react';
-import { useTranslation } from 'react-i18next';
-
-import { FORM_STYLE } from '@/const/layoutTokens';
-
-import { selectors, useStore } from './store';
-
-const { TextArea } = Input;
-
-const AgentTeamMetaSettings = memo(() => {
-  const { t } = useTranslation(['setting', 'common']);
-  const [form] = Form.useForm();
-
-  const updateMeta = useStore((s) => s.updateGroupMeta);
-  const meta = useStore(selectors.currentMetaConfig, isEqual) || {};
-  const updateConfig = useStore((s) => s.updateGroupConfig);
-  const config = useStore(selectors.currentChatConfig, isEqual) || {};
-
-  useUpdateEffect(() => {
-    form.setFieldsValue({ ...meta, scene: config.scene });
-  }, [meta, config?.scene]);
-
-  const groupSettings: FormGroupItemType = {
-    children: [
-      {
-        children: <Input placeholder={t('settingGroup.name.placeholder')} />,
-        label: t('settingGroup.name.title'),
-        name: 'title',
-      },
-      {
-        children: (
-          <TextArea
-            autoSize={{ maxRows: 10, minRows: 5 }}
-            placeholder={t('settingGroup.description.placeholder')}
-            rows={4}
-          />
-        ),
-        label: t('settingGroup.description.title'),
-        name: 'description',
-      },
-      {
-        children: (
-          <Segmented
-            options={[
-              {
-                icon: <Icon icon={Coffee} size={16} />,
-                label: t('settingGroup.scene.options.casual'),
-                value: 'casual',
-              },
-              {
-                icon: <Icon icon={Briefcase} size={16} />,
-                label: t('settingGroup.scene.options.productive'),
-                value: 'productive',
-              },
-            ]}
-          />
-        ),
-        desc: t('settingGroup.scene.desc'),
-        label: t('settingGroup.scene.title'),
-        minWidth: undefined,
-        name: 'scene',
-      },
-    ],
-    title: t('settingGroup.title'),
-  };
-
-  return (
-    <Form
-      footer={<Form.SubmitFooter />}
-      form={form}
-      initialValues={{ ...meta, scene: config.scene }}
-      items={[groupSettings]}
-      itemsType={'group'}
-      onFinish={async (values) => {
-        const { scene, ...metaPayload } = values as any;
-        await updateMeta(metaPayload);
-        if (scene && scene !== config.scene) {
-          await updateConfig({ scene });
-        }
-      }}
-      variant={'borderless'}
-      {...FORM_STYLE}
-    />
-  );
-});
-
-export default AgentTeamMetaSettings;