Redirect when they try to use flyout from compare

src/app/BaseChatbot/BaseChatbot.tsx

@@ -29,7 +29,7 @@ import { useAppData } from '@app/AppData/AppDataContext';
 
 const BaseChatbot: React.FunctionComponent = () => {
   const { chatbots } = useLoaderData() as { chatbots: CannedChatbot[] };
-  const { flyoutMenuSelectedChatbot } = useAppData();
+  const { flyoutMenuSelectedChatbot, updateFlyoutMenuSelectedChatbot } = useAppData();
   const [isSendButtonDisabled, setIsSendButtonDisabled] = React.useState(true);
   const [messages, setMessages] = React.useState<MessageProps[]>([]);
   const [currentMessage, setCurrentMessage] = React.useState<string[]>([]);
@@ -268,6 +268,7 @@ const BaseChatbot: React.FunctionComponent = () => {
     }
     setController(undefined);
     setCurrentChatbot(value);
+    updateFlyoutMenuSelectedChatbot(value);
     setMessages([]);
     setCurrentMessage([]);
     setCurrentSources(undefined);

src/app/Compare/CompareLayout.tsx

@@ -9,7 +9,6 @@ import { useChildStatus } from './ChildStatusProvider';
 import { ErrorObject } from '@app/types/ErrorObject';
 import { UserFacingFile } from '@app/types/UserFacingFile';
 import { getId } from '@app/utils/utils';
-import { useAppData } from '@app/AppData/AppDataContext';
 
 export const CompareLayout: React.FunctionComponent = () => {
   // information from api
@@ -38,8 +37,6 @@ export const CompareLayout: React.FunctionComponent = () => {
 
   // context, used for stop buttons
   const { status } = useChildStatus();
-  // context, used for assistant selection
-  const { flyoutMenuSelectedChatbot } = useAppData();
 
   React.useEffect(() => {
     document.title = `Red Hat Composer AI Studio | Compare`;
@@ -48,7 +45,7 @@ export const CompareLayout: React.FunctionComponent = () => {
         (chatbot) => chatbot.name === assistants[0] || chatbot.name === assistants[1],
       );
       if (actualChatbots.length === 2) {
-        setFirstChatbot(flyoutMenuSelectedChatbot ?? actualChatbots[0]);
+        setFirstChatbot(actualChatbots[0]);
         setSecondChatbot(actualChatbots[1]);
       } else {
         // assistants are not real
@@ -78,12 +75,6 @@ export const CompareLayout: React.FunctionComponent = () => {
     };
   }, []);
 
-  React.useEffect(() => {
-    if (flyoutMenuSelectedChatbot) {
-      setFirstChatbot(flyoutMenuSelectedChatbot);
-    }
-  }, [flyoutMenuSelectedChatbot]);
-
   React.useEffect(() => {
     if (status) {
       const childIsStreaming = status.child1.isMessageStreaming || status.child2.isMessageStreaming;

src/app/FlyoutList/FlyoutList.tsx

@@ -6,6 +6,7 @@ import { useFlyoutWizard } from '@app/FlyoutWizard/FlyoutWizardContext';
 import { CannedChatbot } from '@app/types/CannedChatbot';
 import { Label, Menu, MenuContent, MenuItem, MenuList, SearchInput } from '@patternfly/react-core';
 import * as React from 'react';
+import { useLocation, useNavigate } from 'react-router-dom';
 
 interface FlyoutListProps {
   typeWordPlural: string;
@@ -25,6 +26,8 @@ export const FlyoutList: React.FunctionComponent<FlyoutListProps> = ({
   const [filteredItems, setFilteredItems] = React.useState<CannedChatbot[]>([]);
   const [isLoading, setIsLoading] = React.useState(true);
   const { nextStep } = useFlyoutWizard();
+  const location = useLocation();
+  const navigate = useNavigate();
   const { flyoutMenuSelectedChatbot, updateFlyoutMenuSelectedChatbot } = useAppData();
   const header = (
     <div className="title-with-label">
@@ -82,6 +85,10 @@ export const FlyoutList: React.FunctionComponent<FlyoutListProps> = ({
       const newChatbot = items.filter((item) => item.name === value)[0];
       console.log(newChatbot);
       updateFlyoutMenuSelectedChatbot(newChatbot);
+      console.log(location.pathname);
+      if (location.pathname !== '/') {
+        navigate('/');
+      }
     }
   };