Chatbot application for Open WebUI
npm install @iaat/chatbotChatbot en popup léger et autonome, compatible avec toute API de type OpenAI, pour intégrer facilement une interface de conversation sur n’importe quel site web.
- Interface de Chat Simple : Une interface utilisateur responsive et facile à utiliser.
- Gestion de l'Historique : La conversation est conservée pendant la session.
- Rendu Markdown : Les réponses de l'assistant sont formatées à partir de Markdown.
- Compatible OpenAI: Se branche sur LiteLLM ou OpenWeb UI par exemple
- Assurez-vous d'avoir Node.js 22 et npm 10 installés.
- Installez les dépendances frontend :
``bash`
npm install
- Compilez le projet avec :
bash`
npm run build
- Les fichiers compilés se trouvent dans le répertoire
Pour intégrer le chatbot dans une autre page HTML, suivez ces étapes :
1. Inclure les fichiers depuis unpkg :
Le moyen le plus simple d'inclure les fichiers est d'utiliser unpkg, un CDN qui sert les fichiers directement depuis le registre npm.
Dans la section
de votre page HTML, incluez le fichier CSS :
`html
` Juste avant la balise de fermeture
, incluez le fichier JavaScript :
`html
`2. Ajouter la structure HTML du chatbot :
Insérez cette structure HTML à l'endroit où vous souhaitez que le chatbot apparaisse dans votre page. L'ID
est crucial.
`html
🤖 Chatbot
`3. Instancier le Chatbot avec les options de configuration :
Après avoir inclus tous les scripts et la structure HTML, instanciez la classe
. Il est fortement recommandé de passer les options de configuration directement au constructeur.
`html
` Note : La classe
est rendue disponible globalement via window.IaatChatbot après l'inclusion de chatbot.min.js. L'utilisation de DOMContentLoaded assure que le DOM est entièrement chargé avant d'essayer d'instancier le chatbot.Démo
demo`.