1 files changed, 20 insertions, 0 deletions
diff --git a/vnext/src/components/Message.js b/vnext/src/components/Message.js
index 02371ddb..f093221b 100644
--- a/vnext/src/components/Message.js
+++ b/vnext/src/components/Message.js
@@ -6,6 +6,7 @@ import moment from 'moment';
 import { UserType, MessageType } from './Types';
 import Icon from './Icon';
 import Avatar from './Avatar';
+import { UserLink } from './UserInfo';
 
 import { format } from '../utils/embed';
 
@@ -15,6 +16,7 @@ function Message({ data, visitor, children, ...rest }) {
     const isCode = (data.tags || []).indexOf('code') >= 0;
     return (
         <div className="msg-cont">
+            <Recommendations forMessage={data} />
             <header className="h">
                 <Avatar user={data.user}>
                     <div className="msg-ts">
@@ -105,6 +107,24 @@ function Tags({ data, user, ...rest }) {
 
 const TagsList = React.memo(Tags);
 
+function Recommends({ forMessage, ...rest }) {
+    const { likes, recommendations } = forMessage;
+    return recommendations && recommendations.length > 0 && (
+        <div className="msg-recomms">{'❤️ by '}
+            {
+                recommendations.map(it => (
+                    <UserLink key={it.uri || it.uid} user={it} />
+                )).reduce((prev, curr) => [prev, ', ', curr])
+            }
+            {
+                likes > recommendations.length && (<span>&nbsp;and {likes - recommendations.length} others</span>)
+            }
+        </div>
+    ) || null;
+}
+
+const Recommendations = React.memo(Recommends);
+
 Message.propTypes = {
     data: MessageType,
     visitor: UserType.isRequired,