From 5cfd750e06a45be8bc7e800c81b3128b112f970b Mon Sep 17 00:00:00 2001
From: gabriellsh <gabriel.henriques@rocket.chat>
Date: Thu, 28 Apr 2022 16:14:00 -0300
Subject: [PATCH 1/2] Add message emoji component

---
 .../src/components/Message/MessageEmoji.tsx   |  33 ++++
 .../components/Message/MessageEmojiBase.tsx   |  22 +++
 .../MessageReactions/MessageReactionEmoji.tsx |  13 +-
 .../components/Message/Messages.stories.tsx   | 143 ++++++------------
 .../components/Message/Messages.styles.scss   |  14 ++
 .../ThreadMessage/ThreadMessage.stories.tsx   |  53 +++++--
 .../ThreadMessage/ThreadMessage.styles.scss   |  11 ++
 .../ThreadMessage/ThreadMessageEmoji.tsx      |  25 +++
 .../Message/ThreadMessage/index.tsx           |   2 +
 .../fuselage/src/components/Message/index.tsx |   1 +
 10 files changed, 201 insertions(+), 116 deletions(-)
 create mode 100644 packages/fuselage/src/components/Message/MessageEmoji.tsx
 create mode 100644 packages/fuselage/src/components/Message/MessageEmojiBase.tsx
 create mode 100644 packages/fuselage/src/components/Message/ThreadMessage/ThreadMessageEmoji.tsx

diff --git a/packages/fuselage/src/components/Message/MessageEmoji.tsx b/packages/fuselage/src/components/Message/MessageEmoji.tsx
new file mode 100644
index 0000000000..82b73debc0
--- /dev/null
+++ b/packages/fuselage/src/components/Message/MessageEmoji.tsx
@@ -0,0 +1,33 @@
+import type { ReactNode } from 'react';
+import React from 'react';
+
+import { MessageEmojiBase } from './MessageEmojiBase';
+
+type MessageEmojiProps = {
+  name: string;
+  className?: string;
+  image?: string;
+  big?: boolean;
+  children?: ReactNode;
+};
+
+export const MessageEmoji = ({
+  name,
+  className,
+  image,
+  big,
+  children,
+}: MessageEmojiProps) => (
+  <MessageEmojiBase
+    className={[
+      'rcx-message__emoji',
+      className,
+      big && 'rcx-message__emoji--big',
+    ]
+      .filter(Boolean)
+      .join(' ')}
+    name={name}
+    image={image}
+    children={children}
+  />
+);
diff --git a/packages/fuselage/src/components/Message/MessageEmojiBase.tsx b/packages/fuselage/src/components/Message/MessageEmojiBase.tsx
new file mode 100644
index 0000000000..93cd93f26c
--- /dev/null
+++ b/packages/fuselage/src/components/Message/MessageEmojiBase.tsx
@@ -0,0 +1,22 @@
+import type { ReactNode } from 'react';
+import React from 'react';
+
+type MessageEmojiBaseProps = {
+  name: string;
+  className?: string;
+  children?: ReactNode;
+  image?: string;
+};
+
+export const MessageEmojiBase = ({
+  name,
+  className,
+  image,
+  children,
+}: MessageEmojiBaseProps) => (
+  <div
+    className={`${className || ''} ${name}`}
+    style={image && image.length ? { backgroundImage: image } : undefined}
+    children={children}
+  />
+);
diff --git a/packages/fuselage/src/components/Message/MessageReactions/MessageReactionEmoji.tsx b/packages/fuselage/src/components/Message/MessageReactions/MessageReactionEmoji.tsx
index 4c5ddf616e..8a6fcc504b 100644
--- a/packages/fuselage/src/components/Message/MessageReactions/MessageReactionEmoji.tsx
+++ b/packages/fuselage/src/components/Message/MessageReactions/MessageReactionEmoji.tsx
@@ -1,8 +1,12 @@
+import type { ReactNode } from 'react';
 import React from 'react';
 
+import { MessageEmojiBase } from '../MessageEmojiBase';
+
 type MessageReactionEmojiProps = {
   name: string;
   className?: string;
+  children?: ReactNode;
   image?: string;
 };
 
@@ -10,9 +14,12 @@ export const MessageReactionEmoji = ({
   name,
   className,
   image,
+  children,
 }: MessageReactionEmojiProps) => (
-  <div
-    className={`rcx-message-reactions__emoji ${name} ${className}`}
-    style={image && image.length ? { backgroundImage: image } : undefined}
+  <MessageEmojiBase
+    className={`rcx-message-reactions__emoji ${className || ''}`}
+    name={name}
+    image={image}
+    children={children}
   />
 );
diff --git a/packages/fuselage/src/components/Message/Messages.stories.tsx b/packages/fuselage/src/components/Message/Messages.stories.tsx
index f76b0bafc5..5dd1b7be6a 100644
--- a/packages/fuselage/src/components/Message/Messages.stories.tsx
+++ b/packages/fuselage/src/components/Message/Messages.stories.tsx
@@ -3,9 +3,10 @@ import React, { useState } from 'react';
 import Message from '.';
 import { Box, Avatar } from '..';
 import { MessageDivider } from './MessageDivider';
+import { MessageEmoji } from './MessageEmoji';
 import MessageReactions from './MessageReactions';
 import MessageToolbox from './MessageToolbox';
-import ThreadMessage from './ThreadMessage';
+import ThreadMessage, { ThreadMessageEmoji } from './ThreadMessage';
 
 export default {
   title: 'Message/Message',
@@ -15,25 +16,15 @@ export default {
   },
 };
 
+const avatarUrl =
+  'data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAgGBgcGBQgHBwcJCQgKDBQNDAsLDBkSEw8UHRofHh0aHBwgJC4nICIsIxwcKDcpLDAxNDQ0Hyc5PTgyPC4zNDL/2wBDAQkJCQwLDBgNDRgyIRwhMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjL/wAARCAAoACgDASIAAhEBAxEB/8QAGwAAAgIDAQAAAAAAAAAAAAAAAAcEBgIDBQj/xAAuEAACAQQAAwcEAQUAAAAAAAABAgMABAUREiExBhMUIkFRYQcWcYGhFTJSgpH/xAAYAQADAQEAAAAAAAAAAAAAAAACAwQBAP/EAB4RAAIBBQEBAQAAAAAAAAAAAAABAgMREiExE0HR/9oADAMBAAIRAxEAPwBuXuIkhBuMe5ib/AHQP49q4L3mLitryTLTSpOiHQI5k/HzXa/qbFOEudVTu1dumWvcTaNCZYZ7vU6g6LxqjOU/24dfs1Ouh9FnkMpd3Reeyx83hAxZZEhkdV9/MBrX71WGPvJcqrJBGveKATtuXXqNU0pu02bTHXD/AGvJAluyxxRd6F4x00o+NdKoVrjbzJdvVe1t5cVLc2ck8qjnohgpPtz2v7G6JtPQ2VJwjlcw+37mchpnK6GtIuv5NFWeTsLNPvxWTvpfjvOEfwKKzEVkSct2vscS/BIzSN0YRkeX81UpPqO8masJETu7OOccY4dswYFQeftv096XV5knuJGdm2T1+agvMXj8jEaHX905QihabvcbuS7X566mLWLwSY8PuRnk/u4eZ0deTl71Ef6hY+0yM88TzeNZY4luYwpVYyduOfrvhPTnr0pXSX9y5mCsyJMdyxxvwq599em+taItqCSNc90ChvZRUruUcT0JiO18Elpk7t8v41LWzacxkBSuvjQ/FFJayjDWrCTepAQ2vUH0oo/Jk3ovpwJJeVCP5CN+lFFaaMqy+nAyuChvrTI2kN9JAsi2ZOy4IBHMnkSCP+iqBexSWdxLazoUljJVlPUH2oorkV10pRc7b1zXb/hZOzuJvM86QWEXeELxOzHSIPcmiiiunVlF2RNTpRkrs//Z';
+
 export const Default = () => (
   <Box>
     <MessageDivider>May, 24, 2020</MessageDivider>
     <Message className='customclass' clickable>
       <Message.LeftContainer>
-        <Avatar
-          url='data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAgGBgcGBQgHBwcJCQgKDBQNDAsLDBkSEw8UHRofHh0aHBwgJC
-                4nICIsIxwcKDcpLDAxNDQ0Hyc5PTgyPC4zNDL/2wBDAQkJCQwLDBgNDRgyIRwhMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMj
-                IyMjIyMjIyMjIyMjIyMjL/wAARCAAoACgDASIAAhEBAxEB/8QAGwAAAgIDAQAAAAAAAAAAAAAAAAcEBgIDBQj/xAAuEAACAQQAAwcEAQUAAA
-                AAAAABAgMABAUREiExBhMUIkFRYQcWcYGhFTJSgpH/xAAYAQADAQEAAAAAAAAAAAAAAAACAwQBAP/EAB4RAAIBBQEBAQAAAAAAAAAAAAABAg
-                MREiExE0HR/9oADAMBAAIRAxEAPwBuXuIkhBuMe5ib/AHQP49q4L3mLitryTLTSpOiHQI5k/HzXa/qbFOEudVTu1dumWvcTaNCZYZ7vU6g6L
-                xqjOU/24dfs1Ouh9FnkMpd3Reeyx83hAxZZEhkdV9/MBrX71WGPvJcqrJBGveKATtuXXqNU0pu02bTHXD/AGvJAluyxxRd6F4x00o+NdKoVr
-                jbzJdvVe1t5cVLc2ck8qjnohgpPtz2v7G6JtPQ2VJwjlcw+37mchpnK6GtIuv5NFWeTsLNPvxWTvpfjvOEfwKKzEVkSct2vscS/BIzSN0YRk
-                eX81UpPqO8masJETu7OOccY4dswYFQeftv096XV5knuJGdm2T1+agvMXj8jEaHX905QihabvcbuS7X566mLWLwSY8PuRnk/u4eZ0deTl71Ef
-                6hY+0yM88TzeNZY4luYwpVYyduOfrvhPTnr0pXSX9y5mCsyJMdyxxvwq599em+taItqCSNc90ChvZRUruUcT0JiO18Elpk7t8v41LWzacxkB
-                SuvjQ/FFJayjDWrCTepAQ2vUH0oo/Jk3ovpwJJeVCP5CN+lFFaaMqy+nAyuChvrTI2kN9JAsi2ZOy4IBHMnkSCP+iqBexSWdxLazoUljJVlP
-                UH2oorkV10pRc7b1zXb/hZOzuJvM86QWEXeELxOzHSIPcmiiiunVlF2RNTpRkrs//Z'
-          size={'x36'}
-        />
+        <Avatar url={avatarUrl} size={'x36'} />
       </Message.LeftContainer>
       <Message.Container>
         <Message.Header>
@@ -75,20 +66,7 @@ export const WithSequential = () => (
     <MessageDivider>May, 24, 2020</MessageDivider>
     <Message className='customclass' clickable>
       <Message.LeftContainer>
-        <Avatar
-          url='data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAgGBgcGBQgHBwcJCQgKDBQNDAsLDBkSEw8UHRofHh0aHBwgJC
-                4nICIsIxwcKDcpLDAxNDQ0Hyc5PTgyPC4zNDL/2wBDAQkJCQwLDBgNDRgyIRwhMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMj
-                IyMjIyMjIyMjIyMjIyMjL/wAARCAAoACgDASIAAhEBAxEB/8QAGwAAAgIDAQAAAAAAAAAAAAAAAAcEBgIDBQj/xAAuEAACAQQAAwcEAQUAAA
-                AAAAABAgMABAUREiExBhMUIkFRYQcWcYGhFTJSgpH/xAAYAQADAQEAAAAAAAAAAAAAAAACAwQBAP/EAB4RAAIBBQEBAQAAAAAAAAAAAAABAg
-                MREiExE0HR/9oADAMBAAIRAxEAPwBuXuIkhBuMe5ib/AHQP49q4L3mLitryTLTSpOiHQI5k/HzXa/qbFOEudVTu1dumWvcTaNCZYZ7vU6g6L
-                xqjOU/24dfs1Ouh9FnkMpd3Reeyx83hAxZZEhkdV9/MBrX71WGPvJcqrJBGveKATtuXXqNU0pu02bTHXD/AGvJAluyxxRd6F4x00o+NdKoVr
-                jbzJdvVe1t5cVLc2ck8qjnohgpPtz2v7G6JtPQ2VJwjlcw+37mchpnK6GtIuv5NFWeTsLNPvxWTvpfjvOEfwKKzEVkSct2vscS/BIzSN0YRk
-                eX81UpPqO8masJETu7OOccY4dswYFQeftv096XV5knuJGdm2T1+agvMXj8jEaHX905QihabvcbuS7X566mLWLwSY8PuRnk/u4eZ0deTl71Ef
-                6hY+0yM88TzeNZY4luYwpVYyduOfrvhPTnr0pXSX9y5mCsyJMdyxxvwq599em+taItqCSNc90ChvZRUruUcT0JiO18Elpk7t8v41LWzacxkB
-                SuvjQ/FFJayjDWrCTepAQ2vUH0oo/Jk3ovpwJJeVCP5CN+lFFaaMqy+nAyuChvrTI2kN9JAsi2ZOy4IBHMnkSCP+iqBexSWdxLazoUljJVlP
-                UH2oorkV10pRc7b1zXb/hZOzuJvM86QWEXeELxOzHSIPcmiiiunVlF2RNTpRkrs//Z'
-          size={'x36'}
-        />
+        <Avatar url={avatarUrl} size={'x36'} />
       </Message.LeftContainer>
       <Message.Container>
         <Message.Header>
@@ -160,6 +138,37 @@ export const WithSequential = () => (
         </MessageToolbox>
       </MessageToolbox.Wrapper>
     </Message>
+    <Message className='customclass' clickable sequential>
+      <Message.LeftContainer />
+      <Message.Container>
+        <Message.Body>
+          {'Test Message Emoji ->'}{' '}
+          <MessageEmoji name='test' image={`url(${avatarUrl})`} />
+        </Message.Body>
+      </Message.Container>
+      <MessageToolbox.Wrapper>
+        <MessageToolbox>
+          <MessageToolbox.Item icon='quote' />
+          <MessageToolbox.Item icon='clock' />
+          <MessageToolbox.Item icon='thread' />
+        </MessageToolbox>
+      </MessageToolbox.Wrapper>
+    </Message>
+    <Message className='customclass' clickable sequential>
+      <Message.LeftContainer />
+      <Message.Container>
+        <Message.Body>
+          <MessageEmoji big name='test' image={`url(${avatarUrl})`} />
+        </Message.Body>
+      </Message.Container>
+      <MessageToolbox.Wrapper>
+        <MessageToolbox>
+          <MessageToolbox.Item icon='quote' />
+          <MessageToolbox.Item icon='clock' />
+          <MessageToolbox.Item icon='thread' />
+        </MessageToolbox>
+      </MessageToolbox.Wrapper>
+    </Message>
   </Box>
 );
 
@@ -168,20 +177,7 @@ export const MessageWithThread = () => (
     <MessageDivider unreadLabel='Unread'>May, 24, 2020</MessageDivider>
     <Message className='customclass' clickable>
       <Message.LeftContainer>
-        <Avatar
-          url='data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAgGBgcGBQgHBwcJCQgKDBQNDAsLDBkSEw8UHRofHh0aHBwgJC
-                4nICIsIxwcKDcpLDAxNDQ0Hyc5PTgyPC4zNDL/2wBDAQkJCQwLDBgNDRgyIRwhMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMj
-                IyMjIyMjIyMjIyMjIyMjL/wAARCAAoACgDASIAAhEBAxEB/8QAGwAAAgIDAQAAAAAAAAAAAAAAAAcEBgIDBQj/xAAuEAACAQQAAwcEAQUAAA
-                AAAAABAgMABAUREiExBhMUIkFRYQcWcYGhFTJSgpH/xAAYAQADAQEAAAAAAAAAAAAAAAACAwQBAP/EAB4RAAIBBQEBAQAAAAAAAAAAAAABAg
-                MREiExE0HR/9oADAMBAAIRAxEAPwBuXuIkhBuMe5ib/AHQP49q4L3mLitryTLTSpOiHQI5k/HzXa/qbFOEudVTu1dumWvcTaNCZYZ7vU6g6L
-                xqjOU/24dfs1Ouh9FnkMpd3Reeyx83hAxZZEhkdV9/MBrX71WGPvJcqrJBGveKATtuXXqNU0pu02bTHXD/AGvJAluyxxRd6F4x00o+NdKoVr
-                jbzJdvVe1t5cVLc2ck8qjnohgpPtz2v7G6JtPQ2VJwjlcw+37mchpnK6GtIuv5NFWeTsLNPvxWTvpfjvOEfwKKzEVkSct2vscS/BIzSN0YRk
-                eX81UpPqO8masJETu7OOccY4dswYFQeftv096XV5knuJGdm2T1+agvMXj8jEaHX905QihabvcbuS7X566mLWLwSY8PuRnk/u4eZ0deTl71Ef
-                6hY+0yM88TzeNZY4luYwpVYyduOfrvhPTnr0pXSX9y5mCsyJMdyxxvwq599em+taItqCSNc90ChvZRUruUcT0JiO18Elpk7t8v41LWzacxkB
-                SuvjQ/FFJayjDWrCTepAQ2vUH0oo/Jk3ovpwJJeVCP5CN+lFFaaMqy+nAyuChvrTI2kN9JAsi2ZOy4IBHMnkSCP+iqBexSWdxLazoUljJVlP
-                UH2oorkV10pRc7b1zXb/hZOzuJvM86QWEXeELxOzHSIPcmiiiunVlF2RNTpRkrs//Z'
-          size={'x36'}
-        />
+        <Avatar url={avatarUrl} size={'x36'} />
       </Message.LeftContainer>
       <Message.Container>
         <Message.Header>
@@ -272,23 +268,11 @@ export const MessageWithThread = () => (
       </ThreadMessage.Row>
       <ThreadMessage.Row>
         <ThreadMessage.LeftContainer>
-          <Avatar
-            url='data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAgGBgcGBQgHBwcJCQgKDBQNDAsLDBkSEw8UHRofHh0aHBwgJC
-                4nICIsIxwcKDcpLDAxNDQ0Hyc5PTgyPC4zNDL/2wBDAQkJCQwLDBgNDRgyIRwhMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMj
-                IyMjIyMjIyMjIyMjIyMjL/wAARCAAoACgDASIAAhEBAxEB/8QAGwAAAgIDAQAAAAAAAAAAAAAAAAcEBgIDBQj/xAAuEAACAQQAAwcEAQUAAA
-                AAAAABAgMABAUREiExBhMUIkFRYQcWcYGhFTJSgpH/xAAYAQADAQEAAAAAAAAAAAAAAAACAwQBAP/EAB4RAAIBBQEBAQAAAAAAAAAAAAABAg
-                MREiExE0HR/9oADAMBAAIRAxEAPwBuXuIkhBuMe5ib/AHQP49q4L3mLitryTLTSpOiHQI5k/HzXa/qbFOEudVTu1dumWvcTaNCZYZ7vU6g6L
-                xqjOU/24dfs1Ouh9FnkMpd3Reeyx83hAxZZEhkdV9/MBrX71WGPvJcqrJBGveKATtuXXqNU0pu02bTHXD/AGvJAluyxxRd6F4x00o+NdKoVr
-                jbzJdvVe1t5cVLc2ck8qjnohgpPtz2v7G6JtPQ2VJwjlcw+37mchpnK6GtIuv5NFWeTsLNPvxWTvpfjvOEfwKKzEVkSct2vscS/BIzSN0YRk
-                eX81UpPqO8masJETu7OOccY4dswYFQeftv096XV5knuJGdm2T1+agvMXj8jEaHX905QihabvcbuS7X566mLWLwSY8PuRnk/u4eZ0deTl71Ef
-                6hY+0yM88TzeNZY4luYwpVYyduOfrvhPTnr0pXSX9y5mCsyJMdyxxvwq599em+taItqCSNc90ChvZRUruUcT0JiO18Elpk7t8v41LWzacxkB
-                SuvjQ/FFJayjDWrCTepAQ2vUH0oo/Jk3ovpwJJeVCP5CN+lFFaaMqy+nAyuChvrTI2kN9JAsi2ZOy4IBHMnkSCP+iqBexSWdxLazoUljJVlP
-                UH2oorkV10pRc7b1zXb/hZOzuJvM86QWEXeELxOzHSIPcmiiiunVlF2RNTpRkrs//Z'
-            size='x16'
-          />
+          <Avatar url={avatarUrl} size='x16' />
         </ThreadMessage.LeftContainer>
         <ThreadMessage.Container>
           <ThreadMessage.Message>
+            <ThreadMessageEmoji image={`url(${avatarUrl})`} name='test' />
             Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
             nisi ut aliquip ex ea commodo consequat a duis aute irure dolor in
             reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
@@ -362,20 +346,7 @@ export const MessageEditing = () => (
     <MessageDivider>May, 24, 2020</MessageDivider>
     <Message className='customclass' clickable>
       <Message.LeftContainer>
-        <Avatar
-          url='data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAgGBgcGBQgHBwcJCQgKDBQNDAsLDBkSEw8UHRofHh0aHBwgJC
-                4nICIsIxwcKDcpLDAxNDQ0Hyc5PTgyPC4zNDL/2wBDAQkJCQwLDBgNDRgyIRwhMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMj
-                IyMjIyMjIyMjIyMjIyMjL/wAARCAAoACgDASIAAhEBAxEB/8QAGwAAAgIDAQAAAAAAAAAAAAAAAAcEBgIDBQj/xAAuEAACAQQAAwcEAQUAAA
-                AAAAABAgMABAUREiExBhMUIkFRYQcWcYGhFTJSgpH/xAAYAQADAQEAAAAAAAAAAAAAAAACAwQBAP/EAB4RAAIBBQEBAQAAAAAAAAAAAAABAg
-                MREiExE0HR/9oADAMBAAIRAxEAPwBuXuIkhBuMe5ib/AHQP49q4L3mLitryTLTSpOiHQI5k/HzXa/qbFOEudVTu1dumWvcTaNCZYZ7vU6g6L
-                xqjOU/24dfs1Ouh9FnkMpd3Reeyx83hAxZZEhkdV9/MBrX71WGPvJcqrJBGveKATtuXXqNU0pu02bTHXD/AGvJAluyxxRd6F4x00o+NdKoVr
-                jbzJdvVe1t5cVLc2ck8qjnohgpPtz2v7G6JtPQ2VJwjlcw+37mchpnK6GtIuv5NFWeTsLNPvxWTvpfjvOEfwKKzEVkSct2vscS/BIzSN0YRk
-                eX81UpPqO8masJETu7OOccY4dswYFQeftv096XV5knuJGdm2T1+agvMXj8jEaHX905QihabvcbuS7X566mLWLwSY8PuRnk/u4eZ0deTl71Ef
-                6hY+0yM88TzeNZY4luYwpVYyduOfrvhPTnr0pXSX9y5mCsyJMdyxxvwq599em+taItqCSNc90ChvZRUruUcT0JiO18Elpk7t8v41LWzacxkB
-                SuvjQ/FFJayjDWrCTepAQ2vUH0oo/Jk3ovpwJJeVCP5CN+lFFaaMqy+nAyuChvrTI2kN9JAsi2ZOy4IBHMnkSCP+iqBexSWdxLazoUljJVlP
-                UH2oorkV10pRc7b1zXb/hZOzuJvM86QWEXeELxOzHSIPcmiiiunVlF2RNTpRkrs//Z'
-          size={'x36'}
-        />
+        <Avatar url={avatarUrl} size={'x36'} />
       </Message.LeftContainer>
       <Message.Container>
         <Message.Header>
@@ -455,20 +426,7 @@ export const MessageHighlighted = () => (
     <MessageDivider>May, 24, 2020</MessageDivider>
     <Message className='customclass' highlight>
       <Message.LeftContainer>
-        <Avatar
-          url='data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAgGBgcGBQgHBwcJCQgKDBQNDAsLDBkSEw8UHRofHh0aHBwgJC
-                4nICIsIxwcKDcpLDAxNDQ0Hyc5PTgyPC4zNDL/2wBDAQkJCQwLDBgNDRgyIRwhMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMj
-                IyMjIyMjIyMjIyMjIyMjL/wAARCAAoACgDASIAAhEBAxEB/8QAGwAAAgIDAQAAAAAAAAAAAAAAAAcEBgIDBQj/xAAuEAACAQQAAwcEAQUAAA
-                AAAAABAgMABAUREiExBhMUIkFRYQcWcYGhFTJSgpH/xAAYAQADAQEAAAAAAAAAAAAAAAACAwQBAP/EAB4RAAIBBQEBAQAAAAAAAAAAAAABAg
-                MREiExE0HR/9oADAMBAAIRAxEAPwBuXuIkhBuMe5ib/AHQP49q4L3mLitryTLTSpOiHQI5k/HzXa/qbFOEudVTu1dumWvcTaNCZYZ7vU6g6L
-                xqjOU/24dfs1Ouh9FnkMpd3Reeyx83hAxZZEhkdV9/MBrX71WGPvJcqrJBGveKATtuXXqNU0pu02bTHXD/AGvJAluyxxRd6F4x00o+NdKoVr
-                jbzJdvVe1t5cVLc2ck8qjnohgpPtz2v7G6JtPQ2VJwjlcw+37mchpnK6GtIuv5NFWeTsLNPvxWTvpfjvOEfwKKzEVkSct2vscS/BIzSN0YRk
-                eX81UpPqO8masJETu7OOccY4dswYFQeftv096XV5knuJGdm2T1+agvMXj8jEaHX905QihabvcbuS7X566mLWLwSY8PuRnk/u4eZ0deTl71Ef
-                6hY+0yM88TzeNZY4luYwpVYyduOfrvhPTnr0pXSX9y5mCsyJMdyxxvwq599em+taItqCSNc90ChvZRUruUcT0JiO18Elpk7t8v41LWzacxkB
-                SuvjQ/FFJayjDWrCTepAQ2vUH0oo/Jk3ovpwJJeVCP5CN+lFFaaMqy+nAyuChvrTI2kN9JAsi2ZOy4IBHMnkSCP+iqBexSWdxLazoUljJVlP
-                UH2oorkV10pRc7b1zXb/hZOzuJvM86QWEXeELxOzHSIPcmiiiunVlF2RNTpRkrs//Z'
-          size={'x36'}
-        />
+        <Avatar url={avatarUrl} size={'x36'} />
       </Message.LeftContainer>
       <Message.Container>
         <Message.Header>
@@ -548,20 +506,7 @@ export const MessagePending = () => (
     <MessageDivider>May, 24, 2020</MessageDivider>
     <Message className='customclass' isPending>
       <Message.LeftContainer>
-        <Avatar
-          url='data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAgGBgcGBQgHBwcJCQgKDBQNDAsLDBkSEw8UHRofHh0aHBwgJC
-                4nICIsIxwcKDcpLDAxNDQ0Hyc5PTgyPC4zNDL/2wBDAQkJCQwLDBgNDRgyIRwhMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMj
-                IyMjIyMjIyMjIyMjIyMjL/wAARCAAoACgDASIAAhEBAxEB/8QAGwAAAgIDAQAAAAAAAAAAAAAAAAcEBgIDBQj/xAAuEAACAQQAAwcEAQUAAA
-                AAAAABAgMABAUREiExBhMUIkFRYQcWcYGhFTJSgpH/xAAYAQADAQEAAAAAAAAAAAAAAAACAwQBAP/EAB4RAAIBBQEBAQAAAAAAAAAAAAABAg
-                MREiExE0HR/9oADAMBAAIRAxEAPwBuXuIkhBuMe5ib/AHQP49q4L3mLitryTLTSpOiHQI5k/HzXa/qbFOEudVTu1dumWvcTaNCZYZ7vU6g6L
-                xqjOU/24dfs1Ouh9FnkMpd3Reeyx83hAxZZEhkdV9/MBrX71WGPvJcqrJBGveKATtuXXqNU0pu02bTHXD/AGvJAluyxxRd6F4x00o+NdKoVr
-                jbzJdvVe1t5cVLc2ck8qjnohgpPtz2v7G6JtPQ2VJwjlcw+37mchpnK6GtIuv5NFWeTsLNPvxWTvpfjvOEfwKKzEVkSct2vscS/BIzSN0YRk
-                eX81UpPqO8masJETu7OOccY4dswYFQeftv096XV5knuJGdm2T1+agvMXj8jEaHX905QihabvcbuS7X566mLWLwSY8PuRnk/u4eZ0deTl71Ef
-                6hY+0yM88TzeNZY4luYwpVYyduOfrvhPTnr0pXSX9y5mCsyJMdyxxvwq599em+taItqCSNc90ChvZRUruUcT0JiO18Elpk7t8v41LWzacxkB
-                SuvjQ/FFJayjDWrCTepAQ2vUH0oo/Jk3ovpwJJeVCP5CN+lFFaaMqy+nAyuChvrTI2kN9JAsi2ZOy4IBHMnkSCP+iqBexSWdxLazoUljJVlP
-                UH2oorkV10pRc7b1zXb/hZOzuJvM86QWEXeELxOzHSIPcmiiiunVlF2RNTpRkrs//Z'
-          size={'x36'}
-        />
+        <Avatar url={avatarUrl} size={'x36'} />
       </Message.LeftContainer>
       <Message.Container>
         <Message.Header>
diff --git a/packages/fuselage/src/components/Message/Messages.styles.scss b/packages/fuselage/src/components/Message/Messages.styles.scss
index 6fb7418a90..ebd1a78a5a 100644
--- a/packages/fuselage/src/components/Message/Messages.styles.scss
+++ b/packages/fuselage/src/components/Message/Messages.styles.scss
@@ -1,6 +1,7 @@
 @use '../../styles/lengths.scss';
 @use '../../styles/functions.scss';
 @use '../../styles/colors.scss';
+@use '../../styles/mixins/size.scss';
 @use '../../styles/typography.scss';
 @use './mixins.scss';
 
@@ -194,4 +195,17 @@ $message-background-color-highlight: functions.theme(
     display: flex;
     flex-direction: column;
   }
+
+  &__emoji {
+    display: inline-block;
+
+    margin-inline: lengths.margin(2);
+
+    background-size: contain;
+    @include size.square(lengths.size(24));
+
+    &--big {
+      @include size.square(lengths.size(44));
+    }
+  }
 }
diff --git a/packages/fuselage/src/components/Message/ThreadMessage/ThreadMessage.stories.tsx b/packages/fuselage/src/components/Message/ThreadMessage/ThreadMessage.stories.tsx
index ca0173335a..8254e4423c 100644
--- a/packages/fuselage/src/components/Message/ThreadMessage/ThreadMessage.stories.tsx
+++ b/packages/fuselage/src/components/Message/ThreadMessage/ThreadMessage.stories.tsx
@@ -2,6 +2,7 @@ import React from 'react';
 
 import ThreadMessage from '.';
 import { Avatar, Box } from '../..';
+import { ThreadMessageEmoji } from './ThreadMessageEmoji';
 
 export default {
   title: 'Message/ThreadMessage',
@@ -11,6 +12,9 @@ export default {
   },
 };
 
+const avatarUrl =
+  'data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAgGBgcGBQgHBwcJCQgKDBQNDAsLDBkSEw8UHRofHh0aHBwgJC4nICIsIxwcKDcpLDAxNDQ0Hyc5PTgyPC4zNDL/2wBDAQkJCQwLDBgNDRgyIRwhMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjL/wAARCAAoACgDASIAAhEBAxEB/8QAGwAAAgIDAQAAAAAAAAAAAAAAAAcEBgIDBQj/xAAuEAACAQQAAwcEAQUAAAAAAAABAgMABAUREiExBhMUIkFRYQcWcYGhFTJSgpH/xAAYAQADAQEAAAAAAAAAAAAAAAACAwQBAP/EAB4RAAIBBQEBAQAAAAAAAAAAAAABAgMREiExE0HR/9oADAMBAAIRAxEAPwBuXuIkhBuMe5ib/AHQP49q4L3mLitryTLTSpOiHQI5k/HzXa/qbFOEudVTu1dumWvcTaNCZYZ7vU6g6LxqjOU/24dfs1Ouh9FnkMpd3Reeyx83hAxZZEhkdV9/MBrX71WGPvJcqrJBGveKATtuXXqNU0pu02bTHXD/AGvJAluyxxRd6F4x00o+NdKoVrjbzJdvVe1t5cVLc2ck8qjnohgpPtz2v7G6JtPQ2VJwjlcw+37mchpnK6GtIuv5NFWeTsLNPvxWTvpfjvOEfwKKzEVkSct2vscS/BIzSN0YRkeX81UpPqO8masJETu7OOccY4dswYFQeftv096XV5knuJGdm2T1+agvMXj8jEaHX905QihabvcbuS7X566mLWLwSY8PuRnk/u4eZ0deTl71Ef6hY+0yM88TzeNZY4luYwpVYyduOfrvhPTnr0pXSX9y5mCsyJMdyxxvwq599em+taItqCSNc90ChvZRUruUcT0JiO18Elpk7t8v41LWzacxkBSuvjQ/FFJayjDWrCTepAQ2vUH0oo/Jk3ovpwJJeVCP5CN+lFFaaMqy+nAyuChvrTI2kN9JAsi2ZOy4IBHMnkSCP+iqBexSWdxLazoUljJVlPUH2oorkV10pRc7b1zXb/hZOzuJvM86QWEXeELxOzHSIPcmiiiunVlF2RNTpRkrs//Z';
+
 export const Default = () => (
   <Box>
     <ThreadMessage>
@@ -32,20 +36,7 @@ export const Default = () => (
       </ThreadMessage.Row>
       <ThreadMessage.Row>
         <ThreadMessage.LeftContainer>
-          <Avatar
-            url='data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAgGBgcGBQgHBwcJCQgKDBQNDAsLDBkSEw8UHRofHh0aHBwgJC
-                4nICIsIxwcKDcpLDAxNDQ0Hyc5PTgyPC4zNDL/2wBDAQkJCQwLDBgNDRgyIRwhMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMj
-                IyMjIyMjIyMjIyMjIyMjL/wAARCAAoACgDASIAAhEBAxEB/8QAGwAAAgIDAQAAAAAAAAAAAAAAAAcEBgIDBQj/xAAuEAACAQQAAwcEAQUAAA
-                AAAAABAgMABAUREiExBhMUIkFRYQcWcYGhFTJSgpH/xAAYAQADAQEAAAAAAAAAAAAAAAACAwQBAP/EAB4RAAIBBQEBAQAAAAAAAAAAAAABAg
-                MREiExE0HR/9oADAMBAAIRAxEAPwBuXuIkhBuMe5ib/AHQP49q4L3mLitryTLTSpOiHQI5k/HzXa/qbFOEudVTu1dumWvcTaNCZYZ7vU6g6L
-                xqjOU/24dfs1Ouh9FnkMpd3Reeyx83hAxZZEhkdV9/MBrX71WGPvJcqrJBGveKATtuXXqNU0pu02bTHXD/AGvJAluyxxRd6F4x00o+NdKoVr
-                jbzJdvVe1t5cVLc2ck8qjnohgpPtz2v7G6JtPQ2VJwjlcw+37mchpnK6GtIuv5NFWeTsLNPvxWTvpfjvOEfwKKzEVkSct2vscS/BIzSN0YRk
-                eX81UpPqO8masJETu7OOccY4dswYFQeftv096XV5knuJGdm2T1+agvMXj8jEaHX905QihabvcbuS7X566mLWLwSY8PuRnk/u4eZ0deTl71Ef
-                6hY+0yM88TzeNZY4luYwpVYyduOfrvhPTnr0pXSX9y5mCsyJMdyxxvwq599em+taItqCSNc90ChvZRUruUcT0JiO18Elpk7t8v41LWzacxkB
-                SuvjQ/FFJayjDWrCTepAQ2vUH0oo/Jk3ovpwJJeVCP5CN+lFFaaMqy+nAyuChvrTI2kN9JAsi2ZOy4IBHMnkSCP+iqBexSWdxLazoUljJVlP
-                UH2oorkV10pRc7b1zXb/hZOzuJvM86QWEXeELxOzHSIPcmiiiunVlF2RNTpRkrs//Z'
-            size='x16'
-          />
+          <Avatar url={avatarUrl} size='x16' />
         </ThreadMessage.LeftContainer>
         <ThreadMessage.Container>
           <ThreadMessage.Message>
@@ -61,3 +52,37 @@ export const Default = () => (
     </ThreadMessage>
   </Box>
 );
+
+export const WithEmoji = () => (
+  <Box>
+    <ThreadMessage>
+      <ThreadMessage.Row>
+        <ThreadMessage.LeftContainer>
+          <ThreadMessage.Icon />
+        </ThreadMessage.LeftContainer>
+        <ThreadMessage.Container>
+          <ThreadMessage.Origin>
+            Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
+            nisi ut aliquip ex ea commodo consequat a duis aute irure dolor in
+            reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
+            pariatur. Consectetur adipiscing elit, sed do eiusmod tempor
+            incididunt ut labore et dolore magna aliqua. Ut enim ad minim
+            veniam...
+          </ThreadMessage.Origin>
+          <ThreadMessage.Unfollow />
+        </ThreadMessage.Container>
+      </ThreadMessage.Row>
+      <ThreadMessage.Row>
+        <ThreadMessage.LeftContainer>
+          <Avatar url={avatarUrl} size='x16' />
+        </ThreadMessage.LeftContainer>
+        <ThreadMessage.Container>
+          <ThreadMessage.Message>
+            Thread Emoji test:{' '}
+            <ThreadMessageEmoji name='test' image={`url(${avatarUrl})`} />
+          </ThreadMessage.Message>
+        </ThreadMessage.Container>
+      </ThreadMessage.Row>
+    </ThreadMessage>
+  </Box>
+);
diff --git a/packages/fuselage/src/components/Message/ThreadMessage/ThreadMessage.styles.scss b/packages/fuselage/src/components/Message/ThreadMessage/ThreadMessage.styles.scss
index e1a51c2b39..48f76253fd 100644
--- a/packages/fuselage/src/components/Message/ThreadMessage/ThreadMessage.styles.scss
+++ b/packages/fuselage/src/components/Message/ThreadMessage/ThreadMessage.styles.scss
@@ -1,6 +1,7 @@
 @use '../../../styles/lengths.scss';
 @use '../../../styles/colors.scss';
 @use '../../../styles/typography.scss';
+@use '../../../styles/mixins/size.scss';
 @use '../mixins.scss';
 
 .rcx-message.rcx-message--thread {
@@ -63,4 +64,14 @@
       @include mixins.visible-on-hover();
     }
   }
+
+  &__emoji {
+    display: inline-block;
+
+    margin-inline: lengths.margin(2);
+
+    background-size: contain;
+
+    @include size.square(lengths.size(12));
+  }
 }
diff --git a/packages/fuselage/src/components/Message/ThreadMessage/ThreadMessageEmoji.tsx b/packages/fuselage/src/components/Message/ThreadMessage/ThreadMessageEmoji.tsx
new file mode 100644
index 0000000000..266b1c721a
--- /dev/null
+++ b/packages/fuselage/src/components/Message/ThreadMessage/ThreadMessageEmoji.tsx
@@ -0,0 +1,25 @@
+import type { ReactNode } from 'react';
+import React from 'react';
+
+import { MessageEmojiBase } from '../MessageEmojiBase';
+
+type ThreadMessageEmojiProps = {
+  name: string;
+  className?: string;
+  image?: string;
+  children?: ReactNode;
+};
+
+export const ThreadMessageEmoji = ({
+  name,
+  className,
+  image,
+  children,
+}: ThreadMessageEmojiProps) => (
+  <MessageEmojiBase
+    className={`rcx-message-thread__emoji ${className || ''}`}
+    name={name}
+    image={image}
+    children={children}
+  />
+);
diff --git a/packages/fuselage/src/components/Message/ThreadMessage/index.tsx b/packages/fuselage/src/components/Message/ThreadMessage/index.tsx
index d44ac16155..70091629df 100644
--- a/packages/fuselage/src/components/Message/ThreadMessage/index.tsx
+++ b/packages/fuselage/src/components/Message/ThreadMessage/index.tsx
@@ -2,6 +2,7 @@ import { MessageLeftContainer } from '../MessageLeftContainer';
 import { ThreadMessage } from './ThreadMessage';
 import { ThreadMessageBody } from './ThreadMessageBody';
 import { ThreadMessageContainer } from './ThreadMessageContainer';
+import { ThreadMessageEmoji } from './ThreadMessageEmoji';
 import { ThreadMessageFollow } from './ThreadMessageFollow';
 import { ThreadMessageIconThread } from './ThreadMessageIconThread';
 import { ThreadMessageOrigin } from './ThreadMessageOrigin';
@@ -29,6 +30,7 @@ export {
   ThreadMessageIconThread,
   ThreadMessageOrigin,
   ThreadMessageRow,
+  ThreadMessageEmoji,
   ThreadMessageUnfollow,
   ThreadMessageLeftContainer,
 };
diff --git a/packages/fuselage/src/components/Message/index.tsx b/packages/fuselage/src/components/Message/index.tsx
index ab3b4f0c97..aad2bb7adb 100644
--- a/packages/fuselage/src/components/Message/index.tsx
+++ b/packages/fuselage/src/components/Message/index.tsx
@@ -33,6 +33,7 @@ export * from './MessageRole';
 export * from './MessageRoles';
 export * from './MessageTimestamp';
 export * from './MessageUsername';
+export * from './MessageEmoji';
 
 export default Object.assign(Message, {
   Metrics: MessageMetrics,

From 1e6b74302272b977e5e2179258aea156dac340b8 Mon Sep 17 00:00:00 2001
From: gabriellsh <gabriel.henriques@rocket.chat>
Date: Fri, 29 Apr 2022 18:06:54 -0300
Subject: [PATCH 2/2] Change tag

---
 packages/fuselage/src/components/Message/MessageEmojiBase.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/fuselage/src/components/Message/MessageEmojiBase.tsx b/packages/fuselage/src/components/Message/MessageEmojiBase.tsx
index 93cd93f26c..6237c2ea69 100644
--- a/packages/fuselage/src/components/Message/MessageEmojiBase.tsx
+++ b/packages/fuselage/src/components/Message/MessageEmojiBase.tsx
@@ -14,7 +14,7 @@ export const MessageEmojiBase = ({
   image,
   children,
 }: MessageEmojiBaseProps) => (
-  <div
+  <span
     className={`${className || ''} ${name}`}
     style={image && image.length ? { backgroundImage: image } : undefined}
     children={children}