import React from 'react';
import { FormattedRelative } from 'react-intl';
import Body from '../post/Body';
import Avatar from '../widgets/Avatar';

const Message = (props) => {
  const { model } = props;
  const sentAt = model[0].sentAt;
  const senderUsername = (model[0].senderUsername || model[0].sentBy);
  return (
    <div className="Message message">
      <div className="container">
        <div data-uuid={model[0].uuid}>
          <div className="Message__left">
            <Avatar sm username={senderUsername} />
          </div>
          <div className="ml-5">
            <div className="media-heading">
              <b>{senderUsername}</b>{' '}
              <span className="text-info">
                <FormattedRelative value={sentAt} />
              </span>
            </div>
            <Body body={model[0].text} />
          </div>
        </div>
      </div>
      {model.slice(1).map(({ uuid, text }, i) =>
        <div className="container" key={i} data-uuid={uuid}>
          <div className="ml-5">
            <Body body={text} />
          </div>
        </div>
      )}
    </div>
  );
};

export default Message;

@@ -68,16 +68,53 @@
 -intl';%0A
+import %7B Link %7D from 'react-router';%0A
 import B
@@ -177,16 +177,96 @@
 Avatar';
+%0Aimport ProfileTooltipOrigin from '../user/profileTooltip/ProfileTooltipOrigin';
 %0A%0Aconst 
@@ -602,174 +602,564 @@
    %3C
-Avatar sm username=%7BsenderUsername%7D /%3E%0A          %3C/div%3E%0A          %3Cdiv className=%22ml-5%22%3E%0A            %3Cdiv className=%22media-heading%22%3E%0A              %3Cb%3E%7BsenderUsername%7D
+ProfileTooltipOrigin username=%7BsenderUsername%7D%3E%0A              %3CLink to=%7B%60/@$%7BsenderUsername%7D%60%7D%3E%0A                %3CAvatar sm username=%7BsenderUsername%7D /%3E%0A              %3C/Link%3E%0A            %3C/ProfileTooltipOrigin%3E%0A          %3C/div%3E%0A          %3Cdiv className=%22ml-5%22%3E%0A            %3Cdiv className=%22media-heading%22%3E%0A              %3Cb%3E%0A                %3CProfileTooltipOrigin username=%7BsenderUsername%7D%3E%0A                  %3CLink to=%7B%60/@$%7BsenderUsername%7D%60%7D%3E%0A                    %7BsenderUsername%7D%0A                  %3C/Link%3E%0A                %3C/ProfileTooltipOrigin%3E%0A              
 %3C/b%3E

Add user tooltip and links in message