reverse-proxy-frontend/src/features/chatbot/components/Wizard.js

122 lines
2.7 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, messageSource } 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 getMessage = message => input => {
const currentDate = new Date();
let messageToSave = message;
if (message.includes("previousValue") && input.previousValue) {
messageToSave = message.replace("{previousValue}", input.previousValue);
}
saveMessage(messageSource.bot, currentDate, messageToSave);
return message;
};
const validate = text => {
const currentDate = new Date();
saveMessage(messageSource.user, currentDate, text);
return true;
};
const steps = [
{
id: "1",
message: getMessage(t("Chatbot.Wizard.Message1")),
trigger: "2"
},
{
id: "2",
message: getMessage(t("Chatbot.Wizard.Message2")),
trigger: "3"
},
{
id: "3",
message: getMessage(t("Chatbot.Wizard.Message3")),
trigger: "4"
},
{
id: "4",
user: true,
validator: validate,
trigger: "5"
},
{
id: "5",
message: getMessage(t("Chatbot.Wizard.Message5")),
trigger: "6"
},
{
id: "6",
user: true,
validator: validate,
trigger: "7"
},
{
id: "7",
message: getMessage(t("Chatbot.Wizard.Message7")),
trigger: "8"
},
{
id: "8",
user: true,
validator: validate,
trigger: "9"
},
{
id: "9",
message: getMessage(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;