@lobehub/chat 1.86.1 → 1.87.1

package/src/store/electron/selectors/__tests__/desktopState.test.ts

@@ -0,0 +1,55 @@
+import { describe, expect, it } from 'vitest';
+
+import { ElectronState } from '@/store/electron/initialState';
+
+import { desktopStateSelectors } from '../desktopState';
+
+describe('desktopStateSelectors', () => {
+  describe('usePath', () => {
+    it('should return userPath from appState', () => {
+      const state: ElectronState = {
+        isAppStateInit: false,
+        appState: {
+          userPath: {
+            desktop: '/test/desktop',
+            documents: '/test/documents',
+            downloads: '/test/downloads',
+            home: '/test/home',
+            music: '/test/music',
+            pictures: '/test/pictures',
+            userData: '/test/userdata',
+            videos: '/test/videos',
+          },
+        },
+        dataSyncConfig: {
+          storageMode: 'local',
+        },
+        isInitRemoteServerConfig: false,
+      };
+
+      expect(desktopStateSelectors.usePath(state)).toEqual({
+        desktop: '/test/desktop',
+        documents: '/test/documents',
+        downloads: '/test/downloads',
+        home: '/test/home',
+        music: '/test/music',
+        pictures: '/test/pictures',
+        userData: '/test/userdata',
+        videos: '/test/videos',
+      });
+    });
+
+    it('should handle undefined userPath', () => {
+      const state: ElectronState = {
+        appState: {},
+        isAppStateInit: false,
+        dataSyncConfig: {
+          storageMode: 'local',
+        },
+        isInitRemoteServerConfig: false,
+      };
+
+      expect(desktopStateSelectors.usePath(state)).toBeUndefined();
+    });
+  });
+});

package/src/store/global/selectors/systemStatus.ts

@@ -17,6 +17,7 @@ const showFilePanel = (s: GlobalState) => s.status.showFilePanel;
 const hidePWAInstaller = (s: GlobalState) => s.status.hidePWAInstaller;
 const isShowCredit = (s: GlobalState) => s.status.isShowCredit;
 const themeMode = (s: GlobalState) => s.status.themeMode || 'auto';
+const language = (s: GlobalState) => s.status.language || 'auto';
 
 const showChatHeader = (s: GlobalState) => !s.status.zenMode;
 const inZenMode = (s: GlobalState) => s.status.zenMode;
@@ -68,6 +69,7 @@ export const systemStatusSelectors = {
   isPgliteNotEnabled,
   isPgliteNotInited,
   isShowCredit,
+  language,
   mobileShowPortal,
   mobileShowTopic,
   portalWidth,

package/src/store/user/slices/settings/selectors/general.test.ts

@@ -15,7 +15,11 @@ describe('settingsSelectors', () => {
 
       const result = userGeneralSettingsSelectors.config(s as UserStore);
 
-      expect(result).toEqual({ fontSize: 12 });
+      expect(result).toEqual({
+        fontSize: 12,
+        highlighterTheme: 'lobe-theme',
+        mermaidTheme: 'lobe-theme',
+      });
     });
   });
 
@@ -108,4 +112,28 @@ describe('settingsSelectors', () => {
       expect(result).toBe('#ffffff');
     });
   });
+
+  it('should return the highlighterTheme', () => {
+    const s: UserState = merge(initialState, {
+      settings: {
+        general: { highlighterTheme: 'lobe-theme' },
+      },
+    });
+
+    const result = userGeneralSettingsSelectors.highlighterTheme(s as UserStore);
+
+    expect(result).toBe('lobe-theme');
+  });
+
+  it('should return the mermaidTheme', () => {
+    const s: UserState = merge(initialState, {
+      settings: {
+        general: { mermaidTheme: 'lobe-theme' },
+      },
+    });
+
+    const result = userGeneralSettingsSelectors.mermaidTheme(s as UserStore);
+
+    expect(result).toBe('lobe-theme');
+  });
 });

package/src/store/user/slices/settings/selectors/general.ts

@@ -6,10 +6,14 @@ const generalConfig = (s: UserStore) => currentSettings(s).general || {};
 const neutralColor = (s: UserStore) => generalConfig(s).neutralColor;
 const primaryColor = (s: UserStore) => generalConfig(s).primaryColor;
 const fontSize = (s: UserStore) => generalConfig(s).fontSize;
+const highlighterTheme = (s: UserStore) => generalConfig(s).highlighterTheme;
+const mermaidTheme = (s: UserStore) => generalConfig(s).mermaidTheme;
 
 export const userGeneralSettingsSelectors = {
   config: generalConfig,
   fontSize,
+  highlighterTheme,
+  mermaidTheme,
   neutralColor,
   primaryColor,
 };

package/src/types/user/settings/general.ts

@@ -1,7 +1,9 @@
-import type { NeutralColors, PrimaryColors } from '@lobehub/ui';
+import type { HighlighterProps, MermaidProps, NeutralColors, PrimaryColors } from '@lobehub/ui';
 
 export interface UserGeneralConfig {
   fontSize: number;
+  highlighterTheme?: HighlighterProps['theme'];
+  mermaidTheme?: MermaidProps['theme'];
   neutralColor?: NeutralColors;
   primaryColor?: PrimaryColors;
 }

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

@@ -1,146 +0,0 @@
-'use client';
-
-import { Form, type FormGroupItemType, ImageSelect, SliderWithInput } from '@lobehub/ui';
-import { Select } from '@lobehub/ui';
-import isEqual from 'fast-deep-equal';
-import { Monitor, Moon, Sun } from 'lucide-react';
-import { memo } from 'react';
-import { useTranslation } from 'react-i18next';
-
-import { useSyncSettings } from '@/app/[variants]/(main)/settings/hooks/useSyncSettings';
-import { FORM_STYLE } from '@/const/layoutTokens';
-import { imageUrl } from '@/const/url';
-import { Locales, localeOptions } from '@/locales/resources';
-import { useGlobalStore } from '@/store/global';
-import { systemStatusSelectors } from '@/store/global/selectors';
-import { useUserStore } from '@/store/user';
-import { settingsSelectors } from '@/store/user/selectors';
-
-import { ThemeSwatchesNeutral, ThemeSwatchesPrimary } from './ThemeSwatches';
-
-const Theme = memo(() => {
-  const { t } = useTranslation('setting');
-
-  const [form] = Form.useForm();
-  const settings = useUserStore(settingsSelectors.currentSettings, isEqual);
-  const themeMode = useGlobalStore(systemStatusSelectors.themeMode);
-  const [setSettings] = useUserStore((s) => [s.setSettings]);
-  const [setThemeMode] = useGlobalStore((s) => [s.switchThemeMode]);
-
-  useSyncSettings(form);
-  const [switchLocale] = useGlobalStore((s) => [s.switchLocale]);
-
-  const handleLangChange = (value: Locales) => {
-    switchLocale(value);
-  };
-
-  const theme: FormGroupItemType = {
-    children: [
-      {
-        children: (
-          <ImageSelect
-            height={60}
-            onChange={setThemeMode}
-            options={[
-              {
-                icon: Sun,
-                img: imageUrl('theme_light.webp'),
-                label: t('settingTheme.themeMode.light'),
-                value: 'light',
-              },
-              {
-                icon: Moon,
-                img: imageUrl('theme_dark.webp'),
-                label: t('settingTheme.themeMode.dark'),
-                value: 'dark',
-              },
-              {
-                icon: Monitor,
-                img: imageUrl('theme_auto.webp'),
-                label: t('settingTheme.themeMode.auto'),
-                value: 'auto',
-              },
-            ]}
-            unoptimized={false}
-            value={themeMode}
-            width={100}
-          />
-        ),
-        label: t('settingTheme.themeMode.title'),
-        minWidth: undefined,
-      },
-      {
-        children: (
-          <Select
-            onChange={handleLangChange}
-            options={[{ label: t('settingTheme.lang.autoMode'), value: 'auto' }, ...localeOptions]}
-          />
-        ),
-        label: t('settingTheme.lang.title'),
-        name: ['general', 'language'],
-      },
-      {
-        children: (
-          <SliderWithInput
-            marks={{
-              12: {
-                label: 'A',
-                style: {
-                  fontSize: 12,
-                  marginTop: 4,
-                },
-              },
-              14: {
-                label: t('settingTheme.fontSize.marks.normal'),
-                style: {
-                  fontSize: 14,
-                  marginTop: 4,
-                },
-              },
-              18: {
-                label: 'A',
-                style: {
-                  fontSize: 18,
-                  marginTop: 4,
-                },
-              },
-            }}
-            max={18}
-            min={12}
-            step={1}
-          />
-        ),
-        desc: t('settingTheme.fontSize.desc'),
-        label: t('settingTheme.fontSize.title'),
-        name: ['general', 'fontSize'],
-      },
-      {
-        children: <ThemeSwatchesPrimary />,
-        desc: t('settingTheme.primaryColor.desc'),
-        label: t('settingTheme.primaryColor.title'),
-        minWidth: undefined,
-      },
-      {
-        children: <ThemeSwatchesNeutral />,
-        desc: t('settingTheme.neutralColor.desc'),
-        label: t('settingTheme.neutralColor.title'),
-        minWidth: undefined,
-      },
-    ],
-    title: t('settingTheme.title'),
-  };
-
-  return (
-    <Form
-      form={form}
-      initialValues={settings}
-      items={[theme]}
-      itemsType={'group'}
-      onValuesChange={setSettings}
-      variant={'borderless'}
-      {...FORM_STYLE}
-    />
-  );
-});
-
-export default Theme;