2.0.3: Fix message reply

Changelog

• Fix message reply not visible 0dff9a8

2.0.2: Fix initial room loading

Changelog

• Fix initial room loading #354

2.0.1: Fix video height & toggle-rooms-list event

Changelog

• Fix video height issue #349
• Fix toggle-rooms-listevent not overriding default behaviour #346

2.0.0: Web component migration

Fully migrate the library to web component, so it can be used the same way on Vue 2, Vue 3, React, Angular and any other framework, or with not framework at all.

For more information, please read the official documentation Vue and Web Components.

MIGRATION GUIDE

Usage

• Import and use the web component like this:

import { register } from 'vue-advanced-chat'
register()

• Register vue-advanced-chat as a web component in your config file:

compilerOptions: {
  isCustomElement: tagName => tagName === 'vue-advanced-chat'
}

Shadow DOM

CSS classes cannot be simply overridden anymore. You can still use CSS variables, and if needed you can override CSS classes like this:

const style = document.createElement('style')
style.innerHTML = styles
this.$refs.chatWindow.shadowRoot.appendChild(style)

Props

For array and object props, you need to pass it as strings, for example: [messages]="JSON.stringify(messages)

Some props typing have changed:

• current-user-id and room-id props must be strings
• roomId, typingUsers and user._id in rooms prop must be strings
• senderId in messages prop must be a string
• senderId is rooms.lastMessage must be a string

Events

You can get events params like this:

@fetch-messages="fetchMessages($event.detail[0])"

Slots

As this library is now using native web component slots, some slots were renamed and the usage changed in some cases.
For the full list of available slots, please refer to https://github.com/antoine92190/vue-advanced-chat#named-slots

1.5.8: Fix templates & hashtags

Changelog

• Fix templates and hashtags selection #335 #334

1.5.7: Fix release issue

Changelog

• Previous release version seems to have the incorrect build files

1.5.6: Add textarea-auto-focus prop & system-message slot

Changelog

• Upgrade emoji picker version #325
• Add textarea-auto-focus prop to disable autofocus when opening a room for the first time #323
• Add system-message slot #316

1.5.5: Increase emojis size

Changelog

• Fix emojis size on message which is too small #305
• Fix emoji picker animation when opened for the first time #298

1.5.4: Add emoji-picker slot

Changelog

• Add emoji-picker slot to replace use custom emoji picker in room footer or message actions 8b07638

1.5.3: Fix footer slots + Bug fixes

Changelog

• Fix viewport overflow on mobile* #285
• Fix usertags not opening with image message #280
• Fix media preview position when scrolling #283
• Fix missing footer slots #288

*Credits to @rr-it