react

Badge rujukan di daftar sumber dihitung lewat indexOf dari array asli, bukan posisi iterasi list hasil filter, supaya nomornya tetap nyambung.

TL;DR: Nomor badge di sidebar dihitung dari array hasil filter, bukan turn.sources asli, sehingga begitu satu knowledge entry tersaring semua nomor bergeser dan rujukan melenceng ke kartu salah. Fixnya satu baris: hitung nomor via indexOf di array asli, filter tetap cuma urusan tampilan. Pelajarannya, angka rujukan harus lahir dari data asli, posisi render cuma milik tampilan.

Kartu sumber kini dirender inline di bawah jawaban chat; komponen dipakai ulang lewat named export dengan id unik per panel dan state expand terpisah.

TL;DR: Commit kecil memindahkan render kartu sumber ke bawah jawaban di panel tengah, bukan cuma di sidebar. Yang kelihatan sepele ternyata nyeret dua kontrak lama: SourceCard harus jadi named export karena filenya kini punya dua komponen, dan id kartu perlu sufiks biar tetap unik di satu dokumen. Expanded state juga dibuat milik panel tengah sendiri, direset otomatis tiap pindah turn.

Chip pemilih mode di dasar sidebar tidak kelihatan sebelum menggulung. Dipindah ke puncak, atribut type dan aria-pressed tetap terpasang.

TL;DR: Saklar mode pencarian dan mode tentang-saya tadinya tersembunyi di dasar sidebar, jadi pengguna baru menyadarinya setelah menggulung riwayat obrolan. Commit ini memindahkannya ke puncak sidebar dengan logika sederhana: kontrol yang menentukan mode harus terlihat sebelum keputusan diambil. Form input kini menyusut jadi tanggung jawabnya saja, sementara atribut aksesibilitas seperti type dan aria-pressed tetap dipertahankan.

Menyembunyikan footer di halaman chat tanpa mengorbankan rendering server, lewat pola komposisi resmi Next.js App Router.

TL;DR: Halaman chat /ai butuh tampilan bersih tanpa footer, tapi menyembunyikannya lewat CSS cuma menutupi masalah, dan menurunkan seluruh layout ke client terlalu boros. Solusinya pola komposisi Next.js: komponen client kecil bernama ConditionalFooter memeriksa usePathname lalu return null di rute /ai. Footer tetap Server Component penuh karena diselundupkan sebagai children, bukan dirombak jadi client.

Riwayat chat lama memicu error duplicate key di React. Akar masalahnya ID ganda plus penomoran lewat effect yang rapuh.

TL;DR: Error key ganda di React muncul pas riwayat chat di-load ulang dari localStorage yang ternyata punya ID turn kembar. Akar masalahnya dua lapis: data lama tidak unik dan penomoran ID lewat effect terpisah yang timing-nya rapuh. Solusinya, setiap turn di-reindex jadi 0 sampai n-1 saat restore, lalu nextIdRef di-seed di effect yang sama.

Teks terlihat di layar tapi React tidak tahu ada perubahan. Kenapa manual assignment gagal, dan cara bypass controlled component pakai native prototype setter.

TL;DR: Kalau isi textarea lewat assignment biasa, React tidak sadar karena setter aslinya sudah diganti wrapper React yang menelan event buatan. Solusinya panggil setter asli dari HTMLTextAreaElement.prototype, lalu dispatch event input dengan bubbles: true supaya React menangkap perubahannya. Tombol kirim yang cuma ikon tanpa teks? Cukup tekan Enter lewat API keyboard Playwright.

Regex strip di akhir string nggak cukup: marker CTA dari LLM bisa lolos lewat tengah teks dan jalur streaming SSE sebelum post-processing jalan.

TL;DR: Marker CTA_FLAG: YES bocor ke user lewat dua jalur: LLM naruh marker di posisi acak yang luput dari regex ber-anchor $, dan jalur streaming SSE melewati post-processing. Patch-nya buang anchor dan strip marker di stream juga. Fix fundamentalnya: tombol CTA dirender dari field terstruktur, bukan ditumpang ke teks LLM lalu di-parse regex.

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.