feat: Add boolean parameter to control emoji attachment

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}
     />
   );
 };

src/App.tsx

@@ -29,6 +29,7 @@ const App = (props: Props) => {
       customRefreshComponent={props.customRefreshComponent}
       configureSession={props.configureSession}
       enableSourceMessage={props.enableSourceMessage}
+      enableEmojiFeedback={props.enableEmojiFeedback}
     />
   );
 };

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>

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 />

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[];
 }
 

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]
   );