diff --git a/locales/en-US/setting.json b/locales/en-US/setting.json index 5b6bd98f7a9e..e302932757d8 100644 --- a/locales/en-US/setting.json +++ b/locales/en-US/setting.json @@ -355,6 +355,14 @@ "title": "WebRTC Sync" } }, + "systemAgent": { + "title": "System Agents", + "translation": { + "title": "Translation Settings", + "label": "Translation Agent", + "modelDesc": "Specific model for translate message" + } + }, "tab": { "about": "About", "agent": "Default Agent", diff --git a/src/app/(main)/settings/common/features/SystemAgent.tsx b/src/app/(main)/settings/common/features/SystemAgent.tsx new file mode 100644 index 000000000000..13fad59b0673 --- /dev/null +++ b/src/app/(main)/settings/common/features/SystemAgent.tsx @@ -0,0 +1,98 @@ +import { Form, type ItemGroup } from '@lobehub/ui'; +import { Form as AntForm, Select, SelectProps } from 'antd'; +import { createStyles } from 'antd-style'; +import isEqual from 'fast-deep-equal'; +import { MessageSquareMore } from 'lucide-react'; +import { memo, useMemo } from 'react'; +import { useTranslation } from 'react-i18next'; + +import { ModelItemRender, ProviderItemRender } from '@/components/ModelSelect'; +import { FORM_STYLE } from '@/const/layoutTokens'; +import { useUserStore } from '@/store/user'; +import { modelProviderSelectors, settingsSelectors } from '@/store/user/selectors'; +import { ModelProviderCard } from '@/types/llm'; + +import { useSyncSettings } from '../../hooks/useSyncSettings'; + +const SYSTEM_AGENT_SETTING_KEY = 'systemAgent'; + +type SettingItemGroup = ItemGroup; + +const useStyles = createStyles(({ css, prefixCls }) => ({ + select: css` + .${prefixCls}-select-dropdown .${prefixCls}-select-item-option-grouped { + padding-inline-start: 12px; + } + `, +})); +interface ModelOption { + label: any; + provider: string; + value: string; +} + +const SystemAgent = memo(() => { + const { t } = useTranslation('setting'); + const [form] = AntForm.useForm(); + + const settings = useUserStore(settingsSelectors.currentSettings, isEqual); + const [setTranslationSystemAgent] = useUserStore((s) => [s.setTranslationSystemAgent]); + + const select = useUserStore(modelProviderSelectors.modelProviderListForModelSelect, isEqual); + + const { styles } = useStyles(); + + const enabledList = select.filter((s) => s.enabled); + + const translationOptions = useMemo(() => { + const getChatModels = (provider: ModelProviderCard) => + provider.chatModels + .filter((c) => c.enabled) + .map((model) => ({ + label: , + provider: provider.id, + value: model.id, + })); + + if (enabledList.length === 1) { + const provider = enabledList[0]; + + return getChatModels(provider); + } + + return enabledList.map((provider) => ({ + label: , + options: getChatModels(provider), + })); + }, [enabledList]); + + const systemAgentSettings: SettingItemGroup = { + children: [ + { + children: ( +