Merge branch 'feat/single-contact-id' into fix/closed-channels-history

apps/meteor/client/views/omnichannel/contactHistory/MessageList/ContactHistoryMessagesList.tsx

@@ -12,7 +12,7 @@ import {
 	TextInput,
 	Throbber,
 } from '@rocket.chat/fuselage';
-import { useResizeObserver } from '@rocket.chat/fuselage-hooks';
+import { useDebouncedValue, 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';
@@ -50,11 +50,19 @@ const ContactHistoryMessagesList = ({ chatId, onClose, onOpenRoom }: ContactHist
 		debounceDelay: 200,
 	});
 
-	const { itemsList: messageList, loadMoreItems } = useHistoryMessageList(
-		useMemo(() => ({ roomId: chatId, filter: text }), [chatId, text]),
-		userId,
+	const query = useDebouncedValue(
+		useMemo(
+			() => ({
+				roomId: chatId,
+				filter: text,
+			}),
+			[text, chatId],
+		),
+		500,
 	);
 
+	const { itemsList: messageList, loadMoreItems } = useHistoryMessageList(query, userId);
+
 	const handleSearchChange = (event: ChangeEvent<HTMLInputElement>): void => {
 		setText(event.currentTarget.value);
 	};

apps/meteor/client/views/omnichannel/directory/chats/ChatsTable/ChatsTableFilter.tsx

@@ -17,7 +17,7 @@ const ChatsTableFilter = () => {
 	const removeClosedChats = useMethod('livechat:removeAllClosedRooms');
 	const queryClient = useQueryClient();
 
-	const { filtersQuery, displayFilters, setFiltersQuery, removeFilter } = useChatsContext();
+	const { filtersQuery, displayFilters, setFiltersQuery, removeFilter, textInputRef } = useChatsContext();
 
 	const handleRemoveAllClosed = useEffectEvent(async () => {
 		const onDeleteAll = async () => {
@@ -60,6 +60,7 @@ const ChatsTableFilter = () => {
 	return (
 		<>
 			<FilterByText
+				ref={textInputRef}
 				value={filtersQuery.guest}
 				onChange={(event) => setFiltersQuery((prevState) => ({ ...prevState, guest: event.target.value }))}
 			>

apps/meteor/client/views/omnichannel/directory/contexts/ChatsContext.ts

@@ -1,4 +1,4 @@
-import type { SetStateAction } from 'react';
+import type { RefObject, SetStateAction } from 'react';
 import { createContext, useContext } from 'react';
 
 export type ChatsFiltersQuery = {
@@ -37,6 +37,7 @@ export type ChatsContextValue = {
 	};
 	removeFilter: (filter: keyof ChatsFiltersQuery) => void;
 	hasAppliedFilters: boolean;
+	textInputRef: RefObject<HTMLInputElement> | null;
 };
 
 export const ChatsContext = createContext<ChatsContextValue>({
@@ -54,6 +55,7 @@ export const ChatsContext = createContext<ChatsContextValue>({
 	},
 	removeFilter: () => undefined,
 	hasAppliedFilters: false,
+	textInputRef: null,
 });
 
 export const useChatsContext = (): ChatsContextValue => {

apps/meteor/client/views/omnichannel/directory/providers/ChatsProvider.tsx

@@ -1,6 +1,6 @@
 import { useLocalStorage } from '@rocket.chat/fuselage-hooks';
 import type { ReactNode } from 'react';
-import React, { useCallback, useMemo } from 'react';
+import React, { useCallback, useMemo, useRef } from 'react';
 
 import { ChatsContext, initialValues } from '../contexts/ChatsContext';
 import { useDisplayFilters } from '../hooks/useDisplayFilters';
@@ -10,6 +10,7 @@ type ChatsProviderProps = {
 };
 
 const ChatsProvider = ({ children }: ChatsProviderProps) => {
+	const textInputRef = useRef<HTMLInputElement>(null);
 	const [filtersQuery, setFiltersQuery] = useLocalStorage('conversationsQuery', initialValues);
 	const displayFilters = useDisplayFilters(filtersQuery);
 
@@ -29,7 +30,12 @@ const ChatsProvider = ({ children }: ChatsProviderProps) => {
 	);
 
 	const removeFilter = useCallback(
-		(filter: keyof typeof initialValues) => setFiltersQuery((prevState) => ({ ...prevState, [filter]: initialValues[filter] })),
+		(filter: keyof typeof initialValues) => {
+			if (filter === 'guest' && textInputRef.current) {
+				textInputRef.current.focus();
+			}
+			return setFiltersQuery((prevState) => ({ ...prevState, [filter]: initialValues[filter] }));
+		},
 		[setFiltersQuery],
 	);
 
@@ -41,6 +47,7 @@ const ChatsProvider = ({ children }: ChatsProviderProps) => {
 			displayFilters,
 			removeFilter,
 			hasAppliedFilters: Object.values(displayFilters).filter((value) => value !== undefined).length > 0,
+			textInputRef,
 		}),
 		[displayFilters, filtersQuery, removeFilter, resetFiltersQuery, setFiltersQuery],
 	);