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: Optimize Aria-Live Announcements for macOS VoiceOver (#3851)

Browse source
This commit is contained in:
Danny Avila 2024-08-30 00:14:37 -04:00 • committed by GitHub
parent 757b6d3275
commit dc40e577af
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
5 changed files with 59 additions and 170 deletions
Download patch file Download diff file Expand all files Collapse all files

43
client/src/hooks/SSE/useEventHandlers.ts
View file

@ -1,5 +1,5 @@
import { v4 } from 'uuid';
import { useCallback } from 'react';
import { useCallback, useRef } from 'react';
import { useSetRecoilState } from 'recoil';
import { useParams } from 'react-router-dom';
import { useQueryClient } from '@tanstack/react-query';
@ -54,6 +54,8 @@ export type EventHandlerParams = {
resetLatestMessage?: Resetter;
};
const MESSAGE_UPDATE_INTERVAL = 7000;
export default function useEventHandlers({
genTitle,
setMessages,
@ -68,8 +70,9 @@ export default function useEventHandlers({
}: EventHandlerParams) {
const queryClient = useQueryClient();
const setAbortScroll = useSetRecoilState(store.abortScroll);
const { announcePolite, announceAssertive } = useLiveAnnouncer();
const { announcePolite } = useLiveAnnouncer();
const lastAnnouncementTimeRef = useRef(Date.now());
const { conversationId: paramId } = useParams();
const { token } = useAuthContext();
@ -87,11 +90,11 @@ export default function useEventHandlers({
} = submission;
const text = data ?? '';
setIsSubmitting(true);
if (text.length > 0) {
announcePolite({
message: text,
isStream: true,
});
const currentTime = Date.now();
if (currentTime - lastAnnouncementTimeRef.current > MESSAGE_UPDATE_INTERVAL) {
announcePolite({ message: 'composing', isStatus: true });
lastAnnouncementTimeRef.current = currentTime;
}
if (isRegenerate) {
@ -187,9 +190,9 @@ export default function useEventHandlers({
},
]);
announceAssertive({
announcePolite({
message: 'start',
id: `start-${Date.now()}`,
isStatus: true,
});
let update = {} as TConversation;
@ -245,8 +248,8 @@ export default function useEventHandlers({
queryClient,
setMessages,
isAddedRequest,
announcePolite,
setConversation,
announceAssertive,
setShowStopButton,
resetLatestMessage,
],
@ -267,9 +270,10 @@ export default function useEventHandlers({
}
const { conversationId, parentMessageId } = userMessage;
announceAssertive({
lastAnnouncementTimeRef.current = Date.now();
announcePolite({
message: 'start',
id: `start-${Date.now()}`,
isStatus: true,
});
let update = {} as TConversation;
@ -323,8 +327,8 @@ export default function useEventHandlers({
queryClient,
setAbortScroll,
isAddedRequest,
announcePolite,
setConversation,
announceAssertive,
resetLatestMessage,
],
);
@ -345,16 +349,13 @@ export default function useEventHandlers({
/* a11y announcements */
announcePolite({
message: responseMessage?.text ?? '',
isComplete: true,
message: 'end',
isStatus: true,
});
setTimeout(() => {
announcePolite({
message: 'end',
id: `end-${Date.now()}`,
});
}, 100);
announcePolite({
message: responseMessage?.text ?? '',
});
/* Update messages; if assistants endpoint, client doesn't receive responseMessage */
if (runMessages) {