Merged PR 16: wizard chatbot

wizard chatbot

package.json

@@ -28,10 +28,12 @@
     "react-i18next": "^11.4.0",
     "react-redux": "6.0.1",
     "react-router-dom": "5.0.0",
+    "react-simple-chatbot": "^0.6.1",
     "recharts": "^1.8.5",
     "redux": "4.0.1",
     "redux-thunk": "2.3.0",
-    "reselect": "4.0.0"
+    "reselect": "4.0.0",
+    "styled-components": "^5.1.1"
   },
   "devDependencies": {
     "@babel/core": "7.3.4",

private/Notes.txt

@@ -42,3 +42,10 @@ docker run --restart=always -p 5005:80 -d cloud.canister.io:5000/tstanciu/revers
 Rename container
 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
+
+  https://lucasbassetti.com.br/react-simple-chatbot/#/docs/previous-value

public/locales/en/translations.json

@@ -55,7 +55,8 @@
   "Server": {
     "Title": "Server",
     "Subtitle": "Expand to see details",
-    "Thoughts": "This reverse proxy is the only open gate to a secret creation land. There any impulse or thought can fly free and can be materialized without limits.",
+    "Thoughts": "This reverse proxy is the only open gate to a secret creation land. There any impulse or thought can fly free and can be materialized without limits. If you don't believe it, ask the ",
+    "Wizard": "wizard",
     "ServerHostName": "Server host",
     "ApiHostName": "API host",
     "Domain": "Domain",
@@ -81,5 +82,15 @@
   },
   "Notifications": {
     "MessageSaved": "Message saved"
+  },
+  "Chatbot": {
+    "Wizard": {
+      "Message1": "I'm the wizard.",
+      "Message2": "I know everything about nothing. What do you want to ask me?",
+      "Message3": "Please hurry. I don't have time to waste.",
+      "Message5": "I don't have time for that. Ask me something serious.",
+      "Message7": "I don't think I understand '{previousValue}'. You mean, like, flowers?",
+      "Message9": "I think you're wasting my time. Farewell!"
+    }
   }
 }

public/locales/ro/translations.json

@@ -46,7 +46,8 @@
   "Server": {
     "Title": "Server",
     "Subtitle": "Extindeţi pentru a vedea detalii",
-    "Thoughts": "Acest reverse proxy este singura poartă deschisă către un teren secret al creației. Acolo orice impuls sau gând poate zbura liber și poate fi materializat fără limite.",
+    "Thoughts": "Acest reverse proxy este singura poartă deschisă către un teren secret al creației. Acolo orice impuls sau gând poate zbura liber și poate fi materializat fără limite. Dacă nu crezi, întreabă-l pe ",
+    "Wizard": "vrăjitor",
     "ServerHostName": "Gazdă server",
     "ApiHostName": "Gazdă API",
     "Domain": "Domeniu",
@@ -72,5 +73,15 @@
   },
   "Notifications": {
     "MessageSaved": "Mesaj salvat"
+  },
+  "Chatbot": {
+    "Wizard": {
+      "Message1": "Eu sunt vrăjitorul.",
+      "Message2": "Știu totul despre nimic. Ce vrei sa ma intrebi?",
+      "Message3": "Te rog grabeste-te. Nu am timp de pierdut.",
+      "Message5": "Nu am timp pentru asta. Întreabă-mă ceva serios.",
+      "Message7": "Nu cred că am înțeles '{previousValue}'. Vrei să spui, cum ar fi, flori?",
+      "Message9": "Cred că îmi irosesti timpul. Ramas bun!"
+    }
   }
 }

src/components/App.js

@@ -11,6 +11,7 @@ import { connect } from "react-redux";
 import { bindActionCreators } from "redux";
 import { loadFrontendSession } from "../features/frontendSession/actionCreators";
 import ToastNotifier from "../features/snackbar/components/ToastNotifier";
+import BotsManager from "../features/chatbot/components/BotsManager";
 
 function App({ actions }) {
   useEffect(() => {
@@ -25,6 +26,7 @@ function App({ actions }) {
   return (
     <Suspense fallback={<div></div>}>
       <Header />
+      <BotsManager />
       <br />
       <div style={contentStyle}>
         <Switch>

src/features/chatbot/actionCreators.js

@@ -0,0 +1,9 @@
+import * as types from "./actionTypes";
+
+export function summonWizard() {
+  return { type: types.SUMMON_WIZARD };
+}
+
+export function dismissBot() {
+  return { type: types.DISMISS_BOT };
+}

src/features/chatbot/actionTypes.js

@@ -0,0 +1,2 @@
+export const DISMISS_BOT = "DISMISS_BOT";
+export const SUMMON_WIZARD = "SUMMON_WIZARD";

src/features/chatbot/botType.js

@@ -0,0 +1,4 @@
+export const botType = {
+  none: Symbol("none"),
+  wizard: Symbol("wizard")
+};

src/features/chatbot/components/BotsManager.js

@@ -0,0 +1,56 @@
+import React, { useEffect, useState } from "react";
+import PropTypes from "prop-types";
+import { connect } from "react-redux";
+import { bindActionCreators } from "redux";
+import { botType } from "../botType";
+import Wizard from "./Wizard";
+import { makeStyles } from "@material-ui/core/styles";
+import { dismissBot } from "../actionCreators";
+
+const useStyles = makeStyles(theme => ({
+  bot: {
+    position: "fixed",
+    bottom: theme.spacing(2),
+    right: theme.spacing(2),
+    zIndex: 1
+  },
+  botPosition: {
+    position: "absolute"
+  }
+}));
+
+const BotsManager = ({ bot, actions }) => {
+  const [type, setType] = useState(bot.type);
+  const classes = useStyles();
+
+  useEffect(() => {
+    if (bot.type) setType(bot.type);
+  }, [bot.type]);
+
+  return (
+    <div className={classes.botPosition}>
+      <div className={classes.bot}>
+        {type === botType.wizard && <Wizard dismissBot={actions.dismissBot} />}
+      </div>
+    </div>
+  );
+};
+
+BotsManager.propTypes = {
+  bot: PropTypes.object.isRequired,
+  actions: PropTypes.object.isRequired
+};
+
+function mapStateToProps(state) {
+  return {
+    bot: state.bot
+  };
+}
+
+function mapDispatchToProps(dispatch) {
+  return {
+    actions: bindActionCreators({ dismissBot }, dispatch)
+  };
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(BotsManager);

src/features/chatbot/components/Wizard.js

@@ -0,0 +1,92 @@
+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);
+  };
+
+  return (
+    <ThemeProvider theme={botTheme}>
+      <ChatBot
+        handleEnd={handleEnd}
+        steps={steps}
+        botAvatar="public/icons/wizard.png"
+        headerTitle="Zirhan"
+      />
+    </ThemeProvider>
+  );
+};
+
+Wizard.propTypes = {
+  dismissBot: PropTypes.func.isRequired
+};
+
+export default Wizard;

src/features/chatbot/reducer.js

@@ -0,0 +1,16 @@
+import * as types from "./actionTypes";
+import initialState from "../../redux/reducers/initialState";
+import { botType } from "./botType";
+
+export default function chatbotReducer(state = initialState.snackbar, action) {
+  switch (action.type) {
+    case types.SUMMON_WIZARD:
+      return { ...state, type: botType.wizard };
+
+    case types.DISMISS_BOT:
+      return { ...state, type: botType.none };
+
+    default:
+      return state;
+  }
+}

src/features/server/components/ServerComponent.js

@@ -31,7 +31,8 @@ const ServerComponent = ({
   serverHost,
   openAbout,
   handleOpenInNewTab,
-  showMessageForAuthor
+  showMessageForAuthor,
+  summonWizard
 }) => {
   const classes = useStyles();
   const { t } = useTranslation();
@@ -92,6 +93,7 @@ const ServerComponent = ({
               data={data}
               serverHost={serverHost}
               handleOpenInNewTab={handleOpenInNewTab}
+              summonWizard={summonWizard}
             />
           )}
         </CardContent>
@@ -133,7 +135,8 @@ ServerComponent.propTypes = {
   serverHost: PropTypes.string,
   openAbout: PropTypes.func.isRequired,
   handleOpenInNewTab: PropTypes.func.isRequired,
-  showMessageForAuthor: PropTypes.func.isRequired
+  showMessageForAuthor: PropTypes.func.isRequired,
+  summonWizard: PropTypes.func.isRequired
 };
 
 export default ServerComponent;

src/features/server/components/ServerContainer.js

@@ -6,6 +6,7 @@ import { loadServerData, loadSystemVersion } from "../actionCreators";
 import ServerComponent from "./ServerComponent";
 import { withRouter } from "react-router-dom";
 import MessageForAuthorContainer from "../../messageForAuthor/components/MessageForAuthorContainer";
+import { summonWizard } from "../../chatbot/actionCreators";
 
 const ServerContainer = ({ actions, data, serverHost, history }) => {
   const [openMessageForAuthor, setOpenMessageForAuthor] = useState(false);
@@ -41,6 +42,7 @@ const ServerContainer = ({ actions, data, serverHost, history }) => {
         openAbout={openAbout}
         handleOpenInNewTab={handleOpenInNewTab}
         showMessageForAuthor={showMessageForAuthor}
+        summonWizard={actions.summonWizard}
       />
       <MessageForAuthorContainer
         open={openMessageForAuthor}
@@ -66,7 +68,10 @@ function mapStateToProps(state) {
 
 function mapDispatchToProps(dispatch) {
   return {
-    actions: bindActionCreators({ loadServerData, loadSystemVersion }, dispatch)
+    actions: bindActionCreators(
+      { loadServerData, loadSystemVersion, summonWizard },
+      dispatch
+    )
   };
 }
 

src/features/server/components/ServerSummary.js

@@ -7,7 +7,12 @@ import styles from "../../../components/common/styles/gridStyles";
 
 const useStyles = makeStyles(styles);
 
-const ServerSummary = ({ data, serverHost, handleOpenInNewTab }) => {
+const ServerSummary = ({
+  data,
+  serverHost,
+  handleOpenInNewTab,
+  summonWizard
+}) => {
   const classes = useStyles();
   const { t } = useTranslation();
 
@@ -42,6 +47,10 @@ const ServerSummary = ({ data, serverHost, handleOpenInNewTab }) => {
       <Grid item xs={12} sm={12} md={12}>
         <Typography variant="body2" gutterBottom color="textSecondary">
           {t("Server.Thoughts")}
+          <Link href="#" onClick={summonWizard} variant="body2">
+            {t("Server.Wizard")}
+          </Link>
+          .
         </Typography>
       </Grid>
     </Grid>
@@ -51,7 +60,8 @@ const ServerSummary = ({ data, serverHost, handleOpenInNewTab }) => {
 ServerSummary.propTypes = {
   data: PropTypes.object.isRequired,
   serverHost: PropTypes.string,
-  handleOpenInNewTab: PropTypes.func.isRequired
+  handleOpenInNewTab: PropTypes.func.isRequired,
+  summonWizard: PropTypes.func.isRequired
 };
 
 export default ServerSummary;

src/redux/reducers/index.js

@@ -9,6 +9,7 @@ import releaseNotesReducer from "../../features/releaseNotes/reducer";
 import frontendSessionReducer from "../../features/frontendSession/reducer";
 import snackbarReducer from "../../features/snackbar/reducer";
 import chartsReducer from "../../features/charts/chartsReducer";
+import chatbotReducer from "../../features/chatbot/reducer";
 
 const rootReducer = combineReducers({
   frontendSession: frontendSessionReducer,
@@ -18,6 +19,7 @@ const rootReducer = combineReducers({
   releaseNotes: releaseNotesReducer,
   charts: chartsReducer,
   snackbar: snackbarReducer,
+  bot: chatbotReducer,
   ajaxCallsInProgress: ajaxStatusReducer
 });
 

src/redux/reducers/initialState.js

@@ -18,5 +18,8 @@ export default {
     message: null,
     type: null
   },
+  bot: {
+    type: null
+  },
   ajaxCallsInProgress: 0
 };