# Chatyx Widget

Widget de chat embarquable permettant d'integrer un assistant IA sur n'importe quel site web.

## Installation

Ajoutez la balise script sur votre page :

```html
<script
  src="https://votre-domaine.com/chat-widget.js"
  data-bot-id="VOTRE_BOT_ID"
  async defer
></script>
```

Le widget apparait sous forme de bulle en bas a droite de la page.

## Configuration

Toutes les options sont configurables via des attributs `data-*` sur la balise `<script>` :

| Attribut | Description | Valeur par defaut |
|---|---|---|
| `data-bot-id` | Identifiant du bot (requis) | — |
| `data-webhook-url` | URL du webhook pour les reponses | `''` |
| `data-primary-color` | Couleur principale (hex) | `#7B40F1` |
| `data-secondary-color` | Couleur de fond des messages | `#f9f9f9` |
| `data-input-border-color` | Couleur de bordure du champ de saisie | `#ddd` |
| `data-chatbot-name` | Nom affiche dans le header | `Chatyx` |
| `data-welcome-message` | Message de bienvenue | `Bonjour, comment puis-je vous aider ?` |
| `data-bubble-icon` | URL de l'icone de la bulle | Icone par defaut |
| `data-bubble-background` | Couleur de fond de la bulle | `#fff` |
| `data-send-icon` | URL de l'icone du bouton envoyer | Icone par defaut |
| `data-bot-avatar` | URL de l'avatar du bot | Avatar par defaut |
| `data-user-avatar` | URL de l'avatar utilisateur | Avatar par defaut |
| `data-suggestions` | Suggestions (JSON array ou `;` separe) | `[]` |
| `data-privacy-policy-url` | URL de la politique de confidentialite | `https://chatyx.fr/...` |
| `data-show-branding` | Afficher le branding Chatyx (`true`/`false`) | `true` |
| `data-send-button-color` | Couleur du bouton envoyer | Meme que `primaryColor` |
| `data-lang` | Langue du widget (`fr` ou `en`) | `fr` |
| `data-theme` | Theme par defaut (`auto`, `light`, `dark`). L'utilisateur peut basculer via le bouton ☀️/🌙 dans le header (sa preference est conservee en localStorage et a priorite sur ce reglage). | `light` |
| `data-api-base-url` | URL de base de l'API backend | URL Supabase par defaut |

### Exemple complet

```html
<script
  src="chat-widget.js"
  data-bot-id="abc123"
  data-webhook-url="https://mon-api.com/webhook"
  data-primary-color="#2563EB"
  data-chatbot-name="Assistant"
  data-welcome-message="Bonjour ! Comment puis-je vous aider ?"
  data-suggestions='["Quels sont vos horaires ?","Ou etes-vous situes ?"]'
  data-show-branding="false"
  data-lang="fr"
  data-theme="light"
  async defer
></script>
```

Les options sont aussi configurables a distance via l'API Supabase associee au `botId`.
L'ordre de priorite est : **config distante > attributs data > valeurs par defaut**.

## Developpement

### Prerequis

- Node.js >= 16

### Installation des dependances

```bash
npm install
```

### Commandes

| Commande | Description |
|---|---|
| `npm run build` | Compile `src/` en `chat-widget.js` |
| `npm run build:min` | Version minifiee `chat-widget.min.js` |
| `npm run dev` | Mode watch (recompilation automatique) |
| `npm test` | Lance les tests unitaires |
| `npm run test:watch` | Tests en mode watch |
| `npm run lint` | Verifie le code avec ESLint |
| `npm run lint:fix` | Corrige automatiquement les erreurs de lint |
| `npm run format` | Formate le code avec Prettier |
| `npm start` | Serveur local pour tester (`index.html`) |

### Test local

```bash
npm run build && npm start
```

Ouvrez `http://localhost:3000` dans votre navigateur.

## Architecture

```
src/
├── index.js        Point d'entree
├── constants.js    Constantes (timings, seuils, rate-limit, retry)
├── helpers.js      Utilitaires (Cookie, UUID, Security, Storage, fetchWithRetry)
├── i18n.js         Internationalisation (fr, en)
├── managers.js     UserManager, HistoryManager
├── config.js       Chargement et construction de la config
├── message.js      Formatage des messages (listes markdown -> HTML)
├── product.js      Detection de produits et carrousel
├── styles.css      Styles CSS du widget
├── styles.js       Injection des styles et variables CSS dynamiques
├── theme.js        Gestion du theme (light/dark, override utilisateur)
├── widget-dom.js   Template HTML + selection des elements DOM + sync viewport
├── listener-registry.js Gestion centralisee des listeners/cleanup
└── widget.js       Logique principale du widget (DOM, events, chat)

tests/
├── helpers.test.js
├── i18n.test.js
├── managers.test.js
├── config.test.js
├── message.test.js
├── product.test.js
└── theme.test.js
```

### Pipeline de build

Le projet utilise **esbuild** pour assembler les modules ES en un seul fichier IIFE
(`chat-widget.js`) embarquable via une balise `<script>`.

- Le CSS est importe comme chaine de texte (`--loader:.css=text`)
- Les variables CSS dynamiques (couleurs) sont injectees via JavaScript
- Le build cible ES2015 pour la compatibilite navigateur

### Modules cles

- **`helpers.js`** : contient le `SecurityHelper` qui assure la sanitisation HTML
  (whitelist de balises/attributs via DOMParser), la validation d'URL, l'echappement
  d'attributs HTML, et `fetchWithRetry` pour le retry avec backoff exponentiel.
- **`i18n.js`** : module d'internationalisation avec les locales `fr` et `en`.
  La fonction `getTranslations(lang)` retourne les chaines traduites.
- **`product.js`** : le `ProductParser` est une factory qui capture `apiBaseUrl` via
  closure. Il detecte les URLs produit, extrait les metadonnees Open Graph, et genere
  un carrousel interactif.
- **`config.js`** : la fonction `buildConfig` fusionne config distante, attributs `data-*`,
  et valeurs par defaut, puis applique les sanitisations de securite.
- **`widget.js`** : `createWidget` cree le DOM, injecte les styles, enregistre les
  event listeners, et orchestre l'envoi/reception des messages.

## Securite

- **Anti-XSS** : toutes les reponses bot sont sanitisees via `SecurityHelper.sanitizeHTML()`
  avant injection dans le DOM (whitelist de balises, suppression des event handlers,
  blocage des protocoles `javascript:`, `data:`, `vbscript:`).
- **Cookies** : flags `SameSite=Lax` et `Secure` (en HTTPS).
- **URLs** : toutes les URLs de config sont validees (`sanitizeURL`) et echappees
  pour le contexte d'attribut HTML (`escapeAttribute`).
- **Donnees produit** : noms, descriptions, prix, badges, et URLs sont echappes
  individuellement avant construction du HTML du carrousel.

## Fonctionnalites

- Bulle de chat flottante avec animation
- Mode sombre avec bouton de bascule pour l'utilisateur (icones soleil/lune minimalistes dans le header), preference persistante
- Badge de messages non lus sur la bulle
- Horodatage sous chaque message et indicateur de lecture (✓/✓✓) sur les messages utilisateur
- Conversations multiples : bouton « rafraichir » qui propose de demarrer une nouvelle
  conversation, et page dediee listant l'historique des conversations (anciennes + actuelle)
- Historique des messages persiste par conversation (localStorage)
- Ecran de consentement RGPD
- Carrousel de produits (detection automatique d'URLs produit + metadonnees OG)
- Suggestions de messages configurables
- Indicateur de frappe anime
- Animation progressive des reponses
- Responsive (mobile, tablette, desktop, paysage)
- Support du clavier (Enter pour envoyer, Escape pour fermer/revenir en arriere)
- Internationalisation (francais et anglais)
- Retry automatique avec backoff exponentiel sur les requetes reseau
- Rate limiting cote client (anti-spam)

## Licence

Propriete de Chatyx.