@memori.ai/memori-react 9.0.0-alpha.1 → 9.0.0-alpha.11

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,89 @@
     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 */
+.memori-widget.memori-layout-hidden_chat
+    .memori-sidebar
+    .memori-hidden-chat-layout--header-close.memori-sidebar-toggle-label {
+    position: relative;
+    top: auto;
+    right: auto;
+    display: inline-flex;
+    width: 2.5rem;
+    min-width: 2.5rem;
+    height: 2.5rem;
+    min-height: 2.5rem;
+    align-items: center;
+    justify-content: center;
+    padding: 0;
+    border: var(--memori-border, 1px) solid color-mix(in srgb, var(--memori-text-color, #111827) 18%, transparent);
+    border-radius: var(--memori-radius-box, 0.5rem);
+    margin: 0;
+    background: transparent;
+    color: var(--memori-text-color, #111827);
+    cursor: pointer;
+    font-size: inherit;
+    font-weight: inherit;
+    line-height: 1;
+    opacity: 1;
+    pointer-events: auto;
+    text-orientation: mixed;
+    transform: none;
+    transition: background-color 0.15s ease, border-color 0.15s ease;
+    writing-mode: horizontal-tb;
+}
+
+.memori-widget.memori-layout-hidden_chat
+    .memori-sidebar
+    .memori-hidden-chat-layout--header-close.memori-sidebar-toggle-label:hover {
+    background: color-mix(in srgb, var(--memori-text-color, #111827) 6%, transparent);
+}
+
+.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;
+}
+
+.memori-widget.memori-layout-hidden_chat .memori-sidebar .memori-hidden-chat-layout--header-close .memori-icon-close {
+    width: 1.125rem;
+    height: 1.125rem;
+    fill: none;
+    stroke: currentColor;
+}
+
+/* Powered-by footer under the input on --memori-secondary-background */
+.memori-widget.memori-layout-hidden_chat .memori-sidebar .memori--powered-by {
+    position: relative;
+    z-index: 5;
+    top: auto;
+    right: auto;
+    bottom: auto;
+    left: auto;
+    display: flex;
+    width: 100%;
+    flex-shrink: 0;
+    justify-content: center;
+    padding: 0.35rem 1rem 0.85rem;
+    border-radius: 0;
+    margin: 0;
+    background: var(--memori-secondary-background);
+    transform: none;
+}
+
 .memori-sidebar {
     position: fixed;
     z-index: 1000;
@@ -72,13 +160,13 @@
     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;
+    padding: var(--memori-spacing-xl);
 }
 
 .memori-widget.memori-layout-hidden_chat .memori-sidebar .memori-chat-history {
@@ -89,11 +177,42 @@
 }
 
 .memori-widget.memori-layout-hidden_chat .memori-chat-inputs {
+    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--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-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-inputs {
-    padding: var(--memori-spacing-sm) var(--memori-spacing-lg);
+.memori-widget.memori-layout-hidden_chat .memori-sidebar .memori-chat-layout--prechat-inputs {
+    width: 100%;
+    flex-shrink: 0;
 }
 
 .memori-widget.memori-layout-hidden_chat .memori--start-description {
@@ -109,7 +228,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 +311,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 {
@@ -218,7 +338,7 @@
     width: 100%;
     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;
@@ -370,8 +490,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 {
@@ -417,21 +543,6 @@
     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);
-}
-
 @media (max-width: 768px) {
     /* .memori-sidebar-container {
         display: none;
@@ -465,6 +576,16 @@
     }
 }
 
+/* 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) */
 .memori-widget.memori-layout-hidden_chat[data-theme='dark']
     .memori-header
@@ -513,9 +634,3 @@
     border: var(--memori-border) solid #fff;
     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;
-    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%;
     }
 }