npm package: @gentour/dedge-support-agent
Description: Widget SDK pour intégrer l'assistant support D-EDGE sur l'extranet Availpro
Author: Gentour
Latest version: 1.1.0

# D-EDGE Support Agent Widget

Widget SDK pour intégrer l'assistant support D-EDGE sur l'extranet Availpro.

Le widget utilise le **Design System Ovenright** de D-EDGE : font Inter, palette de couleurs brand (purple), thème light uniquement.

📄 **Guide d'intégration** : voir [docs/GUIDE_INTEGRATION.md](docs/GUIDE_INTEGRATION.md) pour la documentation technique destinée aux intégrateurs.

## Installation

### Via CDN (Production)

```html
<script src="https://dedgesupport.gentour.ai/widget.js"></script>
<script>
  DEdgeSupportWidget.init({
    frontendUrl: 'https://dedgesupport.gentour.ai',
    apiKey: 'gt_live_xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx',  // Fourni par Gentour
  });
</script>
```

### Via NPM

```bash
npm install @gentour/dedge-support
```

## Configuration

### Options

| Option | Type | Default | Description |
|--------|------|---------|-------------|
| `frontendUrl` | string | `https://dedgesupport.gentour.ai` | URL du frontend chat |
| `apiUrl` | string | `frontendUrl + /api` | URL de l'API |
| `apiKey` | string | - | API key (format: `gt_live_xxx`). **Recommandé.** |
| `credentials` | string | - | Credentials Base64 `btoa("email:password")` (legacy) |
| `mode` | `"sidebar"` \| `"popup"` \| `"inline"` | `"sidebar"` | Mode d'affichage |
| `position` | `"right"` \| `"left"` | `"right"` | Position du widget |
| `buttonText` | string | `"Ask AI Agent!"` | Texte du bouton |
| `primaryColor` | string | `"#59319f"` | Couleur principale (D-EDGE purple) |
| `anchorTo` | string | - | Sélecteur CSS d'un élément existant à côté duquel ancrer le bouton |
| `anchorPosition` | `"before"` \| `"after"` | `"before"` | Position du bouton par rapport à l'élément ancré |
| `width` | string | `"min(50vw, 600px)"` (sidebar) / `"400px"` (popup) | Largeur du panneau |
| `height` | string | `"100vh"` | Hauteur du panneau |
| `containerId` | string | - | ID du conteneur HTML (obligatoire en mode `inline`) |

### Authentication

**Option A – API key (recommandé)**

```javascript
DEdgeSupportWidget.init({
  frontendUrl: 'https://dedgesupport.gentour.ai',
  apiKey: 'gt_live_xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx',  // Gentour Dashboard
});
```

**Option B – Credentials (legacy)**

```javascript
DEdgeSupportWidget.init({
  frontendUrl: 'https://dedgesupport.gentour.ai',
  credentials: btoa('widget@dedge.com:yourPassword'),
});
```

### Ancrage à un élément existant

Le widget peut être ancré à côté d'un élément de la page (ex : bouton "Need help?") au lieu d'être flottant en bas d'écran :

```javascript
DEdgeSupportWidget.init({
  anchorTo: '.huih-button--help',   // sélecteur CSS de l'élément cible
  anchorPosition: 'before',         // 'before' (défaut) ou 'after'
  // ...
});
```

Si le sélecteur ne correspond à aucun élément, le widget se replie sur le mode flottant classique.

### Callbacks

```javascript
DEdgeSupportWidget.init({
  // ...
  onOpen: () => console.log('Widget opened'),
  onClose: () => console.log('Widget closed'),
  onAuthStateChange: (user) => console.log('Auth:', user),
  onContextExtracted: (ctx) => console.log('D-EDGE context:', ctx),
});
```

## API

### Instance Methods

```javascript
const widget = DEdgeSupportWidget.init({ ... });

widget.open();           // Ouvrir le widget
widget.close();          // Fermer le widget
widget.toggle();         // Toggle open/close
widget.isOpen();         // Vérifier si ouvert
widget.getContext();     // Obtenir le contexte D-EDGE
widget.destroy();        // Détruire le widget
```

### Security Notes

- API keys: Create in Gentour Dashboard, store securely, never commit to version control.
- Credentials: Base64 encoding is obfuscation, not encryption.
- Consider rate limiting at the API level for additional protection.