Citizen Feedback Chat Bot - Technical Documentation

Owned by Ayush Gupta
Jan 13, 2022
2 min read

Objective

To provide user facilities to raise a complaint, provide their valuable feedback and rate the service through chat bot experience.

The Main Landing Page of Feedback Bot will appear like the image below which contains three options- Raise a Complaint, Provide Feedback and Rate the Service along with the FAQ's section.

 

 

Technical Implementation details:

The screen has been developed using the new-UI structure.

The link for the Feedback Bot Main Index is given below, it can be used to understand the starting point of the flow:

https://github.com/egovernments/DIGIT-Dev/blob/CITIZEN_FEEDBACK_WEBCHAT_UI/frontend/micro-ui/web/micro-ui-internals/packages/modules/cf/src/pages/citizen/CitizenFeedbackHome.js

 

CF (Citizen Feedback) Module has been segregated into a specified structure, All the atoms and molecules are added under there respective folders in react-components, and the configurations is mentioned in config.js file. All the routing related to CF module are handled in index.js file in citizen folder. Below is the snippet for folder structure.

 

MDMS data:

For FAQs section data is being imported from MDMS, For calling of MDMS data React Hooks has been used, so that it could be shared throughout the modules. Below is the little code snippet for the call used for MDMS.

const { data: faqData, isLoading } = Digit.Hooks.pt.useMDMS(Digit.ULBService.getStateId(), "XstateWebChatbot", "FrequentlyAskedQuestions", {});

 

 Below is the link for the MDMS data for FAQs section:

https://github.com/egovernments/egov-mdms-data/blob/DEV/data/pb/XstateWebChatbot/FrequentlyAskedQuestions.json

 

Localization :

Localization keys are added under the ‘rainmaker-cf’ locale module. In future, if any new labels are implemented in the Citizen Feedback then those should also be pushed in the locale DB under rainmaker-cf locale module.Below is the example of few locale labels.

 

API Used :

In Citizen Feedback Chatbot module webSocket have been used for making the connection with the backend. Below is the URL used for webSocket connection:

  1. ws://dev.digit.org/xstate-webchat