Gambaran Umum
Emisell Helpdesk adalah platform help center yang dibangun untuk merchant di platform Emisell. Mencakup tiga area utama: integrasi akun merchant dengan helpdesk, AI chat assistant dengan konteks pengetahuan yang spesifik, dan sistem tiket terstruktur untuk komunikasi merchant ke admin.
Masalah
Merchant sering kesulitan menemukan jawaban dengan cepat ketika masalah muncul — dan menghubungi admin terasa lambat dan tidak terstruktur. Emisell Helpdesk hadir untuk mengatasi ini dengan menyediakan knowledge base mandiri, AI assistant untuk jawaban instan, dan jalur tiket yang proper ketika butuh bantuan langsung dari tim support.
Fitur Utama
- Integrasi Akun — merchant login melalui dashboard dan terhubung langsung ke helpdesk
- AI Chat Assistant — AI percakapan (serupa ChatGPT/Gemini) dengan konteks terbatas pada topik seputar Emisell dan artikel yang dipilih
- Knowledge Base — artikel bantuan berkategori mencakup Getting Started, Products & Collections, Billing & Subscription, dan lainnya, dilengkapi live search dan riwayat pencarian
- Sistem Tiket — merchant dapat membuat dan mengelola tiket dukungan yang ditujukan ke admin, dengan rich text editor untuk detail permasalahan
Highlight Teknis
Manajemen state hibrida untuk AI chat menjadi tantangan paling kompleks. Pesan chat berada dalam dua kondisi sekaligus — sementara (optimistic, sebelum respons) dan yang sudah dikonfirmasi server. Zustand digunakan untuk menjembatani ini: pesan yang belum terselesaikan disimpan di localStorage untuk pengguna yang belum login, sementara pesan yang sedang diproses tetap tampil selama loading. Begitu server merespons, state sementara di-extend dan direkonsiliasi dengan data asli — menjaga UI tetap mulus sepanjang proses.
Penanganan binary stream response menjadi pengalaman pertama — alih-alih respons JSON biasa, AI chat mengonsumsi streaming binary response dan merender konten secara progresif seiring chunk data tiba, serupa cara kerja antarmuka AI chat modern.
TanStack Query menangani seluruh server state untuk tiket dan artikel. Pola mutation-and-invalidation-nya memudahkan refetch data terkait secara otomatis ketika tiket dikirim atau artikel diperbarui — tanpa perlu manajemen cache manual.
Rich text editor dibangun di dalam form pengiriman tiket, dipasangkan dengan React Hook Form
dan Zod untuk validasi berbasis skema. shadcn/ui dengan pola atribut data-state dari
Radix UI memungkinkan conditional styling yang bersih tanpa perlu toggle class berbasis JavaScript.
Article renderer berbasis iframe diimplementasikan untuk menampilkan konten artikel yang kaya tanpa style bleed ke UI sekitarnya.