From 3e3bcab685d00fcc59494b6697010ab789b36643 Mon Sep 17 00:00:00 2001 From: Rebecca Alpert Date: Fri, 13 Dec 2024 09:45:34 -0500 Subject: [PATCH 1/4] Update README and chatbot dep --- README.md | 8 ++++---- package-lock.json | 50 +++++++++++++++++++++++++++++++++++++---------- package.json | 2 +- 3 files changed, 45 insertions(+), 15 deletions(-) diff --git a/README.md b/README.md index c99d219..b640643 100644 --- a/README.md +++ b/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 diff --git a/package-lock.json b/package-lock.json index e012a48..2f10b90 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,7 +9,7 @@ "version": "0.0.2", "license": "MIT", "dependencies": { - "@patternfly/chatbot": "^2.1.0-prerelease.17", + "@patternfly/chatbot": "^2.1.0-prerelease.26", "@patternfly/react-core": "^6.0.0", "@patternfly/react-icons": "^6.0.0", "@patternfly/react-styles": "^6.0.0", @@ -3134,9 +3134,9 @@ } }, "node_modules/@patternfly/chatbot": { - "version": "2.1.0-prerelease.17", - "resolved": "https://registry.npmjs.org/@patternfly/chatbot/-/chatbot-2.1.0-prerelease.17.tgz", - "integrity": "sha512-fped4uypC7pci4jUgjguSo04v6h4YTow7x3Z9rU5+AjHfvE98vf7H7YAskd8wrhZOvjITHxhNiFGIZvQm4MViw==", + "version": "2.1.0-prerelease.26", + "resolved": "https://registry.npmjs.org/@patternfly/chatbot/-/chatbot-2.1.0-prerelease.26.tgz", + "integrity": "sha512-Gaw2YgA53s2dikHun6asAV+QPhjgri5stYeAIwMK9jw+GNaniNh7dQTDwuoBcTjcapN3rdK/dOL7dPS2wzDMcw==", "license": "MIT", "dependencies": { "@patternfly/react-code-editor": "^6.0.0", @@ -3192,6 +3192,35 @@ "react-dom": "^17 || ^18" } }, + "node_modules/@patternfly/react-core/node_modules/file-selector": { + "version": "2.1.2", + "resolved": "https://registry.npmjs.org/file-selector/-/file-selector-2.1.2.tgz", + "integrity": "sha512-QgXo+mXTe8ljeqUFaX3QVHc5osSItJ/Km+xpocx0aSqWGMSCf6qYs/VnzZgS864Pjn5iceMRFigeAV7AfTlaig==", + "license": "MIT", + "dependencies": { + "tslib": "^2.7.0" + }, + "engines": { + "node": ">= 12" + } + }, + "node_modules/@patternfly/react-core/node_modules/react-dropzone": { + "version": "14.3.5", + "resolved": "https://registry.npmjs.org/react-dropzone/-/react-dropzone-14.3.5.tgz", + "integrity": "sha512-9nDUaEEpqZLOz5v5SUcFA0CjM4vq8YbqO0WRls+EYT7+DvxUdzDPKNCPLqGfj3YL9MsniCLCD4RFA6M95V6KMQ==", + "license": "MIT", + "dependencies": { + "attr-accept": "^2.2.4", + "file-selector": "^2.1.0", + "prop-types": "^15.8.1" + }, + "engines": { + "node": ">= 10.13" + }, + "peerDependencies": { + "react": ">= 16.8 || 18.0.0" + } + }, "node_modules/@patternfly/react-icons": { "version": "6.0.0", "resolved": "https://registry.npmjs.org/@patternfly/react-icons/-/react-icons-6.0.0.tgz", @@ -5160,9 +5189,10 @@ } }, "node_modules/attr-accept": { - "version": "2.2.2", - "resolved": "https://registry.npmjs.org/attr-accept/-/attr-accept-2.2.2.tgz", - "integrity": "sha512-7prDjvt9HmqiZ0cl5CRjtS84sEyhsHP2coDkaZKRKVfCDo9s7iw7ChVmar78Gu9pC4SoR/28wFu/G5JJhTnqEg==", + "version": "2.2.5", + "resolved": "https://registry.npmjs.org/attr-accept/-/attr-accept-2.2.5.tgz", + "integrity": "sha512-0bDNnY/u6pPwHDMoF0FieU354oBi0a8rD9FcsLwzcGWbc8KS8KPIi7y+s13OlVY+gMWc/9xEMUgNE6Qm8ZllYQ==", + "license": "MIT", "engines": { "node": ">=4" } @@ -20539,9 +20569,9 @@ } }, "node_modules/tslib": { - "version": "2.7.0", - "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.7.0.tgz", - "integrity": "sha512-gLXCKdN1/j47AiHiOkJN69hJmcbGTHI0ImLmbYLHykhgeN0jVGola9yVjFgzCUklsZQMW55o+dW7IXv3RCXDzA==", + "version": "2.8.1", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz", + "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==", "license": "0BSD" }, "node_modules/tty-browserify": { diff --git a/package.json b/package.json index 5d11990..a0c9ab5 100644 --- a/package.json +++ b/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", From 48b9e0530383b8523ccc5c66b63ec25584d77f14 Mon Sep 17 00:00:00 2001 From: Rebecca Alpert Date: Fri, 13 Dec 2024 09:50:41 -0500 Subject: [PATCH 2/4] Update header selection --- src/app/HeaderDropdown/HeaderDropdown.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/app/HeaderDropdown/HeaderDropdown.tsx b/src/app/HeaderDropdown/HeaderDropdown.tsx index 4ba3ed6..07fc24a 100644 --- a/src/app/HeaderDropdown/HeaderDropdown.tsx +++ b/src/app/HeaderDropdown/HeaderDropdown.tsx @@ -54,6 +54,7 @@ export const HeaderDropdown: React.FunctionComponent = ({ } }; + const selectedChatbotName = selectedChatbot?.displayName ?? selectedChatbot?.name; return ( = ({ toggle={(toggleRef: React.Ref) => { return ( - Red Hat AI Assistant + {selectedChatbotName ?? 'Red Hat AI Assistant'} ); }} From 92f5129994b1cf01aa25cc82bbddfcf2792e8a2c Mon Sep 17 00:00:00 2001 From: Rebecca Alpert Date: Fri, 13 Dec 2024 10:04:50 -0500 Subject: [PATCH 3/4] Fix expanding text input spacing --- src/app/FlyoutForm/ExpandingTextInputs.tsx | 2 +- src/app/app.css | 6 ++++++ 2 files changed, 7 insertions(+), 1 deletion(-) diff --git a/src/app/FlyoutForm/ExpandingTextInputs.tsx b/src/app/FlyoutForm/ExpandingTextInputs.tsx index 055f9f5..cbd2d1f 100644 --- a/src/app/FlyoutForm/ExpandingTextInputs.tsx +++ b/src/app/FlyoutForm/ExpandingTextInputs.tsx @@ -53,7 +53,7 @@ export const ExpandingTextInputs: React.FunctionComponent {values.length > 0 && ( -
+
{values.map((value, index) => { return (
diff --git a/src/app/app.css b/src/app/app.css index 6ae1c5d..6c627a1 100644 --- a/src/app/app.css +++ b/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; From 0aa59ed292594f7336ea7ca5a67ea3217d167c1e Mon Sep 17 00:00:00 2001 From: Rebecca Alpert Date: Fri, 13 Dec 2024 10:08:39 -0500 Subject: [PATCH 4/4] Update dropdown menus when new assistant is created --- src/app/BaseChatbot/BaseChatbot.test.tsx | 2 +- src/app/BaseChatbot/BaseChatbot.tsx | 22 ++++++++-------------- src/app/Compare/CompareLayout.tsx | 17 ++++++++++------- 3 files changed, 19 insertions(+), 22 deletions(-) diff --git a/src/app/BaseChatbot/BaseChatbot.test.tsx b/src/app/BaseChatbot/BaseChatbot.test.tsx index 1c2e8c6..fe7076a 100644 --- a/src/app/BaseChatbot/BaseChatbot.test.tsx +++ b/src/app/BaseChatbot/BaseChatbot.test.tsx @@ -50,7 +50,7 @@ describe('Base chatbot', () => { , ); - 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.'); diff --git a/src/app/BaseChatbot/BaseChatbot.tsx b/src/app/BaseChatbot/BaseChatbot.tsx index a47e11c..ed5be62 100644 --- 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([]); const [currentMessage, setCurrentMessage] = React.useState([]); @@ -48,17 +43,16 @@ const BaseChatbot: React.FunctionComponent = () => { const [hasStopButton, setHasStopButton] = React.useState(false); const [files, setFiles] = React.useState([]); const [isLoadingFile, setIsLoadingFile] = React.useState(false); + const [allChatbots, setAllChatbots] = React.useState(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 = () => { - + - {chatbots.length >= 2 && ( - )} diff --git a/src/app/Compare/CompareLayout.tsx b/src/app/Compare/CompareLayout.tsx index 531763e..bc824a5 100644 --- 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([]); const [isLoadingFile, setIsLoadingFile] = React.useState(false); const [error, setError] = React.useState(); + const [allChatbots, setAllChatbots] = React.useState(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 = () => {
{