chat-window

The easiest way to have a chat.

Installation

bower i -S chat-window        # Polymer 2.0 hybrid (1.x compatible)
bower i -S chat-window#0.5.0  # Polymer 1.x based

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