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

src/components/chat/index.js

@@ -38,6 +38,9 @@ const Chat = () => {
     }
   };
 
+  const scrollTo = (element) => {
+    handleAutoScroll(firstNode.current, element, POSITIONS.TOP, config.align);
+  }
   useEffect(() => {
     if (!interaction.current) {
       if (config.scroll) {
@@ -58,6 +61,7 @@ const Chat = () => {
     >
       <Messages
         currentIndex={currentIndex}
+        scrollTo={scrollTo}
         setRef={(node, index) => setRef(node, index)}
       />
     </div>

src/components/chat/messages/index.js

@@ -20,6 +20,7 @@ const defaultProps = {
 
 const Messages = ({
   currentIndex,
+  scrollTo,
   setRef,
 }) => {
 
@@ -33,8 +34,17 @@ const Messages = ({
           switch (type) {
             case ID.USERS:
 
+              const indexOfMessageToBeReplied = (item.replyToMessageId) 
+                ? storage.messages.findIndex((message) => message.id === item.replyToMessageId) : -1;
+              const messageToBeReplied = (indexOfMessageToBeReplied !== -1) 
+                ? storage.messages[indexOfMessageToBeReplied]
+                : null;
               return (
-                <span ref={node => setRef(node, index)}>
+                <span
+                  key={item.id}
+                  id={item.id}
+                  className='user-message-wrapper'
+                  ref={node => setRef(node, index)}>
                   <UserMessage
                     edited={!!item.lastEditedTimestamp}
                     reactions={item.reactions}
@@ -44,6 +54,8 @@ const Messages = ({
                     initials={item.initials}
                     moderator={item.moderator}
                     name={item.name}
+                    messageToBeReplied={messageToBeReplied}
+                    scrollTo={scrollTo}
                     text={item.message}
                     timestamp={timestamp}
                   />

src/components/chat/messages/index.scss

@@ -2,6 +2,27 @@
 
 :root {
   --gray-light-color: var(--gray-light);
+  --gray-lightest-color: var(--gray-lightest);
+  --highlight-color: var(--blue);
+}
+
+.reply-tag {
+  background-color: var(--gray-lightest-color);
+  display: flex;
+  width: 90%;
+  padding: $padding-small;
+  margin-bottom: $margin-extra-small;
+  border-radius: .35rem;
+  align-items: center;
+  line-height: 1;
+}
+
+.user-message-wrapper {
+  transition: background-color .5s ease;
+}
+
+.highlight {
+  background-color: var(--highlight-color);
 }
 
 .message {

src/components/chat/messages/message.js

@@ -5,6 +5,7 @@ import Info from './info';
 import Margin from './margin';
 import player from 'utils/player';
 import './index.scss';
+import Reply from './reply';
 import ChatMessageReactions from './reactions';
 
 const propTypes = {
@@ -39,6 +40,8 @@ const Message = ({
   emphasized,
   icon,
   initials,
+  messageToBeReplied,
+  scrollTo,
   edited,
   name,
   reactions,
@@ -68,6 +71,14 @@ const Message = ({
             name={name}
             timestamp={timestamp}
           />
+          {messageToBeReplied &&
+            <Reply
+              active={active}
+              scrollTo={scrollTo}
+              idToReference={messageToBeReplied.id}
+              text={messageToBeReplied.message}
+            />
+          }
           <div className={cx('text', { inactive: !active, emphasized })}>
             {children}
           </div>

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

@@ -0,0 +1,54 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import cx from 'classnames';
+import '../index.scss';
+
+const propTypes = {
+  active: PropTypes.bool,
+  idToReference: PropTypes.string,
+  text: PropTypes.string,
+};
+
+const defaultProps = {
+  active: false,
+  idToReference: '',
+  text: '',
+};
+
+const Reply = ({
+  active,
+  idToReference,
+  scrollTo,
+  text,
+}) => {
+
+  const handleClickReply = () => {
+    const messageReplied = document.getElementById(idToReference);
+    scrollTo(messageReplied);
+    messageReplied.classList.add('highlight')
+    setTimeout(() => 
+      messageReplied.classList.remove('highlight'), 800
+    );
+  }
+
+  return (
+    <span
+      onClick={handleClickReply}
+      className={cx('reply-tag', {inactive: !active})}
+    >
+      {text}
+    </span>
+  );
+};
+
+Reply.propTypes = propTypes;
+Reply.defaultProps = defaultProps;
+
+// Checks the message active state
+const areEqual = (prevProps, nextProps) => {
+  if (prevProps.active !== nextProps.active) return false;
+
+  return true;
+};
+
+export default React.memo(Reply, areEqual);

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

@@ -35,6 +35,8 @@ const User = ({
   text,
   edited,
   timestamp,
+  messageToBeReplied,
+  scrollTo,
   reactions,
 }) => {
 
@@ -48,6 +50,8 @@ const User = ({
       name={name}
       reactions={reactions}
       timestamp={timestamp}
+      messageToBeReplied={messageToBeReplied}
+      scrollTo={scrollTo}
     >
       <Text
         active={active}

src/utils/builder.js

@@ -463,13 +463,15 @@ const buildChat = result => {
       );
       return {
         clear,
+        id: chat._id,
         emphasized,
         hyperlink: message !== chat._message,
         initials,
         name: chat._name,
         message,
         moderator,
         reactions,
+        replyToMessageId: chat._replyToMessageId,
         lastEditedTimestamp: chat._lastEditedTimestamp,
         timestamp: parseFloat(chat._in),
       };