Adding Keyboard Shortcuts Guide

Steps to Add a New Hotkey

1. Update Hotkey Constant

In src/types/hotkey.ts:

typescript
1export const HotkeyEnum = {
2  // existing...
3  ClearChat: 'clearChat', // Add new
4} as const;

2. Register Default Hotkey

In src/const/hotkeys.ts:

typescript
1import { KeyMapEnum as Key, combineKeys } from '@lobehub/ui';
2
3export const HOTKEYS_REGISTRATION: HotkeyRegistration = [
4  {
5    group: HotkeyGroupEnum.Conversation,
6    id: HotkeyEnum.ClearChat,
7    keys: combineKeys([Key.Mod, Key.Shift, Key.Backspace]),
8    scopes: [HotkeyScopeEnum.Chat],
9  },
10];

3. Add i18n Translation

In src/locales/default/hotkey.ts:

typescript
1const hotkey: HotkeyI18nTranslations = {
2  clearChat: {
3    desc: '清空当前会话的所有消息记录',
4    title: '清空聊天记录',
5  },
6};

4. Create and Register Hook

In src/hooks/useHotkeys/chatScope.ts:

typescript
1export const useClearChatHotkey = () => {
2  const clearMessages = useChatStore((s) => s.clearMessages);
3  return useHotkeyById(HotkeyEnum.ClearChat, clearMessages);
4};
5
6export const useRegisterChatHotkeys = () => {
7  useClearChatHotkey();
8  // ...other hotkeys
9};

5. Add Tooltip (Optional)

tsx
1const clearChatHotkey = useUserStore(settingsSelectors.getHotkeyById(HotkeyEnum.ClearChat));
2
3<Tooltip hotkey={clearChatHotkey} title={t('clearChat.title', { ns: 'hotkey' })}>
4  <Button icon={<DeleteOutlined />} onClick={clearMessages} />
5</Tooltip>;

Best Practices

1. Scope: Choose global or chat scope based on functionality
2. Grouping: Place in appropriate group (System/Layout/Conversation)
3. Conflict check: Ensure no conflict with system/browser shortcuts
4. Platform: Use Key.Mod instead of hardcoded Ctrl or Cmd
5. Clear description: Provide title and description for users

Troubleshooting

• Not working: Check scope and RegisterHotkeys hook
• Not in settings: Verify HOTKEYS_REGISTRATION config
• Conflict: HotkeyInput component shows warnings
• Page-specific: Ensure correct scope activation