@patternfly/chatbot 2.1.0-prerelease.23 → 2.1.0-prerelease.25

package/src/MessageBar/MessageBar.scss

@@ -55,6 +55,7 @@
     left: 16px;
     color: var(--pf-t--global--text--color--placeholder);
     pointer-events: none;
+    font-size: var(--pf-t--chatbot--font-size);
   }
 }
 

package/src/MessageBar/MessageBar.tsx

@@ -58,6 +58,7 @@ export interface MessageBarProps {
     send?: { tooltipContent?: string; props?: ButtonProps };
     microphone?: {
       tooltipContent?: { active?: string; inactive?: string };
+      language?: string;
       props?: ButtonProps;
     };
   };
@@ -146,6 +147,7 @@ export const MessageBar: React.FunctionComponent<MessageBarProps> = ({
       textarea.focus();
       textarea.textContent = DOMPurify.sanitize(message);
     }
+    onChange && onChange({} as React.ChangeEvent<HTMLDivElement>, message);
   };
 
   const renderButtons = () => {
@@ -184,6 +186,7 @@ export const MessageBar: React.FunctionComponent<MessageBarProps> = ({
             onIsListeningChange={setIsListeningMessage}
             onSpeechRecognition={handleSpeechRecognition}
             tooltipContent={buttonProps?.microphone?.tooltipContent}
+            language={buttonProps?.microphone?.language}
             {...buttonProps?.microphone?.props}
           />
         )}

package/src/MessageBar/MicrophoneButton.tsx

@@ -22,6 +22,8 @@ export interface MicrophoneButtonProps extends ButtonProps {
   tooltipProps?: TooltipProps;
   /** English text "Use microphone" and "Stop listening" used in the tooltip */
   tooltipContent?: { active?: string; inactive?: string };
+  /** Locale code for language speech recognition is conducted in. This should be in the format 'en-US', a.k.a. the ISO 639-1 code, a dash, and the ISO_3166-1 code. */
+  language?: string;
 }
 
 export const MicrophoneButton: React.FunctionComponent<MicrophoneButtonProps> = ({
@@ -31,6 +33,7 @@ export const MicrophoneButton: React.FunctionComponent<MicrophoneButtonProps> =
   className,
   tooltipProps,
   tooltipContent = { active: 'Stop listening', inactive: 'Use microphone' },
+  language = 'en-US',
   ...props
 }: MicrophoneButtonProps) => {
   // Microphone
@@ -60,12 +63,14 @@ export const MicrophoneButton: React.FunctionComponent<MicrophoneButtonProps> =
       const recognition: SpeechRecognition = new (window.SpeechRecognition || window.webkitSpeechRecognition)();
       recognition.continuous = false;
       recognition.interimResults = false;
-      recognition.lang = 'en-US';
+      recognition.lang = language;
 
       recognition.onresult = (event) => {
         const result = event.results[0][0].transcript;
         onSpeechRecognition(result);
         recognition.stop();
+        // turn button off
+        onIsListeningChange(false);
       };
 
       recognition.onerror = (event) => {