- Notifications
You must be signed in to change notification settings - Fork9
Module for Chat UI representation
NotificationsYou must be signed in to change notification settings
artemdemo/chat-ui
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
Module for Chat UI representation
- ES6
- Babel
- Webpack
- Gulp
- Less
You can use Chat UI as module:
importChatUIfrom'./vendor/chat-ui';
or use it as stand alone file in your project:
<scriptsrc="../lib/chat-ui.js"></script><linkhref="../lib/chat-ui.css"rel="stylesheet"media="all"/>
$(document).ready(function(){varchat=ChatUI({title:'John Doe',avatar:'./john-doe.jpg',subtitle:'consultant'}).render('#chat');});
Initialization
varchat=ChatUI(settings).render(tagId);
settings- settings object of chat propertiestagId- id of tag, where chat will be rendered
Chat settings
title- chat title or name of the consultantsubtitle- position or consultant descriptionavatar- avatar image of the consultant - string or booleansendText- text for "send" button in chat windowinputPlaceholder- placeholder text on the inputisTyping- message that operator is typing
Default settings:
letsettings={title:'John Doe',subtitle:'consultant',avatar:false,sendText:'Send',inputPlaceholder:'Enter your message',isTyping:` <divpl-s1">${LIB_NAME}-dots-loading"> <span>•</span> <span>•</span> <span>•</span> </div> `}
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);});
Watch function for all files
$ npm run watch
Build regular and minified versions of the library files.
$ npm run build
- eslint, based on airbnb specs
- EventEmitter - evented JavaScript for the browsergithub:wolfy87-eventemitter,npm:wolfy87-eventemitter
- google caja html sanitizer -https://github.com/google/caja/blob/master/src/com/google/caja/plugin/html-sanitizer.js
About
Module for Chat UI representation
Topics
Resources
Stars
Watchers
Forks
Packages0
No packages published