diff --git a/web/chat/inline-engagement.css b/web/chat/inline-engagement.css --- a/web/chat/inline-engagement.css +++ b/web/chat/inline-engagement.css @@ -62,3 +62,28 @@ svg.inlineEngagementIcon { color: #666666; } + +div.messageLabel { + display: flex; + flex-shrink: 0; +} + +div.messageLabel > span { + font-size: 12px; + padding: 0 3px; + color: var(--message-label-color); +} + +div.messageLabelLeft { + margin-left: 8px; + margin-right: 4px; +} + +div.messageLabelRight { + margin-right: 12px; + margin-left: 4px; +} + +div.onlyMessageLabel { + margin-top: 8px; +} diff --git a/web/chat/inline-engagement.react.js b/web/chat/inline-engagement.react.js --- a/web/chat/inline-engagement.react.js +++ b/web/chat/inline-engagement.react.js @@ -18,9 +18,10 @@ +threadInfo: ?ThreadInfo, +reactions?: ReactionInfo, +positioning: 'left' | 'center' | 'right', + +label?: ?string, }; function InlineEngagement(props: Props): React.Node { - const { threadInfo, reactions, positioning } = props; + const { threadInfo, reactions, positioning, label } = props; const { pushModal, popModal } = useModalContext(); const repliesText = useInlineEngagementText(threadInfo); @@ -87,10 +88,32 @@ ); }, [reactions, onClickReactions, reactionsContainerClasses]); + const isLeft = positioning === 'left'; + const messageLabel = React.useMemo(() => { + if (!label) { + return null; + } + + const labelClasses = classNames({ + [css.messageLabel]: true, + [css.messageLabelLeft]: isLeft, + [css.messageLabelRight]: !isLeft, + [css.onlyMessageLabel]: !sidebarItem && !reactionsList, + }); + + return ( +