Русская версия

Chat UI

Module for Chat UI representation

Technologies

• ES6
• Babel
• Webpack
• Gulp
• Less

Getting started

You can use Chat UI as module:

import ChatUI from './vendor/chat-ui';

or use it as stand alone file in your project:

<script src="../lib/chat-ui.js"></script>
<link href="../lib/chat-ui.css" rel="stylesheet" media="all" />

$(document).ready(function() {

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

Initialization

var chat = ChatUI(settings).render(tagId);

• settings - settings object of chat properties
• tagId - id of tag, where chat will be rendered

Chat settings

• title - chat title or name of the consultant
• subtitle - position or consultant description
• avatar - avatar image of the consultant - string or boolean
• sendText - text for "send" button in chat window
• inputPlaceholder - placeholder text on the input
• isTyping - message that operator is typing

Default settings:

let settings = {
    title: 'John Doe',
    subtitle: 'consultant',
    avatar: false,
    sendText: 'Send',
    inputPlaceholder: 'Enter your message',
    isTyping: `
        <div class="${LIB_NAME}-dots-loading">
            <span class="dots-loading__dot">&#8226;</span>
            <span class="dots-loading__dot">&#8226;</span>
            <span class="dots-loading__dot">&#8226;</span>
        </div>
    `
}

Events

Your interaction with chat will be via different events

.trigger(eventName)

Open chat window

chat.trigger('open-chat');

Show message in chat dialog list

// There is number of options for message
// It can be string:
// var message = 'Hello!';
// Simple object:
// var message = {message:'Hello'};
// Full object, where you can decide on which side text will appear: 'user' or 'chat'
// var message = {side: 'chat', message:'Hello'};
chat.trigger('add-phrase', message);

Close chat window

chat.trigger('close-chat');

Clear dialog list

chat.trigger('clear-dialog');

Show "typing" icon to the user

chat.trigger('is-typing');

.on(eventName)

User send message callback

chat.on('user-send-message', function(message) {
    // ...
});

Chat closed callback

chat.on('chat-closed', function(data) {
    console.log('chat-closed', data);
});

Developing

Watch function for all files

$ npm run watch

Build regular and minified versions of the library files.

$ npm run build

Code quality

• eslint, based on airbnb specs

Testing

• Mocha npm:mocha
• jsdom npm:jsdom

Libraries

• EventEmitter - evented JavaScript for the browser github:wolfy87-eventemitter, npm:wolfy87-eventemitter
• google caja html sanitizer - https://github.com/google/caja/blob/master/src/com/google/caja/plugin/html-sanitizer.js