Merge pull request #21 from rebeccaalpert/small-fixes

Update README and chatbot dep

README.md

@@ -13,10 +13,10 @@ Out of the box you'll get an app layout with chrome (header/sidebar), routing, b
 Create a .env file with the following values (ask for the real URLs)
 
 ```
-REACT_APP_ROUTER_URL=''
-REACT_APP_INFO_URL=''
-REACT_APP_RETRIEVER_URL=''
-REACT_APP_LLM_URL=''
+REACT_APP_ROUTER_URL='http://localhost:8080/assistant/chat/streaming'
+REACT_APP_INFO_URL='http://localhost:8080/admin/assistant'
+REACT_APP_RETRIEVER_URL='http://localhost:8080/admin/assistant/retrieverConnection'
+REACT_APP_LLM_URL='http://localhost:8080/admin/assistant/llm'
 ```
 
 ```bash

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/chatbot": "^2.1.0-prerelease.17",
+    "@patternfly/chatbot": "^2.1.0-prerelease.26",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "sirv-cli": "^2.0.2",

src/app/BaseChatbot/BaseChatbot.test.tsx

@@ -50,7 +50,7 @@ describe('Base chatbot', () => {
         <RouterProvider router={router} />
       </AppDataProvider>,
     );
-    screen.getByText('Red Hat AI Assistant');
+    screen.getByText('Test');
     screen.getByText('Hello, Chatbot User');
     screen.getByText('How may I help you today?');
     screen.getByText('Verify all information from this tool. LLMs make mistakes.');

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>
         )}

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}

src/app/FlyoutForm/ExpandingTextInputs.tsx

@@ -53,7 +53,7 @@ export const ExpandingTextInputs: React.FunctionComponent<ExpandingTextInputsPro
         </Button>
       </div>
       {values.length > 0 && (
-        <section aria-label="Example questions" tabIndex={-1}>
+        <section className="expanding-text-input__section" aria-label="Example questions" tabIndex={-1}>
           {values.map((value, index) => {
             return (
               <div key={index} className="expanding-text-inputs__row expanding-text-input__row-with-background">

src/app/HeaderDropdown/HeaderDropdown.tsx

@@ -54,6 +54,7 @@ export const HeaderDropdown: React.FunctionComponent<HeaderDropdownProps> = ({
     }
   };
 
+  const selectedChatbotName = selectedChatbot?.displayName ?? selectedChatbot?.name;
   return (
     <Dropdown
       className="assistant-selector-menu"
@@ -67,7 +68,7 @@ export const HeaderDropdown: React.FunctionComponent<HeaderDropdownProps> = ({
       toggle={(toggleRef: React.Ref<MenuToggleElement>) => {
         return (
           <MenuToggle ref={toggleRef} onClick={onToggleClick} isExpanded={isOpen}>
-            Red Hat AI Assistant
+            {selectedChatbotName ?? 'Red Hat AI Assistant'}
           </MenuToggle>
         );
       }}

src/app/app.css

@@ -552,6 +552,12 @@ pf-v6-c-page__main-container.pf-m-fill {
   position: relative;
 }
 
+.expanding-text-input__section {
+  display: flex;
+  gap: var(--pf-t--global--spacer--sm);
+  flex-direction: column;
+}
+
 .hidden {
   position: absolute;
   opacity: 0;