@lobehub/chat 1.75.5 → 1.76.1

package/src/hooks/useHotkeys/useHotkeyById.ts

@@ -0,0 +1,57 @@
+import { uniq } from 'lodash-es';
+import { DependencyList } from 'react';
+import { type HotkeyCallback, type Options, useHotkeys } from 'react-hotkeys-hook';
+
+import { HOTKEYS_REGISTRATION } from '@/const/hotkeys';
+import { useServerConfigStore } from '@/store/serverConfig';
+import { useUserStore } from '@/store/user';
+import { settingsSelectors } from '@/store/user/selectors';
+import { HotkeyId } from '@/types/hotkey';
+import { isDev } from '@/utils/env';
+
+type OptionsOrDependencyArray = Options | DependencyList;
+
+export const useHotkeyById = (
+  hotkeyId: HotkeyId,
+  callback: HotkeyCallback,
+  options?: OptionsOrDependencyArray,
+  dependencies?: OptionsOrDependencyArray,
+) => {
+  const hotkey = useUserStore(settingsSelectors.getHotkeyById(hotkeyId));
+  const mobile = useServerConfigStore((s) => s.isMobile);
+
+  const _options: Options | undefined = !Array.isArray(options)
+    ? (options as Options)
+    : !Array.isArray(dependencies)
+      ? (dependencies as Options)
+      : undefined;
+
+  const _deps: DependencyList | undefined = Array.isArray(options)
+    ? options
+    : Array.isArray(dependencies)
+      ? dependencies
+      : undefined;
+
+  const item = HOTKEYS_REGISTRATION.find((item) => item.id === hotkeyId);
+
+  const ref = useHotkeys(
+    hotkey,
+    (...props) => {
+      if (isDev) console.log('[Hotkey]', hotkeyId);
+      return callback(...props);
+    },
+    {
+      enableOnFormTags: true,
+      preventDefault: true,
+      ..._options,
+      enabled: !mobile && _options?.enabled,
+      scopes: uniq([hotkeyId, ...(item?.scopes || []), ...(_options?.scopes || [])]),
+    },
+    _deps,
+  );
+
+  return {
+    id: hotkeyId,
+    ref,
+  };
+};

package/src/locales/default/hotkey.ts

@@ -0,0 +1,50 @@
+import { HotkeyI18nTranslations } from '@/types/hotkey';
+
+const hotkey: HotkeyI18nTranslations = {
+  addUserMessage: {
+    desc: '将当前输入内容添加为用户消息，但不触发生成',
+    title: '添加一条用户消息',
+  },
+  editMessage: {
+    desc: '通过按住 Alt 并双击消息进入编辑模式',
+    title: '编辑消息',
+  },
+  openChatSettings: {
+    desc: '查看和修改当前会话的设置',
+    title: '打开会话设置',
+  },
+  openHotkeyHelper: {
+    desc: '查看所有快捷键的使用说明',
+    title: '打开快捷键帮助',
+  },
+  regenerateMessage: {
+    desc: '重新生成最后一条消息',
+    title: '重新生成消息',
+  },
+  saveTopic: {
+    desc: '保存当前话题并打开新话题',
+    title: '开启新话题',
+  },
+  search: {
+    desc: '唤起当前页面主要搜索框',
+    title: '搜索',
+  },
+  switchAgent: {
+    desc: '通过按住 Ctrl 加数字 0~9 切换固定在侧边栏的助手',
+    title: '快捷切换助手',
+  },
+  toggleLeftPanel: {
+    desc: '显示或隐藏左侧助手面板',
+    title: '显示/隐藏助手面板',
+  },
+  toggleRightPanel: {
+    desc: '显示或隐藏右侧话题面板',
+    title: '显示/隐藏话题面板',
+  },
+  toggleZenMode: {
+    desc: '专注模式下，只显示当前会话，隐藏其他 UI',
+    title: '切换专注模式',
+  },
+};
+
+export default hotkey;

package/src/locales/default/index.ts

@@ -7,6 +7,7 @@ import components from './components';
 import discover from './discover';
 import error from './error';
 import file from './file';
+import hotkey from './hotkey';
 import knowledgeBase from './knowledgeBase';
 import metadata from './metadata';
 import migration from './migration';
@@ -32,6 +33,7 @@ const resources = {
   discover,
   error,
   file,
+  hotkey,
   knowledgeBase,
   metadata,
   migration,

package/src/locales/default/setting.ts

@@ -42,6 +42,17 @@ export default {
     sessionWithName: '会话设置 · {{name}}',
     title: '设置',
   },
+  hotkey: {
+    conflicts: '与现有快捷键冲突',
+    group: {
+      conversation: '会话',
+      essential: '基础',
+    },
+    invalidCombination: '快捷键需要至少包含一个修饰键 (Ctrl, Alt, Shift) 和一个常规键',
+    record: '按下按键以录制快捷键',
+    reset: '重置为默认快捷键',
+    title: '快捷键',
+  },
   llm: {
     aesGcm: '您的秘钥与代理地址等将使用 <1>AES-GCM</1> 加密算法进行加密',
     apiKey: {
@@ -427,6 +438,7 @@ export default {
     'agent': '默认助手',
     'common': '通用设置',
     'experiment': '实验',
+    'hotkey': '快捷键',
     'llm': '语言模型',
     'provider': 'AI 服务商',
     'sync': '云端同步',

package/src/store/global/initialState.ts

@@ -27,6 +27,7 @@ export enum SettingsTabs {
   About = 'about',
   Agent = 'agent',
   Common = 'common',
+  Hotkey = 'hotkey',
   LLM = 'llm',
   Provider = 'provider',
   Sync = 'sync',
@@ -60,6 +61,7 @@ export interface SystemStatus {
   sessionsWidth: number;
   showChatSideBar?: boolean;
   showFilePanel?: boolean;
+  showHotkeyHelper?: boolean;
   showSessionPanel?: boolean;
   showSystemRole?: boolean;
   /**
@@ -104,6 +106,7 @@ export const INITIAL_STATUS = {
   sessionsWidth: 320,
   showChatSideBar: true,
   showFilePanel: true,
+  showHotkeyHelper: false,
   showSessionPanel: true,
   showSystemRole: false,
   themeMode: 'auto',

package/src/store/user/slices/settings/selectors/__snapshots__/settings.test.ts.snap

@@ -48,6 +48,38 @@ exports[`settingsSelectors > currentSettings > should merge DEFAULT_SETTINGS and
 }
 `;
 
+exports[`settingsSelectors > currentSystemAgent > should merge DEFAULT_SYSTEM_AGENT_CONFIG and s.settings.systemAgent correctly 1`] = `
+{
+  "agentMeta": {
+    "model": "gpt-4o-mini",
+    "provider": "openai",
+  },
+  "enableAutoReply": true,
+  "historyCompress": {
+    "model": "gpt-4o-mini",
+    "provider": "openai",
+  },
+  "queryRewrite": {
+    "enabled": true,
+    "model": "gpt-4o-mini",
+    "provider": "openai",
+  },
+  "replyMessage": "Custom auto reply",
+  "thread": {
+    "model": "gpt-4o-mini",
+    "provider": "openai",
+  },
+  "topic": {
+    "model": "gpt-4o-mini",
+    "provider": "openai",
+  },
+  "translation": {
+    "model": "gpt-4o-mini",
+    "provider": "openai",
+  },
+}
+`;
+
 exports[`settingsSelectors > currentTTS > should merge DEFAULT_TTS_CONFIG and s.settings.tts correctly 1`] = `
 {
   "openAI": {
@@ -110,9 +142,56 @@ exports[`settingsSelectors > defaultAgent > should merge DEFAULT_AGENT and s.set
 }
 `;
 
+exports[`settingsSelectors > defaultAgentConfig > should merge DEFAULT_AGENT_CONFIG and defaultAgent(s).config correctly 1`] = `
+{
+  "chatConfig": {
+    "autoCreateTopicThreshold": 2,
+    "displayMode": "chat",
+    "enableAutoCreateTopic": true,
+    "enableCompressHistory": true,
+    "enableHistoryCount": true,
+    "enableReasoning": false,
+    "historyCount": 8,
+    "reasoningBudgetToken": 1024,
+    "searchFCModel": {
+      "model": "gpt-4o-mini",
+      "provider": "openai",
+    },
+    "searchMode": "off",
+  },
+  "model": "gpt-4",
+  "params": {
+    "frequency_penalty": 0,
+    "presence_penalty": 0,
+    "temperature": 0.7,
+    "top_p": 1,
+  },
+  "plugins": [],
+  "provider": "openai",
+  "systemRole": "custom role",
+  "tts": {
+    "showAllLocaleVoice": false,
+    "sttLocale": "auto",
+    "ttsService": "openai",
+    "voice": {
+      "openai": "alloy",
+    },
+  },
+}
+`;
+
 exports[`settingsSelectors > defaultAgentMeta > should merge DEFAULT_AGENT_META and defaultAgent(s).meta correctly 1`] = `
 {
   "avatar": "agent-avatar.jpg",
   "description": "Test agent",
 }
 `;
+
+exports[`settingsSelectors > getHotkeyById > should return default hotkey if not defined in settings 1`] = `undefined`;
+
+exports[`settingsSelectors > getHotkeyById > should return the hotkey config for a given id 1`] = `
+{
+  "hotkey": "ctrl+shift+f",
+  "scope": "global",
+}
+`;

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

@@ -1,3 +1,6 @@
+import { HotkeyId } from '@/types/hotkey';
+import { GlobalLLMProviderKey } from '@/types/user/settings';
+
 import { UserStore } from '../../../store';
 import { settingsSelectors } from './settings';
 
@@ -153,4 +156,132 @@ describe('settingsSelectors', () => {
       expect(result).toBe(true);
     });
   });
+
+  describe('getProviderConfigById', () => {
+    it('should return the provider config for a given provider id', () => {
+      const providerConfig = {
+        OPENAI_API_KEY: 'test-key',
+        endpoint: 'https://test-endpoint.com',
+      };
+
+      const s = {
+        settings: {
+          languageModel: {
+            openAI: providerConfig,
+          },
+        },
+      } as unknown as UserStore;
+
+      const result = settingsSelectors.providerConfig('openAI')(s);
+
+      expect(result).toEqual(providerConfig);
+    });
+
+    it('should return undefined if provider does not exist', () => {
+      const s = {
+        settings: {
+          languageModel: {},
+        },
+      } as unknown as UserStore;
+
+      const result = settingsSelectors.providerConfig(
+        'nonExistentProvider' as GlobalLLMProviderKey,
+      )(s);
+
+      expect(result).toBeUndefined();
+    });
+  });
+
+  describe('defaultAgentConfig', () => {
+    it('should merge DEFAULT_AGENT_CONFIG and defaultAgent(s).config correctly', () => {
+      const s = {
+        settings: {
+          defaultAgent: {
+            config: {
+              systemRole: 'custom role',
+              model: 'gpt-4',
+              params: {
+                temperature: 0.7,
+              },
+            },
+          },
+        },
+      } as unknown as UserStore;
+
+      const result = settingsSelectors.defaultAgentConfig(s);
+
+      expect(result).toMatchSnapshot();
+    });
+  });
+
+  describe('exportSettings', () => {
+    it('should return the current settings', () => {
+      const s = {
+        defaultSettings: {
+          fontSize: 16,
+        },
+        settings: {
+          fontSize: 14,
+          language: 'en-US',
+        },
+      } as unknown as UserStore;
+
+      const result = settingsSelectors.exportSettings(s);
+
+      expect(result).toEqual({
+        fontSize: 14,
+        language: 'en-US',
+      });
+    });
+  });
+
+  describe('currentSystemAgent', () => {
+    it('should merge DEFAULT_SYSTEM_AGENT_CONFIG and s.settings.systemAgent correctly', () => {
+      const s = {
+        settings: {
+          systemAgent: {
+            enableAutoReply: true,
+            replyMessage: 'Custom auto reply',
+          },
+        },
+      } as unknown as UserStore;
+
+      const result = settingsSelectors.currentSystemAgent(s);
+
+      expect(result).toMatchSnapshot();
+    });
+  });
+
+  describe('getHotkeyById', () => {
+    it('should return the hotkey config for a given id', () => {
+      const hotkeyConfig = {
+        hotkey: 'ctrl+shift+f',
+        scope: 'global',
+      };
+
+      const s = {
+        settings: {
+          hotkey: {
+            newChat: hotkeyConfig,
+          },
+        },
+      } as unknown as UserStore;
+
+      const result = settingsSelectors.getHotkeyById('newChat' as HotkeyId)(s);
+
+      expect(result).toMatchSnapshot();
+    });
+
+    it('should return default hotkey if not defined in settings', () => {
+      const s = {
+        settings: {
+          hotkey: {},
+        },
+      } as unknown as UserStore;
+
+      const result = settingsSelectors.getHotkeyById('newChat' as HotkeyId)(s);
+
+      expect(result).toMatchSnapshot();
+    });
+  });
 });

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

@@ -2,9 +2,11 @@ import { DEFAULT_AGENT_META } from '@/const/meta';
 import {
   DEFAULT_AGENT,
   DEFAULT_AGENT_CONFIG,
+  DEFAULT_HOTKEY_CONFIG,
   DEFAULT_SYSTEM_AGENT_CONFIG,
   DEFAULT_TTS_CONFIG,
 } from '@/const/settings';
+import { HotkeyId } from '@/types/hotkey';
 import {
   GlobalLLMProviderKey,
   ProviderConfig,
@@ -38,6 +40,9 @@ const isDalleAutoGenerating = (s: UserStore) => currentSettings(s).tool?.dalle?.
 const currentSystemAgent = (s: UserStore) =>
   merge(DEFAULT_SYSTEM_AGENT_CONFIG, currentSettings(s).systemAgent);
 
+const getHotkeyById = (id: HotkeyId) => (s: UserStore) =>
+  merge(DEFAULT_HOTKEY_CONFIG, currentSettings(s).hotkey)[id];
+
 export const settingsSelectors = {
   currentSettings,
   currentSystemAgent,
@@ -47,6 +52,7 @@ export const settingsSelectors = {
   defaultAgentConfig,
   defaultAgentMeta,
   exportSettings,
+  getHotkeyById,
   isDalleAutoGenerating,
   providerConfig: getProviderConfigById,
 };

package/src/types/hotkey.ts

@@ -0,0 +1,59 @@
+import { KeyMapEnum } from '@lobehub/ui/es/Hotkey';
+
+export const KeyEnum = {
+  ...KeyMapEnum,
+  Number: '1-9',
+} as const;
+
+export const HotkeyEnum = {
+  AddUserMessage: 'addUserMessage',
+  EditMessage: 'editMessage',
+  OpenChatSettings: 'openChatSettings',
+  OpenHotkeyHelper: 'openHotkeyHelper',
+  RegenerateMessage: 'regenerateMessage',
+  SaveTopic: 'saveTopic',
+  Search: 'search',
+  SwitchAgent: 'switchAgent',
+  ToggleLeftPanel: 'toggleLeftPanel',
+  ToggleRightPanel: 'toggleRightPanel',
+  ToggleZenMode: 'toggleZenMode',
+} as const;
+
+export const HotkeyGroupEnum = {
+  Conversation: 'conversation',
+  Essential: 'essential',
+} as const;
+
+export const HotkeyScopeEnum = {
+  Chat: 'chat',
+  // 默认全局注册的快捷键 scope
+  // https://react-hotkeys-hook.vercel.app/docs/documentation/hotkeys-provider
+  Global: 'global',
+} as const;
+
+export type HotkeyId = (typeof HotkeyEnum)[keyof typeof HotkeyEnum];
+export type HotkeyGroupId = (typeof HotkeyGroupEnum)[keyof typeof HotkeyGroupEnum];
+export type HotkeyScopeId = (typeof HotkeyScopeEnum)[keyof typeof HotkeyScopeEnum];
+
+export interface HotkeyItem {
+  // 快捷键分组用于展示
+  group: HotkeyGroupId;
+  id: HotkeyId;
+  isDesktop?: boolean;
+  // 是否是桌面端专用的快捷键
+  keys: string;
+  // 是否为不可编辑的快捷键
+  nonEditable?: boolean;
+  // 快捷键作用域
+  scopes?: HotkeyScopeId[];
+}
+
+export type HotkeyRegistration = HotkeyItem[];
+
+export type HotkeyI18nTranslations = Record<
+  HotkeyId,
+  {
+    desc?: string;
+    title: string;
+  }
+>;

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

@@ -0,0 +1,3 @@
+import { HotkeyId } from '@/types/hotkey';
+
+export type UserHotkeyConfig = Record<HotkeyId, string>;

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

@@ -1,6 +1,7 @@
 import type { LobeAgentSettings } from '@/types/session';
 
 import { UserGeneralConfig } from './general';
+import { UserHotkeyConfig } from './hotkey';
 import { UserKeyVaults } from './keyVaults';
 import { UserModelProviderConfig } from './modelProvider';
 import { UserSyncSettings } from './sync';
@@ -11,6 +12,7 @@ import { UserTTSConfig } from './tts';
 export type UserDefaultAgent = LobeAgentSettings;
 
 export * from './general';
+export * from './hotkey';
 export * from './keyVaults';
 export * from './modelProvider';
 export * from './sync';
@@ -23,6 +25,7 @@ export * from './tts';
 export interface UserSettings {
   defaultAgent: UserDefaultAgent;
   general: UserGeneralConfig;
+  hotkey: UserHotkeyConfig;
   keyVaults: UserKeyVaults;
   languageModel: UserModelProviderConfig;
   sync?: UserSyncSettings;

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

@@ -3,7 +3,7 @@ export type STTServer = 'openai' | 'browser';
 export interface UserTTSConfig {
   openAI: {
     sttModel: 'whisper-1';
-    ttsModel: 'tts-1' | 'tts-1-hd';
+    ttsModel: 'gpt-4o-mini-tts' | 'tts-1' | 'tts-1-hd';
   };
   sttAutoStop: boolean;
   sttServer: STTServer;

package/src/app/[variants]/(main)/chat/(workspace)/_layout/Desktop/HotKeys.tsx

@@ -1,44 +0,0 @@
-'use client';
-
-import isEqual from 'fast-deep-equal';
-import { useHotkeys } from 'react-hotkeys-hook';
-
-import { HOTKEYS } from '@/const/hotkeys';
-import { useOpenChatSettings } from '@/hooks/useInterceptingRoutes';
-import { useChatStore } from '@/store/chat';
-import { chatSelectors } from '@/store/chat/selectors';
-import { useGlobalStore } from '@/store/global';
-
-const HotKeys = () => {
-  const [regenerateMessage] = useChatStore((s) => [s.regenerateMessage]);
-  const lastMessage = useChatStore(chatSelectors.latestMessage, isEqual);
-
-  const toggleZenMode = useGlobalStore((s) => s.toggleZenMode);
-  const openChatSettings = useOpenChatSettings();
-
-  useHotkeys(HOTKEYS.zenMode, toggleZenMode, {
-    enableOnFormTags: true,
-    preventDefault: true,
-  });
-
-  useHotkeys(HOTKEYS.chatSettings, () => openChatSettings(), {
-    enableOnFormTags: false,
-    preventDefault: true,
-  });
-
-  useHotkeys(
-    HOTKEYS.regenerate,
-    () => {
-      if (!lastMessage || lastMessage.id === 'default' || lastMessage.role === 'system') return;
-      regenerateMessage(lastMessage.id);
-    },
-    {
-      enableOnFormTags: true,
-      preventDefault: true,
-    },
-  );
-
-  return null;
-};
-
-export default HotKeys;

package/src/components/HotKeys/index.tsx

@@ -1,77 +0,0 @@
-'use client';
-
-import { Icon } from '@lobehub/ui';
-import { createStyles } from 'antd-style';
-import { isString } from 'lodash-es';
-import { Command, Delete, Option } from 'lucide-react';
-import { rgba } from 'polished';
-import { memo, useEffect, useState } from 'react';
-import { Flexbox } from 'react-layout-kit';
-
-import { ALT_KEY, CLEAN_MESSAGE_KEY, META_KEY } from '@/const/hotkeys';
-import { usePlatform } from '@/hooks/usePlatform';
-
-const useStyles = createStyles(
-  ({ css, token }, inverseTheme: boolean) => css`
-    font-size: 12px;
-
-    kbd {
-      min-width: 16px;
-      height: 22px;
-      padding-inline: 8px;
-      border-radius: ${token.borderRadius}px;
-
-      line-height: 22px;
-      color: ${inverseTheme ? token.colorTextTertiary : token.colorTextSecondary};
-      text-align: center;
-
-      background: ${inverseTheme ? rgba(token.colorTextTertiary, 0.15) : token.colorFillTertiary};
-    }
-  `,
-);
-
-export interface HotKeysProps {
-  desc?: string;
-  inverseTheme?: boolean;
-  keys: string;
-}
-
-const HotKeys = memo<HotKeysProps>(({ keys, desc, inverseTheme }) => {
-  const { styles } = useStyles(inverseTheme);
-  const [keysGroup, setKeysGroup] = useState(keys.split('+'));
-  const visibility = typeof window === 'undefined' ? 'hidden' : 'visible';
-  const { isApple } = usePlatform();
-
-  useEffect(() => {
-    const mapping: Record<string, any> = {
-      [ALT_KEY]: isApple ? <Icon icon={Option} /> : 'alt',
-      [CLEAN_MESSAGE_KEY]: isApple ? <Icon icon={Delete} /> : 'backspace',
-      [META_KEY]: isApple ? <Icon icon={Command} /> : 'ctrl',
-    };
-    const newValue = keys
-      .split('+')
-      .filter(Boolean)
-      .map((k) => mapping[k] ?? k);
-    setKeysGroup(newValue);
-  }, [keys]);
-
-  const content = (
-    <Flexbox align={'center'} className={styles} gap={4} horizontal>
-      {keysGroup.map((key, index) => (
-        <kbd key={index}>
-          <span style={{ visibility }}>{isString(key) ? key.toUpperCase() : key}</span>
-        </kbd>
-      ))}
-    </Flexbox>
-  );
-
-  if (!desc) return content;
-  return (
-    <Flexbox gap={16} horizontal>
-      {desc}
-      {content}
-    </Flexbox>
-  );
-});
-
-export default HotKeys;