jube-fork/Jube.App/wwwroot/kendo/examples/chat/healthcare.html

<!DOCTYPE html>
<html>
<head>
    <title>Healthcare</title>
    <meta charset="utf-8">
    <link href="../content/shared/styles/examples-offline.css" rel="stylesheet">
    <link href="../../styles/kendo.common.min.css" rel="stylesheet">
    <link href="../../styles/kendo.rtl.min.css" rel="stylesheet">
    <link href="../../styles/kendo.default.min.css" rel="stylesheet">
    <link href="../../styles/kendo.default.mobile.min.css" rel="stylesheet">
    <script src="../../js/jquery.min.js"></script>
    <script src="../../js/jszip.min.js"></script>
    <script src="../../js/kendo.all.min.js"></script>
    <script src="../content/shared/js/console.js"></script>
    <script>
        
    </script>
    
    
</head>
<body>
    
        <a class="offline-button" href="../index.html">Back</a>
    
    
    <div id="example">
        <style>
            .k-card > img.k-card-image {
                height: 157px;
                display: block;
            }
        </style>

        <div class="demo-section k-content">
            <div id="chat"></div>
        </div>

        <!-- Load Bot Framework Client API -->
        <!--   <script src="https://unpkg.com/[email protected]/dist/directline.js"></script> -->
        <!-- Load Adaptive Cards Client API -->
        <!--       <script src="https://unpkg.com/adaptivecards/dist/adaptivecards.js"></script> -->

        <script>
            $.when(
                $.getScript("https://unpkg.com/[email protected]/dist/directline.js"),
                $.getScript("https://unpkg.com/adaptivecards/dist/adaptivecards.js")
            ).done(function () {
                window.agent = new DirectLineAgent(chat, "yFLWlpeK3CI.cwA.r18.M9VxoEcUnMthu5zsWX2Ox95r5YCcvbC_GvPJooRM0sQ");
            })

            window.DirectLineAgent = kendo.Class.extend({
                    init: function (chat, secret) {
                        this.chat = chat;
                        this.iconUrl = "../content/chat/HealthCareBot.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>