Blog

Gestur roda mouse di popup jawaban AI: pasang listenernya gampang, tapi timing effect React, passive listener, dan reduced motion bikin ada empat jebakan.

TL;DR: Fitur flip jawaban AI lewat roda mouse di popup nyaris gagal karena dua jebakan: useEffect jalan saat ref masih null sehingga listener tak pernah nempel, dan event wheel default-nya passive sehingga preventDefault jadi no-op tanpa opsi passive: false. Solusinya pasang listener bergantung state terbuka plus deteksi ujung scroll. Animasi slide diatur CSS dan otomatis dihormati prefers-reduced-motion.

Chip waktu dan tag di popup chat ternyata bukan urusan CSS. Metadata harus naik dulu dari SQL sampai DTO sebelum UI bisa bergaya.

TL;DR: Popup search kelihatan datar bukan karena CSS, tapi karena API nggak mengirim tags, categories, dan published_at dari database. Solusinya: naikkan metadata itu lewat SQL, domain, sampai DTO, baru frontend merender. Setelah pipeline utuh, TimelineRow dipakai ulang di tiga konteks popup dengan chip waktu, ikon teknologi, dan badge sitasi.

Label RINGKAS bocor ke gelembung chat AI. Solusinya bukan prompt lebih ketat, tapi sanitasi input dan output di dua ujung pipeline.

TL;DR: Label prompt seperti RINGKAS: bocor ke UI karena model nggak patuh format, dan larangan tambahan malah bikin pelanggarannya makin kreatif. Solusinya dua lapis: sanitasi teks knowledge base sebelum masuk prompt, plus rendering output via react-markdown dan rehype-sanitize yang hanya ngizinkan elemen dari allowlist. Pelajarannya: prompt cukup untuk arah kasar, kontrol andal ada di input dan output, bukan daftar larangan.

Audit internal 11 temuan di pipeline chat AI, dari cache key sampai sanitasi input.

Chat AI yang nyambung tanpa session server: frontend pegang riwayat di localStorage, backend susun ulang prompt dengan char-budget.

Chat AI blog yang jawab 'lagi kerjain apa' dari commit history lokal — port sempit, cache version namespace, dan mining istilah dari commit message.

Jawaban AI di search dialog butuh dua versi: ringkasan cepat dan penjelasan lengkap. Satu SSE stream dari LLM, tapi UI perlu split — caranya pakai marker-based parsing.

Pencarian AI di blog ini sekarang ingat pertanyaan kemarin. Triknya: localStorage, cap 30 turn, dan try/catch yang diam-diam menyerah saat browser menolak.

LLM router mati saat streaming jawaban. Yang muncul: event meta fallback lalu pengunjung tetap dapat jawaban dari cache atau knowledge.