ishangsf/DeepCodeGeniusWeb-vscode
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Improve chat panel keyboard navigation

Browse Source 
- Focus input field when plus button is clicked
- Close menu when 'Escape' key is pressed
- Refactor menu navigation for better readability
This commit is contained in:
Rankin Zheng 2023-05-19 07:51:28 +08:00
parent 039a6d0b22
commit 64ba8612c6
1 changed files with 21 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
src/views/ChatPanel/index.tsx
View File

@ -50,6 +50,7 @@ const chatPanel = () => {
const handlePlusClick = (event: React.MouseEvent<HTMLButtonElement>) => {
setMenuType('contexts');
setMenuOpend(!menuOpend);
inputRef.current.focus();
event.stopPropagation();
};
@ -289,22 +290,27 @@ const chatPanel = () => {
};
const handleKeyDown = (event: React.KeyboardEvent<HTMLTextAreaElement>) => {
if (menuOpend && menuType === 'commands') {
if (event.key === 'ArrowDown') {
const newIndex = currentMenuIndex + 1;
setCurrentMenuIndex(newIndex < commandMenusNode.length ? newIndex : 0);
event.preventDefault();
}
if (event.key === 'ArrowUp') {
const newIndex = currentMenuIndex - 1;
setCurrentMenuIndex(newIndex < 0 ? commandMenusNode.length - 1 : newIndex);
event.preventDefault();
}
if (event.key === 'Enter' && !event.shiftKey) {
const commandNode = commandMenusNode[currentMenuIndex];
setInput(`/${commandNode.props['data-pattern']} `);
if (menuOpend) {
if (event.key === 'Escape') {
setMenuOpend(false);
event.preventDefault();
}
if (menuType === 'commands') {
if (event.key === 'ArrowDown') {
const newIndex = currentMenuIndex + 1;
setCurrentMenuIndex(newIndex < commandMenusNode.length ? newIndex : 0);
event.preventDefault();
}
if (event.key === 'ArrowUp') {
const newIndex = currentMenuIndex - 1;
setCurrentMenuIndex(newIndex < 0 ? commandMenusNode.length - 1 : newIndex);
event.preventDefault();
}
if (event.key === 'Enter' && !event.shiftKey) {
const commandNode = commandMenusNode[currentMenuIndex];
setInput(`/${commandNode.props['data-pattern']} `);
setMenuOpend(false);
event.preventDefault();
}
}
} else {
if (event.key === 'Enter' && !event.shiftKey) {