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

package/dist/components/LightSpeedChat.esm.js

@@ -2,14 +2,13 @@ import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { useState, useEffect, useRef, useLayoutEffect, useCallback, useMemo } from 'react';
 import { useNavigate, useMatch, useLocation } from 'react-router-dom';
 import { useApi, configApiRef } from '@backstage/core-plugin-api';
-import Button$1 from '@mui/material/Button';
 import { styled } from '@mui/material/styles';
 import Tab from '@mui/material/Tab';
 import Tabs from '@mui/material/Tabs';
 import { Chatbot, ChatbotHeader, ChatbotHeaderTitle, ChatbotFooter, MessageBar, ChatbotContent, Settings, ChatbotDisplayMode, ChatbotHeaderMain, ChatbotAlert, FileDropZone } from '@patternfly/chatbot';
 import ChatbotConversationHistoryNav from '@patternfly/chatbot/dist/dynamic/ChatbotConversationHistoryNav';
 import { SelectList, DropdownItem, Tooltip, MenuToggle, Select, SelectOption, Button, Title, Label } from '@patternfly/react-core';
-import { PenIcon, ThumbtackIcon, TrashIcon, SearchIcon, SortAmountDownAltIcon, SortAmountDownIcon, PlusIcon } from '@patternfly/react-icons';
+import { 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';
@@ -20,8 +19,9 @@ import { useConversations } from '../hooks/useConversations.esm.js';
 import { useDeleteNotebook } from '../hooks/notebooks/useDeleteNotebook.esm.js';
 import { useIsMobile } from '../hooks/useIsMobile.esm.js';
 import { useLastOpenedConversation } from '../hooks/useLastOpenedConversation.esm.js';
-import { useLightspeedDeletePermission } from '../hooks/useLightspeedDeletePermission.esm.js';
-import { useLightspeedNotebooksPermission } from '../hooks/notebooks/useLightspeedNotebooksPermission.esm.js';
+import { useIaChatPermission } from '../hooks/useIaChatPermission.esm.js';
+import { useIaMcpToolsPermission } from '../hooks/useIaMcpToolsPermission.esm.js';
+import { useIaNotebooksPermission } from '../hooks/useIaNotebooksPermission.esm.js';
 import '@backstage/plugin-permission-react';
 import '@red-hat-developer-hub/backstage-plugin-intelligent-assistant-common';
 import { useTranslation } from '../hooks/useTranslation.esm.js';
@@ -29,6 +29,11 @@ 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 { useSavedPromptsSettings } from '../hooks/useSavedPromptsSettings.esm.js';
+import { useSavedPrompts } from '../hooks/useSavedPrompts.esm.js';
+import { useSavedPromptActions } from '../hooks/useSavedPromptActions.esm.js';
+import { useConversationHistoryGroups } from '../hooks/useConversationHistoryGroups.esm.js';
+import { useSettingsPanelUrlState } from '../hooks/useSettingsPanelUrlState.esm.js';
 import '../api/notebooksApi.esm.js';
 import { useRenameNotebookWithAlert } from '../hooks/notebooks/useRenameNotebookWithAlert.esm.js';
 import { useSortSettings } from '../hooks/useSortSettings.esm.js';
@@ -36,19 +41,19 @@ import { useStopConversation } from '../hooks/useStopConversation.esm.js';
 import { useCreateNotebook } from '../hooks/notebooks/useCreateNotebook.esm.js';
 import { useNotebookDocuments } from '../hooks/notebooks/useNotebookDocuments.esm.js';
 import { useLightspeedDrawerContext } from '../hooks/useLightspeedDrawerContext.esm.js';
-import { useLightspeedUpdatePermission } from '../hooks/useLightspeedUpdatePermission.esm.js';
 import { useWelcomePrompts } from '../hooks/useWelcomePrompts.esm.js';
 import { getAttachments } from '../utils/attachment-utils.esm.js';
+import { isSavedPromptConversationId, SAVED_PROMPT_CONVERSATION_ID_PREFIX } from '../utils/buildConversationHistoryGroups.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';
 import { CollapsedHistoryStrip } from './CollapsedHistoryStrip.esm.js';
 import { DeleteModal } from './DeleteModal.esm.js';
+import { DeleteSavedPromptModal } from './DeleteSavedPromptModal.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 { NotebookHeaderActions } from './notebooks/NotebookHeaderActions.esm.js';
@@ -56,8 +61,9 @@ 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 { SavedPromptMenuItems } from './SavedPromptMenuItems.esm.js';
+import { SettingsPanel } from './SettingsPanel.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`;
@@ -83,6 +89,24 @@ const StyledChatbot = styled(Chatbot, {
     height: 0,
     overflow: "hidden"
   },
+  // Remove once @patternfly/chatbot supports ConversationGroup header actions:
+  // https://github.com/patternfly/chatbot/issues/904
+  "& .pf-chatbot__history-menu .pf-v6-c-menu__list": {
+    paddingInlineStart: 0
+  },
+  "& .pf-chatbot__menu-show-all-toggle": {
+    cursor: "pointer"
+  },
+  "& .pf-chatbot__menu-item-header--expandable.lightspeed-saved-prompts-group .pf-v6-c-button__text": {
+    width: "100%"
+  },
+  "& .lightspeed-saved-prompts-section-gear": {
+    opacity: 0,
+    transition: "opacity 0.15s ease-in-out"
+  },
+  "& .pf-chatbot__menu-item-header--expandable.lightspeed-saved-prompts-group:hover .lightspeed-saved-prompts-section-gear, & .pf-chatbot__menu-item-header--expandable.lightspeed-saved-prompts-group .lightspeed-saved-prompts-section-gear:focus-visible": {
+    opacity: 1
+  },
   "& .pf-chatbot-container": {
     minHeight: 0
   },
@@ -235,6 +259,19 @@ const StyledChatbotContent = styled(ChatbotContent, {
     overflowX: "hidden",
     overflowWrap: "break-word",
     wordBreak: "break-word"
+  },
+  // Remove once @patternfly/chatbot adds a responsive grid layout for prompt suggestions:
+  // https://github.com/patternfly/chatbot/issues/905
+  "& .pf-chatbot__prompt-suggestions": {
+    display: "grid !important",
+    flexDirection: "unset !important",
+    alignItems: "stretch",
+    gap: "var(--pf-t--global--spacer--lg)",
+    gridTemplateColumns: "repeat(auto-fit, minmax(min(100%, 12.5rem), 1fr))"
+  },
+  "& .pf-chatbot__prompt-suggestions > .pf-chatbot__prompt-suggestion": {
+    height: "100%",
+    minWidth: 0
   }
 }));
 const ContentScroll = styled("div", {
@@ -385,6 +422,15 @@ const FullscreenChatLayout = styled("div")({
     "--pf-v6-c-menu__item--PaddingInlineStart": "var(--pf-t--global--spacer--md)",
     "--pf-v6-c-menu__item--PaddingInlineEnd": "var(--pf-t--global--spacer--md)"
   },
+  "& .pf-chatbot__menu-item .pf-v6-c-menu__item-main, & .pf-chatbot__menu-item .pf-v5-c-menu__item-main": {
+    minWidth: 0,
+    overflow: "hidden"
+  },
+  "& .pf-chatbot__menu-item-text, & .pf-v6-c-menu__item-text, & .pf-v5-c-menu__item-text": {
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    whiteSpace: "nowrap"
+  },
   "& .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"
@@ -425,7 +471,6 @@ const LightspeedChat = ({
   const isOnNotebookRoute = Boolean(
     notebooksRouteMatch || notebookViewRouteMatch
   );
-  const shouldShowTabs = notebooksEnabled || isOnNotebookRoute;
   const {
     displayMode,
     setDisplayMode,
@@ -437,9 +482,23 @@ const LightspeedChat = ({
     shellViewTab,
     setShellViewTab,
     activeNotebookId,
-    setActiveNotebookId
+    setActiveNotebookId,
+    settingsTab: persistedSettingsTab,
+    setSettingsTab: setPersistedSettingsTab
   } = useLightspeedDrawerContext();
   const isFullscreenMode = displayMode === ChatbotDisplayMode.embedded;
+  const {
+    isOpen: isSettingsOpen,
+    activeTab: activeSettingsTab,
+    openSettings,
+    closeSettings,
+    setActiveTab: setSettingsTab
+  } = useSettingsPanelUrlState(
+    isFullscreenMode,
+    persistedSettingsTab,
+    setPersistedSettingsTab
+  );
+  const showCompactSettings = !isFullscreenMode && isSettingsOpen;
   const location = useLocation();
   const isNotebooksFullscreenPath = location.pathname === `${LIGHTSPEED_PATH}/notebooks` || location.pathname.startsWith(`${LIGHTSPEED_PATH}/notebooks/`);
   const user = useBackstageUserIdentity();
@@ -458,13 +517,21 @@ const LightspeedChat = ({
     }
     return 0;
   });
-  const {
-    allowed: hasNotebooksAccess,
-    loading: notebooksPermissionLoading,
-    iaNotebooksPermissionName
-  } = useLightspeedNotebooksPermission();
+  const { allowed: hasChatAccess, loading: chatPermissionLoading } = useIaChatPermission();
+  const chatPermissionResolved = !chatPermissionLoading && hasChatAccess;
+  const { allowed: hasNotebooksAccess, loading: notebooksPermissionLoading } = useIaNotebooksPermission();
   const notebooksPermissionResolved = !notebooksPermissionLoading && hasNotebooksAccess;
-  const { data: notebookConversationIdsArray = [] } = useNotebookConversationIds();
+  const canShowNotebooks = notebooksPermissionResolved && (notebooksEnabled || isOnNotebookRoute);
+  const hasChatTab = chatPermissionResolved;
+  const hasNotebooksTab = canShowNotebooks;
+  const hasBothTabs = hasChatTab && hasNotebooksTab;
+  const shouldShowTabs = hasBothTabs;
+  const selectedTabIndex = hasBothTabs ? activeTab : 0;
+  const { allowed: hasMcpToolsAccess, loading: mcpToolsPermissionLoading } = useIaMcpToolsPermission();
+  const mcpToolsPermissionResolved = !mcpToolsPermissionLoading && hasMcpToolsAccess;
+  const { data: notebookConversationIdsArray = [] } = useNotebookConversationIds(
+    chatPermissionResolved || notebooksPermissionResolved
+  );
   const { data: notebooks = [], refetch: refetchNotebooks } = useNotebookSessions(notebooksPermissionResolved);
   const hasNotebooks = notebooks.length > 0;
   const [openNotebookMenuId, setOpenNotebookMenuId] = useState(
@@ -510,7 +577,6 @@ const LightspeedChat = ({
   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);
@@ -518,31 +584,79 @@ const LightspeedChat = ({
   const [hasChatContentOverflow, setHasChatContentOverflow] = useState(false);
   const wasStoppedByUserRef = useRef(false);
   const { isReady, lastOpenedId, setLastOpenedId, clearLastOpenedId } = useLastOpenedConversation(user);
-  const showChatPanel = activeTab === 0;
-  const showNotebooksPanel = (notebooksEnabled || isOnNotebookRoute) && activeTab !== 0;
+  const showChatPanel = hasChatTab && (activeTab === 0 || !hasNotebooksTab);
+  const showNotebooksPanel = hasNotebooksTab && (activeTab === 1 || !hasChatTab);
   const [isChatHistoryDrawerOpen, setIsChatHistoryDrawerOpen] = useState(!isMobile && isFullscreenMode);
   useLayoutEffect(() => {
-    if (!isFullscreenMode) {
+    if (!isFullscreenMode || chatPermissionLoading || notebooksPermissionLoading) {
       return;
     }
     if (isNotebooksFullscreenPath) {
+      if (canShowNotebooks) {
+        setActiveTab(1);
+        setShellViewTab(1);
+      } else if (chatPermissionResolved) {
+        navigate(
+          routeConversationId ? `${LIGHTSPEED_PATH}/conversation/${routeConversationId}` : LIGHTSPEED_PATH,
+          { replace: true }
+        );
+        setActiveTab(0);
+        setShellViewTab(0);
+      }
+      return;
+    }
+    const isBaseLightspeedChatRoute = location.pathname === LIGHTSPEED_PATH || location.pathname === `${LIGHTSPEED_PATH}/`;
+    const isConversationRoute = location.pathname.startsWith(
+      `${LIGHTSPEED_PATH}/conversation/`
+    );
+    if (!chatPermissionResolved && canShowNotebooks && (isBaseLightspeedChatRoute || isConversationRoute)) {
+      navigate(
+        activeNotebookId ? `${LIGHTSPEED_PATH}/notebooks/${activeNotebookId}` : `${LIGHTSPEED_PATH}/notebooks`,
+        { replace: true }
+      );
       setActiveTab(1);
       setShellViewTab(1);
       return;
     }
-    const isBaseLightspeedChatRoute = location.pathname === LIGHTSPEED_PATH || location.pathname === `${LIGHTSPEED_PATH}/`;
-    if (shellViewTab === 1 && isBaseLightspeedChatRoute) {
+    if (shellViewTab === 1 && isBaseLightspeedChatRoute && canShowNotebooks) {
       navigate(`${LIGHTSPEED_PATH}/notebooks`, { replace: true });
       return;
     }
-    setActiveTab(0);
-    setShellViewTab(0);
+    if (chatPermissionResolved) {
+      setActiveTab(0);
+      setShellViewTab(0);
+    }
   }, [
     isFullscreenMode,
     isNotebooksFullscreenPath,
     shellViewTab,
     location.pathname,
     navigate,
+    setShellViewTab,
+    chatPermissionLoading,
+    notebooksPermissionLoading,
+    chatPermissionResolved,
+    canShowNotebooks,
+    activeNotebookId,
+    routeConversationId
+  ]);
+  useEffect(() => {
+    if (chatPermissionLoading || notebooksPermissionLoading) {
+      return;
+    }
+    if (!chatPermissionResolved && canShowNotebooks && activeTab === 0) {
+      setActiveTab(1);
+      setShellViewTab(1);
+    } else if (chatPermissionResolved && !canShowNotebooks && activeTab !== 0) {
+      setActiveTab(0);
+      setShellViewTab(0);
+    }
+  }, [
+    chatPermissionLoading,
+    notebooksPermissionLoading,
+    chatPermissionResolved,
+    canShowNotebooks,
+    activeTab,
     setShellViewTab
   ]);
   const maybeAutoDeleteScratchNotebook = useCallback(() => {
@@ -565,13 +679,19 @@ const LightspeedChat = ({
     deleteNotebook
   ]);
   const handleNotebookTabSelect = (_event, nextTab) => {
-    if (nextTab === 0) {
+    let logicalTab = 0;
+    if (hasBothTabs) {
+      logicalTab = nextTab;
+    } else if (hasNotebooksTab) {
+      logicalTab = 1;
+    }
+    if (logicalTab === 0) {
       maybeAutoDeleteScratchNotebook();
     }
-    setActiveTab(nextTab);
-    setShellViewTab(nextTab);
+    setActiveTab(logicalTab);
+    setShellViewTab(logicalTab);
     if (isFullscreenMode) {
-      if (nextTab === 1) {
+      if (logicalTab === 1) {
         navigate(
           activeNotebookId ? `${LIGHTSPEED_PATH}/notebooks/${activeNotebookId}` : `${LIGHTSPEED_PATH}/notebooks`
         );
@@ -581,7 +701,7 @@ const LightspeedChat = ({
         );
       }
     }
-    if (nextTab === 1 && notebooksPermissionResolved) {
+    if (logicalTab === 1 && notebooksPermissionResolved) {
       refetchNotebooks();
     }
   };
@@ -677,7 +797,17 @@ const LightspeedChat = ({
     if (computedBg) {
       setChatHeaderBgColor(computedBg);
     }
-  }, [displayMode, isMcpSettingsOpen]);
+  }, [displayMode, isSettingsOpen]);
+  useEffect(() => {
+    if (!mcpToolsPermissionResolved && isSettingsOpen && activeSettingsTab === "mcp-servers") {
+      setSettingsTab("saved-prompts");
+    }
+  }, [
+    mcpToolsPermissionResolved,
+    isSettingsOpen,
+    activeSettingsTab,
+    setSettingsTab
+  ]);
   const {
     isPinningChatsEnabled,
     pinnedChats,
@@ -685,6 +815,7 @@ const LightspeedChat = ({
     pinChat,
     unpinChat
   } = usePinnedChatsSettings(user);
+  const { isSavedPromptsEnabled, handleSavedPromptsToggle } = useSavedPromptsSettings(user);
   const { selectedSort, handleSortChange } = useSortSettings(user);
   const {
     uploadError,
@@ -738,10 +869,19 @@ const LightspeedChat = ({
     data: conversations = [],
     isLoading,
     isRefetching
-  } = useConversations();
-  const { allowed: hasDeleteAccess } = useLightspeedDeletePermission();
-  const { allowed: hasUpdateAccess } = useLightspeedUpdatePermission();
-  const samplePrompts = useWelcomePrompts();
+  } = useConversations(chatPermissionResolved);
+  const {
+    savedPrompts,
+    config: savedPromptsConfig,
+    loading: savedPromptsLoading,
+    error: savedPromptsError,
+    createPrompt,
+    deletePrompt
+  } = useSavedPrompts();
+  const samplePrompts = useWelcomePrompts(
+    chatPermissionResolved,
+    isSavedPromptsEnabled ? savedPrompts : void 0
+  );
   useEffect(() => {
     if (!user || !isReady) return;
     const onOverlayLikeSurface = isFullscreenMode || !routeConversationId;
@@ -885,10 +1025,31 @@ const LightspeedChat = ({
     setFileContents([]);
     setDraftMessage("");
   };
+  const handleApplySavedPrompt = useCallback(
+    (content) => {
+      setDraftMessage(content);
+      setMessageBarKey((k) => k + 1);
+    },
+    [setDraftMessage]
+  );
+  const {
+    sendDirectly: sendSavedPromptDirectly,
+    requestDelete: requestSavedPromptDelete,
+    promptToDelete,
+    closeDeleteModal: closeSavedPromptDeleteModal,
+    confirmDelete: confirmSavedPromptDelete,
+    isDeleting: isSavedPromptDeleting,
+    deleteError: savedPromptDeleteError,
+    isDeleteModalOpen: isSavedPromptDeleteModalOpen
+  } = useSavedPromptActions({
+    onApplyToInput: handleApplySavedPrompt,
+    onSendDirectly: sendMessage,
+    onDelete: deletePrompt
+  });
   const onNewChat = useCallback(() => {
     (async () => {
       if (!isFullscreenMode) {
-        setIsMcpSettingsOpen(false);
+        closeSettings();
       }
       if (conversationId !== TEMP_CONVERSATION_ID) {
         setMessages([]);
@@ -912,7 +1073,8 @@ const LightspeedChat = ({
     setUploadError,
     setDraftMessage,
     setCurrentConversationId,
-    isFullscreenMode
+    isFullscreenMode,
+    closeSettings
   ]);
   const openDeleteModal = (conversation_id) => {
     setTargetConversationId(conversation_id);
@@ -939,7 +1101,6 @@ const LightspeedChat = ({
           /* @__PURE__ */ jsx(
             DropdownItem,
             {
-              isDisabled: !hasUpdateAccess,
               icon: /* @__PURE__ */ jsx(PenIcon, {}),
               onClick: () => openChatRenameModal(conversationSummary.conversation_id),
               children: t("conversation.rename")
@@ -963,7 +1124,6 @@ const LightspeedChat = ({
           /* @__PURE__ */ jsx(
             DropdownItem,
             {
-              isDisabled: !hasDeleteAccess,
               icon: /* @__PURE__ */ jsx(TrashIcon, {}),
               onClick: () => openDeleteModal(conversationSummary.conversation_id),
               children: t("conversation.delete")
@@ -972,15 +1132,7 @@ const LightspeedChat = ({
         ] })
       };
     },
-    [
-      pinnedChats,
-      hasDeleteAccess,
-      isPinningChatsEnabled,
-      hasUpdateAccess,
-      t,
-      pinChat,
-      unpinChat
-    ]
+    [pinnedChats, isPinningChatsEnabled, t, pinChat, unpinChat]
   );
   const notebookConversationIds = useMemo(
     () => new Set(notebookConversationIdsArray),
@@ -1012,76 +1164,47 @@ const LightspeedChat = ({
       selectedSort
     ]
   );
-  const filterConversations = useCallback(
-    (targetValue) => {
-      const pinnedChatsKey = t("conversation.category.pinnedChats") || "Pinned chats";
-      let isNoPinnedChatsSearchResults = false;
-      let isNoRecentChatsSearchResults = false;
-      const filteredConversations2 = 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 {};
+  const getSavedPromptMenuItems = useCallback(
+    (prompt) => /* @__PURE__ */ jsx(
+      SavedPromptMenuItems,
+      {
+        prompt,
+        variant: "sidebar",
+        onSendDirectly: sendSavedPromptDirectly,
+        onDelete: requestSavedPromptDelete,
+        isSendDirectlyDisabled: streamingUiMatchesView
       }
-      return filteredConversations2;
-    },
-    [categorizedMessages, isPinningChatsEnabled, t]
+    ),
+    [sendSavedPromptDirectly, requestSavedPromptDelete, streamingUiMatchesView]
   );
+  const { conversationGroups, hasNoSearchResults } = useConversationHistoryGroups({
+    savedPrompts,
+    categorizedMessages,
+    filterValue,
+    isSavedPromptsEnabled,
+    isPinningChatsEnabled,
+    isSettingsOpen,
+    activeSettingsTab,
+    openSettings,
+    getSavedPromptMenuItems
+  });
   useEffect(() => {
     setMessages(conversationMessages);
   }, [conversationMessages]);
   const onSelectActiveItem = useCallback(
     (_, selectedItem) => {
+      if (selectedItem !== void 0 && isSavedPromptConversationId(selectedItem)) {
+        const promptId = String(selectedItem).slice(
+          SAVED_PROMPT_CONVERSATION_ID_PREFIX.length
+        );
+        const prompt = savedPrompts.find(({ id }) => id === promptId);
+        if (prompt) {
+          handleApplySavedPrompt(prompt.content);
+        }
+        return;
+      }
       if (!isFullscreenMode) {
-        setIsMcpSettingsOpen(false);
+        closeSettings();
         setIsChatHistoryDrawerOpen(false);
       }
       setNewChatCreated(false);
@@ -1105,7 +1228,9 @@ const LightspeedChat = ({
       setDraftMessage,
       scrollToBottomRef,
       setCurrentConversationId,
-      setIsMcpSettingsOpen,
+      closeSettings,
+      savedPrompts,
+      handleApplySavedPrompt,
       isFullscreenMode
     ]
   );
@@ -1113,8 +1238,9 @@ const LightspeedChat = ({
     (c) => c.conversation_id === viewConversationId
   );
   const getMaxPrompts = () => {
+    const count = samplePrompts?.length ?? 0;
     if (isFullscreenMode) {
-      return samplePrompts?.length;
+      return count;
     }
     if (displayMode === ChatbotDisplayMode.docked) {
       return 2;
@@ -1255,7 +1381,7 @@ const LightspeedChat = ({
   }, [
     conversationId,
     displayMode,
-    isMcpSettingsOpen,
+    isSettingsOpen,
     messages.length,
     welcomePrompts.length
   ]);
@@ -1272,20 +1398,6 @@ const LightspeedChat = ({
     }),
     [filterValue, onClearFilter]
   );
-  const filteredConversations = useMemo(
-    () => filterConversations(filterValue),
-    [filterConversations, filterValue]
-  );
-  const noResultsState = useMemo(() => {
-    if (!filterValue || Object.keys(filteredConversations).length > 0) {
-      return void 0;
-    }
-    return {
-      bodyText: t("chatbox.emptyState.noResults.body"),
-      titleText: t("chatbox.emptyState.noResults.title"),
-      icon: SearchIcon
-    };
-  }, [filterValue, filteredConversations, t]);
   const onChatHistoryDrawerToggle = useCallback(() => {
     setIsChatHistoryDrawerOpen((isOpen) => !isOpen);
   }, []);
@@ -1469,21 +1581,35 @@ const LightspeedChat = ({
       /* @__PURE__ */ jsx(ChatbotFootnoteWithIcon, { ...getFootnoteProps(t) })
     ] })
   ] });
-  const mcpSettingsPanel = /* @__PURE__ */ jsx(
-    McpServersSettings,
+  const settingsPanel = /* @__PURE__ */ jsx(
+    SettingsPanel,
     {
-      onClose: () => setIsMcpSettingsOpen(false),
-      backgroundColor: chatHeaderBgColor
+      activeTab: activeSettingsTab,
+      onTabChange: setSettingsTab,
+      onClose: closeSettings,
+      backgroundColor: chatHeaderBgColor,
+      isSavedPromptsEnabled,
+      onEnableSavedPrompts: () => handleSavedPromptsToggle(true),
+      onApplySavedPromptToInput: handleApplySavedPrompt,
+      onSendSavedPromptDirectly: sendMessage,
+      isChatStreaming: streamingUiMatchesView,
+      savedPrompts,
+      savedPromptsConfig,
+      savedPromptsLoading,
+      savedPromptsError,
+      onCreateSavedPrompt: createPrompt,
+      onRequestSavedPromptDelete: requestSavedPromptDelete,
+      showMcpSettings: mcpToolsPermissionResolved
     }
   );
   const mainPanelContent = (() => {
-    if (!isMcpSettingsOpen) {
+    if (!isSettingsOpen) {
       return /* @__PURE__ */ jsx(Fragment, { children: chatMainContent });
     }
     if (isFullscreenMode) {
       return /* @__PURE__ */ jsxs(McpFullscreenLayout, { children: [
         /* @__PURE__ */ jsx(McpChatPane, { children: chatMainContent }),
-        /* @__PURE__ */ jsx(McpSettingsPane, { children: mcpSettingsPanel })
+        /* @__PURE__ */ jsx(McpSettingsPane, { children: settingsPanel })
       ] });
     }
     return /* @__PURE__ */ jsx(
@@ -1491,9 +1617,9 @@ const LightspeedChat = ({
       {
         fields: [
           {
-            id: "mcp-servers-settings",
+            id: "settings-panel",
             label: "",
-            field: mcpSettingsPanel
+            field: settingsPanel
           }
         ]
       }
@@ -1502,7 +1628,7 @@ const LightspeedChat = ({
   let drawerPanelStyle;
   if (!isFullscreenMode) {
     drawerPanelStyle = { zIndex: 1300 };
-  } else if (isMcpSettingsOpen) {
+  } else if (isSettingsOpen) {
     drawerPanelStyle = { width: 320, minWidth: 320, maxWidth: 320 };
   } else {
     drawerPanelStyle = { minWidth: 232, maxWidth: 400 };
@@ -1544,14 +1670,14 @@ const LightspeedChat = ({
         isCompact: !isFullscreenMode
       }
     ),
-    /* @__PURE__ */ jsxs(
+    /* @__PURE__ */ jsx(
       StyledChatbot,
       {
         displayMode: ChatbotDisplayMode.embedded,
         isCompact: !isFullscreenMode,
         compactDrawerOpen: !isFullscreenMode && isChatHistoryDrawerOpen,
-        mcpDrawerFix: isMcpSettingsOpen && !isChatHistoryDrawerOpen,
-        children: [
+        mcpDrawerFix: isSettingsOpen && !isChatHistoryDrawerOpen,
+        children: showCompactSettings ? settingsPanel : /* @__PURE__ */ jsxs(Fragment, { children: [
           /* @__PURE__ */ jsxs(StyledChatbotHeader, { children: [
             /* @__PURE__ */ jsxs(ChatbotHeaderMain, { children: [
               showChatPanel && !isFullscreenMode && /* @__PURE__ */ jsxs(HeaderActions, { children: [
@@ -1638,20 +1764,27 @@ const LightspeedChat = ({
                 handleSelectedModel,
                 models,
                 isPinningChatsEnabled,
+                isSavedPromptsEnabled,
+                onSavedPromptsToggle: handleSavedPromptsToggle,
                 hideModelSelector: true,
                 showChatTabOptions: !showNotebooksPanel,
+                showMcpSettings: mcpToolsPermissionResolved,
                 setDisplayMode: setDisplayModeFromHeader,
                 displayMode,
                 onPinnedChatsToggle: handlePinningChatsToggle,
-                onMcpSettingsClick: () => setIsMcpSettingsOpen(true)
+                onMcpSettingsClick: () => {
+                  openSettings(
+                    mcpToolsPermissionResolved ? "mcp-servers" : "saved-prompts"
+                  );
+                }
               }
             )
           ] }),
-          (isFullscreenMode || shouldShowTabs) && /* @__PURE__ */ jsx(HeaderDivider, {}),
+          (isFullscreenMode || shouldShowTabs) && /* @__PURE__ */ jsx(HeaderDivider, { "data-testid": "lightspeed-header-divider" }),
           shouldShowTabs && /* @__PURE__ */ jsxs(
             Tabs,
             {
-              value: activeTab,
+              value: selectedTabIndex,
               onChange: handleNotebookTabSelect,
               "aria-label": t("tabs.ariaLabel"),
               variant: "standard",
@@ -1693,7 +1826,7 @@ const LightspeedChat = ({
                 }
               }),
               children: [
-                /* @__PURE__ */ jsx(
+                hasChatTab && /* @__PURE__ */ jsx(
                   Tab,
                   {
                     disableRipple: true,
@@ -1701,7 +1834,7 @@ const LightspeedChat = ({
                     "aria-label": t("tabs.chat")
                   }
                 ),
-                /* @__PURE__ */ jsx(
+                hasNotebooksTab && /* @__PURE__ */ jsx(
                   Tab,
                   {
                     disableRipple: true,
@@ -1729,7 +1862,7 @@ const LightspeedChat = ({
             }
           ),
           /* @__PURE__ */ jsxs(ChatMain, { children: [
-            showChatPanel && /* @__PURE__ */ jsx(
+            showChatPanel && chatPermissionResolved && /* @__PURE__ */ jsx(
               ConditionalWrapper,
               {
                 condition: isFullscreenMode,
@@ -1764,7 +1897,7 @@ const LightspeedChat = ({
                     setIsDrawerOpen: setIsChatHistoryDrawerOpen,
                     activeItemId: viewConversationId,
                     onSelectActiveItem,
-                    conversations: filteredConversations,
+                    conversations: conversationGroups,
                     onNewChat,
                     newChatButtonText: t("button.newChat"),
                     newChatButtonProps: {
@@ -1776,7 +1909,11 @@ const LightspeedChat = ({
                     searchInputAriaLabel: t("aria.search.placeholder"),
                     searchInputProps,
                     searchActionEnd: sortDropdown,
-                    noResultsState,
+                    noResultsState: filterValue && hasNoSearchResults ? {
+                      bodyText: t("chatbox.emptyState.noResults.body"),
+                      titleText: t("chatbox.emptyState.noResults.title"),
+                      icon: SearchIcon
+                    } : void 0,
                     drawerContent: /* @__PURE__ */ jsxs(
                       ChatFileDropZone,
                       {
@@ -1805,7 +1942,7 @@ const LightspeedChat = ({
                 )
               }
             ),
-            showNotebooksPanel && !notebooksPermissionLoading && hasNotebooksAccess && activeNotebook && /* @__PURE__ */ jsx(
+            showNotebooksPanel && canShowNotebooks && activeNotebook && /* @__PURE__ */ jsx(
               NotebookView,
               {
                 sessionId: activeNotebook.session_id,
@@ -1829,7 +1966,7 @@ const LightspeedChat = ({
                 onUploadsInProgressChange: setNotebookUploadsInProgress
               }
             ),
-            showNotebooksPanel && !notebooksPermissionLoading && hasNotebooksAccess && !activeNotebook && /* @__PURE__ */ jsx(
+            showNotebooksPanel && canShowNotebooks && !activeNotebook && /* @__PURE__ */ jsx(
               "div",
               {
                 style: {
@@ -1864,29 +2001,20 @@ const LightspeedChat = ({
                   }
                 )
               }
-            ),
-            showNotebooksPanel && !notebooksPermissionLoading && !hasNotebooksAccess && /* @__PURE__ */ jsx(
-              PermissionRequiredState,
-              {
-                subject: t("permission.subject.notebooks"),
-                permissions: [iaNotebooksPermissionName],
-                action: /* @__PURE__ */ jsx(
-                  Button$1,
-                  {
-                    variant: "outlined",
-                    color: "primary",
-                    style: { borderRadius: "20px" },
-                    onClick: () => {
-                      setActiveTab(0);
-                      setShellViewTab(0);
-                    },
-                    children: t("permission.notebooks.goBack")
-                  }
-                )
-              }
             )
           ] })
-        ]
+        ] })
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      DeleteSavedPromptModal,
+      {
+        isOpen: isSavedPromptDeleteModalOpen,
+        promptName: promptToDelete?.name,
+        isDeleting: isSavedPromptDeleting,
+        error: savedPromptDeleteError,
+        onClose: closeSavedPromptDeleteModal,
+        onConfirm: confirmSavedPromptDelete
       }
     ),
     /* @__PURE__ */ jsx(Attachment, {})