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 = (
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, + +reactions?: $ReadOnlyMap, +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 ( -
- {reaction} -
- ); - }); - return
{reactionsItems}
; + + const reactionText = stringForReactionList(reactions); + + return
{reactionText}
; }, [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 { render() { let inlineSidebar; - if (this.props.item.threadCreatedFromMessage) { + if ( + this.props.item.threadCreatedFromMessage || + this.props.item.reactions.size > 0 + ) { inlineSidebar = (