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

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

@@ -1,10 +1,10 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { useState, useCallback, useEffect, useRef } from 'react';
 import { useApi, configApiRef } from '@backstage/core-plugin-api';
-import { makeStyles, Typography } from '@material-ui/core';
-import { useTheme } from '@material-ui/core/styles';
-import { ChatbotFooter, MessageBar, ChatbotContent } from '@patternfly/chatbot';
-import { DrawerPanelContent, Drawer, DrawerContent, DrawerContentBody, Tooltip, Button, Alert } from '@patternfly/react-core';
+import { styled, useTheme } from '@mui/material/styles';
+import Typography from '@mui/material/Typography';
+import { ChatbotContent, ChatbotFooter, MessageBar } from '@patternfly/chatbot';
+import { Drawer, DrawerContent, DrawerContentBody, Button, DrawerPanelContent, Tooltip, Alert } from '@patternfly/react-core';
 import { TimesIcon, PlusIcon } from '@patternfly/react-icons';
 import { useQueryClient } from '@tanstack/react-query';
 import { notebooksApiRef } from '../../api/notebooksApi.esm.js';
@@ -33,176 +33,152 @@ import { OverwriteConfirmModal } from './OverwriteConfirmModal.esm.js';
 import { SidebarExpandIcon, AddCircleFilledIcon } from './SidebarCollapseIcon.esm.js';
 import { UploadResourceScreen } from './UploadResourceScreen.esm.js';
 
-const useStyles = makeStyles((theme) => ({
-  root: {
-    display: "flex",
-    flexDirection: "column",
-    flex: 1,
-    minHeight: 0,
-    minWidth: 0,
-    width: "100%",
-    overflow: "hidden",
-    backgroundColor: "var(--pf-t--global--background--color--floating--default)"
-  },
-  drawerContent: {
-    display: "flex",
-    flexDirection: "column",
-    overflow: "hidden"
-  },
-  drawerContainer: {
-    flex: 1,
-    minHeight: 0,
-    minWidth: 0,
-    "& .pf-v6-c-drawer__panel, & .pf-v5-c-drawer__panel": {
-      backgroundColor: "var(--pf-t--global--background--color--floating--default)"
-    }
-  },
-  expandStrip: {
-    display: "flex",
-    flexDirection: "column",
-    alignItems: "center",
-    paddingTop: theme.spacing(1.5),
-    gap: theme.spacing(1),
-    borderRight: "1px solid var(--pf-t--global--border--color--default)",
-    backgroundColor: "var(--pf-t--global--background--color--floating--default)"
-  },
-  addIconButton: {
-    padding: 0,
-    minWidth: 0,
-    lineHeight: 1
-  },
-  mainArea: {
-    display: "flex",
-    flexDirection: "row",
-    flex: 1,
-    minHeight: 0,
-    minWidth: 0
-  },
-  topBar: {
-    display: "flex",
-    justifyContent: "flex-end",
-    padding: `${theme.spacing(1.5)}px ${theme.spacing(2)}px`,
-    backgroundColor: "var(--pf-t--global--background--color--floating--default)"
-  },
-  closeButton: {
-    textTransform: "none"
-  },
-  mainContent: {
-    display: "flex",
-    flexDirection: "column",
-    flex: 1,
-    minHeight: 0,
-    minWidth: 0
-  },
-  drawerContentBody: {
-    backgroundColor: "var(--pf-t--global--background--color--floating--default)",
-    display: "flex",
-    flexDirection: "column",
-    flex: 1,
-    minHeight: 0,
-    minWidth: 0
-  },
-  contentColumn: {
-    display: "flex",
-    flexDirection: "column",
-    flex: 1,
-    minWidth: 0,
-    minHeight: 0,
-    overflow: "hidden"
-  },
-  notebookDisclaimerStrip: {
-    width: "100%",
-    maxWidth: "unset",
-    margin: 0,
-    padding: `0 0 ${theme.spacing(1)}px`,
-    boxSizing: "border-box",
-    backgroundColor: "var(--pf-t--global--background--color--floating--default)"
-  },
-  notebookDisclaimerInner: {
-    width: "95%",
-    maxWidth: "unset",
-    margin: "0 auto"
-  },
-  welcomeContainer: {
-    display: "flex",
-    flexDirection: "column",
-    flex: 1,
-    minHeight: 0,
-    overflow: "auto",
-    backgroundColor: "var(--pf-t--global--background--color--floating--default)"
-  },
-  notebookEmptyUpload: {
-    flex: 1,
-    display: "flex",
-    flexDirection: "column",
-    minHeight: 0,
-    minWidth: 0,
-    backgroundColor: "var(--pf-t--global--background--color--floating--default)"
-  },
-  notebookContentArea: {
-    width: "95%",
-    maxWidth: "unset",
-    margin: `${theme.spacing(3)}px auto 0 auto`,
-    padding: 0
-  },
-  notebookHeading: {
-    fontSize: "2rem",
-    fontWeight: 500,
-    lineHeight: 1.25,
-    padding: `${theme.spacing(1)}px 0`
-  },
-  notebookSummary: {
-    fontSize: "1rem",
-    lineHeight: 2,
-    color: "var(--pf-t--global--text--color--regular)",
-    paddingTop: theme.spacing(0.5)
-  },
-  promptSuggestions: {
-    display: "flex",
-    flexWrap: "wrap",
-    gap: theme.spacing(1),
-    width: "95%",
-    maxWidth: "unset",
-    margin: `${theme.spacing(3)}px auto ${theme.spacing(3)}px auto`,
-    justifyContent: "flex-start"
-  },
-  promptPill: {
-    appearance: "none",
-    background: "transparent",
-    border: `1px solid var(--pf-t--global--border--color--default)`,
-    borderRadius: "999px",
-    padding: `${theme.spacing(1)}px ${theme.spacing(2.5)}px`,
-    fontSize: "0.875rem",
-    color: "var(--pf-t--global--text--color--regular)",
-    cursor: "pointer",
-    transition: "background-color 0.15s, border-color 0.15s",
-    "&:hover": {
-      backgroundColor: "var(--pf-t--global--background--color--secondary--default)",
-      borderColor: "var(--pf-t--global--border--color--hover)"
-    }
-  },
-  footer: {
-    backgroundColor: "var(--pf-t--global--background--color--floating--default) !important",
-    "&>.pf-chatbot__footer-container": {
-      width: "95% !important",
-      maxWidth: "unset !important"
-    },
-    "& .pf-chatbot__message-bar": {
-      backgroundColor: theme.palette.type === "light" ? theme.palette.grey[100] : "var(--pf-t--global--background--color--secondary--default)"
-    }
+const floatingBg = "var(--pf-t--global--background--color--floating--default)";
+const Root = styled("div")({
+  display: "flex",
+  flexDirection: "column",
+  flex: 1,
+  minHeight: 0,
+  minWidth: 0,
+  width: "100%",
+  overflow: "hidden",
+  backgroundColor: floatingBg
+});
+const StyledDrawer = styled(Drawer)({
+  flex: 1,
+  minHeight: 0,
+  minWidth: 0,
+  "& .pf-v6-c-drawer__panel, & .pf-v5-c-drawer__panel": {
+    backgroundColor: floatingBg
+  }
+});
+const StyledDrawerContent = styled(DrawerContent)({
+  display: "flex",
+  flexDirection: "column",
+  overflow: "hidden"
+});
+const StyledDrawerContentBody = styled(DrawerContentBody)({
+  backgroundColor: floatingBg,
+  display: "flex",
+  flexDirection: "column",
+  flex: 1,
+  minHeight: 0,
+  minWidth: 0
+});
+const MainArea = styled("div")({
+  display: "flex",
+  flexDirection: "row",
+  flex: 1,
+  minHeight: 0,
+  minWidth: 0
+});
+const AddIconButton = styled(Button)({
+  padding: 0,
+  minWidth: 0,
+  lineHeight: 1
+});
+const ExpandStrip = styled("div")(({ theme }) => ({
+  display: "flex",
+  flexDirection: "column",
+  alignItems: "center",
+  paddingTop: theme.spacing(1.5),
+  gap: theme.spacing(1),
+  borderRight: "1px solid var(--pf-t--global--border--color--default)",
+  backgroundColor: floatingBg
+}));
+const ContentColumn = styled("div")({
+  display: "flex",
+  flexDirection: "column",
+  flex: 1,
+  minWidth: 0,
+  minHeight: 0,
+  overflow: "hidden"
+});
+const TopBar = styled("div")(({ theme }) => ({
+  display: "flex",
+  justifyContent: "flex-end",
+  padding: `${theme.spacing(1.5)} ${theme.spacing(2)}`,
+  backgroundColor: floatingBg
+}));
+const MainContent = styled("div")({
+  display: "flex",
+  flexDirection: "column",
+  flex: 1,
+  minHeight: 0,
+  minWidth: 0
+});
+const DisclaimerStrip = styled("div")(({ theme }) => ({
+  width: "100%",
+  maxWidth: "unset",
+  margin: 0,
+  padding: `0 0 ${theme.spacing(1)}`,
+  boxSizing: "border-box",
+  backgroundColor: floatingBg
+}));
+const DisclaimerInner = styled("div")({
+  width: "95%",
+  maxWidth: "unset",
+  margin: "0 auto"
+});
+const WelcomeContainer = styled("div")({
+  display: "flex",
+  flexDirection: "column",
+  flex: 1,
+  minHeight: 0,
+  overflow: "auto",
+  backgroundColor: floatingBg
+});
+const NotebookContentArea = styled("div")(({ theme }) => ({
+  width: "95%",
+  maxWidth: "unset",
+  margin: `${theme.spacing(3)} auto 0 auto`,
+  padding: 0
+}));
+const PromptSuggestions = styled("div")(({ theme }) => ({
+  display: "flex",
+  flexWrap: "wrap",
+  gap: theme.spacing(1),
+  width: "95%",
+  maxWidth: "unset",
+  margin: `${theme.spacing(3)} auto ${theme.spacing(3)} auto`,
+  justifyContent: "flex-start"
+}));
+const PromptPill = styled("button")(({ theme }) => ({
+  appearance: "none",
+  background: "transparent",
+  border: "1px solid var(--pf-t--global--border--color--default)",
+  borderRadius: "999px",
+  padding: `${theme.spacing(1)} ${theme.spacing(2.5)}`,
+  fontSize: "0.875rem",
+  color: "var(--pf-t--global--text--color--regular)",
+  cursor: "pointer",
+  transition: "background-color 0.15s, border-color 0.15s",
+  "&:hover": {
+    backgroundColor: "var(--pf-t--global--background--color--secondary--default)",
+    borderColor: "var(--pf-t--global--border--color--hover)"
+  }
+}));
+const StyledChatbotContent = styled(ChatbotContent)({
+  minHeight: 0,
+  display: "flex",
+  flexDirection: "column",
+  flex: 1,
+  overflow: "auto",
+  backgroundColor: floatingBg,
+  "& .pf-chatbot__message-contents": {
+    overflowX: "hidden",
+    overflowWrap: "break-word",
+    wordBreak: "break-word"
+  }
+});
+const StyledChatbotFooter = styled(ChatbotFooter)(({ theme }) => ({
+  backgroundColor: `${floatingBg} !important`,
+  "&>.pf-chatbot__footer-container": {
+    width: "95% !important",
+    maxWidth: "unset !important"
   },
-  chatContent: {
-    minHeight: 0,
-    display: "flex",
-    flexDirection: "column",
-    flex: 1,
-    overflow: "auto",
-    backgroundColor: "var(--pf-t--global--background--color--floating--default)",
-    "& .pf-chatbot__message-contents": {
-      overflowX: "hidden",
-      overflowWrap: "break-word",
-      wordBreak: "break-word"
-    }
+  "& .pf-chatbot__message-bar": {
+    backgroundColor: theme.palette.mode === "light" ? theme.palette.grey[100] : "var(--pf-t--global--background--color--secondary--default)"
   }
 }));
 const NotebookView = ({
@@ -224,9 +200,8 @@ const NotebookView = ({
   onUploadModalOpenChange,
   onUploadsInProgressChange
 }) => {
-  const classes = useStyles();
   const theme = useTheme();
-  const botAvatar = theme.palette.type === "dark" ? botAvatarDark : botAvatarLight;
+  const botAvatar = theme.palette.mode === "dark" ? botAvatarDark : botAvatarLight;
   const { t } = useTranslation();
   const queryClient = useQueryClient();
   const configApi = useApi(configApiRef);
@@ -527,19 +502,33 @@ const NotebookView = ({
       )
     }
   );
-  const renderNotebookDisclaimerAlert = () => /* @__PURE__ */ jsx("div", { className: classes.notebookDisclaimerStrip, children: /* @__PURE__ */ jsx("div", { className: classes.notebookDisclaimerInner, children: /* @__PURE__ */ jsx(Alert, { isInline: true, variant: "info", title: t("aria.important"), children: t("disclaimer.withoutValidation") }) }) });
+  const renderNotebookDisclaimerAlert = () => /* @__PURE__ */ jsx(DisclaimerStrip, { children: /* @__PURE__ */ jsx(DisclaimerInner, { children: /* @__PURE__ */ jsx(Alert, { isInline: true, variant: "info", title: t("aria.important"), children: t("disclaimer") }) }) });
   const renderMainContent = () => {
     if (hasNoDocuments && messages.length === 0) {
-      return /* @__PURE__ */ jsx(Typography, { component: "span", className: classes.notebookEmptyUpload, children: /* @__PURE__ */ jsx(
-        UploadResourceScreen,
+      return /* @__PURE__ */ jsx(
+        Typography,
         {
-          onUploadClick: handleOpenUploadModal,
-          isProcessing: uploadingFileNames.length > 0
+          component: "span",
+          sx: {
+            flex: 1,
+            display: "flex",
+            flexDirection: "column",
+            minHeight: 0,
+            minWidth: 0,
+            backgroundColor: floatingBg
+          },
+          children: /* @__PURE__ */ jsx(
+            UploadResourceScreen,
+            {
+              onUploadClick: handleOpenUploadModal,
+              isProcessing: uploadingFileNames.length > 0
+            }
+          )
         }
-      ) });
+      );
     }
     if (messages.length > 0) {
-      return /* @__PURE__ */ jsx(ChatbotContent, { className: classes.chatContent, children: /* @__PURE__ */ jsx(
+      return /* @__PURE__ */ jsx(StyledChatbotContent, { children: /* @__PURE__ */ jsx(
         LightspeedChatBox,
         {
           userName,
@@ -555,18 +544,34 @@ const NotebookView = ({
         }
       ) });
     }
-    return /* @__PURE__ */ jsxs("div", { className: classes.welcomeContainer, children: [
+    return /* @__PURE__ */ jsxs(WelcomeContainer, { children: [
       /* @__PURE__ */ jsx("div", { style: { flex: 1 } }),
       renderNotebookDisclaimerAlert(),
-      /* @__PURE__ */ jsxs("div", { className: classes.notebookContentArea, children: [
-        /* @__PURE__ */ jsx(Typography, { className: classes.notebookHeading, children: notebookName }),
-        topicSummary && /* @__PURE__ */ jsx(Typography, { className: classes.notebookSummary, children: topicSummary })
+      /* @__PURE__ */ jsxs(NotebookContentArea, { children: [
+        /* @__PURE__ */ jsx(
+          Typography,
+          {
+            sx: { fontSize: "2rem", fontWeight: 500, lineHeight: 1.25, py: 1 },
+            children: notebookName
+          }
+        ),
+        topicSummary && /* @__PURE__ */ jsx(
+          Typography,
+          {
+            sx: {
+              fontSize: "1rem",
+              lineHeight: 2,
+              color: "var(--pf-t--global--text--color--regular)",
+              pt: 0.5
+            },
+            children: topicSummary
+          }
+        )
       ] }),
-      welcomePrompts.length > 0 && /* @__PURE__ */ jsx("div", { className: classes.promptSuggestions, children: welcomePrompts.map((prompt) => /* @__PURE__ */ jsx(
-        "button",
+      welcomePrompts.length > 0 && /* @__PURE__ */ jsx(PromptSuggestions, { children: welcomePrompts.map((prompt) => /* @__PURE__ */ jsx(
+        PromptPill,
         {
           type: "button",
-          className: classes.promptPill,
           onClick: prompt.onClick,
           children: prompt.title
         },
@@ -574,202 +579,184 @@ const NotebookView = ({
       )) })
     ] });
   };
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      className: classes.root,
-      style: isCompact ? { position: "relative" } : void 0,
-      children: [
-        /* @__PURE__ */ jsx(
-          ToastAlertGroup,
-          {
-            alerts: toastAlerts,
-            onRemoveAlert: handleRemoveToastAlert
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          Drawer,
-          {
-            isExpanded: !sidebarCollapsed,
-            isInline: true,
-            position: "start",
-            className: classes.drawerContainer,
-            children: /* @__PURE__ */ jsx(
-              DrawerContent,
+  return /* @__PURE__ */ jsxs(Root, { sx: isCompact ? { position: "relative" } : void 0, children: [
+    /* @__PURE__ */ jsx(
+      ToastAlertGroup,
+      {
+        alerts: toastAlerts,
+        onRemoveAlert: handleRemoveToastAlert
+      }
+    ),
+    /* @__PURE__ */ jsx(StyledDrawer, { isExpanded: !sidebarCollapsed, isInline: true, position: "start", children: /* @__PURE__ */ jsx(
+      StyledDrawerContent,
+      {
+        panelContent: !sidebarCollapsed ? panelContent : void 0,
+        children: /* @__PURE__ */ jsx(StyledDrawerContentBody, { children: /* @__PURE__ */ jsxs(MainArea, { children: [
+          sidebarCollapsed && !isCompact && /* @__PURE__ */ jsxs(ExpandStrip, { children: [
+            /* @__PURE__ */ jsx(
+              Tooltip,
               {
-                panelContent: !sidebarCollapsed ? panelContent : void 0,
-                className: classes.drawerContent,
-                children: /* @__PURE__ */ jsx(DrawerContentBody, { className: classes.drawerContentBody, children: /* @__PURE__ */ jsxs("div", { className: classes.mainArea, children: [
-                  sidebarCollapsed && !isCompact && /* @__PURE__ */ jsxs("div", { className: classes.expandStrip, children: [
-                    /* @__PURE__ */ jsx(
-                      Tooltip,
-                      {
-                        content: t("notebook.view.sidebar.expand"),
-                        position: "right",
-                        children: /* @__PURE__ */ jsx(
-                          Button,
-                          {
-                            variant: "plain",
-                            onClick: () => onSidebarCollapsedChange(false),
-                            "aria-label": t("notebook.view.sidebar.expand"),
-                            size: "sm",
-                            children: /* @__PURE__ */ jsx(SidebarExpandIcon, {})
-                          }
-                        )
-                      }
-                    ),
-                    /* @__PURE__ */ jsx(
-                      Tooltip,
+                content: t("notebook.view.sidebar.expand"),
+                position: "right",
+                children: /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    variant: "plain",
+                    onClick: () => onSidebarCollapsedChange(false),
+                    "aria-label": t("notebook.view.sidebar.expand"),
+                    size: "sm",
+                    children: /* @__PURE__ */ jsx(SidebarExpandIcon, {})
+                  }
+                )
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Tooltip,
+              {
+                content: (() => {
+                  if (hasUploadsInProgress)
+                    return t("notebook.view.documents.uploadsInProgress");
+                  if (isAddDisabled)
+                    return t("notebook.view.documents.maxReached");
+                  return t("notebook.view.documents.add");
+                })(),
+                position: "right",
+                children: /* @__PURE__ */ jsx(Typography, { component: "span", children: /* @__PURE__ */ jsx(
+                  AddIconButton,
+                  {
+                    variant: "plain",
+                    onClick: isAddDisabled ? void 0 : handleOpenUploadModal,
+                    "aria-label": t("notebook.view.documents.add"),
+                    isDisabled: isAddDisabled,
+                    children: /* @__PURE__ */ jsx(AddCircleFilledIcon, { disabled: isAddDisabled })
+                  }
+                ) })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs(ContentColumn, { children: [
+            !isCompact && /* @__PURE__ */ jsx(TopBar, { children: /* @__PURE__ */ jsx(
+              Button,
+              {
+                variant: "link",
+                style: { textTransform: "none" },
+                onClick: handleCloseNotebook,
+                icon: /* @__PURE__ */ jsx(TimesIcon, {}),
+                iconPosition: "end",
+                children: t("notebook.view.close")
+              }
+            ) }),
+            /* @__PURE__ */ jsx(MainContent, { children: renderMainContent() }),
+            hasNoDocuments && messages.length === 0 && renderNotebookDisclaimerAlert(),
+            /* @__PURE__ */ jsxs(StyledChatbotFooter, { children: [
+              (() => {
+                const addResourceAction = /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    variant: "plain",
+                    onClick: handleOpenUploadModal,
+                    "aria-label": t("notebook.view.documents.add"),
+                    size: "sm",
+                    children: /* @__PURE__ */ jsx(PlusIcon, {})
+                  }
+                );
+                return hasNoDocuments ? /* @__PURE__ */ jsx(
+                  Tooltip,
+                  {
+                    content: t("notebook.view.input.disabledTooltip"),
+                    position: "top",
+                    children: /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
+                      MessageBar,
                       {
-                        content: (() => {
-                          if (hasUploadsInProgress)
-                            return t("notebook.view.documents.uploadsInProgress");
-                          if (isAddDisabled)
-                            return t("notebook.view.documents.maxReached");
-                          return t("notebook.view.documents.add");
-                        })(),
-                        position: "right",
-                        children: /* @__PURE__ */ jsx(Typography, { component: "span", children: /* @__PURE__ */ jsx(
-                          Button,
-                          {
-                            variant: "plain",
-                            className: classes.addIconButton,
-                            onClick: isAddDisabled ? void 0 : handleOpenUploadModal,
-                            "aria-label": t("notebook.view.documents.add"),
-                            isDisabled: isAddDisabled,
-                            children: /* @__PURE__ */ jsx(AddCircleFilledIcon, { disabled: isAddDisabled })
+                        hasAttachButton: false,
+                        hasMicrophoneButton: false,
+                        hasStopButton: false,
+                        isSendButtonDisabled: true,
+                        isDisabled: true,
+                        onSendMessage: sendMessage,
+                        placeholder: t("notebook.view.input.placeholder"),
+                        forceMultilineLayout: true,
+                        additionalActions: addResourceAction,
+                        buttonProps: {
+                          send: {
+                            tooltipContent: t("tooltip.send")
                           }
-                        ) })
+                        }
                       }
-                    )
-                  ] }),
-                  /* @__PURE__ */ jsxs("div", { className: classes.contentColumn, children: [
-                    !isCompact && /* @__PURE__ */ jsx("div", { className: classes.topBar, children: /* @__PURE__ */ jsx(
-                      Button,
-                      {
-                        variant: "link",
-                        className: classes.closeButton,
-                        onClick: handleCloseNotebook,
-                        icon: /* @__PURE__ */ jsx(TimesIcon, {}),
-                        iconPosition: "end",
-                        children: t("notebook.view.close")
+                    ) })
+                  }
+                ) : /* @__PURE__ */ jsx(
+                  MessageBar,
+                  {
+                    hasAttachButton: false,
+                    hasMicrophoneButton: true,
+                    hasStopButton: isStreaming,
+                    handleStopButton: isStreaming ? handleStopButton : void 0,
+                    isSendButtonDisabled: isStreaming,
+                    onSendMessage: sendMessage,
+                    placeholder: t("notebook.view.input.placeholder"),
+                    forceMultilineLayout: true,
+                    additionalActions: addResourceAction,
+                    buttonProps: {
+                      microphone: {
+                        tooltipContent: {
+                          active: t("tooltip.microphone.active"),
+                          inactive: t("tooltip.microphone.inactive")
+                        }
+                      },
+                      send: {
+                        tooltipContent: t("tooltip.send")
                       }
-                    ) }),
-                    /* @__PURE__ */ jsx("div", { className: classes.mainContent, children: renderMainContent() }),
-                    hasNoDocuments && messages.length === 0 && renderNotebookDisclaimerAlert(),
-                    /* @__PURE__ */ jsxs(ChatbotFooter, { className: classes.footer, children: [
-                      (() => {
-                        const addResourceAction = /* @__PURE__ */ jsx(
-                          Button,
-                          {
-                            variant: "plain",
-                            onClick: handleOpenUploadModal,
-                            "aria-label": t("notebook.view.documents.add"),
-                            size: "sm",
-                            children: /* @__PURE__ */ jsx(PlusIcon, {})
-                          }
-                        );
-                        return hasNoDocuments ? /* @__PURE__ */ jsx(
-                          Tooltip,
-                          {
-                            content: t("notebook.view.input.disabledTooltip"),
-                            position: "top",
-                            children: /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
-                              MessageBar,
-                              {
-                                hasAttachButton: false,
-                                hasMicrophoneButton: false,
-                                hasStopButton: false,
-                                isSendButtonDisabled: true,
-                                isDisabled: true,
-                                onSendMessage: sendMessage,
-                                placeholder: t("notebook.view.input.placeholder"),
-                                forceMultilineLayout: true,
-                                additionalActions: addResourceAction,
-                                buttonProps: {
-                                  send: {
-                                    tooltipContent: t("tooltip.send")
-                                  }
-                                }
-                              }
-                            ) })
-                          }
-                        ) : /* @__PURE__ */ jsx(
-                          MessageBar,
-                          {
-                            hasAttachButton: false,
-                            hasMicrophoneButton: true,
-                            hasStopButton: isStreaming,
-                            handleStopButton: isStreaming ? handleStopButton : void 0,
-                            isSendButtonDisabled: isStreaming,
-                            onSendMessage: sendMessage,
-                            placeholder: t("notebook.view.input.placeholder"),
-                            forceMultilineLayout: true,
-                            additionalActions: addResourceAction,
-                            buttonProps: {
-                              microphone: {
-                                tooltipContent: {
-                                  active: t("tooltip.microphone.active"),
-                                  inactive: t("tooltip.microphone.inactive")
-                                }
-                              },
-                              send: {
-                                tooltipContent: t("tooltip.send")
-                              }
-                            }
-                          }
-                        );
-                      })(),
-                      /* @__PURE__ */ jsx(ChatbotFootnoteWithIcon, { label: t("footer.accuracy.label") })
-                    ] })
-                  ] })
-                ] }) })
-              }
-            )
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          AddDocumentModal,
-          {
-            isOpen: isUploadModalOpen,
-            onClose: handleCloseUploadModal,
-            sessionId,
-            existingDocumentNames: documents.map((d) => d.title),
-            hasUploadsInProgress,
-            onFilesUploading: handleFilesUploading,
-            onUploadStarted: handleUploadStarted,
-            onUploadFailed: handleUploadFailed,
-            onDuplicatesFound: handleDuplicatesFound,
-            filesToAdd: filesToAddToModal,
-            onFilesAdded: handleFilesAddedToModal,
-            isCompact
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          OverwriteConfirmModal,
-          {
-            isOpen: isOverwriteModalOpen,
-            onClose: handleOverwriteCancel,
-            onConfirm: handleOverwriteConfirm,
-            onBack: handleOverwriteBack,
-            allFiles: allFilesForOverwrite,
-            duplicateFileNames: filesToOverwrite.map((f) => f.name),
-            isCompact
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          DeleteDocumentModal,
-          {
-            isOpen: deleteDocumentTarget !== null,
-            onClose: () => setDeleteDocumentTarget(null),
-            onConfirm: confirmDeleteDocument,
-            documentName: deleteDocumentTarget?.name ?? "",
-            isCompact
-          }
-        )
-      ]
-    }
-  );
+                    }
+                  }
+                );
+              })(),
+              /* @__PURE__ */ jsx(ChatbotFootnoteWithIcon, { label: t("footer.accuracy.label") })
+            ] })
+          ] })
+        ] }) })
+      }
+    ) }),
+    /* @__PURE__ */ jsx(
+      AddDocumentModal,
+      {
+        isOpen: isUploadModalOpen,
+        onClose: handleCloseUploadModal,
+        sessionId,
+        existingDocumentNames: documents.map((d) => d.title),
+        hasUploadsInProgress,
+        onFilesUploading: handleFilesUploading,
+        onUploadStarted: handleUploadStarted,
+        onUploadFailed: handleUploadFailed,
+        onDuplicatesFound: handleDuplicatesFound,
+        filesToAdd: filesToAddToModal,
+        onFilesAdded: handleFilesAddedToModal,
+        isCompact
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      OverwriteConfirmModal,
+      {
+        isOpen: isOverwriteModalOpen,
+        onClose: handleOverwriteCancel,
+        onConfirm: handleOverwriteConfirm,
+        onBack: handleOverwriteBack,
+        allFiles: allFilesForOverwrite,
+        duplicateFileNames: filesToOverwrite.map((f) => f.name),
+        isCompact
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      DeleteDocumentModal,
+      {
+        isOpen: deleteDocumentTarget !== null,
+        onClose: () => setDeleteDocumentTarget(null),
+        onConfirm: confirmDeleteDocument,
+        documentName: deleteDocumentTarget?.name ?? "",
+        isCompact
+      }
+    )
+  ] });
 };
 
 export { NotebookView };