@red-hat-developer-hub/backstage-plugin-lightspeed 2.6.7 → 2.7.0

package/dist/components/LightSpeedChat.esm.js

@@ -5,7 +5,7 @@ import { Button, makeStyles } from '@material-ui/core';
 import { ChatbotDisplayMode, ChatbotContent, ChatbotFooter, MessageBar, ChatbotFootnote, Settings, Chatbot, ChatbotHeader, ChatbotHeaderMain, ChatbotHeaderMenu, ChatbotHeaderTitle, FileDropZone, ChatbotAlert } from '@patternfly/chatbot';
 import ChatbotConversationHistoryNav from '@patternfly/chatbot/dist/dynamic/ChatbotConversationHistoryNav';
 import { DropdownItem, Tooltip, MenuToggle, Select, SelectList, SelectOption, AlertGroup, Alert, AlertVariant, AlertActionCloseButton, Title, Tabs, Tab } from '@patternfly/react-core';
-import { SortAmountDownAltIcon, SortAmountDownIcon, SearchIcon, PlusIcon } from '@patternfly/react-icons';
+import { SortAmountDownAltIcon, SortAmountDownIcon, PlusIcon, SearchIcon } from '@patternfly/react-icons';
 import { useQueryClient } from '@tanstack/react-query';
 import { UNTITLED_NOTEBOOK_NAME, TEMP_CONVERSATION_ID, supportedFileTypes } from '../const.esm.js';
 import '@backstage/core-plugin-api';
@@ -31,15 +31,18 @@ import { useNotebookDocuments } from '../hooks/notebooks/useNotebookDocuments.es
 import { useLightspeedDrawerContext } from '../hooks/useLightspeedDrawerContext.esm.js';
 import { useLightspeedUpdatePermission } from '../hooks/useLightspeedUpdatePermission.esm.js';
 import { useWelcomePrompts } from '../hooks/useWelcomePrompts.esm.js';
+import logo from '../images/logo.svg';
 import { getAttachments } from '../utils/attachment-utils.esm.js';
 import { getCategorizeMessages, getFootnoteProps } from '../utils/lightspeed-chatbox-utils.esm.js';
 import Attachment from './Attachment.esm.js';
 import { useFileAttachmentContext } from './AttachmentContext.esm.js';
+import { EditSquareIcon, CollapsedHistoryStrip } from './CollapsedHistoryStrip.esm.js';
 import { DeleteModal } from './DeleteModal.esm.js';
 import FilePreview from './FilePreview.esm.js';
 import { LightspeedChatBox } from './LightspeedChatBox.esm.js';
 import { LightspeedChatBoxHeader } from './LightspeedChatBoxHeader.esm.js';
 import { McpServersSettings } from './McpServersSettings.esm.js';
+import { MessageBarModelSelector } from './MessageBarModelSelector.esm.js';
 import { DeleteNotebookModal } from './notebooks/DeleteNotebookModal.esm.js';
 import { NotebooksTab } from './notebooks/NotebooksTab.esm.js';
 import { NotebookView } from './notebooks/NotebookView.esm.js';
@@ -47,6 +50,12 @@ import { RenameNotebookModal } from './notebooks/RenameNotebookModal.esm.js';
 import PermissionRequiredState from './PermissionRequiredState.esm.js';
 import { RenameConversationModal } from './RenameConversationModal.esm.js';
 
+const COLLAPSE_PANEL_ICON_SVG = `url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16 21V3H14V21H16ZM12 17V7L7 12L12 17Z' fill='black'/%3E%3C/svg%3E") no-repeat center`;
+const ConditionalWrapper = ({
+  condition,
+  wrapper,
+  children
+}) => condition ? wrapper(children) : children;
 const useStyles = makeStyles((theme) => ({
   body: {
     // remove default margin and padding from common elements
@@ -58,7 +67,8 @@ const useStyles = makeStyles((theme) => ({
   header: {
     padding: `${theme.spacing(3)}px ${theme.spacing(3)}px 0 ${theme.spacing(
       3
-    )}px !important`
+    )}px !important`,
+    backgroundColor: "var(--pf-t--global--background--color--floating--default) !important"
   },
   errorContainer: {
     padding: theme.spacing(3)
@@ -68,7 +78,9 @@ const useStyles = makeStyles((theme) => ({
     rowGap: 0,
     columnGap: 0,
     "--pf-v6-c-multiple-file-upload--Gap": "0",
-    "--pf-v5-c-multiple-file-upload--Gap": "0"
+    "--pf-v5-c-multiple-file-upload--Gap": "0",
+    flex: 1,
+    minWidth: 0
   },
   headerMenu: {
     // align hamburger icon with title
@@ -77,11 +89,23 @@ const useStyles = makeStyles((theme) => ({
       alignItems: "center"
     }
   },
+  headerLogo: {
+    width: 48,
+    height: 48,
+    marginRight: theme.spacing(1.5),
+    flexShrink: 0
+  },
   headerTitle: {
-    justifyContent: "left !important"
+    justifyContent: "left !important",
+    "& h1": {
+      fontSize: "32px !important",
+      fontWeight: "700 !important",
+      lineHeight: "36.4px !important",
+      fontFamily: '"Red Hat Display", sans-serif !important'
+    }
   },
   tabs: {
-    padding: `${theme.spacing(2)}px ${theme.spacing(3)}px 0`,
+    padding: `0 ${theme.spacing(2)}px`,
     backgroundColor: "var(--pf-t--global--background--color--floating--default)",
     "& .pf-v6-c-tabs__item, & .pf-v5-c-tabs__item": {
       backgroundColor: "transparent"
@@ -103,6 +127,11 @@ const useStyles = makeStyles((theme) => ({
   tabsDivider: {
     borderTop: "1px solid var(--pf-t--global--border--color--default)"
   },
+  headerDivider: {
+    paddingTop: 8,
+    borderBottom: "1px solid var(--pf-t--global--border--color--default)",
+    backgroundColor: "var(--pf-t--global--background--color--floating--default)"
+  },
   notebooksContainer: {
     padding: theme.spacing(3),
     height: "100%",
@@ -249,6 +278,23 @@ const useStyles = makeStyles((theme) => ({
       backgroundColor: theme.palette.grey[300]
     }
   },
+  fullscreenFooter: {
+    "&>.pf-chatbot__footer-container": {
+      width: "100% !important",
+      padding: theme.spacing(1.5),
+      maxWidth: "unset !important",
+      margin: "0 auto"
+    }
+  },
+  fullscreenMessageBar: {
+    backgroundColor: "var(--pf-t--global--background--color--secondary--default)",
+    border: "1px solid var(--pf-t--global--border--color--default)",
+    borderRadius: 24,
+    padding: theme.spacing(0.5),
+    "&::after": {
+      display: "none"
+    }
+  },
   sortDropdown: {
     padding: 0,
     margin: 0
@@ -354,7 +400,10 @@ const useStyles = makeStyles((theme) => ({
     flexDirection: "column",
     minHeight: 0,
     width: "100%",
-    minWidth: 0
+    minWidth: 0,
+    whiteSpace: "normal",
+    wordBreak: "break-word",
+    overflowWrap: "break-word"
   },
   mcpSettingsPane: {
     width: "100%",
@@ -363,7 +412,8 @@ const useStyles = makeStyles((theme) => ({
     backgroundColor: "var(--pf-v6-c-table--BackgroundColor, var(--pf-t--global--background--color--primary--default))",
     display: "flex",
     flexDirection: "column",
-    minHeight: 0
+    minHeight: 0,
+    overflow: "auto"
   },
   mcpCollapsedDrawerOrderFix: {
     "& .pf-v6-c-drawer.pf-m-panel-left > .pf-v6-c-drawer__main > .pf-v6-c-drawer__content, & .pf-v5-c-drawer.pf-m-panel-left > .pf-v5-c-drawer__main > .pf-v5-c-drawer__content": {
@@ -374,6 +424,68 @@ const useStyles = makeStyles((theme) => ({
       opacity: 0,
       transition: "none !important"
     }
+  },
+  // TODO: These PatternFly drawer overrides are needed because PF Chatbot doesn't
+  // provide clean APIs for custom expand/collapse icons and positioning.
+  // Remove once PatternFly supports these features.
+  // See: https://github.com/patternfly/chatbot/issues/834
+  fullscreenChatLayout: {
+    display: "flex",
+    flexDirection: "row",
+    flex: 1,
+    minHeight: 0,
+    height: "100%",
+    width: "100%",
+    "& .pf-v6-c-drawer, & .pf-v5-c-drawer": {
+      flex: 1,
+      minWidth: 0
+    },
+    "& .pf-v6-c-drawer__content, & .pf-v5-c-drawer__content": {
+      flex: 1,
+      minWidth: 0
+    },
+    "& .pf-v6-c-drawer:not(.pf-m-expanded) > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel, & .pf-v5-c-drawer:not(.pf-m-expanded) > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel": {
+      display: "none"
+    },
+    "& .pf-v6-c-drawer__close, & .pf-v5-c-drawer__close": {
+      marginTop: -48,
+      marginRight: -24
+    },
+    "& .pf-v6-c-drawer__close .pf-v6-c-button svg, & .pf-v5-c-drawer__close .pf-v5-c-button svg": {
+      display: "none"
+    },
+    "& .pf-v6-c-drawer__close .pf-v6-c-button, & .pf-v5-c-drawer__close .pf-v5-c-button": {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      "&::before": {
+        content: '""',
+        display: "block",
+        width: 24,
+        height: 24,
+        mask: COLLAPSE_PANEL_ICON_SVG,
+        WebkitMask: COLLAPSE_PANEL_ICON_SVG,
+        backgroundColor: "currentColor"
+      }
+    },
+    "& .pf-chatbot__menu-item": {
+      cursor: "pointer"
+    },
+    "& .pf-chatbot__menu-item .pf-v6-c-menu-toggle, & .pf-chatbot__menu-item .pf-v5-c-menu-toggle": {
+      opacity: 0,
+      transition: "opacity 0.15s ease-in-out"
+    },
+    "& .pf-chatbot__menu-item:hover .pf-v6-c-menu-toggle, & .pf-chatbot__menu-item:hover .pf-v5-c-menu-toggle": {
+      opacity: 1
+    }
+  },
+  fullscreenMainContent: {
+    display: "flex",
+    flexDirection: "column",
+    flex: 1,
+    minHeight: 0,
+    minWidth: 0,
+    overflow: "hidden"
   }
 }));
 const LightspeedChat = ({
@@ -1275,43 +1387,67 @@ const LightspeedChat = ({
         )
       }
     ),
-    /* @__PURE__ */ jsxs(ChatbotFooter, { className: classes.footer, children: [
-      /* @__PURE__ */ jsx(FilePreview, {}),
-      /* @__PURE__ */ jsx(
-        MessageBar,
-        {
-          onSendMessage: sendMessage,
-          isSendButtonDisabled,
-          hasAttachButton: true,
-          handleAttach,
-          hasMicrophoneButton: true,
-          value: draftMessage,
-          onChange: handleDraftMessage,
-          hasStopButton: streamingUiMatchesView,
-          handleStopButton: streamingUiMatchesView ? handleStopButton : void 0,
-          buttonProps: {
-            attach: {
-              inputTestId: "attachment-input",
-              tooltipContent: t("tooltip.attach")
-            },
-            microphone: {
-              tooltipContent: {
-                active: t("tooltip.microphone.active"),
-                inactive: t("tooltip.microphone.inactive")
-              }
+    /* @__PURE__ */ jsxs(
+      ChatbotFooter,
+      {
+        className: isFullscreenMode ? `${classes.footer} ${classes.fullscreenFooter}` : classes.footer,
+        children: [
+          /* @__PURE__ */ jsx(FilePreview, {}),
+          /* @__PURE__ */ jsx(
+            MessageBar,
+            {
+              className: isFullscreenMode ? classes.fullscreenMessageBar : void 0,
+              onSendMessage: sendMessage,
+              isSendButtonDisabled,
+              hasAttachButton: true,
+              attachButtonPosition: isFullscreenMode ? "start" : void 0,
+              handleAttach,
+              hasMicrophoneButton: true,
+              value: draftMessage,
+              onChange: handleDraftMessage,
+              hasStopButton: streamingUiMatchesView,
+              handleStopButton: streamingUiMatchesView ? handleStopButton : void 0,
+              buttonProps: {
+                attach: {
+                  inputTestId: "attachment-input",
+                  tooltipContent: t("tooltip.attach"),
+                  "aria-label": t("tooltip.attach"),
+                  ...isFullscreenMode && { icon: /* @__PURE__ */ jsx(PlusIcon, {}) }
+                },
+                microphone: {
+                  tooltipContent: {
+                    active: t("tooltip.microphone.active"),
+                    inactive: t("tooltip.microphone.inactive")
+                  }
+                },
+                send: {
+                  tooltipContent: t("tooltip.send")
+                }
+              },
+              additionalActions: isFullscreenMode ? /* @__PURE__ */ jsx(
+                MessageBarModelSelector,
+                {
+                  selectedModel,
+                  models,
+                  onSelect: (item) => {
+                    setIsMcpSettingsOpen(false);
+                    onNewChat();
+                    handleSelectedModel(item);
+                  },
+                  disabled: isSendButtonDisabled
+                }
+              ) : void 0,
+              forceMultilineLayout: isFullscreenMode,
+              allowedFileTypes: supportedFileTypes,
+              onAttachRejected,
+              placeholder: t("chatbox.message.placeholder")
             },
-            send: {
-              tooltipContent: t("tooltip.send")
-            }
-          },
-          allowedFileTypes: supportedFileTypes,
-          onAttachRejected,
-          placeholder: t("chatbox.message.placeholder")
-        },
-        messageBarKey
-      ),
-      /* @__PURE__ */ jsx(ChatbotFootnote, { ...getFootnoteProps(t) })
-    ] })
+            messageBarKey
+          ),
+          /* @__PURE__ */ jsx(ChatbotFootnote, { ...getFootnoteProps(t) })
+        ]
+      }
+    )
   ] });
   const mcpSettingsPanel = /* @__PURE__ */ jsx(
     McpServersSettings,
@@ -1349,6 +1485,8 @@ const LightspeedChat = ({
     drawerPanelStyle = { zIndex: 1300 };
   } else if (isMcpSettingsOpen) {
     drawerPanelStyle = { width: 320, minWidth: 320, maxWidth: 320 };
+  } else {
+    drawerPanelStyle = { minWidth: 232, maxWidth: 400 };
   }
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     notebookAlerts.length > 0 && /* @__PURE__ */ jsx(
@@ -1423,7 +1561,7 @@ const LightspeedChat = ({
         children: [
           /* @__PURE__ */ jsxs(ChatbotHeader, { className: classes.header, children: [
             /* @__PURE__ */ jsxs(ChatbotHeaderMain, { children: [
-              showChatPanel && /* @__PURE__ */ jsx(
+              showChatPanel && !isFullscreenMode && /* @__PURE__ */ jsx(
                 ChatbotHeaderMenu,
                 {
                   "aria-expanded": isChatHistoryDrawerOpen,
@@ -1433,7 +1571,17 @@ const LightspeedChat = ({
                   "aria-label": t("aria.chatHistoryMenu")
                 }
               ),
-              isFullscreenMode && /* @__PURE__ */ jsx(ChatbotHeaderTitle, { className: classes.headerTitle, children: /* @__PURE__ */ jsx(Title, { headingLevel: "h1", size: "3xl", children: t("chatbox.header.title") }) })
+              isFullscreenMode && /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsx(
+                  "img",
+                  {
+                    src: logo,
+                    alt: t("icon.lightspeed.alt"),
+                    className: classes.headerLogo
+                  }
+                ),
+                /* @__PURE__ */ jsx(ChatbotHeaderTitle, { className: classes.headerTitle, children: /* @__PURE__ */ jsx(Title, { headingLevel: "h1", size: "3xl", children: t("chatbox.header.title") }) })
+              ] })
             ] }),
             /* @__PURE__ */ jsx(
               LightspeedChatBoxHeader,
@@ -1447,7 +1595,7 @@ const LightspeedChat = ({
                 models,
                 isPinningChatsEnabled,
                 isModelSelectorDisabled: isSendButtonDisabled,
-                hideModelSelector: showNotebooksPanel,
+                hideModelSelector: showNotebooksPanel || isFullscreenMode,
                 showChatTabOptions: !showNotebooksPanel,
                 setDisplayMode: setDisplayModeFromHeader,
                 displayMode,
@@ -1456,6 +1604,7 @@ const LightspeedChat = ({
               }
             )
           ] }),
+          isFullscreenMode && /* @__PURE__ */ jsx("div", { className: classes.headerDivider }),
           isFullscreenMode && /* @__PURE__ */ jsxs(Fragment, { children: [
             /* @__PURE__ */ jsxs(
               Tabs,
@@ -1473,69 +1622,86 @@ const LightspeedChat = ({
             /* @__PURE__ */ jsx("div", { className: classes.tabsDivider })
           ] }),
           showChatPanel && /* @__PURE__ */ jsx(
-            ChatbotConversationHistoryNav,
+            ConditionalWrapper,
             {
-              drawerPanelContentProps: {
-                isResizable: isFullscreenMode,
-                hasNoBorder: !isFullscreenMode,
-                style: drawerPanelStyle
-              },
-              reverseButtonOrder: true,
-              displayMode: ChatbotDisplayMode.embedded,
-              onDrawerToggle: onChatHistoryDrawerToggle,
-              title: "",
-              navTitleIcon: null,
-              isDrawerOpen: isChatHistoryDrawerOpen,
-              drawerCloseButtonProps: {
-                "aria-label": t("aria.closeDrawerPanel")
-              },
-              setIsDrawerOpen: setIsChatHistoryDrawerOpen,
-              activeItemId: viewConversationId,
-              onSelectActiveItem,
-              conversations: filterConversations(filterValue),
-              onNewChat: newChatCreated ? void 0 : onNewChat,
-              newChatButtonText: t("button.newChat"),
-              newChatButtonProps: {
-                icon: /* @__PURE__ */ jsx(PlusIcon, {})
-              },
-              handleTextInputChange: handleFilter,
-              searchInputPlaceholder: t("chatbox.search.placeholder"),
-              searchInputAriaLabel: t("aria.search.placeholder"),
-              searchInputProps: {
-                value: filterValue,
-                onClear: () => {
-                  setFilterValue("");
-                }
-              },
-              searchActionEnd: sortDropdown,
-              noResultsState: filterValue && Object.keys(filterConversations(filterValue)).length === 0 ? {
-                bodyText: t("chatbox.emptyState.noResults.body"),
-                titleText: t("chatbox.emptyState.noResults.title"),
-                icon: SearchIcon
-              } : void 0,
-              drawerContent: /* @__PURE__ */ jsxs(
-                FileDropZone,
+              condition: isFullscreenMode,
+              wrapper: (children) => /* @__PURE__ */ jsxs("div", { className: classes.fullscreenChatLayout, children: [
+                !isChatHistoryDrawerOpen && /* @__PURE__ */ jsx(
+                  CollapsedHistoryStrip,
+                  {
+                    onExpand: () => setIsChatHistoryDrawerOpen(true),
+                    onNewChat,
+                    newChatDisabled: newChatCreated
+                  }
+                ),
+                children
+              ] }),
+              children: /* @__PURE__ */ jsx(
+                ChatbotConversationHistoryNav,
                 {
-                  className: classes.drawerFileDropZone,
-                  onFileDrop: (e, data) => handleAttach(data, e),
+                  drawerPanelContentProps: {
+                    isResizable: isFullscreenMode,
+                    hasNoBorder: !isFullscreenMode,
+                    style: drawerPanelStyle
+                  },
+                  reverseButtonOrder: true,
                   displayMode: ChatbotDisplayMode.embedded,
-                  infoText: t("chatbox.fileUpload.infoText"),
-                  allowedFileTypes: supportedFileTypes,
-                  onAttachRejected,
-                  children: [
-                    showAlert && uploadError.message && /* @__PURE__ */ jsx("div", { className: classes.errorContainer, children: /* @__PURE__ */ jsx(
-                      ChatbotAlert,
-                      {
-                        component: "h4",
-                        title: t("chatbox.fileUpload.failed"),
-                        variant: uploadError.type ?? "danger",
-                        isInline: true,
-                        onClose: () => setUploadError({ message: null }),
-                        children: uploadError.message
-                      }
-                    ) }),
-                    mainPanelContent
-                  ]
+                  onDrawerToggle: onChatHistoryDrawerToggle,
+                  title: "",
+                  navTitleIcon: null,
+                  isDrawerOpen: isChatHistoryDrawerOpen,
+                  drawerCloseButtonProps: {
+                    "aria-label": t("aria.closeDrawerPanel")
+                  },
+                  setIsDrawerOpen: setIsChatHistoryDrawerOpen,
+                  activeItemId: viewConversationId,
+                  onSelectActiveItem,
+                  conversations: filterConversations(filterValue),
+                  onNewChat: newChatCreated ? void 0 : onNewChat,
+                  newChatButtonText: t("button.newChat"),
+                  newChatButtonProps: {
+                    icon: isFullscreenMode ? /* @__PURE__ */ jsx(EditSquareIcon, {}) : /* @__PURE__ */ jsx(PlusIcon, {})
+                  },
+                  handleTextInputChange: handleFilter,
+                  searchInputPlaceholder: t("chatbox.search.placeholder"),
+                  searchInputAriaLabel: t("aria.search.placeholder"),
+                  searchInputProps: {
+                    value: filterValue,
+                    onClear: () => {
+                      setFilterValue("");
+                    }
+                  },
+                  searchActionEnd: sortDropdown,
+                  noResultsState: filterValue && Object.keys(filterConversations(filterValue)).length === 0 ? {
+                    bodyText: t("chatbox.emptyState.noResults.body"),
+                    titleText: t("chatbox.emptyState.noResults.title"),
+                    icon: SearchIcon
+                  } : void 0,
+                  drawerContent: /* @__PURE__ */ jsxs(
+                    FileDropZone,
+                    {
+                      className: classes.drawerFileDropZone,
+                      onFileDrop: (e, data) => handleAttach(data, e),
+                      displayMode: ChatbotDisplayMode.embedded,
+                      infoText: t("chatbox.fileUpload.infoText"),
+                      allowedFileTypes: supportedFileTypes,
+                      onAttachRejected,
+                      children: [
+                        showAlert && uploadError.message && /* @__PURE__ */ jsx("div", { className: classes.errorContainer, children: /* @__PURE__ */ jsx(
+                          ChatbotAlert,
+                          {
+                            component: "h4",
+                            title: t("chatbox.fileUpload.failed"),
+                            variant: uploadError.type ?? "danger",
+                            isInline: true,
+                            onClose: () => setUploadError({ message: null }),
+                            children: uploadError.message
+                          }
+                        ) }),
+                        mainPanelContent
+                      ]
+                    }
+                  )
                 }
               )
             }