@memori.ai/memori-react 9.0.0-alpha.8 → 9.0.0-rc.0

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

@@ -11,11 +11,13 @@
 }
 
 .memori-widget.memori-layout-hidden_chat .memori-chat--history {
-    background: transparent;
+    background: var(--memori-secondary-background);
 }
 
-.memori-widget.memori-layout-hidden_chat .memori-chat--bubble {
-    background-color: var(--memori-secondary-background);
+.memori-widget.memori-layout-hidden_chat .memori-chat--bubble:not(.memori-chat--user-bubble) {
+    border: none;
+    /* background-color: var(--memori-secondary-background); */
+    box-shadow: none;
 }
 
 .memori-widget.memori-layout-hidden_chat .memori-media-item--document {
@@ -41,10 +43,13 @@
     align-items: center;
     justify-content: center;
     padding: var(--memori-spacing-sm);
-    border-radius: var(--memori-radius-box) 0 0 var(--memori-radius-box);
-    background-color: var(--memori-primary);
+    border-radius: var(--memori-radius-control) 0 0 var(--memori-radius-control);
+    /* Prefer --memori-primary-color: dark theme remaps --memori-primary to
+       --memori-primary-hover, which can circularly resolve to an invalid value. */
+    background-color: var(--memori-primary-color, var(--memori-primary));
+    color: var(--memori-primary-content, #fff);
     cursor: pointer;
-    font-size: var(--memori-text-size-large);
+    font-size: var(--memori-text-size-lg);
     font-weight: var(--memori-text-weight-semibold);
     line-height: var(--memori-text-line-normal);
     text-orientation: mixed;
@@ -54,17 +59,79 @@
 }
 
 .memori-open-label {
-    border-radius: var(--memori-radius-box) 0 0 var(--memori-radius-box);
+    border-radius: var(--memori-radius-control) 0 0 var(--memori-radius-control);
 }
 
 .memori-close-label {
     right: var(--memori-hidden-chat-width);
-    border-radius: var(--memori-radius-box) 0 0 var(--memori-radius-box);
+    border-radius: var(--memori-radius-control) 0 0 var(--memori-radius-control);
     opacity: 0;
     pointer-events: none;
     transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out, right 0.3s ease-in-out;
 }
 
+/* Close control lives in the header icon group (next to mute), not as a mid-page float.
+   Visuals come from `.memori-website_assistant--close-button` (shared with WEBSITE_ASSISTANT). */
+.memori-widget.memori-layout-hidden_chat
+    .memori-sidebar
+    .memori-hidden-chat-layout--header-close.memori-website_assistant--close-button {
+    position: relative;
+    z-index: 2;
+    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;
+}
+
+.memori-button--icon > svg {
+    margin: 0;
+}
+
+.memori-icon,
+.memori-icon-close {
+    width: var(--memori-spacing-xl);
+    height: var(--memori-spacing-xl);
+    stroke: currentColor;
+}
+
+.memori-icon {
+    stroke: #fff;
+}
+
+.memori-icon-close {
+    fill: none;
+}
+
+/* Powered-by is not shown in HIDDEN_CHAT; AI disclaimer wraps under the input. */
+.memori-widget.memori-layout-hidden_chat .memori-sidebar .memori--powered-by {
+    display: none !important;
+}
+
+.memori-widget.memori-layout-hidden_chat .memori-conversation-footer {
+    flex-wrap: wrap;
+    justify-content: center;
+}
+
+.memori-widget.memori-layout-hidden_chat
+    .memori-conversation-footer
+    .memori-chat-inputs--ai-note {
+    overflow: visible;
+    flex: 1 1 100%;
+    text-align: center;
+    text-overflow: unset;
+    white-space: normal;
+}
+
+.memori-widget.memori--active.memori-layout-hidden_chat
+    .memori-conversation-footer
+    .memori-chat-inputs--ai-note {
+    text-align: left;
+}
+
 .memori-sidebar {
     position: fixed;
     z-index: 1000;
@@ -72,15 +139,11 @@
     right: calc(-1 * var(--memori-hidden-chat-width));
     width: var(--memori-hidden-chat-width);
     height: 100%;
-    background-color: var(--memori-main-background, #fff);
+    background-color: var(--memori-secondary-background);
     box-shadow: -2px 0 var(--memori-spacing-sm) rgba(0, 0, 0, 0.1);
     transition: all 0.3s ease-in-out;
 }
 
-.memori-widget.memori-layout-hidden_chat .memori-sidebar .memori-chat--content {
-    padding: 0;
-}
-
 .memori-widget.memori-layout-hidden_chat .memori-sidebar .memori-chat-history {
     height: calc(100% - var(--memori-spacing-5xl));
     padding: 0;
@@ -89,27 +152,59 @@
 }
 
 .memori-widget.memori-layout-hidden_chat .memori-chat-inputs {
-    background: var(--memori-secondary-background);
+    background: transparent;
+}
+
+/* Input bar styles (dark compact pill) live in ChatInputs.css.
+   Keep the bar full-width at the bottom of the sidebar column. */
+.memori-widget.memori-layout-hidden_chat .memori-sidebar .memori-chat--wrapper {
+    display: flex;
+    min-height: 0;
+    flex: 1;
+    flex-direction: column;
 }
 
-.memori-widget.memori-layout-hidden_chat .memori-sidebar .memori-chat-inputs {
-    padding: var(--memori-spacing-sm) var(--memori-spacing-lg);
+.memori-widget.memori-layout-hidden_chat .memori-sidebar .memori-chat--history {
+    min-height: 0;
+    flex: 1 1 auto;
+    margin-bottom: 0;
 }
 
-.memori-widget.memori-layout-hidden_chat .memori--start-description {
-    margin-top: auto;
+.memori-widget.memori-layout-hidden_chat
+    .memori-sidebar
+    .memori-chat--content--has-global-background,
+.memori-widget.memori-layout-hidden_chat
+    .memori-sidebar
+    .memori-chat--history:has(.memori-chat--content--has-global-background) {
+    background: transparent;
 }
 
-/* Fullscreen styles */
-.memori-sidebar-fullscreen {
+.memori-widget.memori-layout-hidden_chat .memori-sidebar .memori-chat-inputs-wrapper {
+    width: 100%;
+    flex-shrink: 0;
+    background: var(--memori-secondary-background);
+}
+
+.memori-widget.memori-layout-hidden_chat .memori-sidebar .memori-chat-layout--prechat-inputs {
+    width: 100%;
+    flex-shrink: 0;
+}
+
+/* Fullscreen styles — cover the full window width (browser FS or class toggle) */
+.memori-sidebar-fullscreen,
+.memori-sidebar:fullscreen,
+.memori-sidebar:-webkit-full-screen {
+    top: 0 !important;
     right: 0 !important;
+    left: 0 !important;
     width: 100% !important;
-    max-width: 100% !important;
+    max-width: none !important;
     height: 100% !important;
+    border-radius: 0;
     box-shadow: none;
 }
 
-.memori-sidebar-fullscreen .memori-close-label {
+.memori-sidebar-fullscreen .memori-close-label:not(.memori-hidden-chat-layout--header-close) {
     z-index: 1100;
     top: var(--memori-spacing-sm);
     right: var(--memori-spacing-sm);
@@ -160,7 +255,7 @@
 .memori-sidebar-content h2 {
     margin-bottom: var(--memori-spacing-lg);
     color: var(--memori-primary);
-    font-size: var(--memori-text-size-heading-large);
+    font-size: var(--memori-text-size-2xl);
     font-weight: var(--memori-text-weight-semibold);
     line-height: var(--memori-text-line-tight);
 }
@@ -178,7 +273,7 @@
     display: flex;
     align-items: center;
     color: var(--memori-text-color);
-    font-size: var(--memori-text-size-base);
+    font-size: var(--memori-text-size-md);
     line-height: var(--memori-text-line-normal);
     text-decoration: none;
     transition: color 0.2s ease-in-out;
@@ -192,9 +287,22 @@
     right: 0;
 }
 
-/* Keep in sync with ArtifactDrawer split width (46% / --memori-modal-size-md override) */
+/* Keep in sync with ArtifactDrawer split width (55% / --memori-modal-size-md override) */
 .memori-sidebar-toggle-artifact:checked ~ .memori-sidebar-container .memori-sidebar {
-    right: 46%;
+    right: 55%;
+}
+
+/* Fullscreen must win over the artifact split offset */
+.memori-sidebar-toggle-artifact:checked
+    ~ .memori-sidebar-container
+    .memori-sidebar.memori-sidebar-fullscreen,
+.memori-sidebar-toggle-artifact:checked
+    ~ .memori-sidebar-container
+    .memori-sidebar:fullscreen,
+.memori-sidebar-toggle-artifact:checked
+    ~ .memori-sidebar-container
+    .memori-sidebar:-webkit-full-screen {
+    right: 0 !important;
 }
 
 .memori-sidebar-toggle:checked ~ .memori-sidebar-container .memori-open-label {
@@ -217,9 +325,11 @@
 
 .memori-widget.memori-layout-hidden_chat .memori-sidebar .memori-chat-layout--header {
     width: 100%;
+    max-width: 100%;
+    box-sizing: border-box;
     flex-shrink: 0;
     padding: 0.75rem 1rem;
-    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
+    border-bottom: 1px solid var(--memori-border-color);
     margin-bottom: 0;
     background: var(--memori-secondary-background);
     text-align: left;
@@ -227,7 +337,10 @@
 
 .memori-widget.memori-layout-hidden_chat .memori-sidebar .memori-chat-layout--header-row {
     display: flex;
+    overflow: visible;
     width: 100%;
+    min-width: 0;
+    max-width: 100%;
     align-items: center;
     justify-content: space-between;
     gap: 0.75rem;
@@ -236,6 +349,7 @@
 .memori-widget.memori-layout-hidden_chat .memori-sidebar .memori-hidden-chat-layout--header-actions {
     display: inline-flex;
     flex: 0 0 auto;
+    flex-shrink: 0;
     align-items: center;
     margin-left: auto;
     gap: 0.35rem;
@@ -252,10 +366,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;
     }
 }
 
@@ -311,11 +428,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 {
@@ -326,7 +450,7 @@
     display: flex;
     overflow: hidden;
     min-width: 0;
-    flex: 1 1 auto;
+    flex: 1 1 0;
     align-items: center;
     gap: 0.75rem;
 }
@@ -371,8 +495,14 @@
     flex: 1;
     flex-direction: column;
     align-items: stretch;
-    padding: 0.75rem 1rem 0.75rem;
-    background: var(--memori-main-background);
+    padding: 0;
+    background: var(--memori-secondary-background);
+}
+
+.memori-widget.memori-layout-hidden_chat
+    .memori-sidebar
+    .memori-chat-layout--body:has(.memori-chat--content--has-global-background) {
+    background: transparent;
 }
 
 .memori-widget.memori-layout-hidden_chat .memori-sidebar .memori-chat-layout--start-shell {
@@ -403,7 +533,7 @@
     max-width: 30.5rem;
     align-self: center;
     border: none;
-    border-radius: 16px;
+    border-radius: var(--memori-radius-surface);
     background: var(--memori-secondary-background);
 }
 
@@ -412,25 +542,11 @@
 }
 
 .memori-widget.memori-layout-hidden_chat .memori-sidebar .memori-chat-layout--body .memori--title-container {
-    flex-direction: column;
-    align-items: center;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    align-items: flex-start;
     padding-top: 1rem;
-    text-align: center;
-}
-
-.memori-button--icon > svg {
-    margin: 0;
-}
-
-.memori-icon,
-.memori-icon-close {
-    width: var(--memori-spacing-xl);
-    height: var(--memori-spacing-xl);
-    stroke: #fff;
-}
-
-.memori-icon-close {
-    fill: var(--memori-main-background, #fff);
+    text-align: left;
 }
 
 @media (max-width: 768px) {
@@ -438,6 +554,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%;
@@ -452,53 +572,63 @@
     }
 
     /* Mobile fullscreen styles */
-    .memori-sidebar-fullscreen {
+    .memori-sidebar-fullscreen,
+    .memori-sidebar:fullscreen,
+    .memori-sidebar:-webkit-full-screen {
         display: block;
     }
 
-    .memori-sidebar-container .memori-sidebar-fullscreen {
+    .memori-sidebar-container .memori-sidebar-fullscreen,
+    .memori-sidebar-container .memori-sidebar:fullscreen,
+    .memori-sidebar-container .memori-sidebar:-webkit-full-screen {
         position: fixed;
         top: 0;
+        right: 0 !important;
         left: 0;
         display: block;
         width: 100% !important;
+        max-width: none !important;
         height: 100% !important;
     }
 }
 
-/* Dark theme: header controls — white outline and icon (incl. share + position popover) */
+/* Dark theme: keep open/floating toggle on a solid primary fill */
+.memori-widget.memori-layout-hidden_chat[data-theme='dark']
+    .memori-sidebar-toggle-label:not(.memori-hidden-chat-layout--header-close),
+[data-theme='dark']
+    .memori-widget.memori-layout-hidden_chat
+    .memori-sidebar-toggle-label:not(.memori-hidden-chat-layout--header-close) {
+    background-color: var(--memori-primary-color, var(--memori-primary));
+    color: var(--memori-primary-content, #fff);
+}
+
+/* Dark theme: header controls — white outline and icon (incl. share + position popover).
+   Soft-active / recording IconButtons keep primary/error chrome from IconButton.css. */
 .memori-widget.memori-layout-hidden_chat[data-theme='dark']
     .memori-header
-    .memori-button:not(:disabled):not(.memori-button--disabled),
+    .memori-button:not(.memori-icon-button--active, .memori-icon-button--recording, :disabled, .memori-button--disabled),
 [data-theme='dark']
     .memori-widget.memori-layout-hidden_chat
     .memori-header
-    .memori-button:not(:disabled):not(.memori-button--disabled) {
+    .memori-button:not(.memori-icon-button--active, .memori-icon-button--recording, :disabled, .memori-button--disabled) {
     border: var(--memori-border) solid #fff;
     color: #fff;
 }
 
 .memori-widget.memori-layout-hidden_chat[data-theme='dark']
     .memori-header
-    .memori-button:hover:not(:disabled, .memori-button--disabled),
+    .memori-button:hover:not(.memori-icon-button, .memori-icon-button--active, .memori-icon-button--recording, :disabled, .memori-button--disabled),
 .memori-widget.memori-layout-hidden_chat[data-theme='dark']
     .memori-header
-    .memori-button:active:not(:disabled, .memori-button--disabled),
-.memori-widget.memori-layout-hidden_chat[data-theme='dark']
-    .memori-header
-    .memori-button.memori-button--active:not(:disabled, .memori-button--disabled),
-[data-theme='dark']
-    .memori-widget.memori-layout-hidden_chat
-    .memori-header
-    .memori-button:hover:not(:disabled, .memori-button--disabled),
+    .memori-button:active:not(.memori-icon-button, .memori-icon-button--active, .memori-icon-button--recording, :disabled, .memori-button--disabled),
 [data-theme='dark']
     .memori-widget.memori-layout-hidden_chat
     .memori-header
-    .memori-button:active:not(:disabled, .memori-button--disabled),
+    .memori-button:hover:not(.memori-icon-button, .memori-icon-button--active, .memori-icon-button--recording, :disabled, .memori-button--disabled),
 [data-theme='dark']
     .memori-widget.memori-layout-hidden_chat
     .memori-header
-    .memori-button.memori-button--active:not(:disabled, .memori-button--disabled) {
+    .memori-button:active:not(.memori-icon-button, .memori-icon-button--active, .memori-icon-button--recording, :disabled, .memori-button--disabled) {
     border: var(--memori-border) solid #fff;
     color: #fff;
 }
@@ -514,3 +644,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;
+}