diff --git a/web/chat/chat-message-list.css b/web/chat/chat-message-list.css --- a/web/chat/chat-message-list.css +++ b/web/chat/chat-message-list.css @@ -84,7 +84,7 @@ span.authorName { color: #777777; font-size: 14px; - padding: 4px 24px; + padding: 4px 56px; } div.darkTextMessage { color: white; @@ -122,7 +122,7 @@ position: relative; display: flex; max-width: calc(min(68%, 1000px)); - margin: 0 4px 0 12px; + margin: 0 4px; } div.fixedWidthMessageBoxContainer { width: 68%; @@ -213,3 +213,14 @@ svg.inlineEngagementIcon { color: #666666; } + +div.avatarContainer { + display: flex; + height: 100%; + align-items: flex-end; + margin: 0 4px 0 12px; +} + +div.avatarOffset { + width: 40px; +} diff --git a/web/chat/composed-message.react.js b/web/chat/composed-message.react.js --- a/web/chat/composed-message.react.js +++ b/web/chat/composed-message.react.js @@ -10,12 +10,14 @@ import { useStringForUser } from 'lib/hooks/ens-cache.js'; import { type ChatMessageInfoItem } from 'lib/selectors/chat-selectors.js'; +import { getAvatarForUser } from 'lib/shared/avatar-utils.js'; import { assertComposableMessageType } from 'lib/types/message-types.js'; import { type ThreadInfo } from 'lib/types/thread-types.js'; import css from './chat-message-list.css'; import FailedSend from './failed-send.react.js'; import InlineEngagement from './inline-engagement.react.js'; +import Avatar from '../components/avatar.react.js'; import { type InputState, InputStateContext } from '../input/input-state.js'; import { tooltipPositions, useMessageTooltip } from '../utils/tooltip-utils.js'; @@ -137,10 +139,23 @@ ); } + let avatar; + if (!isViewer && item.endsCluster) { + const avatarInfo = getAvatarForUser(creator); + avatar = ( +
+ +
+ ); + } else if (!isViewer) { + avatar =
; + } + return ( {authorName}
+ {avatar}