https://github.com/jifalops/chat-window

A simple and flexible chat window for listing messages.
https://github.com/jifalops/chat-window

chat chat-window polymer web-components

Last synced: about 2 months ago
JSON representation

A simple and flexible chat window for listing messages.

• Host: GitHub
• URL: https://github.com/jifalops/chat-window
• Owner: jifalops
• License: mit
• Created: 2016-11-14T01:38:09.000Z (about 8 years ago)
• Default Branch: master
• Last Pushed: 2018-08-31T03:41:18.000Z (over 6 years ago)
• Last Synced: 2024-11-09T21:38:28.761Z (2 months ago)
• Topics: chat, chat-window, polymer, web-components
• Language: HTML
• Size: 3.26 MB
• Stars: 30
• Watchers: 3
• Forks: 14
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
[![Published on Vaadin  Directory](https://img.shields.io/badge/Vaadin%20Directory-published-00b4f0.svg)](https://vaadin.com/directory/component/jifalopschat-window)

[![Stars on vaadin.com/directory](https://img.shields.io/vaadin-directory/star/jifalopschat-window.svg)](https://vaadin.com/directory/component/jifalopschat-window)

[![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/jifalops/chat-window)

# 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](https://www.webcomponents.org/element/jifalops/from-now).

* Listen for the `send` event to handle sending messages.

## Demo

Mouse-over messages to see the absolute timestamp.

```html

  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 = '';

  });

```

Full demo:

[webcomponents.org](https://www.webcomponents.org/element/jifalops/chat-window/demo/demo/index.html)

| [github](https://jifalops.github.io/chat-window/components/chat-window/demo/).

API: [webcomponents.org](https://www.webcomponents.org/element/jifalops/chat-window/chat-window)

| [github](https://jifalops.github.io/chat-window).

## 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](https://opensource.org/licenses/MIT)