FredrikOseberg

   const keys = document.querySelectorAll('.key');
   const audioNodes = document.querySelectorAll('audio');
   
   
   function getDataKey(key) {
      let itemToAddClass;
      keys.forEach(dataKeyItem => {
          if (Number(dataKeyItem.dataset.key) === key) {
            itemToAddClass = dataKeyItem;
          }

FredrikOseberg

import React from "react";
import Chatbot from "react-chatbot-kit";

import config from "./configs/chatbotConfig";
import MessageParser from "./chatbot/MessageParser";
import ActionProvider from "./chatbot/ActionProvider";

function App() {
  return (
    <div className="App">

FredrikOseberg

createChatBotMessage("Ok, one moment", { 
  widget: "overview"
})

FredrikOseberg

widgetName: The name to which you will refer to the widget when you call createChatBotMessage
widgetFunc: A function which returns the component you want to render. It needs to take in props and spread
the props out over the given component: (props) => <Component {...props} />
props: An array of props you want to pass to the component
mapStateToProps: An list of properties from configuration state property that you want this component to receive as props.

FredrikOseberg

import Overview from "../components/widgets/Overview/Overview";
import MessageParserDocs from "../components/widgets/docs/MessageParserDocs/MessageParserDocs";

const config = {
...,
state: {
    gist: "",
    infoBox: "",
  },
  widgets: [

FredrikOseberg

createChatBotMessage("Thanks, I'll see what I can find", {
  widget: "rentalCarResults",
  withAvatar: true,
  delay: 500
})

FredrikOseberg

const fetch = (url, options) => {
  // simplified
  return new Promise((resolve, reject) => {

  const xhr = new XMLHttpRequest()
  // ... make request
  xhr.onload = () => {
    const options = {
        status: xhr.status,
        statusText: xhr.statusText

FredrikOseberg

class MessageParser {
  constructor(actionProvider, state) {
    this.actionProvider = actionProvider;
    // State represents the chatbot state and is passed 
    // in at initalization. You can use it to read chatbot state
    // inside the messageParser
    this.state = state
  }

  parse = (message) => {

FredrikOseberg

class ActionProvider {
  // The action provider receives createChatBotMessage which you can use to define the bots response, and 
  // the setState function that allows for manipulating the bots internal state.
  constructor(createChatBotMessage, setStateFunc, createClientMessage) {
    this.createChatBotMessage = createChatBotMessage;
    this.setState = setStateFunc;
    this.createClientMessage = createClientMessage
  }

  handleMessageParser = () => {

FredrikOseberg

import React from "react";
import { createChatBotMessage } from "react-chatbot-kit";

import Overview from "../components/widgets/Overview/Overview";
import MessageParser from "../components/widgets/MessageParser/MessageParser";
import ActionProviderDocs from "../components/widgets/ActionProvider/ActionProviderDocs";

const botName = "DocsBot";

const config = {