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 @@ -16,6 +16,7 @@ import css from './chat-message-list.css'; import FailedSend from './failed-send.react.js'; import InlineEngagement from './inline-engagement.react.js'; +import UserAvatar from '../components/user-avatar.react.js'; import { type InputState, InputStateContext } from '../input/input-state.js'; import { tooltipPositions, useMessageTooltip } from '../utils/tooltip-utils.js'; @@ -141,10 +142,22 @@ ); } + let avatar; + if (!isViewer && item.endsCluster) { + avatar = ( +
+ +
+ ); + } else if (!isViewer) { + avatar =
; + } + return ( {authorName}
+ {avatar}