@lobehub/chat 1.86.1 → 1.87.1

package/src/app/[variants]/(main)/settings/common/features/Common.tsx

@@ -1,14 +1,18 @@
 'use client';
 
-import { Button, Form, type FormGroupItemType, InputPassword } from '@lobehub/ui';
-import { App } from 'antd';
+import { Form, type FormGroupItemType, Icon, ImageSelect, InputPassword } from '@lobehub/ui';
+import { Select } from '@lobehub/ui';
+import { Skeleton } from 'antd';
 import isEqual from 'fast-deep-equal';
-import { memo, useCallback } from 'react';
+import { Loader2Icon, Monitor, Moon, Sun } from 'lucide-react';
+import { memo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
-import { useSyncSettings } from '@/app/[variants]/(main)/settings/hooks/useSyncSettings';
 import { FORM_STYLE } from '@/const/layoutTokens';
-import { DEFAULT_SETTINGS } from '@/const/settings';
+import { imageUrl } from '@/const/url';
+import { localeOptions } from '@/locales/resources';
+import { useGlobalStore } from '@/store/global';
+import { systemStatusSelectors } from '@/store/global/selectors';
 import { useServerConfigStore } from '@/store/serverConfig';
 import { serverConfigSelectors } from '@/store/serverConfig/selectors';
 import { useUserStore } from '@/store/user';
@@ -16,30 +20,67 @@ import { settingsSelectors } from '@/store/user/selectors';
 
 const Common = memo(() => {
   const { t } = useTranslation('setting');
-  const [form] = Form.useForm();
 
   const showAccessCodeConfig = useServerConfigStore(serverConfigSelectors.enabledAccessCode);
-
   const settings = useUserStore(settingsSelectors.currentSettings, isEqual);
-  const [setSettings, resetSettings] = useUserStore((s) => [s.setSettings, s.resetSettings]);
-
-  const { message, modal } = App.useApp();
+  const themeMode = useGlobalStore(systemStatusSelectors.themeMode);
+  const language = useGlobalStore(systemStatusSelectors.language);
+  const [setSettings, isUserStateInit] = useUserStore((s) => [s.setSettings, s.isUserStateInit]);
+  const [setThemeMode, switchLocale, isStatusInit] = useGlobalStore((s) => [
+    s.switchThemeMode,
+    s.switchLocale,
+    s.isStatusInit,
+  ]);
+  const [loading, setLoading] = useState(false);
 
-  const handleReset = useCallback(() => {
-    modal.confirm({
-      centered: true,
-      okButtonProps: { danger: true },
-      onOk: () => {
-        resetSettings();
-        form.setFieldsValue(DEFAULT_SETTINGS);
-        message.success(t('danger.reset.success'));
-      },
-      title: t('danger.reset.confirm'),
-    });
-  }, []);
+  if (!(isStatusInit && isUserStateInit))
+    return <Skeleton active paragraph={{ rows: 5 }} title={false} />;
 
-  const system: FormGroupItemType = {
+  const theme: FormGroupItemType = {
     children: [
+      {
+        children: (
+          <ImageSelect
+            height={60}
+            onChange={setThemeMode}
+            options={[
+              {
+                icon: Sun,
+                img: imageUrl('theme_light.webp'),
+                label: t('settingCommon.themeMode.light'),
+                value: 'light',
+              },
+              {
+                icon: Moon,
+                img: imageUrl('theme_dark.webp'),
+                label: t('settingCommon.themeMode.dark'),
+                value: 'dark',
+              },
+              {
+                icon: Monitor,
+                img: imageUrl('theme_auto.webp'),
+                label: t('settingCommon.themeMode.auto'),
+                value: 'auto',
+              },
+            ]}
+            unoptimized={false}
+            value={themeMode}
+            width={100}
+          />
+        ),
+        label: t('settingCommon.themeMode.title'),
+        minWidth: undefined,
+      },
+      {
+        children: (
+          <Select
+            defaultValue={language}
+            onChange={switchLocale}
+            options={[{ label: t('settingCommon.lang.autoMode'), value: 'auto' }, ...localeOptions]}
+          />
+        ),
+        label: t('settingCommon.lang.title'),
+      },
       {
         children: (
           <InputPassword
@@ -50,32 +91,23 @@ const Common = memo(() => {
         desc: t('settingSystem.accessCode.desc'),
         hidden: !showAccessCodeConfig,
         label: t('settingSystem.accessCode.title'),
-        name: ['keyVaults', 'password'],
-      },
-      {
-        children: (
-          <Button danger onClick={handleReset} type={'primary'}>
-            {t('danger.reset.action')}
-          </Button>
-        ),
-        desc: t('danger.reset.desc'),
-        label: t('danger.reset.title'),
-        layout: 'horizontal',
-        minWidth: undefined,
+        name: 'password',
       },
     ],
-    title: t('settingSystem.title'),
+    extra: loading && <Icon icon={Loader2Icon} size={16} spin style={{ opacity: 0.5 }} />,
+    title: t('settingCommon.title'),
   };
 
-  useSyncSettings(form);
-
   return (
     <Form
-      form={form}
-      initialValues={settings}
-      items={[system]}
+      initialValues={settings.keyVaults}
+      items={[theme]}
       itemsType={'group'}
-      onValuesChange={setSettings}
+      onValuesChange={async (v) => {
+        setLoading(true);
+        await setSettings({ keyVaults: v });
+        setLoading(false);
+      }}
       variant={'borderless'}
       {...FORM_STYLE}
     />

package/src/app/[variants]/(main)/settings/common/index.tsx

@@ -1,11 +1,13 @@
+import Appearance from './features/Appearance';
+import ChatAppearance from './features/ChatAppearance';
 import Common from './features/Common';
-import Theme from './features/Theme';
 
 const Page = () => {
   return (
     <>
-      <Theme />
       <Common />
+      <Appearance />
+      <ChatAppearance />
     </>
   );
 };

package/src/app/[variants]/(main)/settings/hotkey/features/{HotkeySetting.tsx → Conversation.tsx}

@@ -1,8 +1,10 @@
 'use client';
 
-import { Form, type FormGroupItemType, HotkeyInput } from '@lobehub/ui';
+import { Form, type FormGroupItemType, HotkeyInput, Icon } from '@lobehub/ui';
+import { Skeleton } from 'antd';
 import isEqual from 'fast-deep-equal';
-import { memo } from 'react';
+import { Loader2Icon } from 'lucide-react';
+import { memo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { HOTKEYS_REGISTRATION } from '@/const/hotkeys';
@@ -20,17 +22,18 @@ const filterByDesktop = (item: HotkeyItem) => {
   if (!isDesktop) return !item.isDesktop;
 };
 
-const HOTKEY_SETTING_KEY = 'hotkey';
-
 const HotkeySetting = memo(() => {
   const { t } = useTranslation(['setting', 'hotkey']);
   const [form] = Form.useForm();
 
-  const settings = useUserStore(settingsSelectors.currentSettings, isEqual);
-  const [setSettings] = useUserStore((s) => [s.setSettings]);
+  const { hotkey } = useUserStore(settingsSelectors.currentSettings, isEqual);
+  const [setSettings, isUserStateInit] = useUserStore((s) => [s.setSettings, s.isUserStateInit]);
+  const [loading, setLoading] = useState(false);
+
+  if (!isUserStateInit) return <Skeleton active paragraph={{ rows: 5 }} title={false} />;
 
   const mapHotkeyItem = (item: HotkeyItem) => {
-    const hotkeyConflicts = Object.entries(settings.hotkey)
+    const hotkeyConflicts = Object.entries(hotkey)
       .map(([key, value]) => {
         if (key === item.id) return false;
         return value;
@@ -53,31 +56,29 @@ const HotkeySetting = memo(() => {
       ),
       desc: hotkeyMeta[item.id].desc ? t(`${item.id}.desc`, { ns: 'hotkey' }) : undefined,
       label: t(`${item.id}.title`, { ns: 'hotkey' }),
-      name: [HOTKEY_SETTING_KEY, item.id],
+      name: item.id,
     };
   };
 
-  const essential: FormGroupItemType = {
-    children: HOTKEYS_REGISTRATION.filter((item) => item.group === HotkeyGroupEnum.Essential)
-      .filter((item) => filterByDesktop(item))
-      .map((item) => mapHotkeyItem(item)),
-    title: t('hotkey.group.essential'),
-  };
-
   const conversation: FormGroupItemType = {
     children: HOTKEYS_REGISTRATION.filter((item) => item.group === HotkeyGroupEnum.Conversation)
       .filter((item) => filterByDesktop(item))
       .map((item) => mapHotkeyItem(item)),
+    extra: loading && <Icon icon={Loader2Icon} size={16} spin style={{ opacity: 0.5 }} />,
     title: t('hotkey.group.conversation'),
   };
 
   return (
     <Form
       form={form}
-      initialValues={settings}
-      items={[essential, conversation]}
+      initialValues={hotkey}
+      items={[conversation]}
       itemsType={'group'}
-      onValuesChange={setSettings}
+      onValuesChange={async (values) => {
+        setLoading(true);
+        await setSettings({ hotkey: values });
+        setLoading(false);
+      }}
       variant={'borderless'}
       {...FORM_STYLE}
     />

package/src/app/[variants]/(main)/settings/hotkey/features/Essential.tsx

@@ -0,0 +1,88 @@
+'use client';
+
+import { Form, type FormGroupItemType, HotkeyInput, Icon } from '@lobehub/ui';
+import { Skeleton } from 'antd';
+import isEqual from 'fast-deep-equal';
+import { Loader2Icon } from 'lucide-react';
+import { memo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { HOTKEYS_REGISTRATION } from '@/const/hotkeys';
+import { FORM_STYLE } from '@/const/layoutTokens';
+import { isDesktop } from '@/const/version';
+import hotkeyMeta from '@/locales/default/hotkey';
+import { useUserStore } from '@/store/user';
+import { settingsSelectors } from '@/store/user/selectors';
+import { HotkeyGroupEnum, HotkeyItem } from '@/types/hotkey';
+
+const filterByDesktop = (item: HotkeyItem) => {
+  if (isDesktop) return true;
+
+  // is not desktop, filter out desktop only items
+  if (!isDesktop) return !item.isDesktop;
+};
+
+const HotkeySetting = memo(() => {
+  const { t } = useTranslation(['setting', 'hotkey']);
+  const [form] = Form.useForm();
+
+  const { hotkey } = useUserStore(settingsSelectors.currentSettings, isEqual);
+  const [setSettings, isUserStateInit] = useUserStore((s) => [s.setSettings, s.isUserStateInit]);
+  const [loading, setLoading] = useState(false);
+
+  if (!isUserStateInit) return <Skeleton active paragraph={{ rows: 5 }} title={false} />;
+
+  const mapHotkeyItem = (item: HotkeyItem) => {
+    const hotkeyConflicts = Object.entries(hotkey)
+      .map(([key, value]) => {
+        if (key === item.id) return false;
+        return value;
+      })
+      .filter(Boolean) as string[];
+
+    return {
+      children: (
+        <HotkeyInput
+          disabled={item.nonEditable}
+          hotkeyConflicts={hotkeyConflicts}
+          placeholder={t('hotkey.record')}
+          resetValue={item.keys}
+          texts={{
+            conflicts: t('hotkey.conflicts'),
+            invalidCombination: t('hotkey.invalidCombination'),
+            reset: t('hotkey.reset'),
+          }}
+        />
+      ),
+      desc: hotkeyMeta[item.id].desc ? t(`${item.id}.desc`, { ns: 'hotkey' }) : undefined,
+      label: t(`${item.id}.title`, { ns: 'hotkey' }),
+      name: item.id,
+    };
+  };
+
+  const essential: FormGroupItemType = {
+    children: HOTKEYS_REGISTRATION.filter((item) => item.group === HotkeyGroupEnum.Essential)
+      .filter((item) => filterByDesktop(item))
+      .map((item) => mapHotkeyItem(item)),
+    extra: loading && <Icon icon={Loader2Icon} size={16} spin style={{ opacity: 0.5 }} />,
+    title: t('hotkey.group.essential'),
+  };
+
+  return (
+    <Form
+      form={form}
+      initialValues={hotkey}
+      items={[essential]}
+      itemsType={'group'}
+      onValuesChange={async (values) => {
+        setLoading(true);
+        await setSettings({ hotkey: values });
+        setLoading(false);
+      }}
+      variant={'borderless'}
+      {...FORM_STYLE}
+    />
+  );
+});
+
+export default HotkeySetting;

package/src/app/[variants]/(main)/settings/hotkey/page.tsx

@@ -3,7 +3,8 @@ import { translation } from '@/server/translation';
 import { DynamicLayoutProps } from '@/types/next';
 import { RouteVariants } from '@/utils/server/routeVariants';
 
-import HotkeySetting from './features/HotkeySetting';
+import Conversation from './features/Conversation';
+import Essential from './features/Essential';
 
 export const generateMetadata = async (props: DynamicLayoutProps) => {
   const locale = await RouteVariants.getLocale(props);
@@ -16,7 +17,12 @@ export const generateMetadata = async (props: DynamicLayoutProps) => {
 };
 
 const Page = () => {
-  return <HotkeySetting />;
+  return (
+    <>
+      <Essential />
+      <Conversation />
+    </>
+  );
 };
 
 Page.displayName = 'HotkeySetting';

package/src/app/[variants]/(main)/settings/llm/components/ProviderModelList/ModelConfigModal/index.tsx

@@ -5,7 +5,7 @@ import { memo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { useUserStore } from '@/store/user';
-import { modelConfigSelectors } from '@/store/user/slices/modelList/selectors';
+import { modelConfigSelectors } from '@/store/user/selectors';
 
 import ModelConfigForm from './Form';
 

package/src/app/[variants]/(main)/settings/storage/Advanced.tsx

@@ -8,6 +8,7 @@ import { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { FORM_STYLE } from '@/const/layoutTokens';
+import { DEFAULT_SETTINGS } from '@/const/settings';
 import DataImporter from '@/features/DataImporter';
 import { configService } from '@/services/config';
 import { useChatStore } from '@/store/chat';
@@ -32,6 +33,7 @@ const AdvancedActions = () => {
   const [removeAllFiles] = useFileStore((s) => [s.removeAllFiles]);
   const removeAllPlugins = useToolStore((s) => s.removeAllPlugins);
   const settings = useUserStore(settingsSelectors.currentSettings, isEqual);
+  const [resetSettings] = useUserStore((s) => [s.resetSettings]);
 
   const handleClear = useCallback(() => {
     modal.confirm({
@@ -53,6 +55,19 @@ const AdvancedActions = () => {
     });
   }, []);
 
+  const handleReset = useCallback(() => {
+    modal.confirm({
+      centered: true,
+      okButtonProps: { danger: true },
+      onOk: () => {
+        resetSettings();
+        form.setFieldsValue(DEFAULT_SETTINGS);
+        message.success(t('danger.reset.success'));
+      },
+      title: t('danger.reset.confirm'),
+    });
+  }, []);
+
   const system: FormGroupItemType = {
     children: [
       {
@@ -93,6 +108,17 @@ const AdvancedActions = () => {
         layout: 'horizontal',
         minWidth: undefined,
       },
+      {
+        children: (
+          <Button danger onClick={handleReset} type={'primary'}>
+            {t('danger.reset.action')}
+          </Button>
+        ),
+        desc: t('danger.reset.desc'),
+        label: t('danger.reset.title'),
+        layout: 'horizontal',
+        minWidth: undefined,
+      },
     ],
     title: t('storage.actions.title'),
   };

package/src/app/[variants]/(main)/settings/system-agent/features/createForm.tsx

@@ -1,11 +1,12 @@
 'use client';
 
-import { Button, Form, type FormGroupItemType, type FormItemProps } from '@lobehub/ui';
-import { Form as AntForm, Switch } from 'antd';
+import { Button, Form, type FormGroupItemType, type FormItemProps, Icon } from '@lobehub/ui';
+import { Form as AntForm, Skeleton, Switch } from 'antd';
 import isEqual from 'fast-deep-equal';
-import { PencilIcon } from 'lucide-react';
-import { memo } from 'react';
+import { Loader2Icon, PencilIcon } from 'lucide-react';
+import { memo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
 
 import TextArea from '@/components/TextArea';
 import { FORM_STYLE } from '@/const/layoutTokens';
@@ -14,8 +15,6 @@ import { useUserStore } from '@/store/user';
 import { settingsSelectors } from '@/store/user/selectors';
 import { type UserSystemAgentConfigKey } from '@/types/user/settings';
 
-import { useSyncSystemAgent } from './useSync';
-
 interface SystemAgentFormProps {
   allowCustomPrompt?: boolean;
   allowDisable?: boolean;
@@ -26,11 +25,16 @@ interface SystemAgentFormProps {
 const SystemAgentForm = memo(
   ({ systemAgentKey, allowDisable, allowCustomPrompt, defaultPrompt }: SystemAgentFormProps) => {
     const { t } = useTranslation('setting');
-
+    const [form] = AntForm.useForm();
     const settings = useUserStore(settingsSelectors.currentSystemAgent, isEqual);
-    const [updateSystemAgent] = useUserStore((s) => [s.updateSystemAgent]);
+    const [updateSystemAgent, isUserStateInit] = useUserStore((s) => [
+      s.updateSystemAgent,
+      s.isUserStateInit,
+    ]);
+    const [loading, setLoading] = useState(false);
+
+    if (!isUserStateInit) return <Skeleton active paragraph={{ rows: 5 }} title={false} />;
 
-    const [form] = AntForm.useForm();
     const value = settings[systemAgentKey];
 
     const systemAgentSettings: FormGroupItemType = {
@@ -38,8 +42,10 @@ const SystemAgentForm = memo(
         {
           children: (
             <ModelSelect
-              onChange={(props) => {
-                updateSystemAgent(systemAgentKey, props);
+              onChange={async (props) => {
+                setLoading(true);
+                await updateSystemAgent(systemAgentKey, props);
+                setLoading(false);
               }}
               showAbility={false}
               // value={value}
@@ -52,8 +58,10 @@ const SystemAgentForm = memo(
         (!!allowCustomPrompt && {
           children: !!value.customPrompt ? (
             <TextArea
-              onChange={(e) => {
-                updateSystemAgent(systemAgentKey, { customPrompt: e });
+              onBlur={async (e) => {
+                setLoading(true);
+                await updateSystemAgent(systemAgentKey, { customPrompt: e.target.value });
+                setLoading(false);
               }}
               placeholder={t('systemAgent.customPrompt.placeholder')}
               style={{ minHeight: 160 }}
@@ -64,7 +72,9 @@ const SystemAgentForm = memo(
               block
               icon={PencilIcon}
               onClick={async () => {
+                setLoading(true);
                 await updateSystemAgent(systemAgentKey, { customPrompt: defaultPrompt });
+                setLoading(false);
               }}
             >
               {t('systemAgent.customPrompt.addPrompt')}
@@ -75,13 +85,20 @@ const SystemAgentForm = memo(
           name: [systemAgentKey, 'customPrompt'],
         }) as FormItemProps,
       ].filter(Boolean),
-      extra: allowDisable && (
-        <Switch
-          onChange={(enabled) => {
-            updateSystemAgent(systemAgentKey, { enabled });
-          }}
-          value={value.enabled}
-        />
+      extra: (
+        <Flexbox>
+          {loading && <Icon icon={Loader2Icon} size={16} spin style={{ opacity: 0.5 }} />}
+          {allowDisable && (
+            <Switch
+              onChange={async (enabled) => {
+                setLoading(true);
+                await updateSystemAgent(systemAgentKey, { enabled });
+                setLoading(false);
+              }}
+              value={value.enabled}
+            />
+          )}
+        </Flexbox>
       ),
       title: (
         <span
@@ -94,8 +111,6 @@ const SystemAgentForm = memo(
       ),
     };
 
-    useSyncSystemAgent(form, settings);
-
     return (
       <Form form={form} initialValues={settings} items={[systemAgentSettings]} {...FORM_STYLE} />
     );

package/src/app/[variants]/(main)/settings/tts/features/OpenAI.tsx

@@ -1,9 +1,11 @@
 'use client';
 
-import { Form, type FormGroupItemType } from '@lobehub/ui';
+import { Form, type FormGroupItemType, Icon } from '@lobehub/ui';
 import { Select } from '@lobehub/ui';
+import { Skeleton } from 'antd';
 import isEqual from 'fast-deep-equal';
-import { memo } from 'react';
+import { Loader2Icon } from 'lucide-react';
+import { memo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { FORM_STYLE } from '@/const/layoutTokens';
@@ -12,37 +14,45 @@ import { settingsSelectors } from '@/store/user/selectors';
 
 import { opeanaiSTTOptions, opeanaiTTSOptions } from './const';
 
-const TTS_SETTING_KEY = 'tts';
-
 const OpenAI = memo(() => {
   const { t } = useTranslation('setting');
   const [form] = Form.useForm();
-  const settings = useUserStore(settingsSelectors.currentSettings, isEqual);
-  const [setSettings] = useUserStore((s) => [s.setSettings]);
+  const { tts } = useUserStore(settingsSelectors.currentSettings, isEqual);
+  const [setSettings, isUserStateInit] = useUserStore((s) => [s.setSettings, s.isUserStateInit]);
+  const [loading, setLoading] = useState(false);
+
+  if (!isUserStateInit) return <Skeleton active paragraph={{ rows: 5 }} title={false} />;
 
   const openai: FormGroupItemType = {
     children: [
       {
         children: <Select options={opeanaiTTSOptions} />,
         label: t('settingTTS.openai.ttsModel'),
-        name: [TTS_SETTING_KEY, 'openAI', 'ttsModel'],
+        name: ['openAI', 'ttsModel'],
       },
       {
         children: <Select options={opeanaiSTTOptions} />,
         label: t('settingTTS.openai.sttModel'),
-        name: [TTS_SETTING_KEY, 'openAI', 'sttModel'],
+        name: ['openAI', 'sttModel'],
       },
     ],
+    extra: loading && <Icon icon={Loader2Icon} size={16} spin style={{ opacity: 0.5 }} />,
     title: t('settingTTS.openai.title'),
   };
 
   return (
     <Form
       form={form}
-      initialValues={settings}
+      initialValues={tts}
       items={[openai]}
       itemsType={'group'}
-      onValuesChange={setSettings}
+      onValuesChange={async (values) => {
+        setLoading(true);
+        await setSettings({
+          tts: values,
+        });
+        setLoading(false);
+      }}
       variant={'borderless'}
       {...FORM_STYLE}
     />

package/src/app/[variants]/(main)/settings/tts/features/STT.tsx

@@ -1,9 +1,10 @@
 'use client';
 
-import { Form, type FormGroupItemType, Select } from '@lobehub/ui';
-import { Switch } from 'antd';
+import { Form, type FormGroupItemType, Icon, Select } from '@lobehub/ui';
+import { Skeleton, Switch } from 'antd';
 import isEqual from 'fast-deep-equal';
-import { memo } from 'react';
+import { Loader2Icon } from 'lucide-react';
+import { memo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { FORM_STYLE } from '@/const/layoutTokens';
@@ -12,13 +13,14 @@ import { settingsSelectors } from '@/store/user/selectors';
 
 import { sttOptions } from './const';
 
-const TTS_SETTING_KEY = 'tts';
-
 const STT = memo(() => {
   const { t } = useTranslation('setting');
   const [form] = Form.useForm();
-  const settings = useUserStore(settingsSelectors.currentSettings, isEqual);
-  const [setSettings] = useUserStore((s) => [s.setSettings]);
+  const { tts } = useUserStore(settingsSelectors.currentSettings, isEqual);
+  const [setSettings, isUserStateInit] = useUserStore((s) => [s.setSettings, s.isUserStateInit]);
+  const [loading, setLoading] = useState(false);
+
+  if (!isUserStateInit) return <Skeleton active paragraph={{ rows: 5 }} title={false} />;
 
   const stt: FormGroupItemType = {
     children: [
@@ -26,7 +28,7 @@ const STT = memo(() => {
         children: <Select options={sttOptions} />,
         desc: t('settingTTS.sttService.desc'),
         label: t('settingTTS.sttService.title'),
-        name: [TTS_SETTING_KEY, 'sttServer'],
+        name: 'sttServer',
       },
       {
         children: <Switch />,
@@ -34,20 +36,27 @@ const STT = memo(() => {
         label: t('settingTTS.sttAutoStop.title'),
         layout: 'horizontal',
         minWidth: undefined,
-        name: [TTS_SETTING_KEY, 'sttAutoStop'],
+        name: 'sttAutoStop',
         valuePropName: 'checked',
       },
     ],
+    extra: loading && <Icon icon={Loader2Icon} size={16} spin style={{ opacity: 0.5 }} />,
     title: t('settingTTS.stt'),
   };
 
   return (
     <Form
       form={form}
-      initialValues={settings}
+      initialValues={tts}
       items={[stt]}
       itemsType={'group'}
-      onValuesChange={setSettings}
+      onValuesChange={async (values) => {
+        setLoading(true);
+        await setSettings({
+          tts: values,
+        });
+        setLoading(false);
+      }}
       variant={'borderless'}
       {...FORM_STYLE}
     />