@red-hat-developer-hub/backstage-plugin-intelligent-assistant 5.0.1 → 5.1.0

package/dist/components/LightSpeedChat.esm.js

@@ -2,13 +2,13 @@ import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { useState, useEffect, useRef, useLayoutEffect, useCallback, useMemo } from 'react';
 import { useNavigate, useMatch, useLocation } from 'react-router-dom';
 import { useApi, configApiRef } from '@backstage/core-plugin-api';
-import { makeStyles, Button as Button$1 } from '@material-ui/core';
+import { styled } from '@mui/material/styles';
 import Tab from '@mui/material/Tab';
 import Tabs from '@mui/material/Tabs';
-import { ChatbotDisplayMode, ChatbotContent, ChatbotFooter, MessageBar, Settings, Chatbot, ChatbotHeader, ChatbotHeaderMain, ChatbotHeaderTitle, FileDropZone, ChatbotAlert } from '@patternfly/chatbot';
+import { Chatbot, ChatbotHeader, ChatbotHeaderTitle, ChatbotFooter, MessageBar, ChatbotContent, Settings, ChatbotDisplayMode, ChatbotHeaderMain, ChatbotAlert, FileDropZone } from '@patternfly/chatbot';
 import ChatbotConversationHistoryNav from '@patternfly/chatbot/dist/dynamic/ChatbotConversationHistoryNav';
-import { DropdownItem, Tooltip, MenuToggle, Select, SelectList, SelectOption, Button, Title, Label } from '@patternfly/react-core';
-import { PenIcon, ThumbtackIcon, TrashIcon, SortAmountDownAltIcon, SortAmountDownIcon, PlusIcon, SearchIcon } from '@patternfly/react-icons';
+import { SelectList, DropdownItem, Tooltip, MenuToggle, Select, SelectOption, Button, Title, Label } from '@patternfly/react-core';
+import { PenIcon, ThumbtackIcon, TrashIcon, SearchIcon, SortAmountDownAltIcon, SortAmountDownIcon, PlusIcon } from '@patternfly/react-icons';
 import { RhUiAiExperienceIcon } from '@patternfly/react-icons/dist/esm/icons/rh-ui-ai-experience-icon';
 import { useQueryClient } from '@tanstack/react-query';
 import { LIGHTSPEED_PATH, UNTITLED_NOTEBOOK_NAME, TEMP_CONVERSATION_ID, supportedFileTypes } from '../const.esm.js';
@@ -19,8 +19,9 @@ import { useConversations } from '../hooks/useConversations.esm.js';
 import { useDeleteNotebook } from '../hooks/notebooks/useDeleteNotebook.esm.js';
 import { useIsMobile } from '../hooks/useIsMobile.esm.js';
 import { useLastOpenedConversation } from '../hooks/useLastOpenedConversation.esm.js';
-import { useLightspeedDeletePermission } from '../hooks/useLightspeedDeletePermission.esm.js';
-import { useLightspeedNotebooksPermission } from '../hooks/notebooks/useLightspeedNotebooksPermission.esm.js';
+import { useIaChatPermission } from '../hooks/useIaChatPermission.esm.js';
+import { useIaMcpToolsPermission } from '../hooks/useIaMcpToolsPermission.esm.js';
+import { useIaNotebooksPermission } from '../hooks/useIaNotebooksPermission.esm.js';
 import '@backstage/plugin-permission-react';
 import '@red-hat-developer-hub/backstage-plugin-intelligent-assistant-common';
 import { useTranslation } from '../hooks/useTranslation.esm.js';
@@ -35,7 +36,6 @@ import { useStopConversation } from '../hooks/useStopConversation.esm.js';
 import { useCreateNotebook } from '../hooks/notebooks/useCreateNotebook.esm.js';
 import { useNotebookDocuments } from '../hooks/notebooks/useNotebookDocuments.esm.js';
 import { useLightspeedDrawerContext } from '../hooks/useLightspeedDrawerContext.esm.js';
-import { useLightspeedUpdatePermission } from '../hooks/useLightspeedUpdatePermission.esm.js';
 import { useWelcomePrompts } from '../hooks/useWelcomePrompts.esm.js';
 import { getAttachments } from '../utils/attachment-utils.esm.js';
 import { extractPageContext } from '../utils/dom-extractor.esm.js';
@@ -55,7 +55,6 @@ import { NotebooksTab } from './notebooks/NotebooksTab.esm.js';
 import { useNotebookStreamStore } from './notebooks/NotebookStreamProvider.esm.js';
 import { NotebookView } from './notebooks/NotebookView.esm.js';
 import { SidebarCollapseIcon, SidebarExpandIcon } from './notebooks/SidebarCollapseIcon.esm.js';
-import PermissionRequiredState from './PermissionRequiredState.esm.js';
 import { RenameConversationModal } from './RenameConversationModal.esm.js';
 import { ToastAlertGroup } from './ToastAlertGroup.esm.js';
 
@@ -65,37 +64,70 @@ const ConditionalWrapper = ({
   wrapper,
   children
 }) => condition ? wrapper(children) : children;
-const useStyles = makeStyles((theme) => ({
-  body: {
-    "& h1, & h2, & h3, & h4, & h5, & h6, & p, & li": {
-      margin: 0,
-      padding: 0
-    },
-    "& .pf-chatbot__content": {
-      backgroundColor: "var(--pf-t--global--background--color--floating--default) !important"
-    },
-    "& .pf-v6-svg > .pf-v6-icon-rh-ui": {
-      display: "none !important",
-      width: 0,
-      height: 0,
-      overflow: "hidden"
-    }
+const floatingBg = "var(--pf-t--global--background--color--floating--default)";
+const StyledChatbot = styled(Chatbot, {
+  shouldForwardProp: (prop) => prop !== "isCompact" && prop !== "mcpDrawerFix" && prop !== "compactDrawerOpen"
+})(({ isCompact, mcpDrawerFix, compactDrawerOpen }) => ({
+  "& h1, & h2, & h3, & h4, & h5, & h6, & p, & li": {
+    margin: 0,
+    padding: 0
   },
-  bodyCompact: {
-    height: "100% !important",
-    minHeight: "0 !important",
+  "& .pf-chatbot__content": {
+    backgroundColor: `${floatingBg} !important`
+  },
+  "& .pf-v6-svg > .pf-v6-icon-rh-ui": {
+    display: "none !important",
+    width: 0,
+    height: 0,
     overflow: "hidden"
   },
-  header: {
-    padding: `${theme.spacing(3)}px ${theme.spacing(3)}px 0 ${theme.spacing(
-      3
-    )}px !important`,
-    backgroundColor: "var(--pf-t--global--background--color--floating--default) !important"
+  "& .pf-chatbot-container": {
+    minHeight: 0
   },
-  errorContainer: {
-    padding: theme.spacing(3)
+  "& .pf-chatbot__header-container": {
+    flexShrink: 0
   },
-  drawerFileDropZone: {
+  ...isCompact ? {
+    height: "100% !important",
+    minHeight: "0 !important",
+    overflow: "hidden"
+  } : {},
+  // Match the previous compactDrawerPanel class: only expand the history
+  // panel when it is actually open. Applying 100% width while collapsed
+  // lets the z-index: 1300 panel cover the Chat/Notebooks tab bar.
+  ...isCompact && compactDrawerOpen ? {
+    "& .pf-v6-c-drawer__panel": {
+      width: "100%",
+      minWidth: "100%",
+      maxWidth: "100%",
+      flexBasis: "100%"
+    }
+  } : {},
+  ...mcpDrawerFix ? {
+    "& .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": {
+      order: "unset"
+    },
+    "& .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": {
+      visibility: "hidden",
+      opacity: 0,
+      transition: "none !important"
+    }
+  } : {}
+}));
+const StyledChatbotHeader = styled(ChatbotHeader)(({ theme }) => ({
+  padding: `${theme.spacing(3)} ${theme.spacing(3)} 0 ${theme.spacing(3)} !important`,
+  backgroundColor: `${floatingBg} !important`
+}));
+const ErrorContainer = styled("div")(({ theme }) => ({
+  padding: theme.spacing(3)
+}));
+const FileDropZoneShell = styled("div")({
+  flex: 1,
+  minWidth: 0,
+  minHeight: 0,
+  display: "flex",
+  flexDirection: "column",
+  "& > .pf-chatbot__dropzone": {
     gap: 0,
     rowGap: 0,
     columnGap: 0,
@@ -103,443 +135,262 @@ const useStyles = makeStyles((theme) => ({
     "--pf-v5-c-multiple-file-upload--Gap": "0",
     flex: 1,
     minWidth: 0,
-    backgroundColor: "var(--pf-t--global--background--color--floating--default) !important"
-  },
-  chatHeaderActions: {
-    display: "flex",
-    alignItems: "center",
-    gap: theme.spacing(0.5)
-  },
-  compactDrawerPanel: {
-    "&.pf-v6-c-drawer__panel": {
-      width: "100%",
-      minWidth: "100%",
-      maxWidth: "100%",
-      flexBasis: "100%"
-    }
-  },
-  notebookHeaderActions: {
-    display: "flex",
-    alignItems: "center",
-    gap: theme.spacing(0.5)
-  },
-  headerLogo: {
-    width: 48,
-    height: 48,
-    marginRight: theme.spacing(1.5),
-    flexShrink: 0
-  },
-  headerTitle: {
-    justifyContent: "left !important"
-  },
-  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%",
-    display: "flex",
-    flexDirection: "column",
+    backgroundColor: `${floatingBg} !important`
+  }
+});
+const ChatFileDropZone = (props) => /* @__PURE__ */ jsx(FileDropZoneShell, { children: /* @__PURE__ */ jsx(
+  FileDropZone,
+  {
+    ...{ ...props, noClick: true }
+  }
+) });
+const HeaderActions = styled("div")(({ theme }) => ({
+  display: "flex",
+  alignItems: "center",
+  gap: theme.spacing(0.5)
+}));
+const HeaderLogo = styled(RhUiAiExperienceIcon)(({ theme }) => ({
+  width: 48,
+  height: 48,
+  marginRight: theme.spacing(1.5),
+  flexShrink: 0
+}));
+const StyledChatbotHeaderTitle = styled(ChatbotHeaderTitle)({
+  justifyContent: "left !important"
+});
+const HeaderDivider = styled("div")({
+  flexShrink: 0,
+  paddingTop: 8,
+  borderBottom: "1px solid var(--pf-t--global--border--color--default)",
+  backgroundColor: floatingBg
+});
+const ChatMain = styled("div")({
+  flex: 1,
+  minHeight: 0,
+  minWidth: 0,
+  display: "flex",
+  flexDirection: "column",
+  overflow: "hidden",
+  "& .pf-chatbot__history": {
     flex: 1,
     minHeight: 0,
-    overflowY: "auto",
-    backgroundColor: "var(--pf-t--global--background--color--floating--default)"
+    height: "100%"
+  }
+});
+const NotebooksTabLabel = styled("span", {
+  shouldForwardProp: (prop) => prop !== "isCompact"
+})(({ theme, isCompact }) => ({
+  display: "inline-flex",
+  alignItems: "center",
+  gap: isCompact ? theme.spacing(0.5) : theme.spacing(1),
+  minWidth: 0,
+  maxWidth: "100%"
+}));
+const StyledChatbotFooter = styled(ChatbotFooter)(({ theme }) => ({
+  "&.pf-chatbot__footer": {
+    backgroundColor: `${floatingBg} !important`
   },
-  notebooksHeader: {
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "space-between",
-    flexWrap: "wrap",
-    gap: theme.spacing(1),
-    marginBottom: theme.spacing(4)
+  "&>.pf-chatbot__footer-container": {
+    width: "100% !important",
+    padding: `${theme.spacing(1.5)} !important`,
+    maxWidth: "unset !important",
+    margin: "0 auto"
   },
-  notebooksHeading: {
-    marginBottom: 0,
-    whiteSpace: "nowrap",
-    fontSize: "1.25rem"
+  "& .pf-chatbot__message-bar": {
+    backgroundColor: theme.palette.mode === "light" ? theme.palette.grey[100] : "var(--pf-t--global--background--color--secondary--default)"
   },
-  notebooksHeadingEmpty: {
-    "&&": {
-      marginBottom: theme.spacing(1),
-      paddingBottom: theme.spacing(1)
-    }
+  "& .pf-chatbot__button--stop, & .pf-chatbot__button--attach, & .pf-chatbot__button--send, & .pf-chatbot__button--microphone": {
+    borderRadius: "var(--pf-t--global--border--radius--pill) !important"
+  }
+}));
+const StyledMessageBar = styled(MessageBar)(({ theme }) => ({
+  border: "1px solid var(--pf-t--global--border--color--default)",
+  borderRadius: 24,
+  padding: theme.spacing(0.5),
+  "&::after": {
+    display: "none"
+  }
+}));
+const StyledSelectList = styled(SelectList)({
+  padding: 0,
+  margin: 0
+});
+const StyledChatbotContent = styled(ChatbotContent, {
+  shouldForwardProp: (prop) => prop !== "hasOverflow"
+})(({ hasOverflow }) => ({
+  minHeight: 0,
+  display: "flex",
+  flexDirection: "column",
+  flex: 1,
+  "& .pf-chatbot__jump": {
+    left: "50% !important",
+    right: "auto !important",
+    transform: "translateX(-50%)",
+    visibility: hasOverflow ? "visible" : "hidden",
+    pointerEvents: hasOverflow ? "auto" : "none"
   },
-  notebooksEmptyState: {
+  "& .pf-chatbot__message-contents": {
+    overflowX: "hidden",
+    overflowWrap: "break-word",
+    wordBreak: "break-word"
+  }
+}));
+const ContentScroll = styled("div", {
+  shouldForwardProp: (prop) => prop !== "isNewChat"
+})(({ isNewChat }) => ({
+  minHeight: 0,
+  flex: 1,
+  display: "flex",
+  flexDirection: "column",
+  overflowY: "auto",
+  WebkitOverflowScrolling: "touch",
+  ...isNewChat ? { backgroundColor: `${floatingBg} !important` } : {}
+}));
+const ContentSpacer = styled("div")({
+  flex: 1,
+  minHeight: 0
+});
+const FlatSettings = styled(Settings)({
+  height: "100%",
+  width: "100%",
+  flex: 1,
+  minHeight: 0,
+  "&.pf-chatbot__settings-form-container": {
+    background: floatingBg,
+    padding: 0,
+    margin: 0,
+    minHeight: 0,
     flex: 1,
     display: "flex",
     flexDirection: "column",
-    alignItems: "center",
-    justifyContent: "center",
-    textAlign: "center"
-  },
-  notebooksIcon: {
-    fontSize: 48,
-    color: "var(--pf-t--global--icon--color--subtle)",
-    marginBottom: theme.spacing(1.5),
-    "& > .pf-v6-icon-rh-ui": {
-      display: "none !important"
-    }
-  },
-  notebooksDescription: {
-    marginTop: theme.spacing(1),
-    marginBottom: theme.spacing(3),
-    maxWidth: 420
-  },
-  notebooksAction: {
-    textTransform: "none",
-    borderRadius: 999,
-    paddingLeft: theme.spacing(3),
-    paddingRight: theme.spacing(3)
-  },
-  notebooksActionEmpty: {
-    textTransform: "none",
-    borderRadius: 999,
-    paddingLeft: theme.spacing(3),
-    paddingRight: theme.spacing(3),
-    marginTop: theme.spacing(3)
-  },
-  notebooksGrid: {
-    display: "grid",
-    gridTemplateColumns: "repeat(3, minmax(0, 1fr))",
-    gap: theme.spacing(2),
-    width: "100%",
-    maxWidth: "100%",
-    paddingBottom: theme.spacing(3),
-    [theme.breakpoints.down("md")]: {
-      gridTemplateColumns: "repeat(2, minmax(0, 1fr))"
-    },
-    [theme.breakpoints.down("sm")]: {
-      gridTemplateColumns: "repeat(1, minmax(0, 1fr))"
-    }
-  },
-  notebooksGridCompact: {
-    display: "grid",
-    gridTemplateColumns: "repeat(auto-fill, minmax(280px, 1fr))",
-    gap: theme.spacing(2),
+    justifyContent: "flex-start",
     width: "100%",
-    maxWidth: "100%",
-    paddingBottom: theme.spacing(6)
-  },
-  notebookCard: {
-    borderRadius: theme.spacing(1.5),
-    display: "flex",
-    flexDirection: "column",
-    "&:hover": {
-      borderColor: "var(--pf-t--global--border--color--hover)",
-      borderWidth: "1px",
-      borderStyle: "solid",
-      cursor: "pointer"
-    }
-  },
-  notebookCardHeader: {
-    padding: theme.spacing(3),
-    paddingBottom: 0,
-    alignItems: "center"
-  },
-  notebookCardDivider: {
-    borderTop: "1px solid var(--pf-t--global--border--color--default)",
-    marginTop: theme.spacing(1)
-  },
-  notebookCardBody: {
-    padding: theme.spacing(3),
-    paddingTop: theme.spacing(2)
-  },
-  notebookDocuments: {
-    paddingTop: theme.spacing(1)
-  },
-  notebookUpdated: {
-    paddingBottom: theme.spacing(3),
-    paddingTop: theme.spacing(2),
-    fontStyle: "italic"
-  },
-  notebookTitle: {
-    display: "flex",
-    alignItems: "center",
-    gap: theme.spacing(1),
-    minWidth: 0,
-    flex: 1
-  },
-  notebookCardHeaderActions: {
-    marginLeft: theme.spacing(1)
-  },
-  notebookTitleText: {
+    maxWidth: "none",
     overflow: "hidden",
-    textOverflow: "ellipsis",
-    whiteSpace: "nowrap",
-    cursor: "pointer",
-    borderRadius: 4,
-    padding: "2px 6px",
-    "&:hover": {
-      backgroundColor: "var(--pf-t--global--background--color--action--plain--hover)"
-    }
-  },
-  notebookMenuButton: {
-    color: theme.palette.text.secondary
-  },
-  notebookDropdownList: {
-    paddingTop: 0,
-    paddingBottom: 0,
-    paddingInlineStart: 0
-  },
-  notebookDropdownMenu: {
-    "--pf-v6-c-menu--PaddingBlockStart": "0",
-    "--pf-v6-c-menu--PaddingBlockEnd": "0"
-  },
-  notebookDropdownItem: {
-    justifyContent: "flex-start",
-    textAlign: "left",
-    paddingLeft: theme.spacing(0.5),
-    paddingRight: theme.spacing(0.5)
+    border: "none"
   },
-  footer: {
-    "&.pf-chatbot__footer": {
-      backgroundColor: "var(--pf-t--global--background--color--floating--default) !important"
-    },
-    "&>.pf-chatbot__footer-container": {
-      width: "95% !important",
-      maxWidth: "unset !important"
-    },
-    "& .pf-chatbot__message-bar": {
-      backgroundColor: theme.palette.type === "light" ? theme.palette.grey[100] : "var(--pf-t--global--background--color--secondary--default)"
-    },
-    "& .pf-chatbot__button--stop, & .pf-chatbot__button--attach, & .pf-chatbot__button--send, & .pf-chatbot__button--microphone": {
-      borderRadius: "var(--pf-t--global--border--radius--pill) !important"
-    }
-  },
-  fullscreenFooter: {
-    "&>.pf-chatbot__footer-container": {
-      width: "100% !important",
-      padding: `${theme.spacing(1.5)}px !important`,
-      maxWidth: "unset !important",
-      margin: "0 auto"
-    }
-  },
-  messageBar: {
-    border: "1px solid var(--pf-t--global--border--color--default)",
-    borderRadius: 24,
-    padding: theme.spacing(0.5),
-    "&::after": {
-      display: "none"
-    }
-  },
-  sortDropdown: {
+  "& .pf-chatbot__settings-form": {
+    margin: 0,
     padding: 0,
-    margin: 0
-  },
-  // Outer content wrapper (library may override overflow; we rely on inner scroll wrapper).
-  chatbotContent: {
+    background: floatingBg,
     minHeight: 0,
+    flex: 1,
     display: "flex",
     flexDirection: "column",
-    flex: 1,
-    "& .pf-chatbot__jump": {
-      left: "50% !important",
-      right: "auto !important",
-      transform: "translateX(-50%)",
-      visibility: "hidden",
-      pointerEvents: "none"
-    },
-    "& .pf-chatbot__message-contents": {
-      overflowX: "hidden",
-      overflowWrap: "break-word",
-      wordBreak: "break-word"
-    }
-  },
-  chatbotContentHasOverflow: {
-    "& .pf-chatbot__jump": {
-      visibility: "visible",
-      pointerEvents: "auto"
-    }
+    width: "100%",
+    maxWidth: "none",
+    border: "none"
   },
-  // Inner scroll container we control: always scrollable so zoomed-in users see full content.
-  chatbotContentScroll: {
+  "& .pf-chatbot__settings-form-row": {
+    background: floatingBg,
+    border: "none",
+    margin: 0,
+    padding: 0,
     minHeight: 0,
     flex: 1,
     display: "flex",
     flexDirection: "column",
-    overflowY: "auto",
-    WebkitOverflowScrolling: "touch"
-  },
-  chatbotContentScrollNewChat: {
-    backgroundColor: "var(--pf-t--global--background--color--floating--default) !important"
+    width: "100%",
+    maxWidth: "none"
   },
-  // When present, pushes welcome content to bottom (zoom out). Scroll up to see important box (zoom in).
-  chatbotContentSpacer: {
+  "& .pf-chatbot__settings-label": {
+    display: "none"
+  }
+});
+const McpFullscreenLayout = styled("div")({
+  display: "grid",
+  gridTemplateColumns: "minmax(0, 1fr) minmax(0, 1fr)",
+  minHeight: 0,
+  height: "100%",
+  flex: 1,
+  width: "100%",
+  minWidth: 0,
+  overflow: "hidden"
+});
+const McpChatPane = styled("div")({
+  display: "flex",
+  flexDirection: "column",
+  minHeight: 0,
+  width: "100%",
+  minWidth: 0,
+  whiteSpace: "normal",
+  wordBreak: "break-word",
+  overflowWrap: "break-word"
+});
+const McpSettingsPane = styled("div")(({ theme }) => ({
+  width: "100%",
+  minWidth: 0,
+  borderLeft: `1px solid ${theme.palette.divider}`,
+  backgroundColor: floatingBg,
+  display: "flex",
+  flexDirection: "column",
+  minHeight: 0,
+  overflow: "auto"
+}));
+const FullscreenChatLayout = styled("div")({
+  display: "flex",
+  flexDirection: "row",
+  flex: 1,
+  minHeight: 0,
+  height: "100%",
+  width: "100%",
+  "& .pf-v6-c-drawer, & .pf-v5-c-drawer": {
     flex: 1,
-    minHeight: 0
+    minWidth: 0
   },
-  settingsFlat: {
-    height: "100%",
-    width: "100%",
+  "& .pf-v6-c-drawer__content, & .pf-v5-c-drawer__content": {
     flex: 1,
-    minHeight: 0,
-    "&.pf-chatbot__settings-form-container": {
-      background: "var(--pf-t--global--background--color--floating--default)",
-      padding: 0,
-      margin: 0,
-      minHeight: 0,
-      flex: 1,
-      display: "flex",
-      flexDirection: "column",
-      justifyContent: "flex-start",
-      width: "100%",
-      maxWidth: "none",
-      overflow: "hidden",
-      border: "none"
-    },
-    "& .pf-chatbot__settings-form": {
-      margin: 0,
-      padding: 0,
-      background: "var(--pf-t--global--background--color--floating--default)",
-      minHeight: 0,
-      flex: 1,
-      display: "flex",
-      flexDirection: "column",
-      width: "100%",
-      maxWidth: "none",
-      border: "none"
-    },
-    "& .pf-chatbot__settings-form-row": {
-      background: "var(--pf-t--global--background--color--floating--default)",
-      border: "none",
-      margin: 0,
-      padding: 0,
-      minHeight: 0,
-      flex: 1,
-      display: "flex",
-      flexDirection: "column",
-      width: "100%",
-      maxWidth: "none"
-    },
-    "& .pf-chatbot__settings-label": {
-      display: "none"
-    }
+    minWidth: 0
   },
-  mcpFullscreenLayout: {
-    display: "grid",
-    gridTemplateColumns: "minmax(0, 1fr) minmax(0, 1fr)",
-    minHeight: 0,
-    height: "100%",
-    flex: 1,
-    width: "100%",
-    minWidth: 0,
-    overflow: "hidden"
+  "& .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"
   },
-  mcpChatPane: {
-    display: "flex",
-    flexDirection: "column",
-    minHeight: 0,
-    width: "100%",
-    minWidth: 0,
-    whiteSpace: "normal",
-    wordBreak: "break-word",
-    overflowWrap: "break-word"
+  "& .pf-v6-c-drawer__close, & .pf-v5-c-drawer__close": {
+    marginTop: 0,
+    marginRight: 0
   },
-  mcpSettingsPane: {
-    width: "100%",
-    minWidth: 0,
-    borderLeft: `1px solid ${theme.palette.divider}`,
-    backgroundColor: "var(--pf-t--global--background--color--floating--default)",
-    display: "flex",
-    flexDirection: "column",
-    minHeight: 0,
-    overflow: "auto"
+  "& .pf-v6-c-drawer__head, & .pf-v5-c-drawer__head": {
+    paddingInlineStart: "var(--pf-t--global--spacer--lg)",
+    paddingInlineEnd: "var(--pf-t--global--spacer--lg)"
   },
-  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": {
-      order: "unset"
-    },
-    "& .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": {
-      visibility: "hidden",
-      opacity: 0,
-      transition: "none !important"
-    }
+  "& .pf-v6-c-drawer__close .pf-v6-c-button svg, & .pf-v5-c-drawer__close .pf-v5-c-button svg": {
+    display: "none"
   },
-  // TODO: These PF Chatbot overrides are fragile (version-specific class names).
-  // Remove once the upstream issues are addressed:
-  // - https://github.com/patternfly/chatbot/issues/834 (custom close/collapse icon & positioning)
-  // - https://github.com/patternfly/chatbot/issues/848 (sidebar padding & spacing customization)
-  fullscreenChatLayout: {
+  "& .pf-v6-c-drawer__close .pf-v6-c-button, & .pf-v5-c-drawer__close .pf-v5-c-button": {
     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"
-    },
-    // TODO(#834): Remove close button overrides once PF supports custom icon/positioning
-    "& .pf-v6-c-drawer__close, & .pf-v5-c-drawer__close": {
-      marginTop: 0,
-      marginRight: 0
-    },
-    // TODO(#848): Remove drawer head padding overrides once PF exposes drawerHeadProps
-    "& .pf-v6-c-drawer__head, & .pf-v5-c-drawer__head": {
-      paddingInlineStart: "var(--pf-t--global--spacer--lg)",
-      paddingInlineEnd: "var(--pf-t--global--spacer--lg)"
-    },
-    // TODO(#834): Remove icon replacement hack once PF supports drawerCloseButtonProps.icon
-    "& .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"
-      }
-    },
-    // TODO(#848): Remove heading padding overrides once PF exposes drawerHeadProps
-    "& .pf-chatbot__heading-container": {
-      paddingInlineStart: "var(--pf-t--global--spacer--lg)",
-      paddingInlineEnd: "var(--pf-t--global--spacer--lg)"
-    },
-    // TODO(#848): Remove menu item padding overrides once PF exposes menuItemPaddingInline
-    "& .pf-chatbot__menu-item-header > .pf-v6-c-menu__group-title": {
-      "--pf-v6-c-menu__group-title--PaddingInlineStart": "var(--pf-t--global--spacer--md)",
-      "--pf-v6-c-menu__group-title--PaddingInlineEnd": "var(--pf-t--global--spacer--md)"
-    },
-    "& .pf-chatbot__menu-item": {
-      cursor: "pointer",
-      "--pf-v6-c-menu__item--PaddingInlineStart": "var(--pf-t--global--spacer--md)",
-      "--pf-v6-c-menu__item--PaddingInlineEnd": "var(--pf-t--global--spacer--md)"
-    },
-    // TODO(#848): Remove menu toggle hover hack once PF supports menuToggleVisibility
-    "& .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
+    alignItems: "center",
+    justifyContent: "center",
+    "&::before": {
+      content: '""',
+      display: "block",
+      width: 24,
+      height: 24,
+      mask: COLLAPSE_PANEL_ICON_SVG,
+      WebkitMask: COLLAPSE_PANEL_ICON_SVG,
+      backgroundColor: "currentColor"
     }
   },
-  fullscreenMainContent: {
-    display: "flex",
-    flexDirection: "column",
-    flex: 1,
-    minHeight: 0,
-    minWidth: 0,
-    overflow: "hidden"
+  "& .pf-chatbot__heading-container": {
+    paddingInlineStart: "var(--pf-t--global--spacer--lg)",
+    paddingInlineEnd: "var(--pf-t--global--spacer--lg)"
+  },
+  "& .pf-chatbot__menu-item-header > .pf-v6-c-menu__group-title": {
+    "--pf-v6-c-menu__group-title--PaddingInlineStart": "var(--pf-t--global--spacer--md)",
+    "--pf-v6-c-menu__group-title--PaddingInlineEnd": "var(--pf-t--global--spacer--md)"
+  },
+  "& .pf-chatbot__menu-item": {
+    cursor: "pointer",
+    "--pf-v6-c-menu__item--PaddingInlineStart": "var(--pf-t--global--spacer--md)",
+    "--pf-v6-c-menu__item--PaddingInlineEnd": "var(--pf-t--global--spacer--md)"
+  },
+  "& .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
   }
-}));
+});
 const LightspeedChat = ({
   selectedModel,
   topicRestrictionEnabled,
@@ -551,7 +402,6 @@ const LightspeedChat = ({
   models
 }) => {
   const isMobile = useIsMobile();
-  const classes = useStyles();
   const { t } = useTranslation();
   const navigate = useNavigate();
   const configApi = useApi(configApiRef);
@@ -573,7 +423,6 @@ const LightspeedChat = ({
   const isOnNotebookRoute = Boolean(
     notebooksRouteMatch || notebookViewRouteMatch
   );
-  const shouldShowTabs = notebooksEnabled || isOnNotebookRoute;
   const {
     displayMode,
     setDisplayMode,
@@ -606,13 +455,21 @@ const LightspeedChat = ({
     }
     return 0;
   });
-  const {
-    allowed: hasNotebooksAccess,
-    loading: notebooksPermissionLoading,
-    iaNotebooksPermissionName
-  } = useLightspeedNotebooksPermission();
+  const { allowed: hasChatAccess, loading: chatPermissionLoading } = useIaChatPermission();
+  const chatPermissionResolved = !chatPermissionLoading && hasChatAccess;
+  const { allowed: hasNotebooksAccess, loading: notebooksPermissionLoading } = useIaNotebooksPermission();
   const notebooksPermissionResolved = !notebooksPermissionLoading && hasNotebooksAccess;
-  const { data: notebookConversationIdsArray = [] } = useNotebookConversationIds();
+  const canShowNotebooks = notebooksPermissionResolved && (notebooksEnabled || isOnNotebookRoute);
+  const hasChatTab = chatPermissionResolved;
+  const hasNotebooksTab = canShowNotebooks;
+  const hasBothTabs = hasChatTab && hasNotebooksTab;
+  const shouldShowTabs = hasBothTabs;
+  const selectedTabIndex = hasBothTabs ? activeTab : 0;
+  const { allowed: hasMcpToolsAccess, loading: mcpToolsPermissionLoading } = useIaMcpToolsPermission();
+  const mcpToolsPermissionResolved = !mcpToolsPermissionLoading && hasMcpToolsAccess;
+  const { data: notebookConversationIdsArray = [] } = useNotebookConversationIds(
+    chatPermissionResolved || notebooksPermissionResolved
+  );
   const { data: notebooks = [], refetch: refetchNotebooks } = useNotebookSessions(notebooksPermissionResolved);
   const hasNotebooks = notebooks.length > 0;
   const [openNotebookMenuId, setOpenNotebookMenuId] = useState(
@@ -666,31 +523,79 @@ const LightspeedChat = ({
   const [hasChatContentOverflow, setHasChatContentOverflow] = useState(false);
   const wasStoppedByUserRef = useRef(false);
   const { isReady, lastOpenedId, setLastOpenedId, clearLastOpenedId } = useLastOpenedConversation(user);
-  const showChatPanel = activeTab === 0;
-  const showNotebooksPanel = (notebooksEnabled || isOnNotebookRoute) && activeTab !== 0;
+  const showChatPanel = hasChatTab && (activeTab === 0 || !hasNotebooksTab);
+  const showNotebooksPanel = hasNotebooksTab && (activeTab === 1 || !hasChatTab);
   const [isChatHistoryDrawerOpen, setIsChatHistoryDrawerOpen] = useState(!isMobile && isFullscreenMode);
   useLayoutEffect(() => {
-    if (!isFullscreenMode) {
+    if (!isFullscreenMode || chatPermissionLoading || notebooksPermissionLoading) {
       return;
     }
     if (isNotebooksFullscreenPath) {
+      if (canShowNotebooks) {
+        setActiveTab(1);
+        setShellViewTab(1);
+      } else if (chatPermissionResolved) {
+        navigate(
+          routeConversationId ? `${LIGHTSPEED_PATH}/conversation/${routeConversationId}` : LIGHTSPEED_PATH,
+          { replace: true }
+        );
+        setActiveTab(0);
+        setShellViewTab(0);
+      }
+      return;
+    }
+    const isBaseLightspeedChatRoute = location.pathname === LIGHTSPEED_PATH || location.pathname === `${LIGHTSPEED_PATH}/`;
+    const isConversationRoute = location.pathname.startsWith(
+      `${LIGHTSPEED_PATH}/conversation/`
+    );
+    if (!chatPermissionResolved && canShowNotebooks && (isBaseLightspeedChatRoute || isConversationRoute)) {
+      navigate(
+        activeNotebookId ? `${LIGHTSPEED_PATH}/notebooks/${activeNotebookId}` : `${LIGHTSPEED_PATH}/notebooks`,
+        { replace: true }
+      );
       setActiveTab(1);
       setShellViewTab(1);
       return;
     }
-    const isBaseLightspeedChatRoute = location.pathname === LIGHTSPEED_PATH || location.pathname === `${LIGHTSPEED_PATH}/`;
-    if (shellViewTab === 1 && isBaseLightspeedChatRoute) {
+    if (shellViewTab === 1 && isBaseLightspeedChatRoute && canShowNotebooks) {
       navigate(`${LIGHTSPEED_PATH}/notebooks`, { replace: true });
       return;
     }
-    setActiveTab(0);
-    setShellViewTab(0);
+    if (chatPermissionResolved) {
+      setActiveTab(0);
+      setShellViewTab(0);
+    }
   }, [
     isFullscreenMode,
     isNotebooksFullscreenPath,
     shellViewTab,
     location.pathname,
     navigate,
+    setShellViewTab,
+    chatPermissionLoading,
+    notebooksPermissionLoading,
+    chatPermissionResolved,
+    canShowNotebooks,
+    activeNotebookId,
+    routeConversationId
+  ]);
+  useEffect(() => {
+    if (chatPermissionLoading || notebooksPermissionLoading) {
+      return;
+    }
+    if (!chatPermissionResolved && canShowNotebooks && activeTab === 0) {
+      setActiveTab(1);
+      setShellViewTab(1);
+    } else if (chatPermissionResolved && !canShowNotebooks && activeTab !== 0) {
+      setActiveTab(0);
+      setShellViewTab(0);
+    }
+  }, [
+    chatPermissionLoading,
+    notebooksPermissionLoading,
+    chatPermissionResolved,
+    canShowNotebooks,
+    activeTab,
     setShellViewTab
   ]);
   const maybeAutoDeleteScratchNotebook = useCallback(() => {
@@ -713,13 +618,19 @@ const LightspeedChat = ({
     deleteNotebook
   ]);
   const handleNotebookTabSelect = (_event, nextTab) => {
-    if (nextTab === 0) {
+    let logicalTab = 0;
+    if (hasBothTabs) {
+      logicalTab = nextTab;
+    } else if (hasNotebooksTab) {
+      logicalTab = 1;
+    }
+    if (logicalTab === 0) {
       maybeAutoDeleteScratchNotebook();
     }
-    setActiveTab(nextTab);
-    setShellViewTab(nextTab);
+    setActiveTab(logicalTab);
+    setShellViewTab(logicalTab);
     if (isFullscreenMode) {
-      if (nextTab === 1) {
+      if (logicalTab === 1) {
         navigate(
           activeNotebookId ? `${LIGHTSPEED_PATH}/notebooks/${activeNotebookId}` : `${LIGHTSPEED_PATH}/notebooks`
         );
@@ -729,7 +640,7 @@ const LightspeedChat = ({
         );
       }
     }
-    if (nextTab === 1 && notebooksPermissionResolved) {
+    if (logicalTab === 1 && notebooksPermissionResolved) {
       refetchNotebooks();
     }
   };
@@ -826,6 +737,11 @@ const LightspeedChat = ({
       setChatHeaderBgColor(computedBg);
     }
   }, [displayMode, isMcpSettingsOpen]);
+  useEffect(() => {
+    if (!mcpToolsPermissionResolved && isMcpSettingsOpen) {
+      setIsMcpSettingsOpen(false);
+    }
+  }, [mcpToolsPermissionResolved, isMcpSettingsOpen]);
   const {
     isPinningChatsEnabled,
     pinnedChats,
@@ -886,10 +802,8 @@ const LightspeedChat = ({
     data: conversations = [],
     isLoading,
     isRefetching
-  } = useConversations();
-  const { allowed: hasDeleteAccess } = useLightspeedDeletePermission();
-  const { allowed: hasUpdateAccess } = useLightspeedUpdatePermission();
-  const samplePrompts = useWelcomePrompts();
+  } = useConversations(chatPermissionResolved);
+  const samplePrompts = useWelcomePrompts(chatPermissionResolved);
   useEffect(() => {
     if (!user || !isReady) return;
     const onOverlayLikeSurface = isFullscreenMode || !routeConversationId;
@@ -1087,7 +1001,6 @@ const LightspeedChat = ({
           /* @__PURE__ */ jsx(
             DropdownItem,
             {
-              isDisabled: !hasUpdateAccess,
               icon: /* @__PURE__ */ jsx(PenIcon, {}),
               onClick: () => openChatRenameModal(conversationSummary.conversation_id),
               children: t("conversation.rename")
@@ -1111,7 +1024,6 @@ const LightspeedChat = ({
           /* @__PURE__ */ jsx(
             DropdownItem,
             {
-              isDisabled: !hasDeleteAccess,
               icon: /* @__PURE__ */ jsx(TrashIcon, {}),
               onClick: () => openDeleteModal(conversationSummary.conversation_id),
               children: t("conversation.delete")
@@ -1120,15 +1032,7 @@ const LightspeedChat = ({
         ] })
       };
     },
-    [
-      pinnedChats,
-      hasDeleteAccess,
-      isPinningChatsEnabled,
-      hasUpdateAccess,
-      t,
-      pinChat,
-      unpinChat
-    ]
+    [pinnedChats, isPinningChatsEnabled, t, pinChat, unpinChat]
   );
   const notebookConversationIds = useMemo(
     () => new Set(notebookConversationIdsArray),
@@ -1165,7 +1069,7 @@ const LightspeedChat = ({
       const pinnedChatsKey = t("conversation.category.pinnedChats") || "Pinned chats";
       let isNoPinnedChatsSearchResults = false;
       let isNoRecentChatsSearchResults = false;
-      const filteredConversations = Object.entries(categorizedMessages).reduce(
+      const filteredConversations2 = Object.entries(categorizedMessages).reduce(
         (acc, [key, items]) => {
           const filteredItems = items.filter(
             (item) => (item.text ?? "").toLocaleLowerCase("en-US").includes(targetValue.toLocaleLowerCase("en-US"))
@@ -1219,7 +1123,7 @@ const LightspeedChat = ({
       if (isNoPinnedChatsSearchResults && isNoRecentChatsSearchResults) {
         return {};
       }
-      return filteredConversations;
+      return filteredConversations2;
     },
     [categorizedMessages, isPinningChatsEnabled, t]
   );
@@ -1410,6 +1314,30 @@ const LightspeedChat = ({
   const handleFilter = useCallback((value) => {
     setFilterValue(value);
   }, []);
+  const onClearFilter = useCallback(() => {
+    setFilterValue("");
+  }, []);
+  const searchInputProps = useMemo(
+    () => ({
+      value: filterValue,
+      onClear: onClearFilter
+    }),
+    [filterValue, onClearFilter]
+  );
+  const filteredConversations = useMemo(
+    () => filterConversations(filterValue),
+    [filterConversations, filterValue]
+  );
+  const noResultsState = useMemo(() => {
+    if (!filterValue || Object.keys(filteredConversations).length > 0) {
+      return void 0;
+    }
+    return {
+      bodyText: t("chatbox.emptyState.noResults.body"),
+      titleText: t("chatbox.emptyState.noResults.title"),
+      icon: SearchIcon
+    };
+  }, [filterValue, filteredConversations, t]);
   const onChatHistoryDrawerToggle = useCallback(() => {
     setIsChatHistoryDrawerOpen((isOpen) => !isOpen);
   }, []);
@@ -1461,7 +1389,7 @@ const LightspeedChat = ({
         popperProps: { position: "end" },
         toggle: sortToggle,
         shouldFocusToggleOnSelect: true,
-        children: /* @__PURE__ */ jsxs(SelectList, { className: classes.sortDropdown, children: [
+        children: /* @__PURE__ */ jsxs(StyledSelectList, { children: [
           /* @__PURE__ */ jsx(SelectOption, { value: "newest", children: t("sort.newest") }),
           /* @__PURE__ */ jsx(SelectOption, { value: "oldest", children: t("sort.oldest") }),
           /* @__PURE__ */ jsx(SelectOption, { value: "alphabeticalAsc", children: t("sort.alphabeticalAsc") }),
@@ -1469,14 +1397,7 @@ const LightspeedChat = ({
         ] })
       }
     ),
-    [
-      isSortSelectOpen,
-      selectedSort,
-      onSortSelect,
-      sortToggle,
-      t,
-      classes.sortDropdown
-    ]
+    [isSortSelectOpen, selectedSort, onSortSelect, sortToggle, t]
   );
   const handleAttach = (data, event) => {
     if ("preventDefault" in event && typeof event.preventDefault === "function") {
@@ -1515,103 +1436,90 @@ const LightspeedChat = ({
     });
   };
   const chatMainContent = /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(
-      ChatbotContent,
+    /* @__PURE__ */ jsx(StyledChatbotContent, { hasOverflow: hasChatContentOverflow, children: /* @__PURE__ */ jsxs(
+      ContentScroll,
       {
-        className: `${classes.chatbotContent} ${hasChatContentOverflow ? classes.chatbotContentHasOverflow : ""}`,
-        children: /* @__PURE__ */ jsxs(
-          "div",
-          {
-            ref: contentScrollRef,
-            className: `${classes.chatbotContentScroll}${welcomePrompts.length > 0 ? ` ${classes.chatbotContentScrollNewChat}` : ""}`,
-            children: [
-              welcomePrompts.length > 0 && /* @__PURE__ */ jsx("div", { className: classes.chatbotContentSpacer, "aria-hidden": true }),
-              /* @__PURE__ */ jsx(
-                LightspeedChatBox,
-                {
-                  userName,
-                  messages,
-                  profileLoading,
-                  announcement,
-                  ref: scrollToBottomRef,
-                  welcomePrompts,
-                  conversationId,
-                  isStreaming: streamingUiMatchesView,
-                  topicRestrictionEnabled,
-                  displayMode
-                }
-              ),
-              welcomePrompts.length > 0 && /* @__PURE__ */ jsx(
-                "div",
-                {
-                  ref: bottomSentinelRef,
-                  "aria-hidden": true,
-                  style: { height: 0, flexShrink: 0 }
-                }
-              )
-            ]
-          }
-        )
-      }
-    ),
-    /* @__PURE__ */ jsxs(
-      ChatbotFooter,
-      {
-        className: `${classes.footer} ${classes.fullscreenFooter}`,
+        ref: contentScrollRef,
+        isNewChat: welcomePrompts.length > 0,
         children: [
-          /* @__PURE__ */ jsx(FilePreview, {}),
+          welcomePrompts.length > 0 && /* @__PURE__ */ jsx(ContentSpacer, { "aria-hidden": true }),
           /* @__PURE__ */ jsx(
-            MessageBar,
+            LightspeedChatBox,
             {
-              className: classes.messageBar,
-              onSendMessage: sendMessage,
-              isSendButtonDisabled,
-              hasAttachButton: true,
-              attachButtonPosition: "start",
-              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"),
-                  icon: /* @__PURE__ */ jsx(PlusIcon, {})
-                },
-                microphone: {
-                  tooltipContent: {
-                    active: t("tooltip.microphone.active"),
-                    inactive: t("tooltip.microphone.inactive")
-                  }
-                },
-                send: {
-                  tooltipContent: t("tooltip.send")
-                }
-              },
-              additionalActions: /* @__PURE__ */ jsx(
-                MessageBarModelSelector,
-                {
-                  selectedModel,
-                  models,
-                  onSelect: handleSelectedModel,
-                  disabled: isSendButtonDisabled || messages.length > 0,
-                  disabledTooltip: t("modelSelector.disabledTooltip")
-                }
-              ),
-              forceMultilineLayout: true,
-              allowedFileTypes: supportedFileTypes,
-              onAttachRejected,
-              placeholder: t("chatbox.message.placeholder")
-            },
-            messageBarKey
+              userName,
+              messages,
+              profileLoading,
+              announcement,
+              ref: scrollToBottomRef,
+              welcomePrompts,
+              conversationId,
+              isStreaming: streamingUiMatchesView,
+              topicRestrictionEnabled,
+              displayMode
+            }
           ),
-          /* @__PURE__ */ jsx(ChatbotFootnoteWithIcon, { ...getFootnoteProps(t) })
+          welcomePrompts.length > 0 && /* @__PURE__ */ jsx(
+            "div",
+            {
+              ref: bottomSentinelRef,
+              "aria-hidden": true,
+              style: { height: 0, flexShrink: 0 }
+            }
+          )
         ]
       }
-    )
+    ) }),
+    /* @__PURE__ */ jsxs(StyledChatbotFooter, { children: [
+      /* @__PURE__ */ jsx(FilePreview, {}),
+      /* @__PURE__ */ jsx(
+        StyledMessageBar,
+        {
+          onSendMessage: sendMessage,
+          isSendButtonDisabled,
+          hasAttachButton: true,
+          attachButtonPosition: "start",
+          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"),
+              icon: /* @__PURE__ */ jsx(PlusIcon, {})
+            },
+            microphone: {
+              tooltipContent: {
+                active: t("tooltip.microphone.active"),
+                inactive: t("tooltip.microphone.inactive")
+              }
+            },
+            send: {
+              tooltipContent: t("tooltip.send")
+            }
+          },
+          additionalActions: /* @__PURE__ */ jsx(
+            MessageBarModelSelector,
+            {
+              selectedModel,
+              models,
+              onSelect: handleSelectedModel,
+              disabled: isSendButtonDisabled || messages.length > 0,
+              disabledTooltip: t("modelSelector.disabledTooltip")
+            }
+          ),
+          forceMultilineLayout: true,
+          allowedFileTypes: supportedFileTypes,
+          onAttachRejected,
+          placeholder: t("chatbox.message.placeholder")
+        },
+        messageBarKey
+      ),
+      /* @__PURE__ */ jsx(ChatbotFootnoteWithIcon, { ...getFootnoteProps(t) })
+    ] })
   ] });
   const mcpSettingsPanel = /* @__PURE__ */ jsx(
     McpServersSettings,
@@ -1621,19 +1529,18 @@ const LightspeedChat = ({
     }
   );
   const mainPanelContent = (() => {
-    if (!isMcpSettingsOpen) {
+    if (!isMcpSettingsOpen || !mcpToolsPermissionResolved) {
       return /* @__PURE__ */ jsx(Fragment, { children: chatMainContent });
     }
     if (isFullscreenMode) {
-      return /* @__PURE__ */ jsxs("div", { className: classes.mcpFullscreenLayout, children: [
-        /* @__PURE__ */ jsx("div", { className: classes.mcpChatPane, children: chatMainContent }),
-        /* @__PURE__ */ jsx("div", { className: classes.mcpSettingsPane, children: mcpSettingsPanel })
+      return /* @__PURE__ */ jsxs(McpFullscreenLayout, { children: [
+        /* @__PURE__ */ jsx(McpChatPane, { children: chatMainContent }),
+        /* @__PURE__ */ jsx(McpSettingsPane, { children: mcpSettingsPanel })
       ] });
     }
     return /* @__PURE__ */ jsx(
-      Settings,
+      FlatSettings,
       {
-        className: classes.settingsFlat,
         fields: [
           {
             id: "mcp-servers-settings",
@@ -1690,14 +1597,16 @@ const LightspeedChat = ({
       }
     ),
     /* @__PURE__ */ jsxs(
-      Chatbot,
+      StyledChatbot,
       {
         displayMode: ChatbotDisplayMode.embedded,
-        className: `${classes.body} ${!isFullscreenMode ? classes.bodyCompact : ""} ${isMcpSettingsOpen && !isChatHistoryDrawerOpen ? classes.mcpCollapsedDrawerOrderFix : ""}`,
+        isCompact: !isFullscreenMode,
+        compactDrawerOpen: !isFullscreenMode && isChatHistoryDrawerOpen,
+        mcpDrawerFix: isMcpSettingsOpen && !isChatHistoryDrawerOpen,
         children: [
-          /* @__PURE__ */ jsxs(ChatbotHeader, { className: classes.header, children: [
+          /* @__PURE__ */ jsxs(StyledChatbotHeader, { children: [
             /* @__PURE__ */ jsxs(ChatbotHeaderMain, { children: [
-              showChatPanel && !isFullscreenMode && /* @__PURE__ */ jsxs("div", { className: classes.chatHeaderActions, children: [
+              showChatPanel && !isFullscreenMode && /* @__PURE__ */ jsxs(HeaderActions, { children: [
                 /* @__PURE__ */ jsx(
                   Tooltip,
                   {
@@ -1744,10 +1653,9 @@ const LightspeedChat = ({
                   }
                 )
               ] }),
-              !isFullscreenMode && showNotebooksPanel && activeNotebook && /* @__PURE__ */ jsx(
+              !isFullscreenMode && showNotebooksPanel && activeNotebook && /* @__PURE__ */ jsx(HeaderActions, { children: /* @__PURE__ */ jsx(
                 NotebookHeaderActions,
                 {
-                  className: classes.notebookHeaderActions,
                   onClose: handleCloseNotebook,
                   onOpenUploadModal: () => setNotebookUploadModalOpen(true),
                   uploadsInProgress: notebookUploadsInProgress,
@@ -1755,17 +1663,16 @@ const LightspeedChat = ({
                   sidebarCollapsed: notebookSidebarCollapsed,
                   onSidebarCollapsedChange: setNotebookSidebarCollapsed
                 }
-              ),
+              ) }),
               isFullscreenMode && /* @__PURE__ */ jsxs(Fragment, { children: [
                 /* @__PURE__ */ jsx(
-                  RhUiAiExperienceIcon,
+                  HeaderLogo,
                   {
                     style: { width: "24px", height: "24px" },
-                    "aria-label": t("icon.lightspeed.alt"),
-                    className: classes.headerLogo
+                    "aria-label": t("icon.lightspeed.alt")
                   }
                 ),
-                /* @__PURE__ */ jsx(ChatbotHeaderTitle, { className: classes.headerTitle, children: /* @__PURE__ */ jsx(
+                /* @__PURE__ */ jsx(StyledChatbotHeaderTitle, { children: /* @__PURE__ */ jsx(
                   Title,
                   {
                     headingLevel: "h1",
@@ -1785,6 +1692,7 @@ const LightspeedChat = ({
                 isPinningChatsEnabled,
                 hideModelSelector: true,
                 showChatTabOptions: !showNotebooksPanel,
+                showMcpSettings: mcpToolsPermissionResolved,
                 setDisplayMode: setDisplayModeFromHeader,
                 displayMode,
                 onPinnedChatsToggle: handlePinningChatsToggle,
@@ -1792,16 +1700,17 @@ const LightspeedChat = ({
               }
             )
           ] }),
-          (isFullscreenMode || shouldShowTabs) && /* @__PURE__ */ jsx("div", { className: classes.headerDivider }),
+          /* @__PURE__ */ jsx(HeaderDivider, { "data-testid": "lightspeed-header-divider" }),
           shouldShowTabs && /* @__PURE__ */ jsxs(
             Tabs,
             {
-              value: activeTab,
+              value: selectedTabIndex,
               onChange: handleNotebookTabSelect,
               "aria-label": t("tabs.ariaLabel"),
               variant: "standard",
               textColor: "primary",
               sx: (theme) => ({
+                flexShrink: 0,
                 backgroundColor: "var(--pf-t--global--background--color--floating--default)",
                 borderBottom: "1px solid var(--pf-t--global--border--color--default)",
                 minHeight: theme.spacing(6),
@@ -1811,6 +1720,7 @@ const LightspeedChat = ({
                   gap: theme.spacing(2)
                 },
                 '& [role="tab"]': {
+                  minWidth: "auto",
                   fontWeight: 700,
                   textTransform: "none",
                   opacity: 1,
@@ -1836,7 +1746,7 @@ const LightspeedChat = ({
                 }
               }),
               children: [
-                /* @__PURE__ */ jsx(
+                hasChatTab && /* @__PURE__ */ jsx(
                   Tab,
                   {
                     disableRipple: true,
@@ -1844,213 +1754,171 @@ const LightspeedChat = ({
                     "aria-label": t("tabs.chat")
                   }
                 ),
-                /* @__PURE__ */ jsx(
+                hasNotebooksTab && /* @__PURE__ */ jsx(
                   Tab,
                   {
                     disableRipple: true,
-                    label: /* @__PURE__ */ jsxs(
-                      "span",
+                    label: /* @__PURE__ */ jsxs(NotebooksTabLabel, { isCompact: !isFullscreenMode, children: [
+                      t("tabs.notebooks"),
+                      /* @__PURE__ */ jsx(
+                        Label,
+                        {
+                          color: "purple",
+                          isCompact: !isFullscreenMode,
+                          style: {
+                            alignSelf: "center",
+                            margin: 0,
+                            lineHeight: 1,
+                            flexShrink: 0
+                          },
+                          children: t("tabs.notebooks.devPreview")
+                        }
+                      )
+                    ] }),
+                    "aria-label": t("tabs.notebooks")
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs(ChatMain, { children: [
+            showChatPanel && chatPermissionResolved && /* @__PURE__ */ jsx(
+              ConditionalWrapper,
+              {
+                condition: isFullscreenMode,
+                wrapper: (children) => /* @__PURE__ */ jsxs(FullscreenChatLayout, { children: [
+                  !isChatHistoryDrawerOpen && /* @__PURE__ */ jsx(
+                    CollapsedHistoryStrip,
+                    {
+                      onExpand: () => setIsChatHistoryDrawerOpen(true),
+                      onNewChat,
+                      newChatDisabled: newChatCreated
+                    }
+                  ),
+                  children
+                ] }),
+                children: /* @__PURE__ */ jsx(
+                  ChatbotConversationHistoryNav,
+                  {
+                    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: filteredConversations,
+                    onNewChat,
+                    newChatButtonText: t("button.newChat"),
+                    newChatButtonProps: {
+                      icon: /* @__PURE__ */ jsx(PenIcon, {}),
+                      isDisabled: newChatCreated
+                    },
+                    handleTextInputChange: handleFilter,
+                    searchInputPlaceholder: t("chatbox.search.placeholder"),
+                    searchInputAriaLabel: t("aria.search.placeholder"),
+                    searchInputProps,
+                    searchActionEnd: sortDropdown,
+                    noResultsState,
+                    drawerContent: /* @__PURE__ */ jsxs(
+                      ChatFileDropZone,
                       {
-                        style: {
-                          display: "inline-flex",
-                          alignItems: "center",
-                          gap: 8
-                        },
+                        onFileDrop: (e, data) => handleAttach(data, e),
+                        displayMode: ChatbotDisplayMode.embedded,
+                        infoText: t("chatbox.fileUpload.infoText"),
+                        allowedFileTypes: supportedFileTypes,
+                        onAttachRejected,
                         children: [
-                          t("tabs.notebooks"),
-                          /* @__PURE__ */ jsx(
-                            Label,
+                          showAlert && uploadError.message && /* @__PURE__ */ jsx(ErrorContainer, { children: /* @__PURE__ */ jsx(
+                            ChatbotAlert,
                             {
-                              color: "purple",
-                              style: {
-                                alignSelf: "center",
-                                margin: 0,
-                                lineHeight: 1
-                              },
-                              children: t("tabs.notebooks.devPreview")
+                              component: "h4",
+                              title: t("chatbox.fileUpload.failed"),
+                              variant: uploadError.type ?? "danger",
+                              isInline: true,
+                              onClose: () => setUploadError({ message: null }),
+                              children: uploadError.message
                             }
-                          )
+                          ) }),
+                          mainPanelContent
                         ]
                       }
-                    ),
-                    "aria-label": t("tabs.notebooks")
+                    )
                   }
                 )
-              ]
-            }
-          ),
-          showChatPanel && /* @__PURE__ */ jsx(
-            ConditionalWrapper,
-            {
-              condition: isFullscreenMode,
-              wrapper: (children) => /* @__PURE__ */ jsxs("div", { className: classes.fullscreenChatLayout, children: [
-                !isChatHistoryDrawerOpen && /* @__PURE__ */ jsx(
-                  CollapsedHistoryStrip,
+              }
+            ),
+            showNotebooksPanel && canShowNotebooks && activeNotebook && /* @__PURE__ */ jsx(
+              NotebookView,
+              {
+                sessionId: activeNotebook.session_id,
+                notebookName: activeNotebook.name,
+                documents: notebookDocuments,
+                isDocumentsFetching,
+                metadata: activeNotebook.metadata,
+                topicSummary: conversations.find(
+                  (c) => c.conversation_id === activeNotebook.metadata?.conversation_id
+                )?.topic_summary ?? void 0,
+                userName,
+                avatar,
+                profileLoading,
+                topicRestrictionEnabled,
+                onClose: handleCloseNotebook,
+                isCompact: !isFullscreenMode,
+                sidebarCollapsed: notebookSidebarCollapsed,
+                onSidebarCollapsedChange: setNotebookSidebarCollapsed,
+                isUploadModalOpen: notebookUploadModalOpen,
+                onUploadModalOpenChange: setNotebookUploadModalOpen,
+                onUploadsInProgressChange: setNotebookUploadsInProgress
+              }
+            ),
+            showNotebooksPanel && canShowNotebooks && !activeNotebook && /* @__PURE__ */ jsx(
+              "div",
+              {
+                style: {
+                  position: "relative",
+                  display: "flex",
+                  flexDirection: "column",
+                  flex: 1,
+                  minHeight: 0,
+                  overflow: "hidden"
+                },
+                children: /* @__PURE__ */ jsx(
+                  NotebooksTab,
                   {
-                    onExpand: () => setIsChatHistoryDrawerOpen(true),
-                    onNewChat,
-                    newChatDisabled: newChatCreated
+                    notebooks,
+                    hasNotebooks,
+                    isCompact: !isFullscreenMode,
+                    openNotebookMenuId,
+                    setOpenNotebookMenuId,
+                    onSelectNotebook: (notebook) => {
+                      maybeAutoDeleteScratchNotebook();
+                      setActiveNotebookId(notebook.session_id);
+                      if (isFullscreenMode) {
+                        navigate(
+                          `${LIGHTSPEED_PATH}/notebooks/${notebook.session_id}`
+                        );
+                      }
+                    },
+                    onRename: handleRenameNotebook,
+                    onDelete: setDeleteNotebookId,
+                    onCreateNotebook: handleCreateNotebook,
+                    t
                   }
-                ),
-                children
-              ] }),
-              children: /* @__PURE__ */ jsx(
-                ChatbotConversationHistoryNav,
-                {
-                  drawerPanelContentProps: {
-                    isResizable: isFullscreenMode,
-                    hasNoBorder: !isFullscreenMode,
-                    style: drawerPanelStyle,
-                    ...!isFullscreenMode && isChatHistoryDrawerOpen && {
-                      className: classes.compactDrawerPanel
-                    }
-                  },
-                  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,
-                  newChatButtonText: t("button.newChat"),
-                  newChatButtonProps: {
-                    icon: /* @__PURE__ */ jsx(PenIcon, {}),
-                    isDisabled: newChatCreated
-                  },
-                  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
-                      ]
-                    }
-                  )
-                }
-              )
-            }
-          ),
-          showNotebooksPanel && !notebooksPermissionLoading && hasNotebooksAccess && activeNotebook && /* @__PURE__ */ jsx(
-            NotebookView,
-            {
-              sessionId: activeNotebook.session_id,
-              notebookName: activeNotebook.name,
-              documents: notebookDocuments,
-              isDocumentsFetching,
-              metadata: activeNotebook.metadata,
-              topicSummary: conversations.find(
-                (c) => c.conversation_id === activeNotebook.metadata?.conversation_id
-              )?.topic_summary ?? void 0,
-              userName,
-              avatar,
-              profileLoading,
-              topicRestrictionEnabled,
-              onClose: handleCloseNotebook,
-              isCompact: !isFullscreenMode,
-              sidebarCollapsed: notebookSidebarCollapsed,
-              onSidebarCollapsedChange: setNotebookSidebarCollapsed,
-              isUploadModalOpen: notebookUploadModalOpen,
-              onUploadModalOpenChange: setNotebookUploadModalOpen,
-              onUploadsInProgressChange: setNotebookUploadsInProgress
-            }
-          ),
-          showNotebooksPanel && !notebooksPermissionLoading && hasNotebooksAccess && !activeNotebook && /* @__PURE__ */ jsx(
-            "div",
-            {
-              style: {
-                position: "relative",
-                display: "flex",
-                flexDirection: "column",
-                flex: 1,
-                minHeight: 0,
-                overflow: "hidden"
-              },
-              children: /* @__PURE__ */ jsx(
-                NotebooksTab,
-                {
-                  notebooks,
-                  hasNotebooks,
-                  classes: isFullscreenMode ? classes : {
-                    ...classes,
-                    notebooksGrid: classes.notebooksGridCompact
-                  },
-                  openNotebookMenuId,
-                  setOpenNotebookMenuId,
-                  onSelectNotebook: (notebook) => {
-                    maybeAutoDeleteScratchNotebook();
-                    setActiveNotebookId(notebook.session_id);
-                    if (isFullscreenMode) {
-                      navigate(
-                        `${LIGHTSPEED_PATH}/notebooks/${notebook.session_id}`
-                      );
-                    }
-                  },
-                  onRename: handleRenameNotebook,
-                  onDelete: setDeleteNotebookId,
-                  onCreateNotebook: handleCreateNotebook,
-                  t
-                }
-              )
-            }
-          ),
-          showNotebooksPanel && !notebooksPermissionLoading && !hasNotebooksAccess && /* @__PURE__ */ jsx(
-            PermissionRequiredState,
-            {
-              subject: t("permission.subject.notebooks"),
-              permissions: [iaNotebooksPermissionName],
-              action: /* @__PURE__ */ jsx(
-                Button$1,
-                {
-                  variant: "outlined",
-                  color: "primary",
-                  style: { borderRadius: "20px" },
-                  onClick: () => {
-                    setActiveTab(0);
-                    setShellViewTab(0);
-                  },
-                  children: t("permission.notebooks.goBack")
-                }
-              )
-            }
-          )
+                )
+              }
+            )
+          ] })
         ]
       }
     ),