From 9cf079721b21d077ac36fc1c503bdee675ccf359 Mon Sep 17 00:00:00 2001
From: Hugo Costa <hugocarreiracosta@gmail.com>
Date: Mon, 14 Oct 2024 19:21:55 -0300
Subject: [PATCH 01/12] feat: new E2EE composer hint (#33283)

---
 .changeset/many-files-turn.md                 |  11 ++
 .../views/room/composer/ComposerContainer.tsx |   4 +-
 .../ComposerFederation/ComposerFederation.tsx |   5 +-
 .../views/room/composer/ComposerMessage.tsx   |   5 +-
 .../room/composer/messageBox/MessageBox.tsx   |  26 ++---
 .../messageBox/MessageBoxHint.spec.tsx        | 109 ++++++++++++++++++
 .../composer/messageBox/MessageBoxHint.tsx    |  60 ++++++++++
 packages/i18n/src/locales/en.i18n.json        |   1 +
 .../MessageComposer.stories.tsx               |  74 +++++++-----
 .../MessageComposerHint.stories.tsx           |  31 +++++
 10 files changed, 273 insertions(+), 53 deletions(-)
 create mode 100644 .changeset/many-files-turn.md
 create mode 100644 apps/meteor/client/views/room/composer/messageBox/MessageBoxHint.spec.tsx
 create mode 100644 apps/meteor/client/views/room/composer/messageBox/MessageBoxHint.tsx
 create mode 100644 packages/ui-composer/src/MessageComposer/MessageComposerHint.stories.tsx

diff --git a/.changeset/many-files-turn.md b/.changeset/many-files-turn.md
new file mode 100644
index 000000000000..6f53374ddd86
--- /dev/null
+++ b/.changeset/many-files-turn.md
@@ -0,0 +1,11 @@
+---
+"@rocket.chat/meteor": minor
+"@rocket.chat/i18n": patch
+"@rocket.chat/ui-composer": minor
+---
+
+Adds a warning to inform users they are about to send unencrypted messages in an E2E Encrypted room if they have the `Unencrypted messages in encrypted rooms` setting enabled.
+
+
+
+
diff --git a/apps/meteor/client/views/room/composer/ComposerContainer.tsx b/apps/meteor/client/views/room/composer/ComposerContainer.tsx
index 225ac00e13c7..7d3e09847b34 100644
--- a/apps/meteor/client/views/room/composer/ComposerContainer.tsx
+++ b/apps/meteor/client/views/room/composer/ComposerContainer.tsx
@@ -42,7 +42,7 @@ const ComposerContainer = ({ children, ...props }: ComposerMessageProps): ReactE
 	}
 
 	if (isFederation) {
-		return <ComposerFederation room={room} {...props} />;
+		return <ComposerFederation {...props} />;
 	}
 
 	if (isAnonymous) {
@@ -68,7 +68,7 @@ const ComposerContainer = ({ children, ...props }: ComposerMessageProps): ReactE
 	return (
 		<>
 			{children}
-			<ComposerMessage readOnly={room.ro} {...props} />
+			<ComposerMessage {...props} />
 		</>
 	);
 };
diff --git a/apps/meteor/client/views/room/composer/ComposerFederation/ComposerFederation.tsx b/apps/meteor/client/views/room/composer/ComposerFederation/ComposerFederation.tsx
index 497e4e9ff2c4..cb42865a1a98 100644
--- a/apps/meteor/client/views/room/composer/ComposerFederation/ComposerFederation.tsx
+++ b/apps/meteor/client/views/room/composer/ComposerFederation/ComposerFederation.tsx
@@ -1,4 +1,3 @@
-import type { IRoom } from '@rocket.chat/core-typings';
 import { useSetting } from '@rocket.chat/ui-contexts';
 import React from 'react';
 import type { ReactElement } from 'react';
@@ -9,7 +8,7 @@ import ComposerMessage from '../ComposerMessage';
 import ComposerFederationDisabled from './ComposerFederationDisabled';
 import ComposerFederationJoinRoomDisabled from './ComposerFederationJoinRoomDisabled';
 
-const ComposerFederation = ({ room, subscription, children, ...props }: ComposerMessageProps & { room: IRoom }): ReactElement => {
+const ComposerFederation = ({ subscription, children, ...props }: ComposerMessageProps): ReactElement => {
 	const federationEnabled = useSetting('Federation_Matrix_enabled') === true;
 	const federationModuleEnabled = useHasLicenseModule('federation') === true;
 
@@ -24,7 +23,7 @@ const ComposerFederation = ({ room, subscription, children, ...props }: Composer
 	return (
 		<>
 			{children}
-			<ComposerMessage readOnly={room.ro} {...props} />
+			<ComposerMessage {...props} />
 		</>
 	);
 };
diff --git a/apps/meteor/client/views/room/composer/ComposerMessage.tsx b/apps/meteor/client/views/room/composer/ComposerMessage.tsx
index 790b1739bde7..3f37f7a40443 100644
--- a/apps/meteor/client/views/room/composer/ComposerMessage.tsx
+++ b/apps/meteor/client/views/room/composer/ComposerMessage.tsx
@@ -14,7 +14,6 @@ export type ComposerMessageProps = {
 	tmid?: IMessage['_id'];
 	children?: ReactNode;
 	subscription?: ISubscription;
-	readOnly?: boolean;
 	tshow?: boolean;
 	previewUrls?: string[];
 	onResize?: () => void;
@@ -25,7 +24,7 @@ export type ComposerMessageProps = {
 	onUploadFiles?: (files: readonly File[]) => void;
 };
 
-const ComposerMessage = ({ tmid, readOnly, onSend, ...props }: ComposerMessageProps): ReactElement => {
+const ComposerMessage = ({ tmid, onSend, ...props }: ComposerMessageProps): ReactElement => {
 	const chat = useChat();
 	const room = useRoom();
 	const dispatchToastMessage = useToastMessageDispatch();
@@ -89,7 +88,7 @@ const ComposerMessage = ({ tmid, readOnly, onSend, ...props }: ComposerMessagePr
 		return <ComposerSkeleton />;
 	}
 
-	return <MessageBox readOnly={readOnly ?? false} key={room._id} tmid={tmid} {...composerProps} showFormattingTips={true} {...props} />;
+	return <MessageBox key={room._id} tmid={tmid} {...composerProps} showFormattingTips={true} {...props} />;
 };
 
 export default memo(ComposerMessage);
diff --git a/apps/meteor/client/views/room/composer/messageBox/MessageBox.tsx b/apps/meteor/client/views/room/composer/messageBox/MessageBox.tsx
index 00d9c66a2046..1577cc50dc24 100644
--- a/apps/meteor/client/views/room/composer/messageBox/MessageBox.tsx
+++ b/apps/meteor/client/views/room/composer/messageBox/MessageBox.tsx
@@ -9,14 +9,12 @@ import {
 	MessageComposerToolbar,
 	MessageComposerActionsDivider,
 	MessageComposerToolbarSubmit,
-	MessageComposerHint,
 	MessageComposerButton,
 } from '@rocket.chat/ui-composer';
 import { useTranslation, useUserPreference, useLayout, useSetting } from '@rocket.chat/ui-contexts';
 import { useMutation } from '@tanstack/react-query';
 import type { ReactElement, MouseEventHandler, FormEvent, ClipboardEventHandler, MouseEvent } from 'react';
 import React, { memo, useRef, useReducer, useCallback } from 'react';
-import { Trans } from 'react-i18next';
 import { useSubscription } from 'use-subscription';
 
 import { createComposerAPI } from '../../../../../app/ui-message/client/messageBox/createComposerAPI';
@@ -42,6 +40,7 @@ import { useEnablePopupPreview } from '../hooks/useEnablePopupPreview';
 import { useMessageComposerMergedRefs } from '../hooks/useMessageComposerMergedRefs';
 import MessageBoxActionsToolbar from './MessageBoxActionsToolbar';
 import MessageBoxFormattingToolbar from './MessageBoxFormattingToolbar';
+import MessageBoxHint from './MessageBoxHint';
 import MessageBoxReplies from './MessageBoxReplies';
 import { useMessageBoxAutoFocus } from './hooks/useMessageBoxAutoFocus';
 import { useMessageBoxPlaceholder } from './hooks/useMessageBoxPlaceholder';
@@ -79,7 +78,6 @@ const getEmptyArray = () => a;
 
 type MessageBoxProps = {
 	tmid?: IMessage['_id'];
-	readOnly: boolean;
 	onSend?: (params: { value: string; tshow?: boolean; previewUrls?: string[]; isSlashCommandAllowed?: boolean }) => Promise<void>;
 	onJoin?: () => Promise<void>;
 	onResize?: () => void;
@@ -104,7 +102,6 @@ const MessageBox = ({
 	onUploadFiles,
 	onEscape,
 	onTyping,
-	readOnly,
 	tshow,
 	previewUrls,
 }: MessageBoxProps): ReactElement => {
@@ -385,21 +382,12 @@ const MessageBox = ({
 					suspended={suspended}
 				/>
 			)}
-			{isEditing && (
-				<MessageComposerHint
-					icon='pencil'
-					helperText={
-						!isMobile ? (
-							<Trans i18nKey='Editing_message_hint'>
-								<strong>esc</strong> to cancel · <strong>enter</strong> to save
-							</Trans>
-						) : undefined
-					}
-				>
-					{t('Editing_message')}
-				</MessageComposerHint>
-			)}
-			{readOnly && !isEditing && <MessageComposerHint>{t('This_room_is_read_only')}</MessageComposerHint>}
+			<MessageBoxHint
+				isEditing={isEditing}
+				e2eEnabled={e2eEnabled}
+				unencryptedMessagesAllowed={unencryptedMessagesAllowed}
+				isMobile={isMobile}
+			/>
 			{isRecordingVideo && <VideoMessageRecorder reference={messageComposerRef} rid={room._id} tmid={tmid} />}
 			<MessageComposer ref={messageComposerRef} variant={isEditing ? 'editing' : undefined}>
 				{isRecordingAudio && <AudioMessageRecorder rid={room._id} isMicrophoneDenied={isMicrophoneDenied} />}
diff --git a/apps/meteor/client/views/room/composer/messageBox/MessageBoxHint.spec.tsx b/apps/meteor/client/views/room/composer/messageBox/MessageBoxHint.spec.tsx
new file mode 100644
index 000000000000..4ebe89264d4e
--- /dev/null
+++ b/apps/meteor/client/views/room/composer/messageBox/MessageBoxHint.spec.tsx
@@ -0,0 +1,109 @@
+import { mockAppRoot } from '@rocket.chat/mock-providers';
+import { render, screen } from '@testing-library/react';
+import React from 'react';
+
+import { E2ERoomState } from '../../../../../app/e2e/client/E2ERoomState';
+import { useRoom } from '../../contexts/RoomContext';
+import { useE2EERoomState } from '../../hooks/useE2EERoomState';
+import MessageBoxHint from './MessageBoxHint';
+
+jest.mock('../../hooks/useE2EERoomState', () => ({
+	useE2EERoomState: jest.fn(),
+}));
+
+jest.mock('../../contexts/RoomContext', () => ({
+	useRoom: jest.fn(),
+}));
+
+const renderOptions = {
+	wrapper: mockAppRoot()
+		.withTranslations('en', 'core', {
+			Editing_message: 'Editing message',
+			Editing_message_hint: '<strong>esc</strong> to cancel · <strong>enter</strong> to save',
+			This_room_is_read_only: 'This room is read only',
+			E2EE_Composer_Unencrypted_Message: "You're sending an unencrypted message",
+		})
+		.build(),
+	legacyRoot: true,
+};
+
+describe('MessageBoxHint', () => {
+	beforeEach(() => {
+		(useRoom as jest.Mock).mockReturnValue({ _id: 'roomId', ro: false });
+		(useE2EERoomState as jest.Mock).mockReturnValue(E2ERoomState.WAITING_KEYS);
+	});
+
+	describe('Editing message', () => {
+		it('renders hint text when isEditing is true', () => {
+			render(<MessageBoxHint isEditing={true} isMobile={false} />, renderOptions);
+			expect(screen.getByText('Editing message')).toBeInTheDocument();
+			expect(screen.getByText('Editing message')).toBeInTheDocument();
+		});
+
+		it('renders helpText when isEditing is true and it is not mobile', () => {
+			render(<MessageBoxHint isEditing={true} isMobile={false} />, renderOptions);
+			expect(screen.getByText(/to save/)).toBeInTheDocument();
+		});
+
+		it('renders hint without helpText when isEditing is true and it is mobile', () => {
+			render(<MessageBoxHint isEditing={true} isMobile={true} />, renderOptions);
+			expect(screen.queryByText(/to save/)).not.toBeInTheDocument();
+		});
+	});
+
+	describe('Read only', () => {
+		beforeEach(() => {
+			(useRoom as jest.Mock).mockReturnValue({ _id: 'roomId', ro: true });
+		});
+
+		it('renders hint text when Read only is true', () => {
+			render(<MessageBoxHint />, renderOptions);
+			expect(screen.getByText('This room is read only')).toBeInTheDocument();
+		});
+	});
+
+	describe('Unencrypted message', () => {
+		it('renders hint text when E2EE room with unencrypted messages is true', () => {
+			render(<MessageBoxHint e2eEnabled={true} unencryptedMessagesAllowed={true} />, renderOptions);
+			expect(screen.getByText("You're sending an unencrypted message")).toBeInTheDocument();
+		});
+
+		it('renders "Read only" hint text when E2EE room with unencrypted messages is true', () => {
+			(useRoom as jest.Mock).mockReturnValue({ _id: 'roomId', ro: true });
+
+			render(<MessageBoxHint e2eEnabled={true} unencryptedMessagesAllowed={true} />, renderOptions);
+			expect(screen.getByText('This room is read only')).toBeInTheDocument();
+		});
+
+		it('renders "Editing message" hint text when isEditing is truem, E2EE is enabled and unencrypted messages is true', () => {
+			(useRoom as jest.Mock).mockReturnValue({ _id: 'roomId', ro: true });
+
+			render(<MessageBoxHint isEditing={true} e2eEnabled={true} unencryptedMessagesAllowed={true} />, renderOptions);
+			expect(screen.getByText('Editing message')).toBeInTheDocument();
+		});
+
+		it('does not renders hint text when E2ERoomState is READY', () => {
+			(useE2EERoomState as jest.Mock).mockReturnValue(E2ERoomState.READY);
+
+			render(<MessageBoxHint e2eEnabled={true} unencryptedMessagesAllowed={true} />, renderOptions);
+			expect(screen.queryByText("You're sending an unencrypted message")).not.toBeInTheDocument();
+		});
+
+		it('does not renders hint text when E2ERoomState is DISABLED', () => {
+			(useE2EERoomState as jest.Mock).mockReturnValue(E2ERoomState.DISABLED);
+
+			render(<MessageBoxHint e2eEnabled={true} unencryptedMessagesAllowed={true} />, renderOptions);
+			expect(screen.queryByText("You're sending an unencrypted message")).not.toBeInTheDocument();
+		});
+
+		it('does not renders hint text when unencrypted messages is true and E2EE is disabled', () => {
+			render(<MessageBoxHint e2eEnabled={false} unencryptedMessagesAllowed={true} />, renderOptions);
+			expect(screen.queryByText("You're sending an unencrypted message")).not.toBeInTheDocument();
+		});
+
+		it('does not renders hint text when unencrypted messages is false and E2EE is enabled', () => {
+			render(<MessageBoxHint e2eEnabled={true} unencryptedMessagesAllowed={false} />, renderOptions);
+			expect(screen.queryByText("You're sending an unencrypted message")).not.toBeInTheDocument();
+		});
+	});
+});
diff --git a/apps/meteor/client/views/room/composer/messageBox/MessageBoxHint.tsx b/apps/meteor/client/views/room/composer/messageBox/MessageBoxHint.tsx
new file mode 100644
index 000000000000..077fecc21516
--- /dev/null
+++ b/apps/meteor/client/views/room/composer/messageBox/MessageBoxHint.tsx
@@ -0,0 +1,60 @@
+import { MessageComposerHint } from '@rocket.chat/ui-composer';
+import type { ReactElement } from 'react';
+import React, { memo } from 'react';
+import { useTranslation, Trans } from 'react-i18next';
+
+import { E2ERoomState } from '../../../../../app/e2e/client/E2ERoomState';
+import { useRoom } from '../../contexts/RoomContext';
+import { useE2EERoomState } from '../../hooks/useE2EERoomState';
+
+type MessageBoxHintProps = {
+	isEditing?: boolean;
+	e2eEnabled?: boolean;
+	unencryptedMessagesAllowed?: boolean;
+	isMobile?: boolean;
+};
+
+const MessageBoxHint = ({ isEditing, e2eEnabled, unencryptedMessagesAllowed, isMobile }: MessageBoxHintProps): ReactElement | null => {
+	const room = useRoom();
+	const isReadOnly = room?.ro || false;
+	const { t } = useTranslation();
+
+	const e2eRoomState = useE2EERoomState(room._id);
+
+	const isUnencryptedHintVisible =
+		e2eEnabled &&
+		unencryptedMessagesAllowed &&
+		e2eRoomState &&
+		e2eRoomState !== E2ERoomState.READY &&
+		e2eRoomState !== E2ERoomState.DISABLED &&
+		!isEditing &&
+		!isReadOnly;
+
+	if (!isEditing && !isUnencryptedHintVisible && !isReadOnly) {
+		return null;
+	}
+
+	const renderHintText = (): string => {
+		if (isEditing) {
+			return t('Editing_message');
+		}
+		if (isReadOnly) {
+			return t('This_room_is_read_only');
+		}
+		if (isUnencryptedHintVisible) {
+			return t('E2EE_Composer_Unencrypted_Message');
+		}
+		return '';
+	};
+
+	return (
+		<MessageComposerHint
+			icon={isEditing ? 'pencil' : undefined}
+			helperText={isEditing && !isMobile ? <Trans i18nKey='Editing_message_hint' /> : undefined}
+		>
+			{renderHintText()}
+		</MessageComposerHint>
+	);
+};
+
+export default memo(MessageBoxHint);
diff --git a/packages/i18n/src/locales/en.i18n.json b/packages/i18n/src/locales/en.i18n.json
index a5cb3f542715..371c22b578bf 100644
--- a/packages/i18n/src/locales/en.i18n.json
+++ b/packages/i18n/src/locales/en.i18n.json
@@ -1805,6 +1805,7 @@
   "E2E_Encryption_enabled_for_room": "End-to-end encryption enabled for #{{roomName}}",
   "E2E_Encryption_disabled_for_room": "End-to-end encryption disabled for #{{roomName}}",
   "E2EE_not_available_OTR": "This room has OTR enabled, E2E encryption cannot work with OTR.",
+  "E2EE_Composer_Unencrypted_Message": "You're sending an unencrypted message",
   "Markdown_Parser": "Markdown Parser",
   "Markdown_SupportSchemesForLink": "Markdown Support Schemes for Link",
   "E2E Encryption_Description": "Keep conversations private, ensuring only the sender and intended recipients are able to read them.",
diff --git a/packages/ui-composer/src/MessageComposer/MessageComposer.stories.tsx b/packages/ui-composer/src/MessageComposer/MessageComposer.stories.tsx
index 9a0d80b1fcd0..9ee5645e7de7 100644
--- a/packages/ui-composer/src/MessageComposer/MessageComposer.stories.tsx
+++ b/packages/ui-composer/src/MessageComposer/MessageComposer.stories.tsx
@@ -11,6 +11,7 @@ import {
 	MessageComposerActionsDivider,
 	MessageComposerToolbarSubmit,
 	MessageComposerSkeleton,
+	MessageComposerHint,
 } from '.';
 
 export default {
@@ -18,44 +19,65 @@ export default {
 	component: MessageComposer,
 } as ComponentMeta<typeof MessageComposer>;
 
+const _MessageToolbarActions: ComponentStory<typeof MessageComposerToolbarActions> = () => (
+	<MessageComposerToolbarActions>
+		<MessageComposerAction icon='emoji' />
+		<MessageComposerActionsDivider />
+		<MessageComposerAction icon='bold' />
+		<MessageComposerAction icon='italic' />
+		<MessageComposerAction icon='underline' />
+		<MessageComposerAction icon='strike' />
+		<MessageComposerAction icon='code' />
+		<MessageComposerAction icon='multiline' />
+		<MessageComposerAction icon='link' />
+		<MessageComposerAction icon='katex' />
+		<MessageComposerAction icon='arrow-return' />
+		<MessageComposerActionsDivider />
+		<MessageComposerAction icon='mic' />
+		<MessageComposerAction icon='video' />
+		<MessageComposerAction icon='clip' />
+		<MessageComposerAction icon='plus' />
+	</MessageComposerToolbarActions>
+);
+
 export const _MessageComposer: ComponentStory<typeof MessageComposer> = () => (
 	<MessageComposer>
 		<MessageComposerInput placeholder='Text' />
 		<MessageComposerToolbar>
-			<MessageComposerToolbarActions>
-				<MessageComposerAction icon='emoji' />
-				<MessageComposerActionsDivider />
-				<MessageComposerAction icon='bold' />
-				<MessageComposerAction icon='italic' />
-				<MessageComposerAction icon='underline' />
-				<MessageComposerAction icon='strike' />
-				<MessageComposerAction icon='code' />
-				<MessageComposerAction icon='arrow-return' />
-				<MessageComposerActionsDivider />
-				<MessageComposerAction icon='mic' />
-				<MessageComposerAction icon='clip' />
-			</MessageComposerToolbarActions>
+			<_MessageToolbarActions />
 		</MessageComposerToolbar>
 	</MessageComposer>
 );
 
+export const MessageComposerWithHints: ComponentStory<typeof MessageComposer> = () => (
+	<>
+		<MessageComposerHint
+			icon='pencil'
+			helperText={
+				<>
+					<strong>esc</strong> to cancel · <strong>enter</strong> to save
+				</>
+			}
+		>
+			Editing message
+		</MessageComposerHint>
+		<MessageComposer>
+			<MessageComposerInput placeholder='Text' value='Lorem ipsum dolor' />
+			<MessageComposerToolbar>
+				<_MessageToolbarActions />
+				<MessageComposerToolbarSubmit>
+					<MessageComposerAction aria-label='Send' icon='send' disabled={false} secondary={true} info={true} />
+				</MessageComposerToolbarSubmit>
+			</MessageComposerToolbar>
+		</MessageComposer>
+	</>
+);
+
 export const MessageComposerWithSubmitActions: ComponentStory<typeof MessageComposer> = () => (
 	<MessageComposer>
 		<MessageComposerInput placeholder='Text' />
 		<MessageComposerToolbar>
-			<MessageComposerToolbarActions>
-				<MessageComposerAction icon='emoji' />
-				<MessageComposerActionsDivider />
-				<MessageComposerAction icon='bold' />
-				<MessageComposerAction icon='italic' />
-				<MessageComposerAction icon='underline' />
-				<MessageComposerAction icon='strike' />
-				<MessageComposerAction icon='code' />
-				<MessageComposerAction icon='arrow-return' />
-				<MessageComposerActionsDivider />
-				<MessageComposerAction icon='mic' />
-				<MessageComposerAction icon='clip' />
-			</MessageComposerToolbarActions>
+			<_MessageToolbarActions />
 			<MessageComposerToolbarSubmit>
 				<Button small>Preview</Button>
 				<Button primary small>
diff --git a/packages/ui-composer/src/MessageComposer/MessageComposerHint.stories.tsx b/packages/ui-composer/src/MessageComposer/MessageComposerHint.stories.tsx
new file mode 100644
index 000000000000..e461eb4236b4
--- /dev/null
+++ b/packages/ui-composer/src/MessageComposer/MessageComposerHint.stories.tsx
@@ -0,0 +1,31 @@
+import type { ComponentMeta, ComponentStory } from '@storybook/react';
+
+import { MessageComposerHint } from '.';
+import '@rocket.chat/icons/dist/rocketchat.css';
+
+export default {
+	title: 'Components/MessageComposer/Hint',
+	component: MessageComposerHint,
+} as ComponentMeta<typeof MessageComposerHint>;
+
+export const HintWithIconAndHelperText: ComponentStory<typeof MessageComposerHint> = () => {
+	const helperText = (
+		<>
+			<strong>esc</strong> to cancel · <strong>enter</strong> to save
+		</>
+	);
+
+	return (
+		<MessageComposerHint icon='pencil' helperText={helperText}>
+			Editing message
+		</MessageComposerHint>
+	);
+};
+
+export const HintWithIcon: ComponentStory<typeof MessageComposerHint> = () => (
+	<MessageComposerHint icon='eye'>This room is read only</MessageComposerHint>
+);
+
+export const HintWithText: ComponentStory<typeof MessageComposerHint> = () => (
+	<MessageComposerHint>You're sending an unencrypted message</MessageComposerHint>
+);

From d929799cd3a4105d2c3d3359fac770107a4ad265 Mon Sep 17 00:00:00 2001
From: Guilherme Gazzo <guilhermegazzo@gmail.com>
Date: Mon, 14 Oct 2024 19:22:06 -0300
Subject: [PATCH 02/12] ci: cache artifacts to reduce api calls (#33567)

---
 .github/actions/build-docker/action.yml       |  6 +++
 .github/workflows/ci-code-check.yml           |  5 +++
 .../workflows/ci-deploy-gh-pages-preview.yml  | 42 -------------------
 .github/workflows/ci-test-e2e.yml             |  5 +++
 .github/workflows/ci-test-unit.yml            |  5 +++
 .github/workflows/ci.yml                      | 40 ++++++++++++++++++
 6 files changed, 61 insertions(+), 42 deletions(-)
 delete mode 100644 .github/workflows/ci-deploy-gh-pages-preview.yml

diff --git a/.github/actions/build-docker/action.yml b/.github/actions/build-docker/action.yml
index ae84e376a0d9..d0e9d3ce4f52 100644
--- a/.github/actions/build-docker/action.yml
+++ b/.github/actions/build-docker/action.yml
@@ -75,6 +75,12 @@ runs:
         install: true
         NPM_TOKEN: ${{ inputs.NPM_TOKEN }}
 
+    - name: Restore turbo build
+      uses: actions/download-artifact@v4
+      with:
+        name: turbo-build
+        path: .turbo/cache
+
     - run: yarn build
       if: inputs.setup == 'true'
       shell: bash
diff --git a/.github/workflows/ci-code-check.yml b/.github/workflows/ci-code-check.yml
index 41facad89a03..6712cc49356d 100644
--- a/.github/workflows/ci-code-check.yml
+++ b/.github/workflows/ci-code-check.yml
@@ -49,6 +49,11 @@ jobs:
 
       - uses: rharkor/caching-for-turbo@v1.5
 
+      - name: Restore turbo build
+        uses: actions/download-artifact@v4
+        with:
+          name: turbo-build
+          path: .turbo/cache
       - name: Cache TypeCheck
         uses: actions/cache@v3
         if: matrix.check == 'ts'
diff --git a/.github/workflows/ci-deploy-gh-pages-preview.yml b/.github/workflows/ci-deploy-gh-pages-preview.yml
deleted file mode 100644
index 8a0905a174bb..000000000000
--- a/.github/workflows/ci-deploy-gh-pages-preview.yml
+++ /dev/null
@@ -1,42 +0,0 @@
-# .github/workflows/ci-preview.yml
-name: Deploy PR previews
-concurrency: preview-${{ github.ref }}
-on:
-  pull_request:
-    types:
-      - opened
-      - reopened
-      - synchronize
-      - closed
-
-jobs:
-  deploy-preview:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v3
-
-      - uses: rharkor/caching-for-turbo@v1.5
-        if: github.event.action != 'closed'
-
-      - name: Setup NodeJS
-        uses: ./.github/actions/setup-node
-        if: github.event.action != 'closed'
-        with:
-          node-version: 14.21.3
-          deno-version: 1.37.1
-          cache-modules: true
-          install: true
-
-      - name: Build
-        if: github.event.action != 'closed'
-        run: |
-          yarn turbo run build-preview
-          yarn turbo run .:build-preview-move
-          npx indexifier .preview --html  --extensions .html  > .preview/index.html
-
-      - uses: rossjrw/pr-preview-action@v1
-        with:
-          source-dir: .preview
-          preview-branch: gh-pages
-          umbrella-dir: pr-preview
-          action: auto
diff --git a/.github/workflows/ci-test-e2e.yml b/.github/workflows/ci-test-e2e.yml
index f219f39c0614..d26bfdfe47f4 100644
--- a/.github/workflows/ci-test-e2e.yml
+++ b/.github/workflows/ci-test-e2e.yml
@@ -138,6 +138,11 @@ jobs:
 
       - uses: rharkor/caching-for-turbo@v1.5
 
+      - name: Restore turbo build
+        uses: actions/download-artifact@v4
+        with:
+          name: turbo-build
+          path: .turbo/cache
       - run: yarn build
       # if we are testing a PR from a fork, we need to build the docker image at this point
       - uses: ./.github/actions/build-docker
diff --git a/.github/workflows/ci-test-unit.yml b/.github/workflows/ci-test-unit.yml
index 883212d0cf3d..3c02c933ddb4 100644
--- a/.github/workflows/ci-test-unit.yml
+++ b/.github/workflows/ci-test-unit.yml
@@ -47,6 +47,11 @@ jobs:
 
       - uses: rharkor/caching-for-turbo@v1.5
 
+      - name: Restore turbo build
+        uses: actions/download-artifact@v4
+        with:
+          name: turbo-build
+          path: .turbo/cache
       - name: Unit Test
         run: yarn testunit
 
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index 6b6fa426ca96..b71c0cd6747b 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -174,6 +174,46 @@ jobs:
       - name: Build Rocket.Chat Packages
         run: yarn build
 
+      - name: Store turbo build
+        uses: actions/upload-artifact@v4
+        with:
+          name: turbo-build
+          path: .turbo/cache
+          overwrite: true
+          include-hidden-files: true
+
+  deploy-preview:
+    runs-on: ubuntu-latest
+    needs: [release-versions, packages-build]
+    steps:
+      - uses: actions/checkout@v3
+
+      - uses: rharkor/caching-for-turbo@v1.5
+        if: github.event.action != 'closed'
+
+      - name: Setup NodeJS
+        uses: ./.github/actions/setup-node
+        if: github.event.action != 'closed'
+        with:
+          node-version: 14.21.3
+          deno-version: 1.37.1
+          cache-modules: true
+          install: true
+
+      - name: Build
+        if: github.event.action != 'closed'
+        run: |
+          yarn turbo run build-preview
+          yarn turbo run .:build-preview-move
+          npx indexifier .preview --html  --extensions .html  > .preview/index.html
+
+      - uses: rossjrw/pr-preview-action@v1
+        with:
+          source-dir: .preview
+          preview-branch: gh-pages
+          umbrella-dir: pr-preview
+          action: auto
+
   build:
     name: 📦 Meteor Build - coverage
     needs: [release-versions, packages-build]

From 682507c14cc365b9ead0f2c3b20d0bbb14f3dadc Mon Sep 17 00:00:00 2001
From: Rafael Tapia <rafael.tapia@rocket.chat>
Date: Mon, 14 Oct 2024 21:09:04 -0300
Subject: [PATCH 03/12] feat: add history endpoint (#33349)

---
 .../server/constant/permissions.ts            |  4 +
 .../app/livechat/server/api/v1/contact.ts     | 23 ++++-
 .../app/livechat/server/lib/Contacts.ts       | 63 +++++++++++++-
 .../meteor/server/models/raw/LivechatRooms.ts | 22 ++++-
 apps/meteor/tests/data/livechat/rooms.ts      | 22 +++++
 .../tests/end-to-end/api/livechat/contacts.ts | 87 ++++++++++++++++++-
 packages/i18n/src/locales/en.i18n.json        |  2 +
 packages/i18n/src/locales/pt-BR.i18n.json     |  2 +
 .../src/models/ILivechatRoomsModel.ts         |  5 ++
 packages/rest-typings/src/v1/omnichannel.ts   | 34 +++++++-
 10 files changed, 258 insertions(+), 6 deletions(-)

diff --git a/apps/meteor/app/authorization/server/constant/permissions.ts b/apps/meteor/app/authorization/server/constant/permissions.ts
index f57943412fb4..bb6dfe14c6ff 100644
--- a/apps/meteor/app/authorization/server/constant/permissions.ts
+++ b/apps/meteor/app/authorization/server/constant/permissions.ts
@@ -105,6 +105,10 @@ export const permissions = [
 		_id: 'view-livechat-contact',
 		roles: ['livechat-manager', 'livechat-monitor', 'livechat-agent', 'admin'],
 	},
+	{
+		_id: 'view-livechat-contact-history',
+		roles: ['livechat-manager', 'livechat-monitor', 'livechat-agent', 'admin'],
+	},
 	{ _id: 'view-livechat-manager', roles: ['livechat-manager', 'livechat-monitor', 'admin'] },
 	{
 		_id: 'view-omnichannel-contact-center',
diff --git a/apps/meteor/app/livechat/server/api/v1/contact.ts b/apps/meteor/app/livechat/server/api/v1/contact.ts
index 0de3181708fb..5c68a475a952 100644
--- a/apps/meteor/app/livechat/server/api/v1/contact.ts
+++ b/apps/meteor/app/livechat/server/api/v1/contact.ts
@@ -3,6 +3,7 @@ import {
 	isPOSTOmnichannelContactsProps,
 	isPOSTUpdateOmnichannelContactsProps,
 	isGETOmnichannelContactsProps,
+	isGETOmnichannelContactHistoryProps,
 	isGETOmnichannelContactsSearchProps,
 } from '@rocket.chat/rest-typings';
 import { escapeRegExp } from '@rocket.chat/string-helpers';
@@ -11,7 +12,7 @@ import { Meteor } from 'meteor/meteor';
 
 import { API } from '../../../../api/server';
 import { getPaginationItems } from '../../../../api/server/helpers/getPaginationItems';
-import { Contacts, createContact, updateContact, getContacts, isSingleContactEnabled } from '../../lib/Contacts';
+import { getContactHistory, Contacts, createContact, updateContact, getContacts, isSingleContactEnabled } from '../../lib/Contacts';
 
 API.v1.addRoute(
 	'omnichannel/contact',
@@ -161,3 +162,23 @@ API.v1.addRoute(
 		},
 	},
 );
+
+API.v1.addRoute(
+	'omnichannel/contacts.history',
+	{ authRequired: true, permissionsRequired: ['view-livechat-contact-history'], validateParams: isGETOmnichannelContactHistoryProps },
+	{
+		async get() {
+			if (!isSingleContactEnabled()) {
+				return API.v1.unauthorized();
+			}
+
+			const { contactId, source } = this.queryParams;
+			const { offset, count } = await getPaginationItems(this.queryParams);
+			const { sort } = await this.parseJsonQuery();
+
+			const history = await getContactHistory({ contactId, source, count, offset, sort });
+
+			return API.v1.success(history);
+		},
+	},
+);
diff --git a/apps/meteor/app/livechat/server/lib/Contacts.ts b/apps/meteor/app/livechat/server/lib/Contacts.ts
index c26fbcc7b08c..1e01dfc9d58d 100644
--- a/apps/meteor/app/livechat/server/lib/Contacts.ts
+++ b/apps/meteor/app/livechat/server/lib/Contacts.ts
@@ -18,10 +18,10 @@ import {
 	Subscriptions,
 	LivechatContacts,
 } from '@rocket.chat/models';
-import type { PaginatedResult } from '@rocket.chat/rest-typings';
+import type { PaginatedResult, VisitorSearchChatsResult } from '@rocket.chat/rest-typings';
 import { check } from 'meteor/check';
 import { Meteor } from 'meteor/meteor';
-import type { MatchKeysAndValues, OnlyFieldsOfType, Sort } from 'mongodb';
+import type { MatchKeysAndValues, OnlyFieldsOfType, FindOptions, Sort } from 'mongodb';
 
 import { callbacks } from '../../../../lib/callbacks';
 import { trim } from '../../../../lib/utils/stringUtils';
@@ -72,6 +72,14 @@ type GetContactsParams = {
 	sort: Sort;
 };
 
+type GetContactHistoryParams = {
+	contactId: string;
+	source?: string;
+	count: number;
+	offset: number;
+	sort: Sort;
+};
+
 export const Contacts = {
 	async registerContact({
 		token,
@@ -283,6 +291,57 @@ export async function getContacts(params: GetContactsParams): Promise<PaginatedR
 	};
 }
 
+export async function getContactHistory(
+	params: GetContactHistoryParams,
+): Promise<PaginatedResult<{ history: VisitorSearchChatsResult[] }>> {
+	const { contactId, source, count, offset, sort } = params;
+
+	const contact = await LivechatContacts.findOneById<Pick<ILivechatContact, 'channels'>>(contactId, { projection: { channels: 1 } });
+
+	if (!contact) {
+		throw new Error('error-contact-not-found');
+	}
+
+	const visitorsIds = new Set(contact.channels?.map((channel: ILivechatContactChannel) => channel.visitorId));
+
+	if (!visitorsIds?.size) {
+		return { history: [], count: 0, offset, total: 0 };
+	}
+
+	const options: FindOptions<IOmnichannelRoom> = {
+		sort: sort || { ts: -1 },
+		skip: offset,
+		limit: count,
+		projection: {
+			fname: 1,
+			ts: 1,
+			v: 1,
+			msgs: 1,
+			servedBy: 1,
+			closedAt: 1,
+			closedBy: 1,
+			closer: 1,
+			tags: 1,
+			source: 1,
+		},
+	};
+
+	const { totalCount, cursor } = LivechatRooms.findPaginatedRoomsByVisitorsIdsAndSource({
+		visitorsIds: Array.from(visitorsIds),
+		source,
+		options,
+	});
+
+	const [total, history] = await Promise.all([totalCount, cursor.toArray()]);
+
+	return {
+		history,
+		count: history.length,
+		offset,
+		total,
+	};
+}
+
 async function getAllowedCustomFields(): Promise<Pick<ILivechatCustomField, '_id' | 'label' | 'regexp' | 'required'>[]> {
 	return LivechatCustomField.findByScope(
 		'visitor',
diff --git a/apps/meteor/server/models/raw/LivechatRooms.ts b/apps/meteor/server/models/raw/LivechatRooms.ts
index ae03d67251ec..7c63eec6e075 100644
--- a/apps/meteor/server/models/raw/LivechatRooms.ts
+++ b/apps/meteor/server/models/raw/LivechatRooms.ts
@@ -10,7 +10,7 @@ import type {
 	MACStats,
 } from '@rocket.chat/core-typings';
 import { UserStatus } from '@rocket.chat/core-typings';
-import type { ILivechatRoomsModel } from '@rocket.chat/model-typings';
+import type { FindPaginated, ILivechatRoomsModel } from '@rocket.chat/model-typings';
 import type { Updater } from '@rocket.chat/models';
 import { Settings } from '@rocket.chat/models';
 import { escapeRegExp } from '@rocket.chat/string-helpers';
@@ -1220,6 +1220,26 @@ export class LivechatRoomsRaw extends BaseRaw<IOmnichannelRoom> implements ILive
 		return this.col.aggregate(params, { readPreference: readSecondaryPreferred() });
 	}
 
+	findPaginatedRoomsByVisitorsIdsAndSource({
+		visitorsIds,
+		source,
+		options = {},
+	}: {
+		visitorsIds: string[];
+		source?: string;
+		options?: FindOptions;
+	}): FindPaginated<FindCursor<IOmnichannelRoom>> {
+		return this.findPaginated<IOmnichannelRoom>(
+			{
+				'v._id': { $in: visitorsIds },
+				...(source && {
+					$or: [{ 'source.type': new RegExp(escapeRegExp(source), 'i') }, { 'source.alias': new RegExp(escapeRegExp(source), 'i') }],
+				}),
+			},
+			options,
+		);
+	}
+
 	findRoomsWithCriteria({
 		agents,
 		roomName,
diff --git a/apps/meteor/tests/data/livechat/rooms.ts b/apps/meteor/tests/data/livechat/rooms.ts
index 46e5cbe489a9..a41b19ff9a8d 100644
--- a/apps/meteor/tests/data/livechat/rooms.ts
+++ b/apps/meteor/tests/data/livechat/rooms.ts
@@ -33,6 +33,28 @@ export const createLivechatRoom = async (visitorToken: string, extraRoomParams?:
 	return response.body.room;
 };
 
+export const createLivechatRoomWidget = async (
+	visitorToken: string,
+	extraRoomParams?: Record<string, string>,
+): Promise<IOmnichannelRoom> => {
+	const urlParams = new URLSearchParams();
+	urlParams.append('token', visitorToken);
+	if (extraRoomParams) {
+		for (const [key, value] of Object.entries(extraRoomParams)) {
+			urlParams.append(key, value);
+		}
+	}
+
+	const response = await request
+		.get(api('livechat/room'))
+		.set('Cookie', [`rc_room_type=l`, `rc_is_widget=t`])
+		.query(urlParams.toString())
+		.set(credentials)
+		.expect(200);
+
+	return response.body.room;
+};
+
 export const createVisitor = (department?: string, visitorName?: string, customEmail?: string): Promise<ILivechatVisitor> =>
 	new Promise((resolve, reject) => {
 		const token = getRandomVisitorToken();
diff --git a/apps/meteor/tests/end-to-end/api/livechat/contacts.ts b/apps/meteor/tests/end-to-end/api/livechat/contacts.ts
index 0c97b85a511e..556b232e258e 100644
--- a/apps/meteor/tests/end-to-end/api/livechat/contacts.ts
+++ b/apps/meteor/tests/end-to-end/api/livechat/contacts.ts
@@ -5,7 +5,14 @@ import { before, after, describe, it } from 'mocha';
 
 import { getCredentials, api, request, credentials } from '../../../data/api-data';
 import { createCustomField, deleteCustomField } from '../../../data/livechat/custom-fields';
-import { closeOmnichannelRoom, createAgent, createLivechatRoom, createVisitor, deleteVisitor } from '../../../data/livechat/rooms';
+import {
+	closeOmnichannelRoom,
+	createAgent,
+	createLivechatRoom,
+	createLivechatRoomWidget,
+	createVisitor,
+	deleteVisitor,
+} from '../../../data/livechat/rooms';
 import { removeAgent } from '../../../data/livechat/users';
 import { removePermissionFromAllRoles, restorePermissionToRoles, updatePermission, updateSetting } from '../../../data/permissions.helper';
 import { createUser, deleteUser } from '../../../data/users.helper';
@@ -809,4 +816,82 @@ describe('LIVECHAT - contacts', () => {
 			expect(secondResponse.body.contact.channels.length).to.be.equal(1);
 		});
 	});
+
+	describe('[GET] omnichannel/contacts.history', () => {
+		let visitor: ILivechatVisitor;
+		let room1: IOmnichannelRoom;
+		let room2: IOmnichannelRoom;
+
+		before(async () => {
+			visitor = await createVisitor();
+			room1 = await createLivechatRoom(visitor.token);
+			await closeOmnichannelRoom(room1._id);
+			room2 = await createLivechatRoomWidget(visitor.token);
+		});
+
+		after(async () => {
+			await closeOmnichannelRoom(room2._id);
+			await deleteVisitor(visitor._id);
+		});
+
+		it('should be able to list a contact history', async () => {
+			const res = await request.get(api(`omnichannel/contacts.history`)).set(credentials).query({ contactId: visitor.contactId });
+
+			expect(res.status).to.be.equal(200);
+			expect(res.body).to.have.property('success', true);
+			expect(res.body.history).to.be.an('array');
+			expect(res.body.history.length).to.be.equal(2);
+			expect(res.body.total).to.be.equal(2);
+			expect(res.body.count).to.be.an('number');
+			expect(res.body.offset).to.be.an('number');
+
+			expect(res.body.history[0]).to.have.property('_id', room2._id);
+			expect(res.body.history[0]).to.not.have.property('closedAt');
+			expect(res.body.history[0]).to.have.property('fname', visitor.name);
+			expect(res.body.history[0].source).to.have.property('type', 'widget');
+
+			expect(res.body.history[1]).to.have.property('_id', room1._id);
+			expect(res.body.history[1]).to.have.property('closedAt');
+			expect(res.body.history[1]).to.have.property('closedBy');
+			expect(res.body.history[1]).to.have.property('closer', 'user');
+			expect(res.body.history[1].source).to.have.property('type', 'api');
+		});
+
+		it('should be able to filter a room by the source', async () => {
+			const res = await request
+				.get(api(`omnichannel/contacts.history`))
+				.set(credentials)
+				.query({ contactId: visitor.contactId, source: 'api' });
+
+			expect(res.status).to.be.equal(200);
+			expect(res.body).to.have.property('success', true);
+			expect(res.body.history).to.be.an('array');
+			expect(res.body.history.length).to.be.equal(1);
+			expect(res.body.total).to.be.equal(1);
+			expect(res.body.count).to.be.an('number');
+			expect(res.body.offset).to.be.an('number');
+			expect(res.body.history[0].source).to.have.property('type', 'api');
+		});
+
+		it('should return an empty list if contact does not have history', async () => {
+			const emptyVisitor = await createVisitor();
+			const res = await request.get(api(`omnichannel/contacts.history`)).set(credentials).query({ contactId: emptyVisitor.contactId });
+
+			expect(res.status).to.be.equal(200);
+			expect(res.body).to.have.property('success', true);
+			expect(res.body.history).to.be.an('array');
+			expect(res.body.history.length).to.be.equal(0);
+			expect(res.body.total).to.be.equal(0);
+
+			await deleteVisitor(emptyVisitor.token);
+		});
+
+		it('should return an error if contacts not exists', async () => {
+			const res = await request.get(api(`omnichannel/contacts.history`)).set(credentials).query({ contactId: 'invalid' });
+
+			expect(res.status).to.be.equal(400);
+			expect(res.body).to.have.property('success', false);
+			expect(res.body.error).to.be.equal('error-contact-not-found');
+		});
+	});
 });
diff --git a/packages/i18n/src/locales/en.i18n.json b/packages/i18n/src/locales/en.i18n.json
index 371c22b578bf..391336999af8 100644
--- a/packages/i18n/src/locales/en.i18n.json
+++ b/packages/i18n/src/locales/en.i18n.json
@@ -5897,6 +5897,8 @@
   "view-l-room": "View Omnichannel Rooms",
   "create-livechat-contact": "Create Omnichannel contacts",
   "update-livechat-contact": "Update Omnichannel contacts",
+  "view-livechat-contact": "View Omnichannel contacts",
+  "view-livechat-contact-history": "View Omnichannel contacts history",
   "view-l-room_description": "Permission to view Omnichannel rooms",
   "view-livechat-analytics": "View Omnichannel Analytics",
   "onboarding.page.awaitingConfirmation.subtitle": "We have sent you an email to {{emailAddress}} with a confirmation link. Please verify that the security code below matches the one in the email.",
diff --git a/packages/i18n/src/locales/pt-BR.i18n.json b/packages/i18n/src/locales/pt-BR.i18n.json
index e1402ee57941..525dc5bc3b61 100644
--- a/packages/i18n/src/locales/pt-BR.i18n.json
+++ b/packages/i18n/src/locales/pt-BR.i18n.json
@@ -4711,6 +4711,8 @@
   "view-l-room": "Ver salas de omnichannel",
   "create-livechat-contact": "Criar contatos do omnichannel",
   "update-livechat-contact": "Atualizar contatos do omnichannel",
+  "view-livechat-contact": "Ver contatos do omnichannel",
+  "view-livechat-contact-history": "Ver histórico do contato do omnichannel",
   "view-l-room_description": "Permissão para ver salas de omnichannel",
   "view-livechat-analytics": "Ver a análise do omnichannel",
   "onboarding.page.awaitingConfirmation.subtitle": "Enviamos um e-mail para {{emailAddress}} com um link de confirmação. Verifique se o código de segurança abaixo coincide com o do e-mail.",
diff --git a/packages/model-typings/src/models/ILivechatRoomsModel.ts b/packages/model-typings/src/models/ILivechatRoomsModel.ts
index 337986df576d..6ffe8e57bd25 100644
--- a/packages/model-typings/src/models/ILivechatRoomsModel.ts
+++ b/packages/model-typings/src/models/ILivechatRoomsModel.ts
@@ -260,4 +260,9 @@ export interface ILivechatRoomsModel extends IBaseModel<IOmnichannelRoom> {
 	getVisitorActiveForPeriodUpdateQuery(period: string, updater?: Updater<IOmnichannelRoom>): Updater<IOmnichannelRoom>;
 	getMACStatisticsForPeriod(period: string): Promise<MACStats[]>;
 	getMACStatisticsBetweenDates(start: Date, end: Date): Promise<MACStats[]>;
+	findPaginatedRoomsByVisitorsIdsAndSource(params: {
+		visitorsIds: string[];
+		source?: string;
+		options?: FindOptions;
+	}): FindPaginated<FindCursor<IOmnichannelRoom>>;
 }
diff --git a/packages/rest-typings/src/v1/omnichannel.ts b/packages/rest-typings/src/v1/omnichannel.ts
index 09c021a4e7d9..8b7fd7162934 100644
--- a/packages/rest-typings/src/v1/omnichannel.ts
+++ b/packages/rest-typings/src/v1/omnichannel.ts
@@ -1355,6 +1355,36 @@ const GETOmnichannelContactsSearchSchema = {
 
 export const isGETOmnichannelContactsSearchProps = ajv.compile<GETOmnichannelContactsSearchProps>(GETOmnichannelContactsSearchSchema);
 
+type GETOmnichannelContactHistoryProps = PaginatedRequest<{
+	contactId: string;
+	source?: string;
+}>;
+
+const GETOmnichannelContactHistorySchema = {
+	type: 'object',
+	properties: {
+		contactId: {
+			type: 'string',
+		},
+		source: {
+			type: 'string',
+		},
+		count: {
+			type: 'number',
+		},
+		offset: {
+			type: 'number',
+		},
+		sort: {
+			type: 'string',
+		},
+	},
+	required: ['contactId'],
+	additionalProperties: false,
+};
+
+export const isGETOmnichannelContactHistoryProps = ajv.compile<GETOmnichannelContactHistoryProps>(GETOmnichannelContactHistorySchema);
+
 type GETOmnichannelContactProps = { contactId: string };
 
 const GETOmnichannelContactSchema = {
@@ -3805,7 +3835,9 @@ export type OmnichannelEndpoints = {
 	'/v1/omnichannel/contacts.search': {
 		GET: (params: GETOmnichannelContactsSearchProps) => PaginatedResult<{ contacts: ILivechatContact[] }>;
 	};
-
+	'/v1/omnichannel/contacts.history': {
+		GET: (params: GETOmnichannelContactHistoryProps) => PaginatedResult<{ history: VisitorSearchChatsResult[] }>;
+	};
 	'/v1/omnichannel/contact.search': {
 		GET: (params: GETOmnichannelContactSearchProps) => { contact: ILivechatVisitor | null };
 	};

From bafbedc490cdb46e466b1aa4baf3a5a118dc0094 Mon Sep 17 00:00:00 2001
From: Guilherme Gazzo <guilhermegazzo@gmail.com>
Date: Mon, 14 Oct 2024 22:59:59 -0300
Subject: [PATCH 04/12] ci: add restore cache for `deploy-preview` (#33579)

---
 .github/workflows/ci.yml | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index b71c0cd6747b..20e42203d45f 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -199,7 +199,11 @@ jobs:
           deno-version: 1.37.1
           cache-modules: true
           install: true
-
+      - name: Restore turbo build
+        uses: actions/download-artifact@v4
+        with:
+          name: turbo-build
+          path: .turbo/cache
       - name: Build
         if: github.event.action != 'closed'
         run: |

From 50c444136325c5b9c991b30725551ab45820f558 Mon Sep 17 00:00:00 2001
From: "Julio A." <52619625+julio-cfa@users.noreply.github.com>
Date: Tue, 15 Oct 2024 04:52:42 +0200
Subject: [PATCH 05/12] fix: consider query strings in Twilio request
 validation (#33364)

---
 .changeset/grumpy-lamps-beg.md                |  5 ++++
 .../providers/twilio.ts                       | 16 +++++++------
 .../providers/twilio.spec.ts                  | 23 ++++++++++++++-----
 3 files changed, 31 insertions(+), 13 deletions(-)
 create mode 100644 .changeset/grumpy-lamps-beg.md

diff --git a/.changeset/grumpy-lamps-beg.md b/.changeset/grumpy-lamps-beg.md
new file mode 100644
index 000000000000..c9c4d2d9faec
--- /dev/null
+++ b/.changeset/grumpy-lamps-beg.md
@@ -0,0 +1,5 @@
+---
+'@rocket.chat/meteor': patch
+---
+
+Fixed Twilio request validation by accepting URLs with query strings
diff --git a/apps/meteor/server/services/omnichannel-integrations/providers/twilio.ts b/apps/meteor/server/services/omnichannel-integrations/providers/twilio.ts
index 4a1c8d9d0ebf..efd5d00b05b4 100644
--- a/apps/meteor/server/services/omnichannel-integrations/providers/twilio.ts
+++ b/apps/meteor/server/services/omnichannel-integrations/providers/twilio.ts
@@ -245,19 +245,21 @@ export class Twilio implements ISMSProvider {
 		};
 	}
 
-	isRequestFromTwilio(signature: string, requestBody: object): boolean {
+	isRequestFromTwilio(signature: string, request: Request): boolean {
 		const authToken = settings.get<string>('SMS_Twilio_authToken');
-		const siteUrl = settings.get<string>('Site_Url');
+		let siteUrl = settings.get<string>('Site_Url');
+		if (siteUrl.endsWith('/')) {
+			siteUrl = siteUrl.replace(/.$/, '');
+		}
 
 		if (!authToken || !siteUrl) {
 			SystemLogger.error(`(Twilio) -> URL or Twilio token not configured.`);
 			return false;
 		}
 
-		const twilioUrl = siteUrl.endsWith('/')
-			? `${siteUrl}api/v1/livechat/sms-incoming/twilio`
-			: `${siteUrl}/api/v1/livechat/sms-incoming/twilio`;
-		return twilio.validateRequest(authToken, signature, twilioUrl, requestBody);
+		const twilioUrl = request.originalUrl ? `${siteUrl}${request.originalUrl}` : `${siteUrl}/api/v1/livechat/sms-incoming/twilio`;
+
+		return twilio.validateRequest(authToken, signature, twilioUrl, request.body);
 	}
 
 	validateRequest(request: Request): boolean {
@@ -267,7 +269,7 @@ export class Twilio implements ISMSProvider {
 		}
 		const twilioHeader = request.headers['x-twilio-signature'] || '';
 		const twilioSignature = Array.isArray(twilioHeader) ? twilioHeader[0] : twilioHeader;
-		return this.isRequestFromTwilio(twilioSignature, request.body);
+		return this.isRequestFromTwilio(twilioSignature, request);
 	}
 
 	error(error: Error & { reason?: string }): SMSProviderResponse {
diff --git a/apps/meteor/tests/unit/server/services/omnichannel-integrations/providers/twilio.spec.ts b/apps/meteor/tests/unit/server/services/omnichannel-integrations/providers/twilio.spec.ts
index f3c5d281aefb..dd0a62da3ad1 100644
--- a/apps/meteor/tests/unit/server/services/omnichannel-integrations/providers/twilio.spec.ts
+++ b/apps/meteor/tests/unit/server/services/omnichannel-integrations/providers/twilio.spec.ts
@@ -66,24 +66,34 @@ describe('Twilio Request Validation', () => {
 		expect(twilio.validateRequest(request)).to.be.true;
 	});
 
-	it('should not validate a request when process.env.TEST_MODE is true', () => {
-		process.env.TEST_MODE = 'true';
+	it('should validate a request when process.env.TEST_MODE is false', () => {
+		process.env.TEST_MODE = 'false';
+
+		settingsStub.get.withArgs('SMS_Twilio_authToken').returns('test');
+		settingsStub.get.withArgs('Site_Url').returns('https://example.com');
 
 		const twilio = new Twilio();
+		const requestBody = {
+			To: 'test',
+			From: 'test',
+			Body: 'test',
+		};
+
 		const request = {
 			headers: {
-				'x-twilio-signature': 'test',
+				'x-twilio-signature': getSignature('test', 'https://example.com/api/v1/livechat/sms-incoming/twilio', requestBody),
 			},
+			body: requestBody,
 		};
 
 		expect(twilio.validateRequest(request)).to.be.true;
 	});
 
-	it('should validate a request when process.env.TEST_MODE is false', () => {
+	it('should validate a request when query string is present', () => {
 		process.env.TEST_MODE = 'false';
 
 		settingsStub.get.withArgs('SMS_Twilio_authToken').returns('test');
-		settingsStub.get.withArgs('Site_Url').returns('https://example.com');
+		settingsStub.get.withArgs('Site_Url').returns('https://example.com/');
 
 		const twilio = new Twilio();
 		const requestBody = {
@@ -93,8 +103,9 @@ describe('Twilio Request Validation', () => {
 		};
 
 		const request = {
+			originalUrl: '/api/v1/livechat/sms-incoming/twilio?department=1',
 			headers: {
-				'x-twilio-signature': getSignature('test', 'https://example.com/api/v1/livechat/sms-incoming/twilio', requestBody),
+				'x-twilio-signature': getSignature('test', 'https://example.com/api/v1/livechat/sms-incoming/twilio?department=1', requestBody),
 			},
 			body: requestBody,
 		};

From eebb2123ebe8992f138f5a85b33f6756f27749e7 Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Tue, 15 Oct 2024 01:35:13 -0400
Subject: [PATCH 06/12] chore(deps): bump actions/setup-node from 4.0.3 to
 4.0.4 (#33327)

---
 .github/workflows/update-version-durability.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.github/workflows/update-version-durability.yml b/.github/workflows/update-version-durability.yml
index 90c835577dc1..48ae2572c217 100644
--- a/.github/workflows/update-version-durability.yml
+++ b/.github/workflows/update-version-durability.yml
@@ -17,7 +17,7 @@ jobs:
     - uses: actions/checkout@v4
 
     - name: Use Node.js
-      uses: actions/setup-node@v4.0.3
+      uses: actions/setup-node@v4.0.4
       with:
         node-version: '20.15.1'
 

From 08d0df23e02e0c5f2ebfd1c23f62ec089e11876d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E3=83=87=E3=83=AF=E3=83=B3=E3=82=B7=E3=83=A5?=
 <61188295+Dnouv@users.noreply.github.com>
Date: Tue, 15 Oct 2024 12:42:34 +0530
Subject: [PATCH 07/12] feat: adds a new featured room action on the header for
 non-default category (#33562)

---
 .changeset/four-experts-compare.md            |  5 ++
 .../roomActions/useAppsRoomStarActions.tsx    | 82 +++++++++++++++++++
 .../client/hooks/useAppActionButtons.ts       | 10 +--
 .../client/hooks/useApplyButtonFilters.ts     | 17 +++-
 apps/meteor/client/hooks/useFilterActions.ts  | 11 +--
 apps/meteor/client/ui.ts                      |  2 +
 6 files changed, 111 insertions(+), 16 deletions(-)
 create mode 100644 .changeset/four-experts-compare.md
 create mode 100644 apps/meteor/client/hooks/roomActions/useAppsRoomStarActions.tsx

diff --git a/.changeset/four-experts-compare.md b/.changeset/four-experts-compare.md
new file mode 100644
index 000000000000..b9ce498e4a4b
--- /dev/null
+++ b/.changeset/four-experts-compare.md
@@ -0,0 +1,5 @@
+---
+'@rocket.chat/meteor': minor
+---
+
+Introduces a new featured action on the room header for action buttons using the non-default category to enhance user accessibility. 
diff --git a/apps/meteor/client/hooks/roomActions/useAppsRoomStarActions.tsx b/apps/meteor/client/hooks/roomActions/useAppsRoomStarActions.tsx
new file mode 100644
index 000000000000..a03affabfe1e
--- /dev/null
+++ b/apps/meteor/client/hooks/roomActions/useAppsRoomStarActions.tsx
@@ -0,0 +1,82 @@
+import { Box } from '@rocket.chat/fuselage';
+import { GenericMenu, HeaderToolbarAction } from '@rocket.chat/ui-client';
+import { useToastMessageDispatch } from '@rocket.chat/ui-contexts';
+import React, { useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { UiKitTriggerTimeoutError } from '../../../app/ui-message/client/UiKitTriggerTimeoutError';
+import { Utilities } from '../../../ee/lib/misc/Utilities';
+import { useUiKitActionManager } from '../../uikit/hooks/useUiKitActionManager';
+import { useRoom } from '../../views/room/contexts/RoomContext';
+import type { RoomToolboxActionConfig } from '../../views/room/contexts/RoomToolboxContext';
+import { useAppActionButtons } from '../useAppActionButtons';
+import { useApplyButtonFilters } from '../useApplyButtonFilters';
+
+export const useAppsRoomStarActions = () => {
+	const result = useAppActionButtons('roomAction');
+	const actionManager = useUiKitActionManager();
+	const applyButtonFilters = useApplyButtonFilters('ai');
+	const room = useRoom();
+	const { t } = useTranslation();
+	const dispatchToastMessage = useToastMessageDispatch();
+
+	return useMemo((): RoomToolboxActionConfig | undefined => {
+		if (!result.data) {
+			return undefined;
+		}
+
+		const filteredActions = result.data.filter(applyButtonFilters);
+
+		if (filteredActions.length === 0) {
+			return undefined;
+		}
+
+		return {
+			id: 'ai-actions',
+			title: 'AI_Actions',
+			icon: 'stars',
+			groups: ['group', 'channel', 'live', 'team', 'direct', 'direct_multiple'],
+			featured: true,
+			renderToolboxItem: ({ id, icon, title, disabled, className }) => (
+				<GenericMenu
+					button={<HeaderToolbarAction />}
+					key={id}
+					title={title}
+					disabled={disabled}
+					items={filteredActions.map((action) => ({
+						id: action.actionId,
+						icon: undefined,
+						title: Utilities.getI18nKeyForApp(action.labelI18n, action.appId),
+						content: <Box is='span'>{t(`${Utilities.getI18nKeyForApp(action.labelI18n, action.appId)}`)}</Box>,
+						variant: action.variant,
+						groups: ['group', 'channel', 'live', 'team', 'direct', 'direct_multiple'],
+						onClick: () => {
+							void actionManager
+								.emitInteraction(action.appId, {
+									type: 'actionButton',
+									actionId: action.actionId,
+									rid: room._id,
+									payload: { context: action.context },
+								})
+								.catch(async (reason) => {
+									if (reason instanceof UiKitTriggerTimeoutError) {
+										dispatchToastMessage({
+											type: 'error',
+											message: t('UIKit_Interaction_Timeout'),
+										});
+										return;
+									}
+
+									return reason;
+								});
+						},
+						type: 'apps',
+					}))}
+					className={className}
+					placement='bottom-start'
+					icon={icon}
+				/>
+			),
+		};
+	}, [actionManager, applyButtonFilters, dispatchToastMessage, result.data, room._id, t]);
+};
diff --git a/apps/meteor/client/hooks/useAppActionButtons.ts b/apps/meteor/client/hooks/useAppActionButtons.ts
index 3e21ca6a668d..2a074fcc3be1 100644
--- a/apps/meteor/client/hooks/useAppActionButtons.ts
+++ b/apps/meteor/client/hooks/useAppActionButtons.ts
@@ -13,7 +13,7 @@ import type { MessageBoxAction } from '../../app/ui-utils/client/lib/messageBox'
 import { Utilities } from '../../ee/lib/misc/Utilities';
 import { useUiKitActionManager } from '../uikit/hooks/useUiKitActionManager';
 import { useApplyButtonFilters, useApplyButtonAuthFilter } from './useApplyButtonFilters';
-import { useFilterActionsByContextAndCategory } from './useFilterActions';
+import { useFilterActionsByContext } from './useFilterActions';
 
 const getIdForActionButton = ({ appId, actionId }: IUIActionButton): string => `${appId}/${actionId}`;
 
@@ -164,15 +164,15 @@ export const useUserDropdownAppsActionButtons = () => {
 export const useMessageActionAppsActionButtons = (context?: MessageActionContext, category?: string) => {
 	const result = useAppActionButtons('messageAction');
 	const actionManager = useUiKitActionManager();
-	const applyButtonFilters = useApplyButtonFilters();
+	const applyButtonFilters = useApplyButtonFilters(category);
 	const dispatchToastMessage = useToastMessageDispatch();
 	const { t } = useTranslation();
-	const filterActionsByContextAndCategory = useFilterActionsByContextAndCategory(context, category);
+	const filterActionsByContext = useFilterActionsByContext(context);
 	const data = useMemo(
 		() =>
 			result.data
 				?.filter((action) => {
-					if (!filterActionsByContextAndCategory(action)) {
+					if (!filterActionsByContext(action)) {
 						return false;
 					}
 					return applyButtonFilters(action);
@@ -211,7 +211,7 @@ export const useMessageActionAppsActionButtons = (context?: MessageActionContext
 
 					return item;
 				}),
-		[actionManager, applyButtonFilters, dispatchToastMessage, filterActionsByContextAndCategory, result.data, t],
+		[actionManager, applyButtonFilters, dispatchToastMessage, filterActionsByContext, result.data, t],
 	);
 	return {
 		...result,
diff --git a/apps/meteor/client/hooks/useApplyButtonFilters.ts b/apps/meteor/client/hooks/useApplyButtonFilters.ts
index 742f33489deb..63542c5189c6 100644
--- a/apps/meteor/client/hooks/useApplyButtonFilters.ts
+++ b/apps/meteor/client/hooks/useApplyButtonFilters.ts
@@ -32,15 +32,26 @@ const applyRoomFilter = (button: IUIActionButton, room: IRoom): boolean => {
 	return !roomTypes || roomTypes.some((filter): boolean => enumToFilter[filter]?.(room));
 };
 
-export const useApplyButtonFilters = (): ((button: IUIActionButton) => boolean) => {
+const applyCategoryFilter = (button: IUIActionButton, category: string): boolean => {
+	const { category: buttonCategory } = button;
+
+	if (category === 'default') {
+		return !buttonCategory || buttonCategory === 'default';
+	}
+
+	return buttonCategory === category;
+};
+
+export const useApplyButtonFilters = (category = 'default'): ((button: IUIActionButton) => boolean) => {
 	const room = useRoom();
 	if (!room) {
 		throw new Error('useApplyButtonFilters must be used inside a room context');
 	}
 	const applyAuthFilter = useApplyButtonAuthFilter();
 	return useCallback(
-		(button: IUIActionButton) => applyAuthFilter(button) && (!room || applyRoomFilter(button, room)),
-		[applyAuthFilter, room],
+		(button: IUIActionButton) =>
+			applyAuthFilter(button) && (!room || applyRoomFilter(button, room)) && applyCategoryFilter(button, category),
+		[applyAuthFilter, category, room],
 	);
 };
 
diff --git a/apps/meteor/client/hooks/useFilterActions.ts b/apps/meteor/client/hooks/useFilterActions.ts
index 5eab0b795a59..4dda122c3bb3 100644
--- a/apps/meteor/client/hooks/useFilterActions.ts
+++ b/apps/meteor/client/hooks/useFilterActions.ts
@@ -2,23 +2,18 @@ import { MessageActionContext } from '@rocket.chat/apps-engine/definition/ui';
 import type { IUIActionButton } from '@rocket.chat/apps-engine/definition/ui';
 import { useCallback } from 'react';
 
-const DEFAULT_CATEGORY = 'default';
-
-export const useFilterActionsByContextAndCategory = (context: string | undefined, category = 'default') => {
+export const useFilterActionsByContext = (context: string | undefined) => {
 	return useCallback(
 		(action: IUIActionButton) => {
 			if (!context) {
 				return true;
 			}
 
-			const actionCategory = action?.category ?? DEFAULT_CATEGORY;
 			const messageActionContext = action.when?.messageActionContext || Object.values(MessageActionContext);
 			const isContextMatch = messageActionContext.includes(context as MessageActionContext);
 
-			const isCategoryMatch = category === DEFAULT_CATEGORY ? actionCategory === DEFAULT_CATEGORY : actionCategory === category;
-
-			return isContextMatch && isCategoryMatch;
+			return isContextMatch;
 		},
-		[context, category],
+		[context],
 	);
 };
diff --git a/apps/meteor/client/ui.ts b/apps/meteor/client/ui.ts
index 6c7971a8cca0..922b605a2b40 100644
--- a/apps/meteor/client/ui.ts
+++ b/apps/meteor/client/ui.ts
@@ -3,6 +3,7 @@ import { useCloseChatQuickAction } from './hooks/quickActions/useCloseChatQuickA
 import { useMoveQueueQuickAction } from './hooks/quickActions/useMoveQueueQuickAction';
 import { useOnHoldChatQuickAction } from './hooks/quickActions/useOnHoldChatQuickAction';
 import { useTranscriptQuickAction } from './hooks/quickActions/useTranscriptQuickAction';
+import { useAppsRoomStarActions } from './hooks/roomActions/useAppsRoomStarActions';
 import { useAutotranslateRoomAction } from './hooks/roomActions/useAutotranslateRoomAction';
 import { useCallsRoomAction } from './hooks/roomActions/useCallsRoomAction';
 import { useCannedResponsesRoomAction } from './hooks/roomActions/useCannedResponsesRoomAction';
@@ -69,6 +70,7 @@ export const roomActionHooks = [
 	useUploadedFilesListRoomAction,
 	useVoIPRoomInfoRoomAction,
 	useWebRTCVideoRoomAction,
+	useAppsRoomStarActions,
 ] satisfies (() => RoomToolboxActionConfig | undefined)[];
 
 export const quickActionHooks = [

From dd923a88f39692bbc348bb874452901530f3393b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E3=83=87=E3=83=AF=E3=83=B3=E3=82=B7=E3=83=A5?=
 <61188295+Dnouv@users.noreply.github.com>
Date: Tue, 15 Oct 2024 15:28:42 +0530
Subject: [PATCH 08/12] feat: Apps-Engine method for reading and counting
 unread room messages for a user (#32194)

---
 .changeset/chilled-files-relate.md           |  5 ++
 apps/meteor/app/apps/server/bridges/rooms.ts | 51 ++++++++++++++++++++
 2 files changed, 56 insertions(+)
 create mode 100644 .changeset/chilled-files-relate.md

diff --git a/.changeset/chilled-files-relate.md b/.changeset/chilled-files-relate.md
new file mode 100644
index 000000000000..a16cfda59217
--- /dev/null
+++ b/.changeset/chilled-files-relate.md
@@ -0,0 +1,5 @@
+---
+'@rocket.chat/meteor': minor
+---
+
+Adds methods to the Apps-Engine to interact with unread messages to enhance message capabilities on Apps.
\ No newline at end of file
diff --git a/apps/meteor/app/apps/server/bridges/rooms.ts b/apps/meteor/app/apps/server/bridges/rooms.ts
index 344acc74bda4..4743d72457d8 100644
--- a/apps/meteor/app/apps/server/bridges/rooms.ts
+++ b/apps/meteor/app/apps/server/bridges/rooms.ts
@@ -245,6 +245,57 @@ export class AppRoomBridge extends RoomBridge {
 		return users.map((user: ICoreUser) => userConverter.convertToApp(user));
 	}
 
+	protected async getUnreadByUser(roomId: string, uid: string, options: GetMessagesOptions, appId: string): Promise<Array<IMessageRaw>> {
+		this.orch.debugLog(`The App ${appId} is getting the unread messages for the user: "${uid}" in the room: "${roomId}"`);
+
+		const messageConverter = this.orch.getConverters()?.get('messages');
+		if (!messageConverter) {
+			throw new Error('Message converter not found');
+		}
+
+		const subscription = await Subscriptions.findOneByRoomIdAndUserId(roomId, uid, { projection: { ls: 1 } });
+
+		if (!subscription) {
+			const errorMessage = `No subscription found for user with ID "${uid}" in room with ID "${roomId}". This means the user is not subscribed to the room.`;
+			this.orch.debugLog(errorMessage);
+			throw new Error('User not subscribed to room');
+		}
+
+		const lastSeen = subscription?.ls;
+		if (!lastSeen) {
+			return [];
+		}
+
+		const sort: Sort = options.sort?.createdAt ? { ts: options.sort.createdAt } : { ts: 1 };
+
+		const cursor = Messages.findVisibleByRoomIdBetweenTimestampsNotContainingTypes(roomId, lastSeen, new Date(), [], {
+			...options,
+			sort,
+		});
+
+		const messages = await cursor.toArray();
+		return Promise.all(messages.map((msg) => messageConverter.convertMessageRaw(msg)));
+	}
+
+	protected async getUserUnreadMessageCount(roomId: string, uid: string, appId: string): Promise<number> {
+		this.orch.debugLog(`The App ${appId} is getting the unread messages count of the room: "${roomId}" for the user: "${uid}"`);
+
+		const subscription = await Subscriptions.findOneByRoomIdAndUserId(roomId, uid, { projection: { ls: 1 } });
+
+		if (!subscription) {
+			const errorMessage = `No subscription found for user with ID "${uid}" in room with ID "${roomId}". This means the user is not subscribed to the room.`;
+			this.orch.debugLog(errorMessage);
+			throw new Error('User not subscribed to room');
+		}
+
+		const lastSeen = subscription?.ls;
+		if (!lastSeen) {
+			return 0;
+		}
+
+		return Messages.countVisibleByRoomIdBetweenTimestampsNotContainingTypes(roomId, lastSeen, new Date(), []);
+	}
+
 	protected async removeUsers(roomId: string, usernames: Array<string>, appId: string): Promise<void> {
 		this.orch.debugLog(`The App ${appId} is removing users ${usernames} from room id: ${roomId}`);
 		if (!roomId) {

From cb49d7ab71f1b0446d71d561b23bb60d977f4bf5 Mon Sep 17 00:00:00 2001
From: Abhinav Kumar <abhinav@avitechlab.com>
Date: Tue, 15 Oct 2024 17:33:15 +0530
Subject: [PATCH 09/12] fix: broken jump-to-thread-message functionality using
 link  (#33332)

---
 .changeset/gold-falcons-hear.md               |  5 ++
 .../Threads/components/ThreadMessageList.tsx  |  4 +-
 .../tests/e2e/jump-to-thread-message.spec.ts  | 65 +++++++++++++++++++
 3 files changed, 72 insertions(+), 2 deletions(-)
 create mode 100644 .changeset/gold-falcons-hear.md
 create mode 100644 apps/meteor/tests/e2e/jump-to-thread-message.spec.ts

diff --git a/.changeset/gold-falcons-hear.md b/.changeset/gold-falcons-hear.md
new file mode 100644
index 000000000000..0e47de679ae3
--- /dev/null
+++ b/.changeset/gold-falcons-hear.md
@@ -0,0 +1,5 @@
+---
+'@rocket.chat/meteor': patch
+---
+
+Fixes an issue where a thread message was not scrolled to view when it was opened using its link.
diff --git a/apps/meteor/client/views/room/contextualBar/Threads/components/ThreadMessageList.tsx b/apps/meteor/client/views/room/contextualBar/Threads/components/ThreadMessageList.tsx
index 085ce657a6af..125c08ad67cf 100644
--- a/apps/meteor/client/views/room/contextualBar/Threads/components/ThreadMessageList.tsx
+++ b/apps/meteor/client/views/room/contextualBar/Threads/components/ThreadMessageList.tsx
@@ -66,9 +66,9 @@ const ThreadMessageList = ({ mainMessage }: ThreadMessageListProps): ReactElemen
 	const messageGroupingPeriod = Number(useSetting('Message_GroupingPeriod'));
 
 	const { messageListRef } = useMessageListNavigation();
-	const listRef = useMergedRefs<HTMLElement | null>(listScrollRef, listJumpRef, messageListRef);
+	const listRef = useMergedRefs<HTMLElement | null>(listScrollRef, messageListRef);
 
-	const scrollRef = useMergedRefs<HTMLElement | null>(innerRef, listWrapperScrollRef);
+	const scrollRef = useMergedRefs<HTMLElement | null>(innerRef, listWrapperScrollRef, listJumpRef);
 
 	return (
 		<div className={['thread-list js-scroll-thread', hideUsernames && 'hide-usernames'].filter(isTruthy).join(' ')}>
diff --git a/apps/meteor/tests/e2e/jump-to-thread-message.spec.ts b/apps/meteor/tests/e2e/jump-to-thread-message.spec.ts
new file mode 100644
index 000000000000..da67d0601344
--- /dev/null
+++ b/apps/meteor/tests/e2e/jump-to-thread-message.spec.ts
@@ -0,0 +1,65 @@
+import type { IMessage } from '@rocket.chat/core-typings';
+import { Random } from '@rocket.chat/random';
+
+import { Users } from './fixtures/userStates';
+import type { BaseTest } from './utils/test';
+import { expect, test } from './utils/test';
+
+test.use({ storageState: Users.admin.state });
+test.describe.serial('Threads', () => {
+	let targetChannel: { name: string; _id: string };
+	let threadMessage: IMessage;
+	let mainMessage: IMessage;
+
+	const fillMessages = async (api: BaseTest['api']) => {
+		const { message: parentMessage } = await (
+			await api.post('/chat.postMessage', { roomId: targetChannel._id, text: 'this is a message for reply' })
+		).json();
+		mainMessage = parentMessage;
+
+		// fill thread with messages
+		const largeSimpleMessage = 'This is a large message with a lot of text to create scroll view in thread'.repeat(5);
+		const { message: childMessage } = await (
+			await api.post('/chat.postMessage', { roomId: targetChannel._id, text: largeSimpleMessage, tmid: parentMessage._id })
+		).json();
+		threadMessage = childMessage;
+
+		await Promise.all(
+			Array.from({ length: 5 }).map(() =>
+				api.post('/chat.postMessage', { roomId: targetChannel._id, text: largeSimpleMessage, tmid: parentMessage._id }),
+			),
+		);
+
+		// fill room with normal messages
+		await Promise.all(
+			Array.from({ length: 5 }).map(() => api.post('/chat.postMessage', { roomId: targetChannel._id, text: largeSimpleMessage })),
+		);
+	};
+
+	test.beforeAll(async ({ api }) => {
+		targetChannel = (await (await api.post('/channels.create', { name: Random.id() })).json()).channel;
+		await fillMessages(api);
+	});
+
+	test.afterAll(({ api }) => api.post('/channels.delete', { roomId: targetChannel._id }));
+
+	test('expect to jump scroll to a non-thread message on opening its message link', async ({ page }) => {
+		const messageLink = `/channel/${targetChannel.name}?msg=${mainMessage._id}`;
+		await page.goto(messageLink);
+
+		const message = await page.locator(`[aria-label=\"Message list\"] [data-id=\"${mainMessage._id}\"]`);
+
+		await expect(message).toBeVisible();
+		await expect(message).toBeInViewport();
+	});
+
+	test('expect to jump scroll to thread message on opening its message link', async ({ page }) => {
+		const threadMessageLink = `/channel/general?msg=${threadMessage._id}`;
+		await page.goto(threadMessageLink);
+
+		const message = await page.locator(`[aria-label=\"Thread message list\"] [data-id=\"${threadMessage._id}\"]`);
+
+		await expect(message).toBeVisible();
+		await expect(message).toBeInViewport();
+	});
+});

From 956bf6184d292b5c3979120e59c01112ac320499 Mon Sep 17 00:00:00 2001
From: Pierre Lehnen <55164754+pierre-lehnen-rc@users.noreply.github.com>
Date: Tue, 15 Oct 2024 10:26:09 -0300
Subject: [PATCH 10/12] chore: store contact emails and phones on the same
 format as user's and visitor's (#33484)

Co-authored-by: Rafael Tapia <18501599+tapiarafael@users.noreply.github.com>
---
 .../app/livechat/server/lib/Contacts.ts       | 12 ++++-----
 .../server/models/raw/LivechatContacts.ts     |  8 +++---
 .../tests/end-to-end/api/livechat/contacts.ts | 26 ++++++++++++++-----
 packages/core-typings/src/ILivechatContact.ts |  5 ++--
 4 files changed, 32 insertions(+), 19 deletions(-)

diff --git a/apps/meteor/app/livechat/server/lib/Contacts.ts b/apps/meteor/app/livechat/server/lib/Contacts.ts
index 1e01dfc9d58d..dd7fb0b99848 100644
--- a/apps/meteor/app/livechat/server/lib/Contacts.ts
+++ b/apps/meteor/app/livechat/server/lib/Contacts.ts
@@ -199,8 +199,8 @@ export async function createContactFromVisitor(visitor: ILivechatVisitor): Promi
 
 	const contactData: InsertionModel<ILivechatContact> = {
 		name: visitor.name || visitor.username,
-		emails: visitor.visitorEmails?.map(({ address }) => address),
-		phones: visitor.phone?.map(({ phoneNumber }) => phoneNumber),
+		emails: visitor.visitorEmails,
+		phones: visitor.phone || undefined,
 		unknown: true,
 		channels: [],
 		customFields: visitor.livechatData,
@@ -233,8 +233,8 @@ export async function createContact(params: CreateContactParams): Promise<string
 
 	const { insertedId } = await LivechatContacts.insertOne({
 		name,
-		emails,
-		phones,
+		emails: emails?.map((address) => ({ address })),
+		phones: phones?.map((phoneNumber) => ({ phoneNumber })),
 		contactManager,
 		channels,
 		customFields,
@@ -262,8 +262,8 @@ export async function updateContact(params: UpdateContactParams): Promise<ILivec
 
 	const updatedContact = await LivechatContacts.updateContact(contactId, {
 		name,
-		emails,
-		phones,
+		emails: emails?.map((address) => ({ address })),
+		phones: phones?.map((phoneNumber) => ({ phoneNumber })),
 		contactManager,
 		channels,
 		customFields,
diff --git a/apps/meteor/server/models/raw/LivechatContacts.ts b/apps/meteor/server/models/raw/LivechatContacts.ts
index 3daea28e326a..5e0f9d6703ac 100644
--- a/apps/meteor/server/models/raw/LivechatContacts.ts
+++ b/apps/meteor/server/models/raw/LivechatContacts.ts
@@ -19,14 +19,14 @@ export class LivechatContactsRaw extends BaseRaw<ILivechatContact> implements IL
 				collation: { locale: 'en', strength: 2, caseLevel: false },
 			},
 			{
-				key: { emails: 1 },
+				key: { 'emails.address': 1 },
 				unique: false,
 				name: 'emails_insensitive',
 				partialFilterExpression: { emails: { $exists: true } },
 				collation: { locale: 'en', strength: 2, caseLevel: false },
 			},
 			{
-				key: { phones: 1 },
+				key: { 'phones.phoneNumber': 1 },
 				partialFilterExpression: { phones: { $exists: true } },
 				unique: false,
 			},
@@ -47,8 +47,8 @@ export class LivechatContactsRaw extends BaseRaw<ILivechatContact> implements IL
 		const match: Filter<ILivechatContact & RootFilterOperators<ILivechatContact>> = {
 			$or: [
 				{ name: { $regex: searchRegex, $options: 'i' } },
-				{ emails: { $regex: searchRegex, $options: 'i' } },
-				{ phones: { $regex: searchRegex, $options: 'i' } },
+				{ 'emails.address': { $regex: searchRegex, $options: 'i' } },
+				{ 'phones.phoneNumber': { $regex: searchRegex, $options: 'i' } },
 			],
 		};
 
diff --git a/apps/meteor/tests/end-to-end/api/livechat/contacts.ts b/apps/meteor/tests/end-to-end/api/livechat/contacts.ts
index 556b232e258e..4c6222ffe74e 100644
--- a/apps/meteor/tests/end-to-end/api/livechat/contacts.ts
+++ b/apps/meteor/tests/end-to-end/api/livechat/contacts.ts
@@ -349,8 +349,16 @@ describe('LIVECHAT - contacts', () => {
 			expect(res.body).to.have.property('success', true);
 			expect(res.body.contact._id).to.be.equal(contactId);
 			expect(res.body.contact.name).to.be.equal(name);
-			expect(res.body.contact.emails).to.be.deep.equal(emails);
-			expect(res.body.contact.phones).to.be.deep.equal(phones);
+			expect(res.body.contact.emails).to.be.deep.equal([
+				{
+					address: emails[0],
+				},
+			]);
+			expect(res.body.contact.phones).to.be.deep.equal([
+				{
+					phoneNumber: phones[0],
+				},
+			]);
 		});
 
 		it('should set the unknown field to false when updating a contact', async () => {
@@ -607,8 +615,12 @@ describe('LIVECHAT - contacts', () => {
 			expect(res.body.contact).to.have.property('createdAt');
 			expect(res.body.contact._id).to.be.equal(contactId);
 			expect(res.body.contact.name).to.be.equal(contact.name);
-			expect(res.body.contact.emails).to.be.deep.equal(contact.emails);
-			expect(res.body.contact.phones).to.be.deep.equal(contact.phones);
+			expect(res.body.contact.emails).to.be.deep.equal([
+				{
+					address: contact.emails[0],
+				},
+			]);
+			expect(res.body.contact.phones).to.be.deep.equal([{ phoneNumber: contact.phones[0] }]);
 			expect(res.body.contact.contactManager).to.be.equal(contact.contactManager);
 		});
 
@@ -715,7 +727,7 @@ describe('LIVECHAT - contacts', () => {
 			expect(res.body.total).to.be.equal(1);
 			expect(res.body.contacts[0]._id).to.be.equal(contactId);
 			expect(res.body.contacts[0].name).to.be.equal(contact.name);
-			expect(res.body.contacts[0].emails[0]).to.be.equal(contact.emails[0]);
+			expect(res.body.contacts[0].emails[0].address).to.be.equal(contact.emails[0]);
 		});
 
 		it('should return only contacts that match the searchText using phone number', async () => {
@@ -727,7 +739,7 @@ describe('LIVECHAT - contacts', () => {
 			expect(res.body.total).to.be.equal(1);
 			expect(res.body.contacts[0]._id).to.be.equal(contactId);
 			expect(res.body.contacts[0].name).to.be.equal(contact.name);
-			expect(res.body.contacts[0].emails[0]).to.be.equal(contact.emails[0]);
+			expect(res.body.contacts[0].phones[0].phoneNumber).to.be.equal(contact.phones[0]);
 		});
 
 		it('should return only contacts that match the searchText using name', async () => {
@@ -739,7 +751,7 @@ describe('LIVECHAT - contacts', () => {
 			expect(res.body.total).to.be.equal(1);
 			expect(res.body.contacts[0]._id).to.be.equal(contactId);
 			expect(res.body.contacts[0].name).to.be.equal(contact.name);
-			expect(res.body.contacts[0].emails[0]).to.be.equal(contact.emails[0]);
+			expect(res.body.contacts[0].emails[0].address).to.be.equal(contact.emails[0]);
 		});
 
 		it('should return an empty list if no contacts exist', async () => {
diff --git a/packages/core-typings/src/ILivechatContact.ts b/packages/core-typings/src/ILivechatContact.ts
index 66f0eeeed825..466eeb23d039 100644
--- a/packages/core-typings/src/ILivechatContact.ts
+++ b/packages/core-typings/src/ILivechatContact.ts
@@ -1,3 +1,4 @@
+import type { IVisitorEmail, IVisitorPhone } from './ILivechatVisitor';
 import type { IRocketChatRecord } from './IRocketChatRecord';
 import type { IOmnichannelSource } from './IRoom';
 
@@ -20,8 +21,8 @@ export interface ILivechatContactConflictingField {
 
 export interface ILivechatContact extends IRocketChatRecord {
 	name: string;
-	phones?: string[];
-	emails?: string[];
+	phones?: IVisitorPhone[];
+	emails?: IVisitorEmail[];
 	contactManager?: string;
 	unknown?: boolean;
 	hasConflict?: boolean;

From 61c8cec2649460fac68267e632ab6afd38380060 Mon Sep 17 00:00:00 2001
From: Douglas Fabris <devfabris@gmail.com>
Date: Mon, 14 Oct 2024 08:59:12 -0300
Subject: [PATCH 11/12] feat: Omnichannel directory chats filters (#33016)

---
 .changeset/giant-singers-melt.md              |   8 +
 .../currentChats/CurrentChatsPage.tsx         |  14 +-
 .../currentChats/RemoveChatButton.tsx         |  27 +--
 .../directory/ChatsContextualBar.tsx          |   5 +
 .../directory/OmnichannelDirectoryPage.tsx    |  10 +-
 .../directory/chats/ChatFilterByText.tsx      |  93 +++++++++
 .../chats/ChatFiltersContextualBar.tsx        | 186 ++++++++++++++++++
 .../omnichannel/directory/chats/ChatTable.tsx | 148 +++++---------
 .../directory/chats/ChatTableRow.tsx          |  88 +++++++++
 .../directory/chats/useChatsFilters.ts        |  86 ++++++++
 .../directory/chats/useChatsQuery.ts          |  94 +++++++++
 .../omnichannel-contact-center.spec.ts        |   1 +
 .../e2e/page-objects/omnichannel-section.ts   |   4 +
 packages/core-typings/src/IRoom.ts            |   3 +
 packages/rest-typings/src/v1/omnichannel.ts   |   3 +-
 15 files changed, 645 insertions(+), 125 deletions(-)
 create mode 100644 .changeset/giant-singers-melt.md
 create mode 100644 apps/meteor/client/views/omnichannel/directory/chats/ChatFilterByText.tsx
 create mode 100644 apps/meteor/client/views/omnichannel/directory/chats/ChatFiltersContextualBar.tsx
 create mode 100644 apps/meteor/client/views/omnichannel/directory/chats/ChatTableRow.tsx
 create mode 100644 apps/meteor/client/views/omnichannel/directory/chats/useChatsFilters.ts
 create mode 100644 apps/meteor/client/views/omnichannel/directory/chats/useChatsQuery.ts

diff --git a/.changeset/giant-singers-melt.md b/.changeset/giant-singers-melt.md
new file mode 100644
index 000000000000..266c18bb13c8
--- /dev/null
+++ b/.changeset/giant-singers-melt.md
@@ -0,0 +1,8 @@
+---
+'@rocket.chat/core-typings': minor
+'@rocket.chat/rest-typings': minor
+'@rocket.chat/i18n': minor
+'@rocket.chat/meteor': minor
+---
+
+Adds filters options to the omnichannel directory chats tab
diff --git a/apps/meteor/client/views/omnichannel/currentChats/CurrentChatsPage.tsx b/apps/meteor/client/views/omnichannel/currentChats/CurrentChatsPage.tsx
index f0ea3c5b40ed..614231b003ef 100644
--- a/apps/meteor/client/views/omnichannel/currentChats/CurrentChatsPage.tsx
+++ b/apps/meteor/client/views/omnichannel/currentChats/CurrentChatsPage.tsx
@@ -1,7 +1,7 @@
 import { Callout, Pagination } from '@rocket.chat/fuselage';
 import { useMutableCallback } from '@rocket.chat/fuselage-hooks';
 import type { GETLivechatRoomsParams } from '@rocket.chat/rest-typings';
-import { usePermission } from '@rocket.chat/ui-contexts';
+import { usePermission, useRouter } from '@rocket.chat/ui-contexts';
 import { hashQueryKey } from '@tanstack/react-query';
 import moment from 'moment';
 import type { ComponentProps, ReactElement } from 'react';
@@ -131,6 +131,7 @@ const CurrentChatsPage = ({ id, onRowClick }: { id?: string; onRowClick: (_id: s
 	const [customFields, setCustomFields] = useState<{ [key: string]: string }>();
 
 	const { t } = useTranslation();
+	const directoryPath = useRouter().buildRoutePath('/omnichannel-directory');
 
 	const canRemoveClosedChats = usePermission('remove-closed-livechat-room');
 	const { enabled: isPriorityEnabled } = useOmnichannelPriorities();
@@ -204,7 +205,11 @@ const CurrentChatsPage = ({ id, onRowClick }: { id?: string; onRowClick: (_id: s
 					<GenericTableCell withTruncatedText data-qa='current-chats-cell-status'>
 						<RoomActivityIcon room={room} /> {getStatusText(open, onHold, !!servedBy?.username)}
 					</GenericTableCell>
-					{canRemoveClosedChats && !open && <RemoveChatButton _id={_id} />}
+					{canRemoveClosedChats && (
+						<GenericTableCell maxHeight='x36' fontScale='p2' color='hint' withTruncatedText data-qa='current-chats-cell-delete'>
+							{!open && <RemoveChatButton _id={_id} />}
+						</GenericTableCell>
+					)}
 				</GenericTableRow>
 			);
 		},
@@ -304,10 +309,7 @@ const CurrentChatsPage = ({ id, onRowClick }: { id?: string; onRowClick: (_id: s
 					<Callout type='warning' title={t('This_page_will_be_deprecated_soon')}>
 						<Trans i18nKey='Manage_conversations_in_the_contact_center'>
 							Manage conversations in the
-							<a target='_blank' href='https://go.rocket.chat/i/omnichannel-docs'>
-								contact center
-							</a>
-							.
+							<a href={directoryPath}>contact center</a>.
 						</Trans>
 					</Callout>
 					{((isSuccess && data?.rooms.length > 0) || queryHasChanged) && (
diff --git a/apps/meteor/client/views/omnichannel/currentChats/RemoveChatButton.tsx b/apps/meteor/client/views/omnichannel/currentChats/RemoveChatButton.tsx
index f487eed3599f..796028d024b0 100644
--- a/apps/meteor/client/views/omnichannel/currentChats/RemoveChatButton.tsx
+++ b/apps/meteor/client/views/omnichannel/currentChats/RemoveChatButton.tsx
@@ -1,27 +1,27 @@
 import { IconButton } from '@rocket.chat/fuselage';
-import { useMutableCallback } from '@rocket.chat/fuselage-hooks';
+import { useEffectEvent } from '@rocket.chat/fuselage-hooks';
 import { useSetModal, useToastMessageDispatch, useTranslation } from '@rocket.chat/ui-contexts';
 import React from 'react';
 
 import GenericModal from '../../../components/GenericModal';
-import { GenericTableCell } from '../../../components/GenericTable';
 import { useRemoveCurrentChatMutation } from './hooks/useRemoveCurrentChatMutation';
 
 type RemoveChatButtonProps = { _id: string };
 
 const RemoveChatButton = ({ _id }: RemoveChatButtonProps) => {
-	const removeCurrentChatMutation = useRemoveCurrentChatMutation();
+	const t = useTranslation();
 	const setModal = useSetModal();
 	const dispatchToastMessage = useToastMessageDispatch();
-	const t = useTranslation();
 
-	const handleRemoveClick = useMutableCallback(async () => {
+	const removeCurrentChatMutation = useRemoveCurrentChatMutation();
+
+	const handleRemoveClick = useEffectEvent(async () => {
 		removeCurrentChatMutation.mutate(_id);
 	});
 
-	const handleDelete = useMutableCallback((e) => {
+	const handleDelete = useEffectEvent((e) => {
 		e.stopPropagation();
-		const onDeleteAgent = async (): Promise<void> => {
+		const onDeleteAgent = async () => {
 			try {
 				await handleRemoveClick();
 				dispatchToastMessage({ type: 'success', message: t('Chat_removed') });
@@ -31,27 +31,18 @@ const RemoveChatButton = ({ _id }: RemoveChatButtonProps) => {
 			setModal(null);
 		};
 
-		const handleClose = (): void => {
-			setModal(null);
-		};
-
 		setModal(
 			<GenericModal
 				variant='danger'
 				data-qa-id='current-chats-modal-remove'
 				onConfirm={onDeleteAgent}
-				onClose={handleClose}
-				onCancel={handleClose}
+				onCancel={() => setModal(null)}
 				confirmText={t('Delete')}
 			/>,
 		);
 	});
 
-	return (
-		<GenericTableCell maxHeight='x36' fontScale='p2' color='hint' withTruncatedText data-qa='current-chats-cell-delete'>
-			<IconButton small icon='trash' title={t('Remove')} disabled={removeCurrentChatMutation.isLoading} onClick={handleDelete} />
-		</GenericTableCell>
-	);
+	return <IconButton danger small icon='trash' title={t('Remove')} disabled={removeCurrentChatMutation.isLoading} onClick={handleDelete} />;
 };
 
 export default RemoveChatButton;
diff --git a/apps/meteor/client/views/omnichannel/directory/ChatsContextualBar.tsx b/apps/meteor/client/views/omnichannel/directory/ChatsContextualBar.tsx
index 7493a72becb2..8be6e809f6c2 100644
--- a/apps/meteor/client/views/omnichannel/directory/ChatsContextualBar.tsx
+++ b/apps/meteor/client/views/omnichannel/directory/ChatsContextualBar.tsx
@@ -2,6 +2,7 @@ import { useRouteParameter, useRouter } from '@rocket.chat/ui-contexts';
 import React from 'react';
 
 import ContactHistoryMessagesList from '../contactHistory/MessageList/ContactHistoryMessagesList';
+import ChatFiltersContextualBar from './chats/ChatFiltersContextualBar';
 
 const ChatsContextualBar = () => {
 	const router = useRouter();
@@ -11,6 +12,10 @@ const ChatsContextualBar = () => {
 	const handleOpenRoom = () => id && router.navigate(`/live/${id}`);
 	const handleClose = () => router.navigate('/omnichannel-directory/chats');
 
+	if (context === 'filters') {
+		return <ChatFiltersContextualBar onClose={handleClose} />;
+	}
+
 	if (context === 'info' && id) {
 		return <ContactHistoryMessagesList chatId={id} onClose={handleClose} onOpenRoom={handleOpenRoom} />;
 	}
diff --git a/apps/meteor/client/views/omnichannel/directory/OmnichannelDirectoryPage.tsx b/apps/meteor/client/views/omnichannel/directory/OmnichannelDirectoryPage.tsx
index 34d52bbfb399..faf2ed82eee8 100644
--- a/apps/meteor/client/views/omnichannel/directory/OmnichannelDirectoryPage.tsx
+++ b/apps/meteor/client/views/omnichannel/directory/OmnichannelDirectoryPage.tsx
@@ -9,7 +9,7 @@ import CallTab from './calls/CallTab';
 import ChatTab from './chats/ChatTab';
 import ContactTab from './contacts/ContactTab';
 
-const DEFAULT_TAB = 'contacts';
+const DEFAULT_TAB = 'chats';
 
 const OmnichannelDirectoryPage = () => {
 	const t = useTranslation();
@@ -39,19 +39,19 @@ const OmnichannelDirectoryPage = () => {
 			<Page>
 				<PageHeader title={t('Omnichannel_Contact_Center')} />
 				<Tabs flexShrink={0}>
-					<Tabs.Item selected={tab === 'contacts'} onClick={() => handleTabClick('contacts')}>
-						{t('Contacts')}
-					</Tabs.Item>
 					<Tabs.Item selected={tab === 'chats'} onClick={() => handleTabClick('chats')}>
 						{t('Chats')}
 					</Tabs.Item>
+					<Tabs.Item selected={tab === 'contacts'} onClick={() => handleTabClick('contacts')}>
+						{t('Contacts')}
+					</Tabs.Item>
 					<Tabs.Item selected={tab === 'calls'} onClick={() => handleTabClick('calls')}>
 						{t('Calls')}
 					</Tabs.Item>
 				</Tabs>
 				<PageContent>
-					{tab === 'contacts' && <ContactTab />}
 					{tab === 'chats' && <ChatTab />}
+					{tab === 'contacts' && <ContactTab />}
 					{tab === 'calls' && <CallTab />}
 				</PageContent>
 			</Page>
diff --git a/apps/meteor/client/views/omnichannel/directory/chats/ChatFilterByText.tsx b/apps/meteor/client/views/omnichannel/directory/chats/ChatFilterByText.tsx
new file mode 100644
index 000000000000..cd03a70c015f
--- /dev/null
+++ b/apps/meteor/client/views/omnichannel/directory/chats/ChatFilterByText.tsx
@@ -0,0 +1,93 @@
+import { Box, Button, Chip } from '@rocket.chat/fuselage';
+import { useEffectEvent } from '@rocket.chat/fuselage-hooks';
+import { GenericMenu } from '@rocket.chat/ui-client';
+import { useMethod, useRoute, useSetModal, useToastMessageDispatch, useTranslation } from '@rocket.chat/ui-contexts';
+import { useQueryClient } from '@tanstack/react-query';
+import React from 'react';
+
+import FilterByText from '../../../../components/FilterByText';
+import GenericModal from '../../../../components/GenericModal';
+import { useChatsFilters } from './useChatsFilters';
+
+const ChatFilterByText = () => {
+	const t = useTranslation();
+	const setModal = useSetModal();
+	const dispatchToastMessage = useToastMessageDispatch();
+	const directoryRoute = useRoute('omnichannel-directory');
+	const removeClosedChats = useMethod('livechat:removeAllClosedRooms');
+	const queryClient = useQueryClient();
+
+	const { displayFilters, setFiltersQuery, removeFilter } = useChatsFilters();
+
+	const handleRemoveAllClosed = useEffectEvent(async () => {
+		const onDeleteAll = async () => {
+			try {
+				await removeClosedChats();
+				queryClient.invalidateQueries(['current-chats']);
+				dispatchToastMessage({ type: 'success', message: t('Chat_removed') });
+			} catch (error) {
+				dispatchToastMessage({ type: 'error', message: error });
+			} finally {
+				setModal(null);
+			}
+		};
+
+		setModal(
+			<GenericModal
+				variant='danger'
+				data-qa-id='current-chats-modal-remove-all-closed'
+				onConfirm={onDeleteAll}
+				onCancel={() => setModal(null)}
+				confirmText={t('Delete')}
+			/>,
+		);
+	});
+
+	const menuItems = [
+		{
+			items: [
+				{
+					id: 'delete-all-closed-chats',
+					variant: 'danger',
+					icon: 'trash',
+					content: t('Delete_all_closed_chats'),
+					onClick: handleRemoveAllClosed,
+				} as const,
+			],
+		},
+	];
+
+	return (
+		<>
+			<FilterByText onChange={(text) => setFiltersQuery((prevState) => ({ ...prevState, guest: text }))}>
+				<Button
+					onClick={() =>
+						directoryRoute.push({
+							tab: 'chats',
+							context: 'filters',
+						})
+					}
+					icon='customize'
+				>
+					{t('Filters')}
+				</Button>
+				<GenericMenu placement='bottom-end' detached title={t('More')} sections={menuItems} />
+			</FilterByText>
+			<Box display='flex' flexWrap='wrap' mbe={4}>
+				{Object.entries(displayFilters).map(([value, label], index) => {
+					if (!label) {
+						return null;
+					}
+
+					return (
+						<Chip mie={8} mbe={8} key={index} onClick={() => removeFilter(value)}>
+							{label}
+						</Chip>
+					);
+				})}
+			</Box>
+		</>
+	);
+};
+
+export default ChatFilterByText;
diff --git a/apps/meteor/client/views/omnichannel/directory/chats/ChatFiltersContextualBar.tsx b/apps/meteor/client/views/omnichannel/directory/chats/ChatFiltersContextualBar.tsx
new file mode 100644
index 000000000000..0fb0e9917505
--- /dev/null
+++ b/apps/meteor/client/views/omnichannel/directory/chats/ChatFiltersContextualBar.tsx
@@ -0,0 +1,186 @@
+import { Button, ButtonGroup, Field, FieldLabel, FieldRow, InputBox, Select, TextInput } from '@rocket.chat/fuselage';
+import { useEndpoint, usePermission, useTranslation } from '@rocket.chat/ui-contexts';
+import { useQuery, useQueryClient } from '@tanstack/react-query';
+import { format } from 'date-fns';
+import React from 'react';
+import { Controller, useForm } from 'react-hook-form';
+
+import AutoCompleteAgent from '../../../../components/AutoCompleteAgent';
+import AutoCompleteDepartment from '../../../../components/AutoCompleteDepartment';
+import {
+	ContextualbarHeader,
+	ContextualbarIcon,
+	ContextualbarTitle,
+	ContextualbarClose,
+	ContextualbarScrollableContent,
+	ContextualbarFooter,
+} from '../../../../components/Contextualbar';
+import { CurrentChatTags } from '../../additionalForms';
+import type { ChatsFiltersQuery } from './useChatsFilters';
+import { useChatsFilters } from './useChatsFilters';
+
+type ChatFiltersContextualBarProps = {
+	onClose: () => void;
+};
+
+const ChatFiltersContextualBar = ({ onClose }: ChatFiltersContextualBarProps) => {
+	const t = useTranslation();
+	const canViewLivechatRooms = usePermission('view-livechat-rooms');
+	const canViewCustomFields = usePermission('view-livechat-room-customfields');
+
+	const allCustomFields = useEndpoint('GET', '/v1/livechat/custom-fields');
+	const { data } = useQuery(['livechat/custom-fields'], async () => allCustomFields());
+	const contactCustomFields = data?.customFields.filter((customField) => customField.scope !== 'visitor');
+
+	const { filtersQuery, setFiltersQuery, resetFiltersQuery } = useChatsFilters();
+	const queryClient = useQueryClient();
+
+	const {
+		formState: { isDirty },
+		handleSubmit,
+		control,
+		reset,
+	} = useForm<ChatsFiltersQuery>({
+		values: filtersQuery,
+	});
+
+	const statusOptions: [string, string][] = [
+		['all', t('All')],
+		['closed', t('Closed')],
+		['opened', t('Room_Status_Open')],
+		['onhold', t('On_Hold_Chats')],
+		['queued', t('Queued')],
+	];
+
+	const handleSubmitFilters = (data: ChatsFiltersQuery) => {
+		setFiltersQuery(({ guest }) => ({ ...data, guest }));
+		queryClient.invalidateQueries(['current-chats']);
+	};
+
+	const handleResetFilters = () => {
+		resetFiltersQuery();
+		reset();
+	};
+
+	return (
+		<>
+			<ContextualbarHeader>
+				<ContextualbarIcon name='customize' />
+				<ContextualbarTitle>{t('Filters')}</ContextualbarTitle>
+				<ContextualbarClose onClick={onClose} />
+			</ContextualbarHeader>
+			<ContextualbarScrollableContent>
+				<Field>
+					<FieldLabel>{t('From')}</FieldLabel>
+					<FieldRow>
+						<Controller
+							name='from'
+							control={control}
+							render={({ field }) => <InputBox type='date' placeholder={t('From')} max={format(new Date(), 'yyyy-MM-dd')} {...field} />}
+						/>
+					</FieldRow>
+				</Field>
+				<Field>
+					<FieldLabel>{t('To')}</FieldLabel>
+					<FieldRow>
+						<Controller
+							name='to'
+							control={control}
+							render={({ field }) => <InputBox type='date' placeholder={t('To')} max={format(new Date(), 'yyyy-MM-dd')} {...field} />}
+						/>
+					</FieldRow>
+				</Field>
+				{canViewLivechatRooms && (
+					<Field>
+						<FieldLabel>{t('Served_By')}</FieldLabel>
+						<FieldRow>
+							<Controller
+								name='servedBy'
+								control={control}
+								render={({ field: { value, onChange } }) => <AutoCompleteAgent haveAll value={value} onChange={onChange} />}
+							/>
+						</FieldRow>
+					</Field>
+				)}
+				<Field>
+					<FieldLabel>{t('Status')}</FieldLabel>
+					<Controller
+						name='status'
+						control={control}
+						render={({ field }) => <Select {...field} options={statusOptions} placeholder={t('Select_an_option')} />}
+					/>
+				</Field>
+				<Field>
+					<FieldLabel>{t('Department')}</FieldLabel>
+					<FieldRow>
+						<Controller
+							name='department'
+							control={control}
+							render={({ field: { value, onChange } }) => (
+								<AutoCompleteDepartment haveAll showArchived value={value} onChange={onChange} onlyMyDepartments />
+							)}
+						/>
+					</FieldRow>
+				</Field>
+				<Field>
+					<FieldLabel>{t('Tags')}</FieldLabel>
+					<FieldRow>
+						<Controller
+							name='tags'
+							control={control}
+							render={({ field: { value, onChange } }) => <CurrentChatTags value={value} handler={onChange} viewAll />}
+						/>
+					</FieldRow>
+				</Field>
+				{canViewCustomFields &&
+					contactCustomFields?.map((customField) => {
+						if (customField.type === 'select') {
+							return (
+								<Field key={customField._id}>
+									<FieldLabel>{customField.label}</FieldLabel>
+									<FieldRow>
+										<Controller
+											name={customField._id}
+											control={control}
+											render={({ field }) => (
+												<Select
+													{...field}
+													value={field.value as string}
+													options={(customField.options || '').split(',').map((item) => [item, item])}
+												/>
+											)}
+										/>
+									</FieldRow>
+								</Field>
+							);
+						}
+
+						return (
+							<Field key={customField._id}>
+								<FieldLabel>{customField.label}</FieldLabel>
+								<FieldRow>
+									<Controller
+										name={customField._id}
+										control={control}
+										render={({ field }) => <TextInput {...field} value={field.value as string} />}
+									/>
+								</FieldRow>
+							</Field>
+						);
+					})}
+			</ContextualbarScrollableContent>
+			<ContextualbarFooter>
+				<ButtonGroup stretch>
+					<Button disabled={!isDirty} onClick={handleResetFilters}>
+						{t('Clear_filters')}
+					</Button>
+					<Button onClick={handleSubmit(handleSubmitFilters)} primary>
+						{t('Apply')}
+					</Button>
+				</ButtonGroup>
+			</ContextualbarFooter>
+		</>
+	);
+};
+
+export default ChatFiltersContextualBar;
diff --git a/apps/meteor/client/views/omnichannel/directory/chats/ChatTable.tsx b/apps/meteor/client/views/omnichannel/directory/chats/ChatTable.tsx
index 46b5b6784ce0..f24f4779bee3 100644
--- a/apps/meteor/client/views/omnichannel/directory/chats/ChatTable.tsx
+++ b/apps/meteor/client/views/omnichannel/directory/chats/ChatTable.tsx
@@ -1,139 +1,93 @@
-import { Tag, Box, Pagination, States, StatesIcon, StatesTitle, StatesActions, StatesAction } from '@rocket.chat/fuselage';
-import { useMutableCallback } from '@rocket.chat/fuselage-hooks';
-import { useRoute, useTranslation, useUserId } from '@rocket.chat/ui-contexts';
+import { Pagination, States, StatesIcon, StatesTitle, StatesActions, StatesAction } from '@rocket.chat/fuselage';
+import { usePermission, useTranslation } from '@rocket.chat/ui-contexts';
 import { hashQueryKey } from '@tanstack/react-query';
-import moment from 'moment';
-import React, { useState, useMemo, useCallback } from 'react';
+import React, { useState, useMemo } from 'react';
 
-import FilterByText from '../../../../components/FilterByText';
 import GenericNoResults from '../../../../components/GenericNoResults/GenericNoResults';
 import {
 	GenericTable,
 	GenericTableBody,
-	GenericTableCell,
 	GenericTableHeader,
 	GenericTableHeaderCell,
 	GenericTableLoadingTable,
-	GenericTableRow,
 } from '../../../../components/GenericTable';
 import { usePagination } from '../../../../components/GenericTable/hooks/usePagination';
 import { useSort } from '../../../../components/GenericTable/hooks/useSort';
+import { useOmnichannelPriorities } from '../../../../omnichannel/hooks/useOmnichannelPriorities';
 import { useCurrentChats } from '../../currentChats/hooks/useCurrentChats';
+import ChatFilterByText from './ChatFilterByText';
+import ChatTableRow from './ChatTableRow';
+import { useChatsFilters } from './useChatsFilters';
+import { useChatsQuery } from './useChatsQuery';
 
 const ChatTable = () => {
 	const t = useTranslation();
-	const [text, setText] = useState('');
-	const userIdLoggedIn = useUserId();
-	const directoryRoute = useRoute('omnichannel-directory');
+	const canRemoveClosedChats = usePermission('remove-closed-livechat-room');
+
+	const { enabled: isPriorityEnabled } = useOmnichannelPriorities();
+	const { filtersQuery: filters } = useChatsFilters();
+	const chatsQuery = useChatsQuery();
 
 	const { current, itemsPerPage, setItemsPerPage: onSetItemsPerPage, setCurrent: onSetCurrent, ...paginationProps } = usePagination();
-	const { sortBy, sortDirection, setSort } = useSort<'fname' | 'department' | 'ts' | 'chatDuration' | 'closedAt'>('fname');
+	const { sortBy, sortDirection, setSort } = useSort<'fname' | 'priorityWeight' | 'department.name' | 'servedBy' | 'ts' | 'lm' | 'status'>(
+		'fname',
+	);
 
 	const query = useMemo(
-		() => ({
-			sort: `{ "${sortBy}": ${sortDirection === 'asc' ? 1 : -1} }`,
-			roomName: text || '',
-			agents: userIdLoggedIn ? [userIdLoggedIn] : [],
-			...(itemsPerPage && { count: itemsPerPage }),
-			...(current && { offset: current }),
-		}),
-		[sortBy, current, sortDirection, itemsPerPage, userIdLoggedIn, text],
+		() => chatsQuery(filters, [sortBy, sortDirection], current, itemsPerPage),
+		[itemsPerPage, filters, sortBy, sortDirection, current, chatsQuery],
 	);
 
-	const onRowClick = useMutableCallback((id) =>
-		directoryRoute.push({
-			tab: 'chats',
-			context: 'info',
-			id,
-		}),
-	);
+	const { data, isLoading, isSuccess, isError, refetch } = useCurrentChats(query);
+
+	const [defaultQuery] = useState(hashQueryKey([query]));
+	const queryHasChanged = defaultQuery !== hashQueryKey([query]);
 
 	const headers = (
 		<>
-			<GenericTableHeaderCell key='fname' direction={sortDirection} active={sortBy === 'fname'} onClick={setSort} sort='fname' w='x400'>
+			<GenericTableHeaderCell key='fname' direction={sortDirection} active={sortBy === 'fname'} onClick={setSort} sort='fname'>
 				{t('Contact_Name')}
 			</GenericTableHeaderCell>
+			{isPriorityEnabled && (
+				<GenericTableHeaderCell
+					key='priorityWeight'
+					direction={sortDirection}
+					active={sortBy === 'priorityWeight'}
+					onClick={setSort}
+					sort='priorityWeight'
+					alignItems='center'
+				>
+					{t('Priority')}
+				</GenericTableHeaderCell>
+			)}
 			<GenericTableHeaderCell
-				key='department'
+				key='department.name'
 				direction={sortDirection}
-				active={sortBy === 'department'}
+				active={sortBy === 'department.name'}
 				onClick={setSort}
-				sort='department'
-				w='x200'
+				sort='department.name'
 			>
 				{t('Department')}
 			</GenericTableHeaderCell>
-			<GenericTableHeaderCell key='ts' direction={sortDirection} active={sortBy === 'ts'} onClick={setSort} sort='ts' w='x200'>
+			<GenericTableHeaderCell key='servedBy' direction={sortDirection} active={sortBy === 'servedBy'} onClick={setSort} sort='servedBy'>
+				{t('Served_By')}
+			</GenericTableHeaderCell>
+			<GenericTableHeaderCell key='ts' direction={sortDirection} active={sortBy === 'ts'} onClick={setSort} sort='ts'>
 				{t('Started_At')}
 			</GenericTableHeaderCell>
-			<GenericTableHeaderCell
-				key='chatDuration'
-				direction={sortDirection}
-				active={sortBy === 'chatDuration'}
-				onClick={setSort}
-				sort='chatDuration'
-				w='x120'
-			>
-				{t('Chat_Duration')}
+			<GenericTableHeaderCell key='lm' direction={sortDirection} active={sortBy === 'lm'} onClick={setSort} sort='lm'>
+				{t('Last_Message')}
 			</GenericTableHeaderCell>
-			<GenericTableHeaderCell
-				key='closedAt'
-				direction={sortDirection}
-				active={sortBy === 'closedAt'}
-				onClick={setSort}
-				sort='closedAt'
-				w='x200'
-			>
-				{t('Closed_At')}
+			<GenericTableHeaderCell key='status' direction={sortDirection} active={sortBy === 'status'} onClick={setSort} sort='status'>
+				{t('Status')}
 			</GenericTableHeaderCell>
+			{canRemoveClosedChats && <GenericTableHeaderCell key='remove' w='x60' data-qa='current-chats-header-remove' />}
 		</>
 	);
 
-	const { data, isLoading, isSuccess, isError, refetch } = useCurrentChats(query);
-
-	const [defaultQuery] = useState(hashQueryKey([query]));
-	const queryHasChanged = defaultQuery !== hashQueryKey([query]);
-
-	const renderRow = useCallback(
-		({ _id, fname, ts, closedAt, department, tags }) => (
-			<GenericTableRow key={_id} tabIndex={0} role='link' onClick={(): void => onRowClick(_id)} action qa-user-id={_id}>
-				<GenericTableCell withTruncatedText>
-					<Box display='flex' flexDirection='column'>
-						<Box withTruncatedText>{fname}</Box>
-						{tags && (
-							<Box color='hint' display='flex' flex-direction='row'>
-								{tags.map((tag: string) => (
-									<Box
-										style={{
-											marginTop: 4,
-											whiteSpace: 'nowrap',
-											overflow: tag.length > 10 ? 'hidden' : 'visible',
-											textOverflow: 'ellipsis',
-										}}
-										key={tag}
-										mie={4}
-									>
-										<Tag style={{ display: 'inline' }} disabled>
-											{tag}
-										</Tag>
-									</Box>
-								))}
-							</Box>
-						)}
-					</Box>
-				</GenericTableCell>
-				<GenericTableCell withTruncatedText>{department ? department.name : ''}</GenericTableCell>
-				<GenericTableCell withTruncatedText>{moment(ts).format('L LTS')}</GenericTableCell>
-				<GenericTableCell withTruncatedText>{moment(closedAt).from(moment(ts), true)}</GenericTableCell>
-				<GenericTableCell withTruncatedText>{moment(closedAt).format('L LTS')}</GenericTableCell>
-			</GenericTableRow>
-		),
-		[onRowClick],
-	);
-
 	return (
 		<>
-			{((isSuccess && data?.rooms.length > 0) || queryHasChanged) && <FilterByText onChange={setText} />}
+			<ChatFilterByText />
 			{isLoading && (
 				<GenericTable>
 					<GenericTableHeader>{headers}</GenericTableHeader>
@@ -156,7 +110,11 @@ const ChatTable = () => {
 				<>
 					<GenericTable>
 						<GenericTableHeader>{headers}</GenericTableHeader>
-						<GenericTableBody>{data?.rooms.map((room) => renderRow(room))}</GenericTableBody>
+						<GenericTableBody>
+							{data?.rooms.map((room) => (
+								<ChatTableRow key={room._id} {...room} />
+							))}
+						</GenericTableBody>
 					</GenericTable>
 					<Pagination
 						divider
diff --git a/apps/meteor/client/views/omnichannel/directory/chats/ChatTableRow.tsx b/apps/meteor/client/views/omnichannel/directory/chats/ChatTableRow.tsx
new file mode 100644
index 000000000000..6fe88e5b929c
--- /dev/null
+++ b/apps/meteor/client/views/omnichannel/directory/chats/ChatTableRow.tsx
@@ -0,0 +1,88 @@
+import type { IOmnichannelRoomWithDepartment } from '@rocket.chat/core-typings';
+import { Tag, Box } from '@rocket.chat/fuselage';
+import { useEffectEvent } from '@rocket.chat/fuselage-hooks';
+import { usePermission, useRoute, useTranslation } from '@rocket.chat/ui-contexts';
+import moment from 'moment';
+import React from 'react';
+
+import { GenericTableCell, GenericTableRow } from '../../../../components/GenericTable';
+import { RoomActivityIcon } from '../../../../omnichannel/components/RoomActivityIcon';
+import { useOmnichannelPriorities } from '../../../../omnichannel/hooks/useOmnichannelPriorities';
+import { PriorityIcon } from '../../../../omnichannel/priorities/PriorityIcon';
+import RemoveChatButton from '../../currentChats/RemoveChatButton';
+
+const ChatTableRow = (room: IOmnichannelRoomWithDepartment) => {
+	const t = useTranslation();
+	const { _id, fname, tags, servedBy, ts, lm, department, open, onHold, priorityWeight } = room;
+	const { enabled: isPriorityEnabled } = useOmnichannelPriorities();
+
+	const canRemoveClosedChats = usePermission('remove-closed-livechat-room');
+
+	const directoryRoute = useRoute('omnichannel-directory');
+
+	const getStatusText = (open = false, onHold = false): string => {
+		if (!open) {
+			return t('Closed');
+		}
+
+		if (open && !servedBy) {
+			return t('Queued');
+		}
+
+		return onHold ? t('On_Hold_Chats') : t('Room_Status_Open');
+	};
+
+	const onRowClick = useEffectEvent((id) =>
+		directoryRoute.push({
+			tab: 'chats',
+			context: 'info',
+			id,
+		}),
+	);
+
+	return (
+		<GenericTableRow key={_id} tabIndex={0} role='link' onClick={() => onRowClick(_id)} action qa-user-id={_id}>
+			<GenericTableCell withTruncatedText>
+				<Box display='flex' flexDirection='column'>
+					<Box withTruncatedText>{fname}</Box>
+					{tags && (
+						<Box color='hint' display='flex' flex-direction='row'>
+							{tags.map((tag: string) => (
+								<Box
+									style={{
+										marginTop: 4,
+										whiteSpace: 'nowrap',
+										overflow: tag.length > 10 ? 'hidden' : 'visible',
+										textOverflow: 'ellipsis',
+									}}
+									key={tag}
+									mie={4}
+								>
+									<Tag style={{ display: 'inline' }} disabled>
+										{tag}
+									</Tag>
+								</Box>
+							))}
+						</Box>
+					)}
+				</Box>
+			</GenericTableCell>
+			{isPriorityEnabled && (
+				<GenericTableCell>
+					<PriorityIcon level={priorityWeight} />
+				</GenericTableCell>
+			)}
+			<GenericTableCell withTruncatedText>{department?.name}</GenericTableCell>
+			<GenericTableCell withTruncatedText>{servedBy?.username}</GenericTableCell>
+			<GenericTableCell withTruncatedText>{moment(ts).format('L LTS')}</GenericTableCell>
+			<GenericTableCell withTruncatedText>{moment(lm).format('L LTS')}</GenericTableCell>
+			<GenericTableCell withTruncatedText>
+				<RoomActivityIcon room={room} />
+				{getStatusText(open, onHold)}
+			</GenericTableCell>
+			{canRemoveClosedChats && <GenericTableCell>{!open && <RemoveChatButton _id={_id} />}</GenericTableCell>}
+		</GenericTableRow>
+	);
+};
+
+export default ChatTableRow;
diff --git a/apps/meteor/client/views/omnichannel/directory/chats/useChatsFilters.ts b/apps/meteor/client/views/omnichannel/directory/chats/useChatsFilters.ts
new file mode 100644
index 000000000000..0727e08abf98
--- /dev/null
+++ b/apps/meteor/client/views/omnichannel/directory/chats/useChatsFilters.ts
@@ -0,0 +1,86 @@
+import { useLocalStorage } from '@rocket.chat/fuselage-hooks';
+import type { TranslationKey } from '@rocket.chat/ui-contexts';
+import { useEndpoint, useTranslation } from '@rocket.chat/ui-contexts';
+import { useQuery } from '@tanstack/react-query';
+
+import { useFormatDate } from '../../../../hooks/useFormatDate';
+
+export type ChatsFiltersQuery = {
+	guest: string;
+	servedBy: string;
+	status: string;
+	department: string;
+	from: string;
+	to: string;
+	tags: { _id: string; label: string; value: string }[];
+	[key: string]: unknown;
+};
+
+const statusTextMap: { [key: string]: string } = {
+	all: 'All',
+	closed: 'Closed',
+	opened: 'Room_Status_Open',
+	onhold: 'On_Hold_Chats',
+	queued: 'Queued',
+};
+
+const initialValues: ChatsFiltersQuery = {
+	guest: '',
+	servedBy: 'all',
+	status: 'all',
+	department: 'all',
+	from: '',
+	to: '',
+	tags: [],
+};
+
+const useDisplayFilters = (filtersQuery: ChatsFiltersQuery) => {
+	const t = useTranslation();
+	const formatDate = useFormatDate();
+
+	const { guest, servedBy, status, department, from, to, tags, ...customFields } = filtersQuery;
+
+	const getDepartment = useEndpoint('GET', '/v1/livechat/department/:_id', { _id: department });
+	const getAgent = useEndpoint('GET', '/v1/livechat/users/agent/:_id', { _id: servedBy });
+
+	const { data: departmentData } = useQuery(['getDepartmentDataForFilter', department], () => getDepartment({}));
+	const { data: agentData } = useQuery(['getAgentDataForFilter', servedBy], () => getAgent());
+
+	const displayCustomFields = Object.entries(customFields).reduce((acc, [key, value]) => {
+		acc[key] = value ? `${key}: ${value}` : undefined;
+		return acc;
+	}, {} as { [key: string]: string | undefined });
+
+	return {
+		from: from !== '' ? `${t('From')}: ${formatDate(from)}` : undefined,
+		to: to !== '' ? `${t('To')}: ${formatDate(to)}` : undefined,
+		guest: guest !== '' ? `${t('Text')}: ${guest}` : undefined,
+		servedBy: servedBy !== 'all' ? `${t('Served_By')}: ${agentData?.user.name}` : undefined,
+		department: department !== 'all' ? `${t('Department')}: ${departmentData?.department.name}` : undefined,
+		status: status !== 'all' ? `${t('Status')}: ${t(statusTextMap[status] as TranslationKey)}` : undefined,
+		tags: tags.length > 0 ? tags.map((tag) => `${t('Tag')}: ${tag.label}`) : undefined,
+		...displayCustomFields,
+	};
+};
+
+export const useChatsFilters = () => {
+	const [filtersQuery, setFiltersQuery] = useLocalStorage('conversationsQuery', initialValues);
+	const displayFilters = useDisplayFilters(filtersQuery);
+
+	const resetFiltersQuery = () =>
+		setFiltersQuery((prevState) => {
+			const customFields = Object.keys(prevState).filter((item) => !Object.keys(initialValues).includes(item));
+
+			const initialCustomFields = customFields.reduce((acc, cv) => {
+				acc[cv] = '';
+				return acc;
+			}, {} as { [key: string]: string });
+
+			return { ...initialValues, ...initialCustomFields };
+		});
+
+	const removeFilter = (filter: keyof typeof initialValues) =>
+		setFiltersQuery((prevState) => ({ ...prevState, [filter]: initialValues[filter] }));
+
+	return { filtersQuery, setFiltersQuery, resetFiltersQuery, displayFilters, removeFilter };
+};
diff --git a/apps/meteor/client/views/omnichannel/directory/chats/useChatsQuery.ts b/apps/meteor/client/views/omnichannel/directory/chats/useChatsQuery.ts
new file mode 100644
index 000000000000..193fd6d72aaa
--- /dev/null
+++ b/apps/meteor/client/views/omnichannel/directory/chats/useChatsQuery.ts
@@ -0,0 +1,94 @@
+import type { GETLivechatRoomsParams } from '@rocket.chat/rest-typings';
+import { usePermission, useUserId } from '@rocket.chat/ui-contexts';
+import moment from 'moment';
+
+import type { ChatsFiltersQuery } from './useChatsFilters';
+
+type useQueryType = (
+	debouncedParams: ChatsFiltersQuery,
+	[column, direction]: [string, 'asc' | 'desc'],
+	current: number,
+	itemsPerPage: 25 | 50 | 100,
+) => GETLivechatRoomsParams;
+
+type CurrentChatQuery = {
+	agents?: string[];
+	offset?: number;
+	roomName?: string;
+	departmentId?: string;
+	open?: boolean;
+	createdAt?: string;
+	closedAt?: string;
+	tags?: string[];
+	onhold?: boolean;
+	customFields?: string;
+	sort: string;
+	count?: number;
+	queued?: boolean;
+};
+
+const sortDir = (sortDir: 'asc' | 'desc'): 1 | -1 => (sortDir === 'asc' ? 1 : -1);
+
+export const useChatsQuery = () => {
+	const userIdLoggedIn = useUserId();
+	const canViewLivechatRooms = usePermission('view-livechat-rooms');
+
+	const chatsQuery: useQueryType = (
+		{ guest, servedBy, department, status, from, to, tags, ...customFields },
+		[column, direction],
+		current,
+		itemsPerPage,
+	) => {
+		const query: CurrentChatQuery = {
+			...(guest && { roomName: guest }),
+			sort: JSON.stringify({
+				[column]: sortDir(direction),
+				ts: column === 'ts' ? sortDir(direction) : undefined,
+			}),
+			...(itemsPerPage && { count: itemsPerPage }),
+			...(current && { offset: current }),
+		};
+
+		if (from || to) {
+			query.createdAt = JSON.stringify({
+				...(from && {
+					start: moment(new Date(from)).set({ hour: 0, minutes: 0, seconds: 0 }).toISOString(),
+				}),
+				...(to && {
+					end: moment(new Date(to)).set({ hour: 23, minutes: 59, seconds: 59 }).toISOString(),
+				}),
+			});
+		}
+
+		if (status !== 'all') {
+			query.open = status === 'opened' || status === 'onhold' || status === 'queued';
+			query.onhold = status === 'onhold';
+			query.queued = status === 'queued';
+		}
+
+		if (canViewLivechatRooms && servedBy && servedBy !== 'all') {
+			query.agents = [servedBy];
+		} else {
+			query.agents = userIdLoggedIn ? [userIdLoggedIn] : [];
+		}
+
+		if (department && department !== 'all') {
+			query.departmentId = department;
+		}
+
+		if (tags && tags.length > 0) {
+			query.tags = tags.map((tag) => tag.value);
+		}
+
+		if (customFields && Object.keys(customFields).length > 0) {
+			const customFieldsQuery = Object.fromEntries(Object.entries(customFields).filter((item) => item[1] !== undefined && item[1] !== ''));
+			if (Object.keys(customFieldsQuery).length > 0) {
+				query.customFields = JSON.stringify(customFieldsQuery);
+			}
+		}
+
+		return query;
+	};
+
+	return chatsQuery;
+};
diff --git a/apps/meteor/tests/e2e/omnichannel/omnichannel-contact-center.spec.ts b/apps/meteor/tests/e2e/omnichannel/omnichannel-contact-center.spec.ts
index a9745288f967..7c3a15c21c38 100644
--- a/apps/meteor/tests/e2e/omnichannel/omnichannel-contact-center.spec.ts
+++ b/apps/meteor/tests/e2e/omnichannel/omnichannel-contact-center.spec.ts
@@ -91,6 +91,7 @@ test.describe('Omnichannel Contact Center', () => {
 	test.beforeEach(async ({ page }) => {
 		await page.goto('/');
 		await poOmniSection.btnContactCenter.click();
+		await poOmniSection.tabContacts.click();
 		await page.waitForURL(URL.contactCenter);
 	});
 
diff --git a/apps/meteor/tests/e2e/page-objects/omnichannel-section.ts b/apps/meteor/tests/e2e/page-objects/omnichannel-section.ts
index 87a34a66356e..e1f2cfb23de2 100644
--- a/apps/meteor/tests/e2e/page-objects/omnichannel-section.ts
+++ b/apps/meteor/tests/e2e/page-objects/omnichannel-section.ts
@@ -22,4 +22,8 @@ export class OmnichannelSection {
 	get btnContactCenter(): Locator {
 		return this.page.locator('role=button[name="Contact Center"]');
 	}
+
+	get tabContacts(): Locator {
+		return this.page.locator('role=tab[name="Contacts"]');
+	}
 }
diff --git a/packages/core-typings/src/IRoom.ts b/packages/core-typings/src/IRoom.ts
index cba7fbede924..16cfa0142d9a 100644
--- a/packages/core-typings/src/IRoom.ts
+++ b/packages/core-typings/src/IRoom.ts
@@ -1,3 +1,4 @@
+import type { ILivechatDepartment } from './ILivechatDepartment';
 import type { ILivechatPriority } from './ILivechatPriority';
 import type { ILivechatVisitor } from './ILivechatVisitor';
 import type { IMessage, MessageTypesValues } from './IMessage';
@@ -354,6 +355,8 @@ export type IOmnichannelRoomClosingInfo = Pick<IOmnichannelGenericRoom, 'closer'
 	chatDuration: number;
 };
 
+export type IOmnichannelRoomWithDepartment = IOmnichannelRoom & { department?: ILivechatDepartment };
+
 export const isOmnichannelRoom = (room: Pick<IRoom, 't'>): room is IOmnichannelRoom & IRoom => room.t === 'l';
 
 export const isVoipRoom = (room: IRoom): room is IVoipRoom & IRoom => room.t === 'v';
diff --git a/packages/rest-typings/src/v1/omnichannel.ts b/packages/rest-typings/src/v1/omnichannel.ts
index 8b7fd7162934..d28e11ef3e97 100644
--- a/packages/rest-typings/src/v1/omnichannel.ts
+++ b/packages/rest-typings/src/v1/omnichannel.ts
@@ -9,6 +9,7 @@ import type {
 	ILivechatVisitorDTO,
 	IMessage,
 	IOmnichannelRoom,
+	IOmnichannelRoomWithDepartment,
 	IRoom,
 	ISetting,
 	ILivechatAgentActivity,
@@ -3941,7 +3942,7 @@ export type OmnichannelEndpoints = {
 		DELETE: () => void;
 	};
 	'/v1/livechat/rooms': {
-		GET: (params: GETLivechatRoomsParams) => PaginatedResult<{ rooms: IOmnichannelRoom[] }>;
+		GET: (params: GETLivechatRoomsParams) => PaginatedResult<{ rooms: IOmnichannelRoomWithDepartment[] }>;
 	};
 	'/v1/livechat/room/:rid/priority': {
 		POST: (params: POSTLivechatRoomPriorityParams) => void;

From 094b155205bbfa617da6a9b5f0d99610385f0d93 Mon Sep 17 00:00:00 2001
From: Douglas Fabris <devfabris@gmail.com>
Date: Mon, 14 Oct 2024 14:17:40 -0300
Subject: [PATCH 12/12] chore: Get livechat rooms rooms properly on chats table
 (#33568)

---
 .../views/omnichannel/directory/chats/useChatsQuery.ts      | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/apps/meteor/client/views/omnichannel/directory/chats/useChatsQuery.ts b/apps/meteor/client/views/omnichannel/directory/chats/useChatsQuery.ts
index 193fd6d72aaa..494741d2d794 100644
--- a/apps/meteor/client/views/omnichannel/directory/chats/useChatsQuery.ts
+++ b/apps/meteor/client/views/omnichannel/directory/chats/useChatsQuery.ts
@@ -66,10 +66,12 @@ export const useChatsQuery = () => {
 			query.queued = status === 'queued';
 		}
 
+		if (!canViewLivechatRooms) {
+			query.agents = userIdLoggedIn ? [userIdLoggedIn] : [];
+		}
+
 		if (canViewLivechatRooms && servedBy && servedBy !== 'all') {
 			query.agents = [servedBy];
-		} else {
-			query.agents = userIdLoggedIn ? [userIdLoggedIn] : [];
 		}
 
 		if (department && department !== 'all') {