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 @@ -121,12 +121,16 @@ } let inlineSidebar = null; - if (this.props.containsInlineSidebar && item.threadCreatedFromMessage) { + if ( + (this.props.containsInlineSidebar && item.threadCreatedFromMessage) || + item.reactions.size > 0 + ) { const positioning = isViewer ? 'right' : 'left'; inlineSidebar = ( <div className={css.sidebarMarginBottom}> <InlineSidebar threadInfo={item.threadCreatedFromMessage} + reactions={item.reactions} positioning={positioning} /> </div> diff --git a/web/chat/inline-sidebar.react.js b/web/chat/inline-sidebar.react.js --- a/web/chat/inline-sidebar.react.js +++ b/web/chat/inline-sidebar.react.js @@ -4,6 +4,8 @@ import * as React from 'react'; import useInlineSidebarText from 'lib/hooks/inline-sidebar-text.react'; +import type { MessageReactionInfo } from 'lib/selectors/chat-selectors'; +import { stringForReactionList } from 'lib/shared/reaction-utils'; import type { ThreadInfo } from 'lib/types/thread-types'; import CommIcon from '../CommIcon.react'; @@ -12,7 +14,7 @@ type Props = { +threadInfo: ?ThreadInfo, - +reactions?: $ReadOnlyArray<string>, + +reactions?: $ReadOnlyMap<string, MessageReactionInfo>, +positioning: 'left' | 'center' | 'right', }; function InlineSidebar(props: Props): React.Node { @@ -29,17 +31,13 @@ ]); const reactionsList = React.useMemo(() => { - if (!reactions || reactions.length === 0) { + if (!reactions || reactions.size === 0) { return null; } - const reactionsItems = reactions.map(reaction => { - return ( - <div key={reaction} className={css.reactions}> - {reaction} - </div> - ); - }); - return <div className={css.reactionsContainer}>{reactionsItems}</div>; + + const reactionText = stringForReactionList(reactions); + + return <div className={css.reactionsContainer}>{reactionText}</div>; }, [reactions]); const onClick = useOnClickThread(threadInfo); diff --git a/web/chat/robotext-message.react.js b/web/chat/robotext-message.react.js --- a/web/chat/robotext-message.react.js +++ b/web/chat/robotext-message.react.js @@ -38,11 +38,15 @@ class RobotextMessage extends React.PureComponent<Props> { render() { let inlineSidebar; - if (this.props.item.threadCreatedFromMessage) { + if ( + this.props.item.threadCreatedFromMessage || + this.props.item.reactions.size > 0 + ) { inlineSidebar = ( <div className={css.sidebarMarginTop}> <InlineSidebar threadInfo={this.props.item.threadCreatedFromMessage} + reactions={this.props.item.reactions} positioning="center" /> </div>