From a0976516cbf46cf78cdc5e967ed848262e259e1b Mon Sep 17 00:00:00 2001
From: Irene Ryu <irene.ryu@sendbird.com>
Date: Wed, 18 Oct 2023 14:19:06 +0900
Subject: [PATCH] feat: enable user(bot) mention

---
 README.md                                 |  2 +
 src/App.tsx                               |  1 +
 src/components/Chat.tsx                   | 10 +++
 src/components/CustomChannelComponent.tsx | 89 ++++++++++++++++++-----
 src/const.ts                              |  2 +
 src/context/ConstantContext.tsx           |  1 +
 6 files changed, 88 insertions(+), 17 deletions(-)

diff --git a/README.md b/README.md
index 7324f20fd..8c860cb35 100644
--- a/README.md
+++ b/README.md
@@ -184,6 +184,7 @@ const customConstants = {
   replacementTextList: [['the Text extracts', 'ChatBot Knowledge Base']],
   enableSourceMessage: false,
   enableEmojiFeedback: true,
+  enableMention: true,
 };
 
 const App = () => {
@@ -205,6 +206,7 @@ const App = () => {
       replacementTextList={customConstants.replacementTextList}
       enableSourceMessage={customConstants.enableSourceMessage}
       enableEmojiFeedback={customConstants.enableEmojiFeedback}
+      enableMention={customConstants.enableMention}
     />
   );
 };
diff --git a/src/App.tsx b/src/App.tsx
index 34e2a97d2..ded6ac27c 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -30,6 +30,7 @@ const App = (props: Props) => {
       configureSession={props.configureSession}
       enableSourceMessage={props.enableSourceMessage}
       enableEmojiFeedback={props.enableEmojiFeedback}
+      enableMention={props.enableMention}
     />
   );
 };
diff --git a/src/components/Chat.tsx b/src/components/Chat.tsx
index dd47472b5..e626a813e 100644
--- a/src/components/Chat.tsx
+++ b/src/components/Chat.tsx
@@ -24,6 +24,7 @@ const SBComponent = () => {
     userNickName,
     configureSession,
     enableEmojiFeedback,
+    enableMention,
   } = useConstantState();
 
   assert(
@@ -61,6 +62,15 @@ const SBComponent = () => {
       customExtensionParams={userAgentCustomParams.current}
       breakPoint={isMobile}
       isReactionEnabled={enableEmojiFeedback}
+      isMentionEnabled={enableMention}
+      uikitOptions={{
+        groupChannel: {
+          input: {
+            // To hide the file upload icon from the message input
+            enableDocument: false,
+          },
+        },
+      }}
     >
       <>
         <CustomChannel />
diff --git a/src/components/CustomChannelComponent.tsx b/src/components/CustomChannelComponent.tsx
index ca08f25d6..6b9f23f69 100644
--- a/src/components/CustomChannelComponent.tsx
+++ b/src/components/CustomChannelComponent.tsx
@@ -5,6 +5,7 @@ import ChannelHeader from '@sendbird/uikit-react/Channel/components/ChannelHeade
 import ChannelUI from '@sendbird/uikit-react/Channel/components/ChannelUI';
 import { useChannelContext } from '@sendbird/uikit-react/Channel/context';
 import { useEffect, useState, useMemo, useRef } from 'react';
+import ReactDOM from 'react-dom';
 // eslint-disable-next-line import/no-unresolved
 import { ClientUserMessage, EveryMessage } from 'SendbirdUIKitGlobal';
 import styled from 'styled-components';
@@ -12,7 +13,6 @@ import styled from 'styled-components';
 import ChatBottom from './ChatBottom';
 import CustomChannelHeader from './CustomChannelHeader';
 import CustomMessage from './CustomMessage';
-import CustomMessageInput from './CustomMessageInput';
 import DynamicRepliesPanel from './DynamicRepliesPanel';
 import { useConstantState } from '../context/ConstantContext';
 import { useScrollOnStreaming } from '../hooks/useScrollOnStreaming';
@@ -22,7 +22,12 @@ import {
   getBotWelcomeMessages,
 } from '../utils/messages';
 
-const Root = styled.div<{ hidePlaceholder: boolean; height: string }>`
+interface RootStyleProps {
+  hidePlaceholder: boolean;
+  height: string;
+  isInputActive: boolean;
+}
+const Root = styled.div<RootStyleProps>`
   height: ${({ height }) => height};
   font-family: 'Roboto', sans-serif;
   z-index: 0;
@@ -31,6 +36,59 @@ const Root = styled.div<{ hidePlaceholder: boolean; height: string }>`
   .sendbird-place-holder__body {
     display: ${({ hidePlaceholder }) => (hidePlaceholder ? 'none' : 'block')};
   }
+
+  .sendbird-message-input-wrapper {
+    width: 100%;
+  }
+
+  .sendbird-message-input-wrapper__message-input {
+    padding: 12px 16px;
+    display: flex;
+    -webkit-box-pack: justify;
+    justify-content: space-between;
+    -webkit-box-align: center;
+    align-items: center;
+  }
+
+  .sendbird-message-input {
+    display: flex;
+    align-items: center;
+    .sendbird-message-input-text-field {
+      transition: ${(props: RootStyleProps) =>
+        props.isInputActive ? 'none' : 'width 0.5s'};
+      transition-timing-function: ease;
+      padding: 8px 16px;
+      font-size: 14px;
+      font-family: 'Roboto', sans-serif;
+      line-height: 20px;
+      color: rgba(0, 0, 0, 0.88);
+      resize: none;
+      border: none;
+      outline: none;
+      max-height: 116px;
+      background-color: #eeeeee;
+      border-radius: 20px;
+      height: auto;
+      ::placeholder {
+        color: rgba(0, 0, 0, 0.38);
+      }
+      :focus {
+        border: none;
+        box-shadow: none;
+      }
+    }
+    .sendbird-message-input--send {
+      position: relative;
+      right: 0;
+      bottom: 0;
+      :hover {
+        background-color: transparent;
+      }
+    }
+    .sendbird-message-input--placeholder {
+      top: 9px;
+    }
+  }
 `;
 
 export interface StartingPageAnimatorProps {
@@ -146,21 +204,6 @@ export function CustomChannelComponent(props: CustomChannelComponentProps) {
             <ChannelHeader />
           );
         }}
-        renderMessageInput={() => {
-          return (
-            <div
-              style={{
-                position: 'relative',
-                zIndex: 50,
-                backgroundColor: 'white',
-              }}
-            >
-              {/* {isStaticReplyVisible && <StaticRepliesPanel botUser={botUser} />} */}
-              <CustomMessageInput />
-              <ChatBottom />
-            </div>
-          );
-        }}
         renderMessage={({ message }: { message: EveryMessage }) => {
           const grouppedMessage = grouppedMessages.find(
             (m) => m.messageId == message.messageId
@@ -189,6 +232,18 @@ export function CustomChannelComponent(props: CustomChannelComponentProps) {
         }}
         renderTypingIndicator={() => <></>}
       />
+      <Banner />
     </Root>
   );
 }
+
+function Banner() {
+  const inputElement = document.querySelector(
+    '.sendbird-message-input-wrapper'
+  );
+
+  if (inputElement) {
+    return ReactDOM.createPortal(<ChatBottom />, inputElement);
+  }
+  return null;
+}
diff --git a/src/const.ts b/src/const.ts
index fd7a26068..8fcbf6328 100644
--- a/src/const.ts
+++ b/src/const.ts
@@ -109,6 +109,7 @@ export const DEFAULT_CONSTANT: Constant = {
   },
   enableSourceMessage: true,
   enableEmojiFeedback: true,
+  enableMention: true,
 };
 
 type ConfigureSession = (
@@ -141,6 +142,7 @@ export interface Constant {
   configureSession: ConfigureSession;
   enableSourceMessage: boolean;
   enableEmojiFeedback: boolean;
+  enableMention: boolean;
   firstMessageData: FirstMessageItem[];
 }
 
diff --git a/src/context/ConstantContext.tsx b/src/context/ConstantContext.tsx
index 6e9974e5d..8d4020025 100644
--- a/src/context/ConstantContext.tsx
+++ b/src/context/ConstantContext.tsx
@@ -64,6 +64,7 @@ export const ConstantStateProvider = (props: ProviderProps) => {
         props.enableSourceMessage ?? initialState.enableSourceMessage,
       enableEmojiFeedback:
         props.enableEmojiFeedback ?? initialState.enableEmojiFeedback,
+      enableMention: props.enableMention ?? initialState.enableMention,
     }),
     [props]
   );