[FIX] Add open user card to user avatar (#25445)

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>