Fix(Lightspeeed): Upgrade PF chatbot in lightspeed (#878)

* upgrade patternfly chatbot

* fix typo in prompts

* add changeset

* udpate e2e tests

Author: karthikjeeyar

workspaces/lightspeed/.changeset/violet-avocados-call.md

@@ -0,0 +1,5 @@
+---
+'@red-hat-developer-hub/backstage-plugin-lightspeed': patch
+---
+
+Upgrade PF chatbot

workspaces/lightspeed/packages/app/e2e-tests/utils/testHelper.ts

@@ -28,5 +28,5 @@ export const sendMessage = async (message: string, page: Page) => {
   const inputLocator = page.getByRole('textbox').first();
   await inputLocator.waitFor({ state: 'visible' });
   await inputLocator.fill(message);
-  await page.locator('button[aria-label="Send button"]').click();
+  await page.locator('button[aria-label="Send"]').click();
 };

workspaces/lightspeed/plugins/lightspeed/package.json

@@ -44,7 +44,7 @@
     "@material-ui/core": "^4.9.13",
     "@material-ui/lab": "^4.0.0-alpha.61",
     "@mui/icons-material": "^6.1.8",
-    "@patternfly/chatbot": "6.3.0-prerelease.10",
+    "@patternfly/chatbot": "6.3.0-prerelease.17",
     "@patternfly/react-core": "6.3.0-prerelease.4",
     "@red-hat-developer-hub/backstage-plugin-lightspeed-common": "workspace:^",
     "@tanstack/react-query": "^5.59.15",

workspaces/lightspeed/plugins/lightspeed/src/components/Attachment.tsx

@@ -15,6 +15,7 @@
  */
 import React from 'react';
 
+import { makeStyles } from '@material-ui/core';
 import {
   AttachmentEdit,
   ChatbotDisplayMode,
@@ -23,13 +24,22 @@ import {
 
 import { useFileAttachmentContext } from './AttachmentContext';
 
+const useStyles = makeStyles(() => ({
+  modalFooter: {
+    '&>button': {
+      width: '12% !important',
+    },
+  },
+}));
 const Attachment = () => {
   const {
     currentFileContent,
     setFileContents,
     modalState,
     setCurrentFileContent,
   } = useFileAttachmentContext();
+  const classes = useStyles();
+
   if (!currentFileContent) {
     return null;
   }
@@ -49,6 +59,8 @@ const Attachment = () => {
         code={currentFileContent?.content}
         fileName={currentFileContent?.name}
         isModalOpen={isPreviewModalOpen}
+        secondaryActionButtonText="Close"
+        modalFooterClassName={classes.modalFooter}
         onEdit={() => {
           setIsPreviewModalOpen(false);
           setIsEditModalOpen(true);
@@ -65,6 +77,7 @@ const Attachment = () => {
         code={currentFileContent?.content}
         fileName={currentFileContent?.name}
         isModalOpen={isEditModalOpen}
+        modalFooterClassName={classes.modalFooter}
         onSave={(_, content) => {
           setCurrentFileContent({
             ...currentFileContent,

workspaces/lightspeed/plugins/lightspeed/src/components/LightspeedChatBox.tsx

@@ -23,6 +23,7 @@ import {
   ChatbotWelcomePrompt,
   Message,
   MessageBox,
+  MessageBoxHandle,
   MessageProps,
   WelcomePrompt,
 } from '@patternfly/chatbot';
@@ -81,7 +82,7 @@ export const LightspeedChatBox = React.forwardRef(
   ) => {
     const classes = useStyles();
     const scrollQueued = React.useRef(false);
-    const containerRef = React.useRef<HTMLDivElement>(null);
+    const containerRef = React.useRef<MessageBoxHandle>(null);
 
     const configApi = useApi(configApiRef);
     const questionValidationEnabled =

workspaces/lightspeed/plugins/lightspeed/src/const.ts

@@ -56,7 +56,7 @@ export const DEFAULT_SAMPLE_PROMPTS: SamplePrompts = [
   ),
   createPrompt(
     'Demystify Sorting Algorithms',
-    'Can you explain the difference between a quicksort and a mergesort algorithm, and when to use each?',
+    'Can you explain the difference between a quicksort and a merge sort algorithm, and when to use each?',
   ),
   createPrompt(
     'Understand Event-Driven Architecture',

workspaces/lightspeed/yarn.lock

@@ -9695,9 +9695,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@patternfly/chatbot@npm:6.3.0-prerelease.10":
-  version: 6.3.0-prerelease.10
-  resolution: "@patternfly/chatbot@npm:6.3.0-prerelease.10"
+"@patternfly/chatbot@npm:6.3.0-prerelease.17":
+  version: 6.3.0-prerelease.17
+  resolution: "@patternfly/chatbot@npm:6.3.0-prerelease.17"
   dependencies:
     "@patternfly/react-code-editor": ^6.1.0
     "@patternfly/react-core": ^6.1.0
@@ -9714,10 +9714,11 @@ __metadata:
     rehype-sanitize: ^6.0.0
     rehype-unwrap-images: ^1.0.0
     remark-gfm: ^4.0.0
+    unist-util-visit: ^5.0.0
   peerDependencies:
-    react: ^17 || ^18
-    react-dom: ^17 || ^18
-  checksum: d78d6c9eb3c4f2005ecaf63ed5354ec07101cbbaf93e9cb1d819a7921fef221b11e38d7be3723c9b0b633fc92b991f459554b94c04687e45c56ee9acf12335a7
+    react: ^17 || ^18 || ^19
+    react-dom: ^17 || ^18 || ^19
+  checksum: f29492ae053f6bcd90267eff96585c6fdf2eca52f8252ced0cc1b6579678df976d8d4d1d1b5aedea42dcfe64b6a865743c5af816d1d2620bc3231e82d5d5aa09
   languageName: node
   linkType: hard
 
@@ -10590,7 +10591,7 @@ __metadata:
     "@material-ui/core": ^4.9.13
     "@material-ui/lab": ^4.0.0-alpha.61
     "@mui/icons-material": ^6.1.8
-    "@patternfly/chatbot": 6.3.0-prerelease.10
+    "@patternfly/chatbot": 6.3.0-prerelease.17
     "@patternfly/react-core": 6.3.0-prerelease.4
     "@red-hat-developer-hub/backstage-plugin-lightspeed-common": "workspace:^"
     "@spotify/prettier-config": ^15.0.0