FredrikOseberg / react-chatbot-kit

MIT License
325 stars 155 forks source link

Question: How to pass state from messageParser,js to config.js ? #105

Open Kishan2029 opened 2 years ago

Kishan2029 commented 2 years ago

I am using dialogflow as tool for chatbot. When user write anything to chatbot that mesasage is passed as data to dialogflow api and as a response it gives fulfillmentText. And that response is passed to actionprovider.botMessage method.

I have defined a widget in config.js file and actionprovider uses that widget to create bot message. The props of widgets can be defined in config.js file.

I need to pass props from messageParser.js file (dialogflow api response) to config.js(where props can be defined). I cannot find solution for that. Can anyone help me?

This is post request from messageParser file where dialogflow generate response for user data.

 axios.post('http://localhost:3000/dialogflow', data)
      .then(response => {
        console.log("Frontend:", response.data);
        // Speech to text
        const speechToText = (msg) =>{
          let speech = new SpeechSynthesisUtterance();

          speech.lang = "en-US";
          speech.text = msg;
          speech.volume = 1;
          speech.rate = 1;
          speech.pitch = 1;

          return window.speechSynthesis.speak(speech);
        }
        const msg = response.data.fulfillmentText;
        this.actionProvider.botMessage(msg);
        this.actionProvider.botMessage(speechToText(msg));
})

This is config.js file where widgets are defined.

widgets: [
      {
        widgetName: "options",
        widgetFunc: (props) => <Options {...props} />,
      },
      {
        widgetName: "video",
        widgetFunc: (props) => <VideoPlayer {...props} />,
      },
      {
        widgetName: "weatherCard",
        widgetFunc: (props) => <WeatherCard {...props} />,
        props: {
          city: "Bombay",
          temp: 35,
          date: new Date().toDateString(),
          weather_desc: "Cloudy",
          weather_imgurl: "client/src/asset/cloud.jpeg"
        }
      }
    ]

In weatherCard widget I am passing static value as props. But I need value that dialogflow api generate in messageParser file. How to pass data from messageParser to config ?

FredrikOseberg commented 2 years ago

You could simply set this into state. The whole state object will be passed to your widget.