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

package/dist/components/RenameConversationModal.esm.js

@@ -1,6 +1,5 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { useState, useEffect } from 'react';
-import { TextField } from '@material-ui/core';
 import CancelOutlinedIcon from '@mui/icons-material/CancelOutlined';
 import CloseIcon from '@mui/icons-material/Close';
 import Alert from '@mui/material/Alert';
@@ -11,6 +10,7 @@ import DialogActions from '@mui/material/DialogActions';
 import DialogContent from '@mui/material/DialogContent';
 import DialogTitle from '@mui/material/DialogTitle';
 import IconButton from '@mui/material/IconButton';
+import TextField from '@mui/material/TextField';
 import Typography from '@mui/material/Typography';
 import { useConversations } from '../hooks/useConversations.esm.js';
 import { useRenameConversation } from '../hooks/useRenameConversation.esm.js';
@@ -68,35 +68,42 @@ const RenameConversationModal = ({
       "aria-describedby": "rename-modal-confirmation",
       fullWidth: true,
       children: [
-        /* @__PURE__ */ jsx(DialogTitle, { sx: { p: "16px 20px", fontStyle: "inherit" }, children: /* @__PURE__ */ jsxs(
-          Box,
+        /* @__PURE__ */ jsx(
+          DialogTitle,
           {
-            sx: {
-              display: "flex",
-              alignItems: "center",
-              gap: 1
-            },
-            children: [
-              /* @__PURE__ */ jsx(Typography, { component: "span", sx: { fontWeight: "bold" }, children: t("conversation.rename.confirm.title") }),
-              /* @__PURE__ */ jsx(
-                IconButton,
-                {
-                  "aria-label": "close",
-                  onClick: onClose,
-                  title: t("common.close"),
-                  size: "large",
-                  sx: {
-                    position: "absolute",
-                    right: 1,
-                    top: 1,
-                    color: "text.primary"
-                  },
-                  children: /* @__PURE__ */ jsx(CloseIcon, {})
-                }
-              )
-            ]
+            id: "rename-modal",
+            sx: { p: "16px 20px", fontStyle: "inherit" },
+            children: /* @__PURE__ */ jsxs(
+              Box,
+              {
+                sx: {
+                  display: "flex",
+                  alignItems: "center",
+                  gap: 1
+                },
+                children: [
+                  /* @__PURE__ */ jsx(Typography, { component: "span", sx: { fontWeight: "bold" }, children: t("conversation.rename.confirm.title") }),
+                  /* @__PURE__ */ jsx(
+                    IconButton,
+                    {
+                      "aria-label": "close",
+                      onClick: onClose,
+                      title: t("common.close"),
+                      size: "large",
+                      sx: {
+                        position: "absolute",
+                        right: 1,
+                        top: 1,
+                        color: "text.primary"
+                      },
+                      children: /* @__PURE__ */ jsx(CloseIcon, {})
+                    }
+                  )
+                ]
+              }
+            )
           }
-        ) }),
+        ),
         /* @__PURE__ */ jsx(DialogContent, { id: "rename-modal-body-input", children: /* @__PURE__ */ jsx(
           TextField,
           {
@@ -105,7 +112,7 @@ const RenameConversationModal = ({
             onChange: handleChatNameChange,
             fullWidth: true,
             value: chatName,
-            style: { marginTop: "10px" },
+            sx: { mt: "10px" },
             variant: "outlined",
             InputProps: {
               autoFocus: true,
@@ -121,8 +128,8 @@ const RenameConversationModal = ({
             }
           }
         ) }),
-        isError && /* @__PURE__ */ jsx(Box, { maxWidth: "650px", marginLeft: "20px", marginRight: "20px", children: /* @__PURE__ */ jsx(Alert, { severity: "error", children: String(error) }) }),
-        /* @__PURE__ */ jsxs(DialogActions, { style: { justifyContent: "left", padding: "20px" }, children: [
+        isError && /* @__PURE__ */ jsx(Box, { sx: { maxWidth: "650px", mx: "20px" }, children: /* @__PURE__ */ jsx(Alert, { severity: "error", children: String(error) }) }),
+        /* @__PURE__ */ jsxs(DialogActions, { sx: { justifyContent: "left", p: "20px" }, children: [
           /* @__PURE__ */ jsx(
             Button,
             {

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

@@ -1 +1 @@
-{"version":3,"file":"RenameConversationModal.esm.js","sources":["../../src/components/RenameConversationModal.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 { useEffect, useState } from 'react';\n\nimport { TextField } from '@material-ui/core';\nimport CancelOutlinedIcon from '@mui/icons-material/CancelOutlined';\nimport CloseIcon from '@mui/icons-material/Close';\nimport Alert from '@mui/material/Alert';\nimport Box from '@mui/material/Box';\nimport Button from '@mui/material/Button';\nimport Dialog from '@mui/material/Dialog';\nimport DialogActions from '@mui/material/DialogActions';\nimport DialogContent from '@mui/material/DialogContent';\nimport DialogTitle from '@mui/material/DialogTitle';\nimport IconButton from '@mui/material/IconButton';\nimport Typography from '@mui/material/Typography';\n\nimport { useConversations } from '../hooks/useConversations';\nimport { useRenameConversation } from '../hooks/useRenameConversation';\nimport { useTranslation } from '../hooks/useTranslation';\n\nexport const RenameConversationModal = ({\n  isOpen,\n  onClose,\n  conversationId,\n}: {\n  isOpen: boolean;\n  onClose: () => void;\n  conversationId: string;\n}) => {\n  const { t } = useTranslation();\n  const {\n    mutateAsync: renameConversation,\n    isError,\n    error,\n  } = useRenameConversation();\n  const { data: conversations } = useConversations();\n  const [chatName, setChatName] = useState<string>('');\n  const [originalChatName, setOriginalChatName] = useState<string>('');\n\n  useEffect(() => {\n    if (isOpen && conversations) {\n      const conversation = conversations.find(\n        c => c.conversation_id === conversationId,\n      );\n      if (conversation) {\n        setChatName(conversation.topic_summary ?? '');\n        setOriginalChatName(conversation.topic_summary ?? '');\n      } else {\n        setChatName('');\n        setOriginalChatName('');\n      }\n    }\n  }, [isOpen, conversationId, conversations]);\n\n  const handleChatNameChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n    setChatName(event.target.value);\n  };\n\n  const handleRename = async () => {\n    try {\n      await renameConversation({\n        conversation_id: conversationId,\n        newName: chatName,\n        invalidateCache: false,\n      });\n      onClose();\n    } catch (e) {\n      // eslint-disable-next-line no-console\n      console.warn(e);\n    }\n  };\n\n  return (\n    <Dialog\n      open={isOpen}\n      onClose={onClose}\n      aria-labelledby=\"rename-modal\"\n      aria-describedby=\"rename-modal-confirmation\"\n      fullWidth\n    >\n      <DialogTitle sx={{ p: '16px 20px', fontStyle: 'inherit' }}>\n        <Box\n          sx={{\n            display: 'flex',\n            alignItems: 'center',\n            gap: 1,\n          }}\n        >\n          <Typography component=\"span\" sx={{ fontWeight: 'bold' }}>\n            {t('conversation.rename.confirm.title')}\n          </Typography>\n\n          <IconButton\n            aria-label=\"close\"\n            onClick={onClose}\n            title={t('common.close')}\n            size=\"large\"\n            sx={{\n              position: 'absolute',\n              right: 1,\n              top: 1,\n              color: 'text.primary',\n            }}\n          >\n            <CloseIcon />\n          </IconButton>\n        </Box>\n      </DialogTitle>\n      <DialogContent id=\"rename-modal-body-input\">\n        <TextField\n          id=\"outlined-chat-name-input\"\n          label={t('conversation.rename.placeholder')}\n          onChange={handleChatNameChange}\n          fullWidth\n          value={chatName}\n          style={{ marginTop: '10px' }}\n          variant=\"outlined\"\n          InputProps={{\n            autoFocus: true,\n            endAdornment: (\n              <IconButton\n                aria-label=\"clear-input\"\n                onClick={() => setChatName('')}\n                edge=\"end\"\n              >\n                <CancelOutlinedIcon />\n              </IconButton>\n            ),\n          }}\n        />\n      </DialogContent>\n      {isError && (\n        <Box maxWidth=\"650px\" marginLeft=\"20px\" marginRight=\"20px\">\n          <Alert severity=\"error\">{String(error)}</Alert>\n        </Box>\n      )}\n      <DialogActions style={{ justifyContent: 'left', padding: '20px' }}>\n        <Button\n          variant=\"contained\"\n          sx={{\n            textTransform: 'none',\n          }}\n          disabled={\n            chatName.trim() === '' ||\n            chatName.trim() === originalChatName.trim()\n          }\n          onClick={handleRename}\n        >\n          {t('conversation.rename.confirm.action')}\n        </Button>\n        <Button\n          key=\"cancel\"\n          variant=\"outlined\"\n          sx={{\n            textTransform: 'none',\n          }}\n          onClick={onClose}\n        >\n          {t('common.cancel')}\n        </Button>\n      </DialogActions>\n    </Dialog>\n  );\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"RenameConversationModal.esm.js","sources":["../../src/components/RenameConversationModal.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 { useEffect, useState } from 'react';\n\nimport CancelOutlinedIcon from '@mui/icons-material/CancelOutlined';\nimport CloseIcon from '@mui/icons-material/Close';\nimport Alert from '@mui/material/Alert';\nimport Box from '@mui/material/Box';\nimport Button from '@mui/material/Button';\nimport Dialog from '@mui/material/Dialog';\nimport DialogActions from '@mui/material/DialogActions';\nimport DialogContent from '@mui/material/DialogContent';\nimport DialogTitle from '@mui/material/DialogTitle';\nimport IconButton from '@mui/material/IconButton';\nimport TextField from '@mui/material/TextField';\nimport Typography from '@mui/material/Typography';\n\nimport { useConversations } from '../hooks/useConversations';\nimport { useRenameConversation } from '../hooks/useRenameConversation';\nimport { useTranslation } from '../hooks/useTranslation';\n\nexport const RenameConversationModal = ({\n  isOpen,\n  onClose,\n  conversationId,\n}: {\n  isOpen: boolean;\n  onClose: () => void;\n  conversationId: string;\n}) => {\n  const { t } = useTranslation();\n  const {\n    mutateAsync: renameConversation,\n    isError,\n    error,\n  } = useRenameConversation();\n  const { data: conversations } = useConversations();\n  const [chatName, setChatName] = useState<string>('');\n  const [originalChatName, setOriginalChatName] = useState<string>('');\n\n  useEffect(() => {\n    if (isOpen && conversations) {\n      const conversation = conversations.find(\n        c => c.conversation_id === conversationId,\n      );\n      if (conversation) {\n        setChatName(conversation.topic_summary ?? '');\n        setOriginalChatName(conversation.topic_summary ?? '');\n      } else {\n        setChatName('');\n        setOriginalChatName('');\n      }\n    }\n  }, [isOpen, conversationId, conversations]);\n\n  const handleChatNameChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n    setChatName(event.target.value);\n  };\n\n  const handleRename = async () => {\n    try {\n      await renameConversation({\n        conversation_id: conversationId,\n        newName: chatName,\n        invalidateCache: false,\n      });\n      onClose();\n    } catch (e) {\n      // eslint-disable-next-line no-console\n      console.warn(e);\n    }\n  };\n\n  return (\n    <Dialog\n      open={isOpen}\n      onClose={onClose}\n      aria-labelledby=\"rename-modal\"\n      aria-describedby=\"rename-modal-confirmation\"\n      fullWidth\n    >\n      <DialogTitle\n        id=\"rename-modal\"\n        sx={{ p: '16px 20px', fontStyle: 'inherit' }}\n      >\n        <Box\n          sx={{\n            display: 'flex',\n            alignItems: 'center',\n            gap: 1,\n          }}\n        >\n          <Typography component=\"span\" sx={{ fontWeight: 'bold' }}>\n            {t('conversation.rename.confirm.title')}\n          </Typography>\n\n          <IconButton\n            aria-label=\"close\"\n            onClick={onClose}\n            title={t('common.close')}\n            size=\"large\"\n            sx={{\n              position: 'absolute',\n              right: 1,\n              top: 1,\n              color: 'text.primary',\n            }}\n          >\n            <CloseIcon />\n          </IconButton>\n        </Box>\n      </DialogTitle>\n      <DialogContent id=\"rename-modal-body-input\">\n        <TextField\n          id=\"outlined-chat-name-input\"\n          label={t('conversation.rename.placeholder')}\n          onChange={handleChatNameChange}\n          fullWidth\n          value={chatName}\n          sx={{ mt: '10px' }}\n          variant=\"outlined\"\n          InputProps={{\n            autoFocus: true,\n            endAdornment: (\n              <IconButton\n                aria-label=\"clear-input\"\n                onClick={() => setChatName('')}\n                edge=\"end\"\n              >\n                <CancelOutlinedIcon />\n              </IconButton>\n            ),\n          }}\n        />\n      </DialogContent>\n      {isError && (\n        <Box sx={{ maxWidth: '650px', mx: '20px' }}>\n          <Alert severity=\"error\">{String(error)}</Alert>\n        </Box>\n      )}\n      <DialogActions sx={{ justifyContent: 'left', p: '20px' }}>\n        <Button\n          variant=\"contained\"\n          sx={{\n            textTransform: 'none',\n          }}\n          disabled={\n            chatName.trim() === '' ||\n            chatName.trim() === originalChatName.trim()\n          }\n          onClick={handleRename}\n        >\n          {t('conversation.rename.confirm.action')}\n        </Button>\n        <Button\n          key=\"cancel\"\n          variant=\"outlined\"\n          sx={{\n            textTransform: 'none',\n          }}\n          onClick={onClose}\n        >\n          {t('common.cancel')}\n        </Button>\n      </DialogActions>\n    </Dialog>\n  );\n};\n"],"names":[],"mappings":"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"}

package/dist/components/Router.esm.js

@@ -1,15 +1,12 @@
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { Routes, Route } from 'react-router-dom';
 import { useApi, configApiRef } from '@backstage/core-plugin-api';
-import { StylesProvider as StylesProvider$1 } from '@material-ui/core/styles';
-import { StylesProvider } from '@mui/styles';
-import { generateClassName, generateClassNameV4 } from '../utils/generateClassName.esm.js';
 import { LightspeedPage } from './LightspeedPage.esm.js';
 
 const Router = () => {
   const configApi = useApi(configApiRef);
   const notebooksEnabled = configApi.getOptionalBoolean("intelligent-assistant.notebooks.enabled") ?? false;
-  return /* @__PURE__ */ jsx(StylesProvider, { generateClassName, children: /* @__PURE__ */ jsx(StylesProvider$1, { generateClassName: generateClassNameV4, children: /* @__PURE__ */ jsxs(Routes, { children: [
+  return /* @__PURE__ */ jsxs(Routes, { children: [
     /* @__PURE__ */ jsx(Route, { path: "/", element: /* @__PURE__ */ jsx(LightspeedPage, {}) }),
     /* @__PURE__ */ jsx(
       Route,
@@ -20,15 +17,9 @@ const Router = () => {
     ),
     notebooksEnabled && /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsx(Route, { path: "/notebooks", element: /* @__PURE__ */ jsx(LightspeedPage, {}) }),
-      /* @__PURE__ */ jsx(
-        Route,
-        {
-          path: "/notebooks/:notebookId",
-          element: /* @__PURE__ */ jsx(LightspeedPage, {})
-        }
-      )
+      /* @__PURE__ */ jsx(Route, { path: "/notebooks/:notebookId", element: /* @__PURE__ */ jsx(LightspeedPage, {}) })
     ] })
-  ] }) }) });
+  ] });
 };
 
 export { Router };

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

@@ -1 +1 @@
-{"version":3,"file":"Router.esm.js","sources":["../../src/components/Router.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 { Route, Routes } from 'react-router-dom';\n\nimport { configApiRef, useApi } from '@backstage/core-plugin-api';\n\nimport { StylesProvider as StylesProviderV4 } from '@material-ui/core/styles';\nimport { StylesProvider } from '@mui/styles';\n\nimport {\n  generateClassName,\n  generateClassNameV4,\n} from '../utils/generateClassName';\nimport { LightspeedPage } from './LightspeedPage';\n\n/**\n * @public\n */\nexport const Router = () => {\n  const configApi = useApi(configApiRef);\n  const notebooksEnabled =\n    configApi.getOptionalBoolean('intelligent-assistant.notebooks.enabled') ??\n    false;\n\n  return (\n    <StylesProvider generateClassName={generateClassName}>\n      <StylesProviderV4 generateClassName={generateClassNameV4}>\n        <Routes>\n          <Route path=\"/\" element={<LightspeedPage />} />\n          <Route\n            path=\"/conversation/:conversationId\"\n            element={<LightspeedPage />}\n          />\n          {notebooksEnabled && (\n            <>\n              <Route path=\"/notebooks\" element={<LightspeedPage />} />\n              <Route\n                path=\"/notebooks/:notebookId\"\n                element={<LightspeedPage />}\n              />\n            </>\n          )}\n        </Routes>\n      </StylesProviderV4>\n    </StylesProvider>\n  );\n};\n"],"names":["StylesProviderV4"],"mappings":";;;;;;;;AAgCO,MAAM,SAAS,MAAM;AAC1B,EAAA,MAAM,SAAA,GAAY,OAAO,YAAY,CAAA;AACrC,EAAA,MAAM,gBAAA,GACJ,SAAA,CAAU,kBAAA,CAAmB,yCAAyC,CAAA,IACtE,KAAA;AAEF,EAAA,uBACE,GAAA,CAAC,kBAAe,iBAAA,EACd,QAAA,kBAAA,GAAA,CAACA,oBAAiB,iBAAA,EAAmB,mBAAA,EACnC,+BAAC,MAAA,EAAA,EACC,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,SAAM,IAAA,EAAK,GAAA,EAAI,OAAA,kBAAS,GAAA,CAAC,kBAAe,CAAA,EAAI,CAAA;AAAA,oBAC7C,GAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,IAAA,EAAK,+BAAA;AAAA,QACL,OAAA,sBAAU,cAAA,EAAA,EAAe;AAAA;AAAA,KAC3B;AAAA,IACC,oCACC,IAAA,CAAA,QAAA,EAAA,EACE,QAAA,EAAA;AAAA,sBAAA,GAAA,CAAC,SAAM,IAAA,EAAK,YAAA,EAAa,OAAA,kBAAS,GAAA,CAAC,kBAAe,CAAA,EAAI,CAAA;AAAA,sBACtD,GAAA;AAAA,QAAC,KAAA;AAAA,QAAA;AAAA,UACC,IAAA,EAAK,wBAAA;AAAA,UACL,OAAA,sBAAU,cAAA,EAAA,EAAe;AAAA;AAAA;AAC3B,KAAA,EACF;AAAA,GAAA,EAEJ,GACF,CAAA,EACF,CAAA;AAEJ;;;;"}
+{"version":3,"file":"Router.esm.js","sources":["../../src/components/Router.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 { Route, Routes } from 'react-router-dom';\n\nimport { configApiRef, useApi } from '@backstage/core-plugin-api';\n\nimport { LightspeedPage } from './LightspeedPage';\n\n/**\n * @public\n */\nexport const Router = () => {\n  const configApi = useApi(configApiRef);\n  const notebooksEnabled =\n    configApi.getOptionalBoolean('intelligent-assistant.notebooks.enabled') ??\n    false;\n\n  return (\n    <Routes>\n      <Route path=\"/\" element={<LightspeedPage />} />\n      <Route\n        path=\"/conversation/:conversationId\"\n        element={<LightspeedPage />}\n      />\n      {notebooksEnabled && (\n        <>\n          <Route path=\"/notebooks\" element={<LightspeedPage />} />\n          <Route path=\"/notebooks/:notebookId\" element={<LightspeedPage />} />\n        </>\n      )}\n    </Routes>\n  );\n};\n"],"names":[],"mappings":";;;;;AAyBO,MAAM,SAAS,MAAM;AAC1B,EAAA,MAAM,SAAA,GAAY,OAAO,YAAY,CAAA;AACrC,EAAA,MAAM,gBAAA,GACJ,SAAA,CAAU,kBAAA,CAAmB,yCAAyC,CAAA,IACtE,KAAA;AAEF,EAAA,4BACG,MAAA,EAAA,EACC,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,SAAM,IAAA,EAAK,GAAA,EAAI,OAAA,kBAAS,GAAA,CAAC,kBAAe,CAAA,EAAI,CAAA;AAAA,oBAC7C,GAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,IAAA,EAAK,+BAAA;AAAA,QACL,OAAA,sBAAU,cAAA,EAAA,EAAe;AAAA;AAAA,KAC3B;AAAA,IACC,oCACC,IAAA,CAAA,QAAA,EAAA,EACE,QAAA,EAAA;AAAA,sBAAA,GAAA,CAAC,SAAM,IAAA,EAAK,YAAA,EAAa,OAAA,kBAAS,GAAA,CAAC,kBAAe,CAAA,EAAI,CAAA;AAAA,0BACrD,KAAA,EAAA,EAAM,IAAA,EAAK,0BAAyB,OAAA,kBAAS,GAAA,CAAC,kBAAe,CAAA,EAAI;AAAA,KAAA,EACpE;AAAA,GAAA,EAEJ,CAAA;AAEJ;;;;"}

package/dist/components/SourcesChipModal.esm.js

@@ -1,85 +1,62 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { makeStyles } from '@material-ui/core';
-import { Popover, Button, HelperText, HelperTextItem, List, ListItem, Tooltip } from '@patternfly/react-core';
+import Box from '@mui/material/Box';
+import { styled } from '@mui/material/styles';
+import { Popover, Button, HelperText, List, ListItem, HelperTextItem, Tooltip } from '@patternfly/react-core';
 import { LinkIcon, InfoCircleIcon } from '@patternfly/react-icons';
 import { useTranslation } from '../hooks/useTranslation.esm.js';
 import { FileTypeIcon } from './notebooks/FileTypeIcon.esm.js';
+import { RagSourceLabel } from './RagSourceLabel.esm.js';
 
 const POPOVER_WIDTH = "400px";
-const useStyles = makeStyles((theme) => ({
-  sourcesPopover: {
-    "& .pf-v6-c-popover__title": {
-      alignItems: "flex-start"
-    },
-    "& .pf-v6-c-popover__title-text": {
-      margin: 0
-    },
-    "& .pf-v6-c-popover__header": {
-      paddingBlockEnd: theme.spacing(2)
-    },
-    "& .pf-v6-c-popover__body": {
-      paddingBlockStart: 0
-    }
-  },
-  chipButton: {
-    padding: "4px 12px",
-    fontSize: "0.8125rem",
-    fontWeight: 500,
-    borderRadius: 16,
-    backgroundColor: "transparent",
-    color: "var(--pf-t--global--text--color--regular, #1b1d21)",
-    "&:hover": {
-      backgroundColor: "var(--pf-t--global--background--color--secondary--default, #e0e0e0)"
-    },
-    "& .pf-v6-c-button__icon": {
-      color: "inherit"
-    }
+const SourcesPopover = styled(Popover)(({ theme }) => ({
+  "& .pf-v6-c-popover__title": {
+    alignItems: "flex-start"
   },
-  helperText: {
-    marginBottom: theme.spacing(1.5),
-    color: "var(--pf-t--global--text--color--subtle, #c7c7c7)"
+  "& .pf-v6-c-popover__title-text": {
+    margin: 0
   },
-  sourcesList: {
-    maxHeight: 320,
-    overflowY: "auto"
+  "& .pf-v6-c-popover__header": {
+    paddingBlockEnd: theme.spacing(2)
   },
-  sourceItem: {
-    alignItems: "center",
-    "& .pf-v6-c-list__item-text": {
-      minWidth: 0
-    }
-  },
-  sourceContent: {
-    flex: 1,
-    minWidth: 0
-  },
-  sourceTitle: {
-    fontSize: "0.875rem",
-    fontWeight: 500,
-    overflow: "hidden",
-    textOverflow: "ellipsis",
-    whiteSpace: "nowrap"
+  "& .pf-v6-c-popover__body": {
+    paddingBlockStart: 0
+  }
+}));
+const ChipButton = styled(Button)({
+  padding: "4px 12px",
+  fontSize: "0.8125rem",
+  fontWeight: 500,
+  borderRadius: 16,
+  backgroundColor: "transparent",
+  color: "var(--pf-t--global--text--color--regular)",
+  "&:hover": {
+    backgroundColor: "var(--pf-t--global--background--color--secondary--default)"
   },
-  sourceBody: {
-    fontSize: "0.8125rem",
-    color: "var(--pf-t--global--text--color--subtle, #c7c7c7)",
-    marginTop: 2,
-    overflow: "hidden",
-    textOverflow: "ellipsis",
-    display: "-webkit-box",
-    WebkitLineClamp: 2,
-    WebkitBoxOrient: "vertical"
+  "& .pf-v6-c-button__icon": {
+    color: "inherit"
   }
+});
+const SourcesHelperText = styled(HelperText)(({ theme }) => ({
+  marginBottom: theme.spacing(1.5),
+  color: "var(--pf-t--global--text--color--subtle)"
 }));
+const SourcesList = styled(List)({
+  maxHeight: 320,
+  overflowY: "auto"
+});
+const SourceListItem = styled(ListItem)({
+  alignItems: "center",
+  "& .pf-v6-c-list__item-text": {
+    minWidth: 0
+  }
+});
 const SourcesChipModal = ({ sources }) => {
-  const classes = useStyles();
   const { t } = useTranslation();
   const count = sources.sources?.length ?? 0;
   if (count === 0) return null;
   return /* @__PURE__ */ jsx(
-    Popover,
+    SourcesPopover,
     {
-      className: classes.sourcesPopover,
       position: "top-start",
       triggerAction: "click",
       "aria-label": t("sources.modal.title"),
@@ -90,32 +67,60 @@ const SourcesChipModal = ({ sources }) => {
       maxWidth: POPOVER_WIDTH,
       appendTo: () => document.body,
       bodyContent: /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx(HelperText, { className: classes.helperText, children: /* @__PURE__ */ jsx(HelperTextItem, { variant: "indeterminate", icon: /* @__PURE__ */ jsx(InfoCircleIcon, {}), children: t("sources.modal.description") }) }),
-        /* @__PURE__ */ jsx(
-          List,
-          {
-            isPlain: true,
-            className: classes.sourcesList,
-            "aria-label": t("sources.modal.title"),
-            children: sources.sources.map((source, index) => {
-              const title = source.title ?? `Source ${index + 1}`;
-              return /* @__PURE__ */ jsx(
-                ListItem,
-                {
-                  className: classes.sourceItem,
-                  icon: /* @__PURE__ */ jsx(FileTypeIcon, { fileName: title }),
-                  children: /* @__PURE__ */ jsxs("div", { className: classes.sourceContent, children: [
-                    /* @__PURE__ */ jsx(Tooltip, { content: title, children: /* @__PURE__ */ jsx("div", { className: classes.sourceTitle, children: title }) }),
-                    source.body && /* @__PURE__ */ jsx("div", { className: classes.sourceBody, children: source.body })
-                  ] })
-                },
-                `${source.title}-${index}`
-              );
-            })
-          }
-        )
+        /* @__PURE__ */ jsx(SourcesHelperText, { children: /* @__PURE__ */ jsx(HelperTextItem, { variant: "indeterminate", icon: /* @__PURE__ */ jsx(InfoCircleIcon, {}), children: t("sources.modal.description") }) }),
+        /* @__PURE__ */ jsx(SourcesList, { isPlain: true, "aria-label": t("sources.modal.title"), children: sources.sources.map((source, index) => {
+          const title = source.title ?? `Source ${index + 1}`;
+          const ragSource = source.ragSource;
+          const titleNode = /* @__PURE__ */ jsx(
+            Box,
+            {
+              sx: {
+                fontSize: "0.875rem",
+                fontWeight: 500,
+                overflow: "hidden",
+                textOverflow: "ellipsis",
+                whiteSpace: "nowrap",
+                minWidth: 0
+              },
+              children: title
+            }
+          );
+          return /* @__PURE__ */ jsx(
+            SourceListItem,
+            {
+              icon: /* @__PURE__ */ jsx(FileTypeIcon, { fileName: title }),
+              children: /* @__PURE__ */ jsxs(Box, { sx: { flex: 1, minWidth: 0 }, children: [
+                /* @__PURE__ */ jsx(Tooltip, { content: title, children: titleNode }),
+                ragSource && /* @__PURE__ */ jsx(
+                  Box,
+                  {
+                    sx: { marginTop: "var(--pf-t--global--spacer--xs)" },
+                    children: /* @__PURE__ */ jsx(RagSourceLabel, { source: ragSource })
+                  }
+                ),
+                source.body && /* @__PURE__ */ jsx(
+                  Box,
+                  {
+                    sx: {
+                      fontSize: "0.8125rem",
+                      color: "var(--pf-t--global--text--color--subtle)",
+                      marginTop: "2px",
+                      overflow: "hidden",
+                      textOverflow: "ellipsis",
+                      display: "-webkit-box",
+                      WebkitLineClamp: 2,
+                      WebkitBoxOrient: "vertical"
+                    },
+                    children: source.body
+                  }
+                )
+              ] })
+            },
+            `${source.title}-${index}`
+          );
+        }) })
       ] }),
-      children: /* @__PURE__ */ jsx(Button, { variant: "link", icon: /* @__PURE__ */ jsx(LinkIcon, {}), className: classes.chipButton, children: t("sources.chip.label", { count }) })
+      children: /* @__PURE__ */ jsx(ChipButton, { variant: "link", icon: /* @__PURE__ */ jsx(LinkIcon, {}), children: t("sources.chip.label", { count }) })
     }
   );
 };

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

@@ -1 +1 @@
-{"version":3,"file":"SourcesChipModal.esm.js","sources":["../../src/components/SourcesChipModal.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 { makeStyles } from '@material-ui/core';\nimport { SourcesCardProps } from '@patternfly/chatbot';\nimport {\n  Button,\n  HelperText,\n  HelperTextItem,\n  List,\n  ListItem,\n  Popover,\n  Tooltip,\n} from '@patternfly/react-core';\nimport { InfoCircleIcon, LinkIcon } from '@patternfly/react-icons';\n\nimport { useTranslation } from '../hooks/useTranslation';\nimport { FileTypeIcon } from './notebooks/FileTypeIcon';\n\nconst POPOVER_WIDTH = '400px';\n\nconst useStyles = makeStyles(theme => ({\n  sourcesPopover: {\n    '& .pf-v6-c-popover__title': {\n      alignItems: 'flex-start',\n    },\n    '& .pf-v6-c-popover__title-text': {\n      margin: 0,\n    },\n    '& .pf-v6-c-popover__header': {\n      paddingBlockEnd: theme.spacing(2),\n    },\n    '& .pf-v6-c-popover__body': {\n      paddingBlockStart: 0,\n    },\n  },\n  chipButton: {\n    padding: '4px 12px',\n    fontSize: '0.8125rem',\n    fontWeight: 500,\n    borderRadius: 16,\n    backgroundColor: 'transparent',\n    color: 'var(--pf-t--global--text--color--regular, #1b1d21)',\n    '&:hover': {\n      backgroundColor:\n        'var(--pf-t--global--background--color--secondary--default, #e0e0e0)',\n    },\n    '& .pf-v6-c-button__icon': {\n      color: 'inherit',\n    },\n  },\n  helperText: {\n    marginBottom: theme.spacing(1.5),\n    color: 'var(--pf-t--global--text--color--subtle, #c7c7c7)',\n  },\n  sourcesList: {\n    maxHeight: 320,\n    overflowY: 'auto' as const,\n  },\n  sourceItem: {\n    alignItems: 'center',\n    '& .pf-v6-c-list__item-text': {\n      minWidth: 0,\n    },\n  },\n  sourceContent: {\n    flex: 1,\n    minWidth: 0,\n  },\n  sourceTitle: {\n    fontSize: '0.875rem',\n    fontWeight: 500,\n    overflow: 'hidden',\n    textOverflow: 'ellipsis',\n    whiteSpace: 'nowrap',\n  },\n  sourceBody: {\n    fontSize: '0.8125rem',\n    color: 'var(--pf-t--global--text--color--subtle, #c7c7c7)',\n    marginTop: 2,\n    overflow: 'hidden',\n    textOverflow: 'ellipsis',\n    display: '-webkit-box',\n    WebkitLineClamp: 2,\n    WebkitBoxOrient: 'vertical',\n  },\n}));\n\ntype SourcesChipModalProps = {\n  sources: SourcesCardProps;\n};\n\nexport const SourcesChipModal = ({ sources }: SourcesChipModalProps) => {\n  const classes = useStyles();\n  const { t } = useTranslation();\n\n  const count = sources.sources?.length ?? 0;\n  if (count === 0) return null;\n\n  return (\n    <Popover\n      className={classes.sourcesPopover}\n      position=\"top-start\"\n      triggerAction=\"click\"\n      aria-label={t('sources.modal.title')}\n      headerContent={t('sources.modal.title')}\n      headerIcon={<LinkIcon />}\n      closeBtnAriaLabel={t('sources.popover.closeAriaLabel')}\n      minWidth={POPOVER_WIDTH}\n      maxWidth={POPOVER_WIDTH}\n      appendTo={() => document.body}\n      bodyContent={\n        <>\n          <HelperText className={classes.helperText}>\n            <HelperTextItem variant=\"indeterminate\" icon={<InfoCircleIcon />}>\n              {t('sources.modal.description')}\n            </HelperTextItem>\n          </HelperText>\n          <List\n            isPlain\n            className={classes.sourcesList}\n            aria-label={t('sources.modal.title')}\n          >\n            {sources.sources.map((source, index) => {\n              const title = source.title ?? `Source ${index + 1}`;\n              return (\n                <ListItem\n                  key={`${source.title}-${index}`}\n                  className={classes.sourceItem}\n                  icon={<FileTypeIcon fileName={title} />}\n                >\n                  <div className={classes.sourceContent}>\n                    <Tooltip content={title}>\n                      <div className={classes.sourceTitle}>{title}</div>\n                    </Tooltip>\n                    {source.body && (\n                      <div className={classes.sourceBody}>{source.body}</div>\n                    )}\n                  </div>\n                </ListItem>\n              );\n            })}\n          </List>\n        </>\n      }\n    >\n      <Button variant=\"link\" icon={<LinkIcon />} className={classes.chipButton}>\n        {(t as Function)('sources.chip.label', { count })}\n      </Button>\n    </Popover>\n  );\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"SourcesChipModal.esm.js","sources":["../../src/components/SourcesChipModal.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 { styled } from '@mui/material/styles';\nimport { SourcesCardProps } from '@patternfly/chatbot';\nimport {\n  Button,\n  HelperText,\n  HelperTextItem,\n  List,\n  ListItem,\n  Popover,\n  Tooltip,\n} from '@patternfly/react-core';\nimport { InfoCircleIcon, LinkIcon } from '@patternfly/react-icons';\n\nimport { useTranslation } from '../hooks/useTranslation';\nimport { SourceWithRagId } from '../utils/lightspeed-chatbox-utils';\nimport { FileTypeIcon } from './notebooks/FileTypeIcon';\nimport { RagSourceLabel } from './RagSourceLabel';\n\nconst POPOVER_WIDTH = '400px';\n\nconst SourcesPopover = styled(Popover)(({ theme }) => ({\n  '& .pf-v6-c-popover__title': {\n    alignItems: 'flex-start',\n  },\n  '& .pf-v6-c-popover__title-text': {\n    margin: 0,\n  },\n  '& .pf-v6-c-popover__header': {\n    paddingBlockEnd: theme.spacing(2),\n  },\n  '& .pf-v6-c-popover__body': {\n    paddingBlockStart: 0,\n  },\n}));\n\nconst ChipButton = styled(Button)({\n  padding: '4px 12px',\n  fontSize: '0.8125rem',\n  fontWeight: 500,\n  borderRadius: 16,\n  backgroundColor: 'transparent',\n  color: 'var(--pf-t--global--text--color--regular)',\n  '&:hover': {\n    backgroundColor:\n      'var(--pf-t--global--background--color--secondary--default)',\n  },\n  '& .pf-v6-c-button__icon': {\n    color: 'inherit',\n  },\n});\n\nconst SourcesHelperText = styled(HelperText)(({ theme }) => ({\n  marginBottom: theme.spacing(1.5),\n  color: 'var(--pf-t--global--text--color--subtle)',\n}));\n\nconst SourcesList = styled(List)({\n  maxHeight: 320,\n  overflowY: 'auto',\n});\n\nconst SourceListItem = styled(ListItem)({\n  alignItems: 'center',\n  '& .pf-v6-c-list__item-text': {\n    minWidth: 0,\n  },\n});\n\ntype SourcesChipModalProps = {\n  sources: SourcesCardProps;\n};\n\nexport const SourcesChipModal = ({ sources }: SourcesChipModalProps) => {\n  const { t } = useTranslation();\n\n  const count = sources.sources?.length ?? 0;\n  if (count === 0) return null;\n\n  return (\n    <SourcesPopover\n      position=\"top-start\"\n      triggerAction=\"click\"\n      aria-label={t('sources.modal.title')}\n      headerContent={t('sources.modal.title')}\n      headerIcon={<LinkIcon />}\n      closeBtnAriaLabel={t('sources.popover.closeAriaLabel')}\n      minWidth={POPOVER_WIDTH}\n      maxWidth={POPOVER_WIDTH}\n      appendTo={() => document.body}\n      bodyContent={\n        <>\n          <SourcesHelperText>\n            <HelperTextItem variant=\"indeterminate\" icon={<InfoCircleIcon />}>\n              {t('sources.modal.description')}\n            </HelperTextItem>\n          </SourcesHelperText>\n          <SourcesList isPlain aria-label={t('sources.modal.title')}>\n            {sources.sources.map((source, index) => {\n              const title = source.title ?? `Source ${index + 1}`;\n              const ragSource = (source as SourceWithRagId).ragSource;\n              const titleNode = (\n                <Box\n                  sx={{\n                    fontSize: '0.875rem',\n                    fontWeight: 500,\n                    overflow: 'hidden',\n                    textOverflow: 'ellipsis',\n                    whiteSpace: 'nowrap',\n                    minWidth: 0,\n                  }}\n                >\n                  {title}\n                </Box>\n              );\n              return (\n                <SourceListItem\n                  key={`${source.title}-${index}`}\n                  icon={<FileTypeIcon fileName={title} />}\n                >\n                  <Box sx={{ flex: 1, minWidth: 0 }}>\n                    <Tooltip content={title}>{titleNode}</Tooltip>\n                    {ragSource && (\n                      <Box\n                        sx={{ marginTop: 'var(--pf-t--global--spacer--xs)' }}\n                      >\n                        <RagSourceLabel source={ragSource} />\n                      </Box>\n                    )}\n                    {source.body && (\n                      <Box\n                        sx={{\n                          fontSize: '0.8125rem',\n                          color: 'var(--pf-t--global--text--color--subtle)',\n                          marginTop: '2px',\n                          overflow: 'hidden',\n                          textOverflow: 'ellipsis',\n                          display: '-webkit-box',\n                          WebkitLineClamp: 2,\n                          WebkitBoxOrient: 'vertical',\n                        }}\n                      >\n                        {source.body}\n                      </Box>\n                    )}\n                  </Box>\n                </SourceListItem>\n              );\n            })}\n          </SourcesList>\n        </>\n      }\n    >\n      <ChipButton variant=\"link\" icon={<LinkIcon />}>\n        {(t as Function)('sources.chip.label', { count })}\n      </ChipButton>\n    </SourcesPopover>\n  );\n};\n"],"names":[],"mappings":"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"}

package/dist/components/ToastAlertGroup.esm.js

@@ -1,55 +1,39 @@
 import { jsx } from 'react/jsx-runtime';
-import { makeStyles } from '@material-ui/core';
+import { styled } from '@mui/material/styles';
 import { AlertGroup, Alert, AlertVariant, AlertActionCloseButton } from '@patternfly/react-core';
 
-const useStyles = makeStyles((theme) => ({
-  toastAlertGroup: {
-    "--pf-v6-c-alert-group--m-toast--InsetInlineEnd": `${theme.spacing(2.5)}px`,
-    "--pf-v6-c-alert-group--m-toast--InsetBlockStart": `${theme.spacing(2.5)}px`,
-    "--pf-v6-c-alert-group--m-toast--MaxWidth": "350px",
-    "--pf-v6-c-alert-group--m-toast--ZIndex": "9999"
-  },
-  toastAlert: {
-    maxWidth: "350px",
-    "& .pf-v6-c-alert__title": {
-      margin: 0
-    }
-  }
+const ToastAlerts = styled(AlertGroup)(() => ({
+  "--pf-v6-c-alert-group--m-toast--MaxWidth": "350px !important"
 }));
+const ToastAlert = styled(Alert)({
+  maxWidth: "350px",
+  "& .pf-v6-c-alert__title": {
+    margin: 0
+  }
+});
 const ToastAlertGroup = ({
   alerts,
   onRemoveAlert
 }) => {
-  const classes = useStyles();
   if (alerts.length === 0) return null;
-  return /* @__PURE__ */ jsx(
-    AlertGroup,
+  return /* @__PURE__ */ jsx(ToastAlerts, { hasAnimations: true, isToast: true, isLiveRegion: true, children: alerts.map(({ key, title, variant }) => /* @__PURE__ */ jsx(
+    ToastAlert,
     {
-      hasAnimations: true,
-      isToast: true,
-      isLiveRegion: true,
-      className: classes.toastAlertGroup,
-      children: alerts.map(({ key, title, variant }) => /* @__PURE__ */ jsx(
-        Alert,
+      variant: AlertVariant[variant ?? "success"],
+      title,
+      timeout: 2e3,
+      onTimeout: () => onRemoveAlert(key),
+      actionClose: /* @__PURE__ */ jsx(
+        AlertActionCloseButton,
         {
-          variant: AlertVariant[variant ?? "success"],
           title,
-          className: classes.toastAlert,
-          timeout: 2e3,
-          onTimeout: () => onRemoveAlert(key),
-          actionClose: /* @__PURE__ */ jsx(
-            AlertActionCloseButton,
-            {
-              title,
-              variantLabel: `${variant ?? "success"} alert`,
-              onClose: () => onRemoveAlert(key)
-            }
-          )
-        },
-        key
-      ))
-    }
-  );
+          variantLabel: `${variant ?? "success"} alert`,
+          onClose: () => onRemoveAlert(key)
+        }
+      )
+    },
+    key
+  )) });
 };
 
 export { ToastAlertGroup };

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

@@ -1 +1 @@
-{"version":3,"file":"ToastAlertGroup.esm.js","sources":["../../src/components/ToastAlertGroup.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 React from 'react';\n\nimport { makeStyles } from '@material-ui/core';\nimport {\n  Alert,\n  AlertActionCloseButton,\n  AlertGroup,\n  AlertVariant,\n  type AlertProps,\n} from '@patternfly/react-core';\n\nconst useStyles = makeStyles(theme => ({\n  toastAlertGroup: {\n    '--pf-v6-c-alert-group--m-toast--InsetInlineEnd': `${theme.spacing(2.5)}px`,\n    '--pf-v6-c-alert-group--m-toast--InsetBlockStart': `${theme.spacing(2.5)}px`,\n    '--pf-v6-c-alert-group--m-toast--MaxWidth': '350px',\n    '--pf-v6-c-alert-group--m-toast--ZIndex': '9999',\n  },\n  toastAlert: {\n    maxWidth: '350px',\n    '& .pf-v6-c-alert__title': {\n      margin: 0,\n    },\n  },\n}));\n\ntype ToastAlertGroupProps = {\n  alerts: Partial<AlertProps>[];\n  onRemoveAlert: (key: React.Key) => void;\n};\n\nexport const ToastAlertGroup = ({\n  alerts,\n  onRemoveAlert,\n}: ToastAlertGroupProps) => {\n  const classes = useStyles();\n\n  if (alerts.length === 0) return null;\n\n  return (\n    <AlertGroup\n      hasAnimations\n      isToast\n      isLiveRegion\n      className={classes.toastAlertGroup}\n    >\n      {alerts.map(({ key, title, variant }) => (\n        <Alert\n          key={key}\n          variant={AlertVariant[variant ?? 'success']}\n          title={title}\n          className={classes.toastAlert}\n          timeout={2000}\n          onTimeout={() => onRemoveAlert(key as React.Key)}\n          actionClose={\n            <AlertActionCloseButton\n              title={title as string}\n              variantLabel={`${variant ?? 'success'} alert`}\n              onClose={() => onRemoveAlert(key as React.Key)}\n            />\n          }\n        />\n      ))}\n    </AlertGroup>\n  );\n};\n"],"names":[],"mappings":";;;;AA2BA,MAAM,SAAA,GAAY,WAAW,CAAA,KAAA,MAAU;AAAA,EACrC,eAAA,EAAiB;AAAA,IACf,gDAAA,EAAkD,CAAA,EAAG,KAAA,CAAM,OAAA,CAAQ,GAAG,CAAC,CAAA,EAAA,CAAA;AAAA,IACvE,iDAAA,EAAmD,CAAA,EAAG,KAAA,CAAM,OAAA,CAAQ,GAAG,CAAC,CAAA,EAAA,CAAA;AAAA,IACxE,0CAAA,EAA4C,OAAA;AAAA,IAC5C,wCAAA,EAA0C;AAAA,GAC5C;AAAA,EACA,UAAA,EAAY;AAAA,IACV,QAAA,EAAU,OAAA;AAAA,IACV,yBAAA,EAA2B;AAAA,MACzB,MAAA,EAAQ;AAAA;AACV;AAEJ,CAAA,CAAE,CAAA;AAOK,MAAM,kBAAkB,CAAC;AAAA,EAC9B,MAAA;AAAA,EACA;AACF,CAAA,KAA4B;AAC1B,EAAA,MAAM,UAAU,SAAA,EAAU;AAE1B,EAAA,IAAI,MAAA,CAAO,MAAA,KAAW,CAAA,EAAG,OAAO,IAAA;AAEhC,EAAA,uBACE,GAAA;AAAA,IAAC,UAAA;AAAA,IAAA;AAAA,MACC,aAAA,EAAa,IAAA;AAAA,MACb,OAAA,EAAO,IAAA;AAAA,MACP,YAAA,EAAY,IAAA;AAAA,MACZ,WAAW,OAAA,CAAQ,eAAA;AAAA,MAElB,iBAAO,GAAA,CAAI,CAAC,EAAE,GAAA,EAAK,KAAA,EAAO,SAAQ,qBACjC,GAAA;AAAA,QAAC,KAAA;AAAA,QAAA;AAAA,UAEC,OAAA,EAAS,YAAA,CAAa,OAAA,IAAW,SAAS,CAAA;AAAA,UAC1C,KAAA;AAAA,UACA,WAAW,OAAA,CAAQ,UAAA;AAAA,UACnB,OAAA,EAAS,GAAA;AAAA,UACT,SAAA,EAAW,MAAM,aAAA,CAAc,GAAgB,CAAA;AAAA,UAC/C,WAAA,kBACE,GAAA;AAAA,YAAC,sBAAA;AAAA,YAAA;AAAA,cACC,KAAA;AAAA,cACA,YAAA,EAAc,CAAA,EAAG,OAAA,IAAW,SAAS,CAAA,MAAA,CAAA;AAAA,cACrC,OAAA,EAAS,MAAM,aAAA,CAAc,GAAgB;AAAA;AAAA;AAC/C,SAAA;AAAA,QAXG;AAAA,OAcR;AAAA;AAAA,GACH;AAEJ;;;;"}
+{"version":3,"file":"ToastAlertGroup.esm.js","sources":["../../src/components/ToastAlertGroup.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 { styled } from '@mui/material/styles';\nimport {\n  Alert,\n  AlertActionCloseButton,\n  AlertGroup,\n  AlertVariant,\n  type AlertProps,\n} from '@patternfly/react-core';\n\nconst ToastAlerts = styled(AlertGroup)(() => ({\n  '--pf-v6-c-alert-group--m-toast--MaxWidth': '350px !important',\n}));\n\nconst ToastAlert = styled(Alert)({\n  maxWidth: '350px',\n  '& .pf-v6-c-alert__title': {\n    margin: 0,\n  },\n});\n\ntype ToastAlertGroupProps = {\n  alerts: Partial<AlertProps>[];\n  onRemoveAlert: (key: React.Key) => void;\n};\n\nexport const ToastAlertGroup = ({\n  alerts,\n  onRemoveAlert,\n}: ToastAlertGroupProps) => {\n  if (alerts.length === 0) return null;\n\n  return (\n    <ToastAlerts hasAnimations isToast isLiveRegion>\n      {alerts.map(({ key, title, variant }) => (\n        <ToastAlert\n          key={key}\n          variant={AlertVariant[variant ?? 'success']}\n          title={title}\n          timeout={2000}\n          onTimeout={() => onRemoveAlert(key as React.Key)}\n          actionClose={\n            <AlertActionCloseButton\n              title={title as string}\n              variantLabel={`${variant ?? 'success'} alert`}\n              onClose={() => onRemoveAlert(key as React.Key)}\n            />\n          }\n        />\n      ))}\n    </ToastAlerts>\n  );\n};\n"],"names":[],"mappings":";;;;AAyBA,MAAM,WAAA,GAAc,MAAA,CAAO,UAAU,CAAA,CAAE,OAAO;AAAA,EAC5C,0CAAA,EAA4C;AAC9C,CAAA,CAAE,CAAA;AAEF,MAAM,UAAA,GAAa,MAAA,CAAO,KAAK,CAAA,CAAE;AAAA,EAC/B,QAAA,EAAU,OAAA;AAAA,EACV,yBAAA,EAA2B;AAAA,IACzB,MAAA,EAAQ;AAAA;AAEZ,CAAC,CAAA;AAOM,MAAM,kBAAkB,CAAC;AAAA,EAC9B,MAAA;AAAA,EACA;AACF,CAAA,KAA4B;AAC1B,EAAA,IAAI,MAAA,CAAO,MAAA,KAAW,CAAA,EAAG,OAAO,IAAA;AAEhC,EAAA,uBACE,GAAA,CAAC,WAAA,EAAA,EAAY,aAAA,EAAa,IAAA,EAAC,SAAO,IAAA,EAAC,YAAA,EAAY,IAAA,EAC5C,QAAA,EAAA,MAAA,CAAO,IAAI,CAAC,EAAE,GAAA,EAAK,KAAA,EAAO,SAAQ,qBACjC,GAAA;AAAA,IAAC,UAAA;AAAA,IAAA;AAAA,MAEC,OAAA,EAAS,YAAA,CAAa,OAAA,IAAW,SAAS,CAAA;AAAA,MAC1C,KAAA;AAAA,MACA,OAAA,EAAS,GAAA;AAAA,MACT,SAAA,EAAW,MAAM,aAAA,CAAc,GAAgB,CAAA;AAAA,MAC/C,WAAA,kBACE,GAAA;AAAA,QAAC,sBAAA;AAAA,QAAA;AAAA,UACC,KAAA;AAAA,UACA,YAAA,EAAc,CAAA,EAAG,OAAA,IAAW,SAAS,CAAA,MAAA,CAAA;AAAA,UACrC,OAAA,EAAS,MAAM,aAAA,CAAc,GAAgB;AAAA;AAAA;AAC/C,KAAA;AAAA,IAVG;AAAA,GAaR,CAAA,EACH,CAAA;AAEJ;;;;"}