The easiest way to have a chat.
bower install --save chat-window
- Pass it a list of messages and it will display them with live relative timestamps using from-now.
- Listen for the
sendevent to handle sending messages.
Mouse-over messages to see the absolute timestamp.
<chat-window
id="chat"
author="me"
single-line>
</chat-window>
<script>
var chat = document.getElementById('chat');
var author;
chat.messages = messages;
chat.addEventListener('send', function(e) {
author = author == 'me' ? 'you' : 'me'; // For demo
chat.push('messages',{
author: author,
text: e.detail,
created: Date.now()
});
chat.inputText = '';
});
</script>Full demo: webcomponents.org | github.
API: webcomponents.org | github.
- Single or multi line input.
- Send-on-enter option, default is on for single-line and off for multi-line input.
- Slots for a header, footer, and a custom input field.
- Styling hooks for full styling flexibility
- Automatically scrolls to bottom when a new message arrives (can be disabled).
- Absolute timestamps can be shown via configurable date format.
- Auto-updating message timestamps using Moment.js that
- Show every 5 minutes if less than one hour old,
- Show every hour if less than a day old,
- Show every four hours if a less than a week old,
- Otherwise show once per day.
TODO
- Allow
author: msgformat instead of alignment based format. - Use material guidelines for showing relative vs absolute timestamps as well as their format.
- Fork it on Github.
- Create your feature branch:
git checkout -b my-new-feature - Commit your changes:
git commit -am 'Add some feature' - Push to the branch:
git push origin my-new-feature - Submit a pull request