Skip to content

Latest commit

 

History

History
125 lines (111 loc) · 4.32 KB

README.md

File metadata and controls

125 lines (111 loc) · 4.32 KB

Published on webcomponents.org

chat-window

The easiest way to have a chat.

Installation

bower install --save chat-window

Usage

  • Pass it a list of messages and it will display them with live relative timestamps using from-now.
  • Listen for the send event to handle sending messages.

Demo

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.

Features

  • 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: msg format instead of alignment based format.
  • Use material guidelines for showing relative vs absolute timestamps as well as their format.

Contributing

  1. Fork it on Github.
  2. Create your feature branch: git checkout -b my-new-feature
  3. Commit your changes: git commit -am 'Add some feature'
  4. Push to the branch: git push origin my-new-feature
  5. Submit a pull request

License

MIT