OvidijusParsiunas
commented
4 months ago Hi @HafizTariq-Dev. Currently this repo is focusing on optimising the core chatbot box component. Hence, the ability to minimise/maximise its layout (and other elements like a navbar) is something that we let the developers customise themselves in their own app. This has also been referenced in the following issue.
Having said that, I understand that the functionality that you have mentioned is very common and I am thinking of adding wrapper elements in the near future which will facilitate exactly what you need.
In the mean time, if you want to create a floating button that would expand/collapse the chat, you can use the following code to get you started (this is in React but can be tailored to any framework):
import {MessageContent} from 'deep-chat/dist/types/messages';
import {DeepChat} from 'deep-chat-react';
import React from 'react';
const messages: MessageContent[] = [];
function App() {
const [isExpanded, setIsExpanded] = React.useState(false);
function onNewMessage(newMessage: {message: MessageContent; isInitial: boolean}) {
if (!newMessage.isInitial) {
messages.push(newMessage.message);
}
}
return (
<div className="App">
<div
style={{
transition: 'ease-in-out',
transitionDuration: '0.4s',
position: 'absolute',
zIndex: 1,
right: 20,
bottom: 20,
transform: isExpanded ? 'scale(1)' : 'scale(0)',
transformOrigin: '100% 100%',
}}
>
<div style={{width: '100%', height: 40, backgroundColor: 'blue', borderRadius: '10px 10px 0px 0px'}}>
<button
style={{
color: 'white',
backgroundColor: 'unset',
border: 'unset',
fontSize: '32px',
float: 'right',
marginRight: '5px',
cursor: 'pointer',
}}
onClick={() => {
setIsExpanded((prev) => !prev);
}}
>
×
</button>
</div>
<DeepChat demo={true} onNewMessage={onNewMessage} initialMessages={messages} />
</div>
<button
onClick={() => {
setIsExpanded((prev) => !prev);
}}
style={{position: 'absolute', right: 20, bottom: 20}}
>
Click Here
</button>
</div>
);
}
export default App;You can change the above elements and styling properties to fit your parent website.
Because React re-renders the parent app when isExpanded state changes, we need to persist messages so that we can use them in the initialMessages property - for the example above I simply store it in a variable, but you can tailor it to your use-case.
Here is also a live example.
Hope this helps you get started.
HafizTariq-Dev
Hi @OvidijusParsiunas
You are doing excellent work and this is what is really needed in the future and we will be seeing this on every website. I really appreciate your efforts you are putting in this project.
While I was just playing with the examples and an idea cross my mind. Most of the time, We see ChatBot on click of a Floating Action button placed on the Bottom right corner.
It is very rare case that some one embed the ChatBot in the page.
I've also checked the past Opened / Closed issues may be someone has pointed out this idea. Well I could not found it.
May be in the future someone is also looking for ready to place ChatBot component in the React App as a Floating Action Button.
As soon as component is placed, Floating Action Button will appear on the Bottom right corner and might be passing parameter of position ( Left, Right, Bottom , Top ), Either show ChatBot on click of a Floating Action Button or not, ChatBot component should be closed or opened when loaded First time, What sound to play when loading of component is completed,.
These are some parameter that we can configure when initializing the component.
Check this example for instance: React ChatBot link
You will see the Floating Action Button is placed on bottom right corner and when you explore the link further then you might see other cool options that you can add in your project.
Just to start with, Can you please share code example to use your component as a Floating Action Button?
I look forward to your kind response. Thank You