Add basic support for displaying emotes (#161)

src/app/molecules/message/Message.jsx

@@ -106,10 +106,17 @@ MessageReply.propTypes = {
   content: PropTypes.string.isRequired,
 };
 
-function MessageContent({ content, isMarkdown, isEdited }) {
+function MessageContent({
+  senderName,
+  content,
+  isMarkdown,
+  isEdited,
+  msgType,
+}) {
   return (
     <div className="message__content">
       <div className="text text-b1">
+        { msgType === 'm.emote' && `* ${senderName} ` }
         { isMarkdown ? genMarkdown(content) : linkifyContent(content) }
       </div>
       { isEdited && <Text className="message__content-edited" variant="b3">(edited)</Text>}
@@ -121,9 +128,11 @@ MessageContent.defaultProps = {
   isEdited: false,
 };
 MessageContent.propTypes = {
+  senderName: PropTypes.string.isRequired,
   content: PropTypes.node.isRequired,
   isMarkdown: PropTypes.bool,
   isEdited: PropTypes.bool,
+  msgType: PropTypes.string.isRequired,
 };
 
 function MessageEdit({ content, onSave, onCancel }) {
@@ -228,10 +237,27 @@ MessageOptions.propTypes = {
 
 function Message({
   avatar, header, reply, content, editContent, reactions, options,
+  msgType,
 }) {
-  const msgClass = header === null ? ' message--content-only' : ' message--full';
+  const className = [
+    'message',
+    header === null ? ' message--content-only' : ' message--full',
+  ];
+  switch (msgType) {
+    case 'm.text':
+      className.push('message--type-text');
+      break;
+    case 'm.emote':
+      className.push('message--type-emote');
+      break;
+    case 'm.notice':
+      className.push('message--type-notice');
+      break;
+    default:
+  }
+
   return (
-    <div className={`message${msgClass}`}>
+    <div className={className.join(' ')}>
       <div className="message__avatar-container">
         {avatar !== null && avatar}
       </div>
@@ -254,6 +280,7 @@ Message.defaultProps = {
   editContent: null,
   reactions: null,
   options: null,
+  msgType: 'm.text',
 };
 Message.propTypes = {
   avatar: PropTypes.node,
@@ -263,6 +290,7 @@ Message.propTypes = {
   editContent: PropTypes.node,
   reactions: PropTypes.node,
   options: PropTypes.node,
+  msgType: PropTypes.string,
 };
 
 export {

src/app/molecules/message/Message.scss

@@ -410,3 +410,14 @@
     }
   }
 }
+
+.message.message--type-emote {
+  .message__content {
+    font-style: italic;
+
+    // Remove blockness of first `<p>` so that markdown emotes stay on one line.
+    p:first-of-type {
+      display: inline;
+    }
+  }
+}

src/app/organisms/room/RoomViewContent.jsx

@@ -282,6 +282,7 @@ function RoomViewContent({
 
     let content = mEvent.getContent().body;
     if (typeof content === 'undefined') return null;
+    const msgType = mEvent.getContent()?.msgtype;
     let reply = null;
     let reactions = null;
     let isMarkdown = mEvent.getContent().format === 'org.matrix.custom.html';
@@ -379,8 +380,10 @@ function RoomViewContent({
     );
     const userContent = (
       <MessageContent
+        senderName={getUsernameOfRoomMember(mEvent.sender)}
         isMarkdown={isMarkdown}
         content={isMedia(mEvent) ? genMediaContent(mEvent) : content}
+        msgType={msgType}
         isEdited={isEdited}
       />
     );
@@ -496,6 +499,7 @@ function RoomViewContent({
         header={userHeader}
         reply={userReply}
         content={editEvent !== null && isEditingEvent ? null : userContent}
+        msgType={msgType}
         editContent={editEvent !== null && isEditingEvent ? (
           <MessageEdit
             content={content}