Overview
Emisell Helpdesk is a help center platform built for merchants on the Emisell platform. It covers three major areas: merchant account integration with the helpdesk, an AI chat assistant with contextual knowledge, and a structured ticket system for merchant-to-admin communication.
Problem
Merchants often struggle to find answers quickly when issues arise — and reaching out to admin feels slow and unstructured. Emisell Helpdesk was built to solve this by giving merchants a self-serve knowledge base, an AI assistant for instant answers, and a proper ticketing channel when human support is needed.
Key Features
- Account Integration — merchants log in via their dashboard and connect seamlessly to the helpdesk
- AI Chat Assistant — a conversational AI (similar to ChatGPT/Gemini) with context limited to Emisell-related topics and selected help articles
- Knowledge Base — categorized help articles covering Getting Started, Products & Collections, Billing & Subscription, and more, with live search and recent search history
- Ticket System — merchants can create and manage support tickets directed to admin, with a rich text editor for detailed submissions
Technical Highlights
Hybrid state management for AI chat was the most complex challenge. Chat messages exist in two states simultaneously — temporary (optimistic, pre-response) and server-confirmed. Zustand was used to bridge this gap: unresolved messages are persisted in localStorage for unauthenticated users, while in-flight messages remain visible during loading. Once the server responds, the temporary state is extended and reconciled with the real data — keeping the UI seamless throughout.
Binary stream response handling was a first — instead of a standard JSON response, the AI chat consumes a streaming binary response and renders content progressively as chunks arrive, similar to how modern AI chat interfaces work.
TanStack Query handled all server state for tickets and articles. Its mutation-and-invalidation pattern made it easy to automatically refetch related data when a ticket was submitted or an article was updated — without manual cache management.
Rich text editor was built into the ticket submission form, paired with React Hook Form
and Zod for schema-based validation. shadcn/ui with Radix UI's data-state attribute
pattern enabled clean conditional styling without JavaScript-driven class toggling.
An iframe-based article renderer was implemented to safely display rich article content without style bleed into the surrounding UI.