@lobehub/chat 1.86.1 → 1.87.0

package/src/const/settings/common.ts

@@ -2,4 +2,6 @@ import { UserGeneralConfig } from '@/types/user/settings';
 
 export const DEFAULT_COMMON_SETTINGS: UserGeneralConfig = {
   fontSize: 14,
+  highlighterTheme: 'lobe-theme',
+  mermaidTheme: 'lobe-theme',
 };

package/src/features/AgentSetting/AgentTTS/index.tsx

@@ -79,7 +79,7 @@ const AgentTTS = memo(() => {
         children: (
           <Select
             options={[
-              { label: t('settingTheme.lang.autoMode'), value: 'auto' },
+              { label: t('settingCommon.lang.autoMode'), value: 'auto' },
               ...(localeOptions || []),
             ]}
           />

package/src/features/ChatItem/index.tsx

@@ -0,0 +1,35 @@
+'use client';
+
+import { ChatItemProps, ChatItem as ChatItemRaw } from '@lobehub/ui/chat';
+import isEqual from 'fast-deep-equal';
+import { memo } from 'react';
+
+import { useUserStore } from '@/store/user';
+import { settingsSelectors } from '@/store/user/selectors';
+
+const ChatItem = memo<ChatItemProps>(({ markdownProps = {}, ...rest }) => {
+  const { componentProps, ...restMarkdown } = markdownProps;
+  const { general } = useUserStore(settingsSelectors.currentSettings, isEqual);
+  return (
+    <ChatItemRaw
+      fontSize={general.fontSize}
+      markdownProps={{
+        ...restMarkdown,
+        componentProps: {
+          ...componentProps,
+          highlight: {
+            theme: general.highlighterTheme,
+            ...componentProps?.highlight,
+          },
+          mermaid: {
+            theme: general.mermaidTheme,
+            ...componentProps?.mermaid,
+          },
+        },
+      }}
+      {...rest}
+    />
+  );
+});
+
+export default ChatItem;

package/src/features/Conversation/components/ChatItem/index.tsx

@@ -1,19 +1,17 @@
 'use client';
 
-import { ChatItem } from '@lobehub/ui/chat';
 import { createStyles } from 'antd-style';
 import isEqual from 'fast-deep-equal';
 import { MouseEventHandler, ReactNode, memo, use, useCallback, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
+import ChatItem from '@/features/ChatItem';
 import { VirtuosoContext } from '@/features/Conversation/components/VirtualizedList/VirtuosoContext';
 import { useAgentStore } from '@/store/agent';
 import { agentChatConfigSelectors } from '@/store/agent/selectors';
 import { useChatStore } from '@/store/chat';
 import { chatSelectors } from '@/store/chat/selectors';
-import { useUserStore } from '@/store/user';
-import { userGeneralSettingsSelectors } from '@/store/user/selectors';
 import { ChatMessage } from '@/types/message';
 
 import ErrorMessageExtra, { useErrorContent } from '../../Error';
@@ -72,7 +70,6 @@ const Item = memo<ChatListItemProps>(
 
     const type = useAgentStore(agentChatConfigSelectors.displayMode);
     const item = useChatStore(chatSelectors.getMessageById(id), isEqual);
-    const fontSize = useUserStore(userGeneralSettingsSelectors.fontSize);
 
     const [
       isMessageLoading,
@@ -178,7 +175,7 @@ const Item = memo<ChatListItemProps>(
         enableCustomFootnotes: item?.role === 'assistant',
         rehypePlugins: item?.role === 'user' ? undefined : rehypePlugins,
         remarkPlugins: item?.role === 'user' ? undefined : remarkPlugins,
-        showCitations:
+        showFootnotes:
           item?.role === 'user'
             ? undefined
             : item?.search?.citations &&
@@ -235,7 +232,6 @@ const Item = memo<ChatListItemProps>(
               editing={editing}
               error={error}
               errorMessage={errorMessage}
-              fontSize={fontSize}
               loading={isProcessing}
               markdownProps={markdownProps}
               message={message}

package/src/features/User/UserPanel/LangButton.tsx

@@ -26,7 +26,7 @@ const LangButton = memo<{ placement?: PopoverProps['placement'] }>(({ placement
     () => [
       {
         key: 'auto',
-        label: t('settingTheme.lang.autoMode'),
+        label: t('settingCommon.lang.autoMode'),
         onClick: () => handleLangChange('auto'),
       },
       ...localeOptions.map((item) => ({

package/src/features/User/UserPanel/ThemeButton.tsx

@@ -27,19 +27,19 @@ const ThemeButton = memo<{ placement?: PopoverProps['placement'] }>(({ placement
       {
         icon: <Icon icon={themeIcons.auto} />,
         key: 'auto',
-        label: t('settingTheme.themeMode.auto'),
+        label: t('settingCommon.themeMode.auto'),
         onClick: () => switchThemeMode('auto'),
       },
       {
         icon: <Icon icon={themeIcons.light} />,
         key: 'light',
-        label: t('settingTheme.themeMode.light'),
+        label: t('settingCommon.themeMode.light'),
         onClick: () => switchThemeMode('light'),
       },
       {
         icon: <Icon icon={themeIcons.dark} />,
         key: 'dark',
-        label: t('settingTheme.themeMode.dark'),
+        label: t('settingCommon.themeMode.dark'),
         onClick: () => switchThemeMode('dark'),
       },
     ],

package/src/libs/model-runtime/{AgentRuntime.test.ts → ModelRuntime.test.ts}

@@ -10,7 +10,7 @@ import { AgentRuntime, ChatStreamPayload, LobeOpenAI, ModelProvider } from '@/li
 import { providerRuntimeMap } from '@/libs/model-runtime/runtimeMap';
 import { createTraceOptions } from '@/server/modules/AgentRuntime';
 
-import { AgentChatOptions } from './AgentRuntime';
+import { AgentChatOptions } from './ModelRuntime';
 
 const specialProviders = [
   { id: 'openai', payload: { apiKey: 'user-openai-key', baseURL: 'user-endpoint' } },

package/src/libs/model-runtime/{AgentRuntime.ts → ModelRuntime.ts}

@@ -24,7 +24,7 @@ export interface AgentChatOptions {
   trace?: TracePayload;
 }
 
-class AgentRuntime {
+class ModelRuntime {
   private _runtime: LobeRuntimeAI;
 
   constructor(runtime: LobeRuntimeAI) {
@@ -110,8 +110,8 @@ class AgentRuntime {
     const providerAI = providerRuntimeMap[provider] ?? LobeOpenAI;
     const runtimeModel: LobeRuntimeAI = new providerAI(params);
 
-    return new AgentRuntime(runtimeModel);
+    return new ModelRuntime(runtimeModel);
   }
 }
 
-export default AgentRuntime;
+export default ModelRuntime;

package/src/libs/model-runtime/index.ts

@@ -1,4 +1,3 @@
-export { default as AgentRuntime } from './AgentRuntime';
 export { LobeAnthropicAI } from './anthropic';
 export { LobeAzureAI } from './azureai';
 export { LobeAzureOpenAI } from './azureOpenai';
@@ -11,6 +10,7 @@ export { LobeGroq } from './groq';
 export * from './helpers';
 export { LobeMinimaxAI } from './minimax';
 export { LobeMistralAI } from './mistral';
+export { default as AgentRuntime } from './ModelRuntime';
 export { LobeMoonshotAI } from './moonshot';
 export { LobeOllamaAI } from './ollama';
 export { LobeOpenAI } from './openai';

package/src/libs/oidc-provider/config.ts

@@ -25,7 +25,7 @@ export const defaultClients: ClientMetadata[] = [
       'com.lobehub.lobehub-desktop-dev://auth/callback',
       'com.lobehub.lobehub-desktop-nightly://auth/callback',
       'com.lobehub.lobehub-desktop-beta://auth/callback',
-      'com.lobehub.lobehub-desktop://auth/logout/callback',
+      'com.lobehub.lobehub-desktop://auth/callback',
     ],
 
     // 支持授权码获取令牌和刷新令牌

package/src/locales/default/setting.ts

@@ -172,6 +172,22 @@ export default {
     },
     title: '助手信息',
   },
+
+  settingAppearance: {
+    neutralColor: {
+      desc: '不同色彩倾向的灰阶自定义',
+      title: '中性色',
+    },
+    preview: {
+      title: '调色盘',
+    },
+    primaryColor: {
+      desc: '自定义主题色',
+      title: '主题色',
+    },
+    title: '应用外观',
+  },
+
   settingChat: {
     autoCreateTopicThreshold: {
       desc: '当前消息数超过设定该值后，将自动创建话题',
@@ -214,6 +230,35 @@ export default {
     submit: '更新聊天偏好',
     title: '聊天设置',
   },
+  settingChatAppearance: {
+    fontSize: {
+      desc: '聊天内容的字体大小',
+      marks: {
+        normal: '标准',
+      },
+      title: '字体大小',
+    },
+    highlighterTheme: {
+      title: '代码高亮主题',
+    },
+    mermaidTheme: {
+      title: 'Mermaid 主题',
+    },
+    title: '聊天外观',
+  },
+  settingCommon: {
+    lang: {
+      autoMode: '跟随系统',
+      title: '语言',
+    },
+    themeMode: {
+      auto: '自动',
+      dark: '深色',
+      light: '浅色',
+      title: '主题',
+    },
+    title: '通用设置',
+  },
   settingModel: {
     enableMaxTokens: {
       title: '开启单次回复限制',
@@ -339,37 +384,6 @@ export default {
       title: '语音合成声源',
     },
   },
-  settingTheme: {
-    avatar: {
-      title: '头像',
-    },
-    fontSize: {
-      desc: '聊天内容的字体大小',
-      marks: {
-        normal: '标准',
-      },
-      title: '字体大小',
-    },
-    lang: {
-      autoMode: '跟随系统',
-      title: '语言',
-    },
-    neutralColor: {
-      desc: '不同色彩倾向的灰阶自定义',
-      title: '中性色',
-    },
-    primaryColor: {
-      desc: '自定义主题色',
-      title: '主题色',
-    },
-    themeMode: {
-      auto: '自动',
-      dark: '深色',
-      light: '浅色',
-      title: '主题',
-    },
-    title: '主题设置',
-  },
   storage: {
     actions: {
       export: {

package/src/store/electron/initialState.ts

@@ -5,7 +5,7 @@ export type RemoteServerError = 'CONFIG_ERROR' | 'AUTH_ERROR' | 'DISCONNECT_ERRO
 export interface ElectronState {
   appState: ElectronAppState;
   dataSyncConfig: DataSyncConfig;
-  isAppStateInit: boolean;
+  isAppStateInit?: boolean;
   isConnectingServer?: boolean;
   isInitRemoteServerConfig: boolean;
   isSyncActive?: boolean;

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;