feat: differentiate listening vs. not listening

Author: shibbas

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

@@ -17,6 +17,7 @@ const globalConfig = {
  // This are the labels for the chat button and input
  CHAT_BUTTON_LABEL_TEXT: 'Ask Support',
  CHAT_VOICE_BUTTON_LABEL_TEXT: 'Voice input',
+ CHAT_VOICE_REC_BUTTON_LABEL_TEXT: 'Listening to 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

@@ -658,8 +658,10 @@ export class ChatComponent extends LitElement {
  />
  ${this.showVoiceInput
  ? html` <button
- title="${globalConfig.CHAT_VOICE_BUTTON_LABEL_TEXT}"
- class="chatbox__button"
+ title="${this.enableVoiceListening
+ ? globalConfig.CHAT_VOICE_REC_BUTTON_LABEL_TEXT
+ : globalConfig.CHAT_VOICE_BUTTON_LABEL_TEXT}"
+ class="chatbox__button ${this.enableVoiceListening ? 'recording' : 'not-recording'}"
  ?disabled="${!this.showVoiceInput}"
  @click="${this.handleVoiceInput}"
  >

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

@@ -10,6 +10,7 @@ export const mainStyle = css`
  --primary-color: rgba(241, 255, 165, 0.6);
  --white: #fff;
  --black: #111111;
+ --red: #ff0000;
  --light-gray: #e3e3e3;
  --dark-gray: #4e5288;
  --accent-high: #692b61;
@@ -589,4 +590,10 @@ export const mainStyle = css`
  animation: spinneranimation 1s linear infinite;
  margin-right: 10px;
  }
+ .not-recording svg {
+ fill: var(--black);
+ }
+ .recording svg {
+ fill: var(--red);
+ }
 `;