@red-hat-developer-hub/backstage-plugin-lightspeed 2.6.2 → 2.6.4

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 ## @red-hat-developer-hub/backstage-plugin-lightspeed
 
+## 2.6.4
+
+### Patch Changes
+
+- cab4992: Internationalize the Lightspeed floating action button: tooltip and `aria-label` use `tooltip.fab.open` / `tooltip.fab.close`, with German, Spanish, French, Italian, and Japanese translations.
+  - @red-hat-developer-hub/backstage-plugin-lightspeed-common@2.6.4
+
+## 2.6.3
+
+### Patch Changes
+
+- d4d74cf: ### Lightspeed shell and Notebooks
+  - **Fullscreen**: Chat and Notebooks stay on separate tabs. While the Notebooks tab is active, chat-only header actions (for example chat history, pinned chats, and MCP settings) are hidden so the header matches the active surface.
+  - **Overlay and docked**: Only the **Chat** surface is shown; the Chat/Notebooks tab strip is not shown, because Notebooks is intended for the fullscreen experience only.
+  - **Leaving fullscreen from Notebooks**: If you switch from fullscreen while on Notebooks to overlay or docked, you land on **Chat** in the shell, and the next time you open fullscreen you start on **Chat** again (no lingering Notebooks selection).
+  - @red-hat-developer-hub/backstage-plugin-lightspeed-common@2.6.3
+
 ## 2.6.2
 
 ### Patch Changes

package/dist/alpha/LightspeedFAB.esm.js

@@ -7,6 +7,7 @@ import { ChatbotDisplayMode } from '@patternfly/chatbot';
 import { LightspeedFABIcon } from '../components/LightspeedIcon.esm.js';
 import { DOCKED_CONTENT_OFFSET } from '../const.esm.js';
 import { useLightspeedDrawerContext } from '../hooks/useLightspeedDrawerContext.esm.js';
+import { useTranslation } from '../hooks/useTranslation.esm.js';
 
 const useStyles = makeStyles((theme) => ({
   fab: {
@@ -30,6 +31,7 @@ const useStyles = makeStyles((theme) => ({
   }
 }));
 const LightspeedFAB = () => {
+  const { t } = useTranslation();
   const { isChatbotActive, toggleChatbot, displayMode } = useLightspeedDrawerContext();
   const fabButton = useStyles();
   if (displayMode === ChatbotDisplayMode.embedded) {
@@ -44,7 +46,7 @@ const LightspeedFAB = () => {
       children: /* @__PURE__ */ jsx(
         Tooltip,
         {
-          title: isChatbotActive ? "Close Lightspeed" : "Open Lightspeed",
+          title: isChatbotActive ? t("tooltip.fab.close") : t("tooltip.fab.open"),
           placement: "left",
           children: /* @__PURE__ */ jsx(
             Fab,
@@ -53,7 +55,7 @@ const LightspeedFAB = () => {
               variant: "circular",
               size: "small",
               onClick: toggleChatbot,
-              "aria-label": isChatbotActive ? "lightspeed-close" : "lightspeed-open",
+              "aria-label": isChatbotActive ? t("tooltip.fab.close") : t("tooltip.fab.open"),
               className: fabButton.fab,
               sx: { borderRadius: "100% !important" },
               children: isChatbotActive ? /* @__PURE__ */ jsx(CloseIcon, { fontSize: "small" }) : /* @__PURE__ */ jsx(LightspeedFABIcon, {})

package/dist/alpha/LightspeedFAB.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"LightspeedFAB.esm.js","sources":["../../src/alpha/LightspeedFAB.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 Close from '@mui/icons-material/Close';\nimport Fab from '@mui/material/Fab';\nimport Tooltip from '@mui/material/Tooltip';\nimport { makeStyles } from '@mui/styles';\nimport { ChatbotDisplayMode } from '@patternfly/chatbot';\n\nimport { LightspeedFABIcon } from '../components/LightspeedIcon';\nimport { DOCKED_CONTENT_OFFSET } from '../const';\nimport { useLightspeedDrawerContext } from '../hooks/useLightspeedDrawerContext';\n\nconst useStyles = makeStyles(theme => ({\n  fab: {\n    opacity: '1 !important',\n    backgroundColor: `${theme?.palette?.primary?.main ?? '#1976d2'} !important`,\n    color: `${theme?.palette?.primary?.contrastText ?? '#fff'} !important`,\n    boxShadow: `${\n      theme?.shadows?.[6] ??\n      '0px 3px 5px -1px rgba(0,0,0,0.2), 0px 6px 10px 0px rgba(0,0,0,0.14), 0px 1px 18px 0px rgba(0,0,0,0.12)'\n    } !important`,\n  },\n  'fab-button': {\n    bottom: `calc(${theme?.spacing?.(2) ?? '16px'} + 1.5em)`,\n    right: `calc(${theme?.spacing?.(2) ?? '16px'} + 1.5em)`,\n    alignItems: 'end',\n    zIndex: 200,\n    display: 'flex',\n    position: 'fixed',\n\n    // When ApplicationDrawer is docked, match main content inset\n    'body.docked-drawer-open &': {\n      transition: 'margin-right 0.3s ease',\n      marginRight: DOCKED_CONTENT_OFFSET,\n    },\n  },\n}));\n\n/**\n * @alpha\n * Lightspeed Floating action button to open/close the lightspeed chatbot\n */\n\nexport const LightspeedFAB = () => {\n  const { isChatbotActive, toggleChatbot, displayMode } =\n    useLightspeedDrawerContext();\n  const fabButton = useStyles();\n\n  if (displayMode === ChatbotDisplayMode.embedded) {\n    return null;\n  }\n\n  return (\n    <div\n      className={fabButton['fab-button']}\n      id=\"lightspeed-fab\"\n      data-testid=\"lightspeed-fab\"\n    >\n      <Tooltip\n        title={isChatbotActive ? 'Close Lightspeed' : 'Open Lightspeed'}\n        placement=\"left\"\n      >\n        <Fab\n          color=\"primary\"\n          variant=\"circular\"\n          size=\"small\"\n          onClick={toggleChatbot}\n          aria-label={isChatbotActive ? 'lightspeed-close' : 'lightspeed-open'}\n          className={fabButton.fab}\n          sx={{ borderRadius: '100% !important' }}\n        >\n          {isChatbotActive ? <Close fontSize=\"small\" /> : <LightspeedFABIcon />}\n        </Fab>\n      </Tooltip>\n    </div>\n  );\n};\n"],"names":["Close"],"mappings":";;;;;;;;;;AA0BA,MAAM,SAAA,GAAY,WAAW,CAAA,KAAA,MAAU;AAAA,EACrC,GAAA,EAAK;AAAA,IACH,OAAA,EAAS,cAAA;AAAA,IACT,iBAAiB,CAAA,EAAG,KAAA,EAAO,OAAA,EAAS,OAAA,EAAS,QAAQ,SAAS,CAAA,WAAA,CAAA;AAAA,IAC9D,OAAO,CAAA,EAAG,KAAA,EAAO,OAAA,EAAS,OAAA,EAAS,gBAAgB,MAAM,CAAA,WAAA,CAAA;AAAA,IACzD,WAAW,CAAA,EACT,KAAA,EAAO,OAAA,GAAU,CAAC,KAClB,wGACF,CAAA,WAAA;AAAA,GACF;AAAA,EACA,YAAA,EAAc;AAAA,IACZ,QAAQ,CAAA,KAAA,EAAQ,KAAA,EAAO,OAAA,GAAU,CAAC,KAAK,MAAM,CAAA,SAAA,CAAA;AAAA,IAC7C,OAAO,CAAA,KAAA,EAAQ,KAAA,EAAO,OAAA,GAAU,CAAC,KAAK,MAAM,CAAA,SAAA,CAAA;AAAA,IAC5C,UAAA,EAAY,KAAA;AAAA,IACZ,MAAA,EAAQ,GAAA;AAAA,IACR,OAAA,EAAS,MAAA;AAAA,IACT,QAAA,EAAU,OAAA;AAAA;AAAA,IAGV,2BAAA,EAA6B;AAAA,MAC3B,UAAA,EAAY,wBAAA;AAAA,MACZ,WAAA,EAAa;AAAA;AACf;AAEJ,CAAA,CAAE,CAAA;AAOK,MAAM,gBAAgB,MAAM;AACjC,EAAA,MAAM,EAAE,eAAA,EAAiB,aAAA,EAAe,WAAA,KACtC,0BAAA,EAA2B;AAC7B,EAAA,MAAM,YAAY,SAAA,EAAU;AAE5B,EAAA,IAAI,WAAA,KAAgB,mBAAmB,QAAA,EAAU;AAC/C,IAAA,OAAO,IAAA;AAAA,EACT;AAEA,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,UAAU,YAAY,CAAA;AAAA,MACjC,EAAA,EAAG,gBAAA;AAAA,MACH,aAAA,EAAY,gBAAA;AAAA,MAEZ,QAAA,kBAAA,GAAA;AAAA,QAAC,OAAA;AAAA,QAAA;AAAA,UACC,KAAA,EAAO,kBAAkB,kBAAA,GAAqB,iBAAA;AAAA,UAC9C,SAAA,EAAU,MAAA;AAAA,UAEV,QAAA,kBAAA,GAAA;AAAA,YAAC,GAAA;AAAA,YAAA;AAAA,cACC,KAAA,EAAM,SAAA;AAAA,cACN,OAAA,EAAQ,UAAA;AAAA,cACR,IAAA,EAAK,OAAA;AAAA,cACL,OAAA,EAAS,aAAA;AAAA,cACT,YAAA,EAAY,kBAAkB,kBAAA,GAAqB,iBAAA;AAAA,cACnD,WAAW,SAAA,CAAU,GAAA;AAAA,cACrB,EAAA,EAAI,EAAE,YAAA,EAAc,iBAAA,EAAkB;AAAA,cAErC,4CAAkB,GAAA,CAACA,SAAA,EAAA,EAAM,UAAS,OAAA,EAAQ,CAAA,uBAAM,iBAAA,EAAA,EAAkB;AAAA;AAAA;AACrE;AAAA;AACF;AAAA,GACF;AAEJ;;;;"}
+{"version":3,"file":"LightspeedFAB.esm.js","sources":["../../src/alpha/LightspeedFAB.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 Close from '@mui/icons-material/Close';\nimport Fab from '@mui/material/Fab';\nimport Tooltip from '@mui/material/Tooltip';\nimport { makeStyles } from '@mui/styles';\nimport { ChatbotDisplayMode } from '@patternfly/chatbot';\n\nimport { LightspeedFABIcon } from '../components/LightspeedIcon';\nimport { DOCKED_CONTENT_OFFSET } from '../const';\nimport { useLightspeedDrawerContext } from '../hooks/useLightspeedDrawerContext';\nimport { useTranslation } from '../hooks/useTranslation';\n\nconst useStyles = makeStyles(theme => ({\n  fab: {\n    opacity: '1 !important',\n    backgroundColor: `${theme?.palette?.primary?.main ?? '#1976d2'} !important`,\n    color: `${theme?.palette?.primary?.contrastText ?? '#fff'} !important`,\n    boxShadow: `${\n      theme?.shadows?.[6] ??\n      '0px 3px 5px -1px rgba(0,0,0,0.2), 0px 6px 10px 0px rgba(0,0,0,0.14), 0px 1px 18px 0px rgba(0,0,0,0.12)'\n    } !important`,\n  },\n  'fab-button': {\n    bottom: `calc(${theme?.spacing?.(2) ?? '16px'} + 1.5em)`,\n    right: `calc(${theme?.spacing?.(2) ?? '16px'} + 1.5em)`,\n    alignItems: 'end',\n    zIndex: 200,\n    display: 'flex',\n    position: 'fixed',\n\n    // When ApplicationDrawer is docked, match main content inset\n    'body.docked-drawer-open &': {\n      transition: 'margin-right 0.3s ease',\n      marginRight: DOCKED_CONTENT_OFFSET,\n    },\n  },\n}));\n\n/**\n * @alpha\n * Lightspeed Floating action button to open/close the lightspeed chatbot\n */\n\nexport const LightspeedFAB = () => {\n  const { t } = useTranslation();\n  const { isChatbotActive, toggleChatbot, displayMode } =\n    useLightspeedDrawerContext();\n  const fabButton = useStyles();\n\n  if (displayMode === ChatbotDisplayMode.embedded) {\n    return null;\n  }\n\n  return (\n    <div\n      className={fabButton['fab-button']}\n      id=\"lightspeed-fab\"\n      data-testid=\"lightspeed-fab\"\n    >\n      <Tooltip\n        title={isChatbotActive ? t('tooltip.fab.close') : t('tooltip.fab.open')}\n        placement=\"left\"\n      >\n        <Fab\n          color=\"primary\"\n          variant=\"circular\"\n          size=\"small\"\n          onClick={toggleChatbot}\n          aria-label={\n            isChatbotActive ? t('tooltip.fab.close') : t('tooltip.fab.open')\n          }\n          className={fabButton.fab}\n          sx={{ borderRadius: '100% !important' }}\n        >\n          {isChatbotActive ? <Close fontSize=\"small\" /> : <LightspeedFABIcon />}\n        </Fab>\n      </Tooltip>\n    </div>\n  );\n};\n"],"names":["Close"],"mappings":";;;;;;;;;;;AA2BA,MAAM,SAAA,GAAY,WAAW,CAAA,KAAA,MAAU;AAAA,EACrC,GAAA,EAAK;AAAA,IACH,OAAA,EAAS,cAAA;AAAA,IACT,iBAAiB,CAAA,EAAG,KAAA,EAAO,OAAA,EAAS,OAAA,EAAS,QAAQ,SAAS,CAAA,WAAA,CAAA;AAAA,IAC9D,OAAO,CAAA,EAAG,KAAA,EAAO,OAAA,EAAS,OAAA,EAAS,gBAAgB,MAAM,CAAA,WAAA,CAAA;AAAA,IACzD,WAAW,CAAA,EACT,KAAA,EAAO,OAAA,GAAU,CAAC,KAClB,wGACF,CAAA,WAAA;AAAA,GACF;AAAA,EACA,YAAA,EAAc;AAAA,IACZ,QAAQ,CAAA,KAAA,EAAQ,KAAA,EAAO,OAAA,GAAU,CAAC,KAAK,MAAM,CAAA,SAAA,CAAA;AAAA,IAC7C,OAAO,CAAA,KAAA,EAAQ,KAAA,EAAO,OAAA,GAAU,CAAC,KAAK,MAAM,CAAA,SAAA,CAAA;AAAA,IAC5C,UAAA,EAAY,KAAA;AAAA,IACZ,MAAA,EAAQ,GAAA;AAAA,IACR,OAAA,EAAS,MAAA;AAAA,IACT,QAAA,EAAU,OAAA;AAAA;AAAA,IAGV,2BAAA,EAA6B;AAAA,MAC3B,UAAA,EAAY,wBAAA;AAAA,MACZ,WAAA,EAAa;AAAA;AACf;AAEJ,CAAA,CAAE,CAAA;AAOK,MAAM,gBAAgB,MAAM;AACjC,EAAA,MAAM,EAAE,CAAA,EAAE,GAAI,cAAA,EAAe;AAC7B,EAAA,MAAM,EAAE,eAAA,EAAiB,aAAA,EAAe,WAAA,KACtC,0BAAA,EAA2B;AAC7B,EAAA,MAAM,YAAY,SAAA,EAAU;AAE5B,EAAA,IAAI,WAAA,KAAgB,mBAAmB,QAAA,EAAU;AAC/C,IAAA,OAAO,IAAA;AAAA,EACT;AAEA,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,UAAU,YAAY,CAAA;AAAA,MACjC,EAAA,EAAG,gBAAA;AAAA,MACH,aAAA,EAAY,gBAAA;AAAA,MAEZ,QAAA,kBAAA,GAAA;AAAA,QAAC,OAAA;AAAA,QAAA;AAAA,UACC,OAAO,eAAA,GAAkB,CAAA,CAAE,mBAAmB,CAAA,GAAI,EAAE,kBAAkB,CAAA;AAAA,UACtE,SAAA,EAAU,MAAA;AAAA,UAEV,QAAA,kBAAA,GAAA;AAAA,YAAC,GAAA;AAAA,YAAA;AAAA,cACC,KAAA,EAAM,SAAA;AAAA,cACN,OAAA,EAAQ,UAAA;AAAA,cACR,IAAA,EAAK,OAAA;AAAA,cACL,OAAA,EAAS,aAAA;AAAA,cACT,cACE,eAAA,GAAkB,CAAA,CAAE,mBAAmB,CAAA,GAAI,EAAE,kBAAkB,CAAA;AAAA,cAEjE,WAAW,SAAA,CAAU,GAAA;AAAA,cACrB,EAAA,EAAI,EAAE,YAAA,EAAc,iBAAA,EAAkB;AAAA,cAErC,4CAAkB,GAAA,CAACA,SAAA,EAAA,EAAM,UAAS,OAAA,EAAQ,CAAA,uBAAM,iBAAA,EAAA,EAAkB;AAAA;AAAA;AACrE;AAAA;AACF;AAAA,GACF;AAEJ;;;;"}

package/dist/alpha.d.ts

@@ -161,6 +161,8 @@ declare const lightspeedTranslationRef: _backstage_frontend_plugin_api.Translati
     readonly "tooltip.backToBottom": string;
     readonly "tooltip.settings": string;
     readonly "tooltip.close": string;
+    readonly "tooltip.fab.open": string;
+    readonly "tooltip.fab.close": string;
     readonly "modal.title.preview": string;
     readonly "modal.title.edit": string;
     readonly "icon.lightspeed.alt": string;

package/dist/components/LightSpeedChat.esm.js

@@ -1,6 +1,6 @@
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-import { useState, useEffect, useRef, useCallback, useLayoutEffect, useMemo } from 'react';
-import { useNavigate, useMatch } from 'react-router-dom';
+import { useState, useEffect, useRef, useLayoutEffect, useCallback, useMemo } from 'react';
+import { useNavigate, useMatch, useLocation } from 'react-router-dom';
 import { Button, makeStyles } from '@material-ui/core';
 import { ChatbotDisplayMode, ChatbotContent, ChatbotFooter, MessageBar, ChatbotFootnote, Settings, Chatbot, ChatbotHeader, ChatbotHeaderMain, ChatbotHeaderMenu, ChatbotHeaderTitle, FileDropZone, ChatbotAlert } from '@patternfly/chatbot';
 import ChatbotConversationHistoryNav from '@patternfly/chatbot/dist/dynamic/ChatbotConversationHistoryNav';
@@ -91,6 +91,7 @@ const useStyles = makeStyles((theme) => ({
     },
     "& .pf-v6-c-tabs__link, & .pf-v5-c-tabs__link": {
       backgroundColor: "transparent",
+      paddingTop: theme.spacing(2),
       paddingBottom: theme.spacing(2),
       fontWeight: 700,
       cursor: "pointer"
@@ -384,12 +385,39 @@ const LightspeedChat = ({
   const notebooksRouteMatch = useMatch("/lightspeed/notebooks");
   const notebookViewRouteMatch = useMatch("/lightspeed/notebooks/:notebookId");
   const routeNotebookId = notebookViewRouteMatch?.params?.notebookId;
+  const {
+    displayMode,
+    setDisplayMode,
+    currentConversationId: routeConversationId,
+    setCurrentConversationId,
+    draftMessage,
+    setDraftMessage,
+    consumePendingOverlayThreadHandoff,
+    shellViewTab,
+    setShellViewTab
+  } = useLightspeedDrawerContext();
+  const isFullscreenMode = displayMode === ChatbotDisplayMode.embedded;
+  const location = useLocation();
+  const isNotebooksFullscreenPath = location.pathname === "/lightspeed/notebooks" || location.pathname.startsWith("/lightspeed/notebooks/");
   const user = useBackstageUserIdentity();
   const [filterValue, setFilterValue] = useState("");
   const [announcement, setAnnouncement] = useState("");
-  const [activeTab, setActiveTab] = useState(
-    notebooksRouteMatch || notebookViewRouteMatch ? 1 : 0
-  );
+  const [activeTab, setActiveTab] = useState(() => {
+    if (!isFullscreenMode) {
+      return 0;
+    }
+    if (notebooksRouteMatch || notebookViewRouteMatch) {
+      return 1;
+    }
+    const p = location.pathname;
+    if (p.startsWith("/lightspeed/conversation/")) {
+      return 0;
+    }
+    if (shellViewTab === 1) {
+      return 1;
+    }
+    return 0;
+  });
   const { allowed: hasNotebooksAccess, loading: notebooksPermissionLoading } = useLightspeedNotebooksPermission();
   const notebooksPermissionResolved = !notebooksPermissionLoading && hasNotebooksAccess;
   const { data: notebooks = [], refetch: refetchNotebooks } = useNotebookSessions(notebooksPermissionResolved);
@@ -446,22 +474,37 @@ const LightspeedChat = ({
   const [hasChatContentOverflow, setHasChatContentOverflow] = useState(false);
   const wasStoppedByUserRef = useRef(false);
   const { isReady, lastOpenedId, setLastOpenedId, clearLastOpenedId } = useLastOpenedConversation(user);
-  const {
-    displayMode,
-    setDisplayMode,
-    currentConversationId: routeConversationId,
-    setCurrentConversationId,
-    draftMessage,
-    setDraftMessage,
-    consumePendingOverlayThreadHandoff
-  } = useLightspeedDrawerContext();
-  const isFullscreenMode = displayMode === ChatbotDisplayMode.embedded;
   const showChatPanel = !isFullscreenMode || activeTab === 0;
   const showNotebooksPanel = isFullscreenMode && activeTab !== 0;
   const [isChatHistoryDrawerOpen, setIsChatHistoryDrawerOpen] = useState(!isMobile && isFullscreenMode);
+  useLayoutEffect(() => {
+    if (!isFullscreenMode) {
+      return;
+    }
+    if (isNotebooksFullscreenPath) {
+      setActiveTab(1);
+      setShellViewTab(1);
+      return;
+    }
+    const isBaseLightspeedChatRoute = location.pathname === "/lightspeed" || location.pathname === "/lightspeed/";
+    if (shellViewTab === 1 && isBaseLightspeedChatRoute) {
+      navigate("/lightspeed/notebooks", { replace: true });
+      return;
+    }
+    setActiveTab(0);
+    setShellViewTab(0);
+  }, [
+    isFullscreenMode,
+    isNotebooksFullscreenPath,
+    shellViewTab,
+    location.pathname,
+    navigate,
+    setShellViewTab
+  ]);
   const handleNotebookTabSelect = (_event, tabIndex) => {
     const nextTab = Number(tabIndex);
     setActiveTab(nextTab);
+    setShellViewTab(nextTab);
     if (nextTab === 1) {
       navigate("/lightspeed/notebooks");
       if (notebooksPermissionResolved) {
@@ -473,6 +516,25 @@ const LightspeedChat = ({
       );
     }
   };
+  const setDisplayModeFromHeader = useCallback(
+    (mode) => {
+      if (mode !== ChatbotDisplayMode.embedded) {
+        setDisplayMode(mode);
+        return;
+      }
+      if (activeTab === 1) {
+        const sid = activeNotebook?.session_id;
+        setDisplayMode(
+          mode,
+          void 0,
+          sid ? { notebookSessionId: sid } : "notebooks"
+        );
+      } else {
+        setDisplayMode(mode);
+      }
+    },
+    [setDisplayMode, activeTab, activeNotebook?.session_id]
+  );
   const handleCreateNotebook = useCallback(() => {
     createNotebookMutation.mutate(
       { name: UNTITLED_NOTEBOOK_NAME },
@@ -1346,7 +1408,7 @@ const LightspeedChat = ({
         children: [
           /* @__PURE__ */ jsxs(ChatbotHeader, { className: classes.header, children: [
             /* @__PURE__ */ jsxs(ChatbotHeaderMain, { children: [
-              /* @__PURE__ */ jsx(
+              showChatPanel && /* @__PURE__ */ jsx(
                 ChatbotHeaderMenu,
                 {
                   "aria-expanded": isChatHistoryDrawerOpen,
@@ -1371,7 +1433,8 @@ const LightspeedChat = ({
                 isPinningChatsEnabled,
                 isModelSelectorDisabled: isSendButtonDisabled,
                 hideModelSelector: showNotebooksPanel,
-                setDisplayMode,
+                showChatTabOptions: !showNotebooksPanel,
+                setDisplayMode: setDisplayModeFromHeader,
                 displayMode,
                 onPinnedChatsToggle: handlePinningChatsToggle,
                 onMcpSettingsClick: () => setIsMcpSettingsOpen(true)
@@ -1488,7 +1551,9 @@ const LightspeedChat = ({
               classes,
               openNotebookMenuId,
               setOpenNotebookMenuId,
-              onSelectNotebook: (notebook) => navigate(`/lightspeed/notebooks/${notebook.session_id}`),
+              onSelectNotebook: (notebook) => {
+                navigate(`/lightspeed/notebooks/${notebook.session_id}`);
+              },
               onRename: setRenameNotebookId,
               onDelete: setDeleteNotebookId,
               onCreateNotebook: handleCreateNotebook,
@@ -1506,7 +1571,10 @@ const LightspeedChat = ({
                   variant: "outlined",
                   color: "primary",
                   style: { borderRadius: "20px" },
-                  onClick: () => setActiveTab(0),
+                  onClick: () => {
+                    setActiveTab(0);
+                    setShellViewTab(0);
+                  },
                   children: t("permission.notebooks.goBack")
                 }
               )