[C4GT] Configure UI of Chatbot from json configs

[karntrehan]

Project Details

UCI is created with a vision to make the conversation flow creation configurable to a level, that it can be done by program owners, without the intervention of any engineers at all. At the same time, it also envisions reducing the redundant coding required for enabling the same business logic for different channels.

UCI aims to democratize the use of different communication channels such as WhatsApp, Telegram, SMS, email and more across all governance use cases.

UCI is being used to create 2 ways communication channels via chatbots between lakhs of teachers in Uttar Pradesh & the state. These chatbots are configured from an admin panel and trigger notifications to the teachers. Teachers then click on the notifications on their Android phones and talk to the chatbot. This is making day to day communication realtime & very effective between teachers and the state.

UCI-WEB-CHANNEL is a frontend application which uses UCI backend for communication.

Features to be implemented

Create a config file which has different configurations to add customisations to the UI. For eg: placeholder, locale, theme, logo, components. You can refer to chat ui for ideas.

What exists

Currently, we are using chat ui for the Chat UI and we are using the open-sourced version. We have setup this in our local package.

What needs to be built

1. Create a configuration file.
2. Add as many as possible customisation settings to support in the configuration file.
3. Add a watcher to chat-ui for faster development.

Learning Path

Complexity

Medium

Skills Required

Javascript, Typescript, React.

Name of Mentors:

@geeky-abhishek

Project size

8 Weeks

Product Set Up

Acceptance Criteria

• Customisation file should be supported by all javascript frontend frameworks / library .
• Final Build should not have any warnings or errors in the console.
• File and configuration should be strictly typed.
• Proper test should be written.

Out of Scope

Milestones

• Understanding the requirements
• Understanding turbo repo
• Understanding UCI-WEB-CHANNEL
• Setting up UCI-WEB-CHANNEL locally
• Creating a configuration file.
• Reading data from the configuration file.
• Creating production build based on the configuration provided.
• Adding test cases for the configuration.

Designs

We shall refer to config-ui.

C4GT

This issue is nominated for Code for GovTech (C4GT) 2023 edition.
C4GT is India's first annual coding program to create a community that can build and contribute to global Digital Public Goods. If you want to use Open Source GovTech to create impact, then this is the opportunity for you! More about C4GT here: https://codeforgovtech.in/

[jayanth-kumar-morem]

Hi @karntrehan ,
I would like to contribute to this. Could you please assign me this

CC: @tushar5526 @Shruti3004 @prtkjakhar @geeky-abhishek

[geeky-abhishek]

@jayanth-kumar-morem as per your request I have assigned the ticket to you. Feel free to tag me in comments if you have any query or need anything .

[jayanth-kumar-morem]

Hi @geeky-abhishek ,

Before I start working on this issue, I would like to clarify the exact requirements and expectations for the feature. Could you please provide more details about the JSON configuration format, the specific UI elements that need to be configured, and any other pertinent information that will help me understand the scope of this task?

This will ensure that my implementation aligns with the project's goals and requirements.

Thanks in advance for your guidance!