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

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

@@ -0,0 +1,681 @@
+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 { ChatbotFooter, MessageBar, ChatbotContent } from '@patternfly/chatbot';
+import { DrawerPanelContent, AlertGroup, Alert, AlertVariant, AlertActionCloseButton, Drawer, DrawerContent, DrawerContentBody, Tooltip, Button } from '@patternfly/react-core';
+import { TimesIcon } from '@patternfly/react-icons';
+import { useQueryClient } from '@tanstack/react-query';
+import { notebooksApiRef } from '../../api/notebooksApi.esm.js';
+import { TEMP_CONVERSATION_ID, UNTITLED_NOTEBOOK_NAME, NOTEBOOK_MAX_FILES } from '../../const.esm.js';
+import { useCreateNotebookMessage } from '../../hooks/notebooks/useCreateNotebookMessage.esm.js';
+import { useDocumentStatusPolling } from '../../hooks/notebooks/useDocumentStatusPolling.esm.js';
+import { useConversationMessages } from '../../hooks/useConversationMessages.esm.js';
+import { useNotebookWelcomePrompts } from '../../hooks/useNotebookWelcomePrompts.esm.js';
+import { useTranslation } from '../../hooks/useTranslation.esm.js';
+import { ChatbotFootnoteWithIcon } from '../../utils/lightspeed-chatbox-utils.esm.js';
+import { LightspeedChatBox } from '../LightspeedChatBox.esm.js';
+import { AddDocumentModal } from './AddDocumentModal.esm.js';
+import { DeleteDocumentModal } from './DeleteDocumentModal.esm.js';
+import { DocumentSidebar } from './DocumentSidebar.esm.js';
+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,
+    height: "100%",
+    backgroundColor: "var(--pf-t--global--background--color--primary--default)"
+  },
+  drawerContainer: {
+    flex: 1,
+    minHeight: 0,
+    "& .pf-v6-c-drawer__panel, & .pf-v5-c-drawer__panel": {
+      backgroundColor: "var(--pf-t--global--background--color--floating--default) !important"
+    },
+    "& .pf-v6-c-drawer__panel-main, & .pf-v5-c-drawer__panel-main": {
+      backgroundColor: "var(--pf-t--global--background--color--floating--default) !important"
+    },
+    "& .pf-v6-c-drawer__panel-body, & .pf-v5-c-drawer__panel-body": {
+      backgroundColor: "var(--pf-t--global--background--color--floating--default) !important"
+    },
+    "& .pf-v6-c-drawer__splitter, & .pf-v5-c-drawer__splitter": {
+      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",
+    height: "100%",
+    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
+  },
+  drawerContentBody: {
+    backgroundColor: "var(--pf-t--global--background--color--primary--default)",
+    height: "100%"
+  },
+  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)",
+    "& .pf-v6-c-alert, & .pf-v5-c-alert": {
+      backgroundColor: "var(--pf-t--global--background--color--secondary--default) !important"
+    },
+    "& .pf-v6-c-alert__content, & .pf-v5-c-alert__content": {
+      backgroundColor: "transparent !important"
+    },
+    "& .pf-v6-c-alert__body, & .pf-v5-c-alert__body": {
+      backgroundColor: "transparent !important"
+    },
+    "& .pf-v6-c-alert__description, & .pf-v5-c-alert__description": {
+      backgroundColor: "transparent !important"
+    }
+  },
+  notebookDisclaimerInner: {
+    width: "95%",
+    maxWidth: "unset",
+    margin: "0 auto"
+  },
+  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
+    }
+  },
+  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,
+    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)"
+    },
+    "& .pf-chatbot__button--send, & .pf-chatbot__button--microphone": {
+      "--pf-v6-c-button--BorderRadius": "var(--pf-t--global--border--radius--pill)",
+      borderRadius: "var(--pf-t--global--border--radius--pill) !important"
+    }
+  },
+  chatContent: {
+    minHeight: 0,
+    display: "flex",
+    flexDirection: "column",
+    flex: 1,
+    overflow: "auto"
+  }
+}));
+const NotebookView = ({
+  sessionId,
+  notebookName = UNTITLED_NOTEBOOK_NAME,
+  documents = [],
+  isDocumentsFetching = false,
+  metadata,
+  topicSummary,
+  userName,
+  avatar,
+  profileLoading,
+  topicRestrictionEnabled,
+  onClose
+}) => {
+  const classes = useStyles();
+  const { t } = useTranslation();
+  const queryClient = useQueryClient();
+  const configApi = useApi(configApiRef);
+  const notebooksApi = useApi(notebooksApiRef);
+  const { mutateAsync: notebookCreateMessage } = useCreateNotebookMessage();
+  const notebookModel = configApi.getOptionalString(
+    "intelligent-assistant.notebooks.queryDefaults.model"
+  ) || "";
+  const [conversationId, setConversationId] = useState(
+    metadata?.conversation_id ?? TEMP_CONVERSATION_ID
+  );
+  const [isSendButtonDisabled, setIsSendButtonDisabled] = useState(false);
+  const [announcement, setAnnouncement] = useState(
+    void 0
+  );
+  const [deletingDocumentIds, setDeletingDocumentIds] = useState(
+    /* @__PURE__ */ new Set()
+  );
+  const [deleteDocumentTarget, setDeleteDocumentTarget] = useState(null);
+  const handleDeleteDocument = useCallback((documentId) => {
+    setDeleteDocumentTarget({ id: documentId, name: documentId });
+  }, []);
+  const onComplete = useCallback(
+    (message) => {
+      setIsSendButtonDisabled(false);
+      setAnnouncement(`Message from Bot: ${message}`);
+      queryClient.invalidateQueries({
+        queryKey: ["conversationMessages", conversationId]
+      });
+    },
+    [queryClient, conversationId]
+  );
+  const onStart = useCallback((conv_id) => {
+    setConversationId(conv_id);
+  }, []);
+  const createMessageAdapter = useCallback(
+    async (vars) => {
+      return notebookCreateMessage({
+        prompt: vars.prompt,
+        sessionId
+      });
+    },
+    [notebookCreateMessage, sessionId]
+  );
+  const { conversationMessages, handleInputPrompt, scrollToBottomRef } = useConversationMessages(
+    conversationId,
+    userName,
+    notebookModel,
+    "",
+    avatar,
+    onComplete,
+    onStart,
+    createMessageAdapter
+  );
+  const [messages, setMessages] = useState(conversationMessages);
+  useEffect(() => {
+    setMessages(conversationMessages);
+  }, [conversationMessages]);
+  const sendMessage = useCallback(
+    (message) => {
+      setAnnouncement(
+        t("conversation.announcement.userMessage", {
+          prompt: message.toString()
+        })
+      );
+      handleInputPrompt(message.toString(), []);
+      setIsSendButtonDisabled(true);
+    },
+    [handleInputPrompt, t]
+  );
+  const notebookPrompts = useNotebookWelcomePrompts();
+  const welcomePrompts = notebookPrompts.map((title) => ({
+    title,
+    onClick: () => sendMessage(title)
+  }));
+  const [sidebarCollapsed, setSidebarCollapsed] = useState(false);
+  const [isUploadModalOpen, setIsUploadModalOpen] = useState(false);
+  const [uploadingFileNames, setUploadingFileNames] = useState([]);
+  const [pendingUploads, setPendingUploads] = useState([]);
+  const [toastAlerts, setToastAlerts] = useState([]);
+  const processedIds = useRef(/* @__PURE__ */ new Set());
+  const [completedFileNames, setCompletedFileNames] = useState(
+    /* @__PURE__ */ new Set()
+  );
+  const [filesToOverwrite, setFilesToOverwrite] = useState([]);
+  const [isOverwriteModalOpen, setIsOverwriteModalOpen] = useState(false);
+  const [filesToAddToModal, setFilesToAddToModal] = useState([]);
+  const confirmDeleteDocument = useCallback(async () => {
+    if (!deleteDocumentTarget) return;
+    const { id: documentId, name: documentName } = deleteDocumentTarget;
+    setDeleteDocumentTarget(null);
+    setDeletingDocumentIds((prev) => new Set(prev).add(documentId));
+    try {
+      await notebooksApi.deleteDocument(sessionId, documentId);
+      queryClient.invalidateQueries({
+        queryKey: ["notebooks", "documents", sessionId]
+      });
+      setToastAlerts((prev) => [
+        {
+          key: Date.now() + documentId,
+          title: t("notebook.document.delete.success", {
+            documentName
+          }),
+          variant: "success"
+        },
+        ...prev
+      ]);
+    } finally {
+      setDeletingDocumentIds((prev) => {
+        const next = new Set(prev);
+        next.delete(documentId);
+        return next;
+      });
+    }
+  }, [deleteDocumentTarget, notebooksApi, sessionId, queryClient, t]);
+  const handleOpenUploadModal = () => setIsUploadModalOpen(true);
+  const handleCloseUploadModal = () => setIsUploadModalOpen(false);
+  const handleFilesUploading = (files) => {
+    setUploadingFileNames((prev) => {
+      const newNames = files.map((f) => f.name).filter((name) => !prev.includes(name));
+      return [...prev, ...newNames];
+    });
+  };
+  const handleUploadStarted = (info) => {
+    processedIds.current.delete(info.documentId);
+    setPendingUploads((prev) => [
+      ...prev,
+      { fileName: info.fileName, documentId: info.documentId }
+    ]);
+  };
+  const handleUploadFailed = (fileName) => {
+    setUploadingFileNames((prev) => prev.filter((n) => n !== fileName));
+    setToastAlerts((prev) => [
+      {
+        key: Date.now() + fileName,
+        title: t("notebook.upload.failed", {
+          fileName
+        }),
+        variant: "danger"
+      },
+      ...prev
+    ]);
+  };
+  const handleDuplicatesFound = (files) => {
+    setFilesToOverwrite(files);
+    setIsOverwriteModalOpen(true);
+  };
+  const handleOverwriteConfirm = () => {
+    const files = filesToOverwrite;
+    setIsOverwriteModalOpen(false);
+    setFilesToOverwrite([]);
+    if (files.length === 0) return;
+    setFilesToAddToModal(files);
+  };
+  const handleFilesAddedToModal = () => {
+    setFilesToAddToModal([]);
+  };
+  const handleOverwriteCancel = () => {
+    setIsOverwriteModalOpen(false);
+    setFilesToOverwrite([]);
+  };
+  const pollingResults = useDocumentStatusPolling(sessionId, pendingUploads);
+  useEffect(() => {
+    const completedOrFailed = pollingResults.filter(
+      (r) => (r.status === "completed" || r.status === "failed" || r.status === "cancelled") && !processedIds.current.has(r.documentId)
+    );
+    if (completedOrFailed.length === 0) return;
+    const idsToRemove = /* @__PURE__ */ new Set();
+    const namesToRemove = /* @__PURE__ */ new Set();
+    const newAlerts = [];
+    const newCompletedNames = /* @__PURE__ */ new Set();
+    for (const result of completedOrFailed) {
+      processedIds.current.add(result.documentId);
+      idsToRemove.add(result.documentId);
+      namesToRemove.add(result.fileName);
+      if (result.status === "completed") {
+        newCompletedNames.add(result.fileName);
+      }
+      if (result.status !== "completed") {
+        const errorDetail = result.error ? ` ${result.error}` : "";
+        newAlerts.push({
+          key: Date.now() + result.documentId,
+          title: `${t("notebook.upload.failed", {
+            fileName: result.fileName
+          })}${errorDetail}`,
+          variant: "danger"
+        });
+      }
+    }
+    setPendingUploads((prev) => prev.filter((u) => !idsToRemove.has(u.documentId)));
+    setUploadingFileNames(
+      (prev) => prev.filter((name) => !namesToRemove.has(name))
+    );
+    if (newCompletedNames.size > 0) {
+      setCompletedFileNames((prev) => /* @__PURE__ */ new Set([...prev, ...newCompletedNames]));
+      queryClient.invalidateQueries({
+        queryKey: ["notebooks", "documents", sessionId]
+      });
+    }
+    setToastAlerts((prev) => [...newAlerts, ...prev]);
+  }, [pollingResults, t, queryClient, sessionId]);
+  const handleRemoveToastAlert = (key) => {
+    setToastAlerts((prev) => prev.filter((a) => a.key !== key));
+  };
+  const totalDocumentCount = documents.length + uploadingFileNames.length;
+  const hasUploadsInProgress = pendingUploads.length > 0 || isDocumentsFetching;
+  const hasNoDocuments = documents.length === 0;
+  const isAddDisabled = totalDocumentCount >= NOTEBOOK_MAX_FILES || hasUploadsInProgress;
+  const panelContent = /* @__PURE__ */ jsx(
+    DrawerPanelContent,
+    {
+      isResizable: true,
+      defaultSize: "310px",
+      minSize: "232px",
+      maxSize: "50%",
+      resizeAriaLabel: t("notebook.view.sidebar.resize"),
+      children: /* @__PURE__ */ jsx(
+        DocumentSidebar,
+        {
+          notebookName,
+          documents,
+          uploadingFileNames,
+          completedFileNames,
+          deletingDocumentIds,
+          collapsed: sidebarCollapsed,
+          hasUploadsInProgress,
+          onToggleCollapse: () => setSidebarCollapsed((prev) => !prev),
+          onAddDocument: handleOpenUploadModal,
+          onDeleteDocument: handleDeleteDocument
+        }
+      )
+    }
+  );
+  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 renderMainContent = () => {
+    if (hasNoDocuments && messages.length === 0) {
+      return /* @__PURE__ */ jsx(Typography, { component: "span", className: classes.notebookEmptyUpload, children: /* @__PURE__ */ jsx(
+        UploadResourceScreen,
+        {
+          onUploadClick: handleOpenUploadModal,
+          isProcessing: uploadingFileNames.length > 0
+        }
+      ) });
+    }
+    if (messages.length > 0) {
+      return /* @__PURE__ */ jsx(ChatbotContent, { className: classes.chatContent, children: /* @__PURE__ */ jsx(
+        LightspeedChatBox,
+        {
+          userName,
+          messages,
+          profileLoading,
+          announcement,
+          ref: scrollToBottomRef,
+          welcomePrompts: [],
+          conversationId,
+          isStreaming: isSendButtonDisabled,
+          topicRestrictionEnabled,
+          showSourcesChipPopover: true
+        }
+      ) });
+    }
+    return /* @__PURE__ */ jsxs("div", { className: classes.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 })
+      ] }),
+      welcomePrompts.length > 0 && /* @__PURE__ */ jsx("div", { className: classes.promptSuggestions, children: welcomePrompts.map((prompt) => /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: classes.promptPill,
+          onClick: prompt.onClick,
+          children: prompt.title
+        },
+        prompt.title
+      )) })
+    ] });
+  };
+  return /* @__PURE__ */ jsxs("div", { className: classes.root, children: [
+    toastAlerts.length > 0 && /* @__PURE__ */ jsx(
+      AlertGroup,
+      {
+        hasAnimations: true,
+        isToast: true,
+        isLiveRegion: true,
+        className: classes.toastAlertGroup,
+        children: toastAlerts.map(({ key, title, variant }) => /* @__PURE__ */ jsx(
+          Alert,
+          {
+            variant: AlertVariant[variant ?? "success"],
+            title,
+            className: classes.toastAlert,
+            timeout: 2e3,
+            onTimeout: () => handleRemoveToastAlert(key),
+            actionClose: /* @__PURE__ */ jsx(
+              AlertActionCloseButton,
+              {
+                title,
+                variantLabel: `${variant ?? "success"} alert`,
+                onClose: () => handleRemoveToastAlert(key)
+              }
+            )
+          },
+          key
+        ))
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Drawer,
+      {
+        isExpanded: !sidebarCollapsed,
+        isInline: true,
+        position: "start",
+        className: classes.drawerContainer,
+        children: /* @__PURE__ */ jsx(
+          DrawerContent,
+          {
+            panelContent: !sidebarCollapsed ? panelContent : void 0,
+            children: /* @__PURE__ */ jsx(DrawerContentBody, { className: classes.drawerContentBody, children: /* @__PURE__ */ jsxs("div", { className: classes.mainArea, children: [
+              sidebarCollapsed && /* @__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: () => setSidebarCollapsed(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(
+                      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 })
+                      }
+                    ) })
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsxs("div", { className: classes.contentColumn, children: [
+                /* @__PURE__ */ jsx("div", { className: classes.topBar, children: /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    variant: "link",
+                    className: classes.closeButton,
+                    onClick: onClose,
+                    icon: /* @__PURE__ */ jsx(TimesIcon, {}),
+                    iconPosition: "end",
+                    children: t("notebook.view.close")
+                  }
+                ) }),
+                /* @__PURE__ */ jsx("div", { className: classes.mainContent, children: renderMainContent() }),
+                hasNoDocuments && messages.length === 0 && renderNotebookDisclaimerAlert(),
+                /* @__PURE__ */ jsxs(ChatbotFooter, { className: classes.footer, children: [
+                  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")
+                        }
+                      ) })
+                    }
+                  ) : /* @__PURE__ */ jsx(
+                    MessageBar,
+                    {
+                      hasAttachButton: false,
+                      hasMicrophoneButton: true,
+                      hasStopButton: false,
+                      isSendButtonDisabled,
+                      onSendMessage: sendMessage,
+                      placeholder: t("notebook.view.input.placeholder")
+                    }
+                  ),
+                  /* @__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
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      OverwriteConfirmModal,
+      {
+        isOpen: isOverwriteModalOpen,
+        onClose: handleOverwriteCancel,
+        onConfirm: handleOverwriteConfirm,
+        fileNames: filesToOverwrite.map((f) => f.name)
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      DeleteDocumentModal,
+      {
+        isOpen: deleteDocumentTarget !== null,
+        onClose: () => setDeleteDocumentTarget(null),
+        onConfirm: confirmDeleteDocument,
+        documentName: deleteDocumentTarget?.name ?? ""
+      }
+    )
+  ] });
+};
+
+export { NotebookView };
+//# sourceMappingURL=NotebookView.esm.js.map