From 12c62a03ec7ee7e8266b3edc08e78411035e8e6c Mon Sep 17 00:00:00 2001 From: CanisMinor Date: Wed, 8 May 2024 08:08:04 +0000 Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20fix:=20Fix=20Agent=20Settings=20?= =?UTF-8?q?Form?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/features/AgentSetting/AgentChat/index.tsx | 8 +- src/features/AgentSetting/AgentMeta/index.tsx | 105 +++++++++--------- .../AgentSetting/AgentModal/index.tsx | 4 +- src/features/AgentSetting/AgentTTS/index.tsx | 34 +++--- .../AgentSetting/useSyncAgemtSettings.ts | 14 +++ 5 files changed, 88 insertions(+), 77 deletions(-) create mode 100644 src/features/AgentSetting/useSyncAgemtSettings.ts diff --git a/src/features/AgentSetting/AgentChat/index.tsx b/src/features/AgentSetting/AgentChat/index.tsx index 7710c70c7c99..aa02faa10544 100644 --- a/src/features/AgentSetting/AgentChat/index.tsx +++ b/src/features/AgentSetting/AgentChat/index.tsx @@ -3,22 +3,20 @@ import { Form, ItemGroup, SelectWithImg, SliderWithInput } from '@lobehub/ui'; import { Input, Switch } from 'antd'; import { useThemeMode } from 'antd-style'; -import { debounce } from 'lodash-es'; import { LayoutList, MessagesSquare } from 'lucide-react'; import { memo } from 'react'; import { useTranslation } from 'react-i18next'; -import { useSyncSettings } from '@/app/(main)/settings/hooks/useSyncSettings'; import { FORM_STYLE } from '@/const/layoutTokens'; import { imageUrl } from '@/const/url'; import { useStore } from '../store'; +import { useAgentSyncSettings } from '../useSyncAgemtSettings'; const AgentChat = memo(() => { const { t } = useTranslation('setting'); const [form] = Form.useForm(); const { isDarkMode } = useThemeMode(); - const [ displayMode, enableAutoCreateTopic, @@ -33,7 +31,7 @@ const AgentChat = memo(() => { s.setAgentConfig, ]); - useSyncSettings(form); + useAgentSyncSettings(form); const chat: ItemGroup = { children: [ @@ -125,7 +123,7 @@ const AgentChat = memo(() => { form={form} items={[chat]} itemsType={'group'} - onValuesChange={debounce(updateConfig, 100)} + onValuesChange={updateConfig} variant={'pure'} {...FORM_STYLE} /> diff --git a/src/features/AgentSetting/AgentMeta/index.tsx b/src/features/AgentSetting/AgentMeta/index.tsx index 798e5ff9f63f..3903a353992f 100644 --- a/src/features/AgentSetting/AgentMeta/index.tsx +++ b/src/features/AgentSetting/AgentMeta/index.tsx @@ -6,7 +6,7 @@ import isEqual from 'fast-deep-equal'; import { isString } from 'lodash-es'; import { Wand2 } from 'lucide-react'; import dynamic from 'next/dynamic'; -import { memo, useMemo } from 'react'; +import { memo } from 'react'; import { useTranslation } from 'react-i18next'; import { FORM_STYLE } from '@/const/layoutTokens'; @@ -77,60 +77,57 @@ const AgentMeta = memo(() => { }; }); - const metaData: ItemGroup = useMemo( - () => ({ - children: [ - { - children: ( - updateMeta({ avatar })} - value={meta.avatar} - /> - ), - label: t('settingAgent.avatar.title'), - minWidth: undefined, - }, - { - children: ( - updateMeta({ backgroundColor })} - /> - ), - label: t('settingAgent.backgroundColor.title'), - minWidth: undefined, - }, - ...autocompleteItems, - ], - extra: ( - - - - ), - title: t('settingAgent.title'), - }), - [autocompleteItems, meta], - ); + autocompleteAllMeta(true); + }} + size={'small'} + > + {t('autoGenerate', { ns: 'common' })} + + + ), + title: t('settingAgent.title'), + }; return
; }); diff --git a/src/features/AgentSetting/AgentModal/index.tsx b/src/features/AgentSetting/AgentModal/index.tsx index 98087972683d..0b7144deee8d 100644 --- a/src/features/AgentSetting/AgentModal/index.tsx +++ b/src/features/AgentSetting/AgentModal/index.tsx @@ -6,10 +6,10 @@ import { debounce } from 'lodash-es'; import { memo } from 'react'; import { useTranslation } from 'react-i18next'; -import { useSyncSettings } from '@/app/(main)/settings/hooks/useSyncSettings'; import { FORM_STYLE } from '@/const/layoutTokens'; import { useStore } from '../store'; +import { useAgentSyncSettings } from '../useSyncAgemtSettings'; import ModelSelect from './ModelSelect'; const AgentModal = memo(() => { @@ -21,7 +21,7 @@ const AgentModal = memo(() => { s.setAgentConfig, ]); - useSyncSettings(form); + useAgentSyncSettings(form); const model: ItemGroup = { children: [ diff --git a/src/features/AgentSetting/AgentTTS/index.tsx b/src/features/AgentSetting/AgentTTS/index.tsx index 0452f3dfcee2..5938d35cfaa2 100644 --- a/src/features/AgentSetting/AgentTTS/index.tsx +++ b/src/features/AgentSetting/AgentTTS/index.tsx @@ -2,11 +2,10 @@ import { VoiceList } from '@lobehub/tts'; import { Form, ItemGroup } from '@lobehub/ui'; -import { Form as AFrom, Select, Switch } from 'antd'; -import isEqual from 'fast-deep-equal'; +import { Select, Switch } from 'antd'; import { debounce } from 'lodash-es'; import { Mic } from 'lucide-react'; -import { memo, useEffect } from 'react'; +import { memo, useMemo } from 'react'; import { useTranslation } from 'react-i18next'; import { FORM_STYLE } from '@/const/layoutTokens'; @@ -14,6 +13,7 @@ import { useUserStore } from '@/store/user'; import { settingsSelectors } from '@/store/user/selectors'; import { useStore } from '../store'; +import { useAgentSyncSettings } from '../useSyncAgemtSettings'; import SelectWithTTSPreview from './SelectWithTTSPreview'; import { ttsOptions } from './options'; @@ -22,21 +22,23 @@ const { openaiVoiceOptions, localeOptions } = VoiceList; const AgentTTS = memo(() => { const { t } = useTranslation('setting'); - const updateConfig = useStore((s) => s.setAgentConfig); - const [form] = AFrom.useForm(); + const [form] = Form.useForm(); const voiceList = useUserStore((s) => { const locale = settingsSelectors.currentLanguage(s); return (all?: boolean) => new VoiceList(all ? undefined : locale); }); - const config = useStore((s) => s.config, isEqual); + const [showAllLocaleVoice, ttsService, updateConfig] = useStore((s) => [ + s.config.tts.showAllLocaleVoice, + s.config.tts.ttsService, + s.setAgentConfig, + ]); - useEffect(() => { - form.setFieldsValue(config); - }, [config]); + useAgentSyncSettings(form); - const showAllLocaleVoice = config.tts.showAllLocaleVoice; - - const { edgeVoiceOptions, microsoftVoiceOptions } = voiceList(showAllLocaleVoice); + const { edgeVoiceOptions, microsoftVoiceOptions } = useMemo( + () => voiceList(showAllLocaleVoice), + [showAllLocaleVoice], + ); const tts: ItemGroup = { children: [ @@ -49,7 +51,7 @@ const AgentTTS = memo(() => { { children: , desc: t('settingTTS.showAllLocaleVoice.desc'), - hidden: config.tts.ttsService === 'openai', + hidden: ttsService === 'openai', label: t('settingTTS.showAllLocaleVoice.title'), minWidth: undefined, name: [TTS_SETTING_KEY, 'showAllLocaleVoice'], @@ -58,7 +60,7 @@ const AgentTTS = memo(() => { { children: , desc: t('settingTTS.voice.desc'), - hidden: config.tts.ttsService !== 'openai', + hidden: ttsService !== 'openai', label: t('settingTTS.voice.title'), name: [TTS_SETTING_KEY, 'voice', 'openai'], }, @@ -66,7 +68,7 @@ const AgentTTS = memo(() => { children: , desc: t('settingTTS.voice.desc'), divider: false, - hidden: config.tts.ttsService !== 'edge', + hidden: ttsService !== 'edge', label: t('settingTTS.voice.title'), name: [TTS_SETTING_KEY, 'voice', 'edge'], }, @@ -74,7 +76,7 @@ const AgentTTS = memo(() => { children: , desc: t('settingTTS.voice.desc'), divider: false, - hidden: config.tts.ttsService !== 'microsoft', + hidden: ttsService !== 'microsoft', label: t('settingTTS.voice.title'), name: [TTS_SETTING_KEY, 'voice', 'microsoft'], }, diff --git a/src/features/AgentSetting/useSyncAgemtSettings.ts b/src/features/AgentSetting/useSyncAgemtSettings.ts new file mode 100644 index 000000000000..0066a40e65d2 --- /dev/null +++ b/src/features/AgentSetting/useSyncAgemtSettings.ts @@ -0,0 +1,14 @@ +import { FormInstance } from 'antd/es/form/hooks/useForm'; +import isEqual from 'fast-deep-equal'; +import { useLayoutEffect } from 'react'; + +import { useStore } from './store'; + +export const useAgentSyncSettings = (form: FormInstance) => { + const config = useStore((s) => s.config, isEqual); + useLayoutEffect(() => { + form.setFieldsValue(config); + }, [config]); + + return config; +};