Lightspeed: Upgrade pf chatbot version (#165)

* upgrade to the latest PF chatbot version in lightspeed * Remove temporary fix for dropdown toggle issue on click --------- Co-authored-by: Stephanie Cao <[email protected]>
redhat-developer · Jan 8, 2025 · 7b21401 · 7b21401
1 parent c3b9ab7
commit 7b21401
Show file tree

Hide file tree

Showing 9 changed files with 102 additions and 85 deletions.
diff --git a/workspaces/lightspeed/.changeset/dirty-lies-turn.md b/workspaces/lightspeed/.changeset/dirty-lies-turn.md
@@ -0,0 +1,5 @@
+---
+'@red-hat-developer-hub/backstage-plugin-lightspeed': patch
+---
+
+Upgrade to latest PF chatbot version
diff --git a/workspaces/lightspeed/plugins/lightspeed/package.json b/workspaces/lightspeed/plugins/lightspeed/package.json
@@ -44,8 +44,8 @@
     "@material-ui/core": "^4.9.13",
     "@material-ui/lab": "^4.0.0-alpha.61",
     "@mui/icons-material": "^6.1.8",
-    "@patternfly/react-core": "6.0.0-prerelease.21",
-    "@patternfly/virtual-assistant": "2.0.0-alpha.61",
+    "@patternfly/chatbot": "2.2.0-prerelease.6",
+    "@patternfly/react-core": "6.1.0-prerelease.14",
     "@red-hat-developer-hub/backstage-plugin-lightspeed-common": "workspace:^",
     "@tanstack/react-query": "^5.59.15",
     "openai": "^4.52.6",

diff --git a/workspaces/lightspeed/plugins/lightspeed/src/components/LightSpeedChat.tsx b/workspaces/lightspeed/plugins/lightspeed/src/components/LightSpeedChat.tsx
@@ -19,7 +19,6 @@ import React from 'react';
 import { ErrorPanel } from '@backstage/core-components';
 
 import { Box, makeStyles } from '@material-ui/core';
-import { DropdownItem, Title } from '@patternfly/react-core';
 import {
   Chatbot,
   ChatbotContent,
@@ -32,8 +31,9 @@ import {
   ChatbotHeaderTitle,
   MessageBar,
   MessageProps,
-} from '@patternfly/virtual-assistant';
-import ChatbotConversationHistoryNav from '@patternfly/virtual-assistant/dist/dynamic/ChatbotConversationHistoryNav';
+} from '@patternfly/chatbot';
+import ChatbotConversationHistoryNav from '@patternfly/chatbot/dist/dynamic/ChatbotConversationHistoryNav';
+import { DropdownItem, Title } from '@patternfly/react-core';
 import { useQueryClient } from '@tanstack/react-query';
 
 import { useBackstageUserIdentity } from '../hooks/useBackstageUserIdentity';
@@ -52,26 +52,16 @@ import { LightspeedChatBox } from './LightspeedChatBox';
 import { LightspeedChatBoxHeader } from './LightspeedChatBoxHeader';
 
 const useStyles = makeStyles(theme => ({
-  content: {
-    '&.pf-chatbot__content': {
-      padding: 0,
-    },
-  },
   header: {
     padding: `${theme.spacing(3)}px !important`,
   },
-  drawerActions: {
-    '&.pf-v6-c-drawer__actions': {
-      flexDirection: 'row-reverse',
-    },
-  },
   headerTitle: {
     justifyContent: 'left !important',
   },
   footer: {
-    '&.pf-chatbot__footer': {
-      padding:
-        '0 var(--pf-t--global--spacer--lg) var(--pf-t--global--spacer--lg) var(--pf-t--global--spacer--lg)',
+    '&>.pf-chatbot__footer-container': {
+      width: '95% !important',
+      maxWidth: 'unset !important',
     },
   },
 }));
@@ -176,13 +166,6 @@ export const LightspeedChat = ({
   }, [createConversation, setConversationId, setMessages]);
 
   const openDeleteModal = (conversation_id: string) => {
-    // TODO: Remove this temporary workaround and refactor once the dependency handling is updated in the future.
-    document.dispatchEvent(
-      new MouseEvent('click', {
-        bubbles: true,
-        cancelable: true,
-      }),
-    );
     setTargetConversationId(conversation_id);
     setIsDeleteModalOpen(true);
   };
@@ -323,6 +306,7 @@ export const LightspeedChat = ({
           />
         </ChatbotHeader>
         <ChatbotConversationHistoryNav
+          reverseButtonOrder
           displayMode={ChatbotDisplayMode.embedded}
           onDrawerToggle={onDrawerToggle}
           isDrawerOpen={isDrawerOpen}
@@ -334,7 +318,7 @@ export const LightspeedChat = ({
           handleTextInputChange={handleFilter}
           drawerContent={
             <>
-              <ChatbotContent className={classes.content}>
+              <ChatbotContent>
                 <LightspeedChatBox
                   userName={userName}
                   messages={messages}

diff --git a/workspaces/lightspeed/plugins/lightspeed/src/components/LightspeedChatBox.tsx b/workspaces/lightspeed/plugins/lightspeed/src/components/LightspeedChatBox.tsx
@@ -23,12 +23,15 @@ import {
   MessageBox,
   MessageProps,
   WelcomePrompt,
-} from '@patternfly/virtual-assistant';
+} from '@patternfly/chatbot';
 
 const useStyles = makeStyles(theme => ({
   prompt: {
     'justify-content': 'flex-end',
   },
+  container: {
+    maxWidth: 'unset !important',
+  },
   userMessageText: {
     '& div.pf-chatbot__message--user': {
       '& div.pf-chatbot__message-text': {
@@ -66,12 +69,13 @@ export const LightspeedChatBox = React.forwardRef(
       setCMessages(messages);
     }, [messages]);
 
+    const messageBoxClasses = `${classes.container} ${classes.userMessageText}`;
     return (
       <MessageBox
         className={
           welcomePrompts.length
-            ? `${classes.userMessageText} ${classes.prompt}`
-            : classes.userMessageText
+            ? `${messageBoxClasses} ${classes.prompt}`
+            : messageBoxClasses
         }
         announcement={announcement}
         style={{ justifyContent: 'flex-end' }}

diff --git a/workspaces/lightspeed/plugins/lightspeed/src/components/LightspeedChatBoxHeader.tsx b/workspaces/lightspeed/plugins/lightspeed/src/components/LightspeedChatBoxHeader.tsx
@@ -16,14 +16,14 @@
 
 import React from 'react';
 
+import { ChatbotHeaderActions } from '@patternfly/chatbot';
 import {
   Dropdown,
   DropdownItem,
   DropdownList,
   MenuToggle,
   MenuToggleElement,
 } from '@patternfly/react-core';
-import { ChatbotHeaderActions } from '@patternfly/virtual-assistant';
 
 type LightspeedChatBoxHeaderProps = {
   selectedModel: string;

diff --git a/workspaces/lightspeed/plugins/lightspeed/src/hooks/useConversationMessages.ts b/workspaces/lightspeed/plugins/lightspeed/src/hooks/useConversationMessages.ts
@@ -18,7 +18,7 @@ import React from 'react';
 
 import { useApi } from '@backstage/core-plugin-api';
 
-import { MessageProps } from '@patternfly/virtual-assistant';
+import { MessageProps } from '@patternfly/chatbot';
 import { useQuery } from '@tanstack/react-query';
 
 import { lightspeedApiRef } from '../api/api';
@@ -51,6 +51,8 @@ export const useFetchConversationMessages = (currentConversation: string) => {
 
 type Conversations = { [_key: string]: MessageProps[] };
 
+const defaultAvatar =
+  'https://img.freepik.com/premium-photo/graphic-designer-digital-avatar-generative-ai_934475-9292.jpg';
 /**
  * Fetches all the messages for given conversation_id
  * @param conversationId
@@ -63,7 +65,7 @@ export const useConversationMessages = (
   conversationId: string,
   userName: string | undefined,
   selectedModel: string,
-  avatar: string | undefined,
+  avatar: string = defaultAvatar,
   onComplete?: (message: string) => void,
 ) => {
   const { mutateAsync: createMessage } = useCreateConversationMessage();

diff --git a/workspaces/lightspeed/plugins/lightspeed/src/plugin.ts b/workspaces/lightspeed/plugins/lightspeed/src/plugin.ts
@@ -15,7 +15,7 @@
  */
 
 import '@patternfly/react-core/dist/styles/base.css';
-import '@patternfly/virtual-assistant/dist/css/main.css';
+import '@patternfly/chatbot/dist/css/main.css';
 
 import {
   configApiRef,

diff --git a/workspaces/lightspeed/plugins/lightspeed/src/utils/lightspeed-chatbox-utils.ts b/workspaces/lightspeed/plugins/lightspeed/src/utils/lightspeed-chatbox-utils.ts
@@ -13,8 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-
-import { Conversation } from '@patternfly/virtual-assistant';
+import { Conversation } from '@patternfly/chatbot';
 
 import { BaseMessage, ConversationList, ConversationSummary } from '../types';
 

diff --git a/workspaces/lightspeed/yarn.lock b/workspaces/lightspeed/yarn.lock
@@ -10017,41 +10017,63 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@patternfly/react-code-editor@npm:6.0.0-prerelease.21":
-  version: 6.0.0-prerelease.21
-  resolution: "@patternfly/react-code-editor@npm:6.0.0-prerelease.21"
+"@patternfly/chatbot@npm:2.2.0-prerelease.6":
+  version: 2.2.0-prerelease.6
+  resolution: "@patternfly/chatbot@npm:2.2.0-prerelease.6"
+  dependencies:
+    "@patternfly/react-code-editor": ^6.0.0
+    "@patternfly/react-core": ^6.0.0
+    "@patternfly/react-icons": ^6.0.0
+    clsx: ^2.1.0
+    framer-motion: ^11.3.28
+    path-browserify: ^1.0.1
+    react-jss: ^10.10.0
+    react-markdown: ^9.0.1
+    react-syntax-highlighter: ^15.5.0
+    react-textarea-auto-witdth-height: ^1.0.3
+    remark-gfm: ^4.0.0
+  peerDependencies:
+    react: ^17 || ^18
+    react-dom: ^17 || ^18
+  checksum: 5caccc65b4be6f6281dd00f67ff898f386d7b70d02208748da7701b2df993116e41df2b6f7559ed6932e7e1a8cd2af44bba1c9ecfdf12dc5478c9c43f923cc8d
+  languageName: node
+  linkType: hard
+
+"@patternfly/react-code-editor@npm:^6.0.0":
+  version: 6.0.0
+  resolution: "@patternfly/react-code-editor@npm:6.0.0"
   dependencies:
     "@monaco-editor/react": ^4.6.0
-    "@patternfly/react-core": ^6.0.0-prerelease.21
-    "@patternfly/react-icons": ^6.0.0-prerelease.7
-    "@patternfly/react-styles": ^6.0.0-prerelease.6
+    "@patternfly/react-core": ^6.0.0
+    "@patternfly/react-icons": ^6.0.0
+    "@patternfly/react-styles": ^6.0.0
     react-dropzone: 14.2.3
     tslib: ^2.7.0
   peerDependencies:
     react: ^17 || ^18
     react-dom: ^17 || ^18
-  checksum: 815b5601da46f219ca5fa35791743b5c8b31a0e99e4aea0371501fe4494d11fb7c3e010b608430965015a8de8e098be959f7c8b4f82900617c3cf3576382a8d7
+  checksum: 96a6f5e9c5aa2ca84a82ada2f67f961b96c34e01631447e67b67749da5f11aa26880cdf1051d6d40b5e8c47bc37c8c489240053d9b916412fa2cf9e80821b64f
   languageName: node
   linkType: hard
 
-"@patternfly/react-core@npm:6.0.0-prerelease.21":
-  version: 6.0.0-prerelease.21
-  resolution: "@patternfly/react-core@npm:6.0.0-prerelease.21"
+"@patternfly/react-core@npm:6.1.0-prerelease.14":
+  version: 6.1.0-prerelease.14
+  resolution: "@patternfly/react-core@npm:6.1.0-prerelease.14"
   dependencies:
-    "@patternfly/react-icons": ^6.0.0-prerelease.7
-    "@patternfly/react-styles": ^6.0.0-prerelease.6
-    "@patternfly/react-tokens": ^6.0.0-prerelease.7
-    focus-trap: 7.6.0
-    react-dropzone: ^14.2.3
-    tslib: ^2.7.0
+    "@patternfly/react-icons": ^6.1.0-prerelease.6
+    "@patternfly/react-styles": ^6.1.0-prerelease.5
+    "@patternfly/react-tokens": ^6.1.0-prerelease.5
+    focus-trap: 7.6.2
+    react-dropzone: ^14.3.5
+    tslib: ^2.8.1
   peerDependencies:
     react: ^17 || ^18
     react-dom: ^17 || ^18
-  checksum: 4fd63e89fb13c109421f66d074666dc3645f1bb9076c55b5cc06cc3611f166eea82a78f1bcc8c12f4918898db0602194fce32424443b7b15d53da5f5e9e98adf
+  checksum: c7430bc81f0eaf340c07859b00733de2bca97317b456424516da7598b20efdd1ba4888cb4d73e6aa6dcfd740b863990bcc9d9a2da2d438396f0558445edf6be1
   languageName: node
   linkType: hard
 
-"@patternfly/react-core@npm:^6.0.0-prerelease.21":
+"@patternfly/react-core@npm:^6.0.0":
   version: 6.0.0
   resolution: "@patternfly/react-core@npm:6.0.0"
   dependencies:
@@ -10068,59 +10090,51 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@patternfly/react-icons@npm:6.0.0-prerelease.7":
-  version: 6.0.0-prerelease.7
-  resolution: "@patternfly/react-icons@npm:6.0.0-prerelease.7"
+"@patternfly/react-icons@npm:^6.0.0":
+  version: 6.0.0
+  resolution: "@patternfly/react-icons@npm:6.0.0"
   peerDependencies:
     react: ^17 || ^18
     react-dom: ^17 || ^18
-  checksum: 7723195c064d5e8a55bd8012295330d99bf9dee2c8ddaf3d5561e4a479dd599b3cb89c88aac725eb7720cea5e17eda11163475c14606a18533e40d80795ba6c4
+  checksum: 39ddcda5a0f0a3840cc8b499a9b68f0ea133ea369a6412dfaabb38af0095ed9eef5df3171de3d0990dc0130720d4fbe3e6b28d70fdb6668c1507cd1cbdc6750d
   languageName: node
   linkType: hard
 
-"@patternfly/react-icons@npm:^6.0.0, @patternfly/react-icons@npm:^6.0.0-prerelease.7":
-  version: 6.0.0
-  resolution: "@patternfly/react-icons@npm:6.0.0"
+"@patternfly/react-icons@npm:^6.1.0-prerelease.6":
+  version: 6.1.0-prerelease.6
+  resolution: "@patternfly/react-icons@npm:6.1.0-prerelease.6"
   peerDependencies:
     react: ^17 || ^18
     react-dom: ^17 || ^18
-  checksum: 39ddcda5a0f0a3840cc8b499a9b68f0ea133ea369a6412dfaabb38af0095ed9eef5df3171de3d0990dc0130720d4fbe3e6b28d70fdb6668c1507cd1cbdc6750d
+  checksum: 3888e1c1473dcb3f0374576a3e80edf07b2fc3f95d0e7546065db017fa633ddc15865949cfdc85621275165ff8fd07718f52dcb739119f8a7b2db8fa051d32b8
   languageName: node
   linkType: hard
 
-"@patternfly/react-styles@npm:^6.0.0, @patternfly/react-styles@npm:^6.0.0-prerelease.6":
+"@patternfly/react-styles@npm:^6.0.0":
   version: 6.0.0
   resolution: "@patternfly/react-styles@npm:6.0.0"
   checksum: 40f6e169eea6b412e8bea3c220c4e29923106fa65363c5e07068db37eaa55f6088411ed0bd36c9befaa3486f108ca8d097ee39bd55276855a4387e6713d484c8
   languageName: node
   linkType: hard
 
-"@patternfly/react-tokens@npm:^6.0.0, @patternfly/react-tokens@npm:^6.0.0-prerelease.7":
+"@patternfly/react-styles@npm:^6.1.0-prerelease.5":
+  version: 6.1.0-prerelease.5
+  resolution: "@patternfly/react-styles@npm:6.1.0-prerelease.5"
+  checksum: 10db1d87adb03d51d4e22449345d7d97f996ea3ebd54e73232bed29425f6362657f95e486bb65f7513e3b5f31437ba0ea38001efc54f8ada2cfa9502b9fa9e8a
+  languageName: node
+  linkType: hard
+
+"@patternfly/react-tokens@npm:^6.0.0":
   version: 6.0.0
   resolution: "@patternfly/react-tokens@npm:6.0.0"
   checksum: 3390651a7ea0d2664adb1f760cb54e40200ac63b54269ba3f28002c01cd108c57a7bf142c894cfc510f400c950c239f93fb9ca47c00515dda44ec386b6aec972
   languageName: node
   linkType: hard
 
-"@patternfly/virtual-assistant@npm:2.0.0-alpha.61":
-  version: 2.0.0-alpha.61
-  resolution: "@patternfly/virtual-assistant@npm:2.0.0-alpha.61"
-  dependencies:
-    "@patternfly/react-code-editor": 6.0.0-prerelease.21
-    "@patternfly/react-core": 6.0.0-prerelease.21
-    "@patternfly/react-icons": 6.0.0-prerelease.7
-    clsx: ^2.1.0
-    framer-motion: ^11.3.28
-    path-browserify: ^1.0.1
-    react-jss: ^10.10.0
-    react-markdown: ^9.0.1
-    react-syntax-highlighter: ^15.5.0
-    react-textarea-auto-witdth-height: ^1.0.3
-    remark-gfm: ^4.0.0
-  peerDependencies:
-    react: ^17 || ^18
-    react-dom: ^17 || ^18
-  checksum: a23503b9db6c0556efb4d0b7234dbb868e24f0c171f81c855eac01e0643896829795075b01376e0650958c22a45368a82dea8b7c9b93346d1e9d720199b4dbc7
+"@patternfly/react-tokens@npm:^6.1.0-prerelease.5":
+  version: 6.1.0-prerelease.5
+  resolution: "@patternfly/react-tokens@npm:6.1.0-prerelease.5"
+  checksum: b6a3bcf961c3202e018994b6fd2aa601dfcd7625802679e3a3316c799145e7f672aa74559e22dadc5548e266dcf59a3bffa7128c4e892a794a5bba2baca75c7e
   languageName: node
   linkType: hard
 
@@ -10876,8 +10890,8 @@ __metadata:
     "@material-ui/core": ^4.9.13
     "@material-ui/lab": ^4.0.0-alpha.61
     "@mui/icons-material": ^6.1.8
-    "@patternfly/react-core": 6.0.0-prerelease.21
-    "@patternfly/virtual-assistant": 2.0.0-alpha.61
+    "@patternfly/chatbot": 2.2.0-prerelease.6
+    "@patternfly/react-core": 6.1.0-prerelease.14
     "@red-hat-developer-hub/backstage-plugin-lightspeed-common": "workspace:^"
     "@spotify/prettier-config": ^15.0.0
     "@tanstack/react-query": ^5.59.15
@@ -20843,6 +20857,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"focus-trap@npm:7.6.2":
+  version: 7.6.2
+  resolution: "focus-trap@npm:7.6.2"
+  dependencies:
+    tabbable: ^6.2.0
+  checksum: b5873f8e506d3f466d9823d2f144612d3938f3c74c3be3db922052e5e54fd41a3a46889f8219f16f60d1ce5aff9e0a7fef9dea03ca0da96820c2ea36243236f7
+  languageName: node
+  linkType: hard
+
 "follow-redirects@npm:^1.0.0, follow-redirects@npm:^1.15.6":
   version: 1.15.9
   resolution: "follow-redirects@npm:1.15.9"
@@ -30574,7 +30597,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-dropzone@npm:^14.2.3":
+"react-dropzone@npm:^14.2.3, react-dropzone@npm:^14.3.5":
   version: 14.3.5
   resolution: "react-dropzone@npm:14.3.5"
   dependencies: