@red-hat-developer-hub/backstage-plugin-lightspeed 2.6.8 → 2.7.0

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 ## @red-hat-developer-hub/backstage-plugin-lightspeed
 
+## 2.7.0
+
+### Minor Changes
+
+- 41c1901: Implemented fullscreen chat UX updates including:
+  - Collapsible history panel with new expand/collapse icons
+  - Redesigned message bar with inline model selector and attachment menu
+  - New collapsed history strip with quick new chat functionality
+  - Updated header with Lightspeed logo
+  - Improved conversation list with hover-only options menu
+
+### Patch Changes
+
+- @red-hat-developer-hub/backstage-plugin-lightspeed-common@2.7.0
+
 ## 2.6.8
 
 ### Patch Changes

package/dist/alpha.d.ts

@@ -155,6 +155,9 @@ declare const lightspeedTranslationRef: _backstage_frontend_plugin_api.Translati
     readonly "tooltip.send": string;
     readonly "tooltip.microphone.active": string;
     readonly "tooltip.microphone.inactive": string;
+    readonly "tooltip.expandHistoryPanel": string;
+    readonly "tooltip.collapseHistoryPanel": string;
+    readonly "tooltip.quickNewChat": string;
     readonly "button.newChat": string;
     readonly "tooltip.chatHistoryMenu": string;
     readonly "tooltip.responseRecorded": string;
@@ -164,6 +167,10 @@ declare const lightspeedTranslationRef: _backstage_frontend_plugin_api.Translati
     readonly "tooltip.close": string;
     readonly "tooltip.fab.open": string;
     readonly "tooltip.fab.close": string;
+    readonly "attach.menu.title": string;
+    readonly "attach.menu.description": string;
+    readonly "history.section.pinned": string;
+    readonly "history.section.recent": string;
     readonly "modal.title.preview": string;
     readonly "modal.title.edit": string;
     readonly "icon.lightspeed.alt": string;

package/dist/components/CollapsedHistoryStrip.esm.js

@@ -0,0 +1,94 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { makeStyles } from '@material-ui/core';
+import { Tooltip, Button } from '@patternfly/react-core';
+import { useTranslation } from '../hooks/useTranslation.esm.js';
+import { SidebarExpandIcon } from './notebooks/SidebarCollapseIcon.esm.js';
+
+const EditSquareIcon = ({ className }) => /* @__PURE__ */ jsx(
+  "svg",
+  {
+    className,
+    width: "20",
+    height: "20",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    style: { verticalAlign: "middle" },
+    children: /* @__PURE__ */ jsx(
+      "path",
+      {
+        d: "M5 21C4.45 21 3.97917 20.8042 3.5875 20.4125C3.19583 20.0208 3 19.55 3 19V5C3 4.45 3.19583 3.97917 3.5875 3.5875C3.97917 3.19583 4.45 3 5 3H14L12 5H5V19H19V12L21 10V19C21 19.55 20.8042 20.0208 20.4125 20.4125C20.0208 20.8042 19.55 21 19 21H5ZM16.175 5.775L17.6 7.2L12 12.8V14H13.2L18.8 8.4L20.225 9.825L14.275 15.775C14.1083 15.9417 13.9167 16.0667 13.7 16.15C13.4833 16.2333 13.2583 16.275 13.025 16.275H11C10.7167 16.275 10.4792 16.1792 10.2875 15.9875C10.0958 15.7958 10 15.5583 10 15.275V13.25C10 13.0167 10.0417 12.7917 10.125 12.575C10.2083 12.3583 10.3333 12.1667 10.5 12L16.175 5.775ZM20.225 9.825L16.175 5.775L18.175 3.775C18.5583 3.39167 19.0292 3.2 19.5875 3.2C20.1458 3.2 20.6167 3.39167 21 3.775L22.225 5C22.6083 5.38333 22.8 5.85417 22.8 6.4125C22.8 6.97083 22.6083 7.44167 22.225 7.825L20.225 9.825Z",
+        fill: "currentColor"
+      }
+    )
+  }
+);
+const useStyles = makeStyles((theme) => ({
+  strip: {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    paddingTop: theme.spacing(1.5),
+    gap: theme.spacing(1.5),
+    borderRight: "1px solid var(--pf-t--global--border--color--default)",
+    width: 48,
+    minWidth: 48,
+    flexShrink: 0,
+    backgroundColor: "var(--pf-t--global--background--color--primary--default)",
+    height: "100%"
+  },
+  iconButton: {
+    padding: 8,
+    minWidth: 0,
+    lineHeight: 1,
+    borderRadius: "50%",
+    color: "var(--pf-t--global--icon--color--regular)",
+    "&:hover": {
+      color: "var(--pf-t--global--icon--color--hover)",
+      backgroundColor: "var(--pf-t--global--background--color--action--plain--hover)"
+    }
+  },
+  newChatIconButton: {
+    padding: 0,
+    minWidth: 0,
+    lineHeight: 1,
+    color: "var(--pf-t--global--color--brand--default)",
+    "&:hover": {
+      color: "var(--pf-t--global--color--brand--hover)"
+    }
+  }
+}));
+const CollapsedHistoryStrip = ({
+  onExpand,
+  onNewChat,
+  newChatDisabled = false
+}) => {
+  const classes = useStyles();
+  const { t } = useTranslation();
+  return /* @__PURE__ */ jsxs("div", { className: classes.strip, children: [
+    /* @__PURE__ */ jsx(Tooltip, { content: t("tooltip.expandHistoryPanel"), position: "right", children: /* @__PURE__ */ jsx(
+      Button,
+      {
+        variant: "plain",
+        className: classes.iconButton,
+        onClick: onExpand,
+        "aria-label": t("tooltip.expandHistoryPanel"),
+        children: /* @__PURE__ */ jsx(SidebarExpandIcon, {})
+      }
+    ) }),
+    /* @__PURE__ */ jsx(Tooltip, { content: t("tooltip.quickNewChat"), position: "right", children: /* @__PURE__ */ jsx(
+      Button,
+      {
+        variant: "plain",
+        className: classes.newChatIconButton,
+        onClick: onNewChat,
+        "aria-label": t("tooltip.quickNewChat"),
+        isDisabled: newChatDisabled,
+        children: /* @__PURE__ */ jsx(EditSquareIcon, {})
+      }
+    ) })
+  ] });
+};
+
+export { CollapsedHistoryStrip, EditSquareIcon };
+//# sourceMappingURL=CollapsedHistoryStrip.esm.js.map

package/dist/components/CollapsedHistoryStrip.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CollapsedHistoryStrip.esm.js","sources":["../../src/components/CollapsedHistoryStrip.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 { makeStyles } from '@material-ui/core';\nimport { Button, Tooltip } from '@patternfly/react-core';\n\nimport { useTranslation } from '../hooks/useTranslation';\nimport { SidebarExpandIcon } from './notebooks/SidebarCollapseIcon';\n\ntype IconProps = {\n  className?: string;\n};\n\nexport const EditSquareIcon = ({ className }: IconProps) => (\n  <svg\n    className={className}\n    width=\"20\"\n    height=\"20\"\n    viewBox=\"0 0 24 24\"\n    fill=\"none\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    style={{ verticalAlign: 'middle' }}\n  >\n    <path\n      d=\"M5 21C4.45 21 3.97917 20.8042 3.5875 20.4125C3.19583 20.0208 3 19.55 3 19V5C3 4.45 3.19583 3.97917 3.5875 3.5875C3.97917 3.19583 4.45 3 5 3H14L12 5H5V19H19V12L21 10V19C21 19.55 20.8042 20.0208 20.4125 20.4125C20.0208 20.8042 19.55 21 19 21H5ZM16.175 5.775L17.6 7.2L12 12.8V14H13.2L18.8 8.4L20.225 9.825L14.275 15.775C14.1083 15.9417 13.9167 16.0667 13.7 16.15C13.4833 16.2333 13.2583 16.275 13.025 16.275H11C10.7167 16.275 10.4792 16.1792 10.2875 15.9875C10.0958 15.7958 10 15.5583 10 15.275V13.25C10 13.0167 10.0417 12.7917 10.125 12.575C10.2083 12.3583 10.3333 12.1667 10.5 12L16.175 5.775ZM20.225 9.825L16.175 5.775L18.175 3.775C18.5583 3.39167 19.0292 3.2 19.5875 3.2C20.1458 3.2 20.6167 3.39167 21 3.775L22.225 5C22.6083 5.38333 22.8 5.85417 22.8 6.4125C22.8 6.97083 22.6083 7.44167 22.225 7.825L20.225 9.825Z\"\n      fill=\"currentColor\"\n    />\n  </svg>\n);\n\nconst useStyles = makeStyles(theme => ({\n  strip: {\n    display: 'flex',\n    flexDirection: 'column',\n    alignItems: 'center',\n    paddingTop: theme.spacing(1.5),\n    gap: theme.spacing(1.5),\n    borderRight: '1px solid var(--pf-t--global--border--color--default)',\n    width: 48,\n    minWidth: 48,\n    flexShrink: 0,\n    backgroundColor: 'var(--pf-t--global--background--color--primary--default)',\n    height: '100%',\n  },\n  iconButton: {\n    padding: 8,\n    minWidth: 0,\n    lineHeight: 1,\n    borderRadius: '50%',\n    color: 'var(--pf-t--global--icon--color--regular)',\n    '&:hover': {\n      color: 'var(--pf-t--global--icon--color--hover)',\n      backgroundColor:\n        'var(--pf-t--global--background--color--action--plain--hover)',\n    },\n  },\n  newChatIconButton: {\n    padding: 0,\n    minWidth: 0,\n    lineHeight: 1,\n    color: 'var(--pf-t--global--color--brand--default)',\n    '&:hover': {\n      color: 'var(--pf-t--global--color--brand--hover)',\n    },\n  },\n}));\n\ntype CollapsedHistoryStripProps = {\n  onExpand: () => void;\n  onNewChat: () => void;\n  newChatDisabled?: boolean;\n};\n\nexport const CollapsedHistoryStrip = ({\n  onExpand,\n  onNewChat,\n  newChatDisabled = false,\n}: CollapsedHistoryStripProps) => {\n  const classes = useStyles();\n  const { t } = useTranslation();\n\n  return (\n    <div className={classes.strip}>\n      <Tooltip content={t('tooltip.expandHistoryPanel')} position=\"right\">\n        <Button\n          variant=\"plain\"\n          className={classes.iconButton}\n          onClick={onExpand}\n          aria-label={t('tooltip.expandHistoryPanel')}\n        >\n          <SidebarExpandIcon />\n        </Button>\n      </Tooltip>\n      <Tooltip content={t('tooltip.quickNewChat')} position=\"right\">\n        <Button\n          variant=\"plain\"\n          className={classes.newChatIconButton}\n          onClick={onNewChat}\n          aria-label={t('tooltip.quickNewChat')}\n          isDisabled={newChatDisabled}\n        >\n          <EditSquareIcon />\n        </Button>\n      </Tooltip>\n    </div>\n  );\n};\n"],"names":[],"mappings":"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"}

package/dist/components/LightSpeedChat.esm.js

@@ -5,7 +5,7 @@ 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';
 import { DropdownItem, Tooltip, MenuToggle, Select, SelectList, SelectOption, AlertGroup, Alert, AlertVariant, AlertActionCloseButton, Title, Tabs, Tab } from '@patternfly/react-core';
-import { SortAmountDownAltIcon, SortAmountDownIcon, SearchIcon, PlusIcon } from '@patternfly/react-icons';
+import { SortAmountDownAltIcon, SortAmountDownIcon, PlusIcon, SearchIcon } from '@patternfly/react-icons';
 import { useQueryClient } from '@tanstack/react-query';
 import { UNTITLED_NOTEBOOK_NAME, TEMP_CONVERSATION_ID, supportedFileTypes } from '../const.esm.js';
 import '@backstage/core-plugin-api';
@@ -31,15 +31,18 @@ import { useNotebookDocuments } from '../hooks/notebooks/useNotebookDocuments.es
 import { useLightspeedDrawerContext } from '../hooks/useLightspeedDrawerContext.esm.js';
 import { useLightspeedUpdatePermission } from '../hooks/useLightspeedUpdatePermission.esm.js';
 import { useWelcomePrompts } from '../hooks/useWelcomePrompts.esm.js';
+import logo from '../images/logo.svg';
 import { getAttachments } from '../utils/attachment-utils.esm.js';
 import { getCategorizeMessages, getFootnoteProps } from '../utils/lightspeed-chatbox-utils.esm.js';
 import Attachment from './Attachment.esm.js';
 import { useFileAttachmentContext } from './AttachmentContext.esm.js';
+import { EditSquareIcon, CollapsedHistoryStrip } from './CollapsedHistoryStrip.esm.js';
 import { DeleteModal } from './DeleteModal.esm.js';
 import FilePreview from './FilePreview.esm.js';
 import { LightspeedChatBox } from './LightspeedChatBox.esm.js';
 import { LightspeedChatBoxHeader } from './LightspeedChatBoxHeader.esm.js';
 import { McpServersSettings } from './McpServersSettings.esm.js';
+import { MessageBarModelSelector } from './MessageBarModelSelector.esm.js';
 import { DeleteNotebookModal } from './notebooks/DeleteNotebookModal.esm.js';
 import { NotebooksTab } from './notebooks/NotebooksTab.esm.js';
 import { NotebookView } from './notebooks/NotebookView.esm.js';
@@ -47,6 +50,12 @@ import { RenameNotebookModal } from './notebooks/RenameNotebookModal.esm.js';
 import PermissionRequiredState from './PermissionRequiredState.esm.js';
 import { RenameConversationModal } from './RenameConversationModal.esm.js';
 
+const COLLAPSE_PANEL_ICON_SVG = `url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16 21V3H14V21H16ZM12 17V7L7 12L12 17Z' fill='black'/%3E%3C/svg%3E") no-repeat center`;
+const ConditionalWrapper = ({
+  condition,
+  wrapper,
+  children
+}) => condition ? wrapper(children) : children;
 const useStyles = makeStyles((theme) => ({
   body: {
     // remove default margin and padding from common elements
@@ -58,7 +67,8 @@ const useStyles = makeStyles((theme) => ({
   header: {
     padding: `${theme.spacing(3)}px ${theme.spacing(3)}px 0 ${theme.spacing(
       3
-    )}px !important`
+    )}px !important`,
+    backgroundColor: "var(--pf-t--global--background--color--floating--default) !important"
   },
   errorContainer: {
     padding: theme.spacing(3)
@@ -68,7 +78,9 @@ const useStyles = makeStyles((theme) => ({
     rowGap: 0,
     columnGap: 0,
     "--pf-v6-c-multiple-file-upload--Gap": "0",
-    "--pf-v5-c-multiple-file-upload--Gap": "0"
+    "--pf-v5-c-multiple-file-upload--Gap": "0",
+    flex: 1,
+    minWidth: 0
   },
   headerMenu: {
     // align hamburger icon with title
@@ -77,11 +89,23 @@ const useStyles = makeStyles((theme) => ({
       alignItems: "center"
     }
   },
+  headerLogo: {
+    width: 48,
+    height: 48,
+    marginRight: theme.spacing(1.5),
+    flexShrink: 0
+  },
   headerTitle: {
-    justifyContent: "left !important"
+    justifyContent: "left !important",
+    "& h1": {
+      fontSize: "32px !important",
+      fontWeight: "700 !important",
+      lineHeight: "36.4px !important",
+      fontFamily: '"Red Hat Display", sans-serif !important'
+    }
   },
   tabs: {
-    padding: `${theme.spacing(2)}px ${theme.spacing(3)}px 0`,
+    padding: `0 ${theme.spacing(2)}px`,
     backgroundColor: "var(--pf-t--global--background--color--floating--default)",
     "& .pf-v6-c-tabs__item, & .pf-v5-c-tabs__item": {
       backgroundColor: "transparent"
@@ -103,6 +127,11 @@ const useStyles = makeStyles((theme) => ({
   tabsDivider: {
     borderTop: "1px solid var(--pf-t--global--border--color--default)"
   },
+  headerDivider: {
+    paddingTop: 8,
+    borderBottom: "1px solid var(--pf-t--global--border--color--default)",
+    backgroundColor: "var(--pf-t--global--background--color--floating--default)"
+  },
   notebooksContainer: {
     padding: theme.spacing(3),
     height: "100%",
@@ -249,6 +278,23 @@ const useStyles = makeStyles((theme) => ({
       backgroundColor: theme.palette.grey[300]
     }
   },
+  fullscreenFooter: {
+    "&>.pf-chatbot__footer-container": {
+      width: "100% !important",
+      padding: theme.spacing(1.5),
+      maxWidth: "unset !important",
+      margin: "0 auto"
+    }
+  },
+  fullscreenMessageBar: {
+    backgroundColor: "var(--pf-t--global--background--color--secondary--default)",
+    border: "1px solid var(--pf-t--global--border--color--default)",
+    borderRadius: 24,
+    padding: theme.spacing(0.5),
+    "&::after": {
+      display: "none"
+    }
+  },
   sortDropdown: {
     padding: 0,
     margin: 0
@@ -354,7 +400,10 @@ const useStyles = makeStyles((theme) => ({
     flexDirection: "column",
     minHeight: 0,
     width: "100%",
-    minWidth: 0
+    minWidth: 0,
+    whiteSpace: "normal",
+    wordBreak: "break-word",
+    overflowWrap: "break-word"
   },
   mcpSettingsPane: {
     width: "100%",
@@ -363,7 +412,8 @@ const useStyles = makeStyles((theme) => ({
     backgroundColor: "var(--pf-v6-c-table--BackgroundColor, var(--pf-t--global--background--color--primary--default))",
     display: "flex",
     flexDirection: "column",
-    minHeight: 0
+    minHeight: 0,
+    overflow: "auto"
   },
   mcpCollapsedDrawerOrderFix: {
     "& .pf-v6-c-drawer.pf-m-panel-left > .pf-v6-c-drawer__main > .pf-v6-c-drawer__content, & .pf-v5-c-drawer.pf-m-panel-left > .pf-v5-c-drawer__main > .pf-v5-c-drawer__content": {
@@ -374,6 +424,68 @@ const useStyles = makeStyles((theme) => ({
       opacity: 0,
       transition: "none !important"
     }
+  },
+  // TODO: These PatternFly drawer overrides are needed because PF Chatbot doesn't
+  // provide clean APIs for custom expand/collapse icons and positioning.
+  // Remove once PatternFly supports these features.
+  // See: https://github.com/patternfly/chatbot/issues/834
+  fullscreenChatLayout: {
+    display: "flex",
+    flexDirection: "row",
+    flex: 1,
+    minHeight: 0,
+    height: "100%",
+    width: "100%",
+    "& .pf-v6-c-drawer, & .pf-v5-c-drawer": {
+      flex: 1,
+      minWidth: 0
+    },
+    "& .pf-v6-c-drawer__content, & .pf-v5-c-drawer__content": {
+      flex: 1,
+      minWidth: 0
+    },
+    "& .pf-v6-c-drawer:not(.pf-m-expanded) > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel, & .pf-v5-c-drawer:not(.pf-m-expanded) > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel": {
+      display: "none"
+    },
+    "& .pf-v6-c-drawer__close, & .pf-v5-c-drawer__close": {
+      marginTop: -48,
+      marginRight: -24
+    },
+    "& .pf-v6-c-drawer__close .pf-v6-c-button svg, & .pf-v5-c-drawer__close .pf-v5-c-button svg": {
+      display: "none"
+    },
+    "& .pf-v6-c-drawer__close .pf-v6-c-button, & .pf-v5-c-drawer__close .pf-v5-c-button": {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      "&::before": {
+        content: '""',
+        display: "block",
+        width: 24,
+        height: 24,
+        mask: COLLAPSE_PANEL_ICON_SVG,
+        WebkitMask: COLLAPSE_PANEL_ICON_SVG,
+        backgroundColor: "currentColor"
+      }
+    },
+    "& .pf-chatbot__menu-item": {
+      cursor: "pointer"
+    },
+    "& .pf-chatbot__menu-item .pf-v6-c-menu-toggle, & .pf-chatbot__menu-item .pf-v5-c-menu-toggle": {
+      opacity: 0,
+      transition: "opacity 0.15s ease-in-out"
+    },
+    "& .pf-chatbot__menu-item:hover .pf-v6-c-menu-toggle, & .pf-chatbot__menu-item:hover .pf-v5-c-menu-toggle": {
+      opacity: 1
+    }
+  },
+  fullscreenMainContent: {
+    display: "flex",
+    flexDirection: "column",
+    flex: 1,
+    minHeight: 0,
+    minWidth: 0,
+    overflow: "hidden"
   }
 }));
 const LightspeedChat = ({
@@ -1275,43 +1387,67 @@ const LightspeedChat = ({
         )
       }
     ),
-    /* @__PURE__ */ jsxs(ChatbotFooter, { className: classes.footer, children: [
-      /* @__PURE__ */ jsx(FilePreview, {}),
-      /* @__PURE__ */ jsx(
-        MessageBar,
-        {
-          onSendMessage: sendMessage,
-          isSendButtonDisabled,
-          hasAttachButton: true,
-          handleAttach,
-          hasMicrophoneButton: true,
-          value: draftMessage,
-          onChange: handleDraftMessage,
-          hasStopButton: streamingUiMatchesView,
-          handleStopButton: streamingUiMatchesView ? handleStopButton : void 0,
-          buttonProps: {
-            attach: {
-              inputTestId: "attachment-input",
-              tooltipContent: t("tooltip.attach")
-            },
-            microphone: {
-              tooltipContent: {
-                active: t("tooltip.microphone.active"),
-                inactive: t("tooltip.microphone.inactive")
-              }
+    /* @__PURE__ */ jsxs(
+      ChatbotFooter,
+      {
+        className: isFullscreenMode ? `${classes.footer} ${classes.fullscreenFooter}` : classes.footer,
+        children: [
+          /* @__PURE__ */ jsx(FilePreview, {}),
+          /* @__PURE__ */ jsx(
+            MessageBar,
+            {
+              className: isFullscreenMode ? classes.fullscreenMessageBar : void 0,
+              onSendMessage: sendMessage,
+              isSendButtonDisabled,
+              hasAttachButton: true,
+              attachButtonPosition: isFullscreenMode ? "start" : void 0,
+              handleAttach,
+              hasMicrophoneButton: true,
+              value: draftMessage,
+              onChange: handleDraftMessage,
+              hasStopButton: streamingUiMatchesView,
+              handleStopButton: streamingUiMatchesView ? handleStopButton : void 0,
+              buttonProps: {
+                attach: {
+                  inputTestId: "attachment-input",
+                  tooltipContent: t("tooltip.attach"),
+                  "aria-label": t("tooltip.attach"),
+                  ...isFullscreenMode && { icon: /* @__PURE__ */ jsx(PlusIcon, {}) }
+                },
+                microphone: {
+                  tooltipContent: {
+                    active: t("tooltip.microphone.active"),
+                    inactive: t("tooltip.microphone.inactive")
+                  }
+                },
+                send: {
+                  tooltipContent: t("tooltip.send")
+                }
+              },
+              additionalActions: isFullscreenMode ? /* @__PURE__ */ jsx(
+                MessageBarModelSelector,
+                {
+                  selectedModel,
+                  models,
+                  onSelect: (item) => {
+                    setIsMcpSettingsOpen(false);
+                    onNewChat();
+                    handleSelectedModel(item);
+                  },
+                  disabled: isSendButtonDisabled
+                }
+              ) : void 0,
+              forceMultilineLayout: isFullscreenMode,
+              allowedFileTypes: supportedFileTypes,
+              onAttachRejected,
+              placeholder: t("chatbox.message.placeholder")
             },
-            send: {
-              tooltipContent: t("tooltip.send")
-            }
-          },
-          allowedFileTypes: supportedFileTypes,
-          onAttachRejected,
-          placeholder: t("chatbox.message.placeholder")
-        },
-        messageBarKey
-      ),
-      /* @__PURE__ */ jsx(ChatbotFootnote, { ...getFootnoteProps(t) })
-    ] })
+            messageBarKey
+          ),
+          /* @__PURE__ */ jsx(ChatbotFootnote, { ...getFootnoteProps(t) })
+        ]
+      }
+    )
   ] });
   const mcpSettingsPanel = /* @__PURE__ */ jsx(
     McpServersSettings,
@@ -1349,6 +1485,8 @@ const LightspeedChat = ({
     drawerPanelStyle = { zIndex: 1300 };
   } else if (isMcpSettingsOpen) {
     drawerPanelStyle = { width: 320, minWidth: 320, maxWidth: 320 };
+  } else {
+    drawerPanelStyle = { minWidth: 232, maxWidth: 400 };
   }
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     notebookAlerts.length > 0 && /* @__PURE__ */ jsx(
@@ -1423,7 +1561,7 @@ const LightspeedChat = ({
         children: [
           /* @__PURE__ */ jsxs(ChatbotHeader, { className: classes.header, children: [
             /* @__PURE__ */ jsxs(ChatbotHeaderMain, { children: [
-              showChatPanel && /* @__PURE__ */ jsx(
+              showChatPanel && !isFullscreenMode && /* @__PURE__ */ jsx(
                 ChatbotHeaderMenu,
                 {
                   "aria-expanded": isChatHistoryDrawerOpen,
@@ -1433,7 +1571,17 @@ const LightspeedChat = ({
                   "aria-label": t("aria.chatHistoryMenu")
                 }
               ),
-              isFullscreenMode && /* @__PURE__ */ jsx(ChatbotHeaderTitle, { className: classes.headerTitle, children: /* @__PURE__ */ jsx(Title, { headingLevel: "h1", size: "3xl", children: t("chatbox.header.title") }) })
+              isFullscreenMode && /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsx(
+                  "img",
+                  {
+                    src: logo,
+                    alt: t("icon.lightspeed.alt"),
+                    className: classes.headerLogo
+                  }
+                ),
+                /* @__PURE__ */ jsx(ChatbotHeaderTitle, { className: classes.headerTitle, children: /* @__PURE__ */ jsx(Title, { headingLevel: "h1", size: "3xl", children: t("chatbox.header.title") }) })
+              ] })
             ] }),
             /* @__PURE__ */ jsx(
               LightspeedChatBoxHeader,
@@ -1447,7 +1595,7 @@ const LightspeedChat = ({
                 models,
                 isPinningChatsEnabled,
                 isModelSelectorDisabled: isSendButtonDisabled,
-                hideModelSelector: showNotebooksPanel,
+                hideModelSelector: showNotebooksPanel || isFullscreenMode,
                 showChatTabOptions: !showNotebooksPanel,
                 setDisplayMode: setDisplayModeFromHeader,
                 displayMode,
@@ -1456,6 +1604,7 @@ const LightspeedChat = ({
               }
             )
           ] }),
+          isFullscreenMode && /* @__PURE__ */ jsx("div", { className: classes.headerDivider }),
           isFullscreenMode && /* @__PURE__ */ jsxs(Fragment, { children: [
             /* @__PURE__ */ jsxs(
               Tabs,
@@ -1473,69 +1622,86 @@ const LightspeedChat = ({
             /* @__PURE__ */ jsx("div", { className: classes.tabsDivider })
           ] }),
           showChatPanel && /* @__PURE__ */ jsx(
-            ChatbotConversationHistoryNav,
+            ConditionalWrapper,
             {
-              drawerPanelContentProps: {
-                isResizable: isFullscreenMode,
-                hasNoBorder: !isFullscreenMode,
-                style: drawerPanelStyle
-              },
-              reverseButtonOrder: true,
-              displayMode: ChatbotDisplayMode.embedded,
-              onDrawerToggle: onChatHistoryDrawerToggle,
-              title: "",
-              navTitleIcon: null,
-              isDrawerOpen: isChatHistoryDrawerOpen,
-              drawerCloseButtonProps: {
-                "aria-label": t("aria.closeDrawerPanel")
-              },
-              setIsDrawerOpen: setIsChatHistoryDrawerOpen,
-              activeItemId: viewConversationId,
-              onSelectActiveItem,
-              conversations: filterConversations(filterValue),
-              onNewChat: newChatCreated ? void 0 : onNewChat,
-              newChatButtonText: t("button.newChat"),
-              newChatButtonProps: {
-                icon: /* @__PURE__ */ jsx(PlusIcon, {})
-              },
-              handleTextInputChange: handleFilter,
-              searchInputPlaceholder: t("chatbox.search.placeholder"),
-              searchInputAriaLabel: t("aria.search.placeholder"),
-              searchInputProps: {
-                value: filterValue,
-                onClear: () => {
-                  setFilterValue("");
-                }
-              },
-              searchActionEnd: sortDropdown,
-              noResultsState: filterValue && Object.keys(filterConversations(filterValue)).length === 0 ? {
-                bodyText: t("chatbox.emptyState.noResults.body"),
-                titleText: t("chatbox.emptyState.noResults.title"),
-                icon: SearchIcon
-              } : void 0,
-              drawerContent: /* @__PURE__ */ jsxs(
-                FileDropZone,
+              condition: isFullscreenMode,
+              wrapper: (children) => /* @__PURE__ */ jsxs("div", { className: classes.fullscreenChatLayout, children: [
+                !isChatHistoryDrawerOpen && /* @__PURE__ */ jsx(
+                  CollapsedHistoryStrip,
+                  {
+                    onExpand: () => setIsChatHistoryDrawerOpen(true),
+                    onNewChat,
+                    newChatDisabled: newChatCreated
+                  }
+                ),
+                children
+              ] }),
+              children: /* @__PURE__ */ jsx(
+                ChatbotConversationHistoryNav,
                 {
-                  className: classes.drawerFileDropZone,
-                  onFileDrop: (e, data) => handleAttach(data, e),
+                  drawerPanelContentProps: {
+                    isResizable: isFullscreenMode,
+                    hasNoBorder: !isFullscreenMode,
+                    style: drawerPanelStyle
+                  },
+                  reverseButtonOrder: true,
                   displayMode: ChatbotDisplayMode.embedded,
-                  infoText: t("chatbox.fileUpload.infoText"),
-                  allowedFileTypes: supportedFileTypes,
-                  onAttachRejected,
-                  children: [
-                    showAlert && uploadError.message && /* @__PURE__ */ jsx("div", { className: classes.errorContainer, children: /* @__PURE__ */ jsx(
-                      ChatbotAlert,
-                      {
-                        component: "h4",
-                        title: t("chatbox.fileUpload.failed"),
-                        variant: uploadError.type ?? "danger",
-                        isInline: true,
-                        onClose: () => setUploadError({ message: null }),
-                        children: uploadError.message
-                      }
-                    ) }),
-                    mainPanelContent
-                  ]
+                  onDrawerToggle: onChatHistoryDrawerToggle,
+                  title: "",
+                  navTitleIcon: null,
+                  isDrawerOpen: isChatHistoryDrawerOpen,
+                  drawerCloseButtonProps: {
+                    "aria-label": t("aria.closeDrawerPanel")
+                  },
+                  setIsDrawerOpen: setIsChatHistoryDrawerOpen,
+                  activeItemId: viewConversationId,
+                  onSelectActiveItem,
+                  conversations: filterConversations(filterValue),
+                  onNewChat: newChatCreated ? void 0 : onNewChat,
+                  newChatButtonText: t("button.newChat"),
+                  newChatButtonProps: {
+                    icon: isFullscreenMode ? /* @__PURE__ */ jsx(EditSquareIcon, {}) : /* @__PURE__ */ jsx(PlusIcon, {})
+                  },
+                  handleTextInputChange: handleFilter,
+                  searchInputPlaceholder: t("chatbox.search.placeholder"),
+                  searchInputAriaLabel: t("aria.search.placeholder"),
+                  searchInputProps: {
+                    value: filterValue,
+                    onClear: () => {
+                      setFilterValue("");
+                    }
+                  },
+                  searchActionEnd: sortDropdown,
+                  noResultsState: filterValue && Object.keys(filterConversations(filterValue)).length === 0 ? {
+                    bodyText: t("chatbox.emptyState.noResults.body"),
+                    titleText: t("chatbox.emptyState.noResults.title"),
+                    icon: SearchIcon
+                  } : void 0,
+                  drawerContent: /* @__PURE__ */ jsxs(
+                    FileDropZone,
+                    {
+                      className: classes.drawerFileDropZone,
+                      onFileDrop: (e, data) => handleAttach(data, e),
+                      displayMode: ChatbotDisplayMode.embedded,
+                      infoText: t("chatbox.fileUpload.infoText"),
+                      allowedFileTypes: supportedFileTypes,
+                      onAttachRejected,
+                      children: [
+                        showAlert && uploadError.message && /* @__PURE__ */ jsx("div", { className: classes.errorContainer, children: /* @__PURE__ */ jsx(
+                          ChatbotAlert,
+                          {
+                            component: "h4",
+                            title: t("chatbox.fileUpload.failed"),
+                            variant: uploadError.type ?? "danger",
+                            isInline: true,
+                            onClose: () => setUploadError({ message: null }),
+                            children: uploadError.message
+                          }
+                        ) }),
+                        mainPanelContent
+                      ]
+                    }
+                  )
                 }
               )
             }