<!DOCTYPE html>
<html>
<head>
<title></title>
<link href="https://kendo.cdn.telerik.com/themes/10.2.0/default/default-main.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
<script src="js/kendo.all.min.js"></script>
</head>
<body>
<div id="example">
<style>
html .k-chat .k-card-deck .k-card {
flex-basis: 230px;
}
.k-card > img.k-card-media {
height: 115px;
display: block;
}
</style>
<div class="demo-section">
<div id="chat"></div>
</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>
$.when(
$.getScript("https://unpkg.com/botframework-directlinejs@0.11.5/dist/directline.js"),
$.getScript("https://unpkg.com/adaptivecards@2.10.0/dist/adaptivecards.min.js")
).done(function () {
window.agent = new DirectLineAgent(chat, "Y_ly-If6haE.cwA.PQE.ZwOOsq4MlHcD3_YLFI-t9oW6L6DXMMBoi67LBz9WaWA");
});
window.DirectLineAgent = kendo.Class.extend({
init: function (chat, secret) {
this.chat = chat;
this.iconUrl = "../content/chat/VacationBot.png";
this.agent = new DirectLine.DirectLine({ secret: secret });
this.agent.activity$.subscribe($.proxy(this.onResponse, this));
},
postMessage: function (args) {
var postArgs = {
text: args.text,
type: args.type,
timestamp: args.timestamp,
from: args.from
};
this.agent.postActivity(postArgs)
.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);
}
});
var chat = $("#chat").kendoChat({
post: function (args) {
agent.postMessage(args);
}
}).data("kendoChat");
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("k-card-body").append(adaptiveCard.render());
this.element.addClass("k-card").append(bodyElement);
}
});
kendo.chat.registerComponent("application/vnd.microsoft.card.adaptive", AdaptiveCardComponent);
</script>
</div>
</body>
</html>