All Components

Chat Overview

The Chat component allows the user to participate in chat sessions with other users or with chat bots.

The Chat wrapper for Vue is a client-side wrapper for the Kendo UI Chat widget.

Basic Usage

The following example demonstrates how to initialize the Chat.

<div id="vueapp">
    <kendo-chat ref="chat"
                @post="post"
                @sendmessage="sendMessage"
                :messages-placeholder="'... Type your message ...'"
                :user-name="'MyName'"></kendo-chat>

    <style>
        .k-card > img.k-card-image {
            height: 134px;
            display: block;
        }
        .quoteCard span {
            display: block;
            float: right;
        }
    </style>
</div>
Vue.use(ChatInstaller);

window.DialogFlowAgent = kendo.Class.extend({
    init: function (chat) {
        this.chat = chat;
        this.userInfo = {
            id: "botty",
            iconUrl: "https://demos.telerik.com/kendo-ui/content/chat/InsuranceBot.png",
            name: "Botty McbotFace"
        };

        this.agent = new 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());
    }
});

new Vue({
    el: '#vueapp',
    mounted () {
      this.registerTemplates()
      this.apiAiAgent = new DialogFlowAgent(this.$refs.chat.kendoWidget())
    },
    methods: {
      post (args) {
        this.apiAiAgent.postMessage(args.text)
      },
      registerTemplates () {
        var QUOTE_CARD_TEMPLATE = kendo.template(
          '<div class="k-card k-card-type-rich">' +
                '<p><strong>Your car insurance would be:</strong></p>' +
                '<div class="k-card-body quoteCard">' +
                    '<div><strong>Type:</strong>' +
                    '<span>#:coverage#</span></div>' +

                    '<div><strong>Car model:</strong>' +
                    '<span>#:make# #:model#</span></div>' +

                    '<div><strong>Car cost:</strong>' +
                    '<span>#:worth#</span></div>' +

                    '<div><strong>Start date:</strong>' +
                    '<span>#:startDate#</span></div>' +

                    '<hr/><div><strong>Total:</strong>' +
                    '<span>#=kendo.toString(premium, "0.00")#</span></div>' +
                '</div>' +
            '</div>'
        )

        kendo.chat.registerTemplate('quote', QUOTE_CARD_TEMPLATE)

        var PLAN_CARD_TEMPLATE = kendo.template(
          '<div class="k-card k-card-type-rich">' +
                '<div class="k-card-body quoteCard">' +

                    '# for (var i = 0; i < rows.length; i++) { #' +
                    '<div><strong>#:rows[i].text#: </strong>' +
                    '<span>#= kendo.toString(rows[i].value, "0.00") #</span></div>' +
                    '# } #' +

                    '<hr/><div><strong>Total:</strong>' +
                    '<span>#= kendo.toString(premium, "0.00") #</span></div>' +

                '</div>' +
            '</div>'
        )

        kendo.chat.registerTemplate('payment_plan', PLAN_CARD_TEMPLATE)
      },
      sendMessage (e) {
        console.log('Message sent: ' + e.text)
      }
    }
})

Installation

To initialize the Chat, either:

Initializing with Webpack

  1. Install Kendo UI and add a theme.

    npm install --save @progress/kendo-ui
    npm install --save @progress/kendo-theme-default
  2. Install the Kendo UI Chat package for Vue.

    npm install --save @progress/kendo-chat-vue-wrapper
  3. Import the Kendo UI packages to the App component. If you use the Kendo UI components more than once in your application, add all Kendo UI-related files to the main.js file. If you use the Kendo UI components once in your application, add the Kendo UI-related files to the component where they will be referred.

    import '@progress/kendo-ui'
    import '@progress/kendo-theme-default/dist/all.css'
    
    import { Chat, ChatInstaller } from '@progress/kendo-chat-vue-wrapper'
    
    Vue.use(ChatInstaller)
    
    new Vue({
       el: '#app',
       components: {
           Chat
       }
    })

Functionality and Features

Events

The following example demonstrates basic Chat events. You can subscribe to all Chat events by their handler name.

<div id="vueapp" class="vue-app">
    <kendo-chat ref="chat"
                v-on:post="onPost"
                v-on:sendmessage="onSendMessage"
                v-on:actionclick="onActionClick"
                v-on:typingstart="onTypingStart"
                v-on:typingend="onTypingEnd"></kendo-chat>
</div>
Vue.use(ChatInstaller);

new Vue({
    el: '#vueapp',
    methods: {
        onPost: function (ev) {
            console.log("A message has been posted to the Chat widget!");
        },
        onSendMessage: function (ev) {
            console.log("A message has been posted to the Chat widget using the message box!");
        },
        onActionClick: function (ev) {
            console.log("The user clicked an action button in attachment template, or selected a suggestedAction!");
        },
        onTypingStart: function (ev) {
            console.log("The user started typing in the Chat message box!");
        },
        onTypingEnd: function (ev) {
            console.log("The user cleared the Chat message box!");
        }
    }
})
In this article