common-chatbox-v4

Common ChatBox V4

Install

npm install common-chatbox-v4

Usage

Vue 3 project entry:

import { createApp } from 'vue'
import ChatBox from 'common-chatbox-v4'
import 'common-chatbox-v4/dist/style.css'

import App from './App.vue'

const app = createApp(App)

app.use(ChatBox)
app.mount('#app')

If the host project already uses Vuetify and has custom theme/defaults, install Vuetify before ChatBox:

import { createApp } from 'vue'
import { createVuetify } from 'vuetify'
import 'vuetify/styles'
import ChatBox from 'common-chatbox-v4'
import 'common-chatbox-v4/dist/style.css'

import App from './App.vue'

const vuetify = createVuetify({
  // host project theme/defaults
})

const app = createApp(App)

app.use(vuetify)
app.use(ChatBox)
app.mount('#app')

You can also pass Vuetify options to ChatBox when the host project does not install Vuetify itself:

app.use(ChatBox, {
  vuetify: {
    // theme/defaults
  },
})

Props And Events

isHedgehood: whether the current brand is Hedgehood
sendAvatar: chat icon avatar URL
unreadCount: unread message count
token: current system token
profileUrl: profile service URL
baseUrl: ticket service URL
translateLists: translation list
ticketAdd: new message signal
ticketId: ticket id
inHelpCenter: whether ChatBox is rendered in Help Center
currentPosition: mobile icon position, default fixed
showExpandIcon: whether to show the expand icon
@showMask: emits mask visibility changes
@toHelpCenter: emits when jumping to Help Center
@resetUnreadCount: emits when the icon resets unread count

Template Example

<template>
  <chat-box
    v-if="show"
    :is-hedgehood="isHedgehood"
    :send-avatar="sendAvatar"
    :unread-count="unreadCount"
    :token="token"
    :profile-url="profileUrl"
    :base-url="baseUrl"
    :translate-lists="translateLists"
    :ticket-add="ticketAdd"
    :ticket-id="ticketId"
    :in-help-center="inHelpCenter"
    @show-mask="showMask"
    @to-help-center="toHelpCenter"
    @reset-unread-count="resetUnreadCount"
  />
</template>