Overview
Madrasah Digital Care Chatbot is a web-based chatbot application designed to provide support and information to users of systems under the umbrella of the Madrasah Digital Care platform within the Ministry of Religious Affairs of Indonesia. It leverages a combination of AI-powered responses and live agent interaction to deliver a seamless and efficient user experience.
Features
- AI-Powered Chatbot: The chatbot utilizes OpenAI's language model to provide instantaneous responses to user queries, covering a wide range of topics related to Madrasah Digital Care.
- Live Agent Support: When AI cannot provide a satisfactory answer, users can seamlessly transition to a live agent for personalized assistance.
- Ticket Management: The application integrates with a robust ticket management system, allowing users to submit tickets, track their progress, and receive updates.
- User Management: The application includes a comprehensive user management system for administrators and supervisors, enabling them to create, edit, and manage user accounts and permissions. User state is efficiently managed using Jotai atoms.
- Channel Integration: The chatbot supports multiple communication channels, including WhatsApp and web chat, ensuring accessibility for a diverse user base.
- Customizable Messages: Administrators can personalize chatbot messages to reflect the specific needs and branding of Madrasah Digital Care.
- Shortcut Messages: Agents can utilize shortcut messages to quickly respond to common user queries, streamlining their workflow.
- Timeout Settings: The application allows administrators to configure session timeout settings, ensuring security and resource optimization.
- Detailed Reporting: The application provides comprehensive reporting capabilities, allowing administrators to track chatbot performance, user engagement, and ticket resolution times.
- Efficient State Management: Utilizes Jotai for lightweight and scalable state management across the application.
Tech Stack
- React: The front-end is built using React. Leveraging its component-based architecture and reusability.
- Next.js: The application leverages Next.js, a framework for building server-rendered React applications, providing performance optimization and SEO benefits.
- Chakra UI: Chakra UI is used for styling and theming, offering a component-based approach to building visually appealing interfaces.
- Cypress: Cypress is employed for end-to-end testing, ensuring the application's functionality and user experience are maintained.
- Socket.IO: Socket.IO is used for real-time communication between the front-end and back-end, enabling seamless live agent interaction.
- OpenAI: OpenAI's language model powers the chatbot's AI-driven responses, providing intelligent and context-aware interactions.
- Jotai: Used for state management, providing a simple and flexible approach to handling application state.
Lessons Learned
This project has been a valuable learning experience, highlighting the importance of:
- Scalability: Designing a chatbot application that can handle a large volume of user interactions requires careful consideration of scalability and performance optimization.
- Real-time Communication: Implementing real-time communication using WebSocket technology is crucial for providing a seamless live agent experience.
- Security: Implementing robust authentication and authorization mechanisms is essential for protecting user data and ensuring secure access to the application.
- Testing: Comprehensive testing using Cypress is vital for ensuring the application's functionality and user experience are maintained throughout development.
- State Management: Implementing Jotai for state management has demonstrated the benefits of a simpler and more flexible approach to handling application state compared to more complex solutions.
Screenshots
