From 108946f46178dd81d0155242cd4548627650069d Mon Sep 17 00:00:00 2001
From: Rebecca Alpert <ralpert@redhat.com>
Date: Mon, 2 Dec 2024 18:08:35 -0500
Subject: [PATCH] fix(MessageBar): Show SpeechRecognition output

With swap to new textarea, I missed adding the SpeechRecognition output. This should put the message content in. I briefly explored a controlled approach, but we have to deal with ranges and selections to make the cursor work. The approach I tried broke whitespace on Firefox and also hitting return + shift everywhere. This should let us keep using the native browser behavior, while adding the message updates.
---
 packages/module/src/MessageBar/MessageBar.tsx | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/packages/module/src/MessageBar/MessageBar.tsx b/packages/module/src/MessageBar/MessageBar.tsx
index 6d64b208..48d10c44 100644
--- a/packages/module/src/MessageBar/MessageBar.tsx
+++ b/packages/module/src/MessageBar/MessageBar.tsx
@@ -139,6 +139,15 @@ export const MessageBar: React.FunctionComponent<MessageBarProps> = ({
     attachMenuProps?.onAttachMenuToggleClick();
   };
 
+  const handleSpeechRecognition = (message) => {
+    setMessage(message);
+    const textarea = textareaRef.current;
+    if (textarea) {
+      textarea.focus();
+      textarea.textContent = DOMPurify.sanitize(message);
+    }
+  };
+
   const renderButtons = () => {
     if (hasStopButton && handleStopButton) {
       return (
@@ -173,7 +182,7 @@ export const MessageBar: React.FunctionComponent<MessageBarProps> = ({
           <MicrophoneButton
             isListening={isListeningMessage}
             onIsListeningChange={setIsListeningMessage}
-            onSpeechRecognition={setMessage}
+            onSpeechRecognition={handleSpeechRecognition}
             tooltipContent={buttonProps?.microphone?.tooltipContent}
             {...buttonProps?.microphone?.props}
           />
@@ -216,7 +225,7 @@ export const MessageBar: React.FunctionComponent<MessageBarProps> = ({
           ref={textareaRef}
           onKeyDown={handleKeyDown}
           {...props}
-        ></div>
+        />
       </div>
       <div className="pf-chatbot__message-bar-actions">{renderButtons()}</div>
     </>