/chat-ui

Module for Chat UI representation

Primary LanguageJavaScript

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

Chat UI

Module for Chat UI representation

alt tag

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

Libraries