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

Tiga 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)

Filter tag / agen / segmen (ikon corong di samping kotak cari), seperti label di WhatsApp Business. Klik ikon corong lalu pilih Tag kontak (mis. “VIP”), Agen ditugaskan (berguna untuk supervisor), atau Segmen. Filter aktif tampil sebagai chip berwarna yang bisa di-× satu per satu, ketiganya bisa digabung, dan tetap berlaku bersama pill + pencarian.

Klik tag dari detail kontak: buka detail kontak di percakapan, klik salah satu tag-nya, dan daftar percakapan langsung terfilter ke semua chat dengan tag itu, persis perilaku label WhatsApp Business.

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

Status baca dihitung per orang, bukan per workspace: rekan Anda yang membuka sebuah chat tidak menghapus penanda belum-dibaca milik Anda, jadi supervisor tetap tahu chat mana yang belum sempat ia baca walau agen lain sudah menanganinya.

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: menu “Percakapan” menampilkan angka belum dibalas per channel (WhatsApp = pesan belum dibaca; Instagram/Messenger = DM yang belum dibalas).

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.

6.11 Balasan cepat (/shortcode)

Untuk pesan yang sering diketik (ucapan terima kasih, link pembayaran, alamat toko), simpan sebagai balasan cepat dan panggil dengan /<shortcode> di kotak balasan:

1. Ketik / di kotak balasan → dropdown daftar shortcode muncul. Lanjutkan mengetik untuk memfilter (mis. /saldo).
2. Pilih dengan ↑/↓ + Enter (atau klik). Token /shortcode digantikan otomatis dengan isi balasan. Esc menutup dropdown.
3. Isi balasan yang mengandung {nama} otomatis diganti nama depan kontak yang sedang dibuka (fallback “Pelanggan”).

Kelola daftarnya di Pengaturan → Balasan cepat (/settings/quick-replies): tambah, edit, hapus shortcode (huruf kecil + angka + tanda hubung, maks 30 karakter). Dropdown hanya muncul saat / diketik di awal kata, jadi URL seperti https://... tidak men-trigger menu.

6.12 Catatan internal (note tim)

Perlu menandai sesuatu untuk rekan tim tanpa mengirimnya ke pelanggan? Klik tombol Catatan di kotak balasan (kotak berubah kuning), ketik, lalu Simpan. Catatan muncul di tengah percakapan sebagai kartu kuning “Catatan internal · nama penulis”.

Catatan tidak pernah dikirim ke pelanggan, tidak butuh koneksi WhatsApp aktif, dan tidak mengubah urutan/pratinjau daftar percakapan.

6.13 Kirim template WhatsApp dari inbox

Di luar window 24 jam (pelanggan terakhir menulis lebih dari 24 jam lalu), Meta tidak mengizinkan teks bebas — wajib template approved. Klik tombol ”📋 Template” di composer:

1. Modal menampilkan daftar template approved dari WhatsApp Business Account Anda (ditarik realtime dari Meta).
2. Pilih template → isi parameter dinamis ({{1}}, {{2}}, …) manual atau pakai {nama} / {phone} / {email} dari data kontak.
3. Klik Kirim → bubble baru muncul di chat dengan teks final yang sudah ter-substitusi.