[issue-21645-bbb-core] added edition feature to playback chat.

src/components/chat/messages/index.js

@@ -36,6 +36,7 @@ const Messages = ({
               return (
                 <span ref={node => setRef(node, index)}>
                   <UserMessage
+                    edited={!!item.lastEditedTimestamp}
                     reactions={item.reactions}
                     active={active}
                     emphasized={item.emphasized}

src/components/chat/messages/index.scss

@@ -1,7 +1,7 @@
 @import 'src/styles/sizes';
 
 :root {
-  --message-box-shadow-color: var(--gray-light);
+  --gray-light-color: var(--gray-light);
 }
 
 .message {
@@ -53,6 +53,20 @@
     }
   }
 
+  .edited-tag {
+    color: var(--gray-light-color);
+    font-style: italic;
+    font-size: 75%;
+    display: flex;
+    align-items: center;
+    margin-left: 0.5rem;
+    line-height: 1;
+  }
+
+  .edited-label {
+    margin-left: 0.25rem;
+  }
+
   .name {
     font-weight: var(--font-weight-semi-bold);
     overflow: hidden;
@@ -101,7 +115,7 @@
 
     &:focus,
     &:hover {
-      box-shadow: 0 0 0 $margin-extra-small var(--message-box-shadow-color);
+      box-shadow: 0 0 0 $margin-extra-small var(--gray-light-color);
     }
   }
 

src/components/chat/messages/info.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import Icon from 'components/utils/icon';
 import { FormattedTime } from 'react-intl';
 import cx from 'classnames';
 import { getTimestampAsMilliseconds } from 'utils/data';
@@ -21,6 +22,7 @@ const Info = ({
   active,
   name,
   timestamp,
+  edited,
 }) => {
   const milliseconds = getTimestampAsMilliseconds(timestamp);
 
@@ -39,6 +41,13 @@ const Info = ({
           value={milliseconds}
         />
       </div>
+      { edited
+        && (
+        <span className='edited-tag'>
+          <Icon name='pen'/>
+          <span className='edited-label'>(Edited)</span>
+        </span>
+      )}
     </div>
   );
 };

src/components/chat/messages/message.js

@@ -39,6 +39,7 @@ const Message = ({
   emphasized,
   icon,
   initials,
+  edited,
   name,
   reactions,
   timestamp,
@@ -62,6 +63,7 @@ const Message = ({
         />
         <div className="data">
           <Info
+            edited={edited}
             active={active}
             name={name}
             timestamp={timestamp}

src/components/chat/messages/user/index.js

@@ -33,6 +33,7 @@ const User = ({
   name,
   moderator,
   text,
+  edited,
   timestamp,
   reactions,
 }) => {
@@ -43,6 +44,7 @@ const User = ({
       circle={!moderator}
       emphasized={emphasized}
       initials={initials}
+      edited={edited}
       name={name}
       reactions={reactions}
       timestamp={timestamp}

src/components/utils/icon/index.scss

@@ -37,6 +37,10 @@
   content: "\e92a";
 }
 
+.icon-pen:before {
+  content: "\e925";
+}
+
 .icon-notes:before {
   content: "\e94a";
 }

src/utils/builder.js

@@ -456,13 +456,11 @@ const buildChat = result => {
 
       // Normalize reactions to always be an array
       const reactionsList = chat.reactions ? convertToArray(chat.reactions.reaction) : [];
-      const reactions = reactionsList.map((messageReaction) => {
-        console.log('Inside the builder ====', messageReaction);
-        return {
+      const reactions = reactionsList.map((messageReaction) => ({
           emoji: messageReaction._emoji,
           count: messageReaction._count,
-        };
-      });
+        }),
+      );
       return {
         clear,
         emphasized,
@@ -472,6 +470,7 @@ const buildChat = result => {
         message,
         moderator,
         reactions,
+        lastEditedTimestamp: chat._lastEditedTimestamp,
         timestamp: parseFloat(chat._in),
       };
     });