D-EDGE Support Agent Widget

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

Installation

$3

``html


`

$3

`bash
npm install @dedge/support-agent-widget
`

Configuration

$3

| Option | Type | Default | Description |
|--------|------|---------|-------------|
| frontendUrl | string | https://dedgesupport.gentour.ai | URL du frontend chat |
| apiUrl | string | frontendUrl + /api | URL de l'API |
| credentials | string | - | Credentials Base64 btoa("email:password") |
| mode | "sidebar" \| "popup" \| "inline" | "sidebar" | Mode d'affichage |
| position | "right" \| "left" | "right" | Position du widget |
| theme | "light" \| "dark" \| "auto" | "light" | Thème |
| buttonText | string | "Need help?" | Texte du bouton |
| primaryColor | string | "#0066CC" | Couleur principale |

$3

`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),
});
`

D-EDGE Context

Le widget extrait automatiquement le contexte utilisateur depuis dataLayer.dEdgeContext:

`javascript
{
userName: "Antoine Dupont",
userEmail: "antoine.dupont@mail.com",
userId: 14695,
hotelId: 13673,
groupId: 9791
}
`

Ce contexte est envoyé au backend pour le tracking/analytics dans Langfuse.

Development

$3

`bash


Install dependencies


npm install
`

$3

Le fichier .env contient les URLs locales :

`bash


.env (pour développement local)


SUPABASE_URL=https://gkhinqkwwvxfuhiizbzq.supabase.co
SUPABASE_ANON_KEY=sb_publishable_xxx
DEFAULT_FRONTEND_URL=http://localhost:3007
DEFAULT_API_URL=http://localhost:2025
`

Build :

`bash
npm run build
`

$3

Le fichier .env.production contient les URLs de production :

`bash


.env.production (pour production)


SUPABASE_URL=https://gkhinqkwwvxfuhiizbzq.supabase.co
SUPABASE_ANON_KEY=sb_publishable_xxx
DEFAULT_FRONTEND_URL=https://dedgesupport.gentour.ai
DEFAULT_API_URL=https://dedgesupport.gentour.ai/api
`

Build :

`bash
npm run build:prod
`

$3

`bash
npm run dev
`

$3

`bash
npm run serve # Serves on http://localhost:3001
`

$3

Injecter dans la console navigateur:

`javascript
const script = document.createElement('script');
script.src = 'http://localhost:3001/widget.js';
document.head.appendChild(script);

script.onload = () => {
DEdgeSupportWidget.init({
frontendUrl: 'http://localhost:3007',
credentials: btoa('widget@dedge.gentour.ai:yourPassword'),
});
};
`

Publish to NPM

$3

1. Vous devez être connecté à NPM :
`bash
npm login
`

2. Vérifiez que vous avez les droits sur le package @gentour/dedge-support-widget

$3

1. Update version dans package.json :
`bash
npm version patch # 0.1.1 -> 0.1.2
# ou
npm version minor # 0.1.1 -> 0.2.0
# ou
npm version major # 0.1.1 -> 1.0.0
`

2. Build avec config production :
`bash
npm run build:prod
`

Note : Le hook prepublishOnly fait automatiquement npm run build:prod avant publication.

3. Publish :
`bash
npm publish --access public
`

4. Tag et push :
`bash
git push && git push --tags
`

$3

`bash


All in one


npm version patch && npm publish --access public && git push --tags
`

API

$3

`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
`

Setup: Supabase Technical User

The widget requires a technical Supabase user for authentication. Follow these steps:

$3

Go to your Supabase Dashboard > Authentication > Users, and create a new user:

- Email: widget@dedge.gentour.ai (or your preferred email)
- Password: Generate a strong password

$3

If dedge-support-agent is not in the DEFAULT_ALLOWED_AGENTS list in auth-proxy, add it to the user's app_metadata:

`sql
-- Run in Supabase SQL Editor
UPDATE auth.users
SET raw_app_meta_data = raw_app_meta_data || '{"allowed_agents": ["dedge-support-agent"]}'::jsonb
WHERE email = 'widget@dedge.gentour.ai';
`

$3

Encode the credentials and use them in the widget initialization:

`javascript
// Generate credentials (do this once, securely)
const credentials = btoa('widget@dedge.gentour.ai:yourPassword');
console.log('Credentials:', credentials);

// Use in widget
DEdgeSupportWidget.init({
frontendUrl: 'https://dedgesupport.gentour.ai',
credentials: credentials,
});
``

$3

- The Base64 encoding is for obfuscation, not encryption
- If credentials are compromised, change the password and rebuild/redeploy the widget
- The worst-case scenario is someone consuming LLM tokens
- Consider rate limiting at the API level for additional protection