@red-hat-developer-hub/backstage-plugin-intelligent-assistant 5.1.0 → 5.3.0

package/dist/components/LightSpeedChat.esm.js

@@ -8,7 +8,7 @@ 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';
@@ -29,6 +29,13 @@ 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 { useScreenContextSettings } from '../hooks/useScreenContextSettings.esm.js';
+import { buildScreenContextAttachments } from '../utils/screen-context-utils.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';
@@ -38,16 +45,16 @@ import { useNotebookDocuments } from '../hooks/notebooks/useNotebookDocuments.es
 import { useLightspeedDrawerContext } from '../hooks/useLightspeedDrawerContext.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 { isSavedPromptConversationId, SAVED_PROMPT_CONVERSATION_ID_PREFIX } from '../utils/buildConversationHistoryGroups.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,6 +63,9 @@ import { useNotebookStreamStore } from './notebooks/NotebookStreamProvider.esm.j
 import { NotebookView } from './notebooks/NotebookView.esm.js';
 import { SidebarCollapseIcon, SidebarExpandIcon } from './notebooks/SidebarCollapseIcon.esm.js';
 import { RenameConversationModal } from './RenameConversationModal.esm.js';
+import { SavedPromptMenuItems } from './SavedPromptMenuItems.esm.js';
+import { ScreenContextChip } from './ScreenContextChip.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`;
@@ -81,6 +91,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
   },
@@ -211,6 +239,14 @@ const StyledMessageBar = styled(MessageBar)(({ theme }) => ({
     display: "none"
   }
 }));
+const MessageBarActionsRow = styled("div")({
+  display: "flex",
+  flex: "1 1 0",
+  minWidth: 0,
+  overflow: "hidden",
+  alignItems: "center",
+  gap: 8
+});
 const StyledSelectList = styled(SelectList)({
   padding: 0,
   margin: 0
@@ -233,6 +269,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", {
@@ -383,6 +432,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"
@@ -415,6 +473,9 @@ const LightspeedChat = ({
   const domExtractionMaxChars = configApi.getOptionalNumber(
     "intelligent-assistant.screen-context.dom-extraction.maxChars"
   ) ?? 8e3;
+  const screenshotsEnabled = configApi.getOptionalBoolean(
+    "intelligent-assistant.screen-context.screenshots.enabled"
+  ) ?? true;
   const notebooksRouteMatch = useMatch(`${LIGHTSPEED_PATH}/notebooks`);
   const notebookViewRouteMatch = useMatch(
     `${LIGHTSPEED_PATH}/notebooks/:notebookId`
@@ -434,9 +495,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();
@@ -515,7 +590,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);
@@ -736,12 +810,17 @@ const LightspeedChat = ({
     if (computedBg) {
       setChatHeaderBgColor(computedBg);
     }
-  }, [displayMode, isMcpSettingsOpen]);
+  }, [displayMode, isSettingsOpen]);
   useEffect(() => {
-    if (!mcpToolsPermissionResolved && isMcpSettingsOpen) {
-      setIsMcpSettingsOpen(false);
+    if (!mcpToolsPermissionResolved && isSettingsOpen && activeSettingsTab === "mcp-servers") {
+      setSettingsTab("saved-prompts");
     }
-  }, [mcpToolsPermissionResolved, isMcpSettingsOpen]);
+  }, [
+    mcpToolsPermissionResolved,
+    isSettingsOpen,
+    activeSettingsTab,
+    setSettingsTab
+  ]);
   const {
     isPinningChatsEnabled,
     pinnedChats,
@@ -749,6 +828,23 @@ const LightspeedChat = ({
     pinChat,
     unpinChat
   } = usePinnedChatsSettings(user);
+  const { isSavedPromptsEnabled, handleSavedPromptsToggle } = useSavedPromptsSettings(user);
+  const {
+    isScreenContextSharingEnabled,
+    isScreenContextPaused,
+    handleScreenContextSharingToggle,
+    toggleScreenContextPaused
+  } = useScreenContextSettings(user);
+  const selectedModelSupportsVision = useMemo(
+    () => models.find((m) => m.value === selectedModel)?.supportsVision ?? false,
+    [models, selectedModel]
+  );
+  let screenContextChipState = "recording";
+  if (isFullscreenMode) {
+    screenContextChipState = "unavailable";
+  } else if (isScreenContextPaused) {
+    screenContextChipState = "paused";
+  }
   const { selectedSort, handleSortChange } = useSortSettings(user);
   const {
     uploadError,
@@ -803,7 +899,18 @@ const LightspeedChat = ({
     isLoading,
     isRefetching
   } = useConversations(chatPermissionResolved);
-  const samplePrompts = useWelcomePrompts(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;
@@ -926,31 +1033,54 @@ const LightspeedChat = ({
         prompt: message.toString()
       })
     );
-    const allAttachments = getAttachments(fileContents);
-    if (screenContextEnabled && domExtractionEnabled) {
+    const messageText = message.toString();
+    setIsSendButtonDisabled(true);
+    void (async () => {
+      const allAttachments = getAttachments(fileContents);
       try {
-        const domContext = extractPageContext({
-          maxChars: domExtractionMaxChars
+        const screenAttachments = await buildScreenContextAttachments({
+          adminEnabled: screenContextEnabled,
+          sharingEnabled: isScreenContextSharingEnabled,
+          paused: isScreenContextPaused,
+          isFullscreen: isFullscreenMode,
+          domEnabled: domExtractionEnabled,
+          screenshotsEnabled,
+          supportsVision: selectedModelSupportsVision,
+          domExtractionMaxChars
         });
-        if (domContext) {
-          allAttachments.push({
-            attachment_type: "configuration",
-            content_type: "text/plain",
-            content: domContext
-          });
-        }
+        allAttachments.push(...screenAttachments);
       } catch {
       }
-    }
-    handleInputPrompt(message.toString(), allAttachments);
-    setIsSendButtonDisabled(true);
-    setFileContents([]);
-    setDraftMessage("");
+      handleInputPrompt(messageText, allAttachments);
+      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([]);
@@ -974,7 +1104,8 @@ const LightspeedChat = ({
     setUploadError,
     setDraftMessage,
     setCurrentConversationId,
-    isFullscreenMode
+    isFullscreenMode,
+    closeSettings
   ]);
   const openDeleteModal = (conversation_id) => {
     setTargetConversationId(conversation_id);
@@ -1064,76 +1195,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);
@@ -1157,7 +1259,9 @@ const LightspeedChat = ({
       setDraftMessage,
       scrollToBottomRef,
       setCurrentConversationId,
-      setIsMcpSettingsOpen,
+      closeSettings,
+      savedPrompts,
+      handleApplySavedPrompt,
       isFullscreenMode
     ]
   );
@@ -1165,8 +1269,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;
@@ -1307,7 +1412,7 @@ const LightspeedChat = ({
   }, [
     conversationId,
     displayMode,
-    isMcpSettingsOpen,
+    isSettingsOpen,
     messages.length,
     welcomePrompts.length
   ]);
@@ -1324,20 +1429,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);
   }, []);
@@ -1501,16 +1592,28 @@ const LightspeedChat = ({
               tooltipContent: t("tooltip.send")
             }
           },
-          additionalActions: /* @__PURE__ */ jsx(
-            MessageBarModelSelector,
-            {
-              selectedModel,
-              models,
-              onSelect: handleSelectedModel,
-              disabled: isSendButtonDisabled || messages.length > 0,
-              disabledTooltip: t("modelSelector.disabledTooltip")
-            }
-          ),
+          additionalActions: /* @__PURE__ */ jsxs(MessageBarActionsRow, { children: [
+            /* @__PURE__ */ jsx(
+              MessageBarModelSelector,
+              {
+                selectedModel,
+                models,
+                onSelect: handleSelectedModel,
+                disabled: isSendButtonDisabled || messages.length > 0,
+                disabledTooltip: t("modelSelector.disabledTooltip")
+              }
+            ),
+            screenContextEnabled && isScreenContextSharingEnabled && showChatPanel && /* @__PURE__ */ jsx(
+              ScreenContextChip,
+              {
+                state: screenContextChipState,
+                domEnabled: domExtractionEnabled,
+                screenshotsEnabled,
+                supportsVision: selectedModelSupportsVision,
+                onTogglePaused: toggleScreenContextPaused
+              }
+            )
+          ] }),
           forceMultilineLayout: true,
           allowedFileTypes: supportedFileTypes,
           onAttachRejected,
@@ -1521,21 +1624,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 || !mcpToolsPermissionResolved) {
+    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(
@@ -1543,9 +1660,9 @@ const LightspeedChat = ({
       {
         fields: [
           {
-            id: "mcp-servers-settings",
+            id: "settings-panel",
             label: "",
-            field: mcpSettingsPanel
+            field: settingsPanel
           }
         ]
       }
@@ -1554,7 +1671,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 };
@@ -1596,14 +1713,15 @@ const LightspeedChat = ({
         isCompact: !isFullscreenMode
       }
     ),
-    /* @__PURE__ */ jsxs(
+    /* @__PURE__ */ jsx(
       StyledChatbot,
       {
         displayMode: ChatbotDisplayMode.embedded,
         isCompact: !isFullscreenMode,
         compactDrawerOpen: !isFullscreenMode && isChatHistoryDrawerOpen,
-        mcpDrawerFix: isMcpSettingsOpen && !isChatHistoryDrawerOpen,
-        children: [
+        mcpDrawerFix: isSettingsOpen && !isChatHistoryDrawerOpen,
+        "data-screen-capture-exclude": true,
+        children: showCompactSettings ? settingsPanel : /* @__PURE__ */ jsxs(Fragment, { children: [
           /* @__PURE__ */ jsxs(StyledChatbotHeader, { children: [
             /* @__PURE__ */ jsxs(ChatbotHeaderMain, { children: [
               showChatPanel && !isFullscreenMode && /* @__PURE__ */ jsxs(HeaderActions, { children: [
@@ -1690,17 +1808,26 @@ const LightspeedChat = ({
                 handleSelectedModel,
                 models,
                 isPinningChatsEnabled,
+                isSavedPromptsEnabled,
+                onSavedPromptsToggle: handleSavedPromptsToggle,
                 hideModelSelector: true,
                 showChatTabOptions: !showNotebooksPanel,
                 showMcpSettings: mcpToolsPermissionResolved,
                 setDisplayMode: setDisplayModeFromHeader,
                 displayMode,
                 onPinnedChatsToggle: handlePinningChatsToggle,
-                onMcpSettingsClick: () => setIsMcpSettingsOpen(true)
+                screenContextAdminEnabled: screenContextEnabled,
+                isScreenContextSharingEnabled,
+                onScreenContextSharingToggle: handleScreenContextSharingToggle,
+                onMcpSettingsClick: () => {
+                  openSettings(
+                    mcpToolsPermissionResolved ? "mcp-servers" : "saved-prompts"
+                  );
+                }
               }
             )
           ] }),
-          /* @__PURE__ */ jsx(HeaderDivider, { "data-testid": "lightspeed-header-divider" }),
+          (isFullscreenMode || shouldShowTabs) && /* @__PURE__ */ jsx(HeaderDivider, { "data-testid": "lightspeed-header-divider" }),
           shouldShowTabs && /* @__PURE__ */ jsxs(
             Tabs,
             {
@@ -1817,7 +1944,7 @@ const LightspeedChat = ({
                     setIsDrawerOpen: setIsChatHistoryDrawerOpen,
                     activeItemId: viewConversationId,
                     onSelectActiveItem,
-                    conversations: filteredConversations,
+                    conversations: conversationGroups,
                     onNewChat,
                     newChatButtonText: t("button.newChat"),
                     newChatButtonProps: {
@@ -1829,7 +1956,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,
                       {
@@ -1919,7 +2050,18 @@ const LightspeedChat = ({
               }
             )
           ] })
-        ]
+        ] })
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      DeleteSavedPromptModal,
+      {
+        isOpen: isSavedPromptDeleteModalOpen,
+        promptName: promptToDelete?.name,
+        isDeleting: isSavedPromptDeleting,
+        error: savedPromptDeleteError,
+        onClose: closeSavedPromptDeleteModal,
+        onConfirm: confirmSavedPromptDelete
       }
     ),
     /* @__PURE__ */ jsx(Attachment, {})