@lobehub/chat 1.86.0 → 1.87.0

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

@@ -0,0 +1,128 @@
+'use client';
+
+import {
+  Form,
+  type FormGroupItemType,
+  Icon,
+  Select,
+  SliderWithInput,
+  highlighterThemes,
+  mermaidThemes,
+} 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 { FORM_STYLE } from '@/const/layoutTokens';
+import { useUserStore } from '@/store/user';
+import { settingsSelectors } from '@/store/user/selectors';
+
+import ChatPreview from './ChatPreview';
+import HighlighterPreview from './HighlighterPreview';
+import MermaidPreview from './MermaidPreview';
+
+const ChatAppearance = memo(() => {
+  const { t } = useTranslation('setting');
+  const { general } = 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 theme: FormGroupItemType = {
+    children: [
+      {
+        children: <ChatPreview fontSize={general.fontSize} />,
+        noStyle: true,
+      },
+      {
+        children: (
+          <SliderWithInput
+            marks={{
+              12: {
+                label: 'A',
+                style: {
+                  fontSize: 12,
+                  marginTop: 4,
+                },
+              },
+              14: {
+                label: t('settingChatAppearance.fontSize.marks.normal'),
+                style: {
+                  fontSize: 14,
+                  marginTop: 4,
+                },
+              },
+              18: {
+                label: 'A',
+                style: {
+                  fontSize: 18,
+                  marginTop: 4,
+                },
+              },
+            }}
+            max={18}
+            min={12}
+            step={1}
+          />
+        ),
+        desc: t('settingChatAppearance.fontSize.desc'),
+        label: t('settingChatAppearance.fontSize.title'),
+        name: 'fontSize',
+      },
+      {
+        children: <HighlighterPreview theme={general.highlighterTheme} />,
+        noStyle: true,
+      },
+      {
+        children: (
+          <Select
+            options={highlighterThemes.map((item) => ({
+              label: item.displayName,
+              value: item.id,
+            }))}
+          />
+        ),
+        label: t('settingChatAppearance.highlighterTheme.title'),
+        name: 'highlighterTheme',
+      },
+      {
+        children: <MermaidPreview theme={general.mermaidTheme} />,
+        noStyle: true,
+      },
+      {
+        children: (
+          <Select
+            options={mermaidThemes.map((item) => ({
+              label: item.displayName,
+              value: item.id,
+            }))}
+          />
+        ),
+        label: t('settingChatAppearance.mermaidTheme.title'),
+        name: 'mermaidTheme',
+      },
+    ],
+    extra: loading && <Icon icon={Loader2Icon} size={16} spin style={{ opacity: 0.5 }} />,
+    title: t('settingChatAppearance.title'),
+  };
+
+  return (
+    <Form
+      initialValues={general}
+      items={[theme]}
+      itemsType={'group'}
+      onValuesChange={async (value) => {
+        setLoading(true);
+        await setSettings({ general: value });
+        setLoading(false);
+      }}
+      variant={'borderless'}
+      {...FORM_STYLE}
+    />
+  );
+});
+
+export default ChatAppearance;

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/ProviderList/Azure/index.tsx

@@ -5,7 +5,7 @@ import { createStyles } from 'antd-style';
 import { useTranslation } from 'react-i18next';
 
 import { AzureProviderCard } from '@/config/modelProviders';
-import { ModelProvider } from '@/libs/agent-runtime';
+import { ModelProvider } from '@/libs/model-runtime';
 import { useUserStore } from '@/store/user';
 import { modelProviderSelectors } from '@/store/user/selectors';
 

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/provider/(detail)/azure/page.tsx

@@ -6,7 +6,7 @@ import { useTranslation } from 'react-i18next';
 
 import { FormInput, FormPassword } from '@/components/FormInput';
 import { AzureProviderCard } from '@/config/modelProviders';
-import { ModelProvider } from '@/libs/agent-runtime';
+import { ModelProvider } from '@/libs/model-runtime';
 import { aiProviderSelectors, useAiInfraStore } from '@/store/aiInfra';
 import { useUserStore } from '@/store/user';
 import { modelProviderSelectors } from '@/store/user/selectors';

package/src/app/[variants]/(main)/settings/provider/(detail)/azureai/page.tsx

@@ -4,7 +4,7 @@ import { useTranslation } from 'react-i18next';
 
 import { FormInput, FormPassword } from '@/components/FormInput';
 import { AzureAIProviderCard } from '@/config/modelProviders';
-import { ModelProvider } from '@/libs/agent-runtime';
+import { ModelProvider } from '@/libs/model-runtime';
 import { aiProviderSelectors, useAiInfraStore } from '@/store/aiInfra';
 
 import { KeyVaultsConfigKey, LLMProviderApiTokenKey, LLMProviderBaseUrlKey } from '../../const';

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'),
   };