Lobe Chat 快捷键开发指南：如何为聊天机器人添加快捷键功能

hotkey by lobehub/lobe-chat

236 周安装量

74,800 GitHub Stars

GitHub

安装命令

npx skills add https://github.com/lobehub/lobe-chat --skill hotkey

开发聊天机器人插件用户体验

🇨🇳中文介绍

添加快捷键指南

添加快捷键的步骤

1. 更新快捷键常量

在 src/types/hotkey.ts 中：

export const HotkeyEnum = {
  // 现有内容...
  ClearChat: 'clearChat', // 新增
} as const;

2. 注册默认快捷键

在 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. 添加国际化翻译

在 src/locales/default/hotkey.ts 中：

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

广告位招租

在这里展示您的产品或服务

触达数万 AI 开发者，精准高效

联系我们

4. 创建并注册钩子

在 src/hooks/useHotkeys/chatScope.ts 中：

export const useClearChatHotkey = () => {
  const clearMessages = useChatStore((s) => s.clearMessages);
  return useHotkeyById(HotkeyEnum.ClearChat, clearMessages);
};

export const useRegisterChatHotkeys = () => {
  useClearChatHotkey();
  // ...其他快捷键
};

5. 添加工具提示（可选）

const clearChatHotkey = useUserStore(settingsSelectors.getHotkeyById(HotkeyEnum.ClearChat));

<Tooltip hotkey={clearChatHotkey} title={t('clearChat.title', { ns: 'hotkey' })}>
  <Button icon={<DeleteOutlined />} onClick={clearMessages} />
</Tooltip>;

作用域：根据功能选择全局或聊天作用域
分组：放置在适当的组中（系统/布局/对话）
冲突检查：确保与系统/浏览器快捷键无冲突
平台兼容：使用 Key.Mod 而非硬编码的 Ctrl 或 Cmd
清晰描述：为用户提供标题和描述

快捷键无效：检查作用域和 RegisterHotkeys 钩子
设置中未显示：验证 HOTKEYS_REGISTRATION 配置
冲突：HotkeyInput 组件会显示警告
页面特定问题：确保正确的作用域激活

React 组合模式指南：Vercel 组件架构最佳实践，提升代码可维护性

116,600 周安装

Lobe Chat 快捷键开发指南：如何为聊天机器人添加快捷键功能

🇨🇳中文介绍

添加快捷键指南

添加快捷键的步骤

1. 更新快捷键常量

2. 注册默认快捷键

3. 添加国际化翻译

相关 Skills

4. 创建并注册钩子

5. 添加工具提示（可选）

最佳实践

故障排除

最新 Skills