File size: 4,100 Bytes
f0743f4 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 | 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';
import store from '~/store';
/** Event Keys that shouldn't trigger a command */
const invalidKeys = {
Escape: true,
Backspace: true,
Enter: true,
};
/**
* Utility function to determine if a command should trigger.
*/
const shouldTriggerCommand = (
textAreaRef: React.RefObject<HTMLTextAreaElement>,
commandChar: string,
) => {
const text = textAreaRef.current?.value;
if (typeof text !== 'string' || text.length === 0 || text[0] !== commandChar) {
return false;
}
const startPos = textAreaRef.current?.selectionStart;
if (typeof startPos !== 'number') {
return false;
}
return startPos === 1;
};
/**
* Custom hook for handling key up events with command triggers.
*/
const useHandleKeyUp = ({
index,
textAreaRef,
setShowPlusPopover,
setShowMentionPopover,
}: {
index: number;
textAreaRef: React.RefObject<HTMLTextAreaElement>;
setShowPlusPopover: SetterOrUpdater<boolean>;
setShowMentionPopover: SetterOrUpdater<boolean>;
}) => {
const hasPromptsAccess = useHasAccess({
permissionType: PermissionTypes.PROMPTS,
permission: Permissions.USE,
});
const hasMultiConvoAccess = useHasAccess({
permissionType: PermissionTypes.MULTI_CONVO,
permission: Permissions.USE,
});
const latestMessage = useRecoilValue(store.latestMessageFamily(index));
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 (atCommandEnabled && shouldTriggerCommand(textAreaRef, '@')) {
setShowMentionPopover(true);
}
}, [textAreaRef, setShowMentionPopover, atCommandEnabled]);
const handlePlusCommand = useCallback(() => {
if (!hasMultiConvoAccess || !plusCommandEnabled) {
return;
}
if (shouldTriggerCommand(textAreaRef, '+')) {
setShowPlusPopover(true);
}
}, [textAreaRef, setShowPlusPopover, plusCommandEnabled, hasMultiConvoAccess]);
const handlePromptsCommand = useCallback(() => {
if (!hasPromptsAccess || !slashCommandEnabled) {
return;
}
if (shouldTriggerCommand(textAreaRef, '/')) {
setShowPromptsPopover(true);
}
}, [textAreaRef, hasPromptsAccess, setShowPromptsPopover, slashCommandEnabled]);
const commandHandlers = useMemo(
() => ({
'@': handleAtCommand,
'+': handlePlusCommand,
'/': handlePromptsCommand,
}),
[handleAtCommand, handlePlusCommand, handlePromptsCommand],
);
const handleUpArrow = useCallback(
(event: React.KeyboardEvent<HTMLTextAreaElement>) => {
if (!latestMessage) {
return;
}
const element = document.getElementById(`edit-${latestMessage.parentMessageId}`);
if (!element) {
return;
}
event.preventDefault();
element.click();
},
[latestMessage],
);
/**
* Main key up handler.
*/
const handleKeyUp = useCallback(
(event: React.KeyboardEvent<HTMLTextAreaElement>) => {
const text = textAreaRef.current?.value;
if (event.key === 'ArrowUp' && text?.length === 0) {
handleUpArrow(event);
return;
}
if (typeof text !== 'string' || text.length === 0) {
return;
}
if (invalidKeys[event.key as keyof typeof invalidKeys]) {
return;
}
const firstChar = text[0];
const handler = commandHandlers[firstChar as keyof typeof commandHandlers];
if (typeof handler === 'function') {
handler();
}
},
[textAreaRef, commandHandlers, handleUpArrow],
);
return handleKeyUp;
};
export default useHandleKeyUp;
|