@hestia.ai/argo-chat
TypeScript icon, indicating that this package has built-in type declarations

1.0.3 • Public • Published

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

Table of Contents

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

  1. Create an agent on Argo
  2. Get your API key from the Argo dashboard
  3. 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
  1. Clone the repository:
git clone https://github.com/hestiaAI/argo-chat.git
cd argo-chat
  1. Install dependencies:
npm install
  1. Start the development server:
npm run dev
  1. Build the package:
npm run build
  1. 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
  1. Update version in package.json:
npm version patch  # or minor or major
  1. 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
  1. 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:

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

Support

If you encounter any issues or have questions:

  1. Check the Issues page
  2. Create a new issue if your problem isn't already listed
  3. Contact support at support@hestia.ai

Built with ❤️ by Hestia.ai

Versions

Current Tags

VersionDownloads (Last 7 Days)Tag
1.0.31latest

Version History

VersionDownloads (Last 7 Days)Published
1.0.31
1.0.20
1.0.10
1.0.00

Package Sidebar

Install

npm i @hestia.ai/argo-chat

Weekly Downloads

1

Version

1.0.3

License

MIT

Unpacked Size

147 kB

Total Files

15

Last publish

Collaborators

  • sofia.kypr
  • fquellec
  • pdehaye