@lendi/navbar 7.16.2-beta.1 → 7.16.2

package/dist/declarations/src/CustomerCommPanel/SidePanel/FullViewChatHeader/ChatHeaderTeamMemberAvatar/index.d.ts

@@ -0,0 +1,6 @@
+import { TeamMember } from '../../../../types';
+export interface ChatHeaderTeamMemberAvatarProps {
+    teamMember?: TeamMember;
+    isBrokerOnline: boolean;
+}
+export declare const ChatHeaderTeamMemberAvatar: ({ teamMember, isBrokerOnline }: ChatHeaderTeamMemberAvatarProps) => JSX.Element;

package/dist/declarations/src/CustomerCommPanel/SidePanel/FullViewChatHeader/ChatHeaderTeamMemberAvatar/style.d.ts

@@ -0,0 +1,10 @@
+import Face from '@lendi-ui/icon/Face';
+export declare const MobileBrokerInfoWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const FaceWrapper: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {}, never>;
+export declare const BrokerFace: import("styled-components").StyledComponent<"img", import("styled-components").DefaultTheme, {}, never>;
+interface StausIconProps {
+    isOnline: boolean;
+}
+export declare const StatusIcon: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, StausIconProps, never>;
+export declare const StyledFace: import("styled-components").StyledComponent<typeof Face, import("styled-components").DefaultTheme, {}, never>;
+export {};

package/dist/declarations/src/CustomerCommPanel/SidePanel/FullViewChatHeader/index.d.ts

@@ -0,0 +1,7 @@
+import { TeamMember } from '../../../types';
+export interface FullViewChatHeaderProps {
+    teamMember?: TeamMember;
+    onClick: () => void;
+    isOtherUserOnline: boolean;
+}
+export declare const FullViewChatHeader: ({ onClick, teamMember, isOtherUserOnline }: FullViewChatHeaderProps) => JSX.Element;

package/dist/declarations/src/CustomerCommPanel/SidePanel/FullViewChatHeader/style.d.ts

@@ -0,0 +1,4 @@
+import KeyboardArrowLeft from '@lendi-ui/icon/KeyboardArrowLeft';
+export declare const StickyHeader: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const TeamMemberBodyWrapper: import("styled-components").StyledComponent<"p", import("styled-components").DefaultTheme, import("@lendi-ui/typography").BodyOptions, never>;
+export declare const ChevronLeftIcon: import("styled-components").StyledComponent<typeof KeyboardArrowLeft, import("styled-components").DefaultTheme, {}, never>;

package/dist/navbar.cjs.dev.js

@@ -24,6 +24,7 @@ var lalaUtils = require('@lendi/lala-utils');
 var launchdarkly = require('@lendi/launchdarkly');
 var lalaReact = require('@lendi/lala-react');
 var chat = require('@lendi/chat');
+var Close = require('@lendi-ui/icon/Close');
 var color = require('@lendi-ui/color');
 var Face = require('@lendi-ui/icon/Face');
 var getTypography = require('@lendi-ui/commons/typography');
@@ -34,9 +35,9 @@ var lendigroupLeadsLibrary = require('@lendi/lendigroup-leads-library');
 var Chat = require('@lendi-ui/icon/Chat');
 var KeyboardArrowDown = require('@lendi-ui/icon/KeyboardArrowDown');
 var KeyboardArrowRight = require('@lendi-ui/icon/KeyboardArrowRight');
+var KeyboardArrowLeft = require('@lendi-ui/icon/KeyboardArrowLeft');
 var FocusLock = require('react-focus-lock');
 var Menu = require('@lendi-ui/icon/Menu');
-var Close = require('@lendi-ui/icon/Close');
 var Sidebar = require('@lendi-ui/sidebar');
 var ArrowDropDown = require('@lendi-ui/icon/ArrowDropDown');
 var ExitToApp = require('@lendi-ui/icon/ExitToApp');
@@ -60,6 +61,7 @@ var UnreadMessage__default = /*#__PURE__*/_interopDefault(UnreadMessage);
 var MoreVert__default = /*#__PURE__*/_interopDefault(MoreVert);
 var getColour__default = /*#__PURE__*/_interopDefault(getColour);
 var Launch__default = /*#__PURE__*/_interopDefault(Launch);
+var Close__default = /*#__PURE__*/_interopDefault(Close);
 var Face__default = /*#__PURE__*/_interopDefault(Face);
 var getTypography__default = /*#__PURE__*/_interopDefault(getTypography);
 var Phone__default = /*#__PURE__*/_interopDefault(Phone);
@@ -67,9 +69,9 @@ var Calendar__default = /*#__PURE__*/_interopDefault(Calendar);
 var Chat__default = /*#__PURE__*/_interopDefault(Chat);
 var KeyboardArrowDown__default = /*#__PURE__*/_interopDefault(KeyboardArrowDown);
 var KeyboardArrowRight__default = /*#__PURE__*/_interopDefault(KeyboardArrowRight);
+var KeyboardArrowLeft__default = /*#__PURE__*/_interopDefault(KeyboardArrowLeft);
 var FocusLock__default = /*#__PURE__*/_interopDefault(FocusLock);
 var Menu__default = /*#__PURE__*/_interopDefault(Menu);
-var Close__default = /*#__PURE__*/_interopDefault(Close);
 var Sidebar__default = /*#__PURE__*/_interopDefault(Sidebar);
 var ArrowDropDown__default = /*#__PURE__*/_interopDefault(ArrowDropDown);
 var ExitToApp__default = /*#__PURE__*/_interopDefault(ExitToApp);
@@ -963,6 +965,25 @@ var CommPanelWrapper$1 = styled__default["default"].div.withConfig({
   componentId: "lui__sc-no953w-0"
 })(["", ";-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;display:flex;flex-direction:column;height:100%;"], utils.normalise);
 
+var useDisableChat = () => {
+  var [isChatDisabled, setIsChatDisabled] = React.useState(true);
+  var {
+    disableChat,
+    enableAussieChat
+  } = launchdarkly.useFlags();
+  var {
+    brand
+  } = lalaReact.useSession();
+  React.useEffect(() => {
+    if (brand === lalaUtils.Brand.Aussie) {
+      if (enableAussieChat !== undefined) setIsChatDisabled(!enableAussieChat);
+    } else {
+      if (disableChat !== undefined) setIsChatDisabled(disableChat);
+    }
+  }, [disableChat, enableAussieChat, brand]);
+  return isChatDisabled;
+};
+
 var HeadWrapper = styled__default["default"].div.withConfig({
   displayName: "style__HeadWrapper",
   componentId: "lui__sc-zy0mzz-0"
@@ -975,7 +996,7 @@ var BrokerImgWrapper = styled__default["default"].div.withConfig({
   displayName: "style__BrokerImgWrapper",
   componentId: "lui__sc-zy0mzz-2"
 })(["", ";position:relative;"], spacing.mr('xs'));
-var BrokerFace = styled__default["default"].img.withConfig({
+var BrokerFace$1 = styled__default["default"].img.withConfig({
   displayName: "style__BrokerFace",
   componentId: "lui__sc-zy0mzz-3"
 })(["width:65px;height:65px;border-radius:50%;border:1px solid ", ";margin:auto;"], color.color('shade.100'));
@@ -987,11 +1008,11 @@ var BrokerName = styled__default["default"](typography.Heading).withConfig({
   displayName: "style__BrokerName",
   componentId: "lui__sc-zy0mzz-5"
 })(["font-weight:bold;"]);
-var StyledFace = styled__default["default"](Face__default["default"]).withConfig({
+var StyledFace$1 = styled__default["default"](Face__default["default"]).withConfig({
   displayName: "style__StyledFace",
   componentId: "lui__sc-zy0mzz-6"
 })(["width:4.5em;height:4.5em;"]);
-var StatusIcon = styled__default["default"].div.withConfig({
+var StatusIcon$1 = styled__default["default"].div.withConfig({
   displayName: "style__StatusIcon",
   componentId: "lui__sc-zy0mzz-7"
 })(["width:17px;height:17px;border-radius:50%;position:absolute;right:1px;bottom:8px;", ";"], props => props.isOnline ? color.bg('success.600') : color.bg('shade.400'));
@@ -1038,9 +1059,9 @@ var TeamMemberInfo = /*#__PURE__*/React__default["default"].memo(_ref => {
     children: [/*#__PURE__*/jsxRuntime.jsx(BrokerWrapper, {
       children: teamMember ? /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
         children: [/*#__PURE__*/jsxRuntime.jsxs(BrokerImgWrapper, {
-          children: [teamMember.profilePictureURL ? /*#__PURE__*/jsxRuntime.jsx(BrokerFace, {
+          children: [teamMember.profilePictureURL ? /*#__PURE__*/jsxRuntime.jsx(BrokerFace$1, {
             src: teamMember.profilePictureURL
-          }) : /*#__PURE__*/jsxRuntime.jsx(StyledFace, {}), /*#__PURE__*/jsxRuntime.jsx(StatusIcon, {
+          }) : /*#__PURE__*/jsxRuntime.jsx(StyledFace$1, {}), /*#__PURE__*/jsxRuntime.jsx(StatusIcon$1, {
             isOnline: isOtherUserOnline,
             "aria-label": isOtherUserOnline ? 'Online' : 'Offline'
           })]
@@ -1328,25 +1349,98 @@ var SidePanel = _ref => {
   });
 };
 
-var useDisableChat = () => {
-  var [isChatDisabled, setIsChatDisabled] = React.useState(true);
+styled__default["default"].div.withConfig({
+  displayName: "style__MobileBrokerInfoWrapper",
+  componentId: "lui__sc-18wuygo-0"
+})(["display:flex;align-items:center;"]);
+var FaceWrapper = styled__default["default"].span.withConfig({
+  displayName: "style__FaceWrapper",
+  componentId: "lui__sc-18wuygo-1"
+})(["position:relative;"]);
+var BrokerFace = styled__default["default"].img.withConfig({
+  displayName: "style__BrokerFace",
+  componentId: "lui__sc-18wuygo-2"
+})(["width:20px;height:20px;border-radius:50%;border:1px solid ", ";"], color.color('shade.100'));
+var StatusIcon = styled__default["default"].span.withConfig({
+  displayName: "style__StatusIcon",
+  componentId: "lui__sc-18wuygo-3"
+})(["width:8px;height:8px;border-radius:50%;position:absolute;right:-1px;bottom:4px;", ";"], props => props.isOnline ? color.bg('success.600') : color.bg('shade.400'));
+var StyledFace = styled__default["default"](Face__default["default"]).withConfig({
+  displayName: "style__StyledFace",
+  componentId: "lui__sc-18wuygo-4"
+})(["height:26px;width:22px;"]);
+
+var ChatHeaderTeamMemberAvatar = _ref => {
   var {
-    disableChat,
-    enableAussieChat
-  } = launchdarkly.useFlags();
+    teamMember,
+    isBrokerOnline
+  } = _ref;
+  return /*#__PURE__*/jsxRuntime.jsxs(FaceWrapper, {
+    children: [teamMember !== null && teamMember !== void 0 && teamMember.profilePictureURL ? /*#__PURE__*/jsxRuntime.jsx(BrokerFace, {
+      src: teamMember.profilePictureURL
+    }) : /*#__PURE__*/jsxRuntime.jsx(StyledFace, {}), /*#__PURE__*/jsxRuntime.jsx(StatusIcon, {
+      isOnline: isBrokerOnline,
+      "aria-label": isBrokerOnline ? 'Online' : 'Offline'
+    })]
+  });
+};
+
+var StickyHeader = styled__default["default"].div.withConfig({
+  displayName: "style__StickyHeader",
+  componentId: "lui__sc-1pqeqpe-0"
+})(["top:0;position:relative;display:flex;flex-direction:row;z-index:3;width:100%;background-color:", ";align-items:center;padding-left:10px;", " ", "   border-bottom:1px solid ", ";cursor:pointer;"], getColour__default["default"]('interaction', 'subtle'), spacing.pt('xs'), spacing.pb('xxs'), getColour__default["default"]('background', 'surface'));
+var TeamMemberBodyWrapper = styled__default["default"](typography.Body).withConfig({
+  displayName: "style__TeamMemberBodyWrapper",
+  componentId: "lui__sc-1pqeqpe-1"
+})(["", ";font-size:16px;font-weight:bold;"], spacing.pl('xxs'));
+var ChevronLeftIcon = styled__default["default"](KeyboardArrowLeft__default["default"]).withConfig({
+  displayName: "style__ChevronLeftIcon",
+  componentId: "lui__sc-1pqeqpe-2"
+})([""]);
+
+var FullViewChatHeader = _ref => {
   var {
-    brand
-  } = lalaReact.useSession();
-  React.useEffect(() => {
-    if (brand === lalaUtils.Brand.Aussie) {
-      if (enableAussieChat !== undefined) setIsChatDisabled(!enableAussieChat);
-    } else {
-      if (disableChat !== undefined) setIsChatDisabled(disableChat);
-    }
-  }, [disableChat, enableAussieChat, brand]);
-  return isChatDisabled;
+    onClick,
+    teamMember,
+    isOtherUserOnline
+  } = _ref;
+  return /*#__PURE__*/jsxRuntime.jsx(StickyHeader, {
+    onClick: onClick,
+    children: /*#__PURE__*/jsxRuntime.jsx(jsxRuntime.Fragment, {
+      children: teamMember ? /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+        children: [/*#__PURE__*/jsxRuntime.jsx(ChevronLeftIcon, {
+          color: getColour.getColour('interaction', 'secondary'),
+          height: "24px",
+          width: "24px"
+        }), /*#__PURE__*/jsxRuntime.jsx(ChatHeaderTeamMemberAvatar, {
+          teamMember: teamMember,
+          isBrokerOnline: isOtherUserOnline
+        }), /*#__PURE__*/jsxRuntime.jsx(ChatBodyWrapper, {
+          children: /*#__PURE__*/jsxRuntime.jsx(TeamMemberBodyWrapper, {
+            size: "md",
+            color: "secondary.500",
+            children: teamMember ? "".concat(teamMember.firstName, " ").concat(teamMember.lastName) : 'Home Loan Specialist'
+          })
+        })]
+      }) : /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+        children: [/*#__PURE__*/jsxRuntime.jsx(KeyboardArrowLeft__default["default"], {
+          color: getColour.getColour('interaction', 'secondary'),
+          height: "24px",
+          width: "24px"
+        }), /*#__PURE__*/jsxRuntime.jsx(BodyWrapper, {
+          size: "md",
+          children: "Chat online"
+        })]
+      })
+    })
+  });
 };
 
+var StyledClose = styled__default["default"](button.IconButton).withConfig({
+  displayName: "style__StyledClose",
+  componentId: "lui__sc-qeih4b-0"
+})(["position:absolute;"]);
+
 var WithChatView = _ref => {
   var {
     legacySupport,
@@ -1357,6 +1451,7 @@ var WithChatView = _ref => {
   } = _ref;
   var {
     closeCommPanel,
+    isCommPanelOpen,
     isChatOpen,
     openChat,
     teamMember,
@@ -1365,13 +1460,25 @@ var WithChatView = _ref => {
     channelId,
     migratedToConversation,
     setSelectedThread,
-    applicationId
+    applicationId,
+    closeChat
   } = chat.useBootstrappedChatState();
-  var [breakpoint$1, setBreakpoint] = React__default["default"].useState();
-  breakpoint.useBreakpoint(setBreakpoint);
   var hasChat = !useDisableChat();
+  var {
+    enableHistoricalThreads
+  } = launchdarkly.useFlags();
   return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
-    children: [!isChatOpen && /*#__PURE__*/jsxRuntime.jsx(SidePanel, {
+    children: [(isCommPanelOpen && !isChatOpen || !enableHistoricalThreads) && /*#__PURE__*/jsxRuntime.jsx(StyledClose, {
+      color: "shade.300",
+      onClick: closeCommPanel,
+      size: "md",
+      "aria-label": "Close comm panel",
+      icon: Close__default["default"]
+    }), isChatOpen && !enableHistoricalThreads && /*#__PURE__*/jsxRuntime.jsx(FullViewChatHeader, {
+      teamMember: teamMember,
+      isOtherUserOnline: isOtherUserOnline,
+      onClick: closeChat
+    }), !isChatOpen && /*#__PURE__*/jsxRuntime.jsx(SidePanel, {
       teamMember: teamMember,
       store: store,
       broker: broker,

package/dist/navbar.cjs.prod.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: !0
 });
 
-var React = require("react"), NavbarBase = require("@lendi-ui/navbar-base"), analytics$1 = require("@lendi/analytics"), breakpoint = require("@lendi-ui/breakpoint"), Logo = require("@lendi-ui/logo"), spacing = require("@lendi-ui/spacing"), Theme = require("@lendi/ui/Theme"), styled = require("styled-components"), jsxRuntime = require("react/jsx-runtime"), button = require("@lendi-ui/button"), UnreadMessage = require("@lendi-ui/icon/UnreadMessage"), utils = require("@lendi-ui/utils"), MoreVert = require("@lendi-ui/icon/MoreVert"), borders = require("@lendi-ui/commons/borders"), getColour = require("@lendi-ui/commons/colours"), depth = require("@lendi-ui/depth"), Launch = require("@lendi-ui/icon/Launch"), typography = require("@lendi-ui/typography"), lalaUtils = require("@lendi/lala-utils"), launchdarkly = require("@lendi/launchdarkly"), lalaReact = require("@lendi/lala-react"), chat = require("@lendi/chat"), color = require("@lendi-ui/color"), Face = require("@lendi-ui/icon/Face"), getTypography = require("@lendi-ui/commons/typography"), utils$1 = require("@lendi-ui/commons/utils"), Phone = require("@lendi-ui/icon/Phone"), Calendar = require("@lendi-ui/icon/Calendar"), lendigroupLeadsLibrary = require("@lendi/lendigroup-leads-library"), Chat = require("@lendi-ui/icon/Chat"), KeyboardArrowDown = require("@lendi-ui/icon/KeyboardArrowDown"), KeyboardArrowRight = require("@lendi-ui/icon/KeyboardArrowRight"), FocusLock = require("react-focus-lock"), Menu = require("@lendi-ui/icon/Menu"), Close = require("@lendi-ui/icon/Close"), Sidebar = require("@lendi-ui/sidebar"), ArrowDropDown = require("@lendi-ui/icon/ArrowDropDown"), ExitToApp = require("@lendi-ui/icon/ExitToApp"), ExpandMore = require("@lendi-ui/icon/ExpandMore"), grid = require("@lendi-ui/grid"), ChevronDown = require("@lendi-ui/icon/ChevronDown"), ChevronUp = require("@lendi-ui/icon/ChevronUp"), Layout = require("@lendi/ui/Layout"), ArrowForward = require("@lendi-ui/icon/ArrowForward"), Typography = require("@lendi/ui/Typography"), Button = require("@lendi/ui/Button"), axios = require("axios");
+var React = require("react"), NavbarBase = require("@lendi-ui/navbar-base"), analytics$1 = require("@lendi/analytics"), breakpoint = require("@lendi-ui/breakpoint"), Logo = require("@lendi-ui/logo"), spacing = require("@lendi-ui/spacing"), Theme = require("@lendi/ui/Theme"), styled = require("styled-components"), jsxRuntime = require("react/jsx-runtime"), button = require("@lendi-ui/button"), UnreadMessage = require("@lendi-ui/icon/UnreadMessage"), utils = require("@lendi-ui/utils"), MoreVert = require("@lendi-ui/icon/MoreVert"), borders = require("@lendi-ui/commons/borders"), getColour = require("@lendi-ui/commons/colours"), depth = require("@lendi-ui/depth"), Launch = require("@lendi-ui/icon/Launch"), typography = require("@lendi-ui/typography"), lalaUtils = require("@lendi/lala-utils"), launchdarkly = require("@lendi/launchdarkly"), lalaReact = require("@lendi/lala-react"), chat = require("@lendi/chat"), Close = require("@lendi-ui/icon/Close"), color = require("@lendi-ui/color"), Face = require("@lendi-ui/icon/Face"), getTypography = require("@lendi-ui/commons/typography"), utils$1 = require("@lendi-ui/commons/utils"), Phone = require("@lendi-ui/icon/Phone"), Calendar = require("@lendi-ui/icon/Calendar"), lendigroupLeadsLibrary = require("@lendi/lendigroup-leads-library"), Chat = require("@lendi-ui/icon/Chat"), KeyboardArrowDown = require("@lendi-ui/icon/KeyboardArrowDown"), KeyboardArrowRight = require("@lendi-ui/icon/KeyboardArrowRight"), KeyboardArrowLeft = require("@lendi-ui/icon/KeyboardArrowLeft"), FocusLock = require("react-focus-lock"), Menu = require("@lendi-ui/icon/Menu"), Sidebar = require("@lendi-ui/sidebar"), ArrowDropDown = require("@lendi-ui/icon/ArrowDropDown"), ExitToApp = require("@lendi-ui/icon/ExitToApp"), ExpandMore = require("@lendi-ui/icon/ExpandMore"), grid = require("@lendi-ui/grid"), ChevronDown = require("@lendi-ui/icon/ChevronDown"), ChevronUp = require("@lendi-ui/icon/ChevronUp"), Layout = require("@lendi/ui/Layout"), ArrowForward = require("@lendi-ui/icon/ArrowForward"), Typography = require("@lendi/ui/Typography"), Button = require("@lendi/ui/Button"), axios = require("axios");
 
 function _interopDefault(e) {
   return e && e.__esModule ? e : {
@@ -12,7 +12,7 @@ function _interopDefault(e) {
   };
 }
 
-var React__default = _interopDefault(React), NavbarBase__default = _interopDefault(NavbarBase), Logo__default = _interopDefault(Logo), styled__default = _interopDefault(styled), UnreadMessage__default = _interopDefault(UnreadMessage), MoreVert__default = _interopDefault(MoreVert), getColour__default = _interopDefault(getColour), Launch__default = _interopDefault(Launch), Face__default = _interopDefault(Face), getTypography__default = _interopDefault(getTypography), Phone__default = _interopDefault(Phone), Calendar__default = _interopDefault(Calendar), Chat__default = _interopDefault(Chat), KeyboardArrowDown__default = _interopDefault(KeyboardArrowDown), KeyboardArrowRight__default = _interopDefault(KeyboardArrowRight), FocusLock__default = _interopDefault(FocusLock), Menu__default = _interopDefault(Menu), Close__default = _interopDefault(Close), Sidebar__default = _interopDefault(Sidebar), ArrowDropDown__default = _interopDefault(ArrowDropDown), ExitToApp__default = _interopDefault(ExitToApp), ExpandMore__default = _interopDefault(ExpandMore), ChevronDown__default = _interopDefault(ChevronDown), ChevronUp__default = _interopDefault(ChevronUp), ArrowForward__default = _interopDefault(ArrowForward), axios__default = _interopDefault(axios);
+var React__default = _interopDefault(React), NavbarBase__default = _interopDefault(NavbarBase), Logo__default = _interopDefault(Logo), styled__default = _interopDefault(styled), UnreadMessage__default = _interopDefault(UnreadMessage), MoreVert__default = _interopDefault(MoreVert), getColour__default = _interopDefault(getColour), Launch__default = _interopDefault(Launch), Close__default = _interopDefault(Close), Face__default = _interopDefault(Face), getTypography__default = _interopDefault(getTypography), Phone__default = _interopDefault(Phone), Calendar__default = _interopDefault(Calendar), Chat__default = _interopDefault(Chat), KeyboardArrowDown__default = _interopDefault(KeyboardArrowDown), KeyboardArrowRight__default = _interopDefault(KeyboardArrowRight), KeyboardArrowLeft__default = _interopDefault(KeyboardArrowLeft), FocusLock__default = _interopDefault(FocusLock), Menu__default = _interopDefault(Menu), Sidebar__default = _interopDefault(Sidebar), ArrowDropDown__default = _interopDefault(ArrowDropDown), ExitToApp__default = _interopDefault(ExitToApp), ExpandMore__default = _interopDefault(ExpandMore), ChevronDown__default = _interopDefault(ChevronDown), ChevronUp__default = _interopDefault(ChevronUp), ArrowForward__default = _interopDefault(ArrowForward), axios__default = _interopDefault(axios);
 
 function _toPrimitive(input, hint) {
   if ("object" != typeof input || null === input) return input;
@@ -591,7 +591,12 @@ var _excluded$a = [ "showTalkToExpertCta" ], withDomainChat = Component => _ref
 }), CommPanelWrapper$1 = styled__default.default.div.withConfig({
   displayName: "style__CommPanelWrapper",
   componentId: "lui__sc-no953w-0"
-})([ "", ";-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;display:flex;flex-direction:column;height:100%;" ], utils.normalise), HeadWrapper = styled__default.default.div.withConfig({
+})([ "", ";-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;display:flex;flex-direction:column;height:100%;" ], utils.normalise), useDisableChat = () => {
+  var [isChatDisabled, setIsChatDisabled] = React.useState(!0), {disableChat: disableChat, enableAussieChat: enableAussieChat} = launchdarkly.useFlags(), {brand: brand} = lalaReact.useSession();
+  return React.useEffect((() => {
+    brand === lalaUtils.Brand.Aussie ? void 0 !== enableAussieChat && setIsChatDisabled(!enableAussieChat) : void 0 !== disableChat && setIsChatDisabled(disableChat);
+  }), [ disableChat, enableAussieChat, brand ]), isChatDisabled;
+}, HeadWrapper = styled__default.default.div.withConfig({
   displayName: "style__HeadWrapper",
   componentId: "lui__sc-zy0mzz-0"
 })([ "border-bottom:1px solid ", ";", ";" ], color.color("shade.100"), spacing.mt("xxl")), BrokerWrapper = styled__default.default.div.withConfig({
@@ -600,7 +605,7 @@ var _excluded$a = [ "showTalkToExpertCta" ], withDomainChat = Component => _ref
 })([ "display:flex;align-items:center;", ";" ], spacing.ml("xl")), BrokerImgWrapper = styled__default.default.div.withConfig({
   displayName: "style__BrokerImgWrapper",
   componentId: "lui__sc-zy0mzz-2"
-})([ "", ";position:relative;" ], spacing.mr("xs")), BrokerFace = styled__default.default.img.withConfig({
+})([ "", ";position:relative;" ], spacing.mr("xs")), BrokerFace$1 = styled__default.default.img.withConfig({
   displayName: "style__BrokerFace",
   componentId: "lui__sc-zy0mzz-3"
 })([ "width:65px;height:65px;border-radius:50%;border:1px solid ", ";margin:auto;" ], color.color("shade.100")), BrokerDetail = styled__default.default.div.withConfig({
@@ -609,10 +614,10 @@ var _excluded$a = [ "showTalkToExpertCta" ], withDomainChat = Component => _ref
 })([ "display:flex;flex-direction:column;justify-content:space-between;", ";" ], spacing.ml("xxs")), BrokerName = styled__default.default(typography.Heading).withConfig({
   displayName: "style__BrokerName",
   componentId: "lui__sc-zy0mzz-5"
-})([ "font-weight:bold;" ]), StyledFace = styled__default.default(Face__default.default).withConfig({
+})([ "font-weight:bold;" ]), StyledFace$1 = styled__default.default(Face__default.default).withConfig({
   displayName: "style__StyledFace",
   componentId: "lui__sc-zy0mzz-6"
-})([ "width:4.5em;height:4.5em;" ]), StatusIcon = styled__default.default.div.withConfig({
+})([ "width:4.5em;height:4.5em;" ]), StatusIcon$1 = styled__default.default.div.withConfig({
   displayName: "style__StatusIcon",
   componentId: "lui__sc-zy0mzz-7"
 })([ "width:17px;height:17px;border-radius:50%;position:absolute;right:1px;bottom:8px;", ";" ], (props => props.isOnline ? color.bg("success.600") : color.bg("shade.400"))), StyledBrokerFaces = styled__default.default.img.withConfig({
@@ -647,9 +652,9 @@ var _excluded$a = [ "showTalkToExpertCta" ], withDomainChat = Component => _ref
     children: [ jsxRuntime.jsx(BrokerWrapper, {
       children: teamMember ? jsxRuntime.jsxs(jsxRuntime.Fragment, {
         children: [ jsxRuntime.jsxs(BrokerImgWrapper, {
-          children: [ teamMember.profilePictureURL ? jsxRuntime.jsx(BrokerFace, {
+          children: [ teamMember.profilePictureURL ? jsxRuntime.jsx(BrokerFace$1, {
             src: teamMember.profilePictureURL
-          }) : jsxRuntime.jsx(StyledFace, {}), jsxRuntime.jsx(StatusIcon, {
+          }) : jsxRuntime.jsx(StyledFace$1, {}), jsxRuntime.jsx(StatusIcon$1, {
             isOnline: isOtherUserOnline,
             "aria-label": isOtherUserOnline ? "Online" : "Offline"
           }) ]
@@ -814,7 +819,7 @@ styled__default.default(KeyboardArrowDown__default.default).withConfig({
   return styled.css([ "transition:transform 0.25s;transform:rotate(", ");" ], isChatOpen ? "180deg" : "0deg");
 }));
 
-var _templateObject$8, _templateObject2$3, _templateObject$7, _templateObject$6, _templateObject$5, _templateObject$4, _templateObject2$2, _templateObject3$1, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, ChevronRightIcon = styled__default.default(KeyboardArrowRight__default.default).withConfig({
+var ChevronRightIcon = styled__default.default(KeyboardArrowRight__default.default).withConfig({
   displayName: "style__ChevronRightIcon",
   componentId: "lui__sc-1pa95jd-2"
 })([ "" ]), StyledChevronRightIcon = styled__default.default(ChevronRightIcon).withConfig({
@@ -866,17 +871,93 @@ var _templateObject$8, _templateObject2$3, _templateObject$7, _templateObject$6,
       }) ]
     }) ]
   });
-}, useDisableChat = () => {
-  var [isChatDisabled, setIsChatDisabled] = React.useState(!0), {disableChat: disableChat, enableAussieChat: enableAussieChat} = launchdarkly.useFlags(), {brand: brand} = lalaReact.useSession();
-  return React.useEffect((() => {
-    brand === lalaUtils.Brand.Aussie ? void 0 !== enableAussieChat && setIsChatDisabled(!enableAussieChat) : void 0 !== disableChat && setIsChatDisabled(disableChat);
-  }), [ disableChat, enableAussieChat, brand ]), isChatDisabled;
-}, WithChatView = _ref => {
-  var {legacySupport: legacySupport, userType: userType, isOtherUserOnline: isOtherUserOnline, hasNew: hasNew, onException: onException} = _ref, {closeCommPanel: closeCommPanel, isChatOpen: isChatOpen, openChat: openChat, teamMember: teamMember, broker: broker, store: store, channelId: channelId, migratedToConversation: migratedToConversation, setSelectedThread: setSelectedThread, applicationId: applicationId} = chat.useBootstrappedChatState(), [breakpoint$1, setBreakpoint] = React__default.default.useState();
-  breakpoint.useBreakpoint(setBreakpoint);
-  var hasChat = !useDisableChat();
+};
+
+styled__default.default.div.withConfig({
+  displayName: "style__MobileBrokerInfoWrapper",
+  componentId: "lui__sc-18wuygo-0"
+})([ "display:flex;align-items:center;" ]);
+
+var _templateObject$8, _templateObject2$3, _templateObject$7, _templateObject$6, _templateObject$5, _templateObject$4, _templateObject2$2, _templateObject3$1, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, FaceWrapper = styled__default.default.span.withConfig({
+  displayName: "style__FaceWrapper",
+  componentId: "lui__sc-18wuygo-1"
+})([ "position:relative;" ]), BrokerFace = styled__default.default.img.withConfig({
+  displayName: "style__BrokerFace",
+  componentId: "lui__sc-18wuygo-2"
+})([ "width:20px;height:20px;border-radius:50%;border:1px solid ", ";" ], color.color("shade.100")), StatusIcon = styled__default.default.span.withConfig({
+  displayName: "style__StatusIcon",
+  componentId: "lui__sc-18wuygo-3"
+})([ "width:8px;height:8px;border-radius:50%;position:absolute;right:-1px;bottom:4px;", ";" ], (props => props.isOnline ? color.bg("success.600") : color.bg("shade.400"))), StyledFace = styled__default.default(Face__default.default).withConfig({
+  displayName: "style__StyledFace",
+  componentId: "lui__sc-18wuygo-4"
+})([ "height:26px;width:22px;" ]), ChatHeaderTeamMemberAvatar = _ref => {
+  var {teamMember: teamMember, isBrokerOnline: isBrokerOnline} = _ref;
+  return jsxRuntime.jsxs(FaceWrapper, {
+    children: [ null != teamMember && teamMember.profilePictureURL ? jsxRuntime.jsx(BrokerFace, {
+      src: teamMember.profilePictureURL
+    }) : jsxRuntime.jsx(StyledFace, {}), jsxRuntime.jsx(StatusIcon, {
+      isOnline: isBrokerOnline,
+      "aria-label": isBrokerOnline ? "Online" : "Offline"
+    }) ]
+  });
+}, StickyHeader = styled__default.default.div.withConfig({
+  displayName: "style__StickyHeader",
+  componentId: "lui__sc-1pqeqpe-0"
+})([ "top:0;position:relative;display:flex;flex-direction:row;z-index:3;width:100%;background-color:", ";align-items:center;padding-left:10px;", " ", "   border-bottom:1px solid ", ";cursor:pointer;" ], getColour__default.default("interaction", "subtle"), spacing.pt("xs"), spacing.pb("xxs"), getColour__default.default("background", "surface")), TeamMemberBodyWrapper = styled__default.default(typography.Body).withConfig({
+  displayName: "style__TeamMemberBodyWrapper",
+  componentId: "lui__sc-1pqeqpe-1"
+})([ "", ";font-size:16px;font-weight:bold;" ], spacing.pl("xxs")), ChevronLeftIcon = styled__default.default(KeyboardArrowLeft__default.default).withConfig({
+  displayName: "style__ChevronLeftIcon",
+  componentId: "lui__sc-1pqeqpe-2"
+})([ "" ]), FullViewChatHeader = _ref => {
+  var {onClick: onClick, teamMember: teamMember, isOtherUserOnline: isOtherUserOnline} = _ref;
+  return jsxRuntime.jsx(StickyHeader, {
+    onClick: onClick,
+    children: jsxRuntime.jsx(jsxRuntime.Fragment, {
+      children: teamMember ? jsxRuntime.jsxs(jsxRuntime.Fragment, {
+        children: [ jsxRuntime.jsx(ChevronLeftIcon, {
+          color: getColour.getColour("interaction", "secondary"),
+          height: "24px",
+          width: "24px"
+        }), jsxRuntime.jsx(ChatHeaderTeamMemberAvatar, {
+          teamMember: teamMember,
+          isBrokerOnline: isOtherUserOnline
+        }), jsxRuntime.jsx(ChatBodyWrapper, {
+          children: jsxRuntime.jsx(TeamMemberBodyWrapper, {
+            size: "md",
+            color: "secondary.500",
+            children: teamMember ? "".concat(teamMember.firstName, " ").concat(teamMember.lastName) : "Home Loan Specialist"
+          })
+        }) ]
+      }) : jsxRuntime.jsxs(jsxRuntime.Fragment, {
+        children: [ jsxRuntime.jsx(KeyboardArrowLeft__default.default, {
+          color: getColour.getColour("interaction", "secondary"),
+          height: "24px",
+          width: "24px"
+        }), jsxRuntime.jsx(BodyWrapper, {
+          size: "md",
+          children: "Chat online"
+        }) ]
+      })
+    })
+  });
+}, StyledClose = styled__default.default(button.IconButton).withConfig({
+  displayName: "style__StyledClose",
+  componentId: "lui__sc-qeih4b-0"
+})([ "position:absolute;" ]), WithChatView = _ref => {
+  var {legacySupport: legacySupport, userType: userType, isOtherUserOnline: isOtherUserOnline, hasNew: hasNew, onException: onException} = _ref, {closeCommPanel: closeCommPanel, isCommPanelOpen: isCommPanelOpen, isChatOpen: isChatOpen, openChat: openChat, teamMember: teamMember, broker: broker, store: store, channelId: channelId, migratedToConversation: migratedToConversation, setSelectedThread: setSelectedThread, applicationId: applicationId, closeChat: closeChat} = chat.useBootstrappedChatState(), hasChat = !useDisableChat(), {enableHistoricalThreads: enableHistoricalThreads} = launchdarkly.useFlags();
   return jsxRuntime.jsxs(jsxRuntime.Fragment, {
-    children: [ !isChatOpen && jsxRuntime.jsx(SidePanel, {
+    children: [ (isCommPanelOpen && !isChatOpen || !enableHistoricalThreads) && jsxRuntime.jsx(StyledClose, {
+      color: "shade.300",
+      onClick: closeCommPanel,
+      size: "md",
+      "aria-label": "Close comm panel",
+      icon: Close__default.default
+    }), isChatOpen && !enableHistoricalThreads && jsxRuntime.jsx(FullViewChatHeader, {
+      teamMember: teamMember,
+      isOtherUserOnline: isOtherUserOnline,
+      onClick: closeChat
+    }), !isChatOpen && jsxRuntime.jsx(SidePanel, {
       teamMember: teamMember,
       store: store,
       broker: broker,

package/dist/navbar.esm.js

@@ -1,9 +1,9 @@
 import React, { useState, useEffect, useRef, forwardRef } from 'react';
 import NavbarBase, { useNavbarBaseContext } from '@lendi-ui/navbar-base';
 import { trackEvent, EventCategory, ButtonType, CustomerType } from '@lendi/analytics';
-import { gte, between, useBreakpoint, map } from '@lendi-ui/breakpoint';
+import { gte, between, map, useBreakpoint } from '@lendi-ui/breakpoint';
 import Logo from '@lendi-ui/logo';
-import { mb, ml, pl, pr, mr, p, px, py, mx, mt, m, pb, my } from '@lendi-ui/spacing';
+import { mb, ml, pl, pr, mr, p, px, py, mx, mt, m, pb, pt, my } from '@lendi-ui/spacing';
 import { select, useTheme } from '@lendi/ui/Theme';
 import styled, { css, keyframes, createGlobalStyle } from 'styled-components';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
@@ -21,6 +21,7 @@ import { useFlags, withLendiLDProvider } from '@lendi/launchdarkly';
 import { useSession, Brand, Type, Environment, Status } from '@lendi/lala-react';
 import { useBootstrappedChatState, Chat as Chat$1, withCustomerChatProvider, ChatDataExposureContext } from '@lendi/chat';
 export { CustomerChatBootstrapperProvider as CommPanelProvider, useBootstrappedChatState as useCommPanel } from '@lendi/chat';
+import Close from '@lendi-ui/icon/Close';
 import { color, bg, fg } from '@lendi-ui/color';
 import Face from '@lendi-ui/icon/Face';
 import getTypography from '@lendi-ui/commons/typography';
@@ -31,9 +32,9 @@ import { LendiGroupLeads } from '@lendi/lendigroup-leads-library';
 import Chat from '@lendi-ui/icon/Chat';
 import KeyboardArrowDown from '@lendi-ui/icon/KeyboardArrowDown';
 import KeyboardArrowRight from '@lendi-ui/icon/KeyboardArrowRight';
+import KeyboardArrowLeft from '@lendi-ui/icon/KeyboardArrowLeft';
 import FocusLock from 'react-focus-lock';
 import Menu from '@lendi-ui/icon/Menu';
-import Close from '@lendi-ui/icon/Close';
 import Sidebar from '@lendi-ui/sidebar';
 import ArrowDropDown from '@lendi-ui/icon/ArrowDropDown';
 import ExitToApp from '@lendi-ui/icon/ExitToApp';
@@ -931,6 +932,25 @@ var CommPanelWrapper$1 = styled.div.withConfig({
   componentId: "lui__sc-no953w-0"
 })(["", ";-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;display:flex;flex-direction:column;height:100%;"], normalise);
 
+var useDisableChat = () => {
+  var [isChatDisabled, setIsChatDisabled] = useState(true);
+  var {
+    disableChat,
+    enableAussieChat
+  } = useFlags();
+  var {
+    brand
+  } = useSession();
+  useEffect(() => {
+    if (brand === Brand$1.Aussie) {
+      if (enableAussieChat !== undefined) setIsChatDisabled(!enableAussieChat);
+    } else {
+      if (disableChat !== undefined) setIsChatDisabled(disableChat);
+    }
+  }, [disableChat, enableAussieChat, brand]);
+  return isChatDisabled;
+};
+
 var HeadWrapper = styled.div.withConfig({
   displayName: "style__HeadWrapper",
   componentId: "lui__sc-zy0mzz-0"
@@ -943,7 +963,7 @@ var BrokerImgWrapper = styled.div.withConfig({
   displayName: "style__BrokerImgWrapper",
   componentId: "lui__sc-zy0mzz-2"
 })(["", ";position:relative;"], mr('xs'));
-var BrokerFace = styled.img.withConfig({
+var BrokerFace$1 = styled.img.withConfig({
   displayName: "style__BrokerFace",
   componentId: "lui__sc-zy0mzz-3"
 })(["width:65px;height:65px;border-radius:50%;border:1px solid ", ";margin:auto;"], color('shade.100'));
@@ -955,11 +975,11 @@ var BrokerName = styled(Heading).withConfig({
   displayName: "style__BrokerName",
   componentId: "lui__sc-zy0mzz-5"
 })(["font-weight:bold;"]);
-var StyledFace = styled(Face).withConfig({
+var StyledFace$1 = styled(Face).withConfig({
   displayName: "style__StyledFace",
   componentId: "lui__sc-zy0mzz-6"
 })(["width:4.5em;height:4.5em;"]);
-var StatusIcon = styled.div.withConfig({
+var StatusIcon$1 = styled.div.withConfig({
   displayName: "style__StatusIcon",
   componentId: "lui__sc-zy0mzz-7"
 })(["width:17px;height:17px;border-radius:50%;position:absolute;right:1px;bottom:8px;", ";"], props => props.isOnline ? bg('success.600') : bg('shade.400'));
@@ -1006,9 +1026,9 @@ var TeamMemberInfo = /*#__PURE__*/React.memo(_ref => {
     children: [/*#__PURE__*/jsx(BrokerWrapper, {
       children: teamMember ? /*#__PURE__*/jsxs(Fragment, {
         children: [/*#__PURE__*/jsxs(BrokerImgWrapper, {
-          children: [teamMember.profilePictureURL ? /*#__PURE__*/jsx(BrokerFace, {
+          children: [teamMember.profilePictureURL ? /*#__PURE__*/jsx(BrokerFace$1, {
             src: teamMember.profilePictureURL
-          }) : /*#__PURE__*/jsx(StyledFace, {}), /*#__PURE__*/jsx(StatusIcon, {
+          }) : /*#__PURE__*/jsx(StyledFace$1, {}), /*#__PURE__*/jsx(StatusIcon$1, {
             isOnline: isOtherUserOnline,
             "aria-label": isOtherUserOnline ? 'Online' : 'Offline'
           })]
@@ -1296,25 +1316,98 @@ var SidePanel = _ref => {
   });
 };
 
-var useDisableChat = () => {
-  var [isChatDisabled, setIsChatDisabled] = useState(true);
+styled.div.withConfig({
+  displayName: "style__MobileBrokerInfoWrapper",
+  componentId: "lui__sc-18wuygo-0"
+})(["display:flex;align-items:center;"]);
+var FaceWrapper = styled.span.withConfig({
+  displayName: "style__FaceWrapper",
+  componentId: "lui__sc-18wuygo-1"
+})(["position:relative;"]);
+var BrokerFace = styled.img.withConfig({
+  displayName: "style__BrokerFace",
+  componentId: "lui__sc-18wuygo-2"
+})(["width:20px;height:20px;border-radius:50%;border:1px solid ", ";"], color('shade.100'));
+var StatusIcon = styled.span.withConfig({
+  displayName: "style__StatusIcon",
+  componentId: "lui__sc-18wuygo-3"
+})(["width:8px;height:8px;border-radius:50%;position:absolute;right:-1px;bottom:4px;", ";"], props => props.isOnline ? bg('success.600') : bg('shade.400'));
+var StyledFace = styled(Face).withConfig({
+  displayName: "style__StyledFace",
+  componentId: "lui__sc-18wuygo-4"
+})(["height:26px;width:22px;"]);
+
+var ChatHeaderTeamMemberAvatar = _ref => {
   var {
-    disableChat,
-    enableAussieChat
-  } = useFlags();
+    teamMember,
+    isBrokerOnline
+  } = _ref;
+  return /*#__PURE__*/jsxs(FaceWrapper, {
+    children: [teamMember !== null && teamMember !== void 0 && teamMember.profilePictureURL ? /*#__PURE__*/jsx(BrokerFace, {
+      src: teamMember.profilePictureURL
+    }) : /*#__PURE__*/jsx(StyledFace, {}), /*#__PURE__*/jsx(StatusIcon, {
+      isOnline: isBrokerOnline,
+      "aria-label": isBrokerOnline ? 'Online' : 'Offline'
+    })]
+  });
+};
+
+var StickyHeader = styled.div.withConfig({
+  displayName: "style__StickyHeader",
+  componentId: "lui__sc-1pqeqpe-0"
+})(["top:0;position:relative;display:flex;flex-direction:row;z-index:3;width:100%;background-color:", ";align-items:center;padding-left:10px;", " ", "   border-bottom:1px solid ", ";cursor:pointer;"], getColour('interaction', 'subtle'), pt('xs'), pb('xxs'), getColour('background', 'surface'));
+var TeamMemberBodyWrapper = styled(Body).withConfig({
+  displayName: "style__TeamMemberBodyWrapper",
+  componentId: "lui__sc-1pqeqpe-1"
+})(["", ";font-size:16px;font-weight:bold;"], pl('xxs'));
+var ChevronLeftIcon = styled(KeyboardArrowLeft).withConfig({
+  displayName: "style__ChevronLeftIcon",
+  componentId: "lui__sc-1pqeqpe-2"
+})([""]);
+
+var FullViewChatHeader = _ref => {
   var {
-    brand
-  } = useSession();
-  useEffect(() => {
-    if (brand === Brand$1.Aussie) {
-      if (enableAussieChat !== undefined) setIsChatDisabled(!enableAussieChat);
-    } else {
-      if (disableChat !== undefined) setIsChatDisabled(disableChat);
-    }
-  }, [disableChat, enableAussieChat, brand]);
-  return isChatDisabled;
+    onClick,
+    teamMember,
+    isOtherUserOnline
+  } = _ref;
+  return /*#__PURE__*/jsx(StickyHeader, {
+    onClick: onClick,
+    children: /*#__PURE__*/jsx(Fragment, {
+      children: teamMember ? /*#__PURE__*/jsxs(Fragment, {
+        children: [/*#__PURE__*/jsx(ChevronLeftIcon, {
+          color: getColour$1('interaction', 'secondary'),
+          height: "24px",
+          width: "24px"
+        }), /*#__PURE__*/jsx(ChatHeaderTeamMemberAvatar, {
+          teamMember: teamMember,
+          isBrokerOnline: isOtherUserOnline
+        }), /*#__PURE__*/jsx(ChatBodyWrapper, {
+          children: /*#__PURE__*/jsx(TeamMemberBodyWrapper, {
+            size: "md",
+            color: "secondary.500",
+            children: teamMember ? "".concat(teamMember.firstName, " ").concat(teamMember.lastName) : 'Home Loan Specialist'
+          })
+        })]
+      }) : /*#__PURE__*/jsxs(Fragment, {
+        children: [/*#__PURE__*/jsx(KeyboardArrowLeft, {
+          color: getColour$1('interaction', 'secondary'),
+          height: "24px",
+          width: "24px"
+        }), /*#__PURE__*/jsx(BodyWrapper, {
+          size: "md",
+          children: "Chat online"
+        })]
+      })
+    })
+  });
 };
 
+var StyledClose = styled(IconButton).withConfig({
+  displayName: "style__StyledClose",
+  componentId: "lui__sc-qeih4b-0"
+})(["position:absolute;"]);
+
 var WithChatView = _ref => {
   var {
     legacySupport,
@@ -1325,6 +1418,7 @@ var WithChatView = _ref => {
   } = _ref;
   var {
     closeCommPanel,
+    isCommPanelOpen,
     isChatOpen,
     openChat,
     teamMember,
@@ -1333,13 +1427,25 @@ var WithChatView = _ref => {
     channelId,
     migratedToConversation,
     setSelectedThread,
-    applicationId
+    applicationId,
+    closeChat
   } = useBootstrappedChatState();
-  var [breakpoint, setBreakpoint] = React.useState();
-  useBreakpoint(setBreakpoint);
   var hasChat = !useDisableChat();
+  var {
+    enableHistoricalThreads
+  } = useFlags();
   return /*#__PURE__*/jsxs(Fragment, {
-    children: [!isChatOpen && /*#__PURE__*/jsx(SidePanel, {
+    children: [(isCommPanelOpen && !isChatOpen || !enableHistoricalThreads) && /*#__PURE__*/jsx(StyledClose, {
+      color: "shade.300",
+      onClick: closeCommPanel,
+      size: "md",
+      "aria-label": "Close comm panel",
+      icon: Close
+    }), isChatOpen && !enableHistoricalThreads && /*#__PURE__*/jsx(FullViewChatHeader, {
+      teamMember: teamMember,
+      isOtherUserOnline: isOtherUserOnline,
+      onClick: closeChat
+    }), !isChatOpen && /*#__PURE__*/jsx(SidePanel, {
       teamMember: teamMember,
       store: store,
       broker: broker,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@lendi/navbar",
   "access": "restricted",
-  "version": "7.16.2-beta.1",
+  "version": "7.16.2",
   "license": "ISC",
   "source": "src/index.tsx",
   "main": "dist/navbar.cjs.js",
@@ -40,7 +40,7 @@
     "@lendi-ui/typography": "^5.13.11-beta.0",
     "@lendi-ui/utils": "^6.0.2-beta.1",
     "@lendi/analytics": "^4.0.0",
-    "@lendi/chat": "1.1.3-beta.1",
+    "@lendi/chat": "^1.1.3",
     "@lendi/lala-utils": "^9.15.1",
     "@lendi/launchdarkly": "0.1.4",
     "@lendi/lendigroup-leads-library": "^2.12.0",
@@ -56,4 +56,4 @@
     "react": "^17.0.2",
     "styled-components": "^4"
   }
-}
+}