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

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # @red-hat-developer-hub/backstage-plugin-intelligent-assistant
 
+## 5.3.1
+
+### Patch Changes
+
+- 9dc3351: Split Module Federation entry points and lazy-load chat UI so NFS, FAB, and translations remotes ship minimal synchronous bundles.
+  - @red-hat-developer-hub/backstage-plugin-intelligent-assistant-common@5.3.1
+
+## 5.3.0
+
+### Minor Changes
+
+- 0f9a3e8: Add screen context UX: kebab opt-in, context chip (recording/paused/unavailable), and gated DOM and screenshot attachments on send per RHIDP-14319.
+
+### Patch Changes
+
+- 2bebbeb: Updated dependency `prettier` to `3.9.8`.
+- 22ab37c: Updated dependency `prettier` to `3.9.7`.
+- Updated dependencies [2bebbeb]
+- Updated dependencies [22ab37c]
+  - @red-hat-developer-hub/backstage-plugin-intelligent-assistant-common@5.3.0
+
 ## 5.2.0
 
 ### Minor Changes

package/README.md

@@ -161,7 +161,18 @@ Intelligent assistant supports multiple **display modes** from Settings (for exa
 
 ### Screen Context
 
-When enabled, the assistant automatically captures structured page context from the current RHDH viewport and attaches it to each message. This provides the LLM with headings, tables, alerts, form fields, filters, and other on-screen content for more accurate, context-aware responses.
+Screen context attaches structured page content from the current RHDH viewport to chat messages (headings, tables, alerts, form fields, filters, and optional screenshots) so the LLM can give more accurate, context-aware responses.
+
+Enablement has two levels:
+
+1. **Administrator** — set `screen-context.enabled: true` in `app-config.yaml` (default: `false`).
+2. **User** — opt in from the chatbot options (kebab) menu with **Enable screen context**. Sharing is off until the user opts in.
+
+When sharing is on, a **context chip** in the message bar shows the current page label and state:
+
+- **Recording** — context will be attached on send; click the chip to pause.
+- **Paused** — context is not attached; click to resume.
+- **Unavailable** — fullscreen mode; switch to Overlay or Docked to use screen context.
 
 Configure in `app-config.yaml`:
 
@@ -176,7 +187,8 @@ intelligent-assistant:
       maxChars: 8000 # Max characters extracted per page (default: 8000)
 ```
 
-- `screen-context.enabled` — enables the full screen-context feature (DOM extraction and optional screenshots).
+- `screen-context.enabled` — enables the full screen-context feature (DOM extraction and optional screenshots). Users must still opt in via the kebab menu.
+- `screen-context.screenshots.enabled` — toggles screenshot capture. Screenshots are only attached when the selected model supports vision (`supportsVision`).
 - `screen-context.dom-extraction.enabled` — toggles DOM text extraction independently of screenshots.
 - `screen-context.dom-extraction.maxChars` — caps the extracted text size to control LLM token usage.
 

package/dist/alpha.d.ts

@@ -144,6 +144,9 @@ declare const intelligentAssistantTranslationRef: _backstage_frontend_plugin_api
     readonly 'chatbox.fileUpload.failed': string;
     readonly 'chatbox.fileUpload.infoText': string;
     readonly 'modelSelector.disabledTooltip': string;
+    readonly 'modelSelector.visionScreenshot.line1': string;
+    readonly 'modelSelector.visionScreenshot.line2': string;
+    readonly 'modelSelector.visionScreenshot.ariaLabel': string;
     readonly 'aria.chatbotSelector': string;
     readonly 'aria.important': string;
     readonly 'aria.chatHistoryMenu': string;
@@ -223,6 +226,27 @@ declare const intelligentAssistantTranslationRef: _backstage_frontend_plugin_api
     readonly 'settings.savedPrompts.disable': string;
     readonly 'settings.savedPrompts.enabled.description': string;
     readonly 'settings.savedPrompts.disabled.description': string;
+    readonly 'settings.screenContext.enable': string;
+    readonly 'settings.screenContext.disable': string;
+    readonly 'settings.screenContext.enabled.description': string;
+    readonly 'settings.screenContext.disabled.description': string;
+    readonly 'contextChip.label.paused': string;
+    readonly 'contextChip.label.unavailable': string;
+    readonly 'contextChip.label.softwareTemplates': string;
+    readonly 'contextChip.tooltip.askAbout': string;
+    readonly 'contextChip.tooltip.template': string;
+    readonly 'contextChip.tooltip.search': string;
+    readonly 'contextChip.tooltip.paused': string;
+    readonly 'contextChip.tooltip.unavailable': string;
+    readonly 'contextChip.tooltip.line2.fullContext': string;
+    readonly 'contextChip.tooltip.line2.adminLimited': string;
+    readonly 'contextChip.tooltip.line2.screenshotOnly': string;
+    readonly 'contextChip.tooltip.line2.domOffNoVision': string;
+    readonly 'contextChip.tooltip.line2.textOnlyNoVision': string;
+    readonly 'contextChip.tooltip.line2.textOnlyAdminScreenshotsOff': string;
+    readonly 'contextChip.tooltip.line2.textOnlyCombined': string;
+    readonly 'contextChip.aria.pause': string;
+    readonly 'contextChip.aria.resume': string;
     readonly 'settings.panel.title': string;
     readonly 'settings.mcp.label': string;
     readonly 'settings.prompt.label': string;

package/dist/components/AttachmentContext.esm.js

@@ -1,5 +1,5 @@
 import { jsx } from 'react/jsx-runtime';
-import { createContext, useState, useEffect, useContext } from 'react';
+import { useState, useEffect, createContext, useContext } from 'react';
 import { useLightspeedDrawerContext } from '../hooks/useLightspeedDrawerContext.esm.js';
 import { useTranslation } from '../hooks/useTranslation.esm.js';
 import { isSupportedFileType, readFileAsText } from '../utils/attachment-utils.esm.js';

package/dist/components/ChatLoadingFallback.esm.js

@@ -0,0 +1,37 @@
+import { jsx } from 'react/jsx-runtime';
+import Box from '@mui/material/Box';
+import LinearProgress from '@mui/material/LinearProgress';
+import { LIGHTSPEED_OVERLAY_MAX_WIDTH, LIGHTSPEED_OVERLAY_RIGHT, LIGHTSPEED_OVERLAY_BOTTOM } from '../const.esm.js';
+
+const ChatLoadingFallback = ({ variant = "default" }) => {
+  const isOverlay = variant === "overlay";
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      role: "status",
+      "aria-busy": "true",
+      "aria-label": "Loading chat",
+      "data-testid": "chat-loading-fallback",
+      sx: isOverlay ? {
+        position: "fixed",
+        zIndex: 300,
+        bottom: LIGHTSPEED_OVERLAY_BOTTOM,
+        right: LIGHTSPEED_OVERLAY_RIGHT,
+        width: LIGHTSPEED_OVERLAY_MAX_WIDTH,
+        maxWidth: "100vw",
+        p: 1.5,
+        borderRadius: 1,
+        bgcolor: "background.paper",
+        boxShadow: 3
+      } : {
+        width: "100%",
+        p: 2,
+        boxSizing: "border-box"
+      },
+      children: /* @__PURE__ */ jsx(LinearProgress, {})
+    }
+  );
+};
+
+export { ChatLoadingFallback };
+//# sourceMappingURL=ChatLoadingFallback.esm.js.map

package/dist/components/ChatLoadingFallback.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChatLoadingFallback.esm.js","sources":["../../src/components/ChatLoadingFallback.tsx"],"sourcesContent":["/*\n * Copyright Red Hat, Inc.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport Box from '@mui/material/Box';\nimport LinearProgress from '@mui/material/LinearProgress';\n\nimport {\n  LIGHTSPEED_OVERLAY_BOTTOM,\n  LIGHTSPEED_OVERLAY_MAX_WIDTH,\n  LIGHTSPEED_OVERLAY_RIGHT,\n} from '../const';\n\ntype Props = {\n  variant?: 'default' | 'overlay';\n};\n\n/** Immediate loading feedback while chat chunks / PF CSS load (MUI, no PF). */\nexport const ChatLoadingFallback = ({ variant = 'default' }: Props) => {\n  const isOverlay = variant === 'overlay';\n\n  return (\n    <Box\n      role=\"status\"\n      aria-busy=\"true\"\n      aria-label=\"Loading chat\"\n      data-testid=\"chat-loading-fallback\"\n      sx={\n        isOverlay\n          ? {\n              position: 'fixed',\n              zIndex: 300,\n              bottom: LIGHTSPEED_OVERLAY_BOTTOM,\n              right: LIGHTSPEED_OVERLAY_RIGHT,\n              width: LIGHTSPEED_OVERLAY_MAX_WIDTH,\n              maxWidth: '100vw',\n              p: 1.5,\n              borderRadius: 1,\n              bgcolor: 'background.paper',\n              boxShadow: 3,\n            }\n          : {\n              width: '100%',\n              p: 2,\n              boxSizing: 'border-box',\n            }\n      }\n    >\n      <LinearProgress />\n    </Box>\n  );\n};\n"],"names":[],"mappings":";;;;;AA8BO,MAAM,mBAAA,GAAsB,CAAC,EAAE,OAAA,GAAU,WAAU,KAAa;AACrE,EAAA,MAAM,YAAY,OAAA,KAAY,SAAA;AAE9B,EAAA,uBACE,GAAA;AAAA,IAAC,GAAA;AAAA,IAAA;AAAA,MACC,IAAA,EAAK,QAAA;AAAA,MACL,WAAA,EAAU,MAAA;AAAA,MACV,YAAA,EAAW,cAAA;AAAA,MACX,aAAA,EAAY,uBAAA;AAAA,MACZ,IACE,SAAA,GACI;AAAA,QACE,QAAA,EAAU,OAAA;AAAA,QACV,MAAA,EAAQ,GAAA;AAAA,QACR,MAAA,EAAQ,yBAAA;AAAA,QACR,KAAA,EAAO,wBAAA;AAAA,QACP,KAAA,EAAO,4BAAA;AAAA,QACP,QAAA,EAAU,OAAA;AAAA,QACV,CAAA,EAAG,GAAA;AAAA,QACH,YAAA,EAAc,CAAA;AAAA,QACd,OAAA,EAAS,kBAAA;AAAA,QACT,SAAA,EAAW;AAAA,OACb,GACA;AAAA,QACE,KAAA,EAAO,MAAA;AAAA,QACP,CAAA,EAAG,CAAA;AAAA,QACH,SAAA,EAAW;AAAA,OACb;AAAA,MAGN,8BAAC,cAAA,EAAA,EAAe;AAAA;AAAA,GAClB;AAEJ;;;;"}

package/dist/components/CollapsedHistoryStrip.esm.js

@@ -1,6 +1,6 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { styled } from '@mui/material/styles';
-import { Button, Tooltip } from '@patternfly/react-core';
+import { Tooltip, Button } from '@patternfly/react-core';
 import { PenIcon } from '@patternfly/react-icons';
 import { useTranslation } from '../hooks/useTranslation.esm.js';
 import { SidebarExpandIcon } from './notebooks/SidebarCollapseIcon.esm.js';

package/dist/components/LightSpeedChat.esm.js

@@ -5,9 +5,9 @@ import { useApi, configApiRef } from '@backstage/core-plugin-api';
 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 { ChatbotDisplayMode, ChatbotHeaderMain, ChatbotAlert, ChatbotContent, ChatbotFooter, MessageBar, Chatbot, ChatbotHeader, ChatbotHeaderTitle, FileDropZone, Settings } 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 { DropdownItem, Tooltip, MenuToggle, Select, SelectOption, Button, Title, Label, SelectList } 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';
@@ -29,6 +29,8 @@ 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';
@@ -44,7 +46,6 @@ import { useLightspeedDrawerContext } from '../hooks/useLightspeedDrawerContext.
 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';
@@ -63,6 +64,7 @@ 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';
 
@@ -237,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
@@ -463,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`
@@ -816,6 +829,22 @@ const LightspeedChat = ({
     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,
@@ -1004,26 +1033,28 @@ 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) => {
@@ -1561,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,
@@ -1677,6 +1720,7 @@ const LightspeedChat = ({
         isCompact: !isFullscreenMode,
         compactDrawerOpen: !isFullscreenMode && isChatHistoryDrawerOpen,
         mcpDrawerFix: isSettingsOpen && !isChatHistoryDrawerOpen,
+        "data-screen-capture-exclude": true,
         children: showCompactSettings ? settingsPanel : /* @__PURE__ */ jsxs(Fragment, { children: [
           /* @__PURE__ */ jsxs(StyledChatbotHeader, { children: [
             /* @__PURE__ */ jsxs(ChatbotHeaderMain, { children: [
@@ -1772,6 +1816,9 @@ const LightspeedChat = ({
                 setDisplayMode: setDisplayModeFromHeader,
                 displayMode,
                 onPinnedChatsToggle: handlePinningChatsToggle,
+                screenContextAdminEnabled: screenContextEnabled,
+                isScreenContextSharingEnabled,
+                onScreenContextSharingToggle: handleScreenContextSharingToggle,
                 onMcpSettingsClick: () => {
                   openSettings(
                     mcpToolsPermissionResolved ? "mcp-servers" : "saved-prompts"