@red-hat-developer-hub/backstage-plugin-intelligent-assistant 3.2.0 → 4.1.0

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

@@ -1,10 +1,24 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
+import { useCallback } from 'react';
 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 { Card, CardHeader, CardTitle, TextInput, Dropdown, DropdownList, DropdownItem, MenuToggle, CardBody } from '@patternfly/react-core';
+import { CatalogIcon, PenIcon, TrashIcon, EllipsisVIcon } from '@patternfly/react-icons';
+import { useInlineEdit } from '../../hooks/notebooks/useInlineEdit.esm.js';
 import { formatUpdatedLabel } from '../../utils/notebooks-utils.esm.js';
 
+const titleInputStyle = {
+  "--pf-v6-c-form-control--before--BorderStyle": "none",
+  "--pf-v6-c-form-control--after--BorderColor": "var(--pf-t--global--text--color--brand--default)",
+  "--pf-v6-c-form-control--FontSize": "1.25rem",
+  "--pf-v6-c-form-control--PaddingBlockStart": "2px",
+  "--pf-v6-c-form-control--PaddingBlockEnd": "2px",
+  "--pf-v6-c-form-control--PaddingInlineStart": "6px",
+  "--pf-v6-c-form-control--PaddingInlineEnd": "6px",
+  "--pf-v6-c-form-control--OutlineOffset": "0",
+  width: "100%",
+  minWidth: 0,
+  fontWeight: 500
+};
 const NotebookCard = ({
   notebook,
   classes,
@@ -16,8 +30,26 @@ const NotebookCard = ({
   t
 }) => {
   const isMenuOpen = openNotebookMenuId === notebook.session_id;
+  const {
+    isEditing,
+    editValue: editName,
+    setEditValue: setEditName,
+    inputRef,
+    startEditing,
+    save: saveRename,
+    handleKeyDown
+  } = useInlineEdit({
+    currentName: notebook.name,
+    onSave: (newName) => onRename(notebook.session_id, newName),
+    onStart: () => setOpenNotebookMenuId(null)
+  });
+  const handleCardClick = useCallback(() => {
+    if (!isEditing) {
+      onClick(notebook);
+    }
+  }, [isEditing, onClick, notebook]);
   const handleCardKeyDown = (e) => {
-    if (e.key === "Enter" || e.key === " ") {
+    if (!isEditing && (e.key === "Enter" || e.key === " ")) {
       e.preventDefault();
       onClick(notebook);
     }
@@ -28,8 +60,10 @@ const NotebookCard = ({
       className: classes.notebookCard,
       component: "div",
       tabIndex: 0,
-      "aria-label": t("notebooks.card.openAria", { name: notebook.name }),
-      onClick: () => onClick(notebook),
+      "aria-label": t("notebooks.card.openAria", {
+        name: notebook.name
+      }),
+      onClick: handleCardClick,
       onKeyDown: handleCardKeyDown,
       children: [
         /* @__PURE__ */ jsx(
@@ -69,10 +103,10 @@ const NotebookCard = ({
                       DropdownItem,
                       {
                         className: classes.notebookDropdownItem,
+                        icon: /* @__PURE__ */ jsx(PenIcon, {}),
                         onClick: (event) => {
                           event.stopPropagation();
-                          onRename(notebook.session_id);
-                          setOpenNotebookMenuId(null);
+                          startEditing();
                         },
                         children: t("notebooks.actions.rename")
                       }
@@ -81,6 +115,7 @@ const NotebookCard = ({
                       DropdownItem,
                       {
                         className: classes.notebookDropdownItem,
+                        icon: /* @__PURE__ */ jsx(TrashIcon, {}),
                         onClick: (event) => {
                           event.stopPropagation();
                           onDelete(notebook.session_id);
@@ -96,17 +131,39 @@ const NotebookCard = ({
             },
             children: /* @__PURE__ */ jsxs(CardTitle, { className: classes.notebookTitle, children: [
               /* @__PURE__ */ jsx(CatalogIcon, {}),
-              /* @__PURE__ */ jsx(Typography, { component: "span", className: classes.notebookTitleText, children: notebook.name })
+              isEditing ? /* @__PURE__ */ jsx(
+                TextInput,
+                {
+                  ref: inputRef,
+                  style: titleInputStyle,
+                  value: editName,
+                  onChange: (_event, value) => setEditName(value),
+                  onBlur: saveRename,
+                  onKeyDown: handleKeyDown,
+                  "aria-label": t("notebooks.rename.inline.tooltip"),
+                  onClick: (e) => e.stopPropagation()
+                }
+              ) : /* @__PURE__ */ jsx(
+                Typography,
+                {
+                  component: "span",
+                  className: classes.notebookTitleText,
+                  title: t("notebooks.rename.inline.tooltip"),
+                  onClick: (e) => {
+                    e.stopPropagation();
+                    startEditing();
+                  },
+                  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.notebookDocuments, children: /* @__PURE__ */ jsx(Typography, { variant: "body2", children: t("notebooks.documents", {
+            count: notebook.document_count ?? 0
+          }) }) }),
           /* @__PURE__ */ jsx("div", { className: classes.notebookUpdated, children: /* @__PURE__ */ jsx(Typography, { variant: "caption", children: formatUpdatedLabel(notebook.updated_at, t) }) })
         ] }) })
       ]

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

@@ -1 +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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"}
+{"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 { useCallback } from 'react';\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  TextInput,\n} from '@patternfly/react-core';\nimport {\n  CatalogIcon,\n  EllipsisVIcon,\n  PenIcon,\n  TrashIcon,\n} from '@patternfly/react-icons';\n\nimport { useInlineEdit } from '../../hooks/notebooks/useInlineEdit';\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, newName: string) => void;\n  onDelete: (sessionId: string) => void;\n  t: TranslationFunction<typeof intelligentAssistantTranslationRef.T>;\n};\n\nconst titleInputStyle: React.CSSProperties = {\n  '--pf-v6-c-form-control--before--BorderStyle': 'none',\n  '--pf-v6-c-form-control--after--BorderColor':\n    'var(--pf-t--global--text--color--brand--default)',\n  '--pf-v6-c-form-control--FontSize': '1.25rem',\n  '--pf-v6-c-form-control--PaddingBlockStart': '2px',\n  '--pf-v6-c-form-control--PaddingBlockEnd': '2px',\n  '--pf-v6-c-form-control--PaddingInlineStart': '6px',\n  '--pf-v6-c-form-control--PaddingInlineEnd': '6px',\n  '--pf-v6-c-form-control--OutlineOffset': '0',\n  width: '100%',\n  minWidth: 0,\n  fontWeight: 500,\n} as React.CSSProperties;\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 {\n    isEditing,\n    editValue: editName,\n    setEditValue: setEditName,\n    inputRef,\n    startEditing,\n    save: saveRename,\n    handleKeyDown,\n  } = useInlineEdit({\n    currentName: notebook.name,\n    onSave: newName => onRename(notebook.session_id, newName),\n    onStart: () => setOpenNotebookMenuId(null),\n  });\n\n  const handleCardClick = useCallback(() => {\n    if (!isEditing) {\n      onClick(notebook);\n    }\n  }, [isEditing, onClick, notebook]);\n\n  const handleCardKeyDown = (e: React.KeyboardEvent) => {\n    if (!isEditing && (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 as Function)('notebooks.card.openAria', {\n        name: notebook.name,\n      })}\n      onClick={handleCardClick}\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                  icon={<PenIcon />}\n                  onClick={event => {\n                    event.stopPropagation();\n                    startEditing();\n                  }}\n                >\n                  {t('notebooks.actions.rename')}\n                </DropdownItem>\n                <DropdownItem\n                  className={classes.notebookDropdownItem}\n                  icon={<TrashIcon />}\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          {isEditing ? (\n            <TextInput\n              ref={inputRef}\n              style={titleInputStyle}\n              value={editName}\n              onChange={(_event, value) => setEditName(value)}\n              onBlur={saveRename}\n              onKeyDown={handleKeyDown}\n              aria-label={t('notebooks.rename.inline.tooltip')}\n              onClick={e => e.stopPropagation()}\n            />\n          ) : (\n            <Typography\n              component=\"span\"\n              className={classes.notebookTitleText}\n              title={t('notebooks.rename.inline.tooltip')}\n              onClick={e => {\n                e.stopPropagation();\n                startEditing();\n              }}\n            >\n              {notebook.name}\n            </Typography>\n          )}\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              {(t as Function)('notebooks.documents', {\n                count: notebook.document_count ?? 0,\n              })}\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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"}

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

@@ -1,19 +1,24 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { useState, useCallback, useEffect, useRef } from 'react';
+import { useState, useRef, useCallback, useEffect } 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 { TimesIcon, PlusIcon } 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 { useRenameDocument } from '../../hooks/notebooks/useRenameDocument.esm.js';
+import { useRenameNotebookWithAlert } from '../../hooks/notebooks/useRenameNotebookWithAlert.esm.js';
+import { useUploadDocument } from '../../hooks/notebooks/useUploadDocument.esm.js';
 import { useConversationMessages } from '../../hooks/useConversationMessages.esm.js';
 import { useNotebookWelcomePrompts } from '../../hooks/useNotebookWelcomePrompts.esm.js';
+import { useStopConversation } from '../../hooks/useStopConversation.esm.js';
 import { useTranslation } from '../../hooks/useTranslation.esm.js';
 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 { AddDocumentModal } from './AddDocumentModal.esm.js';
 import { DeleteDocumentModal } from './DeleteDocumentModal.esm.js';
@@ -197,11 +202,33 @@ 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--send, & .pf-chatbot__button--microphone": {
+    "& .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",
@@ -236,6 +263,16 @@ const NotebookView = ({
     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 [announcement, setAnnouncement] = useState(
     void 0
   );
@@ -246,10 +283,14 @@ const NotebookView = ({
   const handleDeleteDocument = useCallback((documentId) => {
     setDeleteDocumentTarget({ id: documentId, name: documentId });
   }, []);
+  const { mutateAsync: renameDocument } = useRenameDocument();
   const onComplete = useCallback(
     (message) => {
       setIsSendButtonDisabled(false);
-      setAnnouncement(`Message from Bot: ${message}`);
+      if (!wasStoppedByUserRef.current) {
+        setAnnouncement(`Message from Bot: ${message}`);
+      }
+      wasStoppedByUserRef.current = false;
       queryClient.invalidateQueries({
         queryKey: ["conversationMessages", conversationId]
       });
@@ -268,6 +309,9 @@ const NotebookView = ({
     },
     [notebookCreateMessage, sessionId]
   );
+  const onRequestIdReady = useCallback((rid) => {
+    setRequestId(rid);
+  }, []);
   const { conversationMessages, handleInputPrompt, scrollToBottomRef } = useConversationMessages(
     conversationId,
     userName,
@@ -276,7 +320,8 @@ const NotebookView = ({
     avatar,
     onComplete,
     onStart,
-    createMessageAdapter
+    createMessageAdapter,
+    onRequestIdReady
   );
   const [messages, setMessages] = useState(conversationMessages);
   useEffect(() => {
@@ -284,6 +329,7 @@ const NotebookView = ({
   }, [conversationMessages]);
   const sendMessage = useCallback(
     (message) => {
+      wasStoppedByUserRef.current = false;
       setAnnouncement(
         t("conversation.announcement.userMessage", {
           prompt: message.toString()
@@ -294,11 +340,21 @@ const NotebookView = ({
     },
     [handleInputPrompt, t]
   );
+  const handleStopButton = useCallback(() => {
+    wasStoppedByUserRef.current = true;
+    if (requestId) {
+      stopConversation(requestId);
+      setRequestId("");
+    }
+    setIsSendButtonDisabled(false);
+    setAnnouncement(t("conversation.announcement.responseStopped"));
+  }, [requestId, stopConversation, 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([]);
@@ -309,8 +365,56 @@ const NotebookView = ({
     /* @__PURE__ */ new Set()
   );
   const [filesToOverwrite, setFilesToOverwrite] = useState([]);
+  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 {
+        await renameDocument({ sessionId, documentId, newTitle });
+      } catch {
+        setToastAlerts((prev) => [
+          {
+            key: Date.now() + documentId,
+            title: t("notebook.document.rename.error", {
+              documentName: documentId
+            }),
+            variant: "danger"
+          },
+          ...prev
+        ]);
+      }
+    },
+    [renameDocument, sessionId, t]
+  );
+  const handleRenameNotebook = useRenameNotebookWithAlert({
+    setAlerts: setToastAlerts,
+    getNotebookName: () => notebookName
+  });
   const confirmDeleteDocument = useCallback(async () => {
     if (!deleteDocumentTarget) return;
     const { id: documentId, name: documentName } = deleteDocumentTarget;
@@ -341,6 +445,9 @@ const NotebookView = ({
   }, [deleteDocumentTarget, notebooksApi, sessionId, queryClient, t]);
   const handleOpenUploadModal = () => setIsUploadModalOpen(true);
   const handleCloseUploadModal = () => setIsUploadModalOpen(false);
+  const handleCloseNotebook = () => {
+    onClose();
+  };
   const handleFilesUploading = (files) => {
     setUploadingFileNames((prev) => {
       const newNames = files.map((f) => f.name).filter((name) => !prev.includes(name));
@@ -367,23 +474,37 @@ const NotebookView = ({
       ...prev
     ]);
   };
-  const handleDuplicatesFound = (files) => {
-    setFilesToOverwrite(files);
+  const handleDuplicatesFound = (duplicateFiles, allFiles) => {
+    setFilesToOverwrite(duplicateFiles);
+    setAllFilesForOverwrite(allFiles);
+    setIsUploadModalOpen(false);
     setIsOverwriteModalOpen(true);
   };
-  const handleOverwriteConfirm = () => {
-    const files = filesToOverwrite;
+  const handleOverwriteConfirm = (filesToUpload) => {
     setIsOverwriteModalOpen(false);
     setFilesToOverwrite([]);
-    if (files.length === 0) return;
-    setFilesToAddToModal(files);
+    setAllFilesForOverwrite([]);
+    if (filesToUpload.length === 0) return;
+    runFileUploads(uploadMutation, sessionId, filesToUpload, {
+      onUploading: handleFilesUploading,
+      onStarted: handleUploadStarted,
+      onFailed: handleUploadFailed
+    });
   };
   const handleFilesAddedToModal = () => {
     setFilesToAddToModal([]);
   };
+  const handleOverwriteBack = () => {
+    setIsOverwriteModalOpen(false);
+    setFilesToAddToModal(allFilesForOverwrite);
+    setFilesToOverwrite([]);
+    setAllFilesForOverwrite([]);
+    setIsUploadModalOpen(true);
+  };
   const handleOverwriteCancel = () => {
     setIsOverwriteModalOpen(false);
     setFilesToOverwrite([]);
+    setAllFilesForOverwrite([]);
   };
   const pollingResults = useDocumentStatusPolling(sessionId, pendingUploads);
   useEffect(() => {
@@ -452,7 +573,9 @@ const NotebookView = ({
           hasUploadsInProgress,
           onToggleCollapse: () => setSidebarCollapsed((prev) => !prev),
           onAddDocument: handleOpenUploadModal,
-          onDeleteDocument: handleDeleteDocument
+          onDeleteDocument: handleDeleteDocument,
+          onRenameDocument: handleRenameDocument,
+          onRenameNotebook: (newName) => handleRenameNotebook(sessionId, newName)
         }
       )
     }
@@ -594,7 +717,7 @@ const NotebookView = ({
                   {
                     variant: "link",
                     className: classes.closeButton,
-                    onClick: onClose,
+                    onClick: handleCloseNotebook,
                     icon: /* @__PURE__ */ jsx(TimesIcon, {}),
                     iconPosition: "end",
                     children: t("notebook.view.close")
@@ -603,35 +726,70 @@ const NotebookView = ({
                 /* @__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")
+                  (() => {
+                    const addResourceAction = /* @__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 } })
+                      }
+                    );
+                    return hasNoDocuments ? /* @__PURE__ */ jsx(
+                      Tooltip,
+                      {
+                        content: t("notebook.view.input.disabledTooltip"),
+                        position: "top",
+                        children: /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
+                          MessageBar,
+                          {
+                            className: classes.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: 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(
-                    MessageBar,
-                    {
-                      hasAttachButton: false,
-                      hasMicrophoneButton: true,
-                      hasStopButton: false,
-                      isSendButtonDisabled,
-                      onSendMessage: sendMessage,
-                      placeholder: t("notebook.view.input.placeholder")
-                    }
-                  ),
+                      }
+                    );
+                  })(),
                   /* @__PURE__ */ jsx(ChatbotFootnoteWithIcon, { label: t("footer.accuracy.label") })
                 ] })
               ] })
@@ -662,7 +820,9 @@ const NotebookView = ({
         isOpen: isOverwriteModalOpen,
         onClose: handleOverwriteCancel,
         onConfirm: handleOverwriteConfirm,
-        fileNames: filesToOverwrite.map((f) => f.name)
+        onBack: handleOverwriteBack,
+        allFiles: allFilesForOverwrite,
+        duplicateFileNames: filesToOverwrite.map((f) => f.name)
       }
     ),
     /* @__PURE__ */ jsx(