6. Inbox / Percakapan WhatsApp

Buka Percakapan dari sidebar atau /inbox.

Layout 3 kolom: daftar percakapan (kiri) · thread chat (tengah) · panel kontak (kanan).

6.1 Memulai percakapan

Buka halaman Kontak → klik ikon chat (💬) di baris kontak. Percakapan baru dibuat dan langsung terbuka di Inbox.

Saat masuk halaman Percakapan tanpa lewat kontak, area chat akan kosong dengan pesan “Pilih percakapan” (seperti WhatsApp Web). Klik salah satu percakapan di daftar kiri untuk membukanya.

6.2 Filter daftar percakapan

Empat pill di atas daftar:

• Semua — semua percakapan workspace
• Saya — hanya yang ditugaskan ke Anda
• Belum dibalas — percakapan dimana pesan terakhir dari pelanggan (belum dibalas tim)
• Bot — belum aktif (v2)

6.3 Cari percakapan

Kotak “Cari percakapan…” mencari tiga hal sekaligus (case-insensitive):

1. Nama kontak — mis. ketik budi ketemu semua percakapan dengan kontak yang mengandung “Budi”.
2. Nomor telepon — mis. ketik 62812 ketemu kontak yang nomornya mengandung itu.
3. Isi pesan di percakapan — mis. ketik resi ketemu percakapan yang punya pesan berisi “RESI PENGIRIMAN JNT 12345”, atau ketik lebaran ketemu percakapan yang pernah berbahas promo Lebaran.

Pencarian server-side, langsung query DB — aman dipakai meski riwayat pesan sudah ribuan.

6.4 Kirim balasan

Di thread chat (kolom tengah):

1. Ketik pesan di kotak bawah (“Ketik balasan untuk…”).
2. Tekan Enter untuk kirim, atau klik tombol “Kirim”.
3. Bubble baru muncul (hijau, di kanan) dengan timestamp + status tick.

Status tick: ✓ = pesan diterima provider (terkirim); ✓✓ abu = sampai HP pelanggan (delivered); ✓✓ teal = dibaca pelanggan (read). Perubahan status realtime tanpa reload.

Thread otomatis scroll ke pesan terbaru saat membuka percakapan dan saat ada pesan baru — tidak perlu scroll manual.

Pesan media masuk (inbound)

Jika pelanggan kirim gambar, video, voice note, stiker, atau dokumen lewat WhatsApp, pesan tersebut otomatis di-download oleh Karibin dan tampil langsung di bubble:

• Gambar / stiker → ditampilkan inline; klik untuk membuka ukuran asli di tab baru.
• Video → pemutar video inline (controls native).
• Voice note / audio → pemutar audio inline (play/pause/scrub).
• Dokumen (PDF, DOC, XLS, …) → kotak unduhan dengan ikon dokumen, klik untuk unduh.

Caption pelanggan (jika ada) muncul di bawah media. Jika tidak ada caption, ditampilkan label generic dalam tanda kurung — (gambar), (video), (pesan suara), (stiker), (dokumen).

Kirim media (outbound)

Klik ikon 📎 (paperclip) di sisi kiri composer untuk pilih file. Dialog preview muncul:

1. Preview — gambar/video/audio ditampilkan inline; dokumen muncul sebagai kartu placeholder.
2. Caption (opsional) — tambahkan teks yang akan muncul di bawah media di WhatsApp pelanggan. Audio + stiker tidak mendukung caption (akan diabaikan).
3. Klik Kirim untuk upload + kirim. Bubble baru langsung muncul di chat dengan preview yang sama.

Format yang didukung: gambar (JPG/PNG/WebP/GIF), video (MP4/3GP), audio (OGG/MP3/M4A/AMR), dokumen (PDF/DOC/DOCX/XLS/XLSX/PPT/TXT/CSV). Stiker dikirim otomatis kalau file image/webp di-upload.

Batas ukuran: 16 MB per file (sesuai limit video Meta).

6.5 Tugaskan / Lepas tugas

Di header thread chat, klik ikon “Tugaskan” (👥):

• Pertama klik → percakapan ditugaskan ke Anda. Ikon di-highlight teal.
• Klik lagi → lepas tugas (tidak ada agen ditugaskan).

Daftar di kiri menunjukkan nama agen (“Demo”, dll) di samping status.

6.6 Tandai sebagai selesai

Klik tombol “Selesai” di header thread. Status berubah jadi RESOLVED, tombol jadi “Buka lagi”. Klik lagi untuk membuka kembali ke status OPEN.

6.7 Pesan belum dibaca

Setiap percakapan menampilkan badge merah berisi jumlah pesan masuk yang belum dibaca:

• Di daftar (kolom kiri): chip ungu kecil dengan angka, muncul di sebelah kanan baris ketika ada pesan INBOUND baru.
• Di sidebar utama: angka total pesan belum dibaca seluruh workspace muncul di samping menu “Percakapan”.

Membuka percakapan secara otomatis menandainya sudah dibaca — badge hilang setelah satu kali klik. Tidak perlu tombol “tandai dibaca” terpisah.

6.8 Inbox realtime

Halaman Inbox terhubung ke server lewat koneksi streaming — Anda tidak perlu refresh ketika:

• Pesan masuk baru dari pelanggan tiba (badge unread, preview, dan urutan daftar otomatis ter-update)
• Anggota tim lain di workspace yang sama membuat percakapan baru atau mengirim balasan
• Status atau penugasan percakapan berubah
• Status pesan keluar berubah otomatis (✓ → ✓✓ delivered → ✓✓ teal read) saat pelanggan menerima/membaca — tanpa reload

Koneksi otomatis tersambung saat Anda masuk ke aplikasi dan terus terbuka selama tab browser aktif. Jika koneksi terputus (mis. ganti workspace, logout, restart server), aplikasi otomatis re-konek saat tab dibuka kembali.

6.9 Panel kontak (kanan)

Menampilkan ringkasan kontak yang sedang dibuka: avatar, nama, nomor, email, jumlah pesan, status percakapan. Klik “Buka di Kontak” untuk lompat ke halaman Kontak.

6.10 Shortcut keyboard

Saat fokus tidak di input/textarea (yaitu tidak sedang mengetik), shortcut ini aktif di halaman Inbox:

Shortcut tidak aktif saat Anda sedang mengetik di input/textarea/dropdown — supaya j tidak hijack ketika Anda ngetik nama atau pesan.