identie-chat-widget/README.md

Embeddable AI chat widget with modern design and streaming responses

# Identie Chat Widget

[![npm version](https://badge.fury.io/js/identie-chat-widget.svg)](https://badge.fury.io/js/identie-chat-widget)
[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)

An embeddable AI chat widget with modern design, streaming responses, and easy integration.

## 🚀 Quick Start

### CDN (Recommended)

```html
<!-- Auto-initialization -->
<div data-identie-widget></div>
<script src="https://cdn.jsdelivr.net/npm/identie-chat-widget@latest/dist/identie-chat-widget.min.js"></script>

<!-- Manual initialization -->
<script src="https://cdn.jsdelivr.net/npm/identie-chat-widget@latest/dist/identie-chat-widget.min.js"></script>
<script>
  IdentieWidget.init({
    theme: 'light'
  });
</script>

<!-- Custom API URL -->
<script>
  IdentieWidget.init({
    apiUrl: 'https://your-custom-api.com',
    theme: 'dark'
  });
</script>
```

### NPM

```bash
npm install identie-chat-widget
```

## ⚙️ Configuration

| Option | Type | Default | Description |
|--------|------|---------|-------------|
| `containerId` | string | `'identie-chat-widget'` | Container element ID |
| `apiUrl` | string | `'https://fastapi.identie.net'` | Backend API URL |
| `theme` | string | `'light'` | Theme: 'light' or 'dark' |
| `suggestions` | array | `[...]` | Conversation starters |

## 📝 Features

- ✨ Modern, responsive design
- 🌙 Light/dark theme support
- 💬 Streaming chat responses
- 📱 Mobile-friendly
- 🎨 Customizable styling
- 🔧 Easy integration
- 💾 Persistent chat history

## 🔗 API Integration

The widget expects your backend to provide a streaming chat endpoint:

```
POST /api/assistant/chat/stream
```

Expected request body:
```json
{
  "message": "User message",
  "chat_history": [
    {"role": "user", "content": "Previous message"},
    {"role": "assistant", "content": "Previous response"}
  ]
}
```

Expected response: Server-sent events with JSON data:
```
data: {"content": "Streaming response chunk"}
data: {"done": true}
```

## 🎨 Customization

The widget uses CSS custom properties for easy theming:

```css
:root {
  --chat-primary-color: #007bff;
  --chat-background: #ffffff;
  --chat-text-color: #333333;
}
```

## 📦 Building

```bash
npm run build        # Build for development
npm run build:cdn    # Build CDN version with integrity hash
```

## 📄 License

MIT License - see [LICENSE](LICENSE) file for details.

## 🤝 Contributing

1. Fork the repository
2. Create your feature branch
3. Commit your changes
4. Push to the branch
5. Create a Pull Request

## 📞 Support

- [Issues](https://github.com/aleksandr-kirakosyan/identie-chat-widget/issues)
- [Documentation](https://github.com/aleksandr-kirakosyan/identie-chat-widget#readme)