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[]>();
@@ -167,6 +168,7 @@ const BaseChatbot: React.FunctionComponent = () => {
   }
 
   const handleSend = async (input: string) => {
+    setIsSendButtonDisabled(true);
     const date = new Date();
     const newMessages = structuredClone(messages);
     if (currentMessage.length > 0) {
@@ -229,6 +231,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 +291,8 @@ const BaseChatbot: React.FunctionComponent = () => {
           hasStopButton={hasStopButton}
           handleStopButton={handleStopButton}
           alwayShowSendButton
+          onChange={handleChange}
+          isSendButtonDisabled={isSendButtonDisabled}
         />
         <ChatbotFootnote label="Verify all information from this tool. LLMs make mistakes." />
       </ChatbotFooter>

src/app/Compare/CompareChild.tsx

@@ -137,6 +137,7 @@ const CompareChild: React.FunctionComponent<CompareChildProps> = ({
 
   // fixme this is getting too large; we should refactor
   async function fetchData(userMessage: string) {
+    updateStatus(order === 'first' ? 'child1' : 'child2', { isMessageStreaming: true });
     if (controller) {
       controller.abort();
     }
@@ -169,7 +170,6 @@ const CompareChild: React.FunctionComponent<CompareChildProps> = ({
             throw new Error('Other');
         }
       }
-      updateStatus(order === 'first' ? 'child1' : 'child2', { isMessageStreaming: true });
 
       // start reading the streaming message
       const reader = response.body.getReader();

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>();
@@ -96,6 +97,7 @@ export const CompareLayout: React.FunctionComponent = () => {
   const handleSend = (value: string) => {
     setInput(value);
     setHasNewInput(!hasNewInput);
+    setIsSendButtonDisabled(true);
   };
 
   const changeSearchParams = (_event, value: string, order: string) => {
@@ -117,6 +119,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 +185,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>