From e220e02cd5c754ad476a1acd6ca20b5af831a08c Mon Sep 17 00:00:00 2001
From: Guilherme Leme <leme.guilherme.p@gmail.com>
Date: Thu, 14 Nov 2024 12:01:52 -0300
Subject: [PATCH] [issue-21645-bbb-core] added edition feature to playback
 chat.

---
 src/components/chat/messages/index.js      |  1 +
 src/components/chat/messages/index.scss    | 18 ++++++++++++++++--
 src/components/chat/messages/info.js       |  9 +++++++++
 src/components/chat/messages/message.js    |  2 ++
 src/components/chat/messages/user/index.js |  2 ++
 src/components/utils/icon/index.scss       |  4 ++++
 src/utils/builder.js                       |  9 ++++-----
 7 files changed, 38 insertions(+), 7 deletions(-)

diff --git a/src/components/chat/messages/index.js b/src/components/chat/messages/index.js
index 8fe342c3..9e4a3734 100644
--- a/src/components/chat/messages/index.js
+++ b/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}
diff --git a/src/components/chat/messages/index.scss b/src/components/chat/messages/index.scss
index fcfb6b00..7c43c230 100644
--- a/src/components/chat/messages/index.scss
+++ b/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);
     }
   }
 
diff --git a/src/components/chat/messages/info.js b/src/components/chat/messages/info.js
index a27d20f6..abd40dc1 100644
--- a/src/components/chat/messages/info.js
+++ b/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>
   );
 };
diff --git a/src/components/chat/messages/message.js b/src/components/chat/messages/message.js
index da5f81f8..35195bff 100644
--- a/src/components/chat/messages/message.js
+++ b/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}
diff --git a/src/components/chat/messages/user/index.js b/src/components/chat/messages/user/index.js
index 722415e5..cc986930 100644
--- a/src/components/chat/messages/user/index.js
+++ b/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}
diff --git a/src/components/utils/icon/index.scss b/src/components/utils/icon/index.scss
index 9d292002..ff19f741 100644
--- a/src/components/utils/icon/index.scss
+++ b/src/components/utils/icon/index.scss
@@ -37,6 +37,10 @@
   content: "\e92a";
 }
 
+.icon-pen:before {
+  content: "\e925";
+}
+
 .icon-notes:before {
   content: "\e94a";
 }
diff --git a/src/utils/builder.js b/src/utils/builder.js
index a5fd86f7..9e299299 100644
--- a/src/utils/builder.js
+++ b/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),
       };
     });