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

package/dist/components/SavedPromptsSettings.esm.js

@@ -0,0 +1,285 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { useState, useCallback } from 'react';
+import Typography from '@mui/material/Typography';
+import { Button, Alert, AlertActionLink, Tooltip, FormGroup, TextInput, FormHelperText, HelperText, HelperTextItem, TextArea } from '@patternfly/react-core';
+import { ExclamationCircleIcon } from '@patternfly/react-icons';
+import { makeStyles } from 'tss-react/mui';
+import { useSavedPromptActions } from '../hooks/useSavedPromptActions.esm.js';
+import { useSavedPrompts } from '../hooks/useSavedPrompts.esm.js';
+import { useTranslation } from '../hooks/useTranslation.esm.js';
+import { DeleteSavedPromptModal } from './DeleteSavedPromptModal.esm.js';
+import { SavedPromptsEmptyState } from './SavedPromptsEmptyState.esm.js';
+import { SavedPromptsList } from './SavedPromptsList.esm.js';
+
+const hasInjectedSavedPromptsData = (props) => props.savedPrompts !== void 0 && props.savedPromptsConfig !== void 0 && props.onCreateSavedPrompt !== void 0 && props.onRequestDelete !== void 0;
+const useStyles = makeStyles()(() => ({
+  root: {
+    display: "flex",
+    flexDirection: "column",
+    height: "100%",
+    padding: "16px 24px"
+  },
+  form: {
+    display: "flex",
+    flexDirection: "column",
+    gap: "12px",
+    padding: "16px",
+    borderBottom: "1px solid var(--pf-t--global--border--color--default)"
+  },
+  formActions: {
+    display: "flex",
+    gap: "8px"
+  },
+  promptCount: {
+    display: "flex",
+    justifyContent: "space-between",
+    alignItems: "center",
+    borderBottom: "1px solid var(--pf-t--global--border--color--default)",
+    paddingBottom: "12px"
+  }
+}));
+const SavedPromptsSettingsContent = ({
+  isSavedPromptsEnabled,
+  onEnableSavedPrompts,
+  onApplyToInput,
+  onSendDirectly,
+  isChatStreaming = false,
+  savedPrompts,
+  savedPromptsConfig: config,
+  savedPromptsLoading: loading,
+  savedPromptsError: error,
+  onCreateSavedPrompt: createPrompt,
+  onRequestDelete
+}) => {
+  const { classes } = useStyles();
+  const { t } = useTranslation();
+  const [isFormOpen, setIsFormOpen] = useState(false);
+  const [title, setTitle] = useState("");
+  const [content, setContent] = useState("");
+  const [isSaving, setIsSaving] = useState(false);
+  const [saveError, setSaveError] = useState(null);
+  const titleExceedsLimit = title.length > config.max_display_name_length;
+  const contentExceedsLimit = content.length > config.max_content_length;
+  const isFormValid = title.trim().length > 0 && content.trim().length > 0 && !titleExceedsLimit && !contentExceedsLimit;
+  const isLimitReached = savedPrompts.length >= config.max_prompts_per_user;
+  const hasPrompts = savedPrompts.length > 0;
+  const showEmptyState = !loading && !error && !hasPrompts && !isFormOpen;
+  const handleSave = useCallback(async () => {
+    if (!isFormValid) return;
+    setIsSaving(true);
+    setSaveError(null);
+    try {
+      await createPrompt(title.trim(), content.trim());
+      setTitle("");
+      setContent("");
+      setIsFormOpen(false);
+    } catch (e) {
+      setSaveError(e instanceof Error ? e.message : "Failed to save prompt");
+    } finally {
+      setIsSaving(false);
+    }
+  }, [isFormValid, title, content, createPrompt]);
+  const handleCancel = () => {
+    setTitle("");
+    setContent("");
+    setIsFormOpen(false);
+    setSaveError(null);
+  };
+  const newPromptButton = /* @__PURE__ */ jsx(
+    Button,
+    {
+      variant: "secondary",
+      size: "sm",
+      isDisabled: isLimitReached || isFormOpen,
+      onClick: () => setIsFormOpen(true),
+      style: { borderRadius: "999px" },
+      children: t("savedPrompts.newPrompt")
+    }
+  );
+  return /* @__PURE__ */ jsxs("div", { className: classes.root, children: [
+    !isSavedPromptsEnabled && /* @__PURE__ */ jsx(
+      Alert,
+      {
+        variant: "info",
+        isInline: true,
+        title: t("savedPrompts.disabled.title"),
+        actionLinks: /* @__PURE__ */ jsx(AlertActionLink, { onClick: onEnableSavedPrompts, children: t("savedPrompts.disabled.enableLink") }),
+        style: { marginBottom: "12px" },
+        children: t("savedPrompts.disabled.body")
+      }
+    ),
+    (isFormOpen || hasPrompts) && /* @__PURE__ */ jsxs("div", { className: classes.promptCount, children: [
+      /* @__PURE__ */ jsx(
+        Typography,
+        {
+          component: "span",
+          style: { color: "var(--pf-t--global--text--color--subtle)" },
+          children: savedPrompts.length === 0 ? t("savedPrompts.count.zero") : t("savedPrompts.count", {
+            count: savedPrompts.length
+          })
+        }
+      ),
+      isLimitReached ? /* @__PURE__ */ jsx(Tooltip, { content: t("savedPrompts.limitReached"), children: /* @__PURE__ */ jsx(Typography, { component: "span", children: newPromptButton }) }) : newPromptButton
+    ] }),
+    isFormOpen && /* @__PURE__ */ jsxs("div", { className: classes.form, children: [
+      /* @__PURE__ */ jsxs(
+        FormGroup,
+        {
+          label: t("savedPrompts.form.titleLabel"),
+          isRequired: true,
+          fieldId: "saved-prompt-title",
+          children: [
+            /* @__PURE__ */ jsx(
+              TextInput,
+              {
+                id: "saved-prompt-title",
+                value: title,
+                onChange: (_event, value) => setTitle(value),
+                validated: titleExceedsLimit ? "error" : "default",
+                isRequired: true,
+                placeholder: t("savedPrompts.form.titlePlaceholder")
+              }
+            ),
+            titleExceedsLimit && /* @__PURE__ */ jsx(FormHelperText, { children: /* @__PURE__ */ jsx(HelperText, { children: /* @__PURE__ */ jsx(
+              HelperTextItem,
+              {
+                icon: /* @__PURE__ */ jsx(ExclamationCircleIcon, {}),
+                variant: "error",
+                children: t("savedPrompts.validation.titleMaxLength", {
+                  max: config.max_display_name_length
+                })
+              }
+            ) }) })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxs(
+        FormGroup,
+        {
+          label: t("savedPrompts.form.contentLabel"),
+          isRequired: true,
+          fieldId: "saved-prompt-content",
+          children: [
+            /* @__PURE__ */ jsx(
+              TextArea,
+              {
+                id: "saved-prompt-content",
+                value: content,
+                onChange: (_event, value) => setContent(value),
+                validated: contentExceedsLimit ? "error" : "default",
+                isRequired: true,
+                rows: 4,
+                resizeOrientation: "vertical",
+                placeholder: t("savedPrompts.form.contentPlaceholder")
+              }
+            ),
+            contentExceedsLimit && /* @__PURE__ */ jsx(FormHelperText, { children: /* @__PURE__ */ jsx(HelperText, { children: /* @__PURE__ */ jsx(
+              HelperTextItem,
+              {
+                icon: /* @__PURE__ */ jsx(ExclamationCircleIcon, {}),
+                variant: "error",
+                children: t("savedPrompts.validation.contentMaxLength", {
+                  max: config.max_content_length
+                })
+              }
+            ) }) })
+          ]
+        }
+      ),
+      saveError && /* @__PURE__ */ jsx(Alert, { variant: "danger", isInline: true, isPlain: true, title: saveError }),
+      /* @__PURE__ */ jsxs("div", { className: classes.formActions, children: [
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "primary",
+            size: "sm",
+            isDisabled: !isFormValid || isSaving,
+            isLoading: isSaving,
+            onClick: handleSave,
+            children: t("savedPrompts.form.save")
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "link",
+            size: "sm",
+            onClick: handleCancel,
+            isDisabled: isSaving,
+            children: t("savedPrompts.form.cancel")
+          }
+        )
+      ] })
+    ] }),
+    showEmptyState ? /* @__PURE__ */ jsx(SavedPromptsEmptyState, { onNewPrompt: () => setIsFormOpen(true) }) : /* @__PURE__ */ jsx(
+      SavedPromptsList,
+      {
+        prompts: savedPrompts,
+        loading,
+        error,
+        variant: "settings",
+        onApplyToInput,
+        onSendDirectly,
+        onDelete: onRequestDelete,
+        isSendDirectlyDisabled: isChatStreaming
+      }
+    )
+  ] });
+};
+const SavedPromptsSettingsWithHook = (props) => {
+  const { savedPrompts, config, loading, error, createPrompt, deletePrompt } = useSavedPrompts();
+  const {
+    requestDelete,
+    promptToDelete,
+    closeDeleteModal,
+    confirmDelete,
+    isDeleting,
+    deleteError,
+    isDeleteModalOpen
+  } = useSavedPromptActions({
+    onApplyToInput: props.onApplyToInput,
+    onSendDirectly: props.onSendDirectly,
+    onDelete: deletePrompt
+  });
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      SavedPromptsSettingsContent,
+      {
+        ...props,
+        savedPrompts,
+        savedPromptsConfig: config,
+        savedPromptsLoading: loading,
+        savedPromptsError: error,
+        onCreateSavedPrompt: createPrompt,
+        onRequestDelete: requestDelete
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      DeleteSavedPromptModal,
+      {
+        isOpen: isDeleteModalOpen,
+        promptName: promptToDelete?.name,
+        isDeleting,
+        error: deleteError,
+        onClose: closeDeleteModal,
+        onConfirm: confirmDelete
+      }
+    )
+  ] });
+};
+const SavedPromptsSettings = (props) => {
+  if (hasInjectedSavedPromptsData(props)) {
+    return /* @__PURE__ */ jsx(
+      SavedPromptsSettingsContent,
+      {
+        ...props,
+        savedPromptsLoading: props.savedPromptsLoading ?? false,
+        savedPromptsError: props.savedPromptsError ?? null
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(SavedPromptsSettingsWithHook, { ...props });
+};
+
+export { SavedPromptsSettings };
+//# sourceMappingURL=SavedPromptsSettings.esm.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SavedPromptsSettings.esm.js","sources":["../../src/components/SavedPromptsSettings.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 */\nimport { useCallback, useState } from 'react';\n\nimport Typography from '@mui/material/Typography';\nimport {\n  Alert,\n  AlertActionLink,\n  Button,\n  FormGroup,\n  FormHelperText,\n  HelperText,\n  HelperTextItem,\n  TextArea,\n  TextInput,\n  Tooltip,\n} from '@patternfly/react-core';\nimport { ExclamationCircleIcon } from '@patternfly/react-icons';\nimport { makeStyles } from 'tss-react/mui';\n\nimport {\n  SavedPrompt,\n  SavedPromptsConfig,\n} from '@red-hat-developer-hub/backstage-plugin-intelligent-assistant-common';\n\nimport { useSavedPromptActions } from '../hooks/useSavedPromptActions';\nimport { useSavedPrompts } from '../hooks/useSavedPrompts';\nimport { useTranslation } from '../hooks/useTranslation';\nimport { DeleteSavedPromptModal } from './DeleteSavedPromptModal';\nimport { SavedPromptsEmptyState } from './SavedPromptsEmptyState';\nimport { SavedPromptsList } from './SavedPromptsList';\n\ntype SavedPromptsSettingsProps = {\n  isSavedPromptsEnabled: boolean;\n  onEnableSavedPrompts: () => void;\n  onApplyToInput: (content: string) => void;\n  onSendDirectly: (content: string) => void;\n  isChatStreaming?: boolean;\n  savedPrompts?: SavedPrompt[];\n  savedPromptsConfig?: SavedPromptsConfig;\n  savedPromptsLoading?: boolean;\n  savedPromptsError?: string | null;\n  onCreateSavedPrompt?: (name: string, content: string) => Promise<void>;\n  onRequestDelete?: (prompt: SavedPrompt) => void;\n};\n\ntype SavedPromptsSettingsContentProps = SavedPromptsSettingsProps & {\n  savedPrompts: SavedPrompt[];\n  savedPromptsConfig: SavedPromptsConfig;\n  savedPromptsLoading: boolean;\n  savedPromptsError: string | null;\n  onCreateSavedPrompt: (name: string, content: string) => Promise<void>;\n  onRequestDelete: (prompt: SavedPrompt) => void;\n};\n\nconst hasInjectedSavedPromptsData = (\n  props: SavedPromptsSettingsProps,\n): props is SavedPromptsSettingsContentProps =>\n  props.savedPrompts !== undefined &&\n  props.savedPromptsConfig !== undefined &&\n  props.onCreateSavedPrompt !== undefined &&\n  props.onRequestDelete !== undefined;\n\nconst useStyles = makeStyles()(() => ({\n  root: {\n    display: 'flex',\n    flexDirection: 'column',\n    height: '100%',\n    padding: '16px 24px',\n  },\n  form: {\n    display: 'flex',\n    flexDirection: 'column',\n    gap: '12px',\n    padding: '16px',\n    borderBottom: '1px solid var(--pf-t--global--border--color--default)',\n  },\n  formActions: {\n    display: 'flex',\n    gap: '8px',\n  },\n  promptCount: {\n    display: 'flex',\n    justifyContent: 'space-between',\n    alignItems: 'center',\n    borderBottom: '1px solid var(--pf-t--global--border--color--default)',\n    paddingBottom: '12px',\n  },\n}));\n\nconst SavedPromptsSettingsContent = ({\n  isSavedPromptsEnabled,\n  onEnableSavedPrompts,\n  onApplyToInput,\n  onSendDirectly,\n  isChatStreaming = false,\n  savedPrompts,\n  savedPromptsConfig: config,\n  savedPromptsLoading: loading,\n  savedPromptsError: error,\n  onCreateSavedPrompt: createPrompt,\n  onRequestDelete,\n}: SavedPromptsSettingsContentProps) => {\n  const { classes } = useStyles();\n  const { t } = useTranslation();\n\n  const [isFormOpen, setIsFormOpen] = useState(false);\n  const [title, setTitle] = useState('');\n  const [content, setContent] = useState('');\n  const [isSaving, setIsSaving] = useState(false);\n  const [saveError, setSaveError] = useState<string | null>(null);\n\n  const titleExceedsLimit = title.length > config.max_display_name_length;\n  const contentExceedsLimit = content.length > config.max_content_length;\n  const isFormValid =\n    title.trim().length > 0 &&\n    content.trim().length > 0 &&\n    !titleExceedsLimit &&\n    !contentExceedsLimit;\n  const isLimitReached = savedPrompts.length >= config.max_prompts_per_user;\n  const hasPrompts = savedPrompts.length > 0;\n  const showEmptyState = !loading && !error && !hasPrompts && !isFormOpen;\n\n  const handleSave = useCallback(async () => {\n    if (!isFormValid) return;\n    setIsSaving(true);\n    setSaveError(null);\n    try {\n      await createPrompt(title.trim(), content.trim());\n      setTitle('');\n      setContent('');\n      setIsFormOpen(false);\n    } catch (e) {\n      setSaveError(e instanceof Error ? e.message : 'Failed to save prompt');\n    } finally {\n      setIsSaving(false);\n    }\n  }, [isFormValid, title, content, createPrompt]);\n\n  const handleCancel = () => {\n    setTitle('');\n    setContent('');\n    setIsFormOpen(false);\n    setSaveError(null);\n  };\n\n  const newPromptButton = (\n    <Button\n      variant=\"secondary\"\n      size=\"sm\"\n      isDisabled={isLimitReached || isFormOpen}\n      onClick={() => setIsFormOpen(true)}\n      style={{ borderRadius: '999px' }}\n    >\n      {t('savedPrompts.newPrompt')}\n    </Button>\n  );\n\n  return (\n    <div className={classes.root}>\n      {!isSavedPromptsEnabled && (\n        <Alert\n          variant=\"info\"\n          isInline\n          title={t('savedPrompts.disabled.title')}\n          actionLinks={\n            <AlertActionLink onClick={onEnableSavedPrompts}>\n              {t('savedPrompts.disabled.enableLink')}\n            </AlertActionLink>\n          }\n          style={{ marginBottom: '12px' }}\n        >\n          {t('savedPrompts.disabled.body')}\n        </Alert>\n      )}\n\n      {(isFormOpen || hasPrompts) && (\n        <div className={classes.promptCount}>\n          <Typography\n            component=\"span\"\n            style={{ color: 'var(--pf-t--global--text--color--subtle)' }}\n          >\n            {savedPrompts.length === 0\n              ? t('savedPrompts.count.zero')\n              : (t as Function)('savedPrompts.count', {\n                  count: savedPrompts.length,\n                })}\n          </Typography>\n          {isLimitReached ? (\n            <Tooltip content={t('savedPrompts.limitReached')}>\n              <Typography component=\"span\">{newPromptButton}</Typography>\n            </Tooltip>\n          ) : (\n            newPromptButton\n          )}\n        </div>\n      )}\n\n      {isFormOpen && (\n        <div className={classes.form}>\n          <FormGroup\n            label={t('savedPrompts.form.titleLabel')}\n            isRequired\n            fieldId=\"saved-prompt-title\"\n          >\n            <TextInput\n              id=\"saved-prompt-title\"\n              value={title}\n              onChange={(_event, value) => setTitle(value)}\n              validated={titleExceedsLimit ? 'error' : 'default'}\n              isRequired\n              placeholder={t('savedPrompts.form.titlePlaceholder')}\n            />\n            {titleExceedsLimit && (\n              <FormHelperText>\n                <HelperText>\n                  <HelperTextItem\n                    icon={<ExclamationCircleIcon />}\n                    variant=\"error\"\n                  >\n                    {t('savedPrompts.validation.titleMaxLength', {\n                      max: config.max_display_name_length,\n                    } as any)}\n                  </HelperTextItem>\n                </HelperText>\n              </FormHelperText>\n            )}\n          </FormGroup>\n\n          <FormGroup\n            label={t('savedPrompts.form.contentLabel')}\n            isRequired\n            fieldId=\"saved-prompt-content\"\n          >\n            <TextArea\n              id=\"saved-prompt-content\"\n              value={content}\n              onChange={(_event, value) => setContent(value)}\n              validated={contentExceedsLimit ? 'error' : 'default'}\n              isRequired\n              rows={4}\n              resizeOrientation=\"vertical\"\n              placeholder={t('savedPrompts.form.contentPlaceholder')}\n            />\n            {contentExceedsLimit && (\n              <FormHelperText>\n                <HelperText>\n                  <HelperTextItem\n                    icon={<ExclamationCircleIcon />}\n                    variant=\"error\"\n                  >\n                    {t('savedPrompts.validation.contentMaxLength', {\n                      max: config.max_content_length,\n                    } as any)}\n                  </HelperTextItem>\n                </HelperText>\n              </FormHelperText>\n            )}\n          </FormGroup>\n\n          {saveError && (\n            <Alert variant=\"danger\" isInline isPlain title={saveError} />\n          )}\n\n          <div className={classes.formActions}>\n            <Button\n              variant=\"primary\"\n              size=\"sm\"\n              isDisabled={!isFormValid || isSaving}\n              isLoading={isSaving}\n              onClick={handleSave}\n            >\n              {t('savedPrompts.form.save')}\n            </Button>\n            <Button\n              variant=\"link\"\n              size=\"sm\"\n              onClick={handleCancel}\n              isDisabled={isSaving}\n            >\n              {t('savedPrompts.form.cancel')}\n            </Button>\n          </div>\n        </div>\n      )}\n\n      {showEmptyState ? (\n        <SavedPromptsEmptyState onNewPrompt={() => setIsFormOpen(true)} />\n      ) : (\n        <SavedPromptsList\n          prompts={savedPrompts}\n          loading={loading}\n          error={error}\n          variant=\"settings\"\n          onApplyToInput={onApplyToInput}\n          onSendDirectly={onSendDirectly}\n          onDelete={onRequestDelete}\n          isSendDirectlyDisabled={isChatStreaming}\n        />\n      )}\n    </div>\n  );\n};\n\nconst SavedPromptsSettingsWithHook = (props: SavedPromptsSettingsProps) => {\n  const { savedPrompts, config, loading, error, createPrompt, deletePrompt } =\n    useSavedPrompts();\n\n  const {\n    requestDelete,\n    promptToDelete,\n    closeDeleteModal,\n    confirmDelete,\n    isDeleting,\n    deleteError,\n    isDeleteModalOpen,\n  } = useSavedPromptActions({\n    onApplyToInput: props.onApplyToInput,\n    onSendDirectly: props.onSendDirectly,\n    onDelete: deletePrompt,\n  });\n\n  return (\n    <>\n      <SavedPromptsSettingsContent\n        {...props}\n        savedPrompts={savedPrompts}\n        savedPromptsConfig={config}\n        savedPromptsLoading={loading}\n        savedPromptsError={error}\n        onCreateSavedPrompt={createPrompt}\n        onRequestDelete={requestDelete}\n      />\n      <DeleteSavedPromptModal\n        isOpen={isDeleteModalOpen}\n        promptName={promptToDelete?.name}\n        isDeleting={isDeleting}\n        error={deleteError}\n        onClose={closeDeleteModal}\n        onConfirm={confirmDelete}\n      />\n    </>\n  );\n};\n\nexport const SavedPromptsSettings = (props: SavedPromptsSettingsProps) => {\n  if (hasInjectedSavedPromptsData(props)) {\n    return (\n      <SavedPromptsSettingsContent\n        {...props}\n        savedPromptsLoading={props.savedPromptsLoading ?? false}\n        savedPromptsError={props.savedPromptsError ?? null}\n      />\n    );\n  }\n\n  return <SavedPromptsSettingsWithHook {...props} />;\n};\n"],"names":[],"mappings":"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"}

package/dist/components/ScreenContextChip.esm.js

@@ -0,0 +1,172 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useMemo, Fragment } from 'react';
+import { keyframes, styled } from '@mui/material/styles';
+import { Label, Tooltip } from '@patternfly/react-core';
+import { PauseIcon } from '@patternfly/react-icons';
+import { useScreenContextLabelRevision } from '../hooks/useScreenContextLabelRevision.esm.js';
+import { useTranslation } from '../hooks/useTranslation.esm.js';
+import { useWindowLocation } from '../hooks/useWindowLocation.esm.js';
+import { resolveScreenContextChipLabel, SOFTWARE_TEMPLATES_LIST_CHIP_LABEL, getScreenContextTooltipLine1Text, getScreenContextTooltipLine2Key } from '../utils/screen-context-utils.esm.js';
+
+const CHIP_MAX_WIDTH_PX = 150;
+const CHIP_HEIGHT_PX = 24;
+const pulse = keyframes`
+  0% { opacity: 0.45; transform: scale(0.92); }
+  50% { opacity: 1; transform: scale(1); }
+  100% { opacity: 0.45; transform: scale(0.92); }
+`;
+const ChipWrap = styled("div")({
+  display: "inline-flex",
+  height: CHIP_HEIGHT_PX,
+  maxWidth: CHIP_MAX_WIDTH_PX,
+  minWidth: 0,
+  flexShrink: 0
+});
+const FixedSizeChipLabel = styled(Label)({
+  height: CHIP_HEIGHT_PX,
+  maxWidth: CHIP_MAX_WIDTH_PX,
+  width: "max-content",
+  boxSizing: "border-box",
+  display: "inline-flex",
+  alignItems: "center",
+  flexShrink: 0,
+  "--pf-v6-c-label--PaddingBlockStart": "0",
+  "--pf-v6-c-label--PaddingBlockEnd": "0",
+  "--pf-v6-c-label--MinWidth": "auto",
+  "& .pf-v6-c-label__content": {
+    maxWidth: "100%",
+    height: "100%",
+    minWidth: 0,
+    boxSizing: "border-box"
+  },
+  "& .pf-v6-c-label__text": {
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    whiteSpace: "nowrap",
+    minWidth: 0
+  }
+});
+const RecordingDot = styled("span")({
+  display: "inline-block",
+  width: 8,
+  height: 8,
+  borderRadius: "50%",
+  backgroundColor: "var(--pf-t--global--icon--color--status--danger--default)",
+  animation: `${pulse} 1.4s ease-in-out infinite`
+});
+const ChipText = styled("span")({
+  overflow: "hidden",
+  textOverflow: "ellipsis",
+  whiteSpace: "nowrap",
+  minWidth: 0
+});
+const LINE2_I18N = {
+  fullContext: "contextChip.tooltip.line2.fullContext",
+  adminLimited: "contextChip.tooltip.line2.adminLimited",
+  screenshotOnly: "contextChip.tooltip.line2.screenshotOnly",
+  domOffNoVision: "contextChip.tooltip.line2.domOffNoVision",
+  textOnlyNoVision: "contextChip.tooltip.line2.textOnlyNoVision",
+  textOnlyAdminScreenshotsOff: "contextChip.tooltip.line2.textOnlyAdminScreenshotsOff",
+  textOnlyCombined: "contextChip.tooltip.line2.textOnlyCombined"
+};
+const ScreenContextChip = ({
+  state,
+  chipLabel,
+  domEnabled,
+  screenshotsEnabled,
+  supportsVision,
+  onTogglePaused
+}) => {
+  const { t } = useTranslation();
+  const { pathname, search } = useWindowLocation();
+  useScreenContextLabelRevision();
+  const { label: resolvedLabel, routeKind } = resolveScreenContextChipLabel({
+    pathname,
+    search
+  });
+  const label = chipLabel ?? resolvedLabel;
+  const displayLabel = label === SOFTWARE_TEMPLATES_LIST_CHIP_LABEL ? t("contextChip.label.softwareTemplates") : label;
+  const tooltipContent = useMemo(() => {
+    if (state === "unavailable") {
+      return t("contextChip.tooltip.unavailable");
+    }
+    if (state === "paused") {
+      return t("contextChip.tooltip.paused");
+    }
+    const line1 = getScreenContextTooltipLine1Text(
+      {
+        chipLabel: displayLabel,
+        routeKind,
+        pathname
+      },
+      (key, options) => t(key, options)
+    );
+    const line2Key = getScreenContextTooltipLine2Key({
+      domEnabled,
+      screenshotsEnabled,
+      supportsVision
+    });
+    const line2 = t(LINE2_I18N[line2Key], {});
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      line1,
+      /* @__PURE__ */ jsx("br", {}),
+      line2
+    ] });
+  }, [
+    state,
+    displayLabel,
+    routeKind,
+    pathname,
+    domEnabled,
+    screenshotsEnabled,
+    supportsVision,
+    t
+  ]);
+  if (state === "unavailable") {
+    return /* @__PURE__ */ jsx(ChipWrap, { className: "lightspeed-page-context-label lightspeed-page-context-label-unavailable", children: /* @__PURE__ */ jsx(Tooltip, { content: tooltipContent, children: /* @__PURE__ */ jsx(
+      FixedSizeChipLabel,
+      {
+        color: "grey",
+        variant: "outline",
+        isCompact: true,
+        className: "lightspeed-context-chip-unavailable-label",
+        children: /* @__PURE__ */ jsx(ChipText, { children: t("contextChip.label.unavailable") })
+      }
+    ) }) });
+  }
+  if (state === "paused") {
+    return /* @__PURE__ */ jsx(ChipWrap, { className: "lightspeed-page-context-label lightspeed-page-context-label-paused", children: /* @__PURE__ */ jsx(Tooltip, { content: tooltipContent, children: /* @__PURE__ */ jsx(
+      FixedSizeChipLabel,
+      {
+        color: "grey",
+        variant: "outline",
+        isCompact: true,
+        isClickable: true,
+        onClick: onTogglePaused,
+        icon: /* @__PURE__ */ jsx(PauseIcon, { "aria-hidden": true }),
+        className: "lightspeed-page-context-chip-clickable lightspeed-context-chip-paused-label",
+        "aria-label": t("contextChip.aria.resume"),
+        children: /* @__PURE__ */ jsx(ChipText, { children: t("contextChip.label.paused") })
+      }
+    ) }) });
+  }
+  return /* @__PURE__ */ jsx(ChipWrap, { className: "lightspeed-page-context-label lightspeed-page-context-label-recording lightspeed-page-context-chip-clickable", children: /* @__PURE__ */ jsx(Tooltip, { content: tooltipContent, children: /* @__PURE__ */ jsx(
+    FixedSizeChipLabel,
+    {
+      color: "red",
+      variant: "outline",
+      isCompact: true,
+      isClickable: true,
+      onClick: onTogglePaused,
+      icon: /* @__PURE__ */ jsx(RecordingDot, { "aria-hidden": true }),
+      className: "lightspeed-context-chip-recording-label",
+      "aria-label": t("contextChip.aria.pause", {
+        label: displayLabel
+      }),
+      children: /* @__PURE__ */ jsx(ChipText, { children: displayLabel })
+    }
+  ) }) });
+};
+
+export { ScreenContextChip };
+//# sourceMappingURL=ScreenContextChip.esm.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ScreenContextChip.esm.js","sources":["../../src/components/ScreenContextChip.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 { Fragment, useMemo } from 'react';\n\nimport { keyframes, styled } from '@mui/material/styles';\nimport { Label, Tooltip } from '@patternfly/react-core';\nimport { PauseIcon } from '@patternfly/react-icons';\n\nimport { useScreenContextLabelRevision } from '../hooks/useScreenContextLabelRevision';\nimport { useTranslation } from '../hooks/useTranslation';\nimport { useWindowLocation } from '../hooks/useWindowLocation';\nimport {\n  getScreenContextTooltipLine1Text,\n  getScreenContextTooltipLine2Key,\n  resolveScreenContextChipLabel,\n  ScreenContextTooltipLine2Key,\n  SOFTWARE_TEMPLATES_LIST_CHIP_LABEL,\n} from '../utils/screen-context-utils';\n\nexport type ScreenContextChipState = 'recording' | 'paused' | 'unavailable';\n\n/** Prototype max width; shorter labels shrink to content. */\nconst CHIP_MAX_WIDTH_PX = 150;\nconst CHIP_HEIGHT_PX = 24;\n\nconst pulse = keyframes`\n  0% { opacity: 0.45; transform: scale(0.92); }\n  50% { opacity: 1; transform: scale(1); }\n  100% { opacity: 0.45; transform: scale(0.92); }\n`;\n\nconst ChipWrap = styled('div')({\n  display: 'inline-flex',\n  height: CHIP_HEIGHT_PX,\n  maxWidth: CHIP_MAX_WIDTH_PX,\n  minWidth: 0,\n  flexShrink: 0,\n});\n\nconst FixedSizeChipLabel = styled(Label)({\n  height: CHIP_HEIGHT_PX,\n  maxWidth: CHIP_MAX_WIDTH_PX,\n  width: 'max-content',\n  boxSizing: 'border-box',\n  display: 'inline-flex',\n  alignItems: 'center',\n  flexShrink: 0,\n  '--pf-v6-c-label--PaddingBlockStart': '0',\n  '--pf-v6-c-label--PaddingBlockEnd': '0',\n  '--pf-v6-c-label--MinWidth': 'auto',\n  '& .pf-v6-c-label__content': {\n    maxWidth: '100%',\n    height: '100%',\n    minWidth: 0,\n    boxSizing: 'border-box',\n  },\n  '& .pf-v6-c-label__text': {\n    overflow: 'hidden',\n    textOverflow: 'ellipsis',\n    whiteSpace: 'nowrap',\n    minWidth: 0,\n  },\n});\n\nconst RecordingDot = styled('span')({\n  display: 'inline-block',\n  width: 8,\n  height: 8,\n  borderRadius: '50%',\n  backgroundColor: 'var(--pf-t--global--icon--color--status--danger--default)',\n  animation: `${pulse} 1.4s ease-in-out infinite`,\n});\n\nconst ChipText = styled('span')({\n  overflow: 'hidden',\n  textOverflow: 'ellipsis',\n  whiteSpace: 'nowrap',\n  minWidth: 0,\n});\n\nconst LINE2_I18N: Record<ScreenContextTooltipLine2Key, string> = {\n  fullContext: 'contextChip.tooltip.line2.fullContext',\n  adminLimited: 'contextChip.tooltip.line2.adminLimited',\n  screenshotOnly: 'contextChip.tooltip.line2.screenshotOnly',\n  domOffNoVision: 'contextChip.tooltip.line2.domOffNoVision',\n  textOnlyNoVision: 'contextChip.tooltip.line2.textOnlyNoVision',\n  textOnlyAdminScreenshotsOff:\n    'contextChip.tooltip.line2.textOnlyAdminScreenshotsOff',\n  textOnlyCombined: 'contextChip.tooltip.line2.textOnlyCombined',\n};\n\nexport type ScreenContextChipProps = {\n  state: ScreenContextChipState;\n  chipLabel?: string;\n  domEnabled: boolean;\n  screenshotsEnabled: boolean;\n  supportsVision: boolean;\n  onTogglePaused?: () => void;\n};\n\nexport const ScreenContextChip = ({\n  state,\n  chipLabel,\n  domEnabled,\n  screenshotsEnabled,\n  supportsVision,\n  onTogglePaused,\n}: ScreenContextChipProps) => {\n  const { t } = useTranslation();\n  const { pathname, search } = useWindowLocation();\n  useScreenContextLabelRevision();\n\n  const { label: resolvedLabel, routeKind } = resolveScreenContextChipLabel({\n    pathname,\n    search,\n  });\n\n  const label = chipLabel ?? resolvedLabel;\n  const displayLabel =\n    label === SOFTWARE_TEMPLATES_LIST_CHIP_LABEL\n      ? t('contextChip.label.softwareTemplates')\n      : label;\n\n  const tooltipContent = useMemo(() => {\n    if (state === 'unavailable') {\n      return t('contextChip.tooltip.unavailable');\n    }\n    if (state === 'paused') {\n      return t('contextChip.tooltip.paused');\n    }\n\n    const line1 = getScreenContextTooltipLine1Text(\n      {\n        chipLabel: displayLabel,\n        routeKind,\n        pathname,\n      },\n      (key, options) => t(key as any, options as any),\n    );\n    const line2Key = getScreenContextTooltipLine2Key({\n      domEnabled,\n      screenshotsEnabled,\n      supportsVision,\n    });\n    const line2 = t(LINE2_I18N[line2Key] as any, {} as any);\n    return (\n      <Fragment>\n        {line1}\n        <br />\n        {line2}\n      </Fragment>\n    );\n  }, [\n    state,\n    displayLabel,\n    routeKind,\n    pathname,\n    domEnabled,\n    screenshotsEnabled,\n    supportsVision,\n    t,\n  ]);\n\n  if (state === 'unavailable') {\n    return (\n      <ChipWrap className=\"lightspeed-page-context-label lightspeed-page-context-label-unavailable\">\n        <Tooltip content={tooltipContent}>\n          <FixedSizeChipLabel\n            color=\"grey\"\n            variant=\"outline\"\n            isCompact\n            className=\"lightspeed-context-chip-unavailable-label\"\n          >\n            <ChipText>{t('contextChip.label.unavailable')}</ChipText>\n          </FixedSizeChipLabel>\n        </Tooltip>\n      </ChipWrap>\n    );\n  }\n\n  if (state === 'paused') {\n    return (\n      <ChipWrap className=\"lightspeed-page-context-label lightspeed-page-context-label-paused\">\n        <Tooltip content={tooltipContent}>\n          <FixedSizeChipLabel\n            color=\"grey\"\n            variant=\"outline\"\n            isCompact\n            isClickable\n            onClick={onTogglePaused}\n            icon={<PauseIcon aria-hidden />}\n            className=\"lightspeed-page-context-chip-clickable lightspeed-context-chip-paused-label\"\n            aria-label={t('contextChip.aria.resume')}\n          >\n            <ChipText>{t('contextChip.label.paused')}</ChipText>\n          </FixedSizeChipLabel>\n        </Tooltip>\n      </ChipWrap>\n    );\n  }\n\n  return (\n    <ChipWrap className=\"lightspeed-page-context-label lightspeed-page-context-label-recording lightspeed-page-context-chip-clickable\">\n      <Tooltip content={tooltipContent}>\n        <FixedSizeChipLabel\n          color=\"red\"\n          variant=\"outline\"\n          isCompact\n          isClickable\n          onClick={onTogglePaused}\n          icon={<RecordingDot aria-hidden />}\n          className=\"lightspeed-context-chip-recording-label\"\n          aria-label={t('contextChip.aria.pause' as any, {\n            label: displayLabel,\n          })}\n        >\n          <ChipText>{displayLabel}</ChipText>\n        </FixedSizeChipLabel>\n      </Tooltip>\n    </ChipWrap>\n  );\n};\n"],"names":[],"mappings":"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"}

package/dist/components/SettingsPanel.esm.js

@@ -0,0 +1,135 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Title, Button } from '@patternfly/react-core';
+import { TimesIcon } from '@patternfly/react-icons';
+import { makeStyles } from 'tss-react/mui';
+import { useTranslation } from '../hooks/useTranslation.esm.js';
+import { McpServersSettings } from './McpServersSettings.esm.js';
+import { SavedPromptsSettings } from './SavedPromptsSettings.esm.js';
+
+const useStyles = makeStyles()((theme) => ({
+  root: {
+    display: "flex",
+    flexDirection: "column",
+    height: "100%",
+    width: "100%",
+    overflow: "hidden",
+    backgroundColor: "var(--pf-t--global--background--color--floating--default)"
+  },
+  headerRow: {
+    display: "flex",
+    alignItems: "flex-start",
+    justifyContent: "space-between",
+    padding: `${theme.spacing(2)} ${theme.spacing(2)} ${theme.spacing(1)} ${theme.spacing(3)}`
+  },
+  tabBar: {
+    display: "flex",
+    padding: `0 ${theme.spacing(3)}`,
+    gap: theme.spacing(1),
+    borderBottom: "1px solid var(--pf-t--global--border--color--default)"
+  },
+  tabButton: {
+    background: "none",
+    border: "none",
+    padding: `${theme.spacing(1)} ${theme.spacing(2)}`,
+    fontSize: "0.875rem",
+    cursor: "pointer",
+    color: theme.palette.text.secondary,
+    borderBottom: "2px solid transparent",
+    transition: "color 0.15s, border-color 0.15s",
+    "&:hover": {
+      color: theme.palette.text.primary
+    }
+  },
+  tabButtonActive: {
+    color: theme.palette.text.primary,
+    fontWeight: 600,
+    borderBottom: `2px solid var(--pf-t--global--color--brand--default, ${theme.palette.primary.main}) !important`,
+    borderRadius: "0 !important"
+  },
+  tabContent: {
+    flex: 1,
+    minHeight: 0,
+    overflow: "auto"
+  }
+}));
+const SettingsPanel = ({
+  activeTab,
+  onTabChange,
+  onClose,
+  backgroundColor,
+  isSavedPromptsEnabled,
+  onEnableSavedPrompts,
+  onApplySavedPromptToInput,
+  onSendSavedPromptDirectly,
+  isChatStreaming = false,
+  savedPrompts,
+  savedPromptsConfig,
+  savedPromptsLoading,
+  savedPromptsError,
+  onCreateSavedPrompt,
+  onRequestSavedPromptDelete,
+  showMcpSettings = true
+}) => {
+  const { t } = useTranslation();
+  const { classes } = useStyles();
+  const showMcpTab = showMcpSettings;
+  const showSavedPromptsTab = true;
+  const showTabBar = showMcpTab && showSavedPromptsTab;
+  const effectiveTab = showMcpTab ? activeTab : "saved-prompts";
+  return /* @__PURE__ */ jsxs("div", { className: classes.root, children: [
+    /* @__PURE__ */ jsxs("div", { className: classes.headerRow, children: [
+      /* @__PURE__ */ jsx(Title, { headingLevel: "h2", size: "xl", children: t("settings.panel.title") }),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          "aria-label": t("mcp.settings.closeAriaLabel"),
+          icon: /* @__PURE__ */ jsx(TimesIcon, {}),
+          variant: "plain",
+          onClick: onClose
+        }
+      )
+    ] }),
+    showTabBar && /* @__PURE__ */ jsxs("div", { className: classes.tabBar, children: [
+      showMcpTab && /* @__PURE__ */ jsx(
+        Button,
+        {
+          variant: "plain",
+          className: `${classes.tabButton} ${effectiveTab === "mcp-servers" ? classes.tabButtonActive : ""}`,
+          onClick: () => onTabChange("mcp-servers"),
+          children: t("mcp.settings.title")
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          variant: "plain",
+          className: `${classes.tabButton} ${effectiveTab === "saved-prompts" ? classes.tabButtonActive : ""}`,
+          onClick: () => onTabChange("saved-prompts"),
+          children: t("savedPrompts.tab.title")
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: classes.tabContent, children: [
+      effectiveTab === "mcp-servers" && showMcpTab && /* @__PURE__ */ jsx(McpServersSettings, { backgroundColor }),
+      effectiveTab === "saved-prompts" && /* @__PURE__ */ jsx(
+        SavedPromptsSettings,
+        {
+          isSavedPromptsEnabled,
+          onEnableSavedPrompts,
+          onApplyToInput: onApplySavedPromptToInput,
+          onSendDirectly: onSendSavedPromptDirectly,
+          isChatStreaming,
+          savedPrompts,
+          savedPromptsConfig,
+          savedPromptsLoading,
+          savedPromptsError,
+          onCreateSavedPrompt,
+          onRequestDelete: onRequestSavedPromptDelete
+        }
+      )
+    ] })
+  ] });
+};
+
+export { SettingsPanel };
+//# sourceMappingURL=SettingsPanel.esm.js.map