Overview
Madrasah Digital Care Chatbot is a web-based chatbot application that provides support and information to users of systems under the Madrasah Digital Care platform within the Ministry of Religious Affairs of Indonesia. It combines AI-powered responses with live agent support.
Features
- AI-Powered Chatbot: Uses OpenAI's language model to respond quickly to user queries about Madrasah Digital Care.
- Live Agent Support: When AI cannot provide a good answer, users can switch to a live agent for personalized help.
- Ticket Management: Users can submit tickets, track their progress, and receive updates.
- User Management: Administrators and supervisors can create, edit, and manage user accounts and permissions. User state is managed using Jotai atoms.
- Channel Integration: Supports multiple communication channels, including WhatsApp and web chat.
- Customizable Messages: Administrators can personalize chatbot messages to reflect the specific needs of Madrasah Digital Care.
- Shortcut Messages: Agents can use shortcut messages to quickly respond to common queries.
- Timeout Settings: Administrators can configure session timeout settings.
- Reporting: Administrators can track chatbot performance, user engagement, and ticket resolution times.
- State Management: Uses Jotai for lightweight state management across the application.
Tech Stack
- React: For reusable frontend components.
- Next.js: For server-side rendering and SEO.
- Chakra UI: For UI components and theming.
- Cypress: For end-to-end testing.
- Socket.IO: For real-time communication between the front-end and back-end, enabling live agent chat.
- OpenAI: For AI-driven chatbot responses.
- Jotai: For state management.
Lessons Learned
- Scalability: A chatbot handling many concurrent users needs careful attention to server resources and response times.
- Real-time Communication: WebSocket connections for live agent handoff required handling disconnections, reconnections, and message ordering.
- Testing: Cypress was useful for testing chat flows end-to-end, but testing real-time features required extra setup.
- State Management: Jotai was simpler than Redux for this project and worked well for managing chat state across components.
Screenshots
