Skip to content

A simple and flexible chat window for listing messages.

License

Notifications You must be signed in to change notification settings

jifalops/chat-window

Repository files navigation

Published on Vaadin  Directory Stars on vaadin.com/directory Published on webcomponents.org

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

About

A simple and flexible chat window for listing messages.

Topics

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Contributors 4

  •  
  •  
  •  
  •  

Languages