@lakimi/widget-assistant NPM

@lakimi/widget-assistant

@lakimi/widget-assistant provides two web components to integrate an interactive assistant into your web applications: lakimi-assistant and lakimi-assistant-widget. These components enable real-time communication with the Lakimi API and offer features like voice interaction, customizable prompts, and an embeddable chat widget.

📦 Installation

npm install @lakimi/widget-assistant

Or with Yarn:

yarn add @lakimi/widget-assistant

⚙️ Components Overview

1. `lakimi-assistant`

A web component that renders a fully functional assistant interface with support for real-time communication, message history, and voice interaction.

Attributes:

data-id (required): The unique identifier for the assistant.
data-auth: Authentication token for secured access.
data-api-endpoint: The API endpoint to connect to (default: https://api.lakimi.io).
data-language: Language for the assistant (default: es).

Example Usage:

<lakimi-assistant 
  data-id="assistant-123" 
  data-auth="your-auth-token" 
  data-api-endpoint="https://custom-api.lakimi.io" 
  data-language="en">
</lakimi-assistant>

2. `lakimi-assistant-widget`

A widget that displays a floating assistant bubble. When clicked, it opens a modal containing the lakimi-assistant component. The widget automatically fetches the assistant's avatar and displays it in the bubble.

Attributes:

data-assistant (required): The unique identifier for the assistant.
data-token: Authentication token for secured access.
data-api-endpoint: The API endpoint to connect to (default: https://api.lakimi.io).
data-language: Language for the assistant (default: es).

Example Usage:

<lakimi-assistant-widget 
  data-assistant="assistant-123" 
  data-token="your-auth-token" 
  data-api-endpoint="https://custom-api.lakimi.io" 
  data-language="en">
</lakimi-assistant-widget>

🔧 How It Works

`lakimi-assistant`

This component establishes a WebSocket connection to the specified API endpoint to send and receive messages in real time. It listens for user interactions and handles various events, including text prompts and voice inputs.

`lakimi-assistant-widget`

The widget displays a floating bubble with the assistant's avatar. When clicked, it opens a modal containing the lakimi-assistant component. The widget fetches the avatar from the API based on the assistant ID.