@red-hat-developer-hub/backstage-plugin-intelligent-assistant 4.0.0 → 4.2.0

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

@@ -1,9 +1,10 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { useState, useRef, useCallback, useEffect } from 'react';
+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, AlertGroup, Alert, AlertVariant, AlertActionCloseButton, Drawer, DrawerContent, DrawerContentBody, Tooltip, Button } from '@patternfly/react-core';
+import { DrawerPanelContent, Drawer, DrawerContent, DrawerContentBody, Tooltip, Button, 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';
@@ -17,12 +18,17 @@ import { useConversationMessages } from '../../hooks/useConversationMessages.esm
 import { useNotebookWelcomePrompts } from '../../hooks/useNotebookWelcomePrompts.esm.js';
 import { useStopConversation } from '../../hooks/useStopConversation.esm.js';
 import { useTranslation } from '../../hooks/useTranslation.esm.js';
+import botAvatarDark from '../../images/bot-avatar-dark.svg';
+import botAvatarLight from '../../images/bot-avatar.svg';
+import userAvatar from '../../images/user-avatar.svg';
 import { ChatbotFootnoteWithIcon } from '../../utils/lightspeed-chatbox-utils.esm.js';
 import { runFileUploads } from '../../utils/notebook-upload-runner.esm.js';
 import { LightspeedChatBox } from '../LightspeedChatBox.esm.js';
+import { ToastAlertGroup } from '../ToastAlertGroup.esm.js';
 import { AddDocumentModal } from './AddDocumentModal.esm.js';
 import { DeleteDocumentModal } from './DeleteDocumentModal.esm.js';
 import { DocumentSidebar } from './DocumentSidebar.esm.js';
+import { useNotebookStream } from './NotebookStreamProvider.esm.js';
 import { OverwriteConfirmModal } from './OverwriteConfirmModal.esm.js';
 import { SidebarExpandIcon, AddCircleFilledIcon } from './SidebarCollapseIcon.esm.js';
 import { UploadResourceScreen } from './UploadResourceScreen.esm.js';
@@ -33,22 +39,21 @@ const useStyles = makeStyles((theme) => ({
     flexDirection: "column",
     flex: 1,
     minHeight: 0,
-    height: "100%",
-    backgroundColor: "var(--pf-t--global--background--color--primary--default)"
+    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) !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)"
     }
   },
@@ -69,7 +74,8 @@ const useStyles = makeStyles((theme) => ({
   mainArea: {
     display: "flex",
     flexDirection: "row",
-    height: "100%",
+    flex: 1,
+    minHeight: 0,
     minWidth: 0
   },
   topBar: {
@@ -85,11 +91,16 @@ const useStyles = makeStyles((theme) => ({
     display: "flex",
     flexDirection: "column",
     flex: 1,
-    minHeight: 0
+    minHeight: 0,
+    minWidth: 0
   },
   drawerContentBody: {
-    backgroundColor: "var(--pf-t--global--background--color--primary--default)",
-    height: "100%"
+    backgroundColor: "var(--pf-t--global--background--color--floating--default)",
+    display: "flex",
+    flexDirection: "column",
+    flex: 1,
+    minHeight: 0,
+    minWidth: 0
   },
   contentColumn: {
     display: "flex",
@@ -105,37 +116,13 @@ const useStyles = makeStyles((theme) => ({
     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"
-    }
+    backgroundColor: "var(--pf-t--global--background--color--floating--default)"
   },
   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",
@@ -149,6 +136,7 @@ const useStyles = makeStyles((theme) => ({
     display: "flex",
     flexDirection: "column",
     minHeight: 0,
+    minWidth: 0,
     backgroundColor: "var(--pf-t--global--background--color--floating--default)"
   },
   notebookContentArea: {
@@ -201,40 +189,20 @@ const useStyles = makeStyles((theme) => ({
     },
     "& .pf-chatbot__message-bar": {
       backgroundColor: theme.palette.type === "light" ? theme.palette.grey[100] : "var(--pf-t--global--background--color--secondary--default)"
-    },
-    "& .pf-chatbot__button--stop, & .pf-chatbot__button--attach, & .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"
-    }
-  },
-  messageBar: {
-    border: "1px solid var(--pf-t--global--border--color--default)",
-    borderRadius: 24,
-    padding: theme.spacing(0.5),
-    "&::after": {
-      display: "none"
     }
   },
-  addResourceButton: {
-    background: "none",
-    border: "none",
-    cursor: "pointer",
-    padding: 4,
-    display: "inline-flex",
-    alignItems: "center",
-    color: "inherit",
-    "&:focus-visible": {
-      outline: "2px solid var(--pf-t--global--border--color--brand--default)",
-      outlineOffset: 2
-    },
-    marginLeft: theme.spacing(2)
-  },
   chatContent: {
     minHeight: 0,
     display: "flex",
     flexDirection: "column",
     flex: 1,
-    overflow: "auto"
+    overflow: "auto",
+    backgroundColor: "var(--pf-t--global--background--color--floating--default)",
+    "& .pf-chatbot__message-contents": {
+      overflowX: "hidden",
+      overflowWrap: "break-word",
+      wordBreak: "break-word"
+    }
   }
 }));
 const NotebookView = ({
@@ -248,9 +216,17 @@ const NotebookView = ({
   avatar,
   profileLoading,
   topicRestrictionEnabled,
-  onClose
+  onClose,
+  isCompact = false,
+  sidebarCollapsed,
+  onSidebarCollapsedChange,
+  isUploadModalOpen,
+  onUploadModalOpenChange,
+  onUploadsInProgressChange
 }) => {
   const classes = useStyles();
+  const theme = useTheme();
+  const botAvatar = theme.palette.type === "dark" ? botAvatarDark : botAvatarLight;
   const { t } = useTranslation();
   const queryClient = useQueryClient();
   const configApi = useApi(configApiRef);
@@ -262,17 +238,15 @@ const NotebookView = ({
   const [conversationId, setConversationId] = useState(
     metadata?.conversation_id ?? TEMP_CONVERSATION_ID
   );
-  const [isSendButtonDisabled, setIsSendButtonDisabled] = useState(false);
-  const [requestId, setRequestId] = useState("");
   const { mutate: stopConversation } = useStopConversation();
-  const wasStoppedByUserRef = useRef(false);
-  const autoDeleteRef = useRef({
-    isUntitled: false,
-    isEmpty: true,
-    noPending: true,
-    noUploading: true,
-    noChat: true
-  });
+  const {
+    messages: streamMessages,
+    status: streamStatus,
+    requestId,
+    send: sendNotebookStream,
+    stop: stopNotebookStream
+  } = useNotebookStream(sessionId);
+  const isStreaming = streamStatus === "streaming";
   const [announcement, setAnnouncement] = useState(
     void 0
   );
@@ -284,79 +258,73 @@ const NotebookView = ({
     setDeleteDocumentTarget({ id: documentId, name: documentId });
   }, []);
   const { mutateAsync: renameDocument } = useRenameDocument();
-  const onComplete = useCallback(
-    (message) => {
-      setIsSendButtonDisabled(false);
-      if (!wasStoppedByUserRef.current) {
-        setAnnouncement(`Message from Bot: ${message}`);
-      }
-      wasStoppedByUserRef.current = false;
-      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 onRequestIdReady = useCallback((rid) => {
-    setRequestId(rid);
-  }, []);
-  const { conversationMessages, handleInputPrompt, scrollToBottomRef } = useConversationMessages(
+  const { conversationMessages, scrollToBottomRef } = useConversationMessages(
     conversationId,
     userName,
     notebookModel,
     "",
-    avatar,
-    onComplete,
-    onStart,
-    createMessageAdapter,
-    onRequestIdReady
+    avatar
   );
-  const [messages, setMessages] = useState(conversationMessages);
+  const messages = streamStatus === "idle" ? conversationMessages : streamMessages;
+  useEffect(() => {
+    if (metadata?.conversation_id && metadata.conversation_id !== conversationId) {
+      setConversationId(metadata.conversation_id);
+    }
+  }, [metadata?.conversation_id, conversationId]);
+  const prevStatusRef = useRef(streamStatus);
   useEffect(() => {
-    setMessages(conversationMessages);
-  }, [conversationMessages]);
+    if (prevStatusRef.current === "streaming" && streamStatus === "complete") {
+      const last = streamMessages[streamMessages.length - 1];
+      if (last?.role === "bot" && last.content) {
+        setAnnouncement(`Message from Bot: ${last.content}`);
+      }
+    }
+    prevStatusRef.current = streamStatus;
+  }, [streamStatus, streamMessages]);
   const sendMessage = useCallback(
     (message) => {
-      wasStoppedByUserRef.current = false;
+      const text = message.toString();
+      if (!text.trim()) return;
       setAnnouncement(
-        t("conversation.announcement.userMessage", {
-          prompt: message.toString()
-        })
+        t("conversation.announcement.userMessage", { prompt: text })
       );
-      handleInputPrompt(message.toString(), []);
-      setIsSendButtonDisabled(true);
+      sendNotebookStream({
+        prompt: text,
+        seedMessages: messages,
+        conversationId,
+        userName,
+        avatar: avatar || userAvatar,
+        botAvatar,
+        selectedModel: notebookModel,
+        createMessage: (prompt, options) => notebookCreateMessage({ prompt, sessionId, signal: options?.signal })
+      });
     },
-    [handleInputPrompt, t]
+    [
+      sendNotebookStream,
+      messages,
+      conversationId,
+      userName,
+      avatar,
+      botAvatar,
+      notebookModel,
+      notebookCreateMessage,
+      sessionId,
+      t
+    ]
   );
   const handleStopButton = useCallback(() => {
-    wasStoppedByUserRef.current = true;
     if (requestId) {
       stopConversation(requestId);
-      setRequestId("");
     }
-    setIsSendButtonDisabled(false);
+    stopNotebookStream();
     setAnnouncement(t("conversation.announcement.responseStopped"));
-  }, [requestId, stopConversation, t]);
+  }, [requestId, stopConversation, stopNotebookStream, t]);
   const notebookPrompts = useNotebookWelcomePrompts();
   const welcomePrompts = notebookPrompts.map((title) => ({
     title,
     onClick: () => sendMessage(title)
   }));
   const uploadMutation = useUploadDocument();
-  const [sidebarCollapsed, setSidebarCollapsed] = useState(false);
-  const [isUploadModalOpen, setIsUploadModalOpen] = useState(false);
   const [uploadingFileNames, setUploadingFileNames] = useState([]);
   const [pendingUploads, setPendingUploads] = useState([]);
   const [toastAlerts, setToastAlerts] = useState([]);
@@ -368,30 +336,6 @@ const NotebookView = ({
   const [allFilesForOverwrite, setAllFilesForOverwrite] = useState([]);
   const [isOverwriteModalOpen, setIsOverwriteModalOpen] = useState(false);
   const [filesToAddToModal, setFilesToAddToModal] = useState([]);
-  autoDeleteRef.current = {
-    isUntitled: notebookName === UNTITLED_NOTEBOOK_NAME,
-    isEmpty: documents.length === 0 && completedFileNames.size === 0,
-    noPending: !pendingUploads.length,
-    noUploading: !uploadingFileNames.length,
-    noChat: conversationId === TEMP_CONVERSATION_ID
-  };
-  useEffect(() => {
-    return () => {
-      const currentNotebook = autoDeleteRef.current;
-      if (currentNotebook.isUntitled && currentNotebook.isEmpty && currentNotebook.noPending && currentNotebook.noUploading && currentNotebook.noChat) {
-        notebooksApi.deleteSession(sessionId).then(() => {
-          queryClient.invalidateQueries({
-            queryKey: ["notebooks", "sessions"]
-          });
-        }).catch(() => {
-        });
-      } else {
-        queryClient.invalidateQueries({
-          queryKey: ["notebooks", "sessions"]
-        });
-      }
-    };
-  }, [notebooksApi, sessionId, queryClient]);
   const handleRenameDocument = useCallback(
     async (documentId, newTitle) => {
       try {
@@ -443,8 +387,8 @@ const NotebookView = ({
       });
     }
   }, [deleteDocumentTarget, notebooksApi, sessionId, queryClient, t]);
-  const handleOpenUploadModal = () => setIsUploadModalOpen(true);
-  const handleCloseUploadModal = () => setIsUploadModalOpen(false);
+  const handleOpenUploadModal = () => onUploadModalOpenChange(true);
+  const handleCloseUploadModal = () => onUploadModalOpenChange(false);
   const handleCloseNotebook = () => {
     onClose();
   };
@@ -477,7 +421,7 @@ const NotebookView = ({
   const handleDuplicatesFound = (duplicateFiles, allFiles) => {
     setFilesToOverwrite(duplicateFiles);
     setAllFilesForOverwrite(allFiles);
-    setIsUploadModalOpen(false);
+    onUploadModalOpenChange(false);
     setIsOverwriteModalOpen(true);
   };
   const handleOverwriteConfirm = (filesToUpload) => {
@@ -499,7 +443,7 @@ const NotebookView = ({
     setFilesToAddToModal(allFilesForOverwrite);
     setFilesToOverwrite([]);
     setAllFilesForOverwrite([]);
-    setIsUploadModalOpen(true);
+    onUploadModalOpenChange(true);
   };
   const handleOverwriteCancel = () => {
     setIsOverwriteModalOpen(false);
@@ -553,13 +497,16 @@ const NotebookView = ({
   const hasUploadsInProgress = pendingUploads.length > 0 || isDocumentsFetching;
   const hasNoDocuments = documents.length === 0;
   const isAddDisabled = totalDocumentCount >= NOTEBOOK_MAX_FILES || hasUploadsInProgress;
+  useEffect(() => {
+    onUploadsInProgressChange?.(hasUploadsInProgress);
+  }, [hasUploadsInProgress, onUploadsInProgressChange]);
   const panelContent = /* @__PURE__ */ jsx(
     DrawerPanelContent,
     {
-      isResizable: true,
-      defaultSize: "310px",
-      minSize: "232px",
-      maxSize: "50%",
+      isResizable: !isCompact,
+      defaultSize: isCompact ? "100%" : "310px",
+      minSize: isCompact ? "100%" : "232px",
+      maxSize: isCompact ? "100%" : "50%",
       resizeAriaLabel: t("notebook.view.sidebar.resize"),
       children: /* @__PURE__ */ jsx(
         DocumentSidebar,
@@ -571,7 +518,7 @@ const NotebookView = ({
           deletingDocumentIds,
           collapsed: sidebarCollapsed,
           hasUploadsInProgress,
-          onToggleCollapse: () => setSidebarCollapsed((prev) => !prev),
+          onToggleCollapse: () => onSidebarCollapsedChange(!sidebarCollapsed),
           onAddDocument: handleOpenUploadModal,
           onDeleteDocument: handleDeleteDocument,
           onRenameDocument: handleRenameDocument,
@@ -602,7 +549,7 @@ const NotebookView = ({
           ref: scrollToBottomRef,
           welcomePrompts: [],
           conversationId,
-          isStreaming: isSendButtonDisabled,
+          isStreaming,
           topicRestrictionEnabled,
           showSourcesChipPopover: true
         }
@@ -627,214 +574,202 @@ const NotebookView = ({
       )) })
     ] });
   };
-  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,
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: classes.root,
+      style: isCompact ? { position: "relative" } : void 0,
+      children: [
+        /* @__PURE__ */ jsx(
+          ToastAlertGroup,
           {
-            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,
+            alerts: toastAlerts,
+            onRemoveAlert: handleRemoveToastAlert
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Drawer,
           {
-            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,
+            isExpanded: !sidebarCollapsed,
+            isInline: true,
+            position: "start",
+            className: classes.drawerContainer,
+            children: /* @__PURE__ */ jsx(
+              DrawerContent,
+              {
+                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,
                       {
-                        variant: "plain",
-                        onClick: () => setSidebarCollapsed(false),
-                        "aria-label": t("notebook.view.sidebar.expand"),
-                        size: "sm",
-                        children: /* @__PURE__ */ jsx(SidebarExpandIcon, {})
+                        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(
-                      Button,
+                    ),
+                    /* @__PURE__ */ jsx(
+                      Tooltip,
                       {
-                        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 })
+                        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: handleCloseNotebook,
-                    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: [
-                  (() => {
-                    const addResourceAction = /* @__PURE__ */ jsx(
-                      "button",
+                    )
+                  ] }),
+                  /* @__PURE__ */ jsxs("div", { className: classes.contentColumn, children: [
+                    !isCompact && /* @__PURE__ */ jsx("div", { className: classes.topBar, children: /* @__PURE__ */ jsx(
+                      Button,
                       {
-                        type: "button",
-                        onClick: () => handleOpenUploadModal(),
-                        "aria-label": t("notebook.view.documents.add"),
-                        className: classes.addResourceButton,
-                        children: /* @__PURE__ */ jsx(PlusIcon, { style: { width: 16, height: 16 } })
+                        variant: "link",
+                        className: classes.closeButton,
+                        onClick: handleCloseNotebook,
+                        icon: /* @__PURE__ */ jsx(TimesIcon, {}),
+                        iconPosition: "end",
+                        children: t("notebook.view.close")
                       }
-                    );
-                    return hasNoDocuments ? /* @__PURE__ */ jsx(
-                      Tooltip,
-                      {
-                        content: t("notebook.view.input.disabledTooltip"),
-                        position: "top",
-                        children: /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
+                    ) }),
+                    /* @__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,
                           {
-                            className: classes.messageBar,
                             hasAttachButton: false,
-                            hasMicrophoneButton: false,
-                            hasStopButton: false,
-                            isSendButtonDisabled: true,
-                            isDisabled: true,
+                            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(
-                      MessageBar,
-                      {
-                        className: classes.messageBar,
-                        hasAttachButton: false,
-                        hasMicrophoneButton: true,
-                        hasStopButton: isSendButtonDisabled,
-                        handleStopButton: isSendButtonDisabled ? handleStopButton : void 0,
-                        isSendButtonDisabled,
-                        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(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(
-      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,
-        onBack: handleOverwriteBack,
-        allFiles: allFilesForOverwrite,
-        duplicateFileNames: filesToOverwrite.map((f) => f.name)
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      DeleteDocumentModal,
-      {
-        isOpen: deleteDocumentTarget !== null,
-        onClose: () => setDeleteDocumentTarget(null),
-        onConfirm: confirmDeleteDocument,
-        documentName: deleteDocumentTarget?.name ?? ""
-      }
-    )
-  ] });
+      ]
+    }
+  );
 };
 
 export { NotebookView };