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

package/dist/components/LightSpeedChat.esm.js

@@ -2,13 +2,14 @@ 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 Button$1 from '@mui/material/Button';
+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';
@@ -65,37 +66,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 +137,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
+    border: "none"
   },
-  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)
-  },
-  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 +404,6 @@ const LightspeedChat = ({
   models
 }) => {
   const isMobile = useIsMobile();
-  const classes = useStyles();
   const { t } = useTranslation();
   const navigate = useNavigate();
   const configApi = useApi(configApiRef);
@@ -1165,7 +1017,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 +1071,7 @@ const LightspeedChat = ({
       if (isNoPinnedChatsSearchResults && isNoRecentChatsSearchResults) {
         return {};
       }
-      return filteredConversations;
+      return filteredConversations2;
     },
     [categorizedMessages, isPinningChatsEnabled, t]
   );
@@ -1410,6 +1262,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 +1337,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 +1345,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 +1384,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,
@@ -1625,15 +1481,14 @@ const LightspeedChat = ({
       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 +1545,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 +1601,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 +1611,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",
@@ -1792,7 +1647,7 @@ const LightspeedChat = ({
               }
             )
           ] }),
-          (isFullscreenMode || shouldShowTabs) && /* @__PURE__ */ jsx("div", { className: classes.headerDivider }),
+          (isFullscreenMode || shouldShowTabs) && /* @__PURE__ */ jsx(HeaderDivider, {}),
           shouldShowTabs && /* @__PURE__ */ jsxs(
             Tabs,
             {
@@ -1802,6 +1657,7 @@ const LightspeedChat = ({
               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 +1667,7 @@ const LightspeedChat = ({
                   gap: theme.spacing(2)
                 },
                 '& [role="tab"]': {
+                  minWidth: "auto",
                   fontWeight: 700,
                   textTransform: "none",
                   opacity: 1,
@@ -1848,209 +1705,187 @@ const LightspeedChat = ({
                   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 && /* @__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 && !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,
                   {
-                    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")
-                }
-              )
-            }
-          )
+                )
+              }
+            ),
+            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")
+                  }
+                )
+              }
+            )
+          ] })
         ]
       }
     ),