@hestia.ai/argo-chat

v1.0.3

Published

2 months ago

A lightweight chat widget for Argo AI agents

Downloads

0High
0Medium
0Low

sofia.kypr

fquellec

pdehaye

chat ai argo web-components lit

ArgoChat

ArgoChat is a lightweight, customizable chat widget for integrating Argo AI agents into any website. Built with Lit and bundled as a standalone web component, it provides a seamless chat experience with zero external dependencies.

ArgoChat Demo

Features

🚀 Zero-dependency standalone web component
🎨 Fully customizable theme and appearance
📱 Responsive design that works on all devices
🔌 Simple integration with just a few lines of code
💬 Direct integration with Argo AI agents
🎯 Flexible positioning options

ArgoChat

Installation

You can integrate ArgoChat into your website in multiple ways:

Using CDN (Recommended)

Add the following script tag to your HTML:

import { ArgoChat } from 'https://cdn.jsdelivr.net/npm/@hestia.ai/argo-chat@latest/dist/argo-chat.es.js';

Using NPM

npm i @hestia.ai/argo-chat

Then import with:

import { ArgoChat } from '@hestia.ai/argo-chat'

Usage

Basic Setup

Create an agent on Argo
Get your API key from the Argo dashboard
Add ArgoChat to your website:

<script type="module">
    import { ArgoChat } from 'https://cdn.jsdelivr.net/npm/@hestia.ai/argo-chat@latest/dist/argo-chat.es.js';
    
    const chat = new ArgoChat({
        apiKey: 'your-argo-api-key',
    });
    
    document.body.appendChild(chat);
</script>

Configuration

ChatOptions Interface

interface ChatOptions {
    title: string;           // Title of the chat window
    apiKey: string;          // Your Argo API key
    apiEndpoint: string;     // Argo API endpoint
    greeting: string;        // Greeting message displayed when opened
    position: 'bottom-right' | 'bottom-left';  // Chat position
    placeholder: string;     // Input field placeholder
    theme: ThemeOptions;     // Theme configuration
    user_icon?: string;      // User message icon (optional)
    assistant_icon?: string; // Assistant message icon (optional)
    toggleButton: ToggleButtonOptions;  // Toggle button configuration
}

ThemeOptions Interface

interface ThemeOptions {
    primaryColor: string;    // Primary color (hex format)
    textColor: string;       // Text color on primary background (hex)
    fontFamily: string;      // Font family (import separately)
}

ToggleButtonOptions Interface

interface ToggleButtonOptions {
    icon: string;           // SVG icon string
    icon_size: string;      // Icon size (CSS units)
    btn_size: string;       // Button size (CSS units)
}

Styling

Custom Fonts

Import your desired font and specify it in the theme options:

<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap" rel="stylesheet">

theme: {
    fontFamily: 'Inter, sans-serif'
}

Custom Icons

Customize the chat icons:

{
    user_icon: '<svg>...</svg>',
    assistant_icon: '<svg>...</svg>',
    toggleButton: {
        icon: '<svg>...</svg>'
    }
}

Examples

Complete Integration Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ArgoChat Example</title>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
</head>
<body>
    <script type="module">
        import { ArgoChat } from 'argo-chat';
        
        const chat = new ArgoChat({
            title: 'AI Assistant',
            apiKey: 'your-argo-api-key',
            greeting: 'Welcome! How can I help you today?',
            position: 'bottom-right',
            placeholder: 'Type your message...',
            theme: {
                primaryColor: '#007bff',
                textColor: '#ffffff',
                fontFamily: 'Inter, sans-serif'
            },
            toggleButton: {
                icon: '<svg>...</svg>',
                icon_size: '24px',
                btn_size: '56px'
            }
        });
        
        document.body.appendChild(chat);
    </script>
</body>
</html>

Development

Setup

Prerequisites:

Node.js (v16 or higher)
npm or yarn

Clone the repository:

git clone https://github.com/hestiaAI/argo-chat.git
cd argo-chat

Install dependencies:

npm install

Start the development server:

npm run dev

Build the package:

npm run build

Test the build:

npm run serve

Visit http://localhost:3000 to see the test page.

Publishing

To publish a new version:

npm login --scope=@hestiaai

Update version in package.json:

npm version patch  # or minor or major

Build and test:

npm ci
npm run build

# Pack the package locally
npm pack

# This will create a file like argo-chat-1.0.0.tgz
# You can install it locally in a test project:
npm install ../path/to/hestiaai/argo-chat-1.0.0.tgz

Publish to npm:

npm publish

The new version will automatically be available on the CDN after publishing.

Contributing

We welcome contributions! Please follow these steps:

Fork the repository
Create a feature branch (git checkout -b feature/amazing-feature)
Commit your changes (git commit -m 'Add amazing feature')
Push to the branch (git push origin feature/amazing-feature)
Open a Pull Request

Support

If you encounter any issues or have questions:

Check the Issues page
Create a new issue if your problem isn't already listed
Contact support at [email protected]

Built with ❤️ by Hestia.ai