htmlcssjavascriptchataplikasiMenengah11 mnt baca

UI Chat Sederhana

Membangun tampilan chat dengan bubble pesan, balasan bot otomatis, dan indikator mengetik.

Kenapa Chat UI?

Chat adalah antarmuka paling akrab bagi pengguna HP. Membangunnya mengajarkan layout bubble, auto-scroll, dan simulasi "lawan bicara", pola dasar untuk chatbot AI nanti.

Langkah Membangun

HTML: Area pesan (<div id="areaPesan">), dan form input di bawah (input + tombol kirim).

CSS: Bubble pesan sendiri di kanan (biru), pesan lawan di kiri (abu). Avatar kecil di samping bubble lawan. Area pesan scroll otomatis ke bawah setiap pesan baru (scrollTop = scrollHeight).

JS:

  1. Kirim pesan: buat bubble kanan, kosongkan input.
  2. Tampilkan indikator "mengetik..." (tiga titik beranimasi).
  3. Setelah 1-1.5 detik, bot membalas dengan jawaban dari daftar respons sederhana berbasis kata kunci ("halo" -> sapa balik, "jam" -> beri tahu waktu).
  4. Enter untuk kirim, tombol kirim juga bisa diklik.

Bot berbasis kata kunci ini adalah versi super sederhana dari chatbot. Nanti di track AI, pola yang sama dipakai dengan LLM sungguhan.

Kesalahan Umum

  • Area pesan tidak auto-scroll sehingga pesan baru tidak terlihat (set scrollTop setelah render).
  • XSS: pesan pengguna dimasukkan via innerHTML sehingga tag HTML ikut jalan (pakai textContent untuk isi pesan).
  • Indikator mengetik tidak hilang jika pengguna mengirim banyak pesan cepat (kelola dengan satu timeout yang di-clear).
Live Playground
export default function App(): JSX.Element {
  return <h1>Hello world</h1>
}
Edit kode di kiri, preview kanan ter-update otomatis.

Tantangan

Tantangan: Mode Gelap Chat

Tambahkan tombol toggle tema di kepala chat yang mengubah seluruh tampilan chat menjadi mode gelap memakai CSS variables.