AI Chat Widget

A modern, customizable chat widget built with Lit web components. Features a clean UI, responsive design, and extensive theming options.

Features

• 🎨 Fully Customizable Theme - Change colors, backgrounds, and styles
• 📱 Responsive Design - Works seamlessly on desktop, tablet, and mobile
• 🌓 Dark Mode Support - Built-in light and dark themes
• 📦 Two Display Modes - Fullscreen or floating widget
• 🔧 Easy Integration - Simple HTML attributes for configuration
• ⚡ Built with Lit - Fast, lightweight web component
• 🎯 TypeScript Support - Full type safety

Quick Start

Installation

npm install
npm run dev

Basic Usage

<ai-chat
  api-url="https://your-api-endpoint.com"
  session-id="user-123"
  title="AI Assistant">
</ai-chat>

Configuration

Display Modes

Fullscreen Mode (Default)

<ai-chat
  api-url="https://api.example.com"
  session-id="user-123"
  title="AI Assistant"
  mode="fullscreen">
</ai-chat>

Widget Mode

<ai-chat
  api-url="https://api.example.com"
  session-id="user-123"
  title="AI Assistant"
  mode="widget"
  widget-width="400px"
  widget-height="650px">
</ai-chat>

Theme Customization

Custom Colors

<ai-chat
  api-url="https://api.example.com"
  session-id="user-123"
  title="AI Assistant"
  primary-color="#10B981"
  primary-color-hover="#059669"
  user-message-bg="#D1FAE5"
  bot-message-bg="#F3F4F6">
</ai-chat>

Custom Avatars and Background

<ai-chat
  api-url="https://api.example.com"
  session-id="user-123"
  title="AI Assistant"
  bot-avatar-url="/path/to/avatar.png"
  background-image-url="/path/to/background.png">
</ai-chat>

Dark Mode

<ai-chat
  api-url="https://api.example.com"
  session-id="user-123"
  title="AI Assistant"
  theme="dark">
</ai-chat>

Available Attributes

API Integration

The chat widget sends POST requests to the configured api-url with the following payload:

{
  "session_id": "string",
  "question": "string"
}

Expected response format:

{
  "response": "string",
  "faqs_used": [
    {
      "no.": "1",
      "question": "Related question?"
    }
  ]
}

Events

The component fires custom events you can listen to:

const chat = document.querySelector('ai-chat');

// User sends a message
chat.addEventListener('message-sent', (event) => {
  console.log('Message sent:', event.detail);
});

// AI responds
chat.addEventListener('response-received', (event) => {
  console.log('Response received:', event.detail);
});

// Error occurs
chat.addEventListener('error', (event) => {
  console.error('Error:', event.detail);
});

Theme Examples

Green Theme (Success)

<ai-chat
  primary-color="#10B981"
  primary-color-hover="#059669"
  user-message-bg="#D1FAE5"
  bot-message-bg="#F3F4F6">
</ai-chat>

Purple Theme (Creative)

<ai-chat
  primary-color="#8B5CF6"
  primary-color-hover="#7C3AED"
  user-message-bg="#EDE9FE"
  bot-message-bg="#F5F3FF">
</ai-chat>

Red Theme (Alert)

<ai-chat
  primary-color="#EF4444"
  primary-color-hover="#DC2626"
  user-message-bg="#FEE2E2"
  bot-message-bg="#FEF2F2">
</ai-chat>

Orange Theme (Warm)

<ai-chat
  primary-color="#F97316"
  primary-color-hover="#EA580C"
  user-message-bg="#FFEDD5"
  bot-message-bg="#FFF7ED">
</ai-chat>

Responsive Behavior

The widget automatically adapts to different screen sizes:

• Desktop (>1024px): Full widget size
• Tablet (769-1024px): Slightly larger widget (400px × 650px)
• Small Tablet (481-768px): Compact widget (360px × 550px)
• Mobile Portrait (≤480px): Nearly fullscreen (90vw × 70vh)
• Mobile Landscape: Wider widget (500px × adjusted height)

Development

Build for Production

npm run build

Run Development Server

npm run dev

Lint Code

npm run lint

Browser Support

• Chrome/Edge (latest)
• Firefox (latest)
• Safari (latest)
• Modern mobile browsers

License

MIT

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.