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, + }, + }, + }} > <> 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` 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) { ); }} - renderMessageInput={() => { - return ( -
- {/* {isStaticReplyVisible && } */} - - -
- ); - }} renderMessage={({ message }: { message: EveryMessage }) => { const grouppedMessage = grouppedMessages.find( (m) => m.messageId == message.messageId @@ -189,6 +232,18 @@ export function CustomChannelComponent(props: CustomChannelComponentProps) { }} renderTypingIndicator={() => <>} /> + ); } + +function Banner() { + const inputElement = document.querySelector( + '.sendbird-message-input-wrapper' + ); + + if (inputElement) { + return ReactDOM.createPortal(, 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] );