Google DialogFlow
You can configure a Chat agent class that handles the communication between the Chat component and the Google DialogFlow.
In this case, the postMessage method of the agent class implements the logic that will be executed on user interaction. When the textRequest() promise of the DialogFlowClient is resolved, the onResponse() method of the agent is executed. It then passes the received data to the renderMessages() method that renders the response in the Chat component.
<div id="chat"></div>
<!-- Load Promise Polyfill. Required by the DialogFlow Client API.-->
<script src="https://www.promisejs.org/polyfills/promise-6.1.0.js"></script>
<!-- Load DialogFlow Client API -->
<script src="https://cdn.rawgit.com/dialogflow/dialogflow-javascript-client/50e82e62/target/ApiAi.min.js"></script>
<script>
$(document).ready(function () {
// Initialize the Chat.
var chat = $("#chat").kendoChat({
post: function (args) {
agent.postMessage(args.text);
}
}).data("kendoChat");
// Create the agent instance and pass the Chat to it.
var agent = new DialogFlowAgent(chat);
});
</script>
<script>
window.DialogFlowAgent = kendo.Class.extend({
init: function (chat) {
this.chat = chat;
this.userInfo = {
id: "botty",
iconUrl: "https://demos.telerik.com/kendo-ui/content/chat/InsuranceBot.png",
name: "Botty McbotFace"
};
// Assign the DialogFlow client to a property of the agent.
this.dialogFlowClient = new ApiAi.ApiAiClient({ accessToken: "280344fb165a461a8ccfef7e1bb47e65" });
// Post a predefined event to the DialogFlow.
// It will return predefined messages to be rendered in the Chat.
this.postEvent("Welcome");
this._timestamp;
},
// Post the predefined event and attach the listener for the resolved promise.
postEvent: function (event) {
this.dialogFlowClient
.eventRequest(event)
.then($.proxy(this.onResponse, this));
},
// Post a user message to the DialogFlow and attach the listener for the resolved promise.
postMessage: function (text) {
this.dialogFlowClient
.textRequest(text)
.then($.proxy(this.onResponse, this));
},
// The promise.then() implementation.
onResponse: function (response) {
this._timestamp = response.timestamp;
if (response.result && response.result.fulfillment) {
var fulfillment = response.result.fulfillment;
var data = fulfillment.data;
this.renderMessages(fulfillment.messages);
}
},
// Render the returned messages in the Chat.
renderMessages: function (messages) {
var that = this;
$(messages).each(function (index, message) {
switch (message.type) {
case 0:
that.chat.renderMessage({
type: "text",
text: message.speech,
timestamp: that._timestamp
}, that.userInfo);
break;
case 2:
that.renderSuggestedActions(message.replies.map(function (reply) {
return {
title: reply,
value: reply
};
}));
break;
default:
}
});
}
});
</script>