Disable send button when input is blank

Updated Virtual Assistant to pull in onChange and used it to modify the send button state.

package.json

@@ -78,7 +78,7 @@
     "@patternfly/react-core": "^6.0.0",
     "@patternfly/react-icons": "^6.0.0",
     "@patternfly/react-styles": "^6.0.0",
-    "@patternfly/virtual-assistant": "^2.1.0-prerelease.8",
+    "@patternfly/virtual-assistant": "^2.1.0-prerelease.11",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "sirv-cli": "^2.0.2"

src/app/BaseChatbot/BaseChatbot.tsx

@@ -28,6 +28,7 @@ interface Source {
 
 const BaseChatbot: React.FunctionComponent = () => {
   const { chatbots } = useLoaderData() as { chatbots: CannedChatbot[] };
+  const [isSendButtonDisabled, setIsSendButtonDisabled] = React.useState(true);
   const [messages, setMessages] = React.useState<MessageProps[]>([]);
   const [currentMessage, setCurrentMessage] = React.useState<string[]>([]);
   const [currentSources, setCurrentSources] = React.useState<Source[]>();
@@ -229,6 +230,14 @@ const BaseChatbot: React.FunctionComponent = () => {
     setHasStopButton(false);
   };
 
+  const handleChange = (event: React.ChangeEvent<HTMLTextAreaElement>, value: string) => {
+    if (value !== '') {
+      setIsSendButtonDisabled(false);
+      return;
+    }
+    setIsSendButtonDisabled(true);
+  };
+
   return (
     <Chatbot displayMode={displayMode}>
       <ChatbotHeader>
@@ -281,6 +290,7 @@ const BaseChatbot: React.FunctionComponent = () => {
           hasStopButton={hasStopButton}
           handleStopButton={handleStopButton}
           alwayShowSendButton
+          isSendButtonDisabled={isSendButtonDisabled}
         />
         <ChatbotFootnote label="Verify all information from this tool. LLMs make mistakes." />
       </ChatbotFooter>

src/app/Compare/CompareLayout.tsx

@@ -12,6 +12,7 @@ export const CompareLayout: React.FunctionComponent = () => {
   const { chatbots } = useLoaderData() as { chatbots: CannedChatbot[] };
 
   // state
+  const [isSendButtonDisabled, setIsSendButtonDisabled] = React.useState(true);
   const [input, setInput] = React.useState<string>();
   const [hasNewInput, setHasNewInput] = React.useState(false);
   const [firstController, setFirstController] = React.useState<AbortController>();
@@ -117,6 +118,14 @@ export const CompareLayout: React.FunctionComponent = () => {
     setHasStopButton(false);
   };
 
+  const handleChange = (event: React.ChangeEvent<HTMLTextAreaElement>, value: string) => {
+    if (value !== '') {
+      setIsSendButtonDisabled(false);
+      return;
+    }
+    setIsSendButtonDisabled(true);
+  };
+
   return (
     firstChatbot &&
     secondChatbot && (
@@ -175,6 +184,8 @@ export const CompareLayout: React.FunctionComponent = () => {
             hasStopButton={hasStopButton}
             handleStopButton={handleStopButton}
             alwayShowSendButton
+            onChange={handleChange}
+            isSendButtonDisabled={isSendButtonDisabled}
           />
           <ChatbotFootnote label="Verify all information from this tool. LLMs make mistakes." />
         </ChatbotFooter>