@red-hat-developer-hub/backstage-plugin-intelligent-assistant 3.0.0

package/dist/components/LightSpeedChat.esm.js

@@ -0,0 +1,1898 @@
+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 } from '@material-ui/core';
+import Tab from '@mui/material/Tab';
+import Tabs from '@mui/material/Tabs';
+import { ChatbotDisplayMode, ChatbotContent, ChatbotFooter, MessageBar, Settings, Chatbot, ChatbotHeader, ChatbotHeaderMain, ChatbotHeaderMenu, ChatbotHeaderTitle, FileDropZone, ChatbotAlert } from '@patternfly/chatbot';
+import ChatbotConversationHistoryNav from '@patternfly/chatbot/dist/dynamic/ChatbotConversationHistoryNav';
+import { DropdownItem, Tooltip, MenuToggle, Select, SelectList, SelectOption, AlertGroup, Alert, AlertVariant, AlertActionCloseButton, Title, Label } from '@patternfly/react-core';
+import { PenIcon, ThumbtackIcon, TrashIcon, SortAmountDownAltIcon, SortAmountDownIcon, PlusIcon, SearchIcon } 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';
+import '../api/api.esm.js';
+import { useBackstageUserIdentity } from '../hooks/useBackstageUserIdentity.esm.js';
+import { useConversationMessages } from '../hooks/useConversationMessages.esm.js';
+import { useConversations } from '../hooks/useConversations.esm.js';
+import '../api/notebooksApi.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 '@backstage/plugin-permission-react';
+import '@red-hat-developer-hub/backstage-plugin-intelligent-assistant-common';
+import { useNotebookConversationIds } from '../hooks/useNotebookConversationIds.esm.js';
+import { useNotebookSession } from '../hooks/notebooks/useNotebookSession.esm.js';
+import { useNotebookSessions } from '../hooks/notebooks/useNotebookSessions.esm.js';
+import { usePinnedChatsSettings } from '../hooks/usePinnedChatsSettings.esm.js';
+import { useSortSettings } from '../hooks/useSortSettings.esm.js';
+import { useStopConversation } from '../hooks/useStopConversation.esm.js';
+import { useTranslation } from '../hooks/useTranslation.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 { getCategorizeMessages, ChatbotFootnoteWithIcon, getFootnoteProps } from '../utils/lightspeed-chatbox-utils.esm.js';
+import Attachment from './Attachment.esm.js';
+import { useFileAttachmentContext } from './AttachmentContext.esm.js';
+import { CollapsedHistoryStrip } from './CollapsedHistoryStrip.esm.js';
+import { DeleteModal } from './DeleteModal.esm.js';
+import FilePreview from './FilePreview.esm.js';
+import { LightspeedChatBox } from './LightspeedChatBox.esm.js';
+import { LightspeedChatBoxHeader } from './LightspeedChatBoxHeader.esm.js';
+import { McpServersSettings } from './McpServersSettings.esm.js';
+import { MessageBarModelSelector } from './MessageBarModelSelector.esm.js';
+import { DeleteNotebookModal } from './notebooks/DeleteNotebookModal.esm.js';
+import { NotebooksTab } from './notebooks/NotebooksTab.esm.js';
+import { NotebookView } from './notebooks/NotebookView.esm.js';
+import { RenameNotebookModal } from './notebooks/RenameNotebookModal.esm.js';
+import PermissionRequiredState from './PermissionRequiredState.esm.js';
+import { RenameConversationModal } from './RenameConversationModal.esm.js';
+
+const COLLAPSE_PANEL_ICON_SVG = `url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16 21V3H14V21H16ZM12 17V7L7 12L12 17Z' fill='black'/%3E%3C/svg%3E") no-repeat center`;
+const ConditionalWrapper = ({
+  condition,
+  wrapper,
+  children
+}) => condition ? wrapper(children) : children;
+const useStyles = makeStyles((theme) => ({
+  body: {
+    // remove default margin and padding from common elements
+    // lists excluded for proper formatting
+    "& 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"
+    }
+  },
+  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"
+  },
+  errorContainer: {
+    padding: theme.spacing(3)
+  },
+  drawerFileDropZone: {
+    gap: 0,
+    rowGap: 0,
+    columnGap: 0,
+    "--pf-v6-c-multiple-file-upload--Gap": "0",
+    "--pf-v5-c-multiple-file-upload--Gap": "0",
+    flex: 1,
+    minWidth: 0,
+    backgroundColor: "var(--pf-t--global--background--color--floating--default) !important"
+  },
+  headerMenu: {
+    // align hamburger icon with title
+    "& .pf-v6-c-button": {
+      display: "flex",
+      alignItems: "center"
+    }
+  },
+  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",
+    flex: 1,
+    minHeight: 0,
+    overflowY: "auto",
+    backgroundColor: "var(--pf-t--global--background--color--floating--default)"
+  },
+  notebooksHeader: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    marginBottom: theme.spacing(4)
+  },
+  notebooksHeading: {
+    marginBottom: 0
+  },
+  notebooksHeadingEmpty: {
+    "&&": {
+      marginBottom: theme.spacing(1),
+      paddingBottom: theme.spacing(1)
+    }
+  },
+  notebooksEmptyState: {
+    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))"
+    }
+  },
+  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(2),
+    paddingBottom: 0,
+    alignItems: "center"
+  },
+  notebookCardDivider: {
+    borderTop: "1px solid var(--pf-t--global--border--color--default)",
+    marginTop: theme.spacing(1)
+  },
+  notebookCardBody: {
+    padding: theme.spacing(2),
+    paddingTop: theme.spacing(1.5)
+  },
+  notebookDocuments: {
+    paddingTop: theme.spacing(1),
+    paddingLeft: theme.spacing(2)
+  },
+  notebookUpdated: {
+    paddingBottom: theme.spacing(5),
+    paddingLeft: theme.spacing(2),
+    paddingTop: theme.spacing(2)
+  },
+  notebookTitle: {
+    display: "flex",
+    alignItems: "center",
+    gap: theme.spacing(1),
+    minWidth: 0,
+    flex: 1
+  },
+  notebookCardHeaderActions: {
+    marginLeft: theme.spacing(1)
+  },
+  notebookTitleText: {
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    whiteSpace: "nowrap"
+  },
+  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(1.5),
+    paddingRight: theme.spacing(1.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: {
+    padding: 0,
+    margin: 0
+  },
+  // Outer content wrapper (library may override overflow; we rely on inner scroll wrapper).
+  chatbotContent: {
+    minHeight: 0,
+    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"
+    }
+  },
+  // Inner scroll container we control: always scrollable so zoomed-in users see full content.
+  chatbotContentScroll: {
+    minHeight: 0,
+    flex: 1,
+    display: "flex",
+    flexDirection: "column",
+    overflowY: "auto",
+    WebkitOverflowScrolling: "touch"
+  },
+  chatbotContentScrollNewChat: {
+    backgroundColor: "var(--pf-t--global--background--color--floating--default) !important"
+  },
+  toastAlertGroup: {
+    "--pf-v6-c-alert-group--m-toast--InsetInlineEnd": `${theme.spacing(2.5)}px`,
+    "--pf-v6-c-alert-group--m-toast--InsetBlockStart": `${theme.spacing(2.5)}px`,
+    "--pf-v6-c-alert-group--m-toast--MaxWidth": "350px",
+    "--pf-v6-c-alert-group--m-toast--ZIndex": "9999"
+  },
+  toastAlert: {
+    maxWidth: "350px",
+    "& .pf-v6-c-alert__title": {
+      margin: 0
+    }
+  },
+  // When present, pushes welcome content to bottom (zoom out). Scroll up to see important box (zoom in).
+  chatbotContentSpacer: {
+    flex: 1,
+    minHeight: 0
+  },
+  settingsFlat: {
+    height: "100%",
+    width: "100%",
+    "&.pf-chatbot__settings-form-container": {
+      background: "var(--pf-v6-c-table--BackgroundColor, var(--pf-t--global--background--color--primary--default))",
+      padding: 0,
+      margin: 0,
+      minHeight: "100%",
+      display: "flex",
+      flexDirection: "column",
+      width: "100%",
+      maxWidth: "none"
+    },
+    "& .pf-chatbot__settings-form": {
+      margin: 0,
+      padding: 0,
+      background: "var(--pf-v6-c-table--BackgroundColor, var(--pf-t--global--background--color--primary--default))",
+      minHeight: "100%",
+      display: "flex",
+      flexDirection: "column",
+      width: "100%",
+      maxWidth: "none"
+    },
+    "& .pf-chatbot__settings-form-row": {
+      background: "var(--pf-v6-c-table--BackgroundColor, var(--pf-t--global--background--color--primary--default))",
+      border: 0,
+      margin: 0,
+      padding: 0,
+      minHeight: "100%",
+      display: "flex",
+      flexDirection: "column",
+      width: "100%",
+      maxWidth: "none"
+    },
+    "& .pf-chatbot__settings-label": {
+      display: "none"
+    }
+  },
+  mcpFullscreenLayout: {
+    display: "grid",
+    gridTemplateColumns: "minmax(0, 1fr) minmax(0, 1fr)",
+    minHeight: 0,
+    height: "100%",
+    flex: 1,
+    width: "100%",
+    minWidth: 0,
+    overflow: "hidden"
+  },
+  mcpChatPane: {
+    display: "flex",
+    flexDirection: "column",
+    minHeight: 0,
+    width: "100%",
+    minWidth: 0,
+    whiteSpace: "normal",
+    wordBreak: "break-word",
+    overflowWrap: "break-word"
+  },
+  mcpSettingsPane: {
+    width: "100%",
+    minWidth: 0,
+    borderLeft: `1px solid ${theme.palette.divider}`,
+    backgroundColor: "var(--pf-v6-c-table--BackgroundColor, var(--pf-t--global--background--color--primary--default))",
+    display: "flex",
+    flexDirection: "column",
+    minHeight: 0,
+    overflow: "auto"
+  },
+  mcpCollapsedDrawerOrderFix: {
+    "& .pf-v6-c-drawer.pf-m-panel-left > .pf-v6-c-drawer__main > .pf-v6-c-drawer__content, & .pf-v5-c-drawer.pf-m-panel-left > .pf-v5-c-drawer__main > .pf-v5-c-drawer__content": {
+      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"
+    }
+  },
+  // 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: {
+    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
+    }
+  },
+  fullscreenMainContent: {
+    display: "flex",
+    flexDirection: "column",
+    flex: 1,
+    minHeight: 0,
+    minWidth: 0,
+    overflow: "hidden"
+  }
+}));
+const LightspeedChat = ({
+  selectedModel,
+  topicRestrictionEnabled,
+  selectedProvider,
+  userName,
+  avatar,
+  profileLoading,
+  handleSelectedModel,
+  models
+}) => {
+  const isMobile = useIsMobile();
+  const classes = useStyles();
+  const { t } = useTranslation();
+  const navigate = useNavigate();
+  const configApi = useApi(configApiRef);
+  const notebooksEnabled = configApi.getOptionalBoolean("intelligent-assistant.notebooks.enabled") ?? false;
+  const notebooksRouteMatch = useMatch(`${LIGHTSPEED_PATH}/notebooks`);
+  const notebookViewRouteMatch = useMatch(
+    `${LIGHTSPEED_PATH}/notebooks/:notebookId`
+  );
+  const routeNotebookId = notebookViewRouteMatch?.params?.notebookId;
+  const isOnNotebookRoute = Boolean(
+    notebooksRouteMatch || notebookViewRouteMatch
+  );
+  const shouldShowTabs = notebooksEnabled || isOnNotebookRoute;
+  const {
+    displayMode,
+    setDisplayMode,
+    currentConversationId: routeConversationId,
+    setCurrentConversationId,
+    draftMessage,
+    setDraftMessage,
+    consumePendingOverlayThreadHandoff,
+    shellViewTab,
+    setShellViewTab
+  } = useLightspeedDrawerContext();
+  const isFullscreenMode = displayMode === ChatbotDisplayMode.embedded;
+  const location = useLocation();
+  const isNotebooksFullscreenPath = location.pathname === `${LIGHTSPEED_PATH}/notebooks` || location.pathname.startsWith(`${LIGHTSPEED_PATH}/notebooks/`);
+  const user = useBackstageUserIdentity();
+  const [filterValue, setFilterValue] = useState("");
+  const [announcement, setAnnouncement] = useState("");
+  const [activeTab, setActiveTab] = useState(() => {
+    if (!isFullscreenMode) {
+      return 0;
+    }
+    if (notebooksRouteMatch || notebookViewRouteMatch) {
+      return 1;
+    }
+    const p = location.pathname;
+    if (p.startsWith(`${LIGHTSPEED_PATH}/conversation/`)) {
+      return 0;
+    }
+    if (shellViewTab === 1) {
+      return 1;
+    }
+    return 0;
+  });
+  const { allowed: hasNotebooksAccess, loading: notebooksPermissionLoading } = useLightspeedNotebooksPermission();
+  const notebooksPermissionResolved = !notebooksPermissionLoading && hasNotebooksAccess;
+  const { data: notebookConversationIdsArray = [] } = useNotebookConversationIds();
+  const { data: notebooks = [], refetch: refetchNotebooks } = useNotebookSessions(notebooksPermissionResolved);
+  const hasNotebooks = notebooks.length > 0;
+  const [openNotebookMenuId, setOpenNotebookMenuId] = useState(
+    null
+  );
+  const [renameNotebookId, setRenameNotebookId] = useState(null);
+  const [deleteNotebookId, setDeleteNotebookId] = useState(null);
+  const [activeNotebook, setActiveNotebook] = useState(
+    null
+  );
+  const {
+    data: routeNotebook,
+    isLoading: routeNotebookLoading,
+    isError: routeNotebookError
+  } = useNotebookSession(routeNotebookId);
+  useEffect(() => {
+    if (routeNotebookId && routeNotebook && !routeNotebookLoading) {
+      setActiveNotebook(routeNotebook);
+    } else if (routeNotebookId && routeNotebookError) {
+      navigate(`${LIGHTSPEED_PATH}/notebooks`, { replace: true });
+    } else if (!routeNotebookId && notebooksRouteMatch) {
+      setActiveNotebook(null);
+    }
+  }, [
+    routeNotebookId,
+    routeNotebook,
+    routeNotebookLoading,
+    routeNotebookError,
+    notebooksRouteMatch,
+    navigate
+  ]);
+  const [notebookAlerts, setNotebookAlerts] = useState(
+    []
+  );
+  const createNotebookMutation = useCreateNotebook();
+  const { data: notebookDocuments = [], isFetching: isDocumentsFetching } = useNotebookDocuments(activeNotebook?.session_id);
+  const [conversationId, setConversationId] = useState("");
+  const [requestId, setRequestId] = useState("");
+  const [newChatCreated, setNewChatCreated] = useState(false);
+  const [isSendButtonDisabled, setIsSendButtonDisabled] = useState(false);
+  const [targetConversationId, setTargetConversationId] = useState("");
+  const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
+  const [isRenameModalOpen, setIsRenameModalOpen] = useState(false);
+  const [isSortSelectOpen, setIsSortSelectOpen] = useState(false);
+  const [isMcpSettingsOpen, setIsMcpSettingsOpen] = useState(false);
+  const [chatHeaderBgColor, setChatHeaderBgColor] = useState();
+  const contentScrollRef = useRef(null);
+  const bottomSentinelRef = useRef(null);
+  const [messageBarKey, setMessageBarKey] = useState(0);
+  const [hasChatContentOverflow, setHasChatContentOverflow] = useState(false);
+  const wasStoppedByUserRef = useRef(false);
+  const { isReady, lastOpenedId, setLastOpenedId, clearLastOpenedId } = useLastOpenedConversation(user);
+  const showChatPanel = !isFullscreenMode || activeTab === 0;
+  const showNotebooksPanel = (notebooksEnabled || isOnNotebookRoute) && activeTab !== 0;
+  const [isChatHistoryDrawerOpen, setIsChatHistoryDrawerOpen] = useState(!isMobile && isFullscreenMode);
+  useLayoutEffect(() => {
+    if (!isFullscreenMode) {
+      return;
+    }
+    if (isNotebooksFullscreenPath) {
+      setActiveTab(1);
+      setShellViewTab(1);
+      return;
+    }
+    const isBaseLightspeedChatRoute = location.pathname === LIGHTSPEED_PATH || location.pathname === `${LIGHTSPEED_PATH}/`;
+    if (shellViewTab === 1 && isBaseLightspeedChatRoute) {
+      navigate(`${LIGHTSPEED_PATH}/notebooks`, { replace: true });
+      return;
+    }
+    setActiveTab(0);
+    setShellViewTab(0);
+  }, [
+    isFullscreenMode,
+    isNotebooksFullscreenPath,
+    shellViewTab,
+    location.pathname,
+    navigate,
+    setShellViewTab
+  ]);
+  const handleNotebookTabSelect = (_event, nextTab) => {
+    setActiveTab(nextTab);
+    setShellViewTab(nextTab);
+    if (nextTab === 1) {
+      navigate(`${LIGHTSPEED_PATH}/notebooks`);
+      if (notebooksPermissionResolved) {
+        refetchNotebooks();
+      }
+    } else {
+      navigate(
+        routeConversationId ? `${LIGHTSPEED_PATH}/conversation/${routeConversationId}` : LIGHTSPEED_PATH
+      );
+    }
+  };
+  const setDisplayModeFromHeader = useCallback(
+    (mode) => {
+      if (mode !== ChatbotDisplayMode.embedded) {
+        setDisplayMode(mode);
+        return;
+      }
+      if (activeTab === 1) {
+        const sid = activeNotebook?.session_id;
+        setDisplayMode(
+          mode,
+          void 0,
+          sid ? { notebookSessionId: sid } : "notebooks"
+        );
+      } else {
+        setDisplayMode(mode);
+      }
+    },
+    [setDisplayMode, activeTab, activeNotebook?.session_id]
+  );
+  const handleCreateNotebook = useCallback(() => {
+    createNotebookMutation.mutate(
+      { name: UNTITLED_NOTEBOOK_NAME },
+      {
+        onSuccess: (session) => {
+          navigate(`${LIGHTSPEED_PATH}/notebooks/${session.session_id}`);
+        }
+      }
+    );
+  }, [createNotebookMutation, navigate]);
+  const handleCloseNotebook = useCallback(() => {
+    navigate(`${LIGHTSPEED_PATH}/notebooks`);
+    refetchNotebooks();
+  }, [navigate, refetchNotebooks]);
+  const handleRemoveNotebookAlert = (key) => {
+    setNotebookAlerts(
+      (prevAlerts) => prevAlerts.filter((alert) => alert.key !== key)
+    );
+  };
+  const handleNotebookDeleted = () => {
+    const key = Date.now();
+    setNotebookAlerts((prevAlerts) => [
+      { title: t("notebooks.delete.toast"), variant: "success", key },
+      ...prevAlerts
+    ]);
+  };
+  useEffect(() => {
+    if (!isMobile && isFullscreenMode) {
+      setIsChatHistoryDrawerOpen(true);
+    }
+  }, [isMobile, isFullscreenMode]);
+  useEffect(() => {
+    if (typeof window === "undefined") return;
+    const headerElement = document.querySelector(".pf-chatbot__header");
+    if (!headerElement) return;
+    const computedBg = window.getComputedStyle(headerElement).backgroundColor;
+    if (computedBg) {
+      setChatHeaderBgColor(computedBg);
+    }
+  }, [displayMode, isMcpSettingsOpen]);
+  const {
+    isPinningChatsEnabled,
+    pinnedChats,
+    handlePinningChatsToggle,
+    pinChat,
+    unpinChat
+  } = usePinnedChatsSettings(user);
+  const { selectedSort, handleSortChange } = useSortSettings(user);
+  const {
+    uploadError,
+    showAlert,
+    fileContents,
+    setShowAlert,
+    setFileContents,
+    handleFileUpload,
+    setUploadError
+  } = useFileAttachmentContext();
+  useLayoutEffect(() => {
+    if (!isReady) return;
+    if (isFullscreenMode) {
+      return;
+    }
+    const handoff = consumePendingOverlayThreadHandoff?.() ?? false;
+    if (handoff) {
+      if (routeConversationId) {
+        setConversationId(routeConversationId);
+        setNewChatCreated(false);
+      } else {
+        setConversationId(TEMP_CONVERSATION_ID);
+        setNewChatCreated(true);
+      }
+      return;
+    }
+    if (routeConversationId && routeConversationId !== conversationId) {
+      setConversationId(routeConversationId);
+      setNewChatCreated(false);
+    } else if (!routeConversationId && conversationId === "" && lastOpenedId !== null) {
+      setConversationId(lastOpenedId);
+    }
+  }, [
+    isReady,
+    isFullscreenMode,
+    routeConversationId,
+    conversationId,
+    lastOpenedId,
+    consumePendingOverlayThreadHandoff
+  ]);
+  useEffect(() => {
+    if (!isReady || !isFullscreenMode) {
+      return;
+    }
+    if (lastOpenedId !== null) {
+      setConversationId(lastOpenedId);
+    }
+  }, [lastOpenedId, isReady, isFullscreenMode]);
+  const queryClient = useQueryClient();
+  const {
+    data: conversations = [],
+    isLoading,
+    isRefetching
+  } = useConversations();
+  const { allowed: hasDeleteAccess } = useLightspeedDeletePermission();
+  const { allowed: hasUpdateAccess } = useLightspeedUpdatePermission();
+  const samplePrompts = useWelcomePrompts();
+  useEffect(() => {
+    if (!user || !isReady) return;
+    const onOverlayLikeSurface = isFullscreenMode || !routeConversationId;
+    const stillOnProvisionalThread = !conversationId || conversationId === TEMP_CONVERSATION_ID;
+    if (lastOpenedId === null) {
+      if (onOverlayLikeSurface && stillOnProvisionalThread) {
+        setConversationId(TEMP_CONVERSATION_ID);
+      }
+    }
+    if (lastOpenedId === TEMP_CONVERSATION_ID || lastOpenedId === null) {
+      if (onOverlayLikeSurface && stillOnProvisionalThread) {
+        setNewChatCreated(true);
+      }
+    }
+  }, [
+    user,
+    isReady,
+    lastOpenedId,
+    setConversationId,
+    isFullscreenMode,
+    routeConversationId,
+    conversationId
+  ]);
+  useEffect(() => {
+    if (!isLoading && !isRefetching && conversations.length === 0 && lastOpenedId) {
+      clearLastOpenedId();
+      setConversationId(TEMP_CONVERSATION_ID);
+      setNewChatCreated(true);
+      setCurrentConversationId(void 0);
+    }
+  }, [
+    isLoading,
+    isRefetching,
+    conversations,
+    lastOpenedId,
+    clearLastOpenedId,
+    setCurrentConversationId
+  ]);
+  useEffect(() => {
+    if (!isLoading && !isRefetching && routeConversationId && isFullscreenMode) {
+      const conversationExists = conversations.some(
+        (c) => c.conversation_id === routeConversationId
+      );
+      if (!conversationExists) {
+        if (routeConversationId !== conversationId) {
+          setConversationId(TEMP_CONVERSATION_ID);
+          setCurrentConversationId(void 0);
+          setNewChatCreated(true);
+        }
+      } else if (conversationId !== routeConversationId) {
+        setConversationId(routeConversationId);
+      }
+    }
+  }, [
+    isLoading,
+    isRefetching,
+    routeConversationId,
+    conversations,
+    displayMode,
+    conversationId,
+    setCurrentConversationId,
+    isFullscreenMode
+  ]);
+  useEffect(() => {
+    if (conversationId) {
+      setLastOpenedId(conversationId);
+    }
+  }, [conversationId, setLastOpenedId]);
+  const viewConversationId = useMemo(
+    () => !isFullscreenMode && routeConversationId ? routeConversationId : conversationId,
+    [isFullscreenMode, routeConversationId, conversationId]
+  );
+  const onStart = (conv_id) => {
+    setConversationId(conv_id);
+    setCurrentConversationId(conv_id);
+  };
+  const onRequestIdReady = (request_id) => {
+    setRequestId(request_id);
+  };
+  const onComplete = (message) => {
+    setIsSendButtonDisabled(false);
+    if (!wasStoppedByUserRef.current) {
+      setAnnouncement(`Message from Bot: ${message}`);
+    }
+    wasStoppedByUserRef.current = false;
+    queryClient.invalidateQueries({
+      queryKey: ["conversations"]
+    });
+    queryClient.invalidateQueries({
+      queryKey: ["conversationMessages", viewConversationId]
+    });
+    setNewChatCreated(false);
+  };
+  const {
+    conversationMessages,
+    handleInputPrompt,
+    scrollToBottomRef,
+    streamingConversationId
+  } = useConversationMessages(
+    viewConversationId,
+    userName,
+    selectedModel,
+    selectedProvider,
+    avatar,
+    onComplete,
+    onStart,
+    void 0,
+    onRequestIdReady
+  );
+  const streamingUiMatchesView = isSendButtonDisabled && streamingConversationId !== null && viewConversationId === streamingConversationId;
+  const [messages, setMessages] = useState(conversationMessages);
+  const sendMessage = (message) => {
+    if (!message.toString().trim()) return;
+    wasStoppedByUserRef.current = false;
+    if (viewConversationId !== TEMP_CONVERSATION_ID) {
+      setNewChatCreated(false);
+    }
+    setAnnouncement(
+      t("conversation.announcement.userMessage", {
+        prompt: message.toString()
+      })
+    );
+    handleInputPrompt(message.toString(), getAttachments(fileContents));
+    setIsSendButtonDisabled(true);
+    setFileContents([]);
+    setDraftMessage("");
+  };
+  const onNewChat = useCallback(() => {
+    (async () => {
+      if (!isFullscreenMode) {
+        setIsMcpSettingsOpen(false);
+      }
+      if (conversationId !== TEMP_CONVERSATION_ID) {
+        setMessages([]);
+        setFileContents([]);
+        setUploadError({ message: null });
+        setDraftMessage("");
+        setConversationId(TEMP_CONVERSATION_ID);
+        setNewChatCreated(true);
+        setCurrentConversationId(void 0);
+        if (!isFullscreenMode) {
+          setIsChatHistoryDrawerOpen(false);
+        }
+      } else {
+        setMessages([]);
+        setNewChatCreated(true);
+      }
+    })();
+  }, [
+    conversationId,
+    setFileContents,
+    setUploadError,
+    setDraftMessage,
+    setCurrentConversationId,
+    isFullscreenMode
+  ]);
+  const openDeleteModal = (conversation_id) => {
+    setTargetConversationId(conversation_id);
+    setIsDeleteModalOpen(true);
+  };
+  const openChatRenameModal = (conversation_id) => {
+    setTargetConversationId(conversation_id);
+    setIsRenameModalOpen(true);
+  };
+  const handleDeleteConversation = useCallback(() => {
+    if (targetConversationId === lastOpenedId) {
+      onNewChat();
+      clearLastOpenedId();
+    }
+    setIsDeleteModalOpen(false);
+  }, [clearLastOpenedId, lastOpenedId, onNewChat, targetConversationId]);
+  const additionalMessageProps = useCallback(
+    (conversationSummary) => {
+      const isChatFavorite = pinnedChats?.find(
+        (c) => c === conversationSummary.conversation_id
+      );
+      return {
+        menuItems: /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(
+            DropdownItem,
+            {
+              isDisabled: !hasUpdateAccess,
+              icon: /* @__PURE__ */ jsx(PenIcon, {}),
+              onClick: () => openChatRenameModal(conversationSummary.conversation_id),
+              children: t("conversation.rename")
+            }
+          ),
+          isPinningChatsEnabled && /* @__PURE__ */ jsx(Fragment, { children: isChatFavorite ? /* @__PURE__ */ jsx(
+            DropdownItem,
+            {
+              icon: /* @__PURE__ */ jsx(ThumbtackIcon, {}),
+              onClick: () => unpinChat(conversationSummary.conversation_id),
+              children: t("conversation.removeFromPinnedChats")
+            }
+          ) : /* @__PURE__ */ jsx(
+            DropdownItem,
+            {
+              icon: /* @__PURE__ */ jsx(ThumbtackIcon, {}),
+              onClick: () => pinChat(conversationSummary.conversation_id),
+              children: t("conversation.addToPinnedChats")
+            }
+          ) }),
+          /* @__PURE__ */ jsx(
+            DropdownItem,
+            {
+              isDisabled: !hasDeleteAccess,
+              icon: /* @__PURE__ */ jsx(TrashIcon, {}),
+              onClick: () => openDeleteModal(conversationSummary.conversation_id),
+              children: t("conversation.delete")
+            }
+          )
+        ] })
+      };
+    },
+    [
+      pinnedChats,
+      hasDeleteAccess,
+      isPinningChatsEnabled,
+      hasUpdateAccess,
+      t,
+      pinChat,
+      unpinChat
+    ]
+  );
+  const notebookConversationIds = useMemo(
+    () => new Set(notebookConversationIdsArray),
+    [notebookConversationIdsArray]
+  );
+  const chatOnlyConversations = useMemo(
+    () => conversations.filter(
+      (c) => !notebookConversationIds.has(c.conversation_id)
+    ),
+    [conversations, notebookConversationIds]
+  );
+  const deleteChatName = useMemo(
+    () => conversations.find((c) => c.conversation_id === targetConversationId)?.topic_summary ?? "",
+    [conversations, targetConversationId]
+  );
+  const categorizedMessages = useMemo(
+    () => getCategorizeMessages(
+      chatOnlyConversations,
+      pinnedChats,
+      additionalMessageProps,
+      t,
+      selectedSort
+    ),
+    [
+      additionalMessageProps,
+      chatOnlyConversations,
+      pinnedChats,
+      t,
+      selectedSort
+    ]
+  );
+  const filterConversations = useCallback(
+    (targetValue) => {
+      const pinnedChatsKey = t("conversation.category.pinnedChats") || "Pinned chats";
+      let isNoPinnedChatsSearchResults = false;
+      let isNoRecentChatsSearchResults = false;
+      const filteredConversations = Object.entries(categorizedMessages).reduce(
+        (acc, [key, items]) => {
+          const filteredItems = items.filter(
+            (item) => (item.text ?? "").toLocaleLowerCase("en-US").includes(targetValue.toLocaleLowerCase("en-US"))
+          );
+          const isPinnedCategory = key === pinnedChatsKey;
+          if (isPinnedCategory && isPinningChatsEnabled) {
+            if (filteredItems.length > 0) {
+              acc[pinnedChatsKey] = filteredItems;
+            } else {
+              isNoPinnedChatsSearchResults = categorizedMessages[pinnedChatsKey].length > 0;
+              acc[pinnedChatsKey] = [
+                {
+                  id: isNoPinnedChatsSearchResults ? "no-pinned-chats-search-results" : "no-pinned-chats",
+                  text: isNoPinnedChatsSearchResults ? t("common.noSearchResults") : t("chatbox.emptyState.noPinnedChats"),
+                  noIcon: true,
+                  additionalProps: {
+                    isDisabled: true,
+                    style: {
+                      fontStyle: "italic",
+                      opacity: 0.6
+                    }
+                  }
+                }
+              ];
+            }
+          } else if (!isPinnedCategory) {
+            if (filteredItems.length > 0) {
+              acc[key] = filteredItems;
+            } else {
+              isNoRecentChatsSearchResults = categorizedMessages[key].length > 0;
+              acc[key] = [
+                {
+                  id: isNoRecentChatsSearchResults ? "no-recent-chats-search-results" : "no-recent-chats",
+                  text: isNoRecentChatsSearchResults ? t("common.noSearchResults") : t("chatbox.emptyState.noRecentChats"),
+                  noIcon: true,
+                  additionalProps: {
+                    isDisabled: true,
+                    style: {
+                      fontStyle: "italic",
+                      opacity: 0.6
+                    }
+                  }
+                }
+              ];
+            }
+          }
+          return acc;
+        },
+        {}
+      );
+      if (isNoPinnedChatsSearchResults && isNoRecentChatsSearchResults) {
+        return {};
+      }
+      return filteredConversations;
+    },
+    [categorizedMessages, isPinningChatsEnabled, t]
+  );
+  useEffect(() => {
+    setMessages(conversationMessages);
+  }, [conversationMessages]);
+  const onSelectActiveItem = useCallback(
+    (_, selectedItem) => {
+      if (!isFullscreenMode) {
+        setIsMcpSettingsOpen(false);
+      }
+      setNewChatCreated(false);
+      const newConvId = String(selectedItem);
+      setConversationId((c_id) => {
+        if (c_id !== selectedItem) {
+          return newConvId;
+        }
+        return c_id;
+      });
+      setCurrentConversationId(newConvId);
+      setFileContents([]);
+      setUploadError({ message: null });
+      setDraftMessage("");
+      scrollToBottomRef.current?.scrollToBottom();
+    },
+    [
+      setConversationId,
+      setUploadError,
+      setFileContents,
+      setDraftMessage,
+      scrollToBottomRef,
+      setCurrentConversationId,
+      setIsMcpSettingsOpen,
+      isFullscreenMode
+    ]
+  );
+  const conversationFound = !!conversations.find(
+    (c) => c.conversation_id === viewConversationId
+  );
+  const getMaxPrompts = () => {
+    if (isFullscreenMode) {
+      return samplePrompts?.length;
+    }
+    if (displayMode === ChatbotDisplayMode.docked) {
+      return 2;
+    }
+    return 1;
+  };
+  const maxPrompts = getMaxPrompts();
+  const welcomePrompts = newChatCreated && conversationMessages.length === 0 || !conversationFound && conversationMessages.length === 0 ? samplePrompts?.slice(0, maxPrompts).map((prompt) => {
+    const p = prompt;
+    return {
+      title: p.title,
+      message: p.message,
+      onClick: () => {
+        sendMessage(p.message);
+      }
+    };
+  }) : [];
+  useLayoutEffect(() => {
+    if (welcomePrompts.length === 0) return void 0;
+    const el = contentScrollRef.current;
+    const sentinel = bottomSentinelRef.current;
+    if (!el) return void 0;
+    const scrollToBottom = () => {
+      if (sentinel && typeof sentinel.scrollIntoView === "function") {
+        sentinel.scrollIntoView({ block: "end", behavior: "auto" });
+      } else {
+        el.scrollTop = el.scrollHeight;
+      }
+    };
+    const rafId = typeof requestAnimationFrame !== "undefined" ? requestAnimationFrame(() => scrollToBottom()) : null;
+    if (rafId === null) scrollToBottom();
+    const resizeObserver = typeof ResizeObserver !== "undefined" ? new ResizeObserver(() => scrollToBottom()) : void 0;
+    resizeObserver?.observe(el);
+    return () => {
+      if (rafId !== null && typeof cancelAnimationFrame !== "undefined") {
+        cancelAnimationFrame(rafId);
+      }
+      resizeObserver?.disconnect();
+    };
+  }, [welcomePrompts.length]);
+  useEffect(() => {
+    const scrollContainer = contentScrollRef.current;
+    if (!scrollContainer) {
+      setHasChatContentOverflow(false);
+      return void 0;
+    }
+    const getMessageBox = () => scrollContainer.querySelector(
+      ".pf-chatbot__messagebox"
+    );
+    const messageBoxOwnsScroll = (messageBox) => {
+      if (!messageBox || typeof window === "undefined") {
+        return false;
+      }
+      const overflowY = window.getComputedStyle(messageBox).overflowY;
+      return overflowY === "auto" || overflowY === "scroll" || overflowY === "overlay";
+    };
+    const getScrollTarget = () => {
+      const messageBox = getMessageBox();
+      return messageBoxOwnsScroll(messageBox) ? messageBox : scrollContainer;
+    };
+    let observedScrollTarget = getScrollTarget();
+    let rafId = null;
+    let updateScheduled = false;
+    const updateOverflow = () => {
+      const scrollTarget = observedScrollTarget ?? scrollContainer;
+      setHasChatContentOverflow(
+        scrollTarget.scrollHeight > scrollTarget.clientHeight + 1
+      );
+    };
+    const scheduleOverflowUpdate = () => {
+      if (updateScheduled) {
+        return;
+      }
+      updateScheduled = true;
+      if (typeof requestAnimationFrame !== "undefined") {
+        rafId = requestAnimationFrame(() => {
+          updateScheduled = false;
+          updateOverflow();
+        });
+      } else {
+        updateScheduled = false;
+        updateOverflow();
+      }
+    };
+    scheduleOverflowUpdate();
+    scrollContainer.addEventListener("scroll", scheduleOverflowUpdate, {
+      passive: true,
+      capture: true
+    });
+    const resizeObserver = typeof ResizeObserver !== "undefined" ? new ResizeObserver(() => scheduleOverflowUpdate()) : void 0;
+    resizeObserver?.observe(scrollContainer);
+    if (observedScrollTarget !== scrollContainer) {
+      resizeObserver?.observe(observedScrollTarget);
+    }
+    const syncObservedScrollTarget = () => {
+      const nextScrollTarget = getScrollTarget();
+      if (nextScrollTarget === observedScrollTarget) {
+        return;
+      }
+      if (observedScrollTarget && observedScrollTarget !== scrollContainer) {
+        resizeObserver?.unobserve(observedScrollTarget);
+      }
+      if (nextScrollTarget !== scrollContainer) {
+        resizeObserver?.observe(nextScrollTarget);
+      }
+      observedScrollTarget = nextScrollTarget;
+    };
+    const mutationObserver = typeof MutationObserver !== "undefined" ? new MutationObserver(() => {
+      syncObservedScrollTarget();
+      scheduleOverflowUpdate();
+    }) : void 0;
+    mutationObserver?.observe(scrollContainer, {
+      childList: true,
+      subtree: true,
+      characterData: true
+    });
+    if (typeof window !== "undefined") {
+      window.addEventListener("resize", updateOverflow);
+    }
+    return () => {
+      if (rafId !== null && typeof cancelAnimationFrame !== "undefined") {
+        cancelAnimationFrame(rafId);
+      }
+      scrollContainer.removeEventListener(
+        "scroll",
+        scheduleOverflowUpdate,
+        true
+      );
+      if (observedScrollTarget && observedScrollTarget !== scrollContainer) {
+        resizeObserver?.unobserve(observedScrollTarget);
+      }
+      resizeObserver?.disconnect();
+      mutationObserver?.disconnect();
+      if (typeof window !== "undefined") {
+        window.removeEventListener("resize", updateOverflow);
+      }
+    };
+  }, [
+    conversationId,
+    displayMode,
+    isMcpSettingsOpen,
+    messages.length,
+    welcomePrompts.length
+  ]);
+  const handleFilter = useCallback((value) => {
+    setFilterValue(value);
+  }, []);
+  const onChatHistoryDrawerToggle = useCallback(() => {
+    setIsChatHistoryDrawerOpen((isOpen) => !isOpen);
+  }, []);
+  const onSortToggle = useCallback(() => {
+    setIsSortSelectOpen((prev) => !prev);
+  }, []);
+  const onSortSelect = useCallback(
+    (_event, value) => {
+      handleSortChange(value);
+      setIsSortSelectOpen(false);
+    },
+    [handleSortChange]
+  );
+  const getSortLabel = useCallback(
+    (option) => {
+      const labels = {
+        newest: t("sort.newest"),
+        oldest: t("sort.oldest"),
+        alphabeticalAsc: t("sort.alphabeticalAsc"),
+        alphabeticalDesc: t("sort.alphabeticalDesc")
+      };
+      return labels[option];
+    },
+    [t]
+  );
+  const sortToggle = useCallback(
+    (toggleRef) => /* @__PURE__ */ jsx(Tooltip, { content: `${t("sort.label")} - ${getSortLabel(selectedSort)}`, children: /* @__PURE__ */ jsx(
+      MenuToggle,
+      {
+        ref: toggleRef,
+        "aria-label": t("sort.label"),
+        variant: "plain",
+        onClick: onSortToggle,
+        isExpanded: isSortSelectOpen,
+        children: selectedSort === "oldest" || selectedSort === "alphabeticalDesc" ? /* @__PURE__ */ jsx(SortAmountDownAltIcon, {}) : /* @__PURE__ */ jsx(SortAmountDownIcon, {})
+      }
+    ) }),
+    [t, getSortLabel, selectedSort, onSortToggle, isSortSelectOpen]
+  );
+  const sortDropdown = useMemo(
+    () => /* @__PURE__ */ jsx(
+      Select,
+      {
+        id: "sort-select",
+        isOpen: isSortSelectOpen,
+        selected: selectedSort,
+        onSelect: onSortSelect,
+        onOpenChange: (isOpen) => setIsSortSelectOpen(isOpen),
+        popperProps: { position: "end" },
+        toggle: sortToggle,
+        shouldFocusToggleOnSelect: true,
+        children: /* @__PURE__ */ jsxs(SelectList, { className: classes.sortDropdown, 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") }),
+          /* @__PURE__ */ jsx(SelectOption, { value: "alphabeticalDesc", children: t("sort.alphabeticalDesc") })
+        ] })
+      }
+    ),
+    [
+      isSortSelectOpen,
+      selectedSort,
+      onSortSelect,
+      sortToggle,
+      t,
+      classes.sortDropdown
+    ]
+  );
+  const handleAttach = (data, event) => {
+    if ("preventDefault" in event && typeof event.preventDefault === "function") {
+      event.preventDefault();
+    }
+    handleFileUpload(data);
+  };
+  const { mutate: stopConversation } = useStopConversation();
+  const handleStopButton = () => {
+    wasStoppedByUserRef.current = true;
+    if (requestId) {
+      stopConversation(requestId);
+      setRequestId("");
+    }
+    setIsSendButtonDisabled(false);
+    setAnnouncement(t("conversation.announcement.responseStopped"));
+    const lastUserMessage = [...conversationMessages].reverse().find((m) => m.role === "user");
+    const restoredPrompt = lastUserMessage?.content ?? "";
+    setDraftMessage(restoredPrompt.trim());
+    if (restoredPrompt) setMessageBarKey((k) => k + 1);
+    setFileContents([]);
+    setUploadError({ message: null });
+  };
+  const handleDraftMessage = (_e, value) => setDraftMessage(value);
+  const onAttachRejected = (data) => {
+    data.forEach((attachment) => {
+      const hasInvalidTypeError = attachment.errors.some(
+        (e) => e.code === "file-invalid-type"
+      );
+      if (hasInvalidTypeError) {
+        setShowAlert(true);
+        setUploadError({
+          message: t("file.upload.error.unsupportedType")
+        });
+      }
+    });
+  };
+  const chatMainContent = /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      ChatbotContent,
+      {
+        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}`,
+        children: [
+          /* @__PURE__ */ jsx(FilePreview, {}),
+          /* @__PURE__ */ jsx(
+            MessageBar,
+            {
+              className: classes.messageBar,
+              onSendMessage: sendMessage,
+              isSendButtonDisabled,
+              hasAttachButton: true,
+              handleAttach,
+              hasMicrophoneButton: true,
+              value: draftMessage,
+              onChange: handleDraftMessage,
+              hasStopButton: streamingUiMatchesView,
+              handleStopButton: streamingUiMatchesView ? handleStopButton : void 0,
+              buttonProps: {
+                attach: {
+                  inputTestId: "attachment-input",
+                  tooltipContent: t("tooltip.attach"),
+                  "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: (item) => {
+                    if (!isFullscreenMode) {
+                      setIsMcpSettingsOpen(false);
+                    }
+                    onNewChat();
+                    handleSelectedModel(item);
+                  },
+                  disabled: isSendButtonDisabled
+                }
+              ),
+              forceMultilineLayout: true,
+              allowedFileTypes: supportedFileTypes,
+              onAttachRejected,
+              placeholder: t("chatbox.message.placeholder")
+            },
+            messageBarKey
+          ),
+          /* @__PURE__ */ jsx(ChatbotFootnoteWithIcon, { ...getFootnoteProps(t) })
+        ]
+      }
+    )
+  ] });
+  const mcpSettingsPanel = /* @__PURE__ */ jsx(
+    McpServersSettings,
+    {
+      onClose: () => setIsMcpSettingsOpen(false),
+      backgroundColor: chatHeaderBgColor
+    }
+  );
+  const mainPanelContent = (() => {
+    if (!isMcpSettingsOpen) {
+      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__ */ jsx(
+      Settings,
+      {
+        className: classes.settingsFlat,
+        fields: [
+          {
+            id: "mcp-servers-settings",
+            label: "",
+            field: mcpSettingsPanel
+          }
+        ]
+      }
+    );
+  })();
+  let drawerPanelStyle;
+  if (!isFullscreenMode) {
+    drawerPanelStyle = { zIndex: 1300 };
+  } else if (isMcpSettingsOpen) {
+    drawerPanelStyle = { width: 320, minWidth: 320, maxWidth: 320 };
+  } else {
+    drawerPanelStyle = { minWidth: 232, maxWidth: 400 };
+  }
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    notebookAlerts.length > 0 && /* @__PURE__ */ jsx(
+      AlertGroup,
+      {
+        hasAnimations: true,
+        isToast: true,
+        isLiveRegion: true,
+        className: classes.toastAlertGroup,
+        children: notebookAlerts.map(({ key, title, variant }) => /* @__PURE__ */ jsx(
+          Alert,
+          {
+            variant: AlertVariant[variant ?? "success"],
+            title,
+            className: classes.toastAlert,
+            timeout: 2e3,
+            onTimeout: () => handleRemoveNotebookAlert(key),
+            actionClose: /* @__PURE__ */ jsx(
+              AlertActionCloseButton,
+              {
+                title,
+                variantLabel: `${variant ?? "success"} alert`,
+                onClose: () => handleRemoveNotebookAlert(key)
+              }
+            )
+          },
+          key
+        ))
+      }
+    ),
+    isDeleteModalOpen && /* @__PURE__ */ jsx(
+      DeleteModal,
+      {
+        isOpen: isDeleteModalOpen,
+        conversationId: targetConversationId,
+        chatName: deleteChatName,
+        onClose: () => setIsDeleteModalOpen(false),
+        onConfirm: handleDeleteConversation
+      }
+    ),
+    isRenameModalOpen && /* @__PURE__ */ jsx(
+      RenameConversationModal,
+      {
+        isOpen: isRenameModalOpen,
+        onClose: () => setIsRenameModalOpen(false),
+        conversationId: targetConversationId
+      }
+    ),
+    renameNotebookId && /* @__PURE__ */ jsx(
+      RenameNotebookModal,
+      {
+        isOpen: Boolean(renameNotebookId),
+        onClose: () => setRenameNotebookId(null),
+        sessionId: renameNotebookId,
+        currentName: notebooks.find((n) => n.session_id === renameNotebookId)?.name ?? ""
+      }
+    ),
+    deleteNotebookId && /* @__PURE__ */ jsx(
+      DeleteNotebookModal,
+      {
+        isOpen: Boolean(deleteNotebookId),
+        onClose: () => setDeleteNotebookId(null),
+        onDeleted: handleNotebookDeleted,
+        sessionId: deleteNotebookId,
+        name: notebooks.find((n) => n.session_id === deleteNotebookId)?.name ?? ""
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      Chatbot,
+      {
+        displayMode: ChatbotDisplayMode.embedded,
+        className: `${classes.body} ${isMcpSettingsOpen && !isChatHistoryDrawerOpen ? classes.mcpCollapsedDrawerOrderFix : ""}`,
+        children: [
+          /* @__PURE__ */ jsxs(ChatbotHeader, { className: classes.header, children: [
+            /* @__PURE__ */ jsxs(ChatbotHeaderMain, { children: [
+              showChatPanel && !isFullscreenMode && /* @__PURE__ */ jsx(
+                ChatbotHeaderMenu,
+                {
+                  "aria-expanded": isChatHistoryDrawerOpen,
+                  onMenuToggle: onChatHistoryDrawerToggle,
+                  className: classes.headerMenu,
+                  tooltipContent: t("tooltip.chatHistoryMenu"),
+                  "aria-label": t("aria.chatHistoryMenu")
+                }
+              ),
+              isFullscreenMode && /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsx(
+                  RhUiAiExperienceIcon,
+                  {
+                    style: { width: "24px", height: "24px" },
+                    "aria-label": t("icon.lightspeed.alt"),
+                    className: classes.headerLogo
+                  }
+                ),
+                /* @__PURE__ */ jsx(ChatbotHeaderTitle, { className: classes.headerTitle, children: /* @__PURE__ */ jsx(
+                  Title,
+                  {
+                    headingLevel: "h1",
+                    size: "2xl",
+                    style: { fontWeight: 700 },
+                    children: t("chatbox.header.title")
+                  }
+                ) })
+              ] })
+            ] }),
+            /* @__PURE__ */ jsx(
+              LightspeedChatBoxHeader,
+              {
+                selectedModel,
+                handleSelectedModel: (item) => {
+                  if (!isFullscreenMode) {
+                    setIsMcpSettingsOpen(false);
+                  }
+                  onNewChat();
+                  handleSelectedModel(item);
+                },
+                models,
+                isPinningChatsEnabled,
+                isModelSelectorDisabled: isSendButtonDisabled,
+                hideModelSelector: true,
+                showChatTabOptions: !showNotebooksPanel,
+                setDisplayMode: setDisplayModeFromHeader,
+                displayMode,
+                onPinnedChatsToggle: handlePinningChatsToggle,
+                onMcpSettingsClick: () => setIsMcpSettingsOpen(true)
+              }
+            )
+          ] }),
+          isFullscreenMode && /* @__PURE__ */ jsx("div", { className: classes.headerDivider }),
+          isFullscreenMode && shouldShowTabs && /* @__PURE__ */ jsxs(
+            Tabs,
+            {
+              value: activeTab,
+              onChange: handleNotebookTabSelect,
+              "aria-label": t("tabs.ariaLabel"),
+              variant: "standard",
+              textColor: "primary",
+              sx: (theme) => ({
+                backgroundColor: "var(--pf-t--global--background--color--floating--default)",
+                borderBottom: "1px solid var(--pf-t--global--border--color--default)",
+                minHeight: theme.spacing(6),
+                paddingLeft: theme.spacing(2),
+                paddingRight: theme.spacing(2),
+                "& .MuiTabs-flexContainer": {
+                  gap: theme.spacing(2)
+                },
+                '& [role="tab"]': {
+                  fontWeight: 700,
+                  textTransform: "none",
+                  opacity: 1,
+                  padding: `${theme.spacing(1)} ${theme.spacing(2)}`,
+                  borderRadius: theme.spacing(0.5),
+                  '&:not([aria-selected="true"])': {
+                    color: `${theme.palette.text.primary} !important`
+                  },
+                  "&:hover": {
+                    background: "none !important",
+                    backgroundColor: "transparent !important",
+                    backgroundImage: "none !important"
+                  },
+                  '&:not([aria-selected="true"]):hover': {
+                    color: "var(--pf-t--global--text--color--brand--default)"
+                  },
+                  '&[aria-selected="true"]:hover': {
+                    color: `${theme.palette.primary.main} !important`
+                  }
+                },
+                '& [class*="Tabs-indicator"]': {
+                  height: 3
+                }
+              }),
+              children: [
+                /* @__PURE__ */ jsx(
+                  Tab,
+                  {
+                    disableRipple: true,
+                    label: t("tabs.chat"),
+                    "aria-label": t("tabs.chat")
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  Tab,
+                  {
+                    disableRipple: true,
+                    label: /* @__PURE__ */ jsxs(
+                      "span",
+                      {
+                        style: {
+                          display: "inline-flex",
+                          alignItems: "center",
+                          gap: 8
+                        },
+                        children: [
+                          t("tabs.notebooks"),
+                          /* @__PURE__ */ jsx(
+                            Label,
+                            {
+                              color: "purple",
+                              style: {
+                                alignSelf: "center",
+                                margin: 0,
+                                lineHeight: 1
+                              },
+                              children: t("tabs.notebooks.devPreview")
+                            }
+                          )
+                        ]
+                      }
+                    ),
+                    "aria-label": t("tabs.notebooks")
+                  }
+                )
+              ]
+            }
+          ),
+          showChatPanel && /* @__PURE__ */ jsx(
+            ConditionalWrapper,
+            {
+              condition: isFullscreenMode,
+              wrapper: (children) => /* @__PURE__ */ jsxs("div", { className: classes.fullscreenChatLayout, children: [
+                !isChatHistoryDrawerOpen && /* @__PURE__ */ jsx(
+                  CollapsedHistoryStrip,
+                  {
+                    onExpand: () => setIsChatHistoryDrawerOpen(true),
+                    onNewChat,
+                    newChatDisabled: newChatCreated
+                  }
+                ),
+                children
+              ] }),
+              children: /* @__PURE__ */ jsx(
+                ChatbotConversationHistoryNav,
+                {
+                  drawerPanelContentProps: {
+                    isResizable: isFullscreenMode,
+                    hasNoBorder: !isFullscreenMode,
+                    style: drawerPanelStyle
+                  },
+                  reverseButtonOrder: true,
+                  displayMode: ChatbotDisplayMode.embedded,
+                  onDrawerToggle: onChatHistoryDrawerToggle,
+                  title: "",
+                  navTitleIcon: null,
+                  isDrawerOpen: isChatHistoryDrawerOpen,
+                  drawerCloseButtonProps: {
+                    "aria-label": t("aria.closeDrawerPanel")
+                  },
+                  setIsDrawerOpen: setIsChatHistoryDrawerOpen,
+                  activeItemId: viewConversationId,
+                  onSelectActiveItem,
+                  conversations: filterConversations(filterValue),
+                  onNewChat,
+                  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
+            }
+          ),
+          showNotebooksPanel && !notebooksPermissionLoading && hasNotebooksAccess && !activeNotebook && /* @__PURE__ */ jsx(
+            NotebooksTab,
+            {
+              notebooks,
+              hasNotebooks,
+              classes,
+              openNotebookMenuId,
+              setOpenNotebookMenuId,
+              onSelectNotebook: (notebook) => {
+                navigate(`${LIGHTSPEED_PATH}/notebooks/${notebook.session_id}`);
+              },
+              onRename: setRenameNotebookId,
+              onDelete: setDeleteNotebookId,
+              onCreateNotebook: handleCreateNotebook,
+              t
+            }
+          ),
+          showNotebooksPanel && !notebooksPermissionLoading && !hasNotebooksAccess && /* @__PURE__ */ jsx(
+            PermissionRequiredState,
+            {
+              subject: t("permission.subject.notebooks"),
+              permissions: ["intelligent-assistant.notebooks.use"],
+              action: /* @__PURE__ */ jsx(
+                Button,
+                {
+                  variant: "outlined",
+                  color: "primary",
+                  style: { borderRadius: "20px" },
+                  onClick: () => {
+                    setActiveTab(0);
+                    setShellViewTab(0);
+                  },
+                  children: t("permission.notebooks.goBack")
+                }
+              )
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(Attachment, {})
+  ] });
+};
+
+export { LightspeedChat };
+//# sourceMappingURL=LightSpeedChat.esm.js.map