Add stop button

redhat-composer-ai · Nov 6, 2024 · 243d001 · 243d001
1 parent 508d220
commit 243d001
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 1 deletion.
diff --git a/src/app/BaseChatbot/BaseChatbot.tsx b/src/app/BaseChatbot/BaseChatbot.tsx
@@ -35,6 +35,7 @@ const BaseChatbot: React.FunctionComponent = () => {
   const [currentChatbot, setCurrentChatbot] = React.useState<CannedChatbot>(chatbots[0]);
   const [controller, setController] = React.useState<AbortController>();
   const [currentDate, setCurrentDate] = React.useState<Date>();
+  const [hasStopButton, setHasStopButton] = React.useState(false);
 
   React.useEffect(() => {
     document.title = `Red Hat Composer AI Studio | ${currentChatbot?.name}`;
@@ -88,7 +89,7 @@ const BaseChatbot: React.FunctionComponent = () => {
 
     const newController = new AbortController();
     setController(newController);
-
+    setHasStopButton(true);
     try {
       let isSource = false;
 
@@ -199,6 +200,7 @@ const BaseChatbot: React.FunctionComponent = () => {
     // make announcement to assistive devices that new message has been added
     currentMessage.length > 0 && setAnnouncement(`Message from Chatbot: ${currentMessage.join('')}`);
     setIsSendButtonDisabled(false);
+    setHasStopButton(false);
   };
 
   const displayMode = ChatbotDisplayMode.embedded;
@@ -217,6 +219,13 @@ const BaseChatbot: React.FunctionComponent = () => {
     setIsSendButtonDisabled(false);
   };
 
+  const handleStopButton = () => {
+    if (controller) {
+      controller.abort();
+    }
+    setHasStopButton(false);
+  };
+
   return (
     <Chatbot displayMode={displayMode}>
       <ChatbotHeader>
@@ -266,6 +275,8 @@ const BaseChatbot: React.FunctionComponent = () => {
           hasMicrophoneButton
           hasAttachButton={false}
           isSendButtonDisabled={isSendButtonDisabled}
+          hasStopButton={hasStopButton}
+          handleStopButton={handleStopButton}
         />
         <ChatbotFootnote label="Verify all information from this tool. LLMs make mistakes." />
       </ChatbotFooter>

diff --git a/src/app/Compare/Compare.tsx b/src/app/Compare/Compare.tsx
@@ -18,6 +18,7 @@ export const Compare: React.FunctionComponent = () => {
   const [isSelected, setIsSelected] = React.useState('toggle-group-assistant-1');
   const [showFirstChatbot, setShowFirstChatbot] = React.useState(true);
   const [showSecondChatbot, setShowSecondChatbot] = React.useState(false);
+  const [hasStopButton, setHasStopButton] = React.useState(false);
   const [searchParams, setSearchParams] = useSearchParams();
   const assistants = searchParams.get('assistants')?.split(',');
   const navigate = useNavigate();
@@ -78,6 +79,16 @@ export const Compare: React.FunctionComponent = () => {
     }
   };
 
+  const handleStopButton = () => {
+    if (firstController) {
+      firstController.abort();
+    }
+    if (secondController) {
+      secondController.abort();
+    }
+    setHasStopButton(false);
+  };
+
   return (
     firstChatbot &&
     secondChatbot && (
@@ -113,6 +124,7 @@ export const Compare: React.FunctionComponent = () => {
               hasNewInput={hasNewInput}
               setSearchParams={changeSearchParams}
               order="first"
+              setShowStopButton={setHasStopButton}
             />
           </div>
           <div className={css('compare-item', !showSecondChatbot ? 'compare-item-hidden' : undefined)}>
@@ -127,6 +139,7 @@ export const Compare: React.FunctionComponent = () => {
               hasNewInput={hasNewInput}
               setSearchParams={changeSearchParams}
               order="second"
+              setShowStopButton={setHasStopButton}
             />
           </div>
         </div>
@@ -136,6 +149,8 @@ export const Compare: React.FunctionComponent = () => {
             hasMicrophoneButton
             hasAttachButton={false}
             isSendButtonDisabled={isSendButtonDisabled}
+            hasStopButton={hasStopButton}
+            handleStopButton={handleStopButton}
           />
           <ChatbotFootnote label="Verify all information from this tool. LLMs make mistakes." />
         </ChatbotFooter>

diff --git a/src/app/Compare/CompareChatbot.tsx b/src/app/Compare/CompareChatbot.tsx
@@ -29,6 +29,7 @@ interface CompareChatbotProps {
   setChatbot: (value: CannedChatbot) => void;
   setSearchParams: (_event, value: string, order: string) => void;
   order: string;
+  setShowStopButton: (bool: bolean) => void;
 }
 
 const CompareChatbot: React.FunctionComponent<CompareChatbotProps> = ({
@@ -42,6 +43,7 @@ const CompareChatbot: React.FunctionComponent<CompareChatbotProps> = ({
   setChatbot,
   setSearchParams,
   order,
+  setShowStopButton,
 }: CompareChatbotProps) => {
   const [messages, setMessages] = React.useState<MessageProps[]>([]);
   const [currentMessage, setCurrentMessage] = React.useState<string[]>([]);
@@ -89,6 +91,7 @@ const CompareChatbot: React.FunctionComponent<CompareChatbotProps> = ({
     // make announcement to assistive devices that new message has been added
     currentMessage.length > 0 && setAnnouncement(`Message from Chatbot: ${currentMessage.join('')}`);
     setIsSendButtonDisabled(false);
+    setShowStopButton(false);
   };
 
   React.useEffect(() => {
@@ -135,6 +138,7 @@ const CompareChatbot: React.FunctionComponent<CompareChatbotProps> = ({
 
     const newController = new AbortController();
     setController(newController);
+    setShowStopButton(true);
 
     try {
       let isSource = false;