🐛 fix: Fix Agent Settings Form

SilvaneiMartins · May 8, 2024 · 12c62a0 · 12c62a0
1 parent 04c1826
commit 12c62a0
Show file tree

Hide file tree

Showing 5 changed files with 88 additions and 77 deletions.
diff --git 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
@@ -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: (
-            <EmojiPicker
-              backgroundColor={meta.backgroundColor}
-              locale={locale}
-              onChange={(avatar) => updateMeta({ avatar })}
-              value={meta.avatar}
-            />
-          ),
-          label: t('settingAgent.avatar.title'),
-          minWidth: undefined,
-        },
-        {
-          children: (
-            <BackgroundSwatches
-              backgroundColor={meta.backgroundColor}
-              onChange={(backgroundColor) => updateMeta({ backgroundColor })}
-            />
-          ),
-          label: t('settingAgent.backgroundColor.title'),
-          minWidth: undefined,
-        },
-        ...autocompleteItems,
-      ],
-      extra: (
-        <Tooltip
-          title={
-            !hasSystemRole
-              ? t('autoGenerateTooltipDisabled', { ns: 'common' })
-              : t('autoGenerateTooltip', { ns: 'common' })
-          }
-        >
-          <Button
-            disabled={!hasSystemRole}
-            icon={<Icon icon={Wand2} />}
-            loading={Object.values(loading).some((i) => !!i)}
-            onClick={(e: any) => {
-              e.stopPropagation();
+  const metaData: ItemGroup = {
+    children: [
+      {
+        children: (
+          <EmojiPicker
+            backgroundColor={meta.backgroundColor}
+            locale={locale}
+            onChange={(avatar) => updateMeta({ avatar })}
+            value={meta.avatar}
+          />
+        ),
+        label: t('settingAgent.avatar.title'),
+        minWidth: undefined,
+      },
+      {
+        children: (
+          <BackgroundSwatches
+            backgroundColor={meta.backgroundColor}
+            onChange={(backgroundColor) => updateMeta({ backgroundColor })}
+          />
+        ),
+        label: t('settingAgent.backgroundColor.title'),
+        minWidth: undefined,
+      },
+      ...autocompleteItems,
+    ],
+    extra: (
+      <Tooltip
+        title={
+          !hasSystemRole
+            ? t('autoGenerateTooltipDisabled', { ns: 'common' })
+            : t('autoGenerateTooltip', { ns: 'common' })
+        }
+      >
+        <Button
+          disabled={!hasSystemRole}
+          icon={<Icon icon={Wand2} />}
+          loading={Object.values(loading).some((i) => !!i)}
+          onClick={(e: any) => {
+            e.stopPropagation();
 
-              autocompleteAllMeta(true);
-            }}
-            size={'small'}
-          >
-            {t('autoGenerate', { ns: 'common' })}
-          </Button>
-        </Tooltip>
-      ),
-      title: t('settingAgent.title'),
-    }),
-    [autocompleteItems, meta],
-  );
+            autocompleteAllMeta(true);
+          }}
+          size={'small'}
+        >
+          {t('autoGenerate', { ns: 'common' })}
+        </Button>
+      </Tooltip>
+    ),
+    title: t('settingAgent.title'),
+  };
 
   return <Form items={[metaData]} itemsType={'group'} variant={'pure'} {...FORM_STYLE} />;
 });

diff --git 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
@@ -2,18 +2,18 @@
 
 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';
 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: <Switch />,
         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,23 +60,23 @@ const AgentTTS = memo(() => {
       {
         children: <SelectWithTTSPreview options={openaiVoiceOptions} server={'openai'} />,
         desc: t('settingTTS.voice.desc'),
-        hidden: config.tts.ttsService !== 'openai',
+        hidden: ttsService !== 'openai',
         label: t('settingTTS.voice.title'),
         name: [TTS_SETTING_KEY, 'voice', 'openai'],
       },
       {
         children: <SelectWithTTSPreview options={edgeVoiceOptions} server={'edge'} />,
         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'],
       },
       {
         children: <SelectWithTTSPreview options={microsoftVoiceOptions} server={'microsoft'} />,
         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
@@ -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;
+};