Chatbot kamu sendiri

Bangun jendela obrolan di situs web kamu dan sambungkan ke server dari pelajaran terakhir.

Tunjukkan pada saya: jendela obrolan

Obrolan terdiri dari tiga hal: daftar pesan, kolom masukan, dan tombol Kirim.

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

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

Segala sesuatu dalam kode itu sudah kamu ketahui: addEventListener, createElement, fetch dengan POST. Satu-satunya bagian baru adalah gagasan untuk menggabungkan semuanya ke dalam obrolan.

💡

“Berpikir…” adalah trik kecil namun penting. AI membutuhkan waktu beberapa detik untuk menjawab – tanpa pesan itu, pengunjung mungkin mengira obrolannya rusak. Pemrogram yang baik selalu menunjukkan bahwa sesuatu sedang terjadi.

Giliran kamu 💪

Bangun obrolan mengikuti contoh dan cocokkan warnanya dengan situs web kamu.
Pada prompt sistem di server (pelajaran 6), gunakan prompt yang kamu tulis untuk proyek kamu di pelajaran 5 – yang mengubah AI generik menjadi penolong kamu sendiri.
Uji: ajukan 5 pertanyaan yang mungkin dimiliki pengunjung. Apakah bot menjawab dengan benar? Perbaiki perintahnya.
Bonus: tambahkan pesan ucapan dari bot yang muncul tepat setelah halaman dimuat (“Hai! Tanyakan apa saja tentang sekolah kita.”).

⚠️

Keamanan chat: tambahkan kalimat ke perintah sistem seperti “Hanya jawab pertanyaan tentang [situs web kamu]. Tolak dengan sopan untuk menjawab pertanyaan lainnya.” – jika tidak, bot akan dengan senang hati menulis apa pun kepada pengunjung, bahkan hal-hal yang tidak berhubungan dengan situs web kamu.

✅

Periksa: Obrolan berjalan di situs web kamu: kamu mengetik pertanyaan, gelembung kamu muncul, lalu “Berpikir…”, lalu jawaban bot. Bot berbicara seperti pembantu proyek kamu.

Apa yang bisa diambil dari pelajaran ini

Obrolan = daftar pesan + formulir + pengambilan ke server kamu.
Tampilkan status (“Berpikir…”) – pengunjung perlu mengetahui sesuatu sedang terjadi.
kamu mengontrol kepribadian dan batasan bot melalui prompt sistem di server.