AI Chat Widget - Svelte

A beautiful AI chat widget component for Svelte applications.

🚀 Quick Start

Installation

npm install

Configuration

1. Copy .env.example to .env:

cp .env.example .env

2. Edit .env and set your API credentials:

VITE_CHAT_API_KEY=your_api_key_here
VITE_CHAT_API_URL=http://localhost:8000

Run Development Server

npm run dev

Open http://localhost:5173 to see the demo.

📦 Usage in Your Svelte App

Import the Component

<script lang="ts">
  import { AIChatWidget } from 'x-decision-ai-chat-widget-svelte';
</script>

<AIChatWidget
  apiEndpoint="http://localhost:8000"
  apiKey="your-api-key"
  title="AI Assistant"
  suggestions={[
    'I want your best products',
    'What is your return policy?'
  ]}
/>

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | apiEndpoint | string | required | Your API endpoint URL | | apiKey | string | '' | API key for authentication | | title | string | 'AI Assistant' | Chat widget title | | placeholder | string | 'Type a message...' | Input placeholder text | | theme | 'light' \| 'dark' | 'light' | Color theme | | primaryColor | string | '#6366f1' | Primary color (hex) | | suggestions | string[] | [] | Quick suggestion buttons | | logo | string | undefined | Logo URL | | zIndex | number | 9999 | Z-index for positioning |

✨ Features

• ✅ Multiple chat sessions
• ✅ Session history with delete
• ✅ Message persistence (localStorage)
• ✅ Markdown rendering in assistant messages
• ✅ Product cards support
• ✅ Light/dark themes
• ✅ Custom branding
• ✅ Responsive design
• ✅ TypeScript support

🛠 Development

Build Library

npm run build

Output will be in dist/ directory.

Project Structure

svelte/
├── src/
│   ├── lib/              # Widget components
│   │   ├── AIChatWidget.svelte
│   │   ├── ChatWindow.svelte
│   │   ├── MessageList.svelte
│   │   └── ...
│   ├── App.svelte        # Demo app
│   └── main.ts           # Entry point
├── dist/                 # Build output
└── package.json

📝 License

ISC