@red-hat-developer-hub/backstage-plugin-intelligent-assistant 4.0.0 → 4.2.0

package/dist/components/LightSpeedChat.esm.js

@@ -2,12 +2,12 @@ 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 { makeStyles, Button as Button$1 } 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 { ChatbotDisplayMode, ChatbotContent, ChatbotFooter, MessageBar, Settings, Chatbot, ChatbotHeader, ChatbotHeaderMain, 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 { DropdownItem, Tooltip, MenuToggle, Select, SelectList, SelectOption, Button, Title, Label } from '@patternfly/react-core';
 import { PenIcon, ThumbtackIcon, TrashIcon, SortAmountDownAltIcon, SortAmountDownIcon, PlusIcon, SearchIcon } from '@patternfly/react-icons';
 import { RhUiAiExperienceIcon } from '@patternfly/react-icons/dist/esm/icons/rh-ui-ai-experience-icon';
 import { useQueryClient } from '@tanstack/react-query';
@@ -16,7 +16,7 @@ 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 { useDeleteNotebook } from '../hooks/notebooks/useDeleteNotebook.esm.js';
 import { useIsMobile } from '../hooks/useIsMobile.esm.js';
 import { useLastOpenedConversation } from '../hooks/useLastOpenedConversation.esm.js';
 import { useLightspeedDeletePermission } from '../hooks/useLightspeedDeletePermission.esm.js';
@@ -28,6 +28,7 @@ import { useNotebookConversationIds } from '../hooks/useNotebookConversationIds.
 import { useNotebookSession } from '../hooks/notebooks/useNotebookSession.esm.js';
 import { useNotebookSessions } from '../hooks/notebooks/useNotebookSessions.esm.js';
 import { usePinnedChatsSettings } from '../hooks/usePinnedChatsSettings.esm.js';
+import '../api/notebooksApi.esm.js';
 import { useRenameNotebookWithAlert } from '../hooks/notebooks/useRenameNotebookWithAlert.esm.js';
 import { useSortSettings } from '../hooks/useSortSettings.esm.js';
 import { useStopConversation } from '../hooks/useStopConversation.esm.js';
@@ -37,6 +38,7 @@ import { useLightspeedDrawerContext } from '../hooks/useLightspeedDrawerContext.
 import { useLightspeedUpdatePermission } from '../hooks/useLightspeedUpdatePermission.esm.js';
 import { useWelcomePrompts } from '../hooks/useWelcomePrompts.esm.js';
 import { getAttachments } from '../utils/attachment-utils.esm.js';
+import { extractPageContext } from '../utils/dom-extractor.esm.js';
 import { getCategorizeMessages, ChatbotFootnoteWithIcon, getFootnoteProps } from '../utils/lightspeed-chatbox-utils.esm.js';
 import Attachment from './Attachment.esm.js';
 import { useFileAttachmentContext } from './AttachmentContext.esm.js';
@@ -48,10 +50,14 @@ 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 { NotebookHeaderActions } from './notebooks/NotebookHeaderActions.esm.js';
 import { NotebooksTab } from './notebooks/NotebooksTab.esm.js';
+import { useNotebookStreamStore } from './notebooks/NotebookStreamProvider.esm.js';
 import { NotebookView } from './notebooks/NotebookView.esm.js';
+import { SidebarCollapseIcon, SidebarExpandIcon } from './notebooks/SidebarCollapseIcon.esm.js';
 import PermissionRequiredState from './PermissionRequiredState.esm.js';
 import { RenameConversationModal } from './RenameConversationModal.esm.js';
+import { ToastAlertGroup } from './ToastAlertGroup.esm.js';
 
 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 = ({
@@ -61,8 +67,6 @@ const ConditionalWrapper = ({
 }) => 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
@@ -77,6 +81,11 @@ const useStyles = makeStyles((theme) => ({
       overflow: "hidden"
     }
   },
+  bodyCompact: {
+    height: "100% !important",
+    minHeight: "0 !important",
+    overflow: "hidden"
+  },
   header: {
     padding: `${theme.spacing(3)}px ${theme.spacing(3)}px 0 ${theme.spacing(
       3
@@ -96,13 +105,24 @@ const useStyles = makeStyles((theme) => ({
     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"
+  chatHeaderActions: {
+    display: "flex",
+    alignItems: "center",
+    gap: theme.spacing(0.5)
+  },
+  compactDrawerPanel: {
+    "&.pf-v6-c-drawer__panel": {
+      width: "100%",
+      minWidth: "100%",
+      maxWidth: "100%",
+      flexBasis: "100%"
     }
   },
+  notebookHeaderActions: {
+    display: "flex",
+    alignItems: "center",
+    gap: theme.spacing(0.5)
+  },
   headerLogo: {
     width: 48,
     height: 48,
@@ -131,10 +151,14 @@ const useStyles = makeStyles((theme) => ({
     display: "flex",
     alignItems: "center",
     justifyContent: "space-between",
+    flexWrap: "wrap",
+    gap: theme.spacing(1),
     marginBottom: theme.spacing(4)
   },
   notebooksHeading: {
-    marginBottom: 0
+    marginBottom: 0,
+    whiteSpace: "nowrap",
+    fontSize: "1.25rem"
   },
   notebooksHeadingEmpty: {
     "&&": {
@@ -190,6 +214,14 @@ const useStyles = makeStyles((theme) => ({
       gridTemplateColumns: "repeat(1, minmax(0, 1fr))"
     }
   },
+  notebooksGridCompact: {
+    display: "grid",
+    gridTemplateColumns: "repeat(auto-fill, minmax(280px, 1fr))",
+    gap: theme.spacing(2),
+    width: "100%",
+    maxWidth: "100%",
+    paddingBottom: theme.spacing(6)
+  },
   notebookCard: {
     borderRadius: theme.spacing(1.5),
     display: "flex",
@@ -333,18 +365,6 @@ const useStyles = makeStyles((theme) => ({
   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,
@@ -536,6 +556,15 @@ const LightspeedChat = ({
   const navigate = useNavigate();
   const configApi = useApi(configApiRef);
   const notebooksEnabled = configApi.getOptionalBoolean("intelligent-assistant.notebooks.enabled") ?? false;
+  const screenContextEnabled = configApi.getOptionalBoolean(
+    "intelligent-assistant.screen-context.enabled"
+  ) ?? false;
+  const domExtractionEnabled = configApi.getOptionalBoolean(
+    "intelligent-assistant.screen-context.dom-extraction.enabled"
+  ) ?? true;
+  const domExtractionMaxChars = configApi.getOptionalNumber(
+    "intelligent-assistant.screen-context.dom-extraction.maxChars"
+  ) ?? 8e3;
   const notebooksRouteMatch = useMatch(`${LIGHTSPEED_PATH}/notebooks`);
   const notebookViewRouteMatch = useMatch(
     `${LIGHTSPEED_PATH}/notebooks/:notebookId`
@@ -554,7 +583,9 @@ const LightspeedChat = ({
     setDraftMessage,
     consumePendingOverlayThreadHandoff,
     shellViewTab,
-    setShellViewTab
+    setShellViewTab,
+    activeNotebookId,
+    setActiveNotebookId
   } = useLightspeedDrawerContext();
   const isFullscreenMode = displayMode === ChatbotDisplayMode.embedded;
   const location = useLocation();
@@ -563,9 +594,6 @@ const LightspeedChat = ({
   const [filterValue, setFilterValue] = useState("");
   const [announcement, setAnnouncement] = useState("");
   const [activeTab, setActiveTab] = useState(() => {
-    if (!isFullscreenMode) {
-      return 0;
-    }
     if (notebooksRouteMatch || notebookViewRouteMatch) {
       return 1;
     }
@@ -591,29 +619,22 @@ const LightspeedChat = ({
     null
   );
   const [deleteNotebookId, setDeleteNotebookId] = useState(null);
-  const [activeNotebook, setActiveNotebook] = useState(
-    null
-  );
-  const {
-    data: routeNotebook,
-    isLoading: routeNotebookLoading,
-    isError: routeNotebookError
-  } = useNotebookSession(routeNotebookId);
+  const effectiveNotebookId = routeNotebookId ?? (!isFullscreenMode ? activeNotebookId : void 0);
+  const { data: activeNotebook, isError: activeNotebookError } = useNotebookSession(effectiveNotebookId);
   useEffect(() => {
-    if (routeNotebookId && routeNotebook && !routeNotebookLoading) {
-      setActiveNotebook(routeNotebook);
-    } else if (routeNotebookId && routeNotebookError) {
-      navigate(`${LIGHTSPEED_PATH}/notebooks`, { replace: true });
-    } else if (!routeNotebookId && notebooksRouteMatch) {
-      setActiveNotebook(null);
+    if (effectiveNotebookId && activeNotebookError) {
+      if (isFullscreenMode) {
+        navigate(`${LIGHTSPEED_PATH}/notebooks`, { replace: true });
+      } else {
+        setActiveNotebookId(void 0);
+      }
     }
   }, [
-    routeNotebookId,
-    routeNotebook,
-    routeNotebookLoading,
-    routeNotebookError,
-    notebooksRouteMatch,
-    navigate
+    effectiveNotebookId,
+    activeNotebookError,
+    isFullscreenMode,
+    navigate,
+    setActiveNotebookId
   ]);
   const [notebookAlerts, setNotebookAlerts] = useState(
     []
@@ -624,6 +645,11 @@ const LightspeedChat = ({
     getNotebookName: (sid) => notebooks.find((n) => n.session_id === sid)?.name ?? "notebook"
   });
   const { data: notebookDocuments = [], isFetching: isDocumentsFetching } = useNotebookDocuments(activeNotebook?.session_id);
+  const [notebookUploadsInProgress, setNotebookUploadsInProgress] = useState(false);
+  const { mutate: deleteNotebook } = useDeleteNotebook();
+  const notebookStreamStore = useNotebookStreamStore();
+  const [notebookSidebarCollapsed, setNotebookSidebarCollapsed] = useState(!isFullscreenMode);
+  const [notebookUploadModalOpen, setNotebookUploadModalOpen] = useState(false);
   const [conversationId, setConversationId] = useState("");
   const [requestId, setRequestId] = useState("");
   const [newChatCreated, setNewChatCreated] = useState(false);
@@ -640,7 +666,7 @@ const LightspeedChat = ({
   const [hasChatContentOverflow, setHasChatContentOverflow] = useState(false);
   const wasStoppedByUserRef = useRef(false);
   const { isReady, lastOpenedId, setLastOpenedId, clearLastOpenedId } = useLastOpenedConversation(user);
-  const showChatPanel = !isFullscreenMode || activeTab === 0;
+  const showChatPanel = activeTab === 0;
   const showNotebooksPanel = (notebooksEnabled || isOnNotebookRoute) && activeTab !== 0;
   const [isChatHistoryDrawerOpen, setIsChatHistoryDrawerOpen] = useState(!isMobile && isFullscreenMode);
   useLayoutEffect(() => {
@@ -667,60 +693,119 @@ const LightspeedChat = ({
     navigate,
     setShellViewTab
   ]);
+  const maybeAutoDeleteScratchNotebook = useCallback(() => {
+    const nb = activeNotebook;
+    if (!nb) return;
+    const isUntitled = nb.name === UNTITLED_NOTEBOOK_NAME;
+    const isEmpty = notebookDocuments.length === 0;
+    const noUploads = !notebookUploadsInProgress;
+    const convId = nb.metadata?.conversation_id;
+    const noChat = !convId || convId === TEMP_CONVERSATION_ID;
+    if (isUntitled && isEmpty && noUploads && noChat) {
+      notebookStreamStore.clear(nb.session_id);
+      deleteNotebook(nb.session_id);
+    }
+  }, [
+    activeNotebook,
+    notebookDocuments,
+    notebookUploadsInProgress,
+    notebookStreamStore,
+    deleteNotebook
+  ]);
   const handleNotebookTabSelect = (_event, nextTab) => {
+    if (nextTab === 0) {
+      maybeAutoDeleteScratchNotebook();
+    }
     setActiveTab(nextTab);
     setShellViewTab(nextTab);
-    if (nextTab === 1) {
-      navigate(`${LIGHTSPEED_PATH}/notebooks`);
-      if (notebooksPermissionResolved) {
-        refetchNotebooks();
+    if (isFullscreenMode) {
+      if (nextTab === 1) {
+        navigate(
+          activeNotebookId ? `${LIGHTSPEED_PATH}/notebooks/${activeNotebookId}` : `${LIGHTSPEED_PATH}/notebooks`
+        );
+      } else {
+        navigate(
+          routeConversationId ? `${LIGHTSPEED_PATH}/conversation/${routeConversationId}` : LIGHTSPEED_PATH
+        );
       }
-    } else {
-      setActiveNotebook(null);
-      navigate(
-        routeConversationId ? `${LIGHTSPEED_PATH}/conversation/${routeConversationId}` : LIGHTSPEED_PATH
-      );
+    }
+    if (nextTab === 1 && notebooksPermissionResolved) {
+      refetchNotebooks();
     }
   };
   const setDisplayModeFromHeader = useCallback(
     (mode) => {
       if (mode !== ChatbotDisplayMode.embedded) {
+        if (activeTab === 1) {
+          const notebookId = routeNotebookId || activeNotebookId;
+          if (notebookId) {
+            setActiveNotebookId(notebookId);
+          }
+        }
         setDisplayMode(mode);
         return;
       }
       if (activeTab === 1) {
-        const sid = activeNotebook?.session_id;
         setDisplayMode(
           mode,
           void 0,
-          sid ? { notebookSessionId: sid } : "notebooks"
+          activeNotebookId ? { notebookSessionId: activeNotebookId } : "notebooks"
         );
       } else {
         setDisplayMode(mode);
       }
     },
-    [setDisplayMode, activeTab, activeNotebook?.session_id]
+    [
+      setDisplayMode,
+      activeTab,
+      routeNotebookId,
+      activeNotebookId,
+      setActiveNotebookId
+    ]
   );
   const handleCreateNotebook = useCallback(() => {
+    maybeAutoDeleteScratchNotebook();
     createNotebookMutation.mutate(
       { name: UNTITLED_NOTEBOOK_NAME },
       {
         onSuccess: (session) => {
-          navigate(`${LIGHTSPEED_PATH}/notebooks/${session.session_id}`);
+          setActiveNotebookId(session.session_id);
+          if (isFullscreenMode) {
+            navigate(`${LIGHTSPEED_PATH}/notebooks/${session.session_id}`);
+          }
         }
       }
     );
-  }, [createNotebookMutation, navigate]);
+  }, [
+    maybeAutoDeleteScratchNotebook,
+    createNotebookMutation,
+    isFullscreenMode,
+    navigate,
+    setActiveNotebookId
+  ]);
   const handleCloseNotebook = useCallback(() => {
-    setActiveNotebook(null);
-    navigate(`${LIGHTSPEED_PATH}/notebooks`);
-  }, [navigate]);
+    maybeAutoDeleteScratchNotebook();
+    setActiveNotebookId(void 0);
+    if (isFullscreenMode) {
+      navigate(`${LIGHTSPEED_PATH}/notebooks`);
+    }
+    refetchNotebooks();
+  }, [
+    maybeAutoDeleteScratchNotebook,
+    isFullscreenMode,
+    navigate,
+    refetchNotebooks,
+    setActiveNotebookId
+  ]);
   const handleRemoveNotebookAlert = (key) => {
     setNotebookAlerts(
       (prevAlerts) => prevAlerts.filter((alert) => alert.key !== key)
     );
   };
   const handleNotebookDeleted = () => {
+    if (deleteNotebookId) {
+      notebookStreamStore.clear(deleteNotebookId);
+    }
     const key = Date.now();
     setNotebookAlerts((prevAlerts) => [
       { title: t("notebooks.delete.toast"), variant: "success", key },
@@ -927,7 +1012,23 @@ const LightspeedChat = ({
         prompt: message.toString()
       })
     );
-    handleInputPrompt(message.toString(), getAttachments(fileContents));
+    const allAttachments = getAttachments(fileContents);
+    if (screenContextEnabled && domExtractionEnabled) {
+      try {
+        const domContext = extractPageContext({
+          maxChars: domExtractionMaxChars
+        });
+        if (domContext) {
+          allAttachments.push({
+            attachment_type: "configuration",
+            content_type: "text/plain",
+            content: domContext
+          });
+        }
+      } catch {
+      }
+    }
+    handleInputPrompt(message.toString(), allAttachments);
     setIsSendButtonDisabled(true);
     setFileContents([]);
     setDraftMessage("");
@@ -1129,6 +1230,7 @@ const LightspeedChat = ({
     (_, selectedItem) => {
       if (!isFullscreenMode) {
         setIsMcpSettingsOpen(false);
+        setIsChatHistoryDrawerOpen(false);
       }
       setNewChatCreated(false);
       const newConvId = String(selectedItem);
@@ -1551,32 +1653,11 @@ const LightspeedChat = ({
     drawerPanelStyle = { minWidth: 232, maxWidth: 400 };
   }
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    notebookAlerts.length > 0 && /* @__PURE__ */ jsx(
-      AlertGroup,
+    /* @__PURE__ */ jsx(
+      ToastAlertGroup,
       {
-        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
-        ))
+        alerts: notebookAlerts,
+        onRemoveAlert: handleRemoveNotebookAlert
       }
     ),
     isDeleteModalOpen && /* @__PURE__ */ jsx(
@@ -1604,25 +1685,75 @@ const LightspeedChat = ({
         onClose: () => setDeleteNotebookId(null),
         onDeleted: handleNotebookDeleted,
         sessionId: deleteNotebookId,
-        name: notebooks.find((n) => n.session_id === deleteNotebookId)?.name ?? ""
+        name: notebooks.find((n) => n.session_id === deleteNotebookId)?.name ?? "",
+        isCompact: !isFullscreenMode
       }
     ),
     /* @__PURE__ */ jsxs(
       Chatbot,
       {
         displayMode: ChatbotDisplayMode.embedded,
-        className: `${classes.body} ${isMcpSettingsOpen && !isChatHistoryDrawerOpen ? classes.mcpCollapsedDrawerOrderFix : ""}`,
+        className: `${classes.body} ${!isFullscreenMode ? classes.bodyCompact : ""} ${isMcpSettingsOpen && !isChatHistoryDrawerOpen ? classes.mcpCollapsedDrawerOrderFix : ""}`,
         children: [
           /* @__PURE__ */ jsxs(ChatbotHeader, { className: classes.header, children: [
             /* @__PURE__ */ jsxs(ChatbotHeaderMain, { children: [
-              showChatPanel && !isFullscreenMode && /* @__PURE__ */ jsx(
-                ChatbotHeaderMenu,
+              showChatPanel && !isFullscreenMode && /* @__PURE__ */ jsxs("div", { className: classes.chatHeaderActions, children: [
+                /* @__PURE__ */ jsx(
+                  Tooltip,
+                  {
+                    content: isChatHistoryDrawerOpen ? t("tooltip.collapseHistoryPanel") : t("tooltip.expandHistoryPanel"),
+                    position: "bottom",
+                    children: /* @__PURE__ */ jsx(
+                      Button,
+                      {
+                        variant: "plain",
+                        onClick: onChatHistoryDrawerToggle,
+                        "aria-expanded": isChatHistoryDrawerOpen,
+                        "aria-label": t("aria.chatHistoryMenu"),
+                        size: "sm",
+                        children: isChatHistoryDrawerOpen ? /* @__PURE__ */ jsx(SidebarCollapseIcon, { size: 18 }) : /* @__PURE__ */ jsx(SidebarExpandIcon, { size: 18 })
+                      }
+                    )
+                  }
+                ),
+                !isChatHistoryDrawerOpen && /* @__PURE__ */ jsx(
+                  Tooltip,
+                  {
+                    content: t("tooltip.quickNewChat"),
+                    position: "bottom",
+                    children: /* @__PURE__ */ jsx(
+                      Button,
+                      {
+                        variant: "plain",
+                        onClick: onNewChat,
+                        isDisabled: newChatCreated,
+                        "aria-label": t("tooltip.quickNewChat"),
+                        size: "sm",
+                        children: /* @__PURE__ */ jsx(
+                          PenIcon,
+                          {
+                            style: {
+                              width: 18,
+                              height: 18,
+                              color: newChatCreated ? void 0 : "var(--pf-t--global--color--brand--default)"
+                            }
+                          }
+                        )
+                      }
+                    )
+                  }
+                )
+              ] }),
+              !isFullscreenMode && showNotebooksPanel && activeNotebook && /* @__PURE__ */ jsx(
+                NotebookHeaderActions,
                 {
-                  "aria-expanded": isChatHistoryDrawerOpen,
-                  onMenuToggle: onChatHistoryDrawerToggle,
-                  className: classes.headerMenu,
-                  tooltipContent: t("tooltip.chatHistoryMenu"),
-                  "aria-label": t("aria.chatHistoryMenu")
+                  className: classes.notebookHeaderActions,
+                  onClose: handleCloseNotebook,
+                  onOpenUploadModal: () => setNotebookUploadModalOpen(true),
+                  uploadsInProgress: notebookUploadsInProgress,
+                  uploadModalOpen: notebookUploadModalOpen,
+                  sidebarCollapsed: notebookSidebarCollapsed,
+                  onSidebarCollapsedChange: setNotebookSidebarCollapsed
                 }
               ),
               isFullscreenMode && /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -1661,8 +1792,8 @@ const LightspeedChat = ({
               }
             )
           ] }),
-          isFullscreenMode && /* @__PURE__ */ jsx("div", { className: classes.headerDivider }),
-          isFullscreenMode && shouldShowTabs && /* @__PURE__ */ jsxs(
+          (isFullscreenMode || shouldShowTabs) && /* @__PURE__ */ jsx("div", { className: classes.headerDivider }),
+          shouldShowTabs && /* @__PURE__ */ jsxs(
             Tabs,
             {
               value: activeTab,
@@ -1769,7 +1900,10 @@ const LightspeedChat = ({
                   drawerPanelContentProps: {
                     isResizable: isFullscreenMode,
                     hasNoBorder: !isFullscreenMode,
-                    style: drawerPanelStyle
+                    style: drawerPanelStyle,
+                    ...!isFullscreenMode && isChatHistoryDrawerOpen && {
+                      className: classes.compactDrawerPanel
+                    }
                   },
                   reverseButtonOrder: true,
                   displayMode: ChatbotDisplayMode.embedded,
@@ -1849,24 +1983,52 @@ const LightspeedChat = ({
               avatar,
               profileLoading,
               topicRestrictionEnabled,
-              onClose: handleCloseNotebook
+              onClose: handleCloseNotebook,
+              isCompact: !isFullscreenMode,
+              sidebarCollapsed: notebookSidebarCollapsed,
+              onSidebarCollapsedChange: setNotebookSidebarCollapsed,
+              isUploadModalOpen: notebookUploadModalOpen,
+              onUploadModalOpenChange: setNotebookUploadModalOpen,
+              onUploadsInProgressChange: setNotebookUploadsInProgress
             }
           ),
           showNotebooksPanel && !notebooksPermissionLoading && hasNotebooksAccess && !activeNotebook && /* @__PURE__ */ jsx(
-            NotebooksTab,
+            "div",
             {
-              notebooks,
-              hasNotebooks,
-              classes,
-              openNotebookMenuId,
-              setOpenNotebookMenuId,
-              onSelectNotebook: (notebook) => {
-                navigate(`${LIGHTSPEED_PATH}/notebooks/${notebook.session_id}`);
+              style: {
+                position: "relative",
+                display: "flex",
+                flexDirection: "column",
+                flex: 1,
+                minHeight: 0,
+                overflow: "hidden"
               },
-              onRename: handleRenameNotebook,
-              onDelete: setDeleteNotebookId,
-              onCreateNotebook: handleCreateNotebook,
-              t
+              children: /* @__PURE__ */ jsx(
+                NotebooksTab,
+                {
+                  notebooks,
+                  hasNotebooks,
+                  classes: isFullscreenMode ? classes : {
+                    ...classes,
+                    notebooksGrid: classes.notebooksGridCompact
+                  },
+                  openNotebookMenuId,
+                  setOpenNotebookMenuId,
+                  onSelectNotebook: (notebook) => {
+                    maybeAutoDeleteScratchNotebook();
+                    setActiveNotebookId(notebook.session_id);
+                    if (isFullscreenMode) {
+                      navigate(
+                        `${LIGHTSPEED_PATH}/notebooks/${notebook.session_id}`
+                      );
+                    }
+                  },
+                  onRename: handleRenameNotebook,
+                  onDelete: setDeleteNotebookId,
+                  onCreateNotebook: handleCreateNotebook,
+                  t
+                }
+              )
             }
           ),
           showNotebooksPanel && !notebooksPermissionLoading && !hasNotebooksAccess && /* @__PURE__ */ jsx(
@@ -1875,7 +2037,7 @@ const LightspeedChat = ({
               subject: t("permission.subject.notebooks"),
               permissions: [iaNotebooksUsePermissionName],
               action: /* @__PURE__ */ jsx(
-                Button,
+                Button$1,
                 {
                   variant: "outlined",
                   color: "primary",