From 4d10fdecc2fdc8e13e2c9dd76cf4e81d117e8d4e Mon Sep 17 00:00:00 2001
From: Irene Ryu <irene.ryu@sendbird.com>
Date: Fri, 8 Sep 2023 15:13:16 +0900
Subject: [PATCH] feat: Add boolean parameter to control emoji attachment

---
 README.md                                  |  2 ++
 src/App.tsx                                |  1 +
 src/components/BotMessageWithBodyInput.tsx |  4 +++-
 src/components/Chat.tsx                    | 12 +++++++++---
 src/const.ts                               |  2 ++
 src/context/ConstantContext.tsx            |  2 ++
 6 files changed, 19 insertions(+), 4 deletions(-)

diff --git a/README.md b/README.md
index 9b391309a..63c7a2982 100644
--- a/README.md
+++ b/README.md
@@ -183,6 +183,7 @@ const customConstants = {
   },
   replacementTextList: [['the Text extracts', 'ChatBot Knowledge Base']],
   enableSourceMessage: false,
+  enableEmojiFeedback: true,
 };
 
 const App = () => {
@@ -203,6 +204,7 @@ const App = () => {
       messageBottomContent={customConstants.messageBottomContent}
       replacementTextList={customConstants.replacementTextList}
       enableSourceMessage={customConstants.enableSourceMessage}
+      enableEmojiFeedback={customConstants.enableEmojiFeedback}
     />
   );
 };
diff --git a/src/App.tsx b/src/App.tsx
index 390eb8c68..34e2a97d2 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -29,6 +29,7 @@ const App = (props: Props) => {
       customRefreshComponent={props.customRefreshComponent}
       configureSession={props.configureSession}
       enableSourceMessage={props.enableSourceMessage}
+      enableEmojiFeedback={props.enableEmojiFeedback}
     />
   );
 };
diff --git a/src/components/BotMessageWithBodyInput.tsx b/src/components/BotMessageWithBodyInput.tsx
index 10bd7f1f5..04454084b 100644
--- a/src/components/BotMessageWithBodyInput.tsx
+++ b/src/components/BotMessageWithBodyInput.tsx
@@ -5,6 +5,7 @@ import styled from 'styled-components';
 
 import { StartingPageAnimatorProps } from './CustomChannelComponent';
 import { ReactionContainer } from './ReactionContainer';
+import { useConstantState } from '../context/ConstantContext';
 import botMessageImage from '../icons/bot-message-image.png';
 import { formatCreatedAtToAMPM } from '../utils';
 
@@ -69,6 +70,7 @@ const EmptyImageContainer = styled.div`
 `;
 
 export default function BotMessageWithBodyInput(props: Props) {
+  const { enableEmojiFeedback } = useConstantState();
   const {
     botUser,
     message,
@@ -109,7 +111,7 @@ export default function BotMessageWithBodyInput(props: Props) {
           </Sender>
         )}
         {bodyComponent}
-        <ReactionContainer message={message} />
+        {enableEmojiFeedback && <ReactionContainer message={message} />}
       </BodyContainer>
       <SentTime>{formatCreatedAtToAMPM(message.createdAt)}</SentTime>
     </Root>
diff --git a/src/components/Chat.tsx b/src/components/Chat.tsx
index d8fc2defa..dd47472b5 100644
--- a/src/components/Chat.tsx
+++ b/src/components/Chat.tsx
@@ -17,8 +17,14 @@ import SBConnectionStateProvider, {
 import { assert, isMobile } from '../utils';
 
 const SBComponent = () => {
-  const { applicationId, botId, userId, userNickName, configureSession } =
-    useConstantState();
+  const {
+    applicationId,
+    botId,
+    userId,
+    userNickName,
+    configureSession,
+    enableEmojiFeedback,
+  } = useConstantState();
 
   assert(
     applicationId !== null && botId !== null,
@@ -54,7 +60,7 @@ const SBComponent = () => {
       configureSession={configureSession}
       customExtensionParams={userAgentCustomParams.current}
       breakPoint={isMobile}
-      isReactionEnabled={true}
+      isReactionEnabled={enableEmojiFeedback}
     >
       <>
         <CustomChannel />
diff --git a/src/const.ts b/src/const.ts
index 447701f50..4b9229332 100644
--- a/src/const.ts
+++ b/src/const.ts
@@ -108,6 +108,7 @@ export const DEFAULT_CONSTANT: Constant = {
     onClick: noop,
   },
   enableSourceMessage: true,
+  enableEmojiFeedback: true,
 };
 
 type ConfigureSession = (
@@ -139,6 +140,7 @@ export interface Constant {
   customRefreshComponent: CustomRefreshComponent;
   configureSession: ConfigureSession;
   enableSourceMessage: boolean;
+  enableEmojiFeedback: boolean;
   firstMessageData: FirstMessageItem[];
 }
 
diff --git a/src/context/ConstantContext.tsx b/src/context/ConstantContext.tsx
index 8e3cb64aa..6e9974e5d 100644
--- a/src/context/ConstantContext.tsx
+++ b/src/context/ConstantContext.tsx
@@ -62,6 +62,8 @@ export const ConstantStateProvider = (props: ProviderProps) => {
       configureSession: props.configureSession,
       enableSourceMessage:
         props.enableSourceMessage ?? initialState.enableSourceMessage,
+      enableEmojiFeedback:
+        props.enableEmojiFeedback ?? initialState.enableEmojiFeedback,
     }),
     [props]
   );