react-chatbot-kit
react-chatbot-kit copied to clipboard
Question: How to pass state from messageParser,js to config.js ?
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 ?
You could simply set this into state. The whole state object will be passed to your widget.