<%@ Page Language="C#" AutoEventWireup="true" %>
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<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" />
<div class="demo-container size-narrow" style="text-align: center">
<telerik:RadChat runat="server" ID="RadChat1" Skin="Default">
<ClientEvents OnPost="onPost" OnLoad="onLoad" />
<UserSettings Name="John" />
</telerik:RadChat>
</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>
<telerik:RadCodeBlock runat="server">
<script>
var $ = $ || $telerik.$;
function onLoad(sender, args) {
sender.agent = new DialogFlowAgent(sender);
}
function onPost(sender, args) {
sender.agent.postMessage(args.get_text());
}
var DialogFlowAgent = kendo.Class.extend({
init: function (chat) {
this.chat = chat;
this.userInfo = {
id: "botty",
iconUrl: "images/avatar.png",
name: "Botty McbotFace"
};
this.agent = new ApiAi.ApiAiClient({ accessToken: "280344fb165a461a8ccfef7e1bb47e65" });
this.postEvent("Welcome");
this._timestamp;
},
postEvent: function (event) {
this.agent
.eventRequest(event)
.then($.proxy(this.onResponse, this));
},
postMessage: function (text) {
this.agent
.textRequest(text)
.then($.proxy(this.onResponse, this));
},
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);
if (data && data.null) {
this.renderAttachments(data.null);
this.renderSuggestedActions(data.null.suggestedActions);
}
}
},
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:
}
});
},
renderAttachments: function (data) {
var that = this;
data.attachments = $(data.attachments).map(function (index, attachment) {
return {
contentType: attachment.type || "heroCard",
content: attachment
};
}).toArray();
this.chat.renderAttachments(data, this.userInfo);
},
renderSuggestedActions: function (suggestedActions) {
this.chat.renderSuggestedActions($(suggestedActions).toArray());
}
});
</script>
<script>
var QUOTE_CARD_TEMPLATE = kendo.template(
'<div class="#=styles.card# #=styles.cardRich#">' +
'<div class="#=styles.cardBody#">' +
'<div><strong>Type:</strong>' +
'<span>#:coverage#</span></div>' +
'<div><strong>Car model:</strong>' +
'<span>#:make#</span></div>' +
'<div><strong>Car cost:</strong>' +
'<span>#:worth.amount#</span></div>' +
'<div><strong>Start date:</strong>' +
'<span>#:startDate#</span></div>' +
'<hr/><div><strong>Total:</strong>' +
'<span>#:premium#</span></div>' +
'</div>' +
'</div>'
);
kendo.chat.registerTemplate("quote", QUOTE_CARD_TEMPLATE);
var PLAN_CARD_TEMPLATE = kendo.template(
'<div class="#=styles.card# #=styles.cardRich#">' +
'<div class="#=styles.cardBody# quoteCard">' +
'# for (var i = 0; i < rows.length; i++) { #' +
'<div>#:rows[i].text#</div>' +
'# } #' +
'<hr/><div><strong>Total:</strong>' +
'<span>#:premium#</span></div>' +
'</div>' +
'</div>'
);
kendo.chat.registerTemplate("payment_plan", PLAN_CARD_TEMPLATE);
</script>
</telerik:RadCodeBlock>
</form>
</body>
</html>