Clairemont Chat Kit

Streamlined chat library seamlessly integrated with Clairemont's system.

Installation

Install the package using your preferred package manager:

Using Yarn:

yarn add clairemont-chat-kit

Using npm:

npm install clairemont-chat-kit

Or Via CDN Links

<script src="https://unpkg.com/[email protected]/dist/clairemont-chat-kit.umd.js"></script>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/style.css">

How To Use

Setup in your main.js

import { createApp } from 'vue'
import App from './App.vue'
import ClairemontChatKit from 'clairemont-chat-kit'
import 'clairemont-chat-kit/dist/style.css'

createApp(App)
.use(ClairemontChatKit)
.mount('#app')

Implement the Chat Kit in your desired component

<template>
  <ClairemontChatKit/>
</template>

Demo

As of now demos might not be updated because currently integrating serverless.

HTML Vue

Props

| Prop Name | Type | Description | Default Value | | ---------------- | ----------------- | ------------------------------------------------------ | ------------- | | headerTitle | String | Sets the header title for the Chat Kit component. | 'All Messages' | | height | String | Specifies the height of the Chat Kit component. | '800px' | | currentUser | Object | Identifies the current user utilizing the Chat. | - |

currentUser Object Properties

| Property Name | Type | Description | | ------------- | ------ | ---------------------------------- | | appId | String | Unique identifier for the app. | | id | String | Unique identifier for the user. | | name | String | Name of the current user. | | phone | String | phone of the current user. |

Usage Example

Here's an example of how to use the ClairemontChatKit component in your Vue.js application:

<template>
    <ClairemontChatKit
        :headerTitle="'Test'" 
        :height="'100%'"      
        :currentUser="{
            appId: '123',
            id: '1',
            name: 'Aughus Bueno',
            phone: '09XXXXXXXXX'
        }"
    />
</template>