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"; const Wizard = ({ dismissBot }) => { 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 ( ); }; Wizard.propTypes = { dismissBot: PropTypes.func.isRequired }; export default Wizard;