[C4GT] Adding a microphone button for voice input

[aashutosh-samagra]

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

Add a microphone button that allows users to input text using their voice. The microphone button should be placed on the left side of the chatbot interface, inside the search box. Also add an option to choose whether to send the audio or use audio to convert it to text.

What exists

Currently we are using chatui as local-pacakge in our repo and it has support for audio input but it not properly setup.

What needs to be built

1. Enable input toggle button.
2. Add voice input button.
3. Add voice to text.
4. Add option to upload audio file.
5. Create a WAV File.
6. Upload this to minio bucket and get a signed URL.
7. Send signed URL back to transport socket.

Learning Path

Complexity

Medium

Skills Required

Javascript, Typescript, React ,minio .

Name of Mentors:

@geeky-abhishek

Repo Link

https://github.com/samagra-comms/uci-web-channel

Project size

8 Weeks

Acceptance Criteria

• add Input toggle to switch between voice / keyboard input
• get signed url by uploading the wav file
• proper speech to text conversation (including different locales).
• validation for file size

Milestones

• Understanding the requirements
• Understanding turbo repo
• Understanding UCI-WEB-CHANNEL
• Understanding chat-ui
• Setting up UCI-WEB-CHANNEL locally
• adding input toggle switch.
• adding voice to text support.
• adding audio file upload support.
• sending audio file.
• Adding proper test cases.

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/

[Prakhar-commits]

I would like to work on this issue, I am a frontend developer with experience in React and javascript.