Implementing a Chat Bubble in SUSI.AI
SUSI.AI now has a chat bubble on the bottom right of every page to assist you. Chat Bubble allows you to connect with susi.ai on just a click. You can now directly play test examples of skill on chatbot. It can also be viewed on full screen mode.
Redux Code
Redux Action associated with chat bubble is handleChatBubble. Redux state chatBubble can have 3 states:
- minimised – chat bubble is not visible. This set state is set when the chat is viewed in full screen mode.
- bubble – only the chat bubble is visible. This state is set when close icon is clicked and on toggle.
- full – the chat bubble along with message section is visible. This state is set when minimize icon is clicked on full screen mode and on toggle.
const defaultState = {
chatBubble: 'bubble',
};
export default handleActions(
{
[actionTypes.HANDLE_CHAT_BUBBLE](state, { payload }) {
return {
...state,
chatBubble: payload.chatBubble,
};
},
},
defaultState,
);
Speech box for skill example
The user can click on the speech box for skill example and immediately view the answer for the skill on the chatbot. When a speech bubble is clicked a query parameter testExample is added to the URL. The value of this query parameter is resolved and answered by Message Composer. To be able to generate an answer bubble again and again for the same query, we have a reducer state testSkillExampleKey which is updated when the user clicks on the speech box. This is passed as key parameter to messageSection.
Chat Bubble Code
The functions involved in the working of chatBubble code are:
- openFullScreen – This function is called when the full screen icon is clicked in the tab and laptop view and also when chat bubble is clicked in mobile view. This opens up a full screen dialog with message section. It dispatches handleChatBubble action which sets the chatBubble reducer state as minimised.
- closeFullScreen – This function is called when the exit full screen icon is clicked. It dispatches a handleChatBubble action which sets the chatBubble reducer state as full.
- toggleChat – This function is called when the user clicks on the chat bubble. It dispatches handleChatBubble action which toggles the chatBubble reducer state between full and bubble.
- handleClose – This function is called when the user clicks on the close icon. It dispatches handleChatBubble action which sets the chatBubble reducer state to bubble.
openFullScreen = () => {
const { actions } = this.props;
actions.handleChatBubble({
chatBubble: 'minimised',
});
actions.openModal({
modalType: 'chatBubble',
fullScreenChat: true,
});
};
closeFullScreen = () => {
const { actions } = this.props;
actions.handleChatBubble({
chatBubble: 'full',
});
actions.closeModal();
};
toggleChat = () => {
const { actions, chatBubble } = this.props;
actions.handleChatBubble({
chatBubble: chatBubble === 'bubble' ? 'full' : 'bubble',
});
};
handleClose = () => {
const { actions } = this.props;
actions.handleChatBubble({ chatBubble: 'bubble' });
actions.closeModal();
};
Message Section Code (Reduced)
The message section comprises of three parts the actionBar, messageSection and the message Composer.
Action Bar
The actionBar consists of the action buttons – search, full screen, exit full screen and close button. Clicking on the search button expands and opens up a search bar. On clicking the full screen icon openFullScreen function is called which open up the chat dialog. On clicking the exit icon the handleClose function is called, which set chatBubble reducer state to bubble. On full screen view, clicking on the exit full screen icon calls the closeFullScreen functions which sets the reducer state chatBubble to full.
const actionBar = (
<ActionBar fullScreenChat={fullScreenChat}>
{fullScreenChat !== undefined ? (
<FullScreenExit onClick={this.closeFullScreen} width={width} />
) : (
<FullScreen onClick={this.openFullScreen} width={width} />
)}
<Close onClick={fullScreenChat ? this.handleClose : this.toggleChat}/>
</ActionBar>
);Message Section
The message section has two parts MessageList and Message Composer. Message List is where the messages are viewed and the Message composer allows you to interact with the bot through text and speech. ScrollBar is imported from the npm library react-custom-scrollbars. When the scroll bar is moved it sets the state of showScrollTop and showScrollBottom in the chat. messageListItems consists of all the messages between the user and the bot.
const messageSection = (
<MessageSectionContainer showChatBubble={showChatBubble} height={height}>
{loadingHistory ? (
<CircularLoader height={38} />
) : (
<Fragment>
{fullScreenChat ? null : actionBar}
<MessageList
ref={c => {
this.messageList = c;
}}
pane={pane}
messageBackgroundImage={messageBackgroundImage}
showChatBubble={showChatBubble}
height={height}>
<Scrollbars
renderThumbHorizontal={this.renderThumb}
renderThumbVertical={this.renderThumb}
ref={ref => {
this.scrollarea = ref;
}}
onScroll={this.onScroll}
autoHide={false}>
{messageListItems}
{!search && loadingReply && this.getLoadingGIF()}
</Scrollbars>
</MessageList>
{showScrollTop && (
<ScrollTopFab
size="small"
backgroundcolor={body}
color={theme === 'light' ? 'inherit' : 'secondary'}
onClick={this.scrollToTop}
>
<NavigateUp />
</ScrollTopFab>
)}
{showScrollBottom && (
<ScrollBottomContainer>
<ScrollBottomFab
size="small"
backgroundcolor={body}
color={theme === 'light' ? 'inherit' : 'secondary'}
onClick={this.scrollToBottom}>
<NavigateDown />
</ScrollBottomFab>
</ScrollBottomContainer>
)}
</Fragment>
)}
<MessageComposeContainer
backgroundColor={composer}
theme={theme}
showChatBubble={showChatBubble}>
<MessageComposer
focus={!search}
dream={dream}
speechOutput={speechOutput}
speechOutputAlways={speechOutputAlways}
micColor={button}
textarea={textarea}
exitSearch={this.exitSearch}
showChatBubble={showChatBubble}
/>
</MessageComposeContainer>
</MessageSectionContainer>
);
const Chat = (
<ChatBubbleContainer className="chatbubble" height={height} width={width}>
{chatBubble === 'full' ? messageSection : null}
{chatBubble !== 'minimised' ? (
<SUSILauncherContainer>
<SUSILauncherWrapper
onClick={width < 500 ? this.openFullscreen : this.toggleChat}>
<SUSILauncherButton data-tip="Toggle Launcher" />
</SUSILauncherWrapper>
</SUSILauncherContainer>
) : null}
</ChatBubbleContainer>
);Resources
- Usage of Redux with React
- React Custom Scrollbars library – react_custom_scrollbars
- How messages are created in chatbot?
- What is a chatbot?
You must be logged in to post a comment.