vcf-chat
Chat implementation with virtual scroll, infinite scroll and scrolling from bottom to top
vcf-chat Web Component
<vcf-chat> is a Web Component chat implementation with virtual and infinite scroll. vcf-chat uses vcf-avatar to show senders/recippients avatars. New messages apears in a bootom of message list.
Usage
<vcf-chat lazy-load-trigger-offset="300">
<div class="loading-indicator" slot="loading-indicator">
Loading..
</div>
</vcf-chat>

Installation
This components is distributed as Bower packages.
Polymer 2 and HTML Imports compatible version
Install vcf-chat
:
bower i vaadin/vcf-chat --save
Once installed, import it in your application:
<link rel="import" href="bower_components/vcf-chat/vcf-chat.html">
Getting Started
Vaadin components use the Lumo theme by default.
The file structure for Vaadin components
src/vcf-chat.html
Unstyled component.
theme/lumo/vcf-chat.html
Component with Lumo theme.
vcf-chat.html
Alias for theme/lumo/vcf-chat.html
Running demos and tests in browser
Fork the
vcf-chat
repository and clone it locally.Make sure you have npm installed.
When in the
vcf-chat
directory, runnpm install
and thenbower install
to install dependencies.Run
polymer serve --open
, browser will automatically open the component API documentation.You can also open demo or in-browser tests by adding demo or test to the URL, for example:
Running tests from the command line
- When in the
vcf-chat
directory, runpolymer test
Following the coding style
We are using ESLint for linting JavaScript code. You can check if your code is following our standards by running gulp lint
, which will automatically lint all .js
files as well as JavaScript snippets inside .html
files.
Contributing
- Make sure your code is compliant with our code linters:
gulp lint
- Check that tests are passing:
polymer test
- Submit a pull request with detailed title and description
- Wait for response from one of Vaadin components team members
Vaadin Prime
This component is available in Vaadin Prime subscription. It is still open source, but you need to have a valid CVAL license in order to use it. Read more at: https://vaadin.com/pricing
License
Commercial Vaadin Add-on License version 3 (CVALv3). For license terms, see LICENSE.
Vaadin collects development time usage statistics to improve this product. For details and to opt-out, see https://github.com/vaadin/vaadin-usage-statistics.
Sample code
<vcf-chat lazy-load-trigger-offset="300"> <div class="loading-indicator" slot="loading-indicator"> Loading.. </div> </vcf-chat>
window.addDemoReadyListener('#vcf-chat-demo-sample', function(document) { const vcfChat = document.querySelector('#demo1'); addMessages(vcfChat); vcfChat.addEventListener('vcf-chat-trigger-lazy-load', () => { setTimeout(() => { addMessages(vcfChat); vcfChat.loading = false; }, 400); }); vcfChat.addEventListener('vcf-chat-new-message', (e) => { vcfChat.push('messages', { body: e.detail.body, senderName: 'Mary White', currentUser: true }); vcfChat.clearInput(); vcfChat.scrollToBottom(); }); }
Links
Compatibility
Was this helpful? Need more help?
Leave a comment or a question below. You can also join
the chat on Discord or
ask questions on StackOverflow.
Version
Dependencies
- polymer#^2.0.0
- vaadin-themable-mixin#vaadin/vaadin-themable-mixin#^1.0.0
- vaadin-license-checker#vaadin/license-checker#^2.0.1
- vaadin-lumo-styles#vaadin/vaadin-lumo-styles#^1.0.0
- vaadin-element-mixin#^2.1.2
- iron-list#v2.0.16
- vaadin-text-field#^2.1.2
- vaadin-button#^2.1.0
- vcf-avatar#vaadin-component-factory/vcf-avatar#^1.3.0
- vaadin-progress-bar#vaadin/vaadin-progress-bar#^1.1.0
- Released
- 2019-10-17
- Maturity
- IMPORTED
- License
- Other
Compatibility
- Framework
- Polymer 2.0+
- Polymer 3.0+
- Browser
- Browser Independent