Chat Component Documentation

A comprehensive guide to implementing and customizing the chat component in your application.

Quick Start

Basic Implementation

Add a floating chat button with a single configuration:

---
import Layout from '../layouts/Layout.astro';

const chatConfig = {
  mode: 'icon',
  provider: 'openai',
  model: 'gpt-4',
  modeConfig: {
    icon: {
      position: 'bottom-right',
      badge: 1,
      pulse: true
    }
  }
};
---

<Layout title="Your Page" chat={chatConfig}>
  Your content here...
</Layout>

Display Modes

Icon Mode

Displays as a floating button that expands into a chat window.

  • Customizable position
  • Badge notifications
  • Pulse animation
  • Responsive transitions
modeConfig: {
  icon: {
    position: 'bottom-right',
    badge: 1,
    pulse: true,
    launchMode: 'floating'
  }
}

Floating Mode

A draggable and resizable chat window.

  • Customizable dimensions
  • Default position
  • Draggable window
  • Resizable bounds
modeConfig: {
  floating: {
    minWidth: 380,
    maxWidth: 500,
    defaultPosition: { x: 20, y: 20 },
    draggable: true
  }
}

Embedded Mode

Integrates directly into your page layout.

  • Fixed dimensions
  • Theme inheritance
  • Custom container styles
  • Seamless integration
modeConfig: {
  embedded: {
    width: '100%',
    height: '500px',
    inheritTheme: true,
    containerClassName: 'rounded-lg'
  }
}

Fullscreen Mode

Expands to fill the entire viewport.

  • Custom header
  • Navigation options
  • Smooth transitions
  • Mobile-optimized
modeConfig: {
  fullscreen: {
    showHeader: true,
    showNavigation: true,
    transitionDuration: 300
  }
}

Implementation Examples

Features & Customization

Appearance

  • ✨ Three built-in themes
  • 🎨 Custom color schemes
  • 📱 Responsive design
  • 🔄 Smooth transitions
  • 🖼️ Custom icons & badges

Functionality

  • 📝 Markdown support
  • 🔊 Audio messages
  • 🖼️ Image uploads
  • ✏️ Message editing
  • 📋 Copy functionality

Integration

  • 🔌 Custom API endpoints
  • 🤖 Multiple AI providers
  • 💾 Session persistence
  • 🔄 State management
  • 🎯 Event callbacks

Configuration Reference

Available Options

Option Type Description
mode ChatMode Display mode: 'icon' | 'floating' | 'fullscreen' | 'embedded' | 'split'
provider string AI provider: 'openai' | 'anthropic' | custom
model string Model identifier (e.g., 'gpt-4', 'claude-2')
theme string Theme name: 'light' | 'dark' | 'earth'
modeConfig ModeConfig Mode-specific configuration options
title string Chat window title
description string Chat description or subtitle
systemPrompt string Initial system message for the AI
welcome string Welcome message shown to users
apiEndpoint string Custom API endpoint URL

Best Practices

  • Always provide a clear welcome message and description
  • Use starter messages to guide users
  • Consider mobile users when choosing default dimensions
  • Test different modes for your use case
  • Implement proper error handling
  • Use appropriate system prompts for context
  • Enable features based on user needs
  • Consider accessibility in your configuration