zack3d/big-agi
1
0
Fork 0
mirror of https://github.com/enricoros/big-AGI.git synced 2026-05-10 21:50:14 -07:00
Code Issues Packages Projects Releases Wiki Activity

Ctrl+Up/Down message navigation: improve

Browse Source
This commit is contained in:
Enrico Ros
2024-10-24 21:34:53 -07:00
parent 4279e94499
commit e91e0f273a
1 changed files with 17 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/apps/chat/AppChat.tsx
+17 -11
View File
@@ -490,19 +490,25 @@ export function AppChat() {
}, []);
const handleMoveFocus = React.useCallback((direction: number) => {
const messageElements = Array.from(document.querySelectorAll('[role=chat-message]'));
const activeElement = document.activeElement;
// find the parent list
let messageListElement: HTMLElement | null;
const activeElement = document.activeElement as HTMLElement;
if (activeElement)
messageListElement = activeElement.closest('[role=chat-messages-list]') as HTMLElement;
else
messageListElement = document.querySelector('[role=chat-messages-list]') as HTMLElement;
if (!messageListElement) return;
// determine the current message and next index
const messageElements = Array.from(messageListElement.querySelectorAll('[role=chat-message]')) as HTMLElement[];
const currentIndex = messageElements.findIndex(el => el.contains(activeElement));
const nextIndex = currentIndex === -1 ? (direction < 0 ? 0 : messageElements.length - 1) : currentIndex + direction;
if (nextIndex < 0 || nextIndex >= messageElements.length) return;
// If no element is focused, start from the beginning/end
const nextIndex = currentIndex === -1 ? (direction < 0 ? 0 : messageElements.length - 1)
: currentIndex + direction;
if (nextIndex >= 0 && nextIndex < messageElements.length) {
const targetElement = messageElements[nextIndex];
if ('focus' in targetElement) (targetElement as any).focus();
// targetElement?.scrollIntoView({ behavior: 'smooth' });
}
// perform the smooth scroll and focus
const targetElement = messageElements[nextIndex];
targetElement.focus({ preventScroll: true, focusVisible: true } as FocusOptions);
targetElement.scrollIntoView({ behavior: 'smooth' });
}, []);
useGlobalShortcuts('AppChat', React.useMemo(() => [