From 08308140435389ddc35cd7adc95e9c79c34e7e11 Mon Sep 17 00:00:00 2001
From: Filipe Marins <filipe.marins@rocket.chat>
Date: Wed, 18 May 2022 20:06:13 -0300
Subject: [PATCH] [FIX] Add open user card to user avatar (#25445)

---
 .../client/views/room/MessageList/components/Message.tsx  | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/apps/meteor/client/views/room/MessageList/components/Message.tsx b/apps/meteor/client/views/room/MessageList/components/Message.tsx
index 18d3f2a50812..ed891518aa58 100644
--- a/apps/meteor/client/views/room/MessageList/components/Message.tsx
+++ b/apps/meteor/client/views/room/MessageList/components/Message.tsx
@@ -5,6 +5,7 @@ import { useToggle } from '@rocket.chat/fuselage-hooks';
 import React, { FC, memo } from 'react';
 
 import UserAvatar from '../../../../components/avatar/UserAvatar';
+import { useMessageActions } from '../../contexts/MessageContext';
 import { useIsMessageHighlight } from '../contexts/MessageHighlightContext';
 import { useIsSelecting, useToggleSelect, useIsSelectedMessage, useCountSelected } from '../contexts/SelectedMessagesContext';
 import MessageContent from './MessageContent';
@@ -21,6 +22,9 @@ const Message: FC<{ message: IMessage; sequential: boolean; subscription?: ISubs
 }) => {
 	const isMessageHighlight = useIsMessageHighlight(message._id);
 	const [isMessageIgnored, toggleMessageIgnored] = useToggle(message.ignored);
+	const {
+		actions: { openUserCard },
+	} = useMessageActions();
 
 	const isSelecting = useIsSelecting();
 	const toggleSelected = useToggleSelect(message._id);
@@ -38,7 +42,9 @@ const Message: FC<{ message: IMessage; sequential: boolean; subscription?: ISubs
 			data-qa-selected={isSelected}
 		>
 			<MessageLeftContainer>
-				{!sequential && message.u.username && !isSelecting && <UserAvatar username={message.u.username} size={'x36'} />}
+				{!sequential && message.u.username && !isSelecting && (
+					<UserAvatar username={message.u.username} size={'x36'} onClick={openUserCard(message.u.username)} style={{ cursor: 'pointer' }} />
+				)}
 				{isSelecting && <CheckBox checked={isSelected} onChange={toggleSelected} />}
 				{sequential && <MessageIndicators message={message} />}
 			</MessageLeftContainer>