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

src/locales/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.Mod

instead of hardcoded

Ctrl

or

Cmd

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