Ton propre chatbot

Construis une fenêtre de chat sur ton site web et connecte-la au serveur de la dernière leçon.

Montre-moi : la fenêtre de chat

Un chat, c’est trois choses : une liste de messages, un champ de saisie, et un bouton Envoyer.

<div class="chat">
  <div id="zpravy" class="chat-zpravy"></div>
  <form id="chat-form" class="chat-form">
    <input id="chat-vstup" type="text" placeholder="Type your question…" autocomplete="off" />
    <button type="submit">Send</button>
  </form>
</div>

.chat { border: 1px solid #ddd; border-radius: 12px; max-width: 420px; }
.chat-zpravy { height: 300px; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.zprava { padding: 8px 12px; border-radius: 12px; max-width: 80%; }
.zprava.ja { background: #4f46e5; color: white; align-self: flex-end; }
.zprava.bot { background: #f0f0f0; align-self: flex-start; }
.chat-form { display: flex; gap: 8px; padding: 12px; border-top: 1px solid #ddd; }
.chat-form input { flex: 1; }

Connexion au serveur

const zpravy = document.querySelector('#zpravy');
const form = document.querySelector('#chat-form');
const vstup = document.querySelector('#chat-vstup');

function pridejZpravu(text, kdo) {
  const el = document.createElement('div');
  el.className = `zprava ${kdo}`;
  el.textContent = text;
  zpravy.appendChild(el);
  zpravy.scrollTop = zpravy.scrollHeight; // scroll down to the new message
}

form.addEventListener('submit', async (e) => {
  e.preventDefault();
  const otazka = vstup.value.trim();
  if (!otazka) return;

  pridejZpravu(otazka, 'ja');
  vstup.value = '';
  pridejZpravu('Thinking…', 'bot');

  const r = await fetch('/zeptat-se', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ otazka }),
  });
  const data = await r.json();

  zpravy.lastChild.textContent = data.text; // replace "Thinking…" with the answer
});

Tout dans ce code tu le connais déjà : addEventListener, createElement, fetch avec POST. La seule nouveauté, c’est l’idée de tout assembler en chat.

💡

« Thinking… » est un petit truc mais important. L’IA met quelques secondes à répondre – sans ce message, un visiteur pourrait penser que le chat est cassé. Les bons programmeurs montrent toujours que quelque chose se passe.

À toi 💪

Construis le chat en suivant l’exemple et fais correspondre les couleurs à ton site web.
Dans le prompt système sur le serveur (leçon 6), utilise le prompt que tu as écrit pour ton projet à la leçon 5 – ça transforme une IA générique en ton propre assistant.
Teste : pose 5 questions qu’un visiteur pourrait avoir. Le bot répond-il correctement ? Affine le prompt.
Bonus : ajoute un message d’accueil du bot qui apparaît juste après le chargement de la page (« Hi! Ask me anything about our school. »).

⚠️

Sécurité du chat : ajoute une phrase au prompt système comme « Only answer questions about [your website]. Politely decline to answer anything else. » – sinon le bot écrira volontiers n’importe quoi aux visiteurs, même des choses sans rapport avec ton site web.

✅

Vérifie : Un chat tourne sur ton site web : tu tapes une question, ta bulle apparaît, puis « Thinking… », puis la réponse du bot. Le bot parle comme un assistant pour ton projet.

Ce que tu retiens de cette leçon

Un chat = une liste de messages + un formulaire + un fetch vers ton serveur.
Montre le statut (« Thinking… ») – le visiteur doit savoir que quelque chose se passe.
Tu contrôles la personnalité et les limites du bot via le prompt système sur le serveur.

Cette leçon fait partie d'un niveau payant

Montre-moi : la fenêtre de chat

Connexion au serveur

À toi 💪

Ce que tu retiens de cette leçon