Embedded chat

            
$(document).ready(function() {
    var phrases = [
        'Ok',
        'How can I help you?',
        'Nice weather today, don\'t you think?',
        'Do you want one of our representative will call you back?',
        'Do you like our product?',
        'Where have you heard about us?',
        'Glad you still use our products',
        'thank you for waiting',
        'Hello again!',
        ':)',
        '^_^'
    ];

    var chat = ChatUI({
        title: 'John Doe',
        avatar: './john-doe.jpg',
        subtitle: 'consultant'
    }).render('#chat', 'dialog');

    chat.trigger('open-chat');

    chat.trigger('add-phrase', 'Hello');

    var timeoutId = null;
    var chatMessage = function(msg) {
        if (msg === 'close') {
            chat.trigger('close-chat');
        } else if (msg === 'clear') {
            chat.trigger('clear-dialog');
        } else if (!timeoutId) {
            var waitTime = Math.floor(Math.random() * 2000) + 600;
            setTimeout(function() {
                chat.trigger('is-typing');
            }, 500);
            timeoutId = setTimeout(function() {
                var phraseNumber = Math.floor(Math.random() * (phrases.length - 1));
                chat.trigger('add-phrase', phrases[phraseNumber]);
                timeoutId = null;
            }, waitTime);
        }
    };

    chat.trigger('add-phrase', '');

    chat.on('user-send-message', chatMessage);

    var $input = $('.input-table__input-field');

    $('.input-table').on('submit', function(event) {
        event.preventDefault();
        chat.trigger('add-phrase', {side: 'user', message: $input.val()});
        $input.val('');
    });
});