Andreas/LibreChat
1
0
Fork 0
mirror of https://github.com/danny-avila/LibreChat.git synced 2025-12-19 09:50:15 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 4

🎛️ refactor: Add keyboard command toggles & only trigger for the 1st character (#3566)

Browse source 
* refactor: Improve handling of key up events in useHandleKeyUp hook to only trigger for first char and fix linter issues

* refactor: Update Beta component styling with theme twcss variables

* refactor: theming for Settings, add toggle enable/disable keyboard commands
This commit is contained in:
Danny Avila 2024-08-06 22:18:07 -04:00 • committed by GitHub
parent 270c6d2350
commit 01a88991ab
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
12 changed files with 224 additions and 64 deletions
Download patch file Download diff file Expand all files Collapse all files

40
client/src/hooks/Input/useHandleKeyUp.ts
View file

@ -1,5 +1,5 @@
import { useSetRecoilState } from 'recoil';
import { useCallback, useMemo } from 'react';
import { useSetRecoilState, useRecoilValue } from 'recoil';
import { PermissionTypes, Permissions } from 'librechat-data-provider';
import type { SetterOrUpdater } from 'recoil';
import useHasAccess from '~/hooks/Roles/useHasAccess';
@ -20,20 +20,16 @@ const shouldTriggerCommand = (
commandChar: string,
) => {
const text = textAreaRef.current?.value;
if (!(text && text[text.length - 1] === commandChar)) {
if (typeof text !== 'string' || text.length === 0 || text[0] !== commandChar) {
return false;
}
const startPos = textAreaRef.current?.selectionStart;
if (!startPos) {
if (typeof startPos !== 'number') {
return false;
}
const isAtStart = startPos === 1;
const isPrecededBySpace = textAreaRef.current?.value.charAt(startPos - 2) === ' ';
const shouldTrigger = isAtStart || isPrecededBySpace;
return shouldTrigger;
return startPos === 1;
};
/**
@ -55,26 +51,32 @@ const useHandleKeyUp = ({
permission: Permissions.USE,
});
const setShowPromptsPopover = useSetRecoilState(store.showPromptsPopoverFamily(index));
// Get the current state of command toggles
const atCommandEnabled = useRecoilValue(store.atCommand);
const plusCommandEnabled = useRecoilValue(store.plusCommand);
const slashCommandEnabled = useRecoilValue(store.slashCommand);
const handleAtCommand = useCallback(() => {
if (shouldTriggerCommand(textAreaRef, '@')) {
if (atCommandEnabled && shouldTriggerCommand(textAreaRef, '@')) {
setShowMentionPopover(true);
}
}, [textAreaRef, setShowMentionPopover]);
}, [textAreaRef, setShowMentionPopover, atCommandEnabled]);
const handlePlusCommand = useCallback(() => {
if (shouldTriggerCommand(textAreaRef, '+')) {
if (plusCommandEnabled && shouldTriggerCommand(textAreaRef, '+')) {
setShowPlusPopover(true);
}
}, [textAreaRef, setShowPlusPopover]);
}, [textAreaRef, setShowPlusPopover, plusCommandEnabled]);
const handlePromptsCommand = useCallback(() => {
if (!hasAccess) {
if (!hasAccess || !slashCommandEnabled) {
return;
}
if (shouldTriggerCommand(textAreaRef, '/')) {
setShowPromptsPopover(true);
}
}, [textAreaRef, hasAccess, setShowPromptsPopover]);
}, [textAreaRef, hasAccess, setShowPromptsPopover, slashCommandEnabled]);
const commandHandlers = useMemo(
() => ({
@ -91,18 +93,18 @@ const useHandleKeyUp = ({
const handleKeyUp = useCallback(
(event: React.KeyboardEvent<HTMLTextAreaElement>) => {
const text = textAreaRef.current?.value;
if (!text) {
if (typeof text !== 'string' || text.length === 0) {
return;
}
if (invalidKeys[event.key]) {
if (invalidKeys[event.key as keyof typeof invalidKeys]) {
return;
}
const lastChar = text[text.length - 1];
const handler = commandHandlers[lastChar];
const firstChar = text[0];
const handler = commandHandlers[firstChar as keyof typeof commandHandlers];
if (handler) {
if (typeof handler === 'function') {
handler();
}
},