@memori.ai/memori-react 9.0.0-alpha.18 → 9.0.0-alpha.19

package/src/components/ChatHistoryDrawer/ChatResumeDrawer.css

@@ -60,10 +60,15 @@
     display: flex;
     align-items: center;
     padding: 14px 16px 12px;
-    /* border-bottom: 0.5px solid var(--color-border-tertiary, var(--memori-border-color, #e5e7eb)); */
     gap: 8px;
 }
 
+@media (max-width: 768px) {
+    .memori-chat-resume-drawer--header {
+        border-bottom: 0.5px solid var(--color-border-tertiary, var(--memori-border-color, #e5e7eb));
+    }
+}
+
 .memori-chat-resume-drawer--header-icon-button {
     display: inline-flex;
     width: 28px;

package/src/components/MobileSessionPanel/MobileSessionPanel.css

@@ -315,6 +315,13 @@
     gap: 0.35rem;
 }
 
+.memori-mobile-session-panel--page:has(.memori-mobile-session-panel--back) {
+    padding-top: 0;
+    padding-bottom: 0.65rem;
+    border-bottom: 0.5px solid var(--memori-border-color, #e5e7eb);
+    margin-bottom: 0.75rem;
+}
+
 /* User details typography */
 .memori-dropdown--user-details {
     display: flex;

package/src/components/layouts/FullPage.tsx

@@ -192,7 +192,8 @@ const FullPageLayout: React.FC<LayoutProps> = ({
       isMobile &&
       !!headerProps.loginToken &&
       headerProps.showChatHistory !== false;
-    const showFullscreenInPanel = headerProps.showFullscreen !== false;
+    const showFullscreenInPanel =
+      !isMobile && headerProps.showFullscreen !== false;
     const showShareInPanel = headerProps.showShare !== false;
     const showLocationInPanel = !!headerProps.memori?.needsPosition;
     const historyBlock = showChatHistoryInPanel

package/src/components/layouts/ZoomedFullBody.tsx

@@ -192,7 +192,8 @@ const ZoomedFullBodyLayout: React.FC<LayoutProps> = ({
       isMobile &&
       !!headerProps.loginToken &&
       headerProps.showChatHistory !== false;
-    const showFullscreenInPanel = headerProps.showFullscreen !== false;
+    const showFullscreenInPanel =
+      !isMobile && headerProps.showFullscreen !== false;
     const showShareInPanel = headerProps.showShare !== false;
     const showLocationInPanel = !!headerProps.memori?.needsPosition;
     const historyBlock = showChatHistoryInPanel

package/src/components/layouts/hidden-chat.css

@@ -80,6 +80,8 @@
     top: auto;
     right: auto;
     flex-shrink: 0;
+    border-color: color-mix(in srgb, var(--memori-text-color, #111827) 28%, transparent);
+    color: var(--memori-text-color, #111827);
     opacity: 1;
     pointer-events: auto;
     visibility: visible;
@@ -321,7 +323,7 @@
 
 .memori-widget.memori-layout-hidden_chat .memori-sidebar .memori-chat-layout--header-row {
     display: flex;
-    overflow: hidden;
+    overflow: visible;
     width: 100%;
     min-width: 0;
     max-width: 100%;
@@ -332,9 +334,7 @@
 
 .memori-widget.memori-layout-hidden_chat .memori-sidebar .memori-hidden-chat-layout--header-actions {
     display: inline-flex;
-    min-width: 0;
-    max-width: 100%;
-    flex: 0 1 auto;
+    flex: 0 0 auto;
     flex-shrink: 0;
     align-items: center;
     margin-left: auto;
@@ -352,10 +352,13 @@
 }
 
 @media (max-width: 480px) {
-    .memori-widget.memori-layout-hidden_chat .memori-sidebar .memori-chat-layout--brand {
-        min-width: 0;
-        max-width: calc(100% - 6.5rem);
-        flex: 1 1 auto;
+    .memori-widget.memori-layout-hidden_chat .memori-sidebar .memori-chat-layout--brand-avatar {
+        width: 32px;
+        height: 32px;
+    }
+
+    .memori-widget.memori-layout-hidden_chat .memori-sidebar .memori-chat-layout--brand-name {
+        font-size: 0.9375rem;
     }
 }
 
@@ -411,11 +414,18 @@
     font-weight: 600;
 }
 
-/* .memori-header defaults to width:100%; in a narrow sidebar that steals space from the brand row. */
-.memori-widget.memori-layout-hidden_chat .memori-sidebar .memori-chat-layout--header-row > .memori-header {
+/* `.memori-header` defaults to width:100%; inside header-actions that pushes the close
+   button off-screen — constrain it to its icon row only. */
+.memori-widget.memori-layout-hidden_chat
+    .memori-sidebar
+    .memori-hidden-chat-layout--header-actions
+    .memori-header {
     width: auto;
     min-width: 0;
-    flex: 0 1 auto;
+    height: auto;
+    flex: 0 0 auto;
+    margin-left: 0;
+    padding-inline: 0;
 }
 
 .memori-widget.memori-layout-hidden_chat .memori-header--position .memori-header--position-placeName {
@@ -426,8 +436,7 @@
     display: flex;
     overflow: hidden;
     min-width: 0;
-    max-width: calc(100% - 7.5rem);
-    flex: 1 1 auto;
+    flex: 1 1 0;
     align-items: center;
     gap: 0.75rem;
 }
@@ -530,6 +539,10 @@
         display: none;
     } */
 
+    .memori-widget.memori-layout-hidden_chat .memori-sidebar .memori-hidden-chat-layout--header-close {
+        z-index: 3;
+    }
+
     .memori-sidebar {
         right: -100%;
         width: 100%;
@@ -610,3 +623,12 @@
     border: var(--memori-border) solid #fff;
     color: #fff;
 }
+
+.memori-widget.memori-layout-hidden_chat[data-theme='dark']
+    .memori-hidden-chat-layout--header-close.memori-website_assistant--close-button,
+[data-theme='dark']
+    .memori-widget.memori-layout-hidden_chat
+    .memori-hidden-chat-layout--header-close.memori-website_assistant--close-button {
+    border-color: #fff;
+    color: #fff;
+}

package/src/version.ts

@@ -1,2 +1,2 @@
 // This file is auto-generated. Do not edit manually.
-export const version = '9.0.0-alpha.18';
+export const version = '9.0.0-alpha.19';