@memori.ai/memori-react 9.0.0-alpha.8 → 9.0.0-alpha.9

package/src/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);
@@ -219,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;
@@ -371,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 {
@@ -418,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;
@@ -466,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

package/src/components/layouts/layouts.stories.tsx

@@ -43,6 +43,7 @@ DefaultLayout.args = {
   layout: 'FULLPAGE',
   uiLang: 'IT',
   spokenLang: 'IT',
+  showLogin: true,
   integrationID: '019f1896-730d-7e19-9a88-6413f485247b',
 };
 

package/src/components/layouts/zoomed-full-body.css

@@ -28,21 +28,11 @@
     gap: 0;
 }
 
-/* 3D avatar: pin “Powered by” to the corner so it clears the figure.
-   Order: lower-specificity (no surface) first, then surface variants
-   (stylelint no-descending-specificity). */
-.memori-widget.memori-layout-zoomed_full_body > .memori-spin > .memori--powered-by,
-.memori-widget.memori-layout-zoomed_full_body.memori--avatar-readyplayerme > .memori-spin > .memori--powered-by,
-.memori-widget.memori-layout-zoomed_full_body.memori--avatar-readyplayerme-full > .memori-spin > .memori--powered-by,
-.memori-widget.memori-layout-zoomed_full_body.memori--avatar-customglb > .memori-spin > .memori--powered-by,
-.memori-widget.memori-layout-zoomed_full_body.memori--avatar-customrpm > .memori-spin > .memori--powered-by,
-.memori-widget.memori-layout-zoomed_full_body > .memori-widget__surface > .memori-spin > .memori--powered-by,
-.memori-widget.memori-layout-zoomed_full_body.memori--avatar-readyplayerme > .memori-widget__surface > .memori-spin > .memori--powered-by,
-.memori-widget.memori-layout-zoomed_full_body.memori--avatar-readyplayerme-full > .memori-widget__surface > .memori-spin > .memori--powered-by,
-.memori-widget.memori-layout-zoomed_full_body.memori--avatar-customglb > .memori-widget__surface > .memori-spin > .memori--powered-by,
-.memori-widget.memori-layout-zoomed_full_body.memori--avatar-customrpm > .memori-widget__surface > .memori-spin > .memori--powered-by {
-    bottom: 3.5rem;
-    left: 1.5rem;
+/* "Powered by" is rendered inside .memori--grid-column-left and pinned to its bottom-left corner
+   via the default absolute positioning defined in PoweredBy.css. */
+.memori-widget.memori-layout-zoomed_full_body .memori--grid-column-left > .memori--powered-by {
+    bottom: 1rem;
+    left: 1rem;
 }
 
 /* Header spacing + fullpage chrome (brand + actions bar) */
@@ -67,7 +57,14 @@
 }
 
 .memori-widget.memori-layout-zoomed_full_body .memori-chat-layout--controls .memori-chat--history {
+    min-height: 0;
+    flex: 1 1 auto;
     border: 1px solid color-mix(in srgb, var(--memori-text-color, #111827) 12%, transparent);
+    border-bottom: none;
+    margin-bottom: 0;
+    background-color: var(--memori-secondary-background);
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
 }
 
 .memori-widget.memori-layout-zoomed_full_body .memori-fullpage-header-row {
@@ -181,7 +178,7 @@
     border-radius: 0.9rem;
     margin-right: 0;
     backdrop-filter: blur(10px);
-    background: var(--memori-bg-color, #f4f7fa23);
+    background: var(--memori-main-background);
 }
 
 .memori-widget.memori-layout-zoomed_full_body .memori--grid-column-left .memori--avatar-wrapper {
@@ -261,14 +258,18 @@
     flex-direction: column;
     align-items: stretch;
     padding: 0;
+    background: var(--memori-secondary-background);
 }
 
 .memori-widget.memori-layout-zoomed_full_body .memori-chat-layout--controls .memori--start-panel,
 .memori-widget.memori-layout-zoomed_full_body .memori-chat-layout--controls .memori-chat--wrapper {
+    display: flex;
     width: 100%;
     max-width: 100%;
     height: 100%;
     min-height: 0;
+    flex: 1 1 0%;
+    flex-direction: column;
     padding: 0 !important;
     margin-right: 0;
     margin-left: 0;
@@ -292,25 +293,25 @@
     line-height: var(--memori-text-line-relaxed);
 }
 
-/* ZoomedFullBody + dark: main surface on inputs (ancestor or widget may carry data-theme). */
-.memori-widget.memori-layout-zoomed_full_body[data-theme='dark'] .memori-chat-inputs,
-[data-theme='dark'] .memori-widget.memori-layout-zoomed_full_body .memori-chat-inputs {
-    background-color: var(--memori-main-background);
-}
-
-.memori-widget.memori-layout-zoomed_full_body[data-theme='dark'] .memori-chat-textarea,
-[data-theme='dark'] .memori-widget.memori-layout-zoomed_full_body .memori-chat-textarea {
-    background-color: var(--memori-main-background);
-}
+/* ZoomedFullBody: Memori brand lives in the header; no footer watermark.
+   Input bar styles live in ChatInputs.css (shared with FULLPAGE). */
 
-.memori-widget.memori-layout-zoomed_full_body[data-theme='dark'] .memori-chat-textarea--inner,
-[data-theme='dark'] .memori-widget.memori-layout-zoomed_full_body .memori-chat-textarea--inner {
-    background-color: var(--memori-main-background);
+/* Keep the input bar inside the chat panel, pinned to the bottom of the column */
+.memori-widget.memori-layout-zoomed_full_body .memori-chat-layout--controls .memori-chat--wrapper {
+    display: flex;
+    min-height: 0;
+    flex: 1 1 0%;
+    flex-direction: column;
 }
 
-.memori-widget.memori-layout-zoomed_full_body[data-theme='dark'] textarea.memori-chat-textarea--input,
-[data-theme='dark'] .memori-widget.memori-layout-zoomed_full_body textarea.memori-chat-textarea--input {
-    background-color: var(--memori-main-background);
+.memori-widget.memori-layout-zoomed_full_body .memori-chat-layout--controls .memori-chat-inputs-wrapper {
+    width: 100%;
+    flex-shrink: 0;
+    border: 1px solid color-mix(in srgb, var(--memori-text-color, #111827) 12%, transparent);
+    border-top: 0;
+    background: var(--memori-secondary-background);
+    border-bottom-left-radius: 12px;
+    border-bottom-right-radius: 12px;
 }
 
 @media (max-width: 870px) {

package/src/styles.css

@@ -130,14 +130,8 @@
     flex-direction: column !important;
 }
 
-.memori-widget
-    > .memori-widget__surface
-    > .memori-spin
-    > .memori-fullpage-content-row,
-.memori-widget
-    > .memori-widget__surface
-    > .memori-spin.memori-chat-layout
-    > .memori-chat-layout--main {
+.memori-widget > .memori-widget__surface > .memori-spin > .memori-fullpage-content-row,
+.memori-widget > .memori-widget__surface > .memori-spin.memori-chat-layout > .memori-chat-layout--main {
     height: 100% !important;
     min-height: 0;
     flex: 1 1 0% !important;
@@ -183,8 +177,9 @@
     memori-client[data-theme='dark'],
     .memori-widget[data-theme='dark'] {
         --memori-primary: var(--memori-primary-hover);
-        --memori-surface-contrast: black;
-        --memori-surface-contrast-inverse: white;
+        /* Align with @memori.ai/ui: contrast = ink, inverse = surface */
+        --memori-surface-contrast: #fff;
+        --memori-surface-contrast-inverse: #000;
     }
 }
 
@@ -201,16 +196,41 @@
     );
 } */
 
-/* --- 10. Utility responsive --- */
+/* --- 10. HIDDEN_CHAT / WEBSITE_ASSISTANT tooltip labels ---
+ * Both layouts park their UI in position:fixed children, so .memori-widget
+ * (MemoriUIProvider portal root) often collapses to a near-zero in-flow box.
+ * Base UI tooltips position with position:absolute inside that root, so the
+ * popup shrink-to-fits to a tiny width and overflow-wrap:anywhere (from
+ * @memori.ai/ui) stacks each letter vertically. Force content-sized popups. */
+.memori-widget.memori-layout-hidden_chat .memori-tooltip__popup,
+.memori-widget.memori-layout-website_assistant .memori-tooltip__popup {
+    width: max-content;
+    max-width: min(20rem, calc(100vw - 2rem));
+    overflow-wrap: break-word;
+    text-orientation: mixed;
+    word-break: normal;
+    writing-mode: horizontal-tb;
+}
+
+.memori-widget.memori-layout-hidden_chat .memori-tooltip__surface,
+.memori-widget.memori-layout-website_assistant .memori-tooltip__surface {
+    max-width: none;
+}
+
+/* --- 11. Utility responsive --- */
 @media (max-width: 768px) {
     .mobile-hidden {
         display: none;
     }
 }
 
-/* Keep toast feedback below the header actions area. */
+/* Keep toast feedback below the header actions area.
+   Fixed width — do not set left+right together (that stretches full-bleed). */
 .memori-alert-viewport.memori-alert-viewport--top-end {
     top: 4.75rem !important;
+    left: auto !important;
+    width: 300px !important;
+    max-width: calc(100vw - 2 * var(--memori-spacing-sm));
 }
 
 @media (max-width: 768px) {
@@ -218,6 +238,7 @@
         top: auto !important;
         right: var(--memori-spacing-sm) !important;
         bottom: calc(5.5rem + env(safe-area-inset-bottom, 0px)) !important;
-        left: var(--memori-spacing-sm) !important;
+        left: auto !important;
+        width: min(300px, calc(100vw - 2 * var(--memori-spacing-sm))) !important;
     }
 }

package/src/version.ts

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