Chat Component (WIP)
Get Started
npm i
npm start
ornpm run build:dev
Features
- Web Components
- Themeability
- Animations
- API
- Link wrapping
- Loading states
- Minimal footprint
- HTML, Cards, Images, Galleries: ready for more custom message renderers
Themeability
Just change the custom property values on the <chat-ui>
node. For a list of what you can change, find it here. Or, don't use custom properties, and update the NextCSS config to compile the variables, then you can do it a more SCSSy way, and support more browsers.
Below is an example of how much work it takes to make a dark theme with custom properties:
--chat-ui_theme: hsl(0,0%,15%);
--chat-ui_bg: hsl(0,0%,10%);
--chat-ui_message_bg: hsl(0,0%,20%);
--chat-ui_message_text-color: hsl(0,0%,60%);
--chat-ui_message_bg2: hsl(0,0%,13%);
Component API
This is the primary component that you should be dealing with. It has the easy API, for quick access to the most common tasks in a chat widget. You shouldn't need the API's for the other components, but you can leverage them if you want to.
WARNING: I'm moving fast and not updating these docs much..
Add Message
document.querySelector('chat-ui')
.newMessage({
mine: false, // is this new message the user or user's friend
type: 'HTML', // currently supports ['HTML', 'Text', 'Card', 'Image', 'Gallery']
contents: '<b>Hello</b>!<br>Look HTML works π',
author: {
name: 'Turbo',
avatar: 'https://cdn.dribbble.com/users/37530/screenshots/2937858/drib_blink_bot.gif'
},
})
Listen to what the user wrote
document.querySelector('chat-ui')
.addEventListener('outbound-message', payload =>
console.info('custom event from component', payload))
Friend is writing
document.querySelector('chat-ui')
.writing()
Friend has stopped writing
document.querySelector('chat-ui')
.writing(false)
SET message
Object will pass through the messaging renderer and properly be displayed in the thread
document.querySelector('chat-message')
.message = {...}
add()
Appends a message to the cluster
document.querySelector('chat-cluster')
.add({...})
scrollToLatest()
Scrolls to the beginning of the chat
document.querySelector('chat-scrollview')
.scrollToLatest()
send()
Will send current edited contents
document.querySelector('chat-authoring')
.send()
Development
- Webpack
- CSS4 (postcss + cssnext)
- ES6