feat: enable user(bot) mention

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

src/App.tsx

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

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

src/components/CustomChannelComponent.tsx

@@ -5,14 +5,14 @@ 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';
 
 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;
+}

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

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