<%@ Page Language="C#" AutoEventWireup="true" %>
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
<title>Telerik ASP.NET Example</title>
<link href="styles.css" rel="stylesheet" />
</head>
<body>
<form id="form1" runat="server">
<telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
<telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
<!-- 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/dist/adaptivecards.js"></script>
<div class="demo-container size-narrow" style="text-align: center">
<telerik:RadChat runat="server" ID="RadChat1" Skin="Default">
<ClientEvents OnSendMessage="onSendMessage" OnPost="onPost" OnLoad="onLoad" />
<UserSettings Name="John" />
</telerik:RadChat>
</div>
<script>
var $ = $ || $telerik.$;
function onLoad(sender, args) {
sender.agent = new DirectLineAgent(sender, "yFLWlpeK3CI.cwA.r18.M9VxoEcUnMthu5zsWX2Ox95r5YCcvbC_GvPJooRM0sQ");
}
function onSendMessage(sender, args) {
var postArgs = {
text: args.get_text()
};
sender.agent.postMessage(postArgs);
}
function onPost(sender, args) {
var postArgs = {
text: args.get_text(),
type: args.get_type(),
timestamp: args.get_timestamp(),
from: args.get_from()
};
sender.agent.postMessage(postArgs);
}
var DirectLineAgent = kendo.Class.extend({
init: function (chat, secret) {
this.chat = chat;
this.iconUrl = "images/HealthCareBot.png";
this.agent = new DirectLine.DirectLine({ secret: secret });
this.agent.activity$.subscribe($.proxy(this.onResponse, this));
},
postMessage: function (args) {
this.agent.postActivity(args).subscribe();
},
onResponse: function (response) {
if (response.from.id === this.chat.get_user().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);
}
});
var AdaptiveCardComponent = kendo.chat.Component.extend({
init: function (options, view) {
kendo.chat.Component.fn.init.call(this, options, view);
var adaptiveCard = new AdaptiveCards.AdaptiveCard();
adaptiveCard.hostConfig = new AdaptiveCards.HostConfig({
fontFamily: "Segoe UI, Helvetica Neue, sans-serif"
});
adaptiveCard.parse(options);
var bodyElement = $("<div>").addClass("t-card-body").append(adaptiveCard.render());
this.element.addClass("t-card").append(bodyElement);
}
});
kendo.chat.registerComponent("application/vnd.microsoft.card.adaptive", AdaptiveCardComponent);
</script>
</form>
</body>
</html>