Agent Skills
› lobehub/lobehub
› hotkey
hotkey
GitHub指导如何为 LobeHub 应用添加或编辑键盘快捷键，涵盖常量定义、注册、国际化及 Hook 使用。
Trigger Scenarios
需要新增自定义快捷键
修改现有快捷键配置
解决快捷键冲突或作用域问题
Install
npx skills add lobehub/lobehub --skill hotkey -g -y
SKILL.md
Frontmatter
{
"name": "hotkey",
"description": "Add or edit LobeHub keyboard shortcuts. Use for HotkeyEnum, HOTKEYS_REGISTRATION, combineKeys, useHotkeyById, tooltip hotkeys, shortcut scope, conflicts, or Cmd\/Ctrl key combos.",
"user-invocable": false
}
Adding Keyboard Shortcuts Guide
Steps to Add a New Hotkey
1. Update Hotkey Constant
In src/types/hotkey.ts:
export const HotkeyEnum = {
// existing...
ClearChat: 'clearChat', // Add new
} as const;
2. Register Default Hotkey
In src/const/hotkeys.ts:
import { KeyMapEnum as Key, combineKeys } from '@lobehub/ui';
export const HOTKEYS_REGISTRATION: HotkeyRegistration = [
{
group: HotkeyGroupEnum.Conversation,
id: HotkeyEnum.ClearChat,
keys: combineKeys([Key.Mod, Key.Shift, Key.Backspace]),
scopes: [HotkeyScopeEnum.Chat],
},
];
3. Add i18n Translation
In packages/locales/src/default/hotkey.ts:
const hotkey: HotkeyI18nTranslations = {
clearChat: {
desc: '清空当前会话的所有消息记录',
title: '清空聊天记录',
},
};
4. Create and Register Hook
In src/hooks/useHotkeys/chatScope.ts:
export const useClearChatHotkey = () => {
const clearMessages = useChatStore((s) => s.clearMessages);
return useHotkeyById(HotkeyEnum.ClearChat, clearMessages);
};
export const useRegisterChatHotkeys = () => {
useClearChatHotkey();
// ...other hotkeys
};
5. Add Tooltip (Optional)
const clearChatHotkey = useUserStore(settingsSelectors.getHotkeyById(HotkeyEnum.ClearChat));
<Tooltip hotkey={clearChatHotkey} title={t('clearChat.title', { ns: 'hotkey' })}>
<Button icon={<DeleteOutlined />} onClick={clearMessages} />
</Tooltip>;
Best Practices
- Scope: Choose global or chat scope based on functionality
- Grouping: Place in appropriate group (System/Layout/Conversation)
- Conflict check: Ensure no conflict with system/browser shortcuts
- Platform: Use
Key.Modinstead of hardcodedCtrlorCmd - 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
Version History
- 29fe043 Current 2026-08-20 18:33
