Étapes 1 à 3 du didacticiel API Chatbot

Créez un chatbot HTML à fichier unique à l'aide de JavaScript Vanilla (pas de framework). Afficher uniquement le fichier complet. DISPOSITION - Mobile-first : plein écran sur les téléphones, une carte centrée de 420 px sur le bureau. - En-tête bleu affichant le nom du modèle, des bulles de robot blanches à gauche, des bulles d'utilisateur bleues à droite, une barre de saisie collante avec un bouton Envoyer. - Respectez les encarts de zone de sécurité et utilisez 100dvh pour que le clavier ne brise pas la disposition. CONFIG - Constantes en haut du script : API_URL, API_KEY, MODEL, MAX_TURNS = 12, SYSTEM_MSG, WELCOME. - Exemple utilisant un plan de token Xiaomi Mimo : const API_URL = 'https://token-plan-sgp.xiaomimimo.com/v1/chat/completions' ; const API_KEY = 'API_Key_Placeholder'; // Modèle Mimo const MODEL = 'mimo-v2.6-pro'; const MAX_TURNS = 12 ; const SYSTEM_MSG = { role : 'system', content: 'Vous êtes un assistant utile.' } ; API - Appelez un point de terminaison /v1/chat/completions compatible OpenAI avec fetch et stream : true. - Analyser le flux SSE (données : lignes {...} et [DONE]) et gérer les morceaux qui divisent la ligne médiane. RENDU - Pendant la diffusion, affichez le texte brut avec un curseur clignotant. - Une fois la réponse terminée, rendez Markdown avec Markdown.js et nettoyez-le avec DOMPurify (chargez les deux à partir d'un CDN). - Les blocs de codes et les tableaux doivent défiler horizontalement à l'intérieur de la bulle et ne jamais déborder de l'écran. COMPORTEMENT - Conservez la mémoire de la conversation, réduite aux derniers tours MAX_TURNS plus le message système. - Taper /delete efface le chat et la mémoire. - Désactivez l'entrée pendant la diffusion d'une réponse ; envoyer sur Entrée. - Si la requête échoue, affichez une erreur amicale dans la bulle et ne sauvegardez pas un tour cassé. - Réfléchissez aux cas extrêmes : fragments SSE partiels, erreurs en cours de route, réponses vides et suppression de l'historique.