@agentman/chat-widget

v5.13.3

Published

4 months ago

Agentman Chat Widget for easy integration with web applications

Downloads

375

0High
0Medium
0Low

agentman

chat widget agentman assistant typescript

Agentman Chat Widget

A customizable, open-source chat widget that can be easily integrated into any web application. The widget provides a modern, responsive interface for users to interact with Agentman AI agents.

Latest Version: Features a completely refactored component-based architecture with improved performance, simplified theming, and Claude-style conversation interface.

Features

🎨 Modern Interface

Claude-style conversation layout with role labels (no message bubbles)
Simplified theming system focused on essential customization
Responsive design for all devices and screen sizes
Professional header design with grouped action buttons

🏗️ Component Architecture

Modern component-based architecture for better maintainability
Separated concerns: UIManager, ConversationManager, StateManager
Reactive state management with pub/sub pattern
Optimized DOM manipulation and caching

💬 Conversation Features

Multiple conversation support with history navigation
Message prompts and welcome messages
Conversation persistence across sessions
Real-time message rendering with markdown support
Automatic sticky element detection (repositions widget above sticky bars)

🔧 Developer Experience

TypeScript support with comprehensive type definitions
Easy integration with any web application
WordPress plugin support with visual configuration
Simplified API with backward compatibility

⚡ Performance

Lightweight and performant (~41KB gzipped)
Optimized bundle size with smart defaults
Efficient memory management and cleanup
Browser caching and CDN support

🔒 Security & Reliability

Secure token-based authentication
Input sanitization and XSS prevention
Cross-browser compatible (Chrome, Firefox, Safari, Edge)
Accessibility-friendly design

Demo

Try out the chat widget with our interactive demos:

Live Demo
Configuration Playground
CDN Integration Demo - See how to use the widget from CDN without npm
Iframe Example - Example of embedding the widget in an iframe

To run the demos locally:

npm install
npm run build
# Open any of the demo HTML files in your browser:
# - demo.html (main configuration demo)
# - unified-demo.html (advanced features)
# - cdn-demo.html (CDN integration)
# - iframe-example.html (iframe embedding)
# - persistence-demo.html (conversation history)

See DEMOS.md for detailed information about each demo.

Installation

NPM

npm install @agentman/chat-widget

Yarn

yarn add @agentman/chat-widget

CDN

You can load the chat widget directly from a CDN without any installation:

<!-- unpkg (recommended) -->
<script src="https://unpkg.com/@agentman/chat-widget@latest/dist/index.js"></script>

<!-- jsDelivr -->
<script src="https://cdn.jsdelivr.net/npm/@agentman/chat-widget@latest/dist/index.js"></script>

<!-- Specific version (recommended for production) -->
<script src="https://unpkg.com/@agentman/[email protected]/dist/index.js"></script>

Benefits of CDN usage:

No installation or build process required
Perfect for embedding in iframes
Automatic updates with @latest tag
Global CDN with fast delivery
Browser caching for better performance

Iframe Integration Example:

<!-- parent-page.html -->
<iframe src="chat-iframe.html" width="100%" height="600"></iframe>

<!-- chat-iframe.html -->
<!DOCTYPE html>
<html>
<head>
  <script src="https://unpkg.com/@agentman/chat-widget@latest/dist/index.js"></script>
</head>
<body>
  <div id="chat-widget"></div>
  <script>
    // When using CDN, access ChatWidget from the global
    const ChatWidget = window['@agentman/chat-widget'].ChatWidget;
    
    const chatWidget = new ChatWidget({
      agentToken: 'YOUR_AGENT_TOKEN',
      containerId: 'chat-widget',
      variant: 'inline' // Best for iframes
    });
  </script>
</body>
</html>

Quick Start

Get your Agent Token from Agentman Dashboard
Add the widget to your page:

<!DOCTYPE html>
<html>
<head>
  <script src="https://unpkg.com/@agentman/chat-widget@latest/dist/index.js"></script>
</head>
<body>
  <div id="chat-widget"></div>
  <script>
    // When using CDN, access ChatWidget from the global
    const ChatWidget = window['@agentman/chat-widget'].ChatWidget;
    
    const chatWidget = new ChatWidget({
      agentToken: 'YOUR_AGENT_TOKEN',
      containerId: 'chat-widget'
    });
  </script>
</body>
</html>

Usage

JavaScript

import { ChatWidget } from '@agentman/chat-widget';

const config = {
  // Required settings
  agentToken: 'YOUR_AGENT_TOKEN',
  containerId: 'chat-widget-container',
  
  // Optional: Override default API URL
  apiUrl: 'https://api.agentman.ai', // Default value
  
  // Widget appearance
  variant: 'corner', // 'corner' | 'centered' | 'input-bar-only' | 'input-bar-sheet'
  position: 'bottom-right', // 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left'
  initiallyOpen: false,
  initialHeight: '600px',
  initialWidth: '400px',

  // Mobile-specific dimensions (optional)
  mobileHeight: '100vh',        // Full viewport height on mobile
  mobileMaxHeight: '100vh',     // Maximum height on mobile
  
  // Content and behavior
  title: 'AI Assistant',
  placeholder: 'Type your message...',
  toggleText: 'Ask AI',
  initialMessage: 'Hello',
  enableAttachments: true,
  
  // Message prompts
  messagePrompts: {
    show: true,
    welcome_message: 'How can I help you today?',
    prompts: [
      'What can you do?',
      'Give me a tour',
      'Help me get started'
    ]
  },
  
  // Theme customization
  theme: {
    backgroundColor: '#ffffff',
    textColor: '#111827',
    buttonColor: '#2563eb',
    buttonTextColor: '#ffffff',
    agentForegroundColor: '#111827',
    userForegroundColor: '#2563eb',
    toggleBackgroundColor: '#2563eb',
    toggleTextColor: '#ffffff',
    toggleIconColor: '#ffffff'
  },
  
  // Persistence
  persistence: {
    enabled: true,
    storageKey: 'agentman_chat',
    maxConversations: 10,
    ttlDays: 7
  },
  
  // Assets (optional)
  logo: '<svg>...</svg>',
  headerLogo: '<svg>...</svg>',
  
  // Advanced (optional)
  clientMetadata: {
    userId: '123',
    customField: 'value'
  }
};

const chatWidget = new ChatWidget(config);

// Cleanup when needed
chatWidget.destroy();

HTML

<!-- Basic container -->
<div id="chat-widget-container"></div>

<!-- With custom styling -->
<div id="chat-widget-container" style="height: 100vh; width: 100%;"></div>

React

import { useEffect, useRef } from 'react';
import { ChatWidget } from '@agentman/chat-widget';

function ChatComponent({ agentToken }) {
  const widgetRef = useRef(null);

  useEffect(() => {
    widgetRef.current = new ChatWidget({
      agentToken,
      containerId: 'react-chat-widget'
    });

    return () => {
      widgetRef.current?.destroy();
    };
  }, [agentToken]);

  return <div id="react-chat-widget" />;
}

Vue

<template>
  <div id="vue-chat-widget"></div>
</template>

<script>
import { ChatWidget } from '@agentman/chat-widget';

export default {
  props: ['agentToken'],
  mounted() {
    this.chatWidget = new ChatWidget({
      agentToken: this.agentToken,
      containerId: 'vue-chat-widget'
    });
  },
  beforeDestroy() {
    this.chatWidget?.destroy();
  }
};
</script>

Configuration

Basic Configuration

| Option | Type | Required | Default | Description | |--------|------|----------|---------|-------------| | agentToken | string | Yes | - | Your Agentman agent token | | containerId | string | Yes | - | ID of the container element | | apiUrl | string | No | 'https://api.agentman.ai' | Custom API endpoint URL | | variant | 'corner' \| 'centered' \| 'inline' | No | 'corner' | Widget placement style | | position | 'bottom-right' \| 'bottom-left' \| 'top-right' \| 'top-left' | No | 'bottom-right' | Position for corner variant | | initiallyOpen | boolean | No | false | Whether to open chat on load | | initialHeight | string | No | '600px' | Initial height of the widget (desktop) | | initialWidth | string | No | '400px' | Initial width of the widget (desktop) | | mobileHeight | string | No | '100vh' | Height of the widget on mobile | | mobileMaxHeight | string | No | '100vh' | Maximum height of the widget on mobile | | title | string | No | 'AI Assistant' | Chat widget title | | placeholder | string | No | 'Type your message...' | Input field placeholder | | toggleText | string | No | 'Ask AI' | Text on toggle button (corner variant) | | initialMessage | string | No | 'Hello' | Initial message sent to agent | | enableAttachments | boolean | No | true | Enable file attachments | | agentClosedView | 'toggle-only' \| 'floating-prompts' \| 'welcome-card' \| 'input-bar' \| 'input-bar-full' | No | Auto | Widget presentation when closed |

Message Prompts

Configure welcome messages and quick-action prompts that appear when users first interact with the widget:

const config = {
  messagePrompts: {
    show: true, // Enable/disable prompts
    welcome_message: 'Welcome! How can I help you today?',
    prompts: [
      'What can you do?',
      'Give me a tour',
      'Help me get started'
    ]
  }
};

| Option | Type | Required | Default | Description | |--------|------|----------|---------|-------------| | show | boolean | No | true | Show/hide welcome message and prompts | | welcome_message | string | No | 'Welcome! How can I help you today?' | Welcome message text | | prompts | string[] | No | [] | Array of prompt buttons (max 3) |

Prompts appear above the toggle button in corner variant and automatically send the message when clicked.

Presentation Modes (AgentClosedView)

Control how the chat widget appears when closed using the agentClosedView configuration option. Choose from five distinct presentation modes:

Mode 1: Toggle Only (`'toggle-only'`)

Just the chat button, no external prompts. Clean and minimal.

const config = {
  agentClosedView: 'toggle-only',
  toggleText: 'Chat with us'
};

Best for:

Minimal, unobtrusive presence
Mobile-first designs
Sites with limited screen space

What users see:

Only the chat toggle button
Prompts appear inside after opening

Mode 2: Floating Prompts (`'floating-prompts'`)

Traditional floating bubbles with prompts. The classic approach.

const config = {
  agentClosedView: 'floating-prompts',
  messagePrompts: {
    welcome_message: 'How can I help you today?',
    prompts: [
      'What can you do?',
      'Give me a tour',
      'Help me get started'
    ]
  }
};

Best for:

High engagement - prompts visible immediately
E-commerce sites with common questions
Traditional chat widget feel

Mode 3: Welcome Card (`'welcome-card'`)

Modern glassmorphic card with prompts inside. Premium look and feel.

const config = {
  agentClosedView: 'welcome-card',
  messagePrompts: {
    welcome_message: 'Welcome! How can I help?',
    prompts: [
      'Product information',
      'Support',
      'Get started'
    ]
  }
};

Best for:

Modern, premium aesthetic
Maximum visual impact
Sites with space for larger welcome element

Mode 4: Input Bar (`'input-bar'`) 🆕

Modern AI search bar at bottom of screen with typewriter effect.

const config = {
  agentClosedView: 'input-bar',
  toggleText: 'AI Mode',
  placeholder: 'Ask anything...',
  messagePrompts: {
    welcome_message: 'How can I help you today?',
    prompts: [
      'Tell me about your features',
      'How can you help?',
      'What can you do?'
    ]
  },
  // Input bar specific theming (optional)
  theme: {
    toggleBackgroundColor: '#0066FF',

    // Input Bar Colors (optional - auto-derived if not specified)
    inputBarBrandBackground: 'color-mix(in srgb, #0066FF 8%, white)',
    inputBarBrandText: '#0066FF',           // "AI Mode" text color
    inputBarLogoBackground: 'transparent',   // Logo background
    inputBarLogoIcon: '#0066FF',            // Logo icon color
    inputBarButtonBackground: 'color-mix(in srgb, #0066FF 10%, white)',
    inputBarButtonIcon: '#6B7280',          // Menu button icon
    inputBarGlowColor: 'color-mix(in srgb, #0066FF 30%, transparent)'
  }
};

Best for:

Modern AI-first interfaces (like Perplexity, ChatGPT)
Clean, focused user experience
Mobile-optimized search/chat experiences
Minimalist designs

What users see:

Floating search bar at bottom center of screen
Typewriter effect cycling through prompts
Brand logo and "AI Mode" text (collapsible)
Prompts appear above bar when focused
Transforms: Brand pill → circle on focus

Key Features:

Typewriter Animation: Cycles through welcome message + prompts
Progressive Disclosure: Menu button appears only on focus
Collapsing Brand: Logo pill collapses to circular icon when focused
Safari Mobile Support: Uses env(safe-area-inset-bottom) for iOS
GPU Optimized: Smooth 60fps animations
Keyboard Support: Enter to submit, Shift+Enter for new line

Mode 5: Input Bar Full (`'input-bar-full'`) 🆕

Full-width sheet experience that collapses to a slim input bar and expands into the complete chat interface.

const config = {
  agentClosedView: 'input-bar-full',
  title: 'Shop with AI',
  placeholder: 'Search our catalog…',
  mobileHeight: '95vh',
  messagePrompts: {
    welcome_message: 'Looking for something specific?',
    prompts: ['New arrivals', 'Best sellers', 'Track an order']
  }
};

Best for:

Mobile-first commerce and discovery flows
Experiences inspired by Google/Daydream bottom sheets
Teams that want maximum screen real estate when collapsed

What users see:

Collapsed: Edge-to-edge input bar hugging the bottom of the viewport
Expanded: Full-height chat sheet (80vh desktop / 95vh mobile) with header, welcome state, and conversation history
Dedicated collapse button + dimmed backdrop

Key Features:

Single Composer: Input stays fixed at the bottom in all states—no jumping between views
Body Scroll Lock: Prevents background scrolling when expanded for true modal behaviour
Safe Area Support: Accounts for iOS home indicator with automatic padding
Auto Focus Management: Sheet expands on focus/tap and gracefully collapses on close/blur
Welcome + Conversation Parity: Uses the same renderer pipeline as the main widget for cards, streaming, and attachments

Default Behavior

If agentClosedView is not specified:

Floating prompts mode if messagePrompts.prompts are defined
Toggle only mode if no prompts defined

Theme Customization

The theme object supports comprehensive styling options using a simplified, modern interface:

const config = {
  theme: {
    // Core Colors
    textColor: '#111827',          // Main text color
    backgroundColor: '#ffffff',     // Widget background
    
    // Buttons
    buttonColor: '#2563eb',        // Primary button color
    buttonTextColor: '#ffffff',    // Button text color
    
    // Message Colors (Claude-style, no bubbles)
    agentForegroundColor: '#111827',  // Assistant text color
    userForegroundColor: '#2563eb',   // User text color
    
    // Toggle Button (corner variant)
    toggleBackgroundColor: '#2563eb', // Toggle button background
    toggleTextColor: '#ffffff',       // Toggle button text
    toggleIconColor: '#ffffff'        // Toggle button icon
  }
};

Theme Simplification: The new ChatWidget uses a streamlined theme system focused on essential customization options. Message bubbles have been replaced with a Claude-style conversation layout using role labels.

Input Bar Theme Properties

When using agentClosedView: 'input-bar' or agentClosedView: 'input-bar-sheet', you can customize the input bar appearance with these optional properties. All auto-derive from toggle colors if not specified:

| Property | Default (derives from) | Description | |----------|----------------------|-------------| | inputBarBrandBackground | color-mix(toggleBg 8%, white) | Brand pill background | | inputBarBrandText | #0066FF (electric blue) | Brand pill text color (not content) | | inputBarLogoBackground | transparent | Logo circle background | | inputBarLogoIcon | inputBarBrandText | Logo icon color | | inputBarButtonBackground | color-mix(toggleBg 10%, white) | Menu button background | | inputBarButtonIcon | #6B7280 (gray) | Menu button icon | | inputBarGlowColor | color-mix(toggleBg 30%, transparent) | Focus glow effect | | inputBarSheetBackground | rgba(255,255,255,0.85) | Input wrapper background (sheet mode only) | | inputBarTypewriterColor | #9ca3af (gray) | Typewriter placeholder text (sheet mode only) |

Note: For input-bar-sheet mode:

inputBarSheetBackground controls the glassmorphic input wrapper background in collapsed state
inputBarTypewriterColor controls the typewriter placeholder text color
These properties only affect the input-bar-sheet variant, not regular input-bar

Example:

theme: {
  colors: {
    // Standard theme
    toggleBackground: '#0066FF',

    // Input bar inherits and derives from toggle
    // OR override specifically:
    inputBarBrandText: '#FF6B00',
    inputBarLogoIcon: '#FF6B00',
    inputBarGlowColor: 'rgba(255, 107, 0, 0.3)',

    // Sheet mode specific (only for input-bar-sheet)
    inputBarSheetBackground: 'rgba(255, 255, 255, 0.95)',
    inputBarTypewriterColor: '#6B7280'
  }
},
content: {
  inputBarBrandText: 'AI Shop Assistant'  // The actual text content
}

Icon Customization

Customize user and agent avatars:

const config = {
  icons: {
    userIcon: 'https://example.com/user-avatar.png',  // Image URL
    agentIcon: '<svg>...</svg>'  // SVG string
  },
  
  // Optional: Logo customization
  logo: 'https://example.com/logo.png',
  headerLogo: 'https://example.com/header-logo-32x32.png'
};

Icons can be:

Image URLs (PNG, JPG, WebP)
SVG strings (with color customization via theme)
Base64 encoded images

Streaming

The chat widget supports real-time streaming responses (enabled by default):

const config = {
  streaming: {
    enabled: true,          // Enable streaming (default: true)
    preferStreaming: true,  // Prefer streaming when available
    fallbackToNonStreaming: true  // Fallback on error
  }
};

Note: Streaming is now enabled by default. To disable streaming and use traditional request/response mode, set enabled: false.

Persistence

Enable conversation history across page reloads:

const config = {
  persistence: {
    enabled: true,           // Enable persistence
    storageKey: 'agentman_chat',  // Storage key prefix
    maxConversations: 10,    // Maximum stored conversations
    ttlDays: 7              // Days to keep conversations
  }
};

| Option | Type | Required | Default | Description | |--------|------|----------|---------|-------------| | enabled | boolean | No | true | Enable/disable persistence | | storageKey | string | No | 'agentman_chat' | LocalStorage key prefix | | maxConversations | number | No | 10 | Maximum conversations to store | | ttlDays | number | No | 7 | Days before conversation cleanup |

Features:

Saves messages to localStorage
Maintains conversation IDs
Syncs across browser tabs
Automatic expiration of old conversations

Layout Configuration

Configure layout-specific options for the widget:

const config = {
  layout: {
    showCollapsedSheet: true  // Show collapsed sheet background (default: true)
  }
};

| Option | Type | Required | Default | Description | |--------|------|----------|---------|-------------| | showCollapsedSheet | boolean | No | true | Show/hide collapsed sheet background (input-bar-sheet variant only) |

Input Bar Sheet Variant: When using variant: 'input-bar-sheet', you can control the visibility of the collapsed sheet background:

true (default): Shows the full collapsed sheet with background, border, and container styling
false: Hides the sheet background, displaying only the floating input bar with glow effects for a cleaner, more minimal appearance

Example:

const config = {
  variant: 'input-bar-sheet',
  layout: {
    showCollapsedSheet: false  // Show only floating input with glow
  }
};

Sticky Element Detection

Automatically repositions the widget when sticky/fixed elements (like "Add to Cart" bars) appear at the bottom of the viewport. This prevents the widget from being hidden behind sticky navigation or action bars.

const config = {
  features: {
    stickyDetection: {
      enabled: true,  // Enable sticky detection (default: false)
      customSelectors: [  // Optional: Custom CSS selectors to watch
        '.sticky-atc-inner',
        '.sticky-cart-bar',
        '[class*="sticky"]'
      ]
    }
  }
};

| Option | Type | Required | Default | Description | |--------|------|----------|---------|-------------| | enabled | boolean | No | false | Enable automatic sticky element detection | | customSelectors | string[] | No | Auto | Additional CSS selectors to watch for sticky behavior |

How it works:

Uses IntersectionObserver + MutationObserver to detect sticky elements at viewport bottom
Automatically updates widget position with smooth transitions
Detects elements within 10px of viewport bottom edge
Only activates when sticky elements are actually visible and positioned at bottom
Performance-optimized with targeted selectors and WeakRef cleanup

Best for:

E-commerce sites with sticky "Add to Cart" bars (Shopify, WooCommerce)
Sites with sticky navigation or bottom action bars
Mobile experiences with floating action buttons
Any layout where bottom sticky elements might overlap the widget

Default selectors watched:

Elements with position: sticky or position: fixed
Common patterns: .sticky-atc-inner, [class*="sticky"], [class*="cart"], [class*="bar"]

Note: This feature is opt-in (disabled by default) for safety and performance. Enable it if your site uses sticky bottom elements.

Branding

The widget displays "Powered by Agentman.ai" with a link to the Agentman website. This branding helps users identify the AI technology powering the chat experience.

Advanced Usage

Multiple Instances

You can have multiple chat widgets on the same page:

const widget1 = new ChatWidget({
  agentToken: 'TOKEN_1',
  containerId: 'chat-1'
});

const widget2 = new ChatWidget({
  agentToken: 'TOKEN_2',
  containerId: 'chat-2'
});

Dynamic Configuration

The ChatWidget uses a modern component-based architecture with the following public methods:

const chatWidget = new ChatWidget(initialConfig);

// Toggle chat visibility (corner variant)
chatWidget.toggleChat();

// Add messages programmatically
chatWidget.addMessage({
  id: 'msg-123',
  sender: 'agent',
  content: 'Hello from the API!',
  timestamp: new Date().toISOString(),
  type: 'text'
});

// Clear conversation storage
chatWidget.clearStorage();

// Clean up when done
chatWidget.destroy();

Static Methods

Access widget instances and manage multiple widgets:

// Get widget instance by container ID
const widget = ChatWidget.getInstance('my-container');

// Destroy all widget instances
ChatWidget.destroyAll();

WordPress Integration

The chat widget includes a WordPress plugin for easy integration.

Installation

Download the plugin from WordPress Plugin Directory or build from source
Upload to your WordPress site
Activate the plugin
Configure in Settings > Agentman Chat

Building from Source

# Build WordPress plugin
npm run build:wordpress

# This creates:
# - wordpress-plugin/agentman-chat-widget.zip

Features

Visual configuration interface
Preview functionality
Shortcode support: [agentman_chat]
Widget area support
Multisite compatible

Development

Setup

# Clone the repository
git clone https://github.com/Agentman-ai/chat-widget.git
cd chat-widget

# Install dependencies
npm install

# Start development server
npm run dev

Building

# Build for production
npm run build

# Build WordPress plugin
node wp-bundle.js

Releasing

We use GitHub Actions for automated releases. See the Release Process Guide for details.

# Quick release using GitHub Actions
# 1. Go to Actions tab in GitHub
# 2. Run "Release All Components" workflow
# 3. Select release type and options

For manual releases or more details, see:

Testing

# Run tests
npm test

# Run tests with coverage
npm run test:coverage

# Run linting
npm run lint

Project Structure

chat-widget/
├── assistantWidget/        # Main widget source code
│   ├── components/         # UI component classes (UIManager, ConversationManager)
│   ├── styles/            # CSS-in-JS styling system
│   ├── message-renderer/  # Message processing and rendering
│   ├── utils/             # Utility functions and validation
│   ├── assets/            # Icons and logo assets
│   ├── types/             # TypeScript type definitions
│   ├── constants.ts       # Application constants
│   └── ChatWidget.ts      # Main ChatWidget class
├── dist/                  # Built files
├── wordpress/             # WordPress plugin integration
├── *.html                 # Demo files (see DEMOS.md)
└── index.ts              # Library entry point

Architecture

The ChatWidget uses a modern component-based architecture:

ChatWidget: Main coordinator class managing all functionality
UIManager: Handles DOM creation, manipulation, and UI updates
ConversationManager: Manages multiple conversations and history
StateManager: Reactive state management with pub/sub pattern
StyleManager: Dynamic CSS injection and theming
MessageRenderer: Markdown processing and message rendering
PersistenceManager: localStorage conversation history management

Contributing

We welcome contributions! Please see our Contributing Guide for details.

Reporting Issues

Use the issue tracker
Include browser version and OS
Provide reproduction steps
Include error messages and screenshots

Pull Requests

Fork the repository
Create your 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

License

MIT License - see LICENSE file for details.

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

Agentman Chat Widget

Table of Contents

Features

🎨 Modern Interface

🏗️ Component Architecture

💬 Conversation Features

🔧 Developer Experience

⚡ Performance

🔒 Security & Reliability

Demo

Installation

NPM

Yarn

CDN

Quick Start

Usage

JavaScript

HTML

React

Vue

Configuration

Basic Configuration

Message Prompts

Presentation Modes (AgentClosedView)

Mode 1: Toggle Only ('toggle-only')

Mode 2: Floating Prompts ('floating-prompts')

Mode 3: Welcome Card ('welcome-card')

Mode 4: Input Bar ('input-bar') 🆕

Mode 5: Input Bar Full ('input-bar-full') 🆕

Default Behavior

Theme Customization

Input Bar Theme Properties

Icon Customization

Streaming

Persistence

Layout Configuration

Sticky Element Detection

Branding

Advanced Usage

Multiple Instances

Dynamic Configuration

Static Methods

WordPress Integration

Installation

Building from Source

Features

Development

Setup

Building

Releasing

Testing

Project Structure

Architecture

Contributing

Reporting Issues

Pull Requests

License

Mode 1: Toggle Only (`'toggle-only'`)

Mode 2: Floating Prompts (`'floating-prompts'`)

Mode 3: Welcome Card (`'welcome-card'`)

Mode 4: Input Bar (`'input-bar'`) 🆕

Mode 5: Input Bar Full (`'input-bar-full'`) 🆕