@memori.ai/memori-react 9.0.0-alpha.2 → 9.0.0-alpha.21

package/esm/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 {
@@ -42,7 +44,10 @@
     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);
+    /* 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-weight: var(--memori-text-weight-semibold);
@@ -65,6 +70,68 @@
     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,15 +152,42 @@
 }
 
 .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--history {
+    min-height: 0;
+    flex: 1 1 auto;
+    margin-bottom: 0;
 }
 
-.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--content--has-global-background,
+.memori-widget.memori-layout-hidden_chat
+    .memori-sidebar
+    .memori-chat--history:has(.memori-chat--content--has-global-background) {
+    background: transparent;
 }
 
-.memori-widget.memori-layout-hidden_chat .memori--start-description {
-    margin-top: auto;
+.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 */
@@ -109,7 +199,7 @@
     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);
@@ -192,8 +282,9 @@
     right: 0;
 }
 
+/* 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%;
 }
 
 .memori-sidebar-toggle:checked ~ .memori-sidebar-container .memori-open-label {
@@ -216,9 +307,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;
@@ -226,7 +319,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;
@@ -235,6 +331,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;
@@ -251,10 +348,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;
     }
 }
 
@@ -310,11 +410,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 {
@@ -325,7 +432,7 @@
     display: flex;
     overflow: hidden;
     min-width: 0;
-    flex: 1 1 auto;
+    flex: 1 1 0;
     align-items: center;
     gap: 0.75rem;
 }
@@ -370,8 +477,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 {
@@ -411,25 +524,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) {
@@ -437,6 +536,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%;
@@ -465,39 +568,43 @@
     }
 }
 
-/* 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-widget.memori-layout-hidden_chat[data-theme='dark']
-    .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),
 .memori-widget.memori-layout-hidden_chat[data-theme='dark']
     .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),
 [data-theme='dark']
     .memori-widget.memori-layout-hidden_chat
     .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),
 [data-theme='dark']
     .memori-widget.memori-layout-hidden_chat
     .memori-header
-    .memori-button:active:not(: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,8 +621,11 @@
     color: #fff;
 }
 
-.memori-widget.memori-layout-hidden_chat[data-theme='dark'] .memori-hidden-chat-layout--overflow-trigger,
-[data-theme='dark'] .memori-widget.memori-layout-hidden_chat .memori-hidden-chat-layout--overflow-trigger {
-    border: var(--memori-border) solid #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/esm/components/layouts/totem.css

@@ -1,32 +1,54 @@
 .memori-widget.memori-layout-totem {
-    height: 95vh !important;
+    /* Shared content axis for avatar + panel + status indicator (section 3).
+       Overridable per-integration via the `totemContentMaxWidth` prop, which
+       sets this custom property inline (e.g. wider for vertical kiosks). */
+    --memori-totem-max-width: 600px;
+    height: 100vh !important;
+    height: 100dvh !important;
 }
 
 .memori-widget.memori-layout-totem .memori--global-background.no-background-image {
     background: linear-gradient(#333, #eee);
 }
 
-.memori-widget > .memori-spin.memori-totem-layout {
+.memori-widget > .memori-spin.memori-totem-layout,
+.memori-widget > .memori-widget__surface > .memori-spin.memori-totem-layout {
+    position: relative;
     display: flex;
     height: 100%;
     flex-direction: column;
 }
 
+/* Rail/header is an overlay so it does not consume vertical flow: the 3D
+   scene height equals 100vh minus the panel height, per spec. */
 .memori-totem-layout--header {
+    position: absolute;
+    z-index: 101;
+    top: var(--memori-spacing-md);
+    right: var(--memori-spacing-md);
     text-align: right;
 }
 
+/* Avatar fills the flex space above the panel: height = 100vh - panel. */
 .memori-totem-layout--avatar {
-    flex: 1;
+    position: relative;
+    min-height: 0;
+    flex: 1 1 auto;
 }
 
+/* Avatar shares the same centered axis and max-width as the panel below it,
+   so on wide desktop the face is not lost in empty space (section 3). */
 .memori-totem-layout--avatar .memori--avatar-wrapper {
-    position: fixed;
+    position: absolute;
     z-index: 0;
     top: 0;
-    left: 0;
+    bottom: 0;
+    left: 50%;
     overflow: hidden;
     width: 100%;
+    max-width: var(--memori-totem-max-width, 600px);
+    height: 100%;
+    transform: translateX(-50%);
 }
 
 .memori-totem-layout--avatar .memori--blob-container {
@@ -45,42 +67,74 @@
     }
 }
 
-.memori-totem-layout .memori-header {
-    position: relative;
-    z-index: 101;
+/* ==========================================================================
+   SECTION 4–5 — Side rail: one visible container, two tiers, flat surface.
+   Solid surface (no blur) so text/icon contrast never depends on the 3D
+   frame behind it.
+   ========================================================================== */
+.memori-totem-rail {
     display: inline-flex;
-    width: auto;
-    height: auto;
     flex-direction: column;
     align-items: center;
-    justify-content: center;
-    backdrop-filter: blur(18px);
-    background: color-mix(in oklch, var(--memori-main-background) 68%, transparent);
-    text-align: center;
+    padding: var(--memori-spacing-xs);
+    border: 1px solid var(--memori-border-color);
+    border-radius: 12px;
+    background: var(--memori-secondary-background);
+    gap: var(--memori-spacing-xs);
+}
+
+.memori-totem-rail--group {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: var(--memori-spacing-xs);
 }
 
-.memori-totem-layout .memori-header .memori-header--button,
-.memori-totem-layout .memori-header .memori-header--button button {
-    width: 38px;
-    height: 38px;
+.memori-totem-rail--divider {
+    width: 24px;
+    height: 1px;
+    flex-shrink: 0;
+    background: var(--memori-border-color);
+}
+
+.memori-totem-rail--button,
+.memori-totem-rail--button button {
+    width: 40px;
+    height: 40px;
+    border-radius: 8px;
     aspect-ratio: 1;
 }
 
-.memori-totem-layout .memori-header .memori-header--button--position,
-.memori-totem-layout .memori-header .memori-header--button-login,
-.memori-totem-layout .memori-header .memori-share-button,
-.memori-totem-layout .memori-header .memori-header--button + .memori-header--button {
-    margin-top: var(--memori-spacing-xs);
-    margin-right: 0;
-    margin-left: 0;
+.memori-totem-rail--menu-content {
+    display: flex;
+    min-width: 220px;
+    flex-direction: column;
+    gap: 2px;
 }
 
-.memori-totem-layout .memori-header .memori-header--button--position {
+.memori-totem-rail--menu-identity {
+    display: flex;
+    flex-direction: column;
+    padding: var(--memori-spacing-sm) var(--memori-spacing-sm) var(--memori-spacing-xs);
+    border-bottom: 1px solid var(--memori-border-color);
     margin-bottom: var(--memori-spacing-xs);
+    gap: 2px;
 }
 
-.memori-totem-layout .memori-header--position .memori-header--position-placeName {
-    display: none;
+.memori-totem-rail--menu-identity-name {
+    color: var(--memori-text-color);
+    font-weight: var(--memori-text-weight-bold);
+}
+
+.memori-totem-rail--menu-identity-email {
+    color: color-mix(in srgb, var(--memori-text-color) 70%, transparent);
+    font-size: 0.8rem;
+}
+
+.memori-totem-rail--menu-item,
+.memori-totem-rail--menu-item button {
+    width: 100%;
+    justify-content: flex-start;
 }
 
 .memori-totem-layout .memori-chat--cover {
@@ -122,38 +176,85 @@
     z-index: 5;
 } */
 
-.memori-totem-layout--controls .memori--start-panel,
-.memori-totem-layout--controls .memori-chat--history,
-.memori-totem-layout--controls .memori-chat--content {
+/* Panel sits below the avatar and never grows into it: capped height with
+   internal scroll instead of pushing the scene up. */
+.memori-totem-layout--controls {
     z-index: 100;
-    backdrop-filter: blur(18px);
-    background: color-mix(in oklch, var(--memori-main-background) 68%, transparent);
+    flex-shrink: 0;
 }
 
-.memori-totem-layout--controls .memori-chat--history .memori-chat--content {
-    max-height: 400px;
+/* ==========================================================================
+   SECTION 2–3 — Single unified panel + shared alignment axis
+   One container (surface + 1px border + 12px radius). Inner sections have
+   NO border/shadow/width of their own, only 1px dividers between them.
+   ========================================================================== */
+.memori-totem-layout--controls .memori-chat--wrapper,
+.memori-totem-layout--controls .memori--start-panel {
+    display: flex;
+    overflow: hidden;
+    width: 100%;
+    max-width: var(--memori-totem-max-width, 600px);
+    max-height: 48vh;
+    box-sizing: border-box;
+    flex-direction: column;
+    padding: 0;
+    border: 1px solid var(--memori-border-color);
+    border-radius: 12px;
+    margin: 0 auto;
+    background: var(--memori-secondary-background);
 }
 
-.memori-totem-layout--controls {
-    z-index: 100;
+/* Nested conversation column must not add its own axis/padding/surface. */
+.memori-totem-layout--controls .memori-conversation-column {
+    width: 100%;
+    max-width: none;
+    height: auto;
+    min-height: 0;
+    padding: 0;
+    margin: 0;
 }
 
-.memori-totem-layout--controls .memori--start-panel,
-.memori-totem-layout--controls .memori-chat--wrapper {
-    width: 80vw;
-    max-width: 800px;
-    padding: 1rem;
-    margin: 0 auto;
+/* Messages section: height follows content (no empty band), scrolls when capped. */
+.memori-totem-layout--controls .memori-chat--history {
+    height: auto;
+    min-height: 0;
+    flex: 1 1 auto;
+    border: none;
+    border-radius: 0;
+    margin: 0;
+    background: transparent;
 }
 
-@media (max-width: 870px) {
-    .memori-totem-layout--controls .memori--start-panel,
-    .memori-totem-layout--controls .memori-chat--wrapper {
-        width: 100%;
-    }
+.memori-totem-layout--controls .memori-chat--content {
+    height: auto;
+    max-height: none;
+    padding: var(--memori-spacing-md);
+    background: transparent;
+}
 
-    .memori-totem-layout--controls .memori-chat--wrapper {
-        padding: 0;
+/* Input section: 1px divider above, no own surface. */
+.memori-totem-layout--controls .memori-chat-inputs-wrapper {
+    padding: var(--memori-spacing-md);
+    border-top: 1px solid var(--memori-border-color);
+    background: transparent;
+}
+
+.memori-totem-layout--controls .memori-chat-inputs--container {
+    border-width: 1px;
+    border-radius: 8px;
+}
+
+/* Start-panel body scrolls internally instead of stretching the panel. */
+.memori-totem-layout--controls .memori--start-panel__body {
+    min-height: 0;
+    flex: 1 1 auto;
+    overflow-y: auto;
+}
+
+@media (max-width: 870px) {
+    .memori-totem-layout--controls .memori-chat--wrapper,
+    .memori-totem-layout--controls .memori--start-panel {
+        max-width: 100%;
     }
 }