Wizard bot update

master
Tudor Stanciu 2020-06-06 02:47:03 +03:00
parent 91f0fb0651
commit a05d4a32af
3 changed files with 48 additions and 7 deletions

View File

@ -44,4 +44,6 @@ docker rename <containet_id> reverse-proxy-frontend
############################################################################################## ##############################################################################################
import { makeStyles, useTheme } from "@material-ui/core/styles"; import { makeStyles, useTheme } from "@material-ui/core/styles";
const theme = useTheme(); const theme = useTheme();
https://www.flaticon.com/free-icon/wizard_2534554?term=wizard&page=1&position=64

BIN
public/icons/wizard.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 37 KiB

View File

@ -1,21 +1,60 @@
import React from "react"; import React from "react";
import ChatBot from "react-simple-chatbot"; import ChatBot from "react-simple-chatbot";
import { ThemeProvider } from "styled-components";
import { useTheme } from "@material-ui/core/styles";
const Wizard = () => { const Wizard = () => {
const theme = useTheme();
const botTheme = {
background: "#f5f8fb",
fontFamily: "monospace",
headerBgColor: theme.palette.primary.main,
headerFontColor: "#fff",
headerFontSize: "16px",
botBubbleColor: theme.palette.primary.main,
botFontColor: "#fff",
userBubbleColor: "#fff",
userFontColor: "#4a4a4a"
};
const steps = [ const steps = [
{ {
id: "0", id: "1",
message: "Welcome to react chatbot!", message: "I'm the wizard.",
trigger: "1" trigger: "2"
}, },
{ {
id: "1", id: "2",
message: "Bye!", message: "I know everything about nothing. What do you want to ask me?",
trigger: "3"
},
{
id: "3",
message: "Please hurry. I don't have time to waste.",
trigger: "4"
},
{
id: "4",
user: true,
trigger: "5"
},
{
id: "5",
message: "Hi {previousValue}, nice to meet you!",
end: true end: true
} }
]; ];
return <ChatBot steps={steps} />; return (
<ThemeProvider theme={botTheme}>
<ChatBot
steps={steps}
botAvatar="public/icons/wizard.png"
headerTitle="Zirhan"
/>
</ThemeProvider>
);
}; };
export default Wizard; export default Wizard;