@red-hat-developer-hub/backstage-plugin-intelligent-assistant 3.0.0

package/dist/components/notebooks/DocumentSidebar.esm.js

@@ -0,0 +1,235 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useState } from 'react';
+import { makeStyles, Typography } from '@material-ui/core';
+import { Tooltip, Button, Spinner, Dropdown, DropdownList, DropdownItem, MenuToggle } from '@patternfly/react-core';
+import { PlusCircleIcon, EllipsisVIcon } from '@patternfly/react-icons';
+import { NOTEBOOK_MAX_FILES } from '../../const.esm.js';
+import { useTranslation } from '../../hooks/useTranslation.esm.js';
+import { FileTypeIcon } from './FileTypeIcon.esm.js';
+import { SidebarCollapseIcon } from './SidebarCollapseIcon.esm.js';
+
+const useStyles = makeStyles((theme) => ({
+  sidebar: {
+    display: "flex",
+    flexDirection: "column",
+    width: "100%",
+    height: "100%",
+    padding: theme.spacing(2),
+    overflow: "hidden"
+  },
+  titleRow: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    marginBottom: theme.spacing(2),
+    gap: theme.spacing(1)
+  },
+  title: {
+    fontWeight: 500,
+    fontSize: "1.25rem",
+    lineHeight: "2rem",
+    letterSpacing: "-0.25px",
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    whiteSpace: "nowrap",
+    flex: 1,
+    minWidth: 0
+  },
+  collapseButton: {
+    flexShrink: 0
+  },
+  documentsRow: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between"
+  },
+  documentCount: {
+    fontWeight: 700,
+    fontSize: "1.125rem",
+    lineHeight: "2rem"
+  },
+  addButton: {
+    textTransform: "none"
+  },
+  documentsList: {
+    marginTop: theme.spacing(2),
+    display: "flex",
+    flexDirection: "column",
+    gap: theme.spacing(0.5),
+    overflowY: "auto",
+    flex: 1
+  },
+  documentItem: {
+    display: "flex",
+    alignItems: "center",
+    gap: theme.spacing(1),
+    padding: `${theme.spacing(1)}px ${theme.spacing(0.5)}px`,
+    borderRadius: 4
+  },
+  fileIcon: {
+    flexShrink: 0,
+    color: theme.palette.grey[500],
+    fontSize: "1rem"
+  },
+  fileName: {
+    flex: 1,
+    minWidth: 0,
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    whiteSpace: "nowrap",
+    fontSize: "0.875rem",
+    lineHeight: "1.25rem"
+  },
+  spinnerContainer: {
+    flexShrink: 0
+  },
+  kebabToggle: {
+    padding: 0,
+    flexShrink: 0
+  },
+  kebabDropdownMenu: {
+    "& .pf-v6-c-menu__list": {
+      paddingInlineStart: 0,
+      marginBlockStart: 0,
+      marginBlockEnd: 0
+    }
+  }
+}));
+const DocumentSidebar = ({
+  notebookName,
+  documents,
+  uploadingFileNames,
+  completedFileNames,
+  deletingDocumentIds,
+  collapsed,
+  hasUploadsInProgress,
+  onToggleCollapse,
+  onAddDocument,
+  onDeleteDocument
+}) => {
+  const classes = useStyles();
+  const { t } = useTranslation();
+  const [openMenuDocId, setOpenMenuDocId] = useState(null);
+  if (collapsed) {
+    return null;
+  }
+  const uploadedNames = new Set(documents.map((d) => d.title));
+  const activePending = uploadingFileNames.filter(
+    (name) => !uploadedNames.has(name)
+  );
+  const totalCount = documents.length + activePending.length;
+  const isAddDisabled = totalCount >= NOTEBOOK_MAX_FILES;
+  return /* @__PURE__ */ jsxs("div", { className: classes.sidebar, children: [
+    /* @__PURE__ */ jsxs("div", { className: classes.titleRow, children: [
+      /* @__PURE__ */ jsx(Typography, { className: classes.title, children: notebookName }),
+      /* @__PURE__ */ jsx(Tooltip, { content: t("notebook.view.sidebar.collapse"), position: "right", children: /* @__PURE__ */ jsx(
+        Button,
+        {
+          variant: "plain",
+          className: classes.collapseButton,
+          onClick: onToggleCollapse,
+          "aria-label": t("notebook.view.sidebar.collapse"),
+          children: /* @__PURE__ */ jsx(SidebarCollapseIcon, {})
+        }
+      ) })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: classes.documentsRow, children: [
+      /* @__PURE__ */ jsx(Typography, { className: classes.documentCount, children: t("notebook.view.documents.count", {
+        count: totalCount
+      }) }),
+      isAddDisabled ? /* @__PURE__ */ jsx(
+        Tooltip,
+        {
+          content: hasUploadsInProgress ? t("notebook.view.documents.uploadsInProgress") : t("notebook.view.documents.maxReached"),
+          position: "top",
+          children: /* @__PURE__ */ jsx(Typography, { component: "div", children: /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "link",
+              className: classes.addButton,
+              icon: /* @__PURE__ */ jsx(PlusCircleIcon, {}),
+              isDisabled: true,
+              children: t("notebook.view.documents.add")
+            }
+          ) })
+        }
+      ) : /* @__PURE__ */ jsx(
+        Button,
+        {
+          variant: "link",
+          className: classes.addButton,
+          icon: /* @__PURE__ */ jsx(PlusCircleIcon, {}),
+          onClick: onAddDocument,
+          children: t("notebook.view.documents.add")
+        }
+      )
+    ] }),
+    (documents.length > 0 || activePending.length > 0) && /* @__PURE__ */ jsxs("div", { className: classes.documentsList, children: [
+      documents.map((doc) => /* @__PURE__ */ jsxs("div", { className: classes.documentItem, children: [
+        /* @__PURE__ */ jsx(FileTypeIcon, { fileName: doc.title }),
+        /* @__PURE__ */ jsx(Typography, { className: classes.fileName, children: doc.title }),
+        deletingDocumentIds?.has(doc.document_id) ? /* @__PURE__ */ jsx("div", { className: classes.spinnerContainer, children: /* @__PURE__ */ jsx(
+          Spinner,
+          {
+            size: "md",
+            "aria-label": t("notebook.document.delete")
+          }
+        ) }) : /* @__PURE__ */ jsx(
+          Dropdown,
+          {
+            className: classes.kebabDropdownMenu,
+            isOpen: openMenuDocId === doc.document_id,
+            popperProps: {
+              position: "end",
+              preventOverflow: true
+            },
+            onOpenChange: (isOpen) => setOpenMenuDocId(isOpen ? doc.document_id : null),
+            toggle: (toggleRef) => /* @__PURE__ */ jsx(
+              MenuToggle,
+              {
+                ref: toggleRef,
+                variant: "plain",
+                className: classes.kebabToggle,
+                isExpanded: openMenuDocId === doc.document_id,
+                onClick: (event) => {
+                  event.stopPropagation();
+                  setOpenMenuDocId(
+                    (current) => current === doc.document_id ? null : doc.document_id
+                  );
+                },
+                "aria-label": t("notebook.document.delete"),
+                children: /* @__PURE__ */ jsx(EllipsisVIcon, {})
+              }
+            ),
+            children: /* @__PURE__ */ jsx(DropdownList, { children: /* @__PURE__ */ jsx(
+              DropdownItem,
+              {
+                onClick: (event) => {
+                  event.stopPropagation();
+                  setOpenMenuDocId(null);
+                  onDeleteDocument?.(doc.document_id);
+                },
+                children: t("notebook.document.delete")
+              },
+              "delete"
+            ) })
+          }
+        )
+      ] }, doc.document_id)),
+      activePending.map((fileName) => /* @__PURE__ */ jsxs("div", { className: classes.documentItem, children: [
+        /* @__PURE__ */ jsx(FileTypeIcon, { fileName }),
+        /* @__PURE__ */ jsx(Typography, { className: classes.fileName, children: fileName }),
+        !completedFileNames?.has(fileName) && /* @__PURE__ */ jsx("div", { className: classes.spinnerContainer, children: /* @__PURE__ */ jsx(
+          Spinner,
+          {
+            size: "md",
+            "aria-label": t("notebook.view.documents.uploading")
+          }
+        ) })
+      ] }, `pending-${fileName}`))
+    ] })
+  ] });
+};
+
+export { DocumentSidebar };
+//# sourceMappingURL=DocumentSidebar.esm.js.map

package/dist/components/notebooks/DocumentSidebar.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DocumentSidebar.esm.js","sources":["../../../src/components/notebooks/DocumentSidebar.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 { useState } from 'react';\n\nimport { makeStyles, Typography } from '@material-ui/core';\nimport {\n  Button,\n  Dropdown,\n  DropdownItem,\n  DropdownList,\n  MenuToggle,\n  Spinner,\n  Tooltip,\n} from '@patternfly/react-core';\nimport { EllipsisVIcon, PlusCircleIcon } from '@patternfly/react-icons';\n\nimport { NOTEBOOK_MAX_FILES } from '../../const';\nimport { useTranslation } from '../../hooks/useTranslation';\nimport { SessionDocument } from '../../types';\nimport { FileTypeIcon } from './FileTypeIcon';\nimport { SidebarCollapseIcon } from './SidebarCollapseIcon';\n\nconst useStyles = makeStyles(theme => ({\n  sidebar: {\n    display: 'flex',\n    flexDirection: 'column',\n    width: '100%',\n    height: '100%',\n    padding: theme.spacing(2),\n    overflow: 'hidden',\n  },\n  titleRow: {\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'space-between',\n    marginBottom: theme.spacing(2),\n    gap: theme.spacing(1),\n  },\n  title: {\n    fontWeight: 500,\n    fontSize: '1.25rem',\n    lineHeight: '2rem',\n    letterSpacing: '-0.25px',\n    overflow: 'hidden',\n    textOverflow: 'ellipsis',\n    whiteSpace: 'nowrap',\n    flex: 1,\n    minWidth: 0,\n  },\n  collapseButton: {\n    flexShrink: 0,\n  },\n  documentsRow: {\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'space-between',\n  },\n  documentCount: {\n    fontWeight: 700,\n    fontSize: '1.125rem',\n    lineHeight: '2rem',\n  },\n  addButton: {\n    textTransform: 'none',\n  },\n  documentsList: {\n    marginTop: theme.spacing(2),\n    display: 'flex',\n    flexDirection: 'column',\n    gap: theme.spacing(0.5),\n    overflowY: 'auto',\n    flex: 1,\n  },\n  documentItem: {\n    display: 'flex',\n    alignItems: 'center',\n    gap: theme.spacing(1),\n    padding: `${theme.spacing(1)}px ${theme.spacing(0.5)}px`,\n    borderRadius: 4,\n  },\n  fileIcon: {\n    flexShrink: 0,\n    color: theme.palette.grey[500],\n    fontSize: '1rem',\n  },\n  fileName: {\n    flex: 1,\n    minWidth: 0,\n    overflow: 'hidden',\n    textOverflow: 'ellipsis',\n    whiteSpace: 'nowrap',\n    fontSize: '0.875rem',\n    lineHeight: '1.25rem',\n  },\n  spinnerContainer: {\n    flexShrink: 0,\n  },\n  kebabToggle: {\n    padding: 0,\n    flexShrink: 0,\n  },\n  kebabDropdownMenu: {\n    '& .pf-v6-c-menu__list': {\n      paddingInlineStart: 0,\n      marginBlockStart: 0,\n      marginBlockEnd: 0,\n    },\n  },\n}));\n\ntype DocumentSidebarProps = {\n  notebookName: string;\n  documents: SessionDocument[];\n  uploadingFileNames: string[];\n  completedFileNames?: Set<string>;\n  deletingDocumentIds?: Set<string>;\n  collapsed: boolean;\n  hasUploadsInProgress?: boolean;\n  onToggleCollapse: () => void;\n  onAddDocument: () => void;\n  onDeleteDocument?: (documentId: string) => void;\n};\n\nexport const DocumentSidebar = ({\n  notebookName,\n  documents,\n  uploadingFileNames,\n  completedFileNames,\n  deletingDocumentIds,\n  collapsed,\n  hasUploadsInProgress,\n  onToggleCollapse,\n  onAddDocument,\n  onDeleteDocument,\n}: DocumentSidebarProps) => {\n  const classes = useStyles();\n  const { t } = useTranslation();\n  const [openMenuDocId, setOpenMenuDocId] = useState<string | null>(null);\n\n  if (collapsed) {\n    return null;\n  }\n\n  const uploadedNames = new Set(documents.map(d => d.title));\n  const activePending = uploadingFileNames.filter(\n    name => !uploadedNames.has(name),\n  );\n  const totalCount = documents.length + activePending.length;\n  const isAddDisabled = totalCount >= NOTEBOOK_MAX_FILES;\n\n  return (\n    <div className={classes.sidebar}>\n      <div className={classes.titleRow}>\n        <Typography className={classes.title}>{notebookName}</Typography>\n        <Tooltip content={t('notebook.view.sidebar.collapse')} position=\"right\">\n          <Button\n            variant=\"plain\"\n            className={classes.collapseButton}\n            onClick={onToggleCollapse}\n            aria-label={t('notebook.view.sidebar.collapse')}\n          >\n            <SidebarCollapseIcon />\n          </Button>\n        </Tooltip>\n      </div>\n\n      <div className={classes.documentsRow}>\n        <Typography className={classes.documentCount}>\n          {t('notebook.view.documents.count', {\n            count: totalCount,\n          } as any)}\n        </Typography>\n        {isAddDisabled ? (\n          <Tooltip\n            content={\n              hasUploadsInProgress\n                ? t('notebook.view.documents.uploadsInProgress')\n                : t('notebook.view.documents.maxReached')\n            }\n            position=\"top\"\n          >\n            <Typography component=\"div\">\n              <Button\n                variant=\"link\"\n                className={classes.addButton}\n                icon={<PlusCircleIcon />}\n                isDisabled\n              >\n                {t('notebook.view.documents.add')}\n              </Button>\n            </Typography>\n          </Tooltip>\n        ) : (\n          <Button\n            variant=\"link\"\n            className={classes.addButton}\n            icon={<PlusCircleIcon />}\n            onClick={onAddDocument}\n          >\n            {t('notebook.view.documents.add')}\n          </Button>\n        )}\n      </div>\n\n      {(documents.length > 0 || activePending.length > 0) && (\n        <div className={classes.documentsList}>\n          {documents.map(doc => (\n            <div key={doc.document_id} className={classes.documentItem}>\n              <FileTypeIcon fileName={doc.title} />\n              <Typography className={classes.fileName}>{doc.title}</Typography>\n              {deletingDocumentIds?.has(doc.document_id) ? (\n                <div className={classes.spinnerContainer}>\n                  <Spinner\n                    size=\"md\"\n                    aria-label={t('notebook.document.delete')}\n                  />\n                </div>\n              ) : (\n                <Dropdown\n                  className={classes.kebabDropdownMenu}\n                  isOpen={openMenuDocId === doc.document_id}\n                  popperProps={{\n                    position: 'end',\n                    preventOverflow: true,\n                  }}\n                  onOpenChange={isOpen =>\n                    setOpenMenuDocId(isOpen ? doc.document_id : null)\n                  }\n                  toggle={toggleRef => (\n                    <MenuToggle\n                      ref={toggleRef}\n                      variant=\"plain\"\n                      className={classes.kebabToggle}\n                      isExpanded={openMenuDocId === doc.document_id}\n                      onClick={event => {\n                        event.stopPropagation();\n                        setOpenMenuDocId(current =>\n                          current === doc.document_id ? null : doc.document_id,\n                        );\n                      }}\n                      aria-label={t('notebook.document.delete')}\n                    >\n                      <EllipsisVIcon />\n                    </MenuToggle>\n                  )}\n                >\n                  <DropdownList>\n                    <DropdownItem\n                      key=\"delete\"\n                      onClick={event => {\n                        event.stopPropagation();\n                        setOpenMenuDocId(null);\n                        onDeleteDocument?.(doc.document_id);\n                      }}\n                    >\n                      {t('notebook.document.delete')}\n                    </DropdownItem>\n                  </DropdownList>\n                </Dropdown>\n              )}\n            </div>\n          ))}\n          {activePending.map(fileName => (\n            <div key={`pending-${fileName}`} className={classes.documentItem}>\n              <FileTypeIcon fileName={fileName} />\n              <Typography className={classes.fileName}>{fileName}</Typography>\n              {!completedFileNames?.has(fileName) && (\n                <div className={classes.spinnerContainer}>\n                  <Spinner\n                    size=\"md\"\n                    aria-label={t('notebook.view.documents.uploading')}\n                  />\n                </div>\n              )}\n            </div>\n          ))}\n        </div>\n      )}\n    </div>\n  );\n};\n"],"names":[],"mappings":"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"}

package/dist/components/notebooks/FileListItem.esm.js

@@ -0,0 +1,94 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { makeStyles } from '@material-ui/core/styles';
+import CloseIcon from '@mui/icons-material/Close';
+import Box from '@mui/material/Box';
+import IconButton from '@mui/material/IconButton';
+import Typography from '@mui/material/Typography';
+import { FileTypeIcon } from './FileTypeIcon.esm.js';
+
+const useStyles = makeStyles((theme) => ({
+  container: {
+    display: "flex",
+    alignItems: "center",
+    padding: "8px 12px",
+    borderRadius: 8,
+    backgroundColor: theme.palette.type === "dark" ? "#2a2a2a" : "#f5f5f5",
+    marginBottom: 8,
+    "&:last-child": {
+      marginBottom: 0
+    }
+  },
+  fileInfo: {
+    display: "flex",
+    alignItems: "center",
+    flex: 1,
+    minWidth: 0,
+    gap: 12
+  },
+  fileName: {
+    flex: 1,
+    minWidth: 0,
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    whiteSpace: "nowrap",
+    fontSize: "0.875rem"
+  },
+  fileSize: {
+    color: theme.palette.text.secondary,
+    fontSize: "0.75rem",
+    flexShrink: 0,
+    marginRight: 8
+  },
+  removeButton: {
+    padding: 4,
+    color: theme.palette.action.active,
+    "&:hover": {
+      color: theme.palette.error.main
+    }
+  }
+}));
+const formatFileSize = (bytes) => {
+  if (bytes === 0) return "0 B";
+  const k = 1024;
+  const sizes = ["B", "KB", "MB", "GB"];
+  const i = Math.floor(Math.log(bytes) / Math.log(k));
+  return `${parseFloat((bytes / Math.pow(k, i)).toFixed(1))} ${sizes[i]}`;
+};
+const MAX_FILENAME_LENGTH = 30;
+const truncateFileName = (fileName, maxLength) => {
+  if (fileName.length <= maxLength) return fileName;
+  const lastDot = fileName.lastIndexOf(".");
+  const extension = lastDot >= 0 ? fileName.slice(lastDot) : "";
+  const baseName = lastDot >= 0 ? fileName.slice(0, lastDot) : fileName;
+  const availableLength = maxLength - extension.length - 3;
+  if (availableLength <= 0) return fileName;
+  return `${baseName.slice(0, availableLength)}...${extension}`;
+};
+const FileListItem = ({
+  file,
+  onRemove,
+  removeAriaLabel = "Remove file"
+}) => {
+  const classes = useStyles();
+  const displayName = truncateFileName(file.name, MAX_FILENAME_LENGTH);
+  return /* @__PURE__ */ jsxs(Box, { className: classes.container, children: [
+    /* @__PURE__ */ jsxs(Box, { className: classes.fileInfo, children: [
+      /* @__PURE__ */ jsx(FileTypeIcon, { fileName: file.name }),
+      /* @__PURE__ */ jsx(Typography, { className: classes.fileName, title: file.name, children: displayName })
+    ] }),
+    /* @__PURE__ */ jsx(Typography, { className: classes.fileSize, children: formatFileSize(file.size) }),
+    /* @__PURE__ */ jsx(
+      IconButton,
+      {
+        className: classes.removeButton,
+        onClick: onRemove,
+        "aria-label": removeAriaLabel,
+        size: "small",
+        children: /* @__PURE__ */ jsx(CloseIcon, { fontSize: "small" })
+      }
+    )
+  ] });
+};
+
+export { FileListItem };
+//# sourceMappingURL=FileListItem.esm.js.map

package/dist/components/notebooks/FileListItem.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FileListItem.esm.js","sources":["../../../src/components/notebooks/FileListItem.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/styles';\nimport CloseIcon from '@mui/icons-material/Close';\nimport Box from '@mui/material/Box';\nimport IconButton from '@mui/material/IconButton';\nimport Typography from '@mui/material/Typography';\n\nimport { FileTypeIcon } from './FileTypeIcon';\n\nconst useStyles = makeStyles(theme => ({\n  container: {\n    display: 'flex',\n    alignItems: 'center',\n    padding: '8px 12px',\n    borderRadius: 8,\n    backgroundColor: theme.palette.type === 'dark' ? '#2a2a2a' : '#f5f5f5',\n    marginBottom: 8,\n    '&:last-child': {\n      marginBottom: 0,\n    },\n  },\n  fileInfo: {\n    display: 'flex',\n    alignItems: 'center',\n    flex: 1,\n    minWidth: 0,\n    gap: 12,\n  },\n  fileName: {\n    flex: 1,\n    minWidth: 0,\n    overflow: 'hidden',\n    textOverflow: 'ellipsis',\n    whiteSpace: 'nowrap',\n    fontSize: '0.875rem',\n  },\n  fileSize: {\n    color: theme.palette.text.secondary,\n    fontSize: '0.75rem',\n    flexShrink: 0,\n    marginRight: 8,\n  },\n  removeButton: {\n    padding: 4,\n    color: theme.palette.action.active,\n    '&:hover': {\n      color: theme.palette.error.main,\n    },\n  },\n}));\n\ntype FileListItemProps = {\n  file: File;\n  onRemove: () => void;\n  removeAriaLabel?: string;\n};\n\nconst formatFileSize = (bytes: number): string => {\n  if (bytes === 0) return '0 B';\n  const k = 1024;\n  const sizes = ['B', 'KB', 'MB', 'GB'];\n  const i = Math.floor(Math.log(bytes) / Math.log(k));\n  return `${parseFloat((bytes / Math.pow(k, i)).toFixed(1))} ${sizes[i]}`;\n};\n\nconst MAX_FILENAME_LENGTH = 30;\n\nconst truncateFileName = (fileName: string, maxLength: number): string => {\n  if (fileName.length <= maxLength) return fileName;\n\n  const lastDot = fileName.lastIndexOf('.');\n  const extension = lastDot >= 0 ? fileName.slice(lastDot) : '';\n  const baseName = lastDot >= 0 ? fileName.slice(0, lastDot) : fileName;\n\n  const availableLength = maxLength - extension.length - 3;\n  if (availableLength <= 0) return fileName;\n\n  return `${baseName.slice(0, availableLength)}...${extension}`;\n};\n\nexport const FileListItem = ({\n  file,\n  onRemove,\n  removeAriaLabel = 'Remove file',\n}: FileListItemProps) => {\n  const classes = useStyles();\n  const displayName = truncateFileName(file.name, MAX_FILENAME_LENGTH);\n\n  return (\n    <Box className={classes.container}>\n      <Box className={classes.fileInfo}>\n        <FileTypeIcon fileName={file.name} />\n        <Typography className={classes.fileName} title={file.name}>\n          {displayName}\n        </Typography>\n      </Box>\n      <Typography className={classes.fileSize}>\n        {formatFileSize(file.size)}\n      </Typography>\n      <IconButton\n        className={classes.removeButton}\n        onClick={onRemove}\n        aria-label={removeAriaLabel}\n        size=\"small\"\n      >\n        <CloseIcon fontSize=\"small\" />\n      </IconButton>\n    </Box>\n  );\n};\n"],"names":[],"mappings":"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"}

package/dist/components/notebooks/FileTypeIcon.esm.js

@@ -0,0 +1,59 @@
+import { jsx } from 'react/jsx-runtime';
+import { makeStyles } from '@material-ui/core';
+
+const FILE_TYPE_COLORS = {
+  pdf: "#C9190B",
+  yaml: "#F0AB00",
+  yml: "#F0AB00",
+  json: "#F0AB00",
+  csv: "#3E8635",
+  txt: "#6A6E73",
+  md: "#0066CC",
+  log: "#6A6E73",
+  docx: "#004B95",
+  odt: "#009596",
+  html: "#EC7A08",
+  xml: "#0066CC",
+  rtf: "#8476D1",
+  pptx: "#C9190B"
+};
+const DEFAULT_COLOR = "#6A6E73";
+const useStyles = makeStyles(() => ({
+  badge: {
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    minWidth: 28,
+    height: 22,
+    padding: "0 4px",
+    borderRadius: 4,
+    border: "1.5px solid",
+    fontSize: "0.625rem",
+    fontWeight: 700,
+    textTransform: "uppercase",
+    lineHeight: 1,
+    flexShrink: 0
+  }
+}));
+const getExtension = (fileName) => {
+  if (!fileName) return "";
+  const lastDot = fileName.lastIndexOf(".");
+  return lastDot >= 0 ? fileName.slice(lastDot + 1).toLowerCase() : "";
+};
+const FileTypeIcon = ({ fileName, className }) => {
+  const classes = useStyles();
+  const ext = getExtension(fileName);
+  const color = FILE_TYPE_COLORS[ext] ?? DEFAULT_COLOR;
+  const label = ext || "?";
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: `${classes.badge}${className ? ` ${className}` : ""}`,
+      style: { borderColor: color, color },
+      children: label
+    }
+  );
+};
+
+export { FileTypeIcon };
+//# sourceMappingURL=FileTypeIcon.esm.js.map

package/dist/components/notebooks/FileTypeIcon.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FileTypeIcon.esm.js","sources":["../../../src/components/notebooks/FileTypeIcon.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';\n\nconst FILE_TYPE_COLORS: Record<string, string> = {\n  pdf: '#C9190B',\n  yaml: '#F0AB00',\n  yml: '#F0AB00',\n  json: '#F0AB00',\n  csv: '#3E8635',\n  txt: '#6A6E73',\n  md: '#0066CC',\n  log: '#6A6E73',\n  docx: '#004B95',\n  odt: '#009596',\n  html: '#EC7A08',\n  xml: '#0066CC',\n  rtf: '#8476D1',\n  pptx: '#C9190B',\n};\n\nconst DEFAULT_COLOR = '#6A6E73';\n\nconst useStyles = makeStyles(() => ({\n  badge: {\n    display: 'inline-flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    minWidth: 28,\n    height: 22,\n    padding: '0 4px',\n    borderRadius: 4,\n    border: '1.5px solid',\n    fontSize: '0.625rem',\n    fontWeight: 700,\n    textTransform: 'uppercase',\n    lineHeight: 1,\n    flexShrink: 0,\n  },\n}));\n\ntype FileTypeIconProps = {\n  fileName: string;\n  className?: string;\n};\n\nconst getExtension = (fileName: string): string => {\n  if (!fileName) return '';\n  const lastDot = fileName.lastIndexOf('.');\n  return lastDot >= 0 ? fileName.slice(lastDot + 1).toLowerCase() : '';\n};\n\nexport const FileTypeIcon = ({ fileName, className }: FileTypeIconProps) => {\n  const classes = useStyles();\n  const ext = getExtension(fileName);\n  const color = FILE_TYPE_COLORS[ext] ?? DEFAULT_COLOR;\n  const label = ext || '?';\n\n  return (\n    <span\n      className={`${classes.badge}${className ? ` ${className}` : ''}`}\n      style={{ borderColor: color, color }}\n    >\n      {label}\n    </span>\n  );\n};\n"],"names":[],"mappings":";;;AAkBA,MAAM,gBAAA,GAA2C;AAAA,EAC/C,GAAA,EAAK,SAAA;AAAA,EACL,IAAA,EAAM,SAAA;AAAA,EACN,GAAA,EAAK,SAAA;AAAA,EACL,IAAA,EAAM,SAAA;AAAA,EACN,GAAA,EAAK,SAAA;AAAA,EACL,GAAA,EAAK,SAAA;AAAA,EACL,EAAA,EAAI,SAAA;AAAA,EACJ,GAAA,EAAK,SAAA;AAAA,EACL,IAAA,EAAM,SAAA;AAAA,EACN,GAAA,EAAK,SAAA;AAAA,EACL,IAAA,EAAM,SAAA;AAAA,EACN,GAAA,EAAK,SAAA;AAAA,EACL,GAAA,EAAK,SAAA;AAAA,EACL,IAAA,EAAM;AACR,CAAA;AAEA,MAAM,aAAA,GAAgB,SAAA;AAEtB,MAAM,SAAA,GAAY,WAAW,OAAO;AAAA,EAClC,KAAA,EAAO;AAAA,IACL,OAAA,EAAS,aAAA;AAAA,IACT,UAAA,EAAY,QAAA;AAAA,IACZ,cAAA,EAAgB,QAAA;AAAA,IAChB,QAAA,EAAU,EAAA;AAAA,IACV,MAAA,EAAQ,EAAA;AAAA,IACR,OAAA,EAAS,OAAA;AAAA,IACT,YAAA,EAAc,CAAA;AAAA,IACd,MAAA,EAAQ,aAAA;AAAA,IACR,QAAA,EAAU,UAAA;AAAA,IACV,UAAA,EAAY,GAAA;AAAA,IACZ,aAAA,EAAe,WAAA;AAAA,IACf,UAAA,EAAY,CAAA;AAAA,IACZ,UAAA,EAAY;AAAA;AAEhB,CAAA,CAAE,CAAA;AAOF,MAAM,YAAA,GAAe,CAAC,QAAA,KAA6B;AACjD,EAAA,IAAI,CAAC,UAAU,OAAO,EAAA;AACtB,EAAA,MAAM,OAAA,GAAU,QAAA,CAAS,WAAA,CAAY,GAAG,CAAA;AACxC,EAAA,OAAO,OAAA,IAAW,IAAI,QAAA,CAAS,KAAA,CAAM,UAAU,CAAC,CAAA,CAAE,aAAY,GAAI,EAAA;AACpE,CAAA;AAEO,MAAM,YAAA,GAAe,CAAC,EAAE,QAAA,EAAU,WAAU,KAAyB;AAC1E,EAAA,MAAM,UAAU,SAAA,EAAU;AAC1B,EAAA,MAAM,GAAA,GAAM,aAAa,QAAQ,CAAA;AACjC,EAAA,MAAM,KAAA,GAAQ,gBAAA,CAAiB,GAAG,CAAA,IAAK,aAAA;AACvC,EAAA,MAAM,QAAQ,GAAA,IAAO,GAAA;AAErB,EAAA,uBACE,GAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,GAAG,OAAA,CAAQ,KAAK,GAAG,SAAA,GAAY,CAAA,CAAA,EAAI,SAAS,CAAA,CAAA,GAAK,EAAE,CAAA,CAAA;AAAA,MAC9D,KAAA,EAAO,EAAE,WAAA,EAAa,KAAA,EAAO,KAAA,EAAM;AAAA,MAElC,QAAA,EAAA;AAAA;AAAA,GACH;AAEJ;;;;"}

package/dist/components/notebooks/NotebookCard.esm.js

@@ -0,0 +1,118 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import Typography from '@mui/material/Typography';
+import { Card, CardHeader, CardTitle, Dropdown, DropdownList, DropdownItem, MenuToggle, CardBody } from '@patternfly/react-core';
+import { EllipsisVIcon } from '@patternfly/react-icons';
+import { CatalogIcon } from '@patternfly/react-icons/dist/esm/icons';
+import { formatUpdatedLabel } from '../../utils/notebooks-utils.esm.js';
+
+const NotebookCard = ({
+  notebook,
+  classes,
+  openNotebookMenuId,
+  setOpenNotebookMenuId,
+  onClick,
+  onRename,
+  onDelete,
+  t
+}) => {
+  const isMenuOpen = openNotebookMenuId === notebook.session_id;
+  const handleCardKeyDown = (e) => {
+    if (e.key === "Enter" || e.key === " ") {
+      e.preventDefault();
+      onClick(notebook);
+    }
+  };
+  return /* @__PURE__ */ jsxs(
+    Card,
+    {
+      className: classes.notebookCard,
+      component: "div",
+      tabIndex: 0,
+      "aria-label": t("notebooks.card.openAria", { name: notebook.name }),
+      onClick: () => onClick(notebook),
+      onKeyDown: handleCardKeyDown,
+      children: [
+        /* @__PURE__ */ jsx(
+          CardHeader,
+          {
+            className: classes.notebookCardHeader,
+            actions: {
+              actions: /* @__PURE__ */ jsx(
+                Dropdown,
+                {
+                  className: classes.notebookDropdownMenu,
+                  isOpen: isMenuOpen,
+                  popperProps: {
+                    position: "end",
+                    preventOverflow: true
+                  },
+                  onOpenChange: (isOpen) => setOpenNotebookMenuId(isOpen ? notebook.session_id : null),
+                  toggle: (toggleRef) => /* @__PURE__ */ jsx(
+                    MenuToggle,
+                    {
+                      ref: toggleRef,
+                      variant: "plain",
+                      className: classes.notebookMenuButton,
+                      "aria-label": t("aria.options.label"),
+                      isExpanded: isMenuOpen,
+                      onClick: (event) => {
+                        event.stopPropagation();
+                        setOpenNotebookMenuId(
+                          (current) => current === notebook.session_id ? null : notebook.session_id
+                        );
+                      },
+                      children: /* @__PURE__ */ jsx(EllipsisVIcon, {})
+                    }
+                  ),
+                  children: /* @__PURE__ */ jsxs(DropdownList, { className: classes.notebookDropdownList, children: [
+                    /* @__PURE__ */ jsx(
+                      DropdownItem,
+                      {
+                        className: classes.notebookDropdownItem,
+                        onClick: (event) => {
+                          event.stopPropagation();
+                          onRename(notebook.session_id);
+                          setOpenNotebookMenuId(null);
+                        },
+                        children: t("notebooks.actions.rename")
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      DropdownItem,
+                      {
+                        className: classes.notebookDropdownItem,
+                        onClick: (event) => {
+                          event.stopPropagation();
+                          onDelete(notebook.session_id);
+                          setOpenNotebookMenuId(null);
+                        },
+                        children: t("notebooks.actions.delete")
+                      }
+                    )
+                  ] })
+                }
+              ),
+              className: classes.notebookCardHeaderActions
+            },
+            children: /* @__PURE__ */ jsxs(CardTitle, { className: classes.notebookTitle, children: [
+              /* @__PURE__ */ jsx(CatalogIcon, {}),
+              /* @__PURE__ */ jsx(Typography, { component: "span", className: classes.notebookTitleText, children: notebook.name })
+            ] })
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { className: classes.notebookCardDivider }),
+        /* @__PURE__ */ jsx(CardBody, { className: classes.notebookCardBody, children: /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx("div", { className: classes.notebookDocuments, children: /* @__PURE__ */ jsxs(Typography, { variant: "body2", children: [
+            notebook.document_count ?? 0,
+            " ",
+            t("notebooks.documents")
+          ] }) }),
+          /* @__PURE__ */ jsx("div", { className: classes.notebookUpdated, children: /* @__PURE__ */ jsx(Typography, { variant: "caption", children: formatUpdatedLabel(notebook.updated_at, t) }) })
+        ] }) })
+      ]
+    }
+  );
+};
+
+export { NotebookCard };
+//# sourceMappingURL=NotebookCard.esm.js.map

package/dist/components/notebooks/NotebookCard.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NotebookCard.esm.js","sources":["../../../src/components/notebooks/NotebookCard.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 type { TranslationFunction } from '@backstage/core-plugin-api/alpha';\n\nimport Typography from '@mui/material/Typography';\nimport {\n  Card,\n  CardBody,\n  CardHeader,\n  CardTitle,\n  Dropdown,\n  DropdownItem,\n  DropdownList,\n  MenuToggle,\n} from '@patternfly/react-core';\nimport { EllipsisVIcon } from '@patternfly/react-icons';\nimport { CatalogIcon } from '@patternfly/react-icons/dist/esm/icons';\n\nimport { intelligentAssistantTranslationRef } from '../../translations/ref';\nimport { NotebookSession } from '../../types';\nimport { formatUpdatedLabel } from '../../utils/notebooks-utils';\n\ntype NotebookCardProps = {\n  notebook: NotebookSession;\n  classes: Record<string, string>;\n  openNotebookMenuId: string | null;\n  setOpenNotebookMenuId: React.Dispatch<React.SetStateAction<string | null>>;\n  onClick: (notebook: NotebookSession) => void;\n  onRename: (sessionId: string) => void;\n  onDelete: (sessionId: string) => void;\n  t: TranslationFunction<typeof intelligentAssistantTranslationRef.T>;\n};\n\nexport const NotebookCard = ({\n  notebook,\n  classes,\n  openNotebookMenuId,\n  setOpenNotebookMenuId,\n  onClick,\n  onRename,\n  onDelete,\n  t,\n}: NotebookCardProps) => {\n  const isMenuOpen = openNotebookMenuId === notebook.session_id;\n\n  const handleCardKeyDown = (e: React.KeyboardEvent) => {\n    if (e.key === 'Enter' || e.key === ' ') {\n      e.preventDefault();\n      onClick(notebook);\n    }\n  };\n\n  return (\n    <Card\n      className={classes.notebookCard}\n      component=\"div\"\n      tabIndex={0}\n      aria-label={t('notebooks.card.openAria' as any, { name: notebook.name })}\n      onClick={() => onClick(notebook)}\n      onKeyDown={handleCardKeyDown}\n    >\n      <CardHeader\n        className={classes.notebookCardHeader}\n        actions={{\n          actions: (\n            <Dropdown\n              className={classes.notebookDropdownMenu}\n              isOpen={isMenuOpen}\n              popperProps={{\n                position: 'end',\n                preventOverflow: true,\n              }}\n              onOpenChange={isOpen =>\n                setOpenNotebookMenuId(isOpen ? notebook.session_id : null)\n              }\n              toggle={toggleRef => (\n                <MenuToggle\n                  ref={toggleRef}\n                  variant=\"plain\"\n                  className={classes.notebookMenuButton}\n                  aria-label={t('aria.options.label')}\n                  isExpanded={isMenuOpen}\n                  onClick={event => {\n                    event.stopPropagation();\n                    setOpenNotebookMenuId(current =>\n                      current === notebook.session_id\n                        ? null\n                        : notebook.session_id,\n                    );\n                  }}\n                >\n                  <EllipsisVIcon />\n                </MenuToggle>\n              )}\n            >\n              <DropdownList className={classes.notebookDropdownList}>\n                <DropdownItem\n                  className={classes.notebookDropdownItem}\n                  onClick={event => {\n                    event.stopPropagation();\n                    onRename(notebook.session_id);\n                    setOpenNotebookMenuId(null);\n                  }}\n                >\n                  {t('notebooks.actions.rename')}\n                </DropdownItem>\n                <DropdownItem\n                  className={classes.notebookDropdownItem}\n                  onClick={event => {\n                    event.stopPropagation();\n                    onDelete(notebook.session_id);\n                    setOpenNotebookMenuId(null);\n                  }}\n                >\n                  {t('notebooks.actions.delete')}\n                </DropdownItem>\n              </DropdownList>\n            </Dropdown>\n          ),\n          className: classes.notebookCardHeaderActions,\n        }}\n      >\n        <CardTitle className={classes.notebookTitle}>\n          <CatalogIcon />\n          <Typography component=\"span\" className={classes.notebookTitleText}>\n            {notebook.name}\n          </Typography>\n        </CardTitle>\n      </CardHeader>\n      <div className={classes.notebookCardDivider} />\n      <CardBody className={classes.notebookCardBody}>\n        <div>\n          <div className={classes.notebookDocuments}>\n            <Typography variant=\"body2\">\n              {notebook.document_count ?? 0} {t('notebooks.documents')}\n            </Typography>\n          </div>\n          <div className={classes.notebookUpdated}>\n            <Typography variant=\"caption\">\n              {formatUpdatedLabel(notebook.updated_at, t)}\n            </Typography>\n          </div>\n        </div>\n      </CardBody>\n    </Card>\n  );\n};\n"],"names":[],"mappings":"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"}