@hestia.ai/argo-chat NPM

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:

<script type="module" src="https://cdn.jsdelivr.net/npm/@hestia.ai/argo-chat@latest/dist/argo-chat.js"></script>

Using NPM

npm i @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 'argo-chat';
    
    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: 1. Login to NPM:

npm login --scope=@hestiaai

Update version in package.json:

npm version patch  # or minor or major

Build and test:

npm run 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 support@hestia.ai

Built with ❤️ by Hestia.ai

chat ai argo web-components lit

2 months ago

2 months ago

2 months ago

@hestia.ai/argo-chat v1.0.2

ArgoChat

Features

Table of Contents

Installation

Using CDN (Recommended)

Using NPM

Usage

Basic Setup

Configuration

ChatOptions Interface

ThemeOptions Interface

ToggleButtonOptions Interface

Styling

Custom Fonts

Custom Icons

Examples

Complete Integration Example

Development

Setup

Publishing

Contributing

Support