chat-window

KO | EN

gitlite — search

#javascript #python #ai #llm #rust #deep-learning #linux #macos #nodejs #java #cli #awesome-list #security #pytorch

(★ 30)

A simple and flexible chat window for listing messages.

chat-window Latest Version Download

Download Latest Version (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

[![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
<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](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)

chat-window

chat-window Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

chat-window

chat-window Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

Download README