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

🖱️ fix: Message Scrolling UX; refactor: Frontend UX/DX Optimizations (#3733)

Browse source 
* refactor(DropdownPopup): set MenuButton `as` prop to `div` to prevent React warning: validateDOMNesting(...): <button> cannot appear as a descendant of <button>

* refactor: memoize ChatGroupItem and ControlCombobox components

* refactor(OpenAIClient): await stream process finish before finalCompletion event handling

* refactor: update useSSE.ts typing to handle null and undefined values in data properties

* refactor: set abort scroll to false on SSE connection open

* refactor: improve logger functionality with filter support

* refactor: update handleScroll typing in MessageContainer component

* refactor: update logger.dir call in useChatFunctions to log 'message_stream' tag format instead of the entire submission object as first arg

* refactor: fix null check for message object in Message component

* refactor: throttle handleScroll to help prevent auto-scrolling issues on new message requests; fix type issues within useMessageProcess

* refactor: add abortScrollByIndex logging effect

* refactor: update MessageIcon and Icon components to use React.memo for performance optimization

* refactor: memoize ConvoIconURL component for performance optimization

* chore: type issues

* chore: update package version to 0.7.414
This commit is contained in:
Danny Avila 2024-08-21 18:18:45 -04:00 • committed by GitHub
parent ba9c351435
commit 98b437edd5
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
20 changed files with 282 additions and 176 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -14,7 +14,7 @@ import {
import type {
TMessage,
TConversation,
TSubmission,
EventSubmission,
ConversationData,
} from 'librechat-data-provider';
import type { SetterOrUpdater, Resetter } from 'recoil';
@ -76,7 +76,7 @@ export default function useEventHandlers({
const contentHandler = useContentHandler({ setMessages, getMessages });
const messageHandler = useCallback(
(data: string | undefined, submission: TSubmission) => {
(data: string | undefined, submission: EventSubmission) => {
const {
messages,
userMessage,
@ -122,7 +122,7 @@ export default function useEventHandlers({
);
const cancelHandler = useCallback(
(data: TResData, submission: TSubmission) => {
(data: TResData, submission: EventSubmission) => {
const { requestMessage, responseMessage, conversation } = data;
const { messages, isRegenerate = false } = submission;
@ -171,7 +171,7 @@ export default function useEventHandlers({
);
const syncHandler = useCallback(
(data: TSyncData, submission: TSubmission) => {
(data: TSyncData, submission: EventSubmission) => {
const { conversationId, thread_id, responseMessage, requestMessage } = data;
const { initialResponse, messages: _messages, userMessage } = submission;
@ -252,7 +252,7 @@ export default function useEventHandlers({
);
const createdHandler = useCallback(
(data: TResData, submission: TSubmission) => {
(data: TResData, submission: EventSubmission) => {
const { messages, userMessage, isRegenerate = false } = submission;
const initialResponse = {
...submission.initialResponse,
@ -329,7 +329,7 @@ export default function useEventHandlers({
);
const finalHandler = useCallback(
(data: TFinalResData, submission: TSubmission) => {
(data: TFinalResData, submission: EventSubmission) => {
const { requestMessage, responseMessage, conversation, runMessages } = data;
const { messages, conversation: submissionConvo, isRegenerate = false } = submission;
@ -418,7 +418,7 @@ export default function useEventHandlers({
);
const errorHandler = useCallback(
({ data, submission }: { data?: TResData; submission: TSubmission }) => {
({ data, submission }: { data?: TResData; submission: EventSubmission }) => {
const { messages, userMessage, initialResponse } = submission;
setCompleted((prev) => new Set(prev.add(initialResponse.messageId)));
@ -500,7 +500,7 @@ export default function useEventHandlers({
);
const abortConversation = useCallback(
async (conversationId = '', submission: TSubmission, messages?: TMessage[]) => {
async (conversationId = '', submission: EventSubmission, messages?: TMessage[]) => {
const runAbortKey = `${conversationId}:${messages?.[messages.length - 1]?.messageId ?? ''}`;
console.log({ conversationId, submission, messages, runAbortKey });
const { endpoint: _endpoint, endpointType } = submission.conversation || {};