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

@ -45,3 +45,5 @@ docker rename <containet_id> reverse-proxy-frontend
import { makeStyles, useTheme } from "@material-ui/core/styles";
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 ChatBot from "react-simple-chatbot";
import { ThemeProvider } from "styled-components";
import { useTheme } from "@material-ui/core/styles";
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 = [
{
id: "0",
message: "Welcome to react chatbot!",
trigger: "1"
id: "1",
message: "I'm the wizard.",
trigger: "2"
},
{
id: "1",
message: "Bye!",
id: "2",
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
}
];
return <ChatBot steps={steps} />;
return (
<ThemeProvider theme={botTheme}>
<ChatBot
steps={steps}
botAvatar="public/icons/wizard.png"
headerTitle="Zirhan"
/>
</ThemeProvider>
);
};
export default Wizard;