diff --git a/apps/meteor/client/components/message/variants/RoomMessage.tsx b/apps/meteor/client/components/message/variants/RoomMessage.tsx index fda86235cbb..d68e7cbd247 100644 --- a/apps/meteor/client/components/message/variants/RoomMessage.tsx +++ b/apps/meteor/client/components/message/variants/RoomMessage.tsx @@ -24,6 +24,7 @@ import RoomMessageContent from './room/RoomMessageContent'; type RoomMessageProps = { message: IMessage & { ignored?: boolean }; + showUserAvatar: boolean; sequential: boolean; unread: boolean; mention: boolean; @@ -33,7 +34,17 @@ type RoomMessageProps = { searchText?: string; }; -const RoomMessage = ({ message, sequential, all, mention, unread, context, ignoredUser, searchText }: RoomMessageProps): ReactElement => { +const RoomMessage = ({ + message, + showUserAvatar, + sequential, + all, + mention, + unread, + context, + ignoredUser, + searchText, +}: RoomMessageProps): ReactElement => { const uid = useUserId(); const editing = useIsMessageHighlight(message._id); const [displayIgnoredMessage, toggleDisplayIgnoredMessage] = useToggle(false); @@ -68,7 +79,7 @@ const RoomMessage = ({ message, sequential, all, mention, unread, context, ignor aria-busy={message.temp} > - {!sequential && message.u.username && !selecting && ( + {!sequential && message.u.username && !selecting && showUserAvatar && ( { +const SystemMessage = ({ message, showUserAvatar }: SystemMessageProps): ReactElement => { const t = useTranslation(); const formatTime = useFormatTime(); const formatDateAndTime = useFormatDateAndTime(); @@ -65,7 +66,7 @@ const SystemMessage = ({ message }: SystemMessageProps): ReactElement => { data-system-message-type={message.t} > - {!isSelecting && } + {!isSelecting && showUserAvatar && } {isSelecting && } diff --git a/apps/meteor/client/components/message/variants/ThreadMessage.tsx b/apps/meteor/client/components/message/variants/ThreadMessage.tsx index 62a5239e883..a9fc195ba1d 100644 --- a/apps/meteor/client/components/message/variants/ThreadMessage.tsx +++ b/apps/meteor/client/components/message/variants/ThreadMessage.tsx @@ -19,9 +19,10 @@ type ThreadMessageProps = { message: IThreadMessage | IThreadMainMessage; unread: boolean; sequential: boolean; + showUserAvatar: boolean; }; -const ThreadMessage = ({ message, sequential, unread }: ThreadMessageProps): ReactElement => { +const ThreadMessage = ({ message, sequential, unread, showUserAvatar }: ThreadMessageProps): ReactElement => { const uid = useUserId(); const editing = useIsMessageHighlight(message._id); const [ignored, toggleIgnoring] = useToggle((message as { ignored?: boolean }).ignored); @@ -47,7 +48,7 @@ const ThreadMessage = ({ message, sequential, unread }: ThreadMessageProps): Rea data-qa-type='message' > - {!sequential && message.u.username && ( + {!sequential && message.u.username && showUserAvatar && ( { it('should render the message when exists', () => { const ThreadMessagePreview = loadMock(); - render(, { wrapper: ProvidersMock }); + render(, { wrapper: ProvidersMock }); expect(screen.getByText(fakeMessage.msg)).to.exist; }); @@ -57,7 +57,7 @@ describe('ThreadMessagePreview', () => { const ThreadMessagePreview = loadMock(); const message = { ...fakeMessage, ignored: true }; - render(, { wrapper: ProvidersMock }); + render(, { wrapper: ProvidersMock }); expect(screen.getByText('Message_Ignored')).to.exist; }); @@ -71,7 +71,7 @@ describe('ThreadMessagePreview', () => { }, }); - render(, { wrapper: ProvidersMock }); + render(, { wrapper: ProvidersMock }); expect(screen.getByText('Parent Message')).to.exist; }); @@ -92,7 +92,7 @@ describe('ThreadMessagePreview', () => { }, }); - render(, { wrapper: ProvidersMock }); + render(, { wrapper: ProvidersMock }); expect(screen.getByText('System Message')).to.exist; }); diff --git a/apps/meteor/client/components/message/variants/ThreadMessagePreview.tsx b/apps/meteor/client/components/message/variants/ThreadMessagePreview.tsx index 33034723c43..4c4facd0e8a 100644 --- a/apps/meteor/client/components/message/variants/ThreadMessagePreview.tsx +++ b/apps/meteor/client/components/message/variants/ThreadMessagePreview.tsx @@ -33,10 +33,11 @@ import ThreadMessagePreviewBody from './threadPreview/ThreadMessagePreviewBody'; type ThreadMessagePreviewProps = { message: IThreadMessage; + showUserAvatar: boolean; sequential: boolean; }; -const ThreadMessagePreview = ({ message, sequential, ...props }: ThreadMessagePreviewProps): ReactElement => { +const ThreadMessagePreview = ({ message, showUserAvatar, sequential, ...props }: ThreadMessagePreviewProps): ReactElement => { const parentMessage = useParentMessage(message.tmid); const translated = useShowTranslated(message); @@ -94,7 +95,7 @@ const ThreadMessagePreview = ({ message, sequential, ...props }: ThreadMessagePr )} goToThread({ rid: message.rid, tmid: message.tmid, msg: message._id }) : undefined}> - {!isSelecting && } + {!isSelecting && showUserAvatar && } {isSelecting && } diff --git a/apps/meteor/client/views/omnichannel/contactHistory/MessageList/ContactHistoryMessage.tsx b/apps/meteor/client/views/omnichannel/contactHistory/MessageList/ContactHistoryMessage.tsx index 096c6498e05..7067d0941a1 100644 --- a/apps/meteor/client/views/omnichannel/contactHistory/MessageList/ContactHistoryMessage.tsx +++ b/apps/meteor/client/views/omnichannel/contactHistory/MessageList/ContactHistoryMessage.tsx @@ -34,7 +34,8 @@ const ContactHistoryMessage: FC<{ message: IMessage; sequential: boolean; isNewDay: boolean; -}> = ({ message, sequential, isNewDay }) => { + showUserAvatar: boolean; +}> = ({ message, sequential, isNewDay, showUserAvatar }) => { const format = useFormatDate(); const formatTime = useFormatTime(); @@ -45,13 +46,15 @@ const ContactHistoryMessage: FC<{ return ( - + {showUserAvatar && ( + + )} @@ -71,7 +74,7 @@ const ContactHistoryMessage: FC<{ {isNewDay && {format(message.ts)}} - {!sequential && message.u.username && ( + {!sequential && message.u.username && showUserAvatar && ( { const [text, setText] = useState(''); const t = useTranslation(); + const showUserAvatar = !!useUserPreference('displayAvatars'); const { itemsList: messageList, loadMoreItems } = useHistoryMessageList( useMemo(() => ({ roomId: chatId, filter: text }), [chatId, text]), ); @@ -99,7 +100,9 @@ const ContactHistoryMessagesVerticalBar = ({ const lastMessage = messages[index - 1]; const isSequential = isMessageSequential(data, lastMessage, messageGroupingPeriod); const isNewDay = isMessageNewDay(data, lastMessage); - return ; + return ( + + ); }} /> )} diff --git a/apps/meteor/client/views/room/MessageList/MessageList.tsx b/apps/meteor/client/views/room/MessageList/MessageList.tsx index 16e701e005a..0d441b822b1 100644 --- a/apps/meteor/client/views/room/MessageList/MessageList.tsx +++ b/apps/meteor/client/views/room/MessageList/MessageList.tsx @@ -1,7 +1,7 @@ import type { IRoom } from '@rocket.chat/core-typings'; import { isThreadMessage } from '@rocket.chat/core-typings'; import { MessageDivider } from '@rocket.chat/fuselage'; -import { useSetting, useTranslation } from '@rocket.chat/ui-contexts'; +import { useSetting, useTranslation, useUserPreference } from '@rocket.chat/ui-contexts'; import type { ReactElement, ComponentProps } from 'react'; import React, { Fragment, memo } from 'react'; @@ -27,6 +27,7 @@ export const MessageList = ({ rid, scrollMessageList }: MessageListProps): React const t = useTranslation(); const messages = useMessages({ rid }); const subscription = useRoomSubscription(); + const showUserAvatar = !!useUserPreference('displayAvatars'); const messageGroupingPeriod = Number(useSetting('Message_GroupingPeriod')); const formatDate = useFormatDate(); @@ -61,6 +62,7 @@ export const MessageList = ({ rid, scrollMessageList }: MessageListProps): React {visible && ( )} - {system && } + {system && } ); })} diff --git a/apps/meteor/client/views/room/components/contextualBar/MessageListTab.tsx b/apps/meteor/client/views/room/components/contextualBar/MessageListTab.tsx index 2f136067d96..a1a63ac2ddd 100644 --- a/apps/meteor/client/views/room/components/contextualBar/MessageListTab.tsx +++ b/apps/meteor/client/views/room/components/contextualBar/MessageListTab.tsx @@ -1,7 +1,7 @@ import type { IMessage } from '@rocket.chat/core-typings'; import type { Icon } from '@rocket.chat/fuselage'; import { Box, MessageDivider, Throbber } from '@rocket.chat/fuselage'; -import { useTranslation } from '@rocket.chat/ui-contexts'; +import { useTranslation, useUserPreference } from '@rocket.chat/ui-contexts'; import type { UseQueryResult } from '@tanstack/react-query'; import type { ReactElement, ComponentProps, ReactNode } from 'react'; import React, { useCallback } from 'react'; @@ -36,6 +36,7 @@ type MessageListTabProps = { const MessageListTab = ({ iconName, title, emptyResultMessage, context, queryResult }: MessageListTabProps): ReactElement => { const t = useTranslation(); const formatDate = useFormatDate(); + const showUserAvatar = !!useUserPreference('displayAvatars'); const closeTabBar = useTabBarClose(); const handleTabBarCloseButtonClick = useCallback(() => { @@ -96,7 +97,7 @@ const MessageListTab = ({ iconName, title, emptyResultMessage, context, queryRes )} {system ? ( - + ) : ( )} diff --git a/apps/meteor/client/views/room/contextualBar/MessageSearchTab/components/MessageSearch.tsx b/apps/meteor/client/views/room/contextualBar/MessageSearchTab/components/MessageSearch.tsx index e8a4c3dabe8..b8c38b9086a 100644 --- a/apps/meteor/client/views/room/contextualBar/MessageSearchTab/components/MessageSearch.tsx +++ b/apps/meteor/client/views/room/contextualBar/MessageSearchTab/components/MessageSearch.tsx @@ -1,5 +1,5 @@ import { Box, MessageDivider } from '@rocket.chat/fuselage'; -import { useSetting, useTranslation } from '@rocket.chat/ui-contexts'; +import { useSetting, useTranslation, useUserPreference } from '@rocket.chat/ui-contexts'; import type { ReactElement } from 'react'; import React, { Fragment, memo, useState } from 'react'; import { Virtuoso } from 'react-virtuoso'; @@ -23,15 +23,14 @@ type MessageSearchProps = { }; const MessageSearch = ({ searchText, globalSearch }: MessageSearchProps): ReactElement => { + const t = useTranslation(); + const formatDate = useFormatDate(); const pageSize = useSetting('PageSize') ?? 10; - const [limit, setLimit] = useState(pageSize); - const messageSearchQuery = useMessageSearchQuery({ searchText, limit, globalSearch }); + const showUserAvatar = !!useUserPreference('displayAvatars'); const subscription = useRoomSubscription(); - - const formatDate = useFormatDate(); - const t = useTranslation(); + const messageSearchQuery = useMessageSearchQuery({ searchText, limit, globalSearch }); return ( @@ -73,7 +72,7 @@ const MessageSearch = ({ searchText, globalSearch }: MessageSearchProps): ReactE )} {system ? ( - + ) : ( )} 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 c1c6d08e289..2a94588f939 100644 --- a/apps/meteor/client/views/room/contextualBar/Threads/components/ThreadMessageList.tsx +++ b/apps/meteor/client/views/room/contextualBar/Threads/components/ThreadMessageList.tsx @@ -60,6 +60,7 @@ const ThreadMessageList = ({ mainMessage }: ThreadMessageListProps): ReactElemen const listRef = useMergedRefs(listScrollRef, listJumpRef); const hideUsernames = useUserPreference('hideUsernames'); + const showUserAvatar = !!useUserPreference('displayAvatars'); const subscription = useRoomSubscription(); const formatDate = useFormatDate(); @@ -101,9 +102,14 @@ const ThreadMessageList = ({ mainMessage }: ThreadMessageListProps): ReactElemen )}
  • {system ? ( - + ) : ( - + )}
    • diff --git a/apps/meteor/ee/client/views/audit/components/AuditMessageList.tsx b/apps/meteor/ee/client/views/audit/components/AuditMessageList.tsx index b00ca9d5510..8aee34e51e9 100644 --- a/apps/meteor/ee/client/views/audit/components/AuditMessageList.tsx +++ b/apps/meteor/ee/client/views/audit/components/AuditMessageList.tsx @@ -1,5 +1,6 @@ import type { IMessage } from '@rocket.chat/core-typings'; import { MessageDivider } from '@rocket.chat/fuselage'; +import { useUserPreference } from '@rocket.chat/ui-contexts'; import type { ReactElement } from 'react'; import React, { Fragment, memo } from 'react'; @@ -15,6 +16,7 @@ type AuditMessageListProps = { export const AuditMessageList = ({ messages }: AuditMessageListProps): ReactElement => { const formatDate = useFormatDate(); + const showUserAvatar = !!useUserPreference('displayAvatars'); return ( <> @@ -26,9 +28,19 @@ export const AuditMessageList = ({ messages }: AuditMessageListProps): ReactElem {newDay && {formatDate(message.ts)}} - {!system && } - - {system && } + {!system && ( + + )} + + {system && } ); })} diff --git a/apps/meteor/tests/unit/client/views/room/MessageList/Message.spec.tsx b/apps/meteor/tests/unit/client/views/room/MessageList/Message.spec.tsx index a8818d23e2b..c5242f0d540 100644 --- a/apps/meteor/tests/unit/client/views/room/MessageList/Message.spec.tsx +++ b/apps/meteor/tests/unit/client/views/room/MessageList/Message.spec.tsx @@ -52,13 +52,33 @@ const RoomMessage = proxyquire.noCallThru().load('../../../../../../client/compo describe('Message', () => { it('should show normal message', () => { - render(); + render( + , + ); expect(screen.getByText(baseMessage.msg)).to.exist; }); it('should show ignored message', () => { - render(); + render( + , + ); expect(screen.getByText('message ignored')).to.exist; }); @@ -72,6 +92,7 @@ describe('Message', () => { mention={false} unread={false} ignoredUser={false} + showUserAvatar={true} />, );