@aio-chat/client NPM

@aio-chat/client

This package provides the frontend web component(s) for the @aio-chat system. It allows you to easily embed chat functionality into your web application. It is best matched with @aio-chat/service

Features

Web Component: Easily embed a web component using a standard HTML tag or JavaScript initialization.
Customizable: Configure appearance and behavior (future).
Authentication Integration: Works with various authentication methods provided by @aio-chat/service.

Installation

Install the client package:

npm install @aio-chat/client

Also, ensure Vue.js is installed in your project, as the component relies on it:

npm install vue

Quick Start

The @aio-chat/client web component allows you to embed a web component into your application. It supports two ways to initialize:

Using the <chat-widget> HTML Element:
Import the package in some JS file that you will later import to the page or layout where component is used.
```
import '@aio-chat/client';
```
Just define the element
```
<chat-widget user_id="123" service_url="https://your-backend.com"></chat-widget>
```

Using the initChatWidget Function:

import { initChatWidget } from '@aio-chat/client';

initChatWidget({
  user_id: 123,
  service_url: 'https://your-backend.com',
  container: document.querySelector('#chat-container')
});

Configuration

Key configuration options include:

service_url: The base URL of the chat service (@aio-chat/service).
user_id: The ID of the authenticated user.
token: The JWT token used for authentication (if using JWT mode, for more info check docs of @aio-chat/service).

For more details, refer to the Web Component Documentation.