DHTMLX

Qu’est-ce que DHTMLX Chatbot ?

DHTMLX Chatbot est un composant JavaScript utilisé pour créer des interfaces de chat basées sur l’IA, adapté aux assistants client, aux systèmes de FAQ d’entreprise et aux dialogues multi-agents dans les applications Web. Il offre une couche d’interaction frontend configurable, mais ne comprend pas de modèles de langage avancés, de base de connaissances, de système d’identités ou de backend hébergé.

Les développeurs doivent connecter les composants à leur propre serveur ou à un fournisseur de modèles, puis décider des méthodes d’authentification, de stockage des messages, d’amélioration de la recherche, de modération du contenu et de contrôle de la consommation. Par conséquent, cela ressemble davantage à un kit de développement d’UI pour des produits de messagerie qu’à un service de chatbot prêt à l’emploi.

Fonctionnalités clés

• Propose quatre modes de présentation des messages : blocs, bulles, cartes et flux, pouvant être choisis en fonction de l’identité visuelle du produit.
• Prend en charge les messages en texte brut et en Markdown, et permet de définir le mode d’affichage mot par mot ainsi que l’état de saisie en flux continu.
• Il est possible de créer des chats avec un ou plusieurs agents ; la barre latérale sert à créer, sélectionner et supprimer des sessions.
• Permet de charger les conversations et messages existants, facilitant la connexion à la base de données métier pour récupérer l’historique.
• Fournit un mode lecture seule, idéal pour afficher des enregistrements de conversation, des pages d’audit ou des présentations non modifiables.
• L’interface s’adapte aux écrans étroits et aux navigateurs mobiles, mais ce n’est pas une application mobile native indépendante.
• La taille du composant est d’environ 65 KB, ce qui le rend adapté à l’incorporation dans des pages web existantes sans avoir à récréer l’ensemble de la mise en page de chat.

Entrée, sortie et structures de données

La fonction de réponse de l’agent peut renvoyer directement un message ou un résultat asynchrone. Lors de l’accès du serveur, les développeurs envoient généralement le message à leur propre interface, puis transmettent la réponse de l’interface au composant pour affichage.

Installation et initialisation

1. Sélectionnez le mode d’installation pour ajouter les scripts de composants et les styles au projet.
2. Préparez un conteneur HTML et créez une instance de ChatBot.
3. Configurer l’utilisateur actuel, l’agent, le format des messages, le layout et la barre latérale.
4. Écrire une fonction de réponse du proxy pour envoyer les messages des utilisateurs vers son propre backend.
5. Stocker les clés de modèle en toute sécurité au niveau du backend, et gérer l’authentification, le throttling et le traitement des erreurs.
6. Transformer la réponse du modèle en messages de composant permet d’afficher les données de manière fluide en ajoutant des messages.
7. Vérifier l’historique des tests, supprimer les sessions, le layout pour mobile et les états réseau anormaux avant de le mettre en ligne.

Configuration de l’interface de chat

Mise en page et format des messages

La configuration de render permet de choisir parmi quatre modèles de messages, tandis que format permet de choisir entre text et markdown. Markdown est adapté aux codes, aux listes et aux réponses en texte enrichi, mais l’application doit néanmoins traiter de manière sécurisée la sortie du modèle afin d’éviter que du contenu non nettoyé n’apparaisse sur la page.

Plusieurs agents et historique de chat

agents, chats, activeAgent et activeChat sont utilisés pour organiser plusieurs assistants et sessions. Les produits de service client peuvent disposer d’agents par département, tandis que les assistants internes peuvent être classés selon la base de connaissances ou le type de tâche.

Lecture seule et cache local

readonly permet d’empêcher l’utilisateur de modifier les données de l’interface, tandis que withCache permet de stocker les messages localement dans le navigateur. Si les messages sont sensibles, l’utilisation d’un appareil partagé ou du cache du navigateur peut entraîner des risques de fuite ; les développeurs doivent évaluer s’il est nécessaire de désactiver le cache et d’utiliser plutôt un stockage serveur contrôlé.

Que peut faire l’API des composants

• Ajouter, supprimer ou sélectionner des sessions de chat.
• Ajouter de nouveaux messages, ajouter du texte aux messages existants et changer l’état de frappe.
• Fournir des messages aux composants, ou demander les messages correspondants lors du choix d’une session.
• Lire et mettre à jour dynamiquement la configuration actuelle.
• Écouter ou intercepter de nouveaux messages, supprimer des sessions et sélectionner des sessions, etc.

L’API ici est une interface de programmation pour les composants frontaux, et non l’interface d’inférence IA hébergée fournie par DHTMLX. Pour appeler le modèle, il faut encore utiliser l’API du fournisseur du modèle ou son propre service d’inférence.

Se connecter à OpenAI ou à d’autres modèles

Le document fournit des exemples d’intégration avec OpenAI et montre comment convertir les messages historiques des composants en un format de dialogue requis par le modèle. Le produit peut également se connecter à Claude, Gemini ou à d’autres modèles prenant en charge les appels serveur ; les capacités spécifiques du modèle dépendent du fournisseur concerné.

1. L’interface frontale écoute les événements de nouvelles messages de l’utilisateur.
2. Envoyer le contexte de session nécessaire au backend métier protégé.
3. La partie backend vérifie l’identité de l’utilisateur et son quota, avant d’appeler le service de modèle.
4. Filtrer ou transformer la réponse, et renvoyer les résultats ordinaires ou segmentés à l’interface utilisateur.
5. Afficher les réponses via de nouvelles méthodes de message ou des messages supplémentaires, tout en gérant les délais d’attente et les tentatives de réessai.

Le code de démonstration peut appeler directement le modèle dans le navigateur pour faciliter la lecture, mais en environnement de production, les clés API ne doivent pas être stockées dans le front-end. Sinon, les visiteurs peuvent lire ces clés et générer des frais non autorisés.

Prix et licence

Le fait que le chatbot soit gratuit ne signifie pas que l’ensemble de l’application d’IA soit sans coût, ni que tous les autres composants DHTMLX soient gratuits. Les appels aux modèles, le serveur, la base de données, la surveillance et les services tiers peuvent être facturés séparément.

La licence MIT autorise généralement l’utilisation, la copie, la modification, la distribution et l’exploitation commerciale, mais il est nécessaire de conserver la licence et la déclaration de droits d’auteur lors de la distribution. L’équipe doit effectuer un examen de conformité en se basant sur le texte réel de la licence fourni dans le paquet de téléchargement.

Version, GitHub et statut open source

• Chatbot 1.0 a été lancé en 2024, et la version de maintenance actuellement vérifiable est 1.0.3.
• Les composants peuvent être obtenus via npm, CDN ou des paquets statiques, et disposent de documents publics, de descriptions API et d’exemples.
• Aucun dépôt de code source public du composant principal Chatbot n’a été trouvé dans l’organisation GitHub de DHTMLX ; les autres projets d’exemple de cette organisation ne peuvent donc pas être considérés comme le code source de ce composant.
• L’étiquetage du composant avec la licence MIT et le fait qu’il soit hébergé sur GitHub sont deux choses distinctes ; les droits de la licence doivent se fonder sur le paquet distribué réellement.

Confidentialité et sécurité

Le DHTMLX Chatbot ne propose pas de backend de chat hébergé de manière centralisée ; le flux des données de chat final est déterminé par le développeur de l’application. L’activation du cache local, l’appel à des modèles tiers ou le stockage dans une base de données métier entraînent des responsabilités différentes en matière de confidentialité et de conservation.

• Les clés de modèle ne sont stockées que du côté serveur, et des identifiants distincts sont utilisés pour différents environnements.
• Valider, échapper ou nettoyer de manière sécurisée les entrées utilisateur et les sorties Markdown.
• Définir une collecte minimale, des droits d’accès, une durée de conservation et un mécanisme de suppression pour les messages historiques.
• Expliquer à l’utilisateur le fournisseur du modèle utilisé, l’usage des données, les transferts transfrontaliers et la portée de la consultation manuelle.
• Évitez d’enregistrer dans le journal les prompts complets, les clés et les informations personnelles sensibles.
• Définir l’authentification, la limitation de vitesse, le plafond de frais et la détection des abus pour les appels au modèle.

La politique de confidentialité du site DHTMLX concerne les formulaires de téléchargement, les outils d’analyse, le marketing, les données de commande et le support, et indique que les demandes de suppression seront traitées dans un délai de 30 jours. Cela ne s’applique pas automatiquement aux applications de chat créées par l’utilisateur lui-même ; les opérateurs de ces applications doivent toujours fournir leurs propres mentions de confidentialité.

Adapté aux utilisateurs et aux scénarios

• Développeur frontend : Créer rapidement une interface de chat avec un historique et plusieurs layouts de messages.
• Équipe SaaS : emballer les services de modèles existants en assistants clients ou assistants produits à marque propre.
• Équipe de R&D de l’entreprise : intégrer l’interface backend de recherche des connaissances internes à une entrée de dialogue unifiée.
• Concepteur de prototype : Vérifier rapidement les interactions de chat à l’aide d’un CDN et de réponses simulées.
• Produits éducatifs et technologiques : présentation de tuteurs, d’assistants de code ou d’agents de tâches multiples.

Avantages et limites

Avantages principaux

• Licence MIT gratuite, adaptée aux projets personnels et commerciaux.
• Axé sur la couche UI, il permet de remplacer différents modèles et backends.
• Plusieurs layouts de messages, Markdown, historique et capacités multi-agents assez complètes.
• Méthode d’installation flexible, avec des exemples de méthodes, d’attributs, d’événements et d’intégration.

Limites des capacités

• Ne comprend pas de modèles, de base de connaissances, de recherche vectorielle, de modération de contenu ou de backend de production.
• Il n’y a pas de back-office prêt à l’emploi pour la connexion des utilisateurs, les permissions, la facturation et l’exploitation.
• Le cache local conserve les messages dans le navigateur ; pour les scénarios sensibles, il faut redessiner le stockage.
• La qualité du modèle, les délais, les coûts et la politique de données dépendent du fournisseur d’accès.
• Les exemples publics d’OpenAI ne constituent pas des architectures de sécurité en production que l’on peut copier directement.

Questions fréquentes

Le DHTMLX Chatbot est-il un robot IA complet ?

Non. Il fournit principalement une interface de chat et des API frontales ; l’inférence des modèles, la base de connaissances, le backend et le système d’identités nécessitent une intégration par le développeur.

Le DHTMLX Chatbot est-il gratuit ?

Les composants sont gratuits et sont soumis à la licence MIT. Les API de modèles externes, les serveurs et d’autres composants commerciaux ne sont pas inclus.

Peut-il être utilisé pour des projets commerciaux ?

La licence MIT autorise l’utilisation commerciale, mais la licence et la mention des droits d’auteur doivent être conservées lors de toute redistribution. Il convient de vérifier le texte de la licence dans le paquet téléchargé avant sa mise en ligne officielle.

Quels grands modèles sont pris en charge ?

Les composants ne sont pas liés à un modèle spécifique et peuvent se connecter via le backend du développeur à OpenAI, Claude, Gemini ou d’autres systèmes. La disponibilité et le prix dépendent du service correspondant.

Est-ce que la réponse en flux est prise en charge ?

L’interface peut être mise à jour progressivement en ajoutant des messages et en affichant l’état de frappe. Un véritable protocole de transmission en flux continu ainsi que la récupération en cas de coupure doivent être mis en œuvre côté serveur.

Comment installer ?

On peut utiliser npm, CDN ou télécharger des fichiers statiques. Pour les projets en production, il est préférable de fixer une version précise afin d’éviter des changements non testés dus à des mises à jour de la dernière version.

Où sont enregistrés les historiques de chat ?

Lorsque withCache est activé, les données peuvent être stockées localement dans le navigateur ; sinon, elles peuvent être fournies par le serveur du développeur. Le composant ne définit pas de manière unifiée pour l’application la durée de conservation et les règles de suppression.

Est-ce que ça fonctionne sur le téléphone ?

L’interface prend en charge les écrans étroits réactifs et peut être intégrée dans des pages web mobiles. Ce n’est pas une application iOS ou Android indépendante fournie par DHTMLX.

Peut-on placer la clé du modèle du côté client ?

Il ne faut pas le faire. La clé doit être stockée au backend, qui s’occupe de l’authentification, du contrôle du débit et des appels aux modèles.

Y a-t-il un dépôt GitHub public ?

Aucun dépôt de code source ouvert pour le composant principal du chatbot n’a été confirmé pour le moment. La licence MIT, la possibilité de téléchargement et de distribution ne sont pas synonymes d’hébergement sur GitHub.

Résumé

DHTMLX Chatbot convient aux équipes de développement qui disposent déjà de modèles ou de capacités backend et souhaitent compléter rapidement leur interface de chat. Sa valeur réside dans son interface configurable et ses API frontend, tandis que sa disponibilité en production dépend finalement du backend sécurisé, de la gouvernance des données et de l’intégration des modèles mis en œuvre par l’équipe.