Lanjut ke konten
Samkarsa Logbook

Ketik untuk mencari…

↑↓untuk navigasi
Esc

BiZETO: WhatsApp Media Preview, Quoted Message Reply, & Smart Persona Auto-Reply

Implementasi media downloader (gambar lightbox, audio, video, dokumen) WhatsApp, quoted context reply, dan optimasi persona AI auto-reply ringkas tanpa analisa aplikasi.

Frontend,Backend,WhatsApp,UI/UX,AI2mnt baca

Pada penggunaan harian chat WhatsApp di BiZETO Command Center, ditemukan kebutuhan esensial:

  1. Pesan Non-Teks: Pesan media seperti gambar, rekaman suara (voice note), video, dan dokumen belum menampilkan preview interaktif di UI dan belum dapat di-download/di-zoom.
  2. Quoted Reply Message: Belum ada kemampuan membalas pesan secara spesifik (reply with quoted message) seperti pada WhatsApp asli.
  3. Karakter Respons AI: Balasan otomatis bot perlu dijaga agar ringkas, cerdas, ramah, dan langsung menjawab esensi pertanyaan pelanggan tanpa analisis teknis aplikasi/sistem.

  • Media Ingestion (manager.go):
    • Mengunduh data biner media (whatsmeow.Download) saat pesan masuk untuk tipe ImageMessage, VideoMessage, AudioMessage, DocumentMessage, dan StickerMessage.
    • Menyimpan file ke storage lokal ./media_files/whatsapp/<tenant_id>/<msg_id>.<ext>.
    • Mendaftarkan static endpoint Fiber /api/media dan /media di main.go.
  • ContextInfo Extractor:
    • Mengekstrak StanzaID, Participant, dan QuotedMessage saat pesan merupakan balasan dari pesan lain.
    • Memperbarui skema database tabel messages dengan kolom media_url, media_type, file_name, quoted_msg_id, quoted_sender, dan quoted_content.

  • Pengiriman Pesan dengan Context (manager.go & chat_handler.go):
    • Method SendWhatsAppMessage menyusun payload proto.ExtendedTextMessage dengan proto.ContextInfo berisi StanzaID pesan target.
    • WhatsApp penerima akan merender pesan tersebut sebagai balasan resmi bertaut (quoted message).

  • Optimasi Prompt (orchestrator.go):
    • Membatasi keluaran respons AI WhatsApp agar to the point, ramah, dan adaptif sesuai intensi pelanggan.
    • Menghilangkan segala bentuk meta-analisa aplikasi/sistem/database dari respons bot.

  • Image Preview & Lightbox:
    • Thumbnail gambar dengan hover zoom icon.
    • Modal Lightbox Fullscreen dengan gambar resolusi penuh, tombol Zoom, dan Tombol Download.
  • Audio Player:
    • Mini HTML5 audio player untuk voice note/audio pesan suara.
  • Document & Video:
    • Card download dokumen dan inline video player.
  • Quoted Message Header:
    • Banner kutipan di dalam bubble pesan dengan highlight warna dan nama pengirim.
    • Smooth-scroll ke pesan target saat banner kutipan diklik.
  • Interactive Reply Bar:
    • Tombol Reply pada hover bubble pesan.
    • Strip preview “Membalas ke: [Nama/Nomor]” di atas input text bar dengan tombol pembatalan (X).

  • ✅ Backend Compilation: Binary Linux AMD64 bizeto-server berhasil di-build tanpa error.
  • ✅ Frontend Build: Bundle Vite/React dist terkompilasi optimal (890 kB).
  • ✅ Deployment VPS: Container bizeto_backend dan bizeto_frontend berhasil di-restart dan aktif melayani request dengan latensi 1-3 ms.