Microsoft Bot Framework
You can configure a Chat agent class that handles the communication between the Chat component and the Microsoft Bot Framework.
In this case, the establishment of a connection to the service and the binding of the appropriate events are done within the init method. The agent is subscribed to listen for any activity$ of the remote service. When an activity is detected, the appropriate method from the Chat public API is invoked to render the data. To handle the user input, the example implements the post event handler of the Chat and the arguments are passed to the Chat Bot service.
<div id="chat"></div>
<!-- Load Bot Framework Client API -->
<script src="https://unpkg.com/botframework-directlinejs@0.11.5/dist/directline.js"></script>
<!-- Load Adaptive Cards Client API -->
<script src="https://unpkg.com/adaptivecards@2.10.0/dist/adaptivecards.min.js"></script>
<script>
$(document).ready(function () {
// Initialize the Chat.
var chat = $("#chat").kendoChat({
post: function (args) {
agent.postMessage(args);
}
}).data("kendoChat");
// Create a new agent and pass the Chat component.
var agent = new DirectLineAgent(chat, "Y_ly-If6haE.cwA.PQE.ZwOOsq4MlHcD3_YLFI-t9oW6L6DXMMBoi67LBz9WaWA");
});
</script>
<script>
window.DirectLineAgent = kendo.Class.extend({
init: function (chat, secret) {
this.chat = chat;
this.iconUrl = "https://demos.telerik.com/kendo-ui/content/chat/avatar.png";
// Assign here the Bot framework agent.
// The following example uses the Microsoft Bot Framework.
this.agent = new DirectLine.DirectLine({ secret: secret });
// The following code will depend on the Bot framework of choice.
// In this case, the agent is subscribed to listen for any activity of the service.
// Its onResponse method will be executed on any detected activity.
this.agent.activity$.subscribe($.proxy(this.onResponse, this));
},
// The implementation of the following methods will depend on the Bot framework of choice.
// This example uses the Microsoft Bot Framework API to demonstrate a possible implementation.
postMessage: function (args) {
this.agent.postActivity(args)
.subscribe();
},
onResponse: function (response) {
if (response.from.id === this.chat.getUser().id) {
return;
}
response.from.iconUrl = this.iconUrl;
this.renderMessage(response);
this.renderAttachments(response);
this.renderSuggestedActions(response.suggestedActions);
},
renderMessage: function (message) {
if (message.text || message.type == "typing") {
this.chat.renderMessage(message, message.from);
}
},
renderAttachments: function (data) {
this.chat.renderAttachments(data, data.from);
},
renderSuggestedActions: function (suggestedActions) {
var actions = [];
if (suggestedActions && suggestedActions.actions) {
actions = suggestedActions.actions;
}
this.chat.renderSuggestedActions(actions);
}
});
</script>