- Notifications
You must be signed in to change notification settings - Fork7
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
Uh oh!
There was an error while loading.Please reload this page.
Stars
Watchers
Forks
Packages0
No packages published
Uh oh!
There was an error while loading.Please reload this page.