diff --git a/apps/meteor/client/views/omnichannel/contactHistory/MessageList/ContactHistoryMessagesList.tsx b/apps/meteor/client/views/omnichannel/contactHistory/MessageList/ContactHistoryMessagesList.tsx index 70e2619be58e..975190d59650 100644 --- a/apps/meteor/client/views/omnichannel/contactHistory/MessageList/ContactHistoryMessagesList.tsx +++ b/apps/meteor/client/views/omnichannel/contactHistory/MessageList/ContactHistoryMessagesList.tsx @@ -12,7 +12,8 @@ import { TextInput, Throbber, } from '@rocket.chat/fuselage'; -import { useSetting, useTranslation, useUserPreference } from '@rocket.chat/ui-contexts'; +import { useResizeObserver } from '@rocket.chat/fuselage-hooks'; +import { useSetting, useTranslation, useUserPreference, useUserId } from '@rocket.chat/ui-contexts'; import type { ChangeEvent, ReactElement } from 'react'; import React, { useMemo, useState } from 'react'; import { Virtuoso } from 'react-virtuoso'; @@ -43,9 +44,15 @@ const ContactHistoryMessagesList = ({ chatId, onClose, onOpenRoom }: ContactHist const t = useTranslation(); const [text, setText] = useState(''); const showUserAvatar = !!useUserPreference('displayAvatars'); + const userId = useUserId(); + + const { ref, contentBoxSize: { inlineSize = 378, blockSize = 1 } = {} } = useResizeObserver({ + debounceDelay: 200, + }); const { itemsList: messageList, loadMoreItems } = useHistoryMessageList( useMemo(() => ({ roomId: chatId, filter: text }), [chatId, text]), + userId, ); const handleSearchChange = (event: ChangeEvent): void => { @@ -59,7 +66,7 @@ const ContactHistoryMessagesList = ({ chatId, onClose, onOpenRoom }: ContactHist <> - {t('Chat_History')} + {t('Conversation')} @@ -97,14 +104,22 @@ const ContactHistoryMessagesList = ({ chatId, onClose, onOpenRoom }: ContactHist )} {phase !== AsyncStatePhase.LOADING && totalItemCount === 0 && } - + {!error && totalItemCount > 0 && history.length > 0 && ( undefined - : (start): unknown => loadMoreItems(start, Math.min(50, totalItemCount - start)) + : (start): void => { + loadMoreItems(start, Math.min(50, totalItemCount - start)); + } } overscan={25} data={messages} diff --git a/apps/meteor/client/views/omnichannel/contactHistory/MessageList/useHistoryMessageList.ts b/apps/meteor/client/views/omnichannel/contactHistory/MessageList/useHistoryMessageList.ts index cd231b84e8dd..ba450cda05e3 100644 --- a/apps/meteor/client/views/omnichannel/contactHistory/MessageList/useHistoryMessageList.ts +++ b/apps/meteor/client/views/omnichannel/contactHistory/MessageList/useHistoryMessageList.ts @@ -1,9 +1,12 @@ +import type { IUser } from '@rocket.chat/core-typings'; import { useEndpoint } from '@rocket.chat/ui-contexts'; -import { useCallback, useState } from 'react'; +import { useCallback, useMemo, useState } from 'react'; import { useScrollableMessageList } from '../../../../hooks/lists/useScrollableMessageList'; +import { useStreamUpdatesForMessageList } from '../../../../hooks/lists/useStreamUpdatesForMessageList'; import { useComponentDidUpdate } from '../../../../hooks/useComponentDidUpdate'; import { MessageList } from '../../../../lib/lists/MessageList'; +import { getConfig } from '../../../../lib/utils/getConfig'; type HistoryMessageListOptions = { filter: string; @@ -12,6 +15,7 @@ type HistoryMessageListOptions = { export const useHistoryMessageList = ( options: HistoryMessageListOptions, + uid: IUser['_id'] | null, ): { itemsList: MessageList; initialItemCount: number; @@ -42,7 +46,12 @@ export const useHistoryMessageList = ( [getMessages, options.filter], ); - const { loadMoreItems, initialItemCount } = useScrollableMessageList(itemsList, fetchMessages, 25); + const { loadMoreItems, initialItemCount } = useScrollableMessageList( + itemsList, + fetchMessages, + useMemo(() => parseInt(`${getConfig('historyMessageListSize', 10)}`), []), + ); + useStreamUpdatesForMessageList(itemsList, uid, options.roomId); return { itemsList, diff --git a/apps/meteor/client/views/omnichannel/directory/chats/ChatTable.tsx b/apps/meteor/client/views/omnichannel/directory/chats/ChatTable.tsx index 95766c2887f8..46b5b6784ce0 100644 --- a/apps/meteor/client/views/omnichannel/directory/chats/ChatTable.tsx +++ b/apps/meteor/client/views/omnichannel/directory/chats/ChatTable.tsx @@ -32,7 +32,6 @@ const ChatTable = () => { const query = useMemo( () => ({ sort: `{ "${sortBy}": ${sortDirection === 'asc' ? 1 : -1} }`, - open: false, roomName: text || '', agents: userIdLoggedIn ? [userIdLoggedIn] : [], ...(itemsPerPage && { count: itemsPerPage }),