diff --git a/frontend/app/modals/userinputmodal.tsx b/frontend/app/modals/userinputmodal.tsx index fc97a185ee..a045185918 100644 --- a/frontend/app/modals/userinputmodal.tsx +++ b/frontend/app/modals/userinputmodal.tsx @@ -13,6 +13,7 @@ const UserInputModal = (userInputRequest: UserInputRequest) => { const [responseText, setResponseText] = useState(""); const [countdown, setCountdown] = useState(Math.floor(userInputRequest.timeoutms / 1000)); const checkboxRef = useRef(null); + const [capsLockOn, setCapsLockOn] = useState(false); const handleSendErrResponse = useCallback(() => { fireAndForget(() => @@ -73,11 +74,15 @@ const UserInputModal = (userInputRequest: UserInputRequest) => { handleSubmit(); return true; } - return false; + return false; }, [handleSendErrResponse, handleSubmit] ); + const handleCapsLockCheck = useCallback((e: React.KeyboardEvent) => { + setCapsLockOn(e.getModifierState("CapsLock") ?? false); + }, []); + const queryText = useMemo(() => { if (userInputRequest.markdown) { return ; @@ -97,10 +102,21 @@ const UserInputModal = (userInputRequest: UserInputRequest) => { maxLength={400} className="resize-none bg-panel rounded-md border border-border py-1.5 pl-4 min-h-[30px] text-inherit cursor-text focus:ring-2 focus:ring-accent focus:outline-none" autoFocus={true} - onKeyDown={(e) => keyutil.keydownWrapper(handleKeyDown)(e)} + onKeyDown={(e) => { + handleCapsLockCheck(e); + keyutil.keydownWrapper(handleKeyDown)(e); + }} + onKeyUp={handleCapsLockCheck} /> ); - }, [userInputRequest.responsetype, userInputRequest.publictext, responseText, handleKeyDown, setResponseText]); + }, [ + userInputRequest.responsetype, + userInputRequest.publictext, + responseText, + handleKeyDown, + setResponseText, + handleCapsLockCheck, + ]); const optionalCheckbox = useMemo(() => { if (userInputRequest.checkboxmsg == "") { @@ -115,7 +131,9 @@ const UserInputModal = (userInputRequest: UserInputRequest) => { className="accent-accent cursor-pointer" ref={checkboxRef} /> - + ); @@ -159,6 +177,9 @@ const UserInputModal = (userInputRequest: UserInputRequest) => {
{queryText} {inputBox} + {!userInputRequest.publictext && capsLockOn && ( +
Caps Lock is ON
+ )} {optionalCheckbox}