104 lines
2.1 KiB
JavaScript
104 lines
2.1 KiB
JavaScript
import React from "react";
|
|
import PropTypes from "prop-types";
|
|
import ChatBot from "react-simple-chatbot";
|
|
import { ThemeProvider } from "styled-components";
|
|
import { useTheme } from "@material-ui/core/styles";
|
|
import { useTranslation } from "react-i18next";
|
|
import { bots } from "../constants";
|
|
|
|
const Wizard = ({ dismissBot, saveMessage }) => {
|
|
const theme = useTheme();
|
|
const { t } = useTranslation();
|
|
|
|
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: "1",
|
|
message: t("Chatbot.Wizard.Message1"),
|
|
trigger: "2"
|
|
},
|
|
{
|
|
id: "2",
|
|
message: t("Chatbot.Wizard.Message2"),
|
|
trigger: "3"
|
|
},
|
|
{
|
|
id: "3",
|
|
message: t("Chatbot.Wizard.Message3"),
|
|
trigger: "4"
|
|
},
|
|
{
|
|
id: "4",
|
|
user: true,
|
|
trigger: "5"
|
|
},
|
|
{
|
|
id: "5",
|
|
message: t("Chatbot.Wizard.Message5"),
|
|
trigger: "6"
|
|
},
|
|
{
|
|
id: "6",
|
|
user: true,
|
|
trigger: "7"
|
|
},
|
|
{
|
|
id: "7",
|
|
message: t("Chatbot.Wizard.Message7"),
|
|
trigger: "8"
|
|
},
|
|
{
|
|
id: "8",
|
|
user: true,
|
|
trigger: "9"
|
|
},
|
|
{
|
|
id: "9",
|
|
message: t("Chatbot.Wizard.Message9"),
|
|
end: true
|
|
}
|
|
];
|
|
|
|
const handleEnd = () => {
|
|
setTimeout(dismissBot, 3000);
|
|
};
|
|
|
|
const getAvatar = () => {
|
|
const basePath = "public/icons/wizard.png";
|
|
if (process.env.PUBLIC_URL) {
|
|
return `${process.env.PUBLIC_URL}/${basePath}`;
|
|
} else {
|
|
return basePath;
|
|
}
|
|
};
|
|
|
|
return (
|
|
<ThemeProvider theme={botTheme}>
|
|
<ChatBot
|
|
handleEnd={handleEnd}
|
|
steps={steps}
|
|
botAvatar={getAvatar()}
|
|
headerTitle={bots.Zirhan}
|
|
/>
|
|
</ThemeProvider>
|
|
);
|
|
};
|
|
|
|
Wizard.propTypes = {
|
|
dismissBot: PropTypes.func.isRequired,
|
|
saveMessage: PropTypes.func.isRequired
|
|
};
|
|
|
|
export default Wizard;
|