Il tuo chatbot personale

Costruisci una finestra chat sul tuo sito web e collegala al server dell'ultima lezione.

Te lo mostro: la finestra chat

Una chat è tre cose: una lista di messaggi, un campo di input, e un pulsante Invia.

<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; }

Collegamento al server

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

Tutto in quel codice lo conosci già: addEventListener, createElement, fetch con POST. L’unica parte nuova è l’idea di metterlo tutto insieme in una chat.

💡

“Thinking…” è un trucco piccolo ma importante. L’AI ci mette qualche secondo a rispondere – senza quel messaggio, un visitatore potrebbe pensare che la chat sia rotta. I buoni programmatori mostrano sempre che qualcosa sta succedendo.

Ora tocca a te 💪

Costruisci la chat seguendo l’esempio e abbina i colori al tuo sito web.
Nel system prompt sul server (lezione 6), usa il prompt che hai scritto per il tuo progetto nella lezione 5 – così un’AI generica diventa il tuo aiutante.
Testala: fai 5 domande che un visitatore potrebbe fare. Il bot risponde correttamente? Affina il prompt.
Bonus: aggiungi un messaggio di benvenuto dal bot che appare subito dopo il caricamento della pagina (“Hi! Ask me anything about our school.”).

⚠️

Sicurezza della chat: aggiungi una frase al system prompt tipo “Only answer questions about [your website]. Politely decline to answer anything else.” – altrimenti il bot scriverà volentieri qualsiasi cosa ai visitatori, anche cose non collegate al tuo sito web.

✅

Controllo: Una chat gira sul tuo sito web: scrivi una domanda, appare la tua bolla, poi “Thinking…”, poi la risposta del bot. Il bot parla come un aiutante per il tuo progetto.

Cosa porti via da questa lezione

Una chat = una lista di messaggi + un modulo + un fetch al tuo server.
Mostra lo stato (“Thinking…”) – il visitatore deve sapere che qualcosa sta succedendo.
Controlli personalità e limiti del bot tramite il system prompt sul server.