Update dropdown menus when new assistant is created

redhat-composer-ai · Dec 13, 2024 · 9d3946e · 9d3946e
1 parent 92f5129
commit 9d3946e
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 21 deletions.
diff --git a/src/app/BaseChatbot/BaseChatbot.tsx b/src/app/BaseChatbot/BaseChatbot.tsx
@@ -29,12 +29,7 @@ import { useAppData } from '@app/AppData/AppDataContext';
 
 const BaseChatbot: React.FunctionComponent = () => {
   const { chatbots } = useLoaderData() as { chatbots: CannedChatbot[] };
-  const {
-    flyoutMenuSelectedChatbot,
-    updateFlyoutMenuSelectedChatbot,
-    chatbots: appDataChatbots,
-    setChatbots,
-  } = useAppData();
+  const { flyoutMenuSelectedChatbot, updateFlyoutMenuSelectedChatbot, chatbots: appDataChatbots } = useAppData();
   const [isSendButtonDisabled, setIsSendButtonDisabled] = React.useState(true);
   const [messages, setMessages] = React.useState<MessageProps[]>([]);
   const [currentMessage, setCurrentMessage] = React.useState<string[]>([]);
@@ -48,17 +43,16 @@ const BaseChatbot: React.FunctionComponent = () => {
   const [hasStopButton, setHasStopButton] = React.useState(false);
   const [files, setFiles] = React.useState<UserFacingFile[]>([]);
   const [isLoadingFile, setIsLoadingFile] = React.useState<boolean>(false);
+  const [allChatbots, setAllChatbots] = React.useState<CannedChatbot[]>(chatbots);
 
   React.useEffect(() => {
     document.title = `Red Hat Composer AI Studio | ${currentChatbot?.name}`;
   }, []);
 
   React.useEffect(() => {
-    setChatbots(chatbots);
-  }, [chatbots]);
-
-  React.useEffect(() => {
-    setChatbots(appDataChatbots);
+    if (appDataChatbots.length > 0) {
+      setAllChatbots(appDataChatbots);
+    }
   }, [appDataChatbots]);
 
   React.useEffect(() => {
@@ -370,10 +364,10 @@ const BaseChatbot: React.FunctionComponent = () => {
     <Chatbot displayMode={displayMode}>
       <ChatbotHeader>
         <ChatbotHeaderMain>
-          <HeaderDropdown selectedChatbot={currentChatbot} chatbots={chatbots} onSelect={onSelect} />
+          <HeaderDropdown selectedChatbot={currentChatbot} chatbots={allChatbots} onSelect={onSelect} />
         </ChatbotHeaderMain>
-        {chatbots.length >= 2 && (
-          <Button component="a" href={`/compare?assistants=${chatbots[0].name}%2C${chatbots[1].name}`}>
+        {allChatbots.length >= 2 && (
+          <Button component="a" href={`/compare?assistants=${allChatbots[0].name}%2C${allChatbots[1].name}`}>
             Compare
           </Button>
         )}

diff --git a/src/app/Compare/CompareLayout.tsx b/src/app/Compare/CompareLayout.tsx
@@ -13,7 +13,7 @@ import { useAppData } from '@app/AppData/AppDataContext';
 
 export const CompareLayout: React.FunctionComponent = () => {
   // information from api
-  const { chatbots } = useLoaderData() as { chatbots: CannedChatbot[] };
+  const { chatbots: initialChatbots } = useLoaderData() as { chatbots: CannedChatbot[] };
 
   // state
   const [isSendButtonDisabled, setIsSendButtonDisabled] = React.useState(true);
@@ -30,6 +30,7 @@ export const CompareLayout: React.FunctionComponent = () => {
   const [files, setFiles] = React.useState<UserFacingFile[]>([]);
   const [isLoadingFile, setIsLoadingFile] = React.useState<boolean>(false);
   const [error, setError] = React.useState<ErrorObject>();
+  const [allChatbots, setAllChatbots] = React.useState<CannedChatbot[]>(initialChatbots);
 
   // constants for search params
   const [searchParams, setSearchParams] = useSearchParams();
@@ -40,16 +41,18 @@ export const CompareLayout: React.FunctionComponent = () => {
   const { status } = useChildStatus();
 
   // context, used for panels
-  const { setChatbots } = useAppData();
+  const { chatbots: appDataChatbots } = useAppData();
 
   React.useEffect(() => {
-    setChatbots(chatbots);
-  }, [chatbots]);
+    if (appDataChatbots.length > 0) {
+      setAllChatbots(appDataChatbots);
+    }
+  }, [appDataChatbots]);
 
   React.useEffect(() => {
     document.title = `Red Hat Composer AI Studio | Compare`;
     if (assistants && assistants.length === 2) {
-      const actualChatbots = chatbots.filter(
+      const actualChatbots = allChatbots.filter(
         (chatbot) => chatbot.name === assistants[0] || chatbot.name === assistants[1],
       );
       if (actualChatbots.length === 2) {
@@ -229,7 +232,7 @@ export const CompareLayout: React.FunctionComponent = () => {
           <div className={css('compare-item', !showFirstChatbot ? 'compare-item-hidden' : undefined)}>
             <CompareChild
               chatbot={firstChatbot}
-              allChatbots={chatbots}
+              allChatbots={allChatbots}
               controller={firstController}
               setController={setFirstController}
               input={input}
@@ -246,7 +249,7 @@ export const CompareLayout: React.FunctionComponent = () => {
           <div className={css('compare-item', !showSecondChatbot ? 'compare-item-hidden' : undefined)}>
             <CompareChild
               chatbot={secondChatbot}
-              allChatbots={chatbots}
+              allChatbots={allChatbots}
               controller={secondController}
               setController={setSecondController}
               input={input}