feat: add voice commands

Author: shibbas

packages/chat-component/public/svg/mic-icon.svg

@@ -16,6 +16,7 @@ const globalConfig = {
  CHAT_MESSAGES: [],
  // This are the labels for the chat button and input
  CHAT_BUTTON_LABEL_TEXT: 'Ask Support',
+ CHAT_VOICE_BUTTON_LABEL_TEXT: 'Voice input',
  CHAT_INPUT_PLACEHOLDER: 'Type your question, eg. "How to search and book rentals?"',
  USER_IS_BOT: 'Support Assistant',
  RESET_BUTTON_LABEL_TEXT: 'X',

packages/chat-component/public/svg/mic-record-on-icon.svg

@@ -20,6 +20,9 @@ import iconSend from '../public/svg/send-icon.svg?raw';
 import iconClose from '../public/svg/close-icon.svg?raw';
 import iconQuestion from '../public/svg/bubblequestion-icon.svg?raw';
 import iconSpinner from '../public/svg/spinner-icon.svg?raw';
+import iconMicOff from '../public/svg/mic-icon.svg?raw';
+import iconMicOn from '../public/svg/mic-record-on-icon.svg?raw';
+
 import { marked } from 'marked';
 
 /**
@@ -94,6 +97,17 @@ export class ChatComponent extends LitElement {
  @property({ type: Boolean })
  canShowThoughtProcess = false;
 
+ // some browsers may not support SpeechRecognition https://developer.mozilla.org/en-US/docs/Web/API/SpeechRecognition#browser_compatibility
+ @property({ type: Boolean })
+ showVoiceInput = (window.SpeechRecognition || window.webkitSpeechRecognition) !== undefined;
+
+ @property({ type: Boolean })
+ enableVoiceListening = false;
+
+ speechRecognition = this.showVoiceInput
+ ? new (window.SpeechRecognition || window.webkitSpeechRecognition)()
+ : undefined;
+
  // api response
  apiResponse = {} as BotResponse | Response;
  // These are the chat bubbles that will be displayed in the chat
@@ -197,6 +211,29 @@ export class ChatComponent extends LitElement {
  }
  }
 
+ handleVoiceInput(event: Event): void {
+ event.preventDefault();
+ this.enableVoiceListening = !this.enableVoiceListening;
+ if (this.enableVoiceListening) {
+ this.speechRecognition.continous = true;
+ this.speechRecognition.lang = 'en-US';
+
+ this.speechRecognition.start();
+ this.speechRecognition.onresult = (event) => {
+ let input = '';
+ // iterate through speech recognition results
+ for (const result of event.results) {
+ // Print the transcription to the console
+ input += `${result[0].transcript}`;
+ }
+ this.questionInput.value = DOMPurify.sanitize(input);
+ this.currentQuestion = this.questionInput.value;
+ };
+ } else {
+ this.speechRecognition.stop();
+ }
+ }
+
  // Handle the click on a default prompt
  handleDefaultPromptClick(question: string, event?: Event): void {
  event?.preventDefault();
@@ -619,6 +656,16 @@ export class ChatComponent extends LitElement {
  autocomplete="off"
  @keyup="${this.handleOnInputChange}"
  />
+ ${this.showVoiceInput
+ ? html` <button
+ title="${globalConfig.CHAT_VOICE_BUTTON_LABEL_TEXT}"
+ class="chatbox__button"
+ ?disabled="${!this.showVoiceInput}"
+ @click="${this.handleVoiceInput}"
+ >
+ ${this.enableVoiceListening ? unsafeSVG(iconMicOn) : unsafeSVG(iconMicOff)}
+ </button>`
+ : ''}
  <button
  class="chatbox__button"
  data-testid="submit-question-button"

packages/chat-component/src/config/global-config.js

@@ -1 +1,8 @@
 /// <reference types="vite/client" />
+
+declare global {
+ interface Window {
+ SpeechRecognition: any;
+ webkitSpeechRecognition: any;
+ }
+}