@red-hat-developer-hub/backstage-plugin-lightspeed 1.3.0 → 2.0.0

package/dist/components/LightSpeedChat.esm.js

@@ -1,10 +1,9 @@
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-import { useState, useEffect, useCallback, useMemo } from 'react';
-import { makeStyles } from '@material-ui/core';
-import Divider from '@mui/material/Divider';
-import { ChatbotDisplayMode, Chatbot, ChatbotHeader, ChatbotHeaderMain, ChatbotHeaderMenu, ChatbotHeaderTitle, FileDropZone, ChatbotAlert, ChatbotContent, ChatbotFooter, MessageBar, ChatbotFootnote } from '@patternfly/chatbot';
+import { useState, useRef, useEffect, useCallback, useMemo, useLayoutEffect } from 'react';
+import { makeStyles, Button } from '@material-ui/core';
+import { ChatbotDisplayMode, ChatbotContent, ChatbotFooter, MessageBar, ChatbotFootnote, Settings, Chatbot, ChatbotHeader, ChatbotHeaderMain, ChatbotHeaderMenu, ChatbotHeaderTitle, FileDropZone, ChatbotAlert } from '@patternfly/chatbot';
 import ChatbotConversationHistoryNav from '@patternfly/chatbot/dist/dynamic/ChatbotConversationHistoryNav';
-import { DropdownItem, Tooltip, MenuToggle, Select, SelectList, SelectOption, Title } from '@patternfly/react-core';
+import { DropdownItem, Tooltip, MenuToggle, Select, SelectList, SelectOption, AlertGroup, Alert, AlertVariant, AlertActionCloseButton, Title, Tabs, Tab } from '@patternfly/react-core';
 import { SortAmountDownAltIcon, SortAmountDownIcon, PlusIcon, SearchIcon } from '@patternfly/react-icons';
 import { useQueryClient } from '@tanstack/react-query';
 import { TEMP_CONVERSATION_ID, supportedFileTypes } from '../const.esm.js';
@@ -13,13 +12,17 @@ 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-lightspeed-common';
+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 { useLightspeedDrawerContext } from '../hooks/useLightspeedDrawerContext.esm.js';
 import { useLightspeedUpdatePermission } from '../hooks/useLightspeedUpdatePermission.esm.js';
@@ -32,6 +35,11 @@ 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 { DeleteNotebookModal } from './notebooks/DeleteNotebookModal.esm.js';
+import { NotebooksTab } from './notebooks/NotebooksTab.esm.js';
+import { RenameNotebookModal } from './notebooks/RenameNotebookModal.esm.js';
+import PermissionRequiredState from './PermissionRequiredState.esm.js';
 import { RenameConversationModal } from './RenameConversationModal.esm.js';
 
 const useStyles = makeStyles((theme) => ({
@@ -43,7 +51,9 @@ const useStyles = makeStyles((theme) => ({
     }
   },
   header: {
-    padding: `${theme.spacing(3)}px !important`
+    padding: `${theme.spacing(3)}px ${theme.spacing(3)}px 0 ${theme.spacing(
+      3
+    )}px !important`
   },
   errorContainer: {
     padding: theme.spacing(3)
@@ -58,6 +68,157 @@ const useStyles = makeStyles((theme) => ({
   headerTitle: {
     justifyContent: "left !important"
   },
+  tabs: {
+    padding: `${theme.spacing(2)}px ${theme.spacing(3)}px 0`,
+    backgroundColor: "var(--pf-t--global--background--color--floating--default)",
+    "& .pf-v6-c-tabs__item, & .pf-v5-c-tabs__item": {
+      backgroundColor: "transparent"
+    },
+    "& .pf-v6-c-tabs__item:not(:last-child), & .pf-v5-c-tabs__item:not(:last-child)": {
+      marginRight: theme.spacing(5)
+    },
+    "& .pf-v6-c-tabs__link, & .pf-v5-c-tabs__link": {
+      backgroundColor: "transparent",
+      paddingBottom: theme.spacing(2),
+      fontWeight: 700,
+      cursor: "pointer"
+    },
+    "& .pf-v6-c-tabs__item.pf-m-current .pf-v6-c-tabs__link, & .pf-v5-c-tabs__item.pf-m-current .pf-v5-c-tabs__link": {
+      color: "var(--pf-t--global--text--color--brand--default)"
+    }
+  },
+  tabsDivider: {
+    borderTop: "1px solid var(--pf-t--global--border--color--default)"
+  },
+  notebooksContainer: {
+    padding: theme.spacing(3),
+    height: "100%",
+    display: "flex",
+    flexDirection: "column",
+    flex: 1,
+    minHeight: 0,
+    overflowY: "auto"
+  },
+  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)
+  },
+  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"
+  },
+  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-container": {
       width: "95% !important",
@@ -67,6 +228,125 @@ const useStyles = makeStyles((theme) => ({
   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"
+    }
+  },
+  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"
+  },
+  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"
+  },
+  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
+  },
+  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
+  },
+  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"
+    }
   }
 }));
 const LightspeedChat = ({
@@ -85,13 +365,34 @@ const LightspeedChat = ({
   const user = useBackstageUserIdentity();
   const [filterValue, setFilterValue] = useState("");
   const [announcement, setAnnouncement] = useState("");
+  const [activeTab, setActiveTab] = useState(0);
+  const { allowed: hasNotebooksAccess, loading: notebooksPermissionLoading } = useLightspeedNotebooksPermission();
+  const notebooksPermissionResolved = !notebooksPermissionLoading && hasNotebooksAccess;
+  const { data: notebooks = [], refetch: refetchNotebooks } = useNotebookSessions(activeTab === 1 && notebooksPermissionResolved);
+  const hasNotebooks = notebooks.length > 0;
+  const [openNotebookMenuId, setOpenNotebookMenuId] = useState(
+    null
+  );
+  const [renameNotebookId, setRenameNotebookId] = useState(null);
+  const [deleteNotebookId, setDeleteNotebookId] = useState(null);
+  const [notebookAlerts, setNotebookAlerts] = useState(
+    []
+  );
   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 {
     displayMode,
@@ -102,12 +403,42 @@ const LightspeedChat = ({
     setDraftMessage
   } = useLightspeedDrawerContext();
   const isFullscreenMode = displayMode === ChatbotDisplayMode.embedded;
+  const showChatPanel = !isFullscreenMode || activeTab === 0;
+  const showNotebooksPanel = isFullscreenMode && activeTab !== 0;
   const [isChatHistoryDrawerOpen, setIsChatHistoryDrawerOpen] = useState(!isMobile && isFullscreenMode);
+  const handleNotebookTabSelect = (_event, tabIndex) => {
+    const nextTab = Number(tabIndex);
+    setActiveTab(nextTab);
+    if (nextTab === 1 && notebooksPermissionResolved) {
+      refetchNotebooks();
+    }
+  };
+  const handleNotebookDeleted = () => {
+    const key = Date.now();
+    setNotebookAlerts((prevAlerts) => [
+      { title: t("notebooks.delete.toast"), variant: "success", key },
+      ...prevAlerts
+    ]);
+  };
+  const handleRemoveNotebookAlert = (key) => {
+    setNotebookAlerts(
+      (prevAlerts) => prevAlerts.filter((alert) => alert.key !== key)
+    );
+  };
   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,
@@ -140,8 +471,11 @@ const LightspeedChat = ({
   const { allowed: hasUpdateAccess } = useLightspeedUpdatePermission();
   const samplePrompts = useWelcomePrompts();
   useEffect(() => {
-    if (user && lastOpenedId === null && isReady) {
+    if (!user || !isReady) return;
+    if (lastOpenedId === null) {
       setConversationId(TEMP_CONVERSATION_ID);
+    }
+    if (lastOpenedId === TEMP_CONVERSATION_ID || lastOpenedId === null) {
       setNewChatCreated(true);
     }
   }, [user, isReady, lastOpenedId, setConversationId]);
@@ -182,9 +516,15 @@ const LightspeedChat = ({
     setConversationId(conv_id);
     setCurrentConversationId(conv_id);
   };
+  const onRequestIdReady = (request_id) => {
+    setRequestId(request_id);
+  };
   const onComplete = (message) => {
     setIsSendButtonDisabled(false);
-    setAnnouncement(`Message from Bot: ${message}`);
+    if (!wasStoppedByUserRef.current) {
+      setAnnouncement(`Message from Bot: ${message}`);
+    }
+    wasStoppedByUserRef.current = false;
     queryClient.invalidateQueries({
       queryKey: ["conversations"]
     });
@@ -200,10 +540,13 @@ const LightspeedChat = ({
     selectedProvider,
     avatar,
     onComplete,
-    onStart
+    onStart,
+    onRequestIdReady
   );
   const [messages, setMessages] = useState(conversationMessages);
   const sendMessage = (message) => {
+    if (!message.toString().trim()) return;
+    wasStoppedByUserRef.current = false;
     if (conversationId !== TEMP_CONVERSATION_ID) {
       setNewChatCreated(false);
     }
@@ -219,6 +562,7 @@ const LightspeedChat = ({
   };
   const onNewChat = useCallback(() => {
     (async () => {
+      setIsMcpSettingsOpen(false);
       if (conversationId !== TEMP_CONVERSATION_ID) {
         setMessages([]);
         setFileContents([]);
@@ -230,6 +574,9 @@ const LightspeedChat = ({
         if (!isFullscreenMode) {
           setIsChatHistoryDrawerOpen(false);
         }
+      } else {
+        setMessages([]);
+        setNewChatCreated(true);
       }
     })();
   }, [
@@ -322,7 +669,7 @@ const LightspeedChat = ({
       const filteredConversations = Object.entries(categorizedMessages).reduce(
         (acc, [key, items]) => {
           const filteredItems = items.filter(
-            (item) => item.text.toLocaleLowerCase("en-US").includes(targetValue.toLocaleLowerCase("en-US"))
+            (item) => (item.text ?? "").toLocaleLowerCase("en-US").includes(targetValue.toLocaleLowerCase("en-US"))
           );
           const isPinnedCategory = key === pinnedChatsKey;
           if (isPinnedCategory && isPinningChatsEnabled) {
@@ -374,6 +721,7 @@ const LightspeedChat = ({
   }, [conversationMessages]);
   const onSelectActiveItem = useCallback(
     (_, selectedItem) => {
+      setIsMcpSettingsOpen(false);
       setNewChatCreated(false);
       const newConvId = String(selectedItem);
       setConversationId((c_id) => {
@@ -394,7 +742,8 @@ const LightspeedChat = ({
       setFileContents,
       setDraftMessage,
       scrollToBottomRef,
-      setCurrentConversationId
+      setCurrentConversationId,
+      setIsMcpSettingsOpen
     ]
   );
   const conversationFound = !!conversations.find(
@@ -420,6 +769,133 @@ const LightspeedChat = ({
       }
     };
   }) : [];
+  useLayoutEffect(() => {
+    if (welcomePrompts.length === 0) return undefined;
+    const el = contentScrollRef.current;
+    const sentinel = bottomSentinelRef.current;
+    if (!el) return undefined;
+    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()) : undefined;
+    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 undefined;
+    }
+    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()) : undefined;
+    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();
+    }) : undefined;
+    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);
   }, []);
@@ -491,12 +967,31 @@ const LightspeedChat = ({
       classes.sortDropdown
     ]
   );
+  const getDocumentsCount = (documentIds) => {
+    return Array.isArray(documentIds) ? documentIds.length : 0;
+  };
   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) => {
@@ -511,7 +1006,141 @@ const LightspeedChat = ({
       }
     });
   };
+  const chatMainContent = /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      ChatbotContent,
+      {
+        className: `${classes.chatbotContent} ${hasChatContentOverflow ? classes.chatbotContentHasOverflow : ""}`,
+        children: /* @__PURE__ */ jsxs("div", { ref: contentScrollRef, className: classes.chatbotContentScroll, 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: isSendButtonDisabled,
+              topicRestrictionEnabled,
+              displayMode
+            }
+          ),
+          welcomePrompts.length > 0 && /* @__PURE__ */ jsx(
+            "div",
+            {
+              ref: bottomSentinelRef,
+              "aria-hidden": true,
+              style: { height: 0, flexShrink: 0 }
+            }
+          )
+        ] })
+      }
+    ),
+    /* @__PURE__ */ jsxs(ChatbotFooter, { className: classes.footer, children: [
+      /* @__PURE__ */ jsx(FilePreview, {}),
+      /* @__PURE__ */ jsx(
+        MessageBar,
+        {
+          onSendMessage: sendMessage,
+          isSendButtonDisabled,
+          hasAttachButton: true,
+          handleAttach,
+          hasMicrophoneButton: true,
+          value: draftMessage,
+          onChange: handleDraftMessage,
+          hasStopButton: isSendButtonDisabled,
+          handleStopButton: isSendButtonDisabled ? handleStopButton : undefined,
+          buttonProps: {
+            attach: {
+              inputTestId: "attachment-input",
+              tooltipContent: t("tooltip.attach")
+            },
+            microphone: {
+              tooltipContent: {
+                active: t("tooltip.microphone.active"),
+                inactive: t("tooltip.microphone.inactive")
+              }
+            },
+            send: {
+              tooltipContent: t("tooltip.send")
+            }
+          },
+          allowedFileTypes: supportedFileTypes,
+          onAttachRejected,
+          placeholder: t("chatbox.message.placeholder")
+        },
+        messageBarKey
+      ),
+      /* @__PURE__ */ jsx(ChatbotFootnote, { ...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 };
+  }
   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,
+            actionClose: /* @__PURE__ */ jsx(
+              AlertActionCloseButton,
+              {
+                title,
+                variantLabel: `${variant ?? "success"} alert`,
+                onClose: () => handleRemoveNotebookAlert(key)
+              }
+            )
+          },
+          key
+        ))
+      }
+    ),
     isDeleteModalOpen && /* @__PURE__ */ jsx(
       DeleteModal,
       {
@@ -529,11 +1158,30 @@ const LightspeedChat = ({
         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,
+        className: `${classes.body} ${isMcpSettingsOpen && !isChatHistoryDrawerOpen ? classes.mcpCollapsedDrawerOrderFix : ""}`,
         children: [
           /* @__PURE__ */ jsxs(ChatbotHeader, { className: classes.header, children: [
             /* @__PURE__ */ jsxs(ChatbotHeaderMain, { children: [
@@ -541,7 +1189,7 @@ const LightspeedChat = ({
                 ChatbotHeaderMenu,
                 {
                   "aria-expanded": isChatHistoryDrawerOpen,
-                  onMenuToggle: () => setIsChatHistoryDrawerOpen(!isChatHistoryDrawerOpen),
+                  onMenuToggle: onChatHistoryDrawerToggle,
                   className: classes.headerMenu,
                   tooltipContent: t("tooltip.chatHistoryMenu"),
                   "aria-label": t("aria.chatHistoryMenu")
@@ -554,6 +1202,7 @@ const LightspeedChat = ({
               {
                 selectedModel,
                 handleSelectedModel: (item) => {
+                  setIsMcpSettingsOpen(false);
                   onNewChat();
                   handleSelectedModel(item);
                 },
@@ -562,18 +1211,34 @@ const LightspeedChat = ({
                 isModelSelectorDisabled: isSendButtonDisabled,
                 setDisplayMode,
                 displayMode,
-                onPinnedChatsToggle: handlePinningChatsToggle
+                onPinnedChatsToggle: handlePinningChatsToggle,
+                onMcpSettingsClick: () => setIsMcpSettingsOpen(true)
               }
             )
           ] }),
-          /* @__PURE__ */ jsx(Divider, {}),
-          /* @__PURE__ */ jsx(
+          isFullscreenMode && /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsxs(
+              Tabs,
+              {
+                activeKey: activeTab,
+                onSelect: handleNotebookTabSelect,
+                "aria-label": t("tabs.ariaLabel"),
+                className: classes.tabs,
+                children: [
+                  /* @__PURE__ */ jsx(Tab, { eventKey: 0, title: t("tabs.chat") }),
+                  /* @__PURE__ */ jsx(Tab, { eventKey: 1, title: t("tabs.notebooks") })
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsx("div", { className: classes.tabsDivider })
+          ] }),
+          showChatPanel && /* @__PURE__ */ jsx(
             ChatbotConversationHistoryNav,
             {
               drawerPanelContentProps: {
                 isResizable: isFullscreenMode,
                 hasNoBorder: !isFullscreenMode,
-                style: isFullscreenMode ? undefined : { zIndex: 1300 }
+                style: drawerPanelStyle
               },
               reverseButtonOrder: true,
               displayMode: ChatbotDisplayMode.embedded,
@@ -628,59 +1293,42 @@ const LightspeedChat = ({
                         children: uploadError.message
                       }
                     ) }),
-                    /* @__PURE__ */ jsx(ChatbotContent, { children: /* @__PURE__ */ jsx(
-                      LightspeedChatBox,
-                      {
-                        userName,
-                        messages,
-                        profileLoading,
-                        announcement,
-                        ref: scrollToBottomRef,
-                        welcomePrompts,
-                        conversationId,
-                        isStreaming: isSendButtonDisabled,
-                        topicRestrictionEnabled,
-                        displayMode
-                      }
-                    ) }),
-                    /* @__PURE__ */ jsxs(ChatbotFooter, { className: classes.footer, children: [
-                      /* @__PURE__ */ jsx(FilePreview, {}),
-                      /* @__PURE__ */ jsx(
-                        MessageBar,
-                        {
-                          onSendMessage: sendMessage,
-                          isSendButtonDisabled,
-                          hasAttachButton: true,
-                          handleAttach,
-                          hasMicrophoneButton: true,
-                          value: draftMessage,
-                          onChange: handleDraftMessage,
-                          buttonProps: {
-                            attach: {
-                              inputTestId: "attachment-input",
-                              tooltipContent: t("tooltip.attach")
-                            },
-                            microphone: {
-                              tooltipContent: {
-                                active: t("tooltip.microphone.active"),
-                                inactive: t("tooltip.microphone.inactive")
-                              }
-                            },
-                            send: {
-                              tooltipContent: t("tooltip.send")
-                            }
-                          },
-                          allowedFileTypes: supportedFileTypes,
-                          onAttachRejected,
-                          placeholder: t("chatbox.message.placeholder")
-                        }
-                      ),
-                      /* @__PURE__ */ jsx(ChatbotFootnote, { ...getFootnoteProps(t) })
-                    ] })
+                    mainPanelContent
                   ]
                 }
               )
             }
+          ),
+          showNotebooksPanel && !notebooksPermissionLoading && hasNotebooksAccess && /* @__PURE__ */ jsx(
+            NotebooksTab,
+            {
+              notebooks,
+              hasNotebooks,
+              classes,
+              openNotebookMenuId,
+              setOpenNotebookMenuId,
+              onRename: setRenameNotebookId,
+              onDelete: setDeleteNotebookId,
+              t,
+              getDocumentsCount
+            }
+          ),
+          showNotebooksPanel && !notebooksPermissionLoading && !hasNotebooksAccess && /* @__PURE__ */ jsx(
+            PermissionRequiredState,
+            {
+              subject: t("permission.subject.notebooks"),
+              permissions: ["lightspeed.notebooks.use"],
+              action: /* @__PURE__ */ jsx(
+                Button,
+                {
+                  variant: "outlined",
+                  color: "primary",
+                  style: { borderRadius: "20px" },
+                  onClick: () => setActiveTab(0),
+                  children: t("permission.notebooks.goBack")
+                }
+              )
+            }
           )
         ]
       }