Chat - Healthcare

Isolate this demo as a stand-alone application
  • About this demo
  • C#
  • VB

The Telerik Chat for ASP.NET AJAX component allows for integration with any bot framework, due to its simplicity, flexible API and customizable templates.

This demo demonstrates how the widget can be connected to a chat bot created in Microsoft's Bot Framework, using the DirectLineJS client library. The sample shows off out of the box features of the Chat component, such as the hero cards and suggested actions, as well as the ability to define custom components, which let you use javascript to render any content. In this particular case we use the AdaptiveCards client API to render the adaptive cards returned by the service.

  • DefaultCS.aspx
  • styles.css
<%@ 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" />
    <!-- Load Bot Framework Client API -->
    <script src="http://unpkg.com/botframework-directlinejs/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>

Support & Learning Resources

Find Assistance

Help Us Improve

Was this example helpful?