Implement Voice-to-Text Input in Chat

[Yogesh-G-3468]

This pull request introduces a voice-to-text functionality in the chat input component, allowing users to dictate their messages using their microphone. This feature leverages the browser's native Web Speech API (SpeechRecognition) to provide a seamless and accessible alternative to typing (Currently working only on chrome based browser as this uses the chrome's webkitSpeechRecognition).

Changes Implemented

Speech Recognition Integration

• Initialized and configured the SpeechRecognition API within the EmptyChatMessageInput component and MessageInput component.
• The recognition is set to be continuous and provide interim results for real-time user feedback.

UI and State Management

• Added a new state isRecording to manage the recording status.
• A microphone button has been added to the input actions. Its icon (Mic/Square) and color change dynamically to indicate whether the recording is active or stopped.
• The onClick event on the button toggles the startRecording and stopRecording functions.

Transcript Handling

• Live transcription is displayed in the text area by combining the interimTranscript with the main message state.
• Once the speech is final, the transcript is appended to the message state, and the interim transcript is cleared.
• The onChange handler for the text area was updated to correctly handle manual typing while interim results are being displayed.

Workflow Integration

• Submitting the form (either by clicking the send button or pressing the "Enter" key) now automatically stops an active recording session before sending the message.
• Basic error handling has been implemented for the speech recognition events.