@airlst/live-events-styled-chat

Styled Chat component for AirLST Live Events

This component provides chat functionality with pre-configured styles.

Table of Contents

• Installation
• Usage
• Caveats

Installation

Install it as package using either yarn or npm:

yarn add @airlst/live-events-styled-chat
// or
npm install @airlst/live-events-styled-chat

Import chat styles to your project's styles

@import '@airlst/live-events-styled-chat/dist/chat.css';

Additionally, you also need to install @airlst/live-events-headless-components package:

yarn add @airlst/live-events-headless-components
// or
npm install @airlst/live-events-headless-components

Usage

Import component in any page you want to use chat component.

Important: Because styled chat component is still part of headless components, it requires to be wrapper inside BaseComponent from headless component. If you are already using BaseComponent in a higher level components, like layout, you don't need to include it again.

Every chat instance needs to have alias. If you don't pass an alias, default "default" alias will be used.

Out-of-the-box chat component has multi-language support. But, this requires passing current selected language's chat related translations as translations property. In the following example, we use Vue's i18n package, store all chat related translations in chat object and pass it directly to the component.

<template>
  <div>
    <base-component>
      <chat-component
          alias="my-chat-component"
          :translations="$t('chat')"
      />
    </base-component>
  </div>
</template>

<script>
import BaseComponent from '@airlst/live-events-headless-components'
import ChatComponent from '@airlst/live-events-styled-chat'

export default {
  components: {
    BaseComponent,
    ChatComponent
  }
}
</script>

Caveats

It is important to keep in mind that whenever chat component is mounted, it is tracking user's online state and receiving chat message, channel changes in the background.

If you want to enable/disable chat based on user interaction, make sure that you don't mount the component before user enables it and unmount it when user disables.