Skip to content

Instantly share code, notes, and snippets.

View FredrikOseberg's full-sized avatar

Fredrik Strand Oseberg FredrikOseberg

View GitHub Profile
@FredrikOseberg
FredrikOseberg / JSdrumkit
Created June 6, 2017 12:48
JS Drumkit My Solution
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;
}
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">
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) => {
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 = () => {
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 = {
createChatBotMessage("Thanks, I'll see what I can find", {
widget: "rentalCarResults",
withAvatar: true,
delay: 500
})
import Overview from "../components/widgets/Overview/Overview";
import MessageParserDocs from "../components/widgets/docs/MessageParserDocs/MessageParserDocs";
const config = {
...,
state: {
gist: "",
infoBox: "",
},
widgets: [
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.
createChatBotMessage("Ok, one moment", {
widget: "overview"
})
// in config
...
import Overview from "../components/widgets/Overview/Overview";
import MessageParser from "../components/widgets/MessageParser/MessageParser";
import ActionProviderDocs from "../components/widgets/ActionProvider/ActionProviderDocs";
const config = {
...,