@memori.ai/memori-react 9.0.0-alpha.6 → 9.0.0-alpha.7

package/src/components/layouts/chat.css

@@ -8,7 +8,8 @@
     background: none;
 }
 
-.memori-widget > .memori-spin.memori-chat-layout {
+.memori-widget > .memori-spin.memori-chat-layout,
+.memori-widget > .memori-widget__surface > .memori-spin.memori-chat-layout {
     display: flex;
     overflow: hidden;
     height: 100%;

package/src/components/layouts/fullpage.css

@@ -9,11 +9,13 @@
     margin-left: auto;
 }
 
-.memori-widget.memori-layout-fullpage > .memori-spin {
+.memori-widget.memori-layout-fullpage > .memori-spin,
+.memori-widget.memori-layout-fullpage > .memori-widget__surface > .memori-spin {
     display: flex;
-    height: calc(100vh - 50px);
-    height: calc(100dvh - 50px);
+    overflow: hidden;
+    height: 100%;
     min-height: 0;
+    flex: 1 1 auto;
     flex-direction: column;
     gap: 0;
 }
@@ -156,7 +158,7 @@
     display: flex;
     overflow: hidden;
     min-height: 0;
-    flex: 1 1 auto;
+    flex: 1 1 0%;
     flex-direction: row;
     align-items: stretch;
 }
@@ -168,7 +170,7 @@
     max-width: var(--memori-layout-max-width);
     height: 100%;
     min-height: 0;
-    flex: 1 1 auto;
+    flex: 1 1 0%;
     align-items: stretch;
     justify-content: center;
     padding: 0 var(--memori-spacing-md) var(--memori-spacing-md);
@@ -179,10 +181,16 @@
 }
 
 .memori-widget.memori-layout-fullpage .memori--grid-column-left {
+    display: flex;
     overflow: hidden;
     width: 50%;
     max-width: 420px;
+    height: 100%;
+    min-height: 0;
+    flex-direction: column;
     flex-shrink: 0;
+    align-items: stretch;
+    align-self: stretch;
     border: 1px solid color-mix(in srgb, var(--memori-text-color, #111827) 10%, transparent);
     border-radius: 0.9rem;
     margin-right: 0;
@@ -191,23 +199,35 @@
 }
 
 .memori-widget.memori-layout-fullpage .memori--grid-column-left .memori--avatar-wrapper {
-    align-items: flex-start;
-    padding-top: clamp(1.25rem, 3vw, 2rem);
+    position: relative;
+    display: flex;
+    width: 100%;
+    height: 100%;
+    min-height: 0;
+    flex: 1 1 0%;
+    align-items: stretch;
+    justify-content: center;
+    padding-top: 0;
 }
 
 .memori-widget.memori-layout-fullpage .memori--grid-column-left .memori--avatar-wrapper model-viewer,
 .memori-widget.memori-layout-fullpage .memori--grid-column-left .memori--avatar-wrapper canvas,
 .memori-widget.memori-layout-fullpage .memori--grid-column-left .memori--avatar-wrapper > div {
+    width: 100% !important;
     max-width: 100%;
+    height: 100% !important;
+    max-height: 100%;
 }
 
 .memori-widget.memori-layout-fullpage .memori-chat-layout--main {
     display: flex;
     min-width: 0;
+    height: 100%;
     min-height: 0;
     flex: 1;
     flex-direction: column;
     align-items: stretch;
+    align-self: stretch;
     justify-content: stretch;
 }
 
@@ -247,7 +267,7 @@
     height: 100%;
     min-height: 0;
     max-height: 100%;
-    flex: 1 1 auto;
+    flex: 1 1 0%;
     flex-direction: column;
     align-items: stretch;
     padding: 0;
@@ -255,10 +275,13 @@
 
 .memori-widget.memori-layout-fullpage .memori-chat-layout--controls .memori--start-panel,
 .memori-widget.memori-layout-fullpage .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;

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

@@ -192,6 +192,7 @@
     right: 0;
 }
 
+/* Keep in sync with ArtifactDrawer split width (46% / --memori-modal-size-md override) */
 .memori-sidebar-toggle-artifact:checked ~ .memori-sidebar-container .memori-sidebar {
     right: 46%;
 }

package/src/components/layouts/totem.css

@@ -6,7 +6,8 @@
     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 {
     display: flex;
     height: 100%;
     flex-direction: column;

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

@@ -17,21 +17,30 @@
     margin-left: auto;
 }
 
-.memori-widget.memori-layout-zoomed_full_body > .memori-spin {
+.memori-widget.memori-layout-zoomed_full_body > .memori-spin,
+.memori-widget.memori-layout-zoomed_full_body > .memori-widget__surface > .memori-spin {
     display: flex;
-    height: calc(100vh - 50px);
-    height: calc(100dvh - 50px);
+    overflow: hidden;
+    height: 100%;
     min-height: 0;
+    flex: 1 1 auto;
     flex-direction: column;
     gap: 0;
 }
 
-/* 3D avatar: pin “Powered by” to the corner so it clears the figure */
+/* 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--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;
 }
@@ -158,10 +167,16 @@
 }
 
 .memori-widget.memori-layout-zoomed_full_body .memori--grid-column-left {
+    display: flex;
     overflow: hidden;
     width: 50%;
     max-width: 420px;
+    height: 100%;
+    min-height: 0;
+    flex-direction: column;
     flex-shrink: 0;
+    align-items: stretch;
+    align-self: stretch;
     border: 1px solid color-mix(in srgb, var(--memori-text-color, #111827) 10%, transparent);
     border-radius: 0.9rem;
     margin-right: 0;
@@ -170,14 +185,24 @@
 }
 
 .memori-widget.memori-layout-zoomed_full_body .memori--grid-column-left .memori--avatar-wrapper {
-    align-items: flex-start;
-    padding-top: clamp(1.25rem, 3vw, 2rem);
+    position: relative;
+    display: flex;
+    width: 100%;
+    height: 100%;
+    min-height: 0;
+    flex: 1 1 0%;
+    align-items: stretch;
+    justify-content: center;
+    padding-top: 0;
 }
 
 .memori-widget.memori-layout-zoomed_full_body .memori--grid-column-left .memori--avatar-wrapper model-viewer,
 .memori-widget.memori-layout-zoomed_full_body .memori--grid-column-left .memori--avatar-wrapper canvas,
 .memori-widget.memori-layout-zoomed_full_body .memori--grid-column-left .memori--avatar-wrapper > div {
+    width: 100% !important;
     max-width: 100%;
+    height: 100% !important;
+    max-height: 100%;
 }
 
 .memori-widget.memori-layout-zoomed_full_body .memori-chat-layout--main {

package/src/context/widgetSurfaceContext.tsx

@@ -0,0 +1,14 @@
+import React, { createContext, useContext } from 'react';
+
+/**
+ * Portal target for fixed overlays (Drawer/Modal) that must stay clipped to the
+ * chat widget. Kept separate from MemoriUIProvider's container so Floating UI
+ * menus (Select/Popover) can portal to the widget root *outside* `contain: layout`.
+ */
+const WidgetSurfaceContext = createContext<HTMLElement | null>(null);
+
+export const WidgetSurfaceProvider = WidgetSurfaceContext.Provider;
+
+export function useWidgetSurfaceEl(): HTMLElement | null {
+  return useContext(WidgetSurfaceContext);
+}

package/src/styles.css

@@ -83,10 +83,70 @@
 }
 .memori.memori-widget.memori-layout-chat,
 .memori.memori-widget.memori-layout-fullpage,
-.memori.memori-widget.memori-layout-zoomed-full-body {
+.memori.memori-widget.memori-layout-zoomed_full_body {
+    /* Portal root for Floating UI menus — do NOT set contain here.
+       Use 100dvh (not height:100% alone): Storybook’s root often has no
+       definite height, and % / flex children do not resolve against min-height. */
+    position: relative;
+    display: flex;
+    overflow: hidden;
+    height: 100vh;
+    height: 100dvh;
+    max-height: 100vh;
+    max-height: 100dvh;
+    flex-direction: column;
+}
+
+/*
+ * Layout containment lives on the inner surface so fixed Drawers/Modals stay
+ * clipped to the chat widget, while Select/Popover menus can portal to the
+ * outer .memori-widget (MemoriUIProvider container) without the left-offset bug.
+ */
+.memori-widget__surface {
+    position: relative;
+    display: flex;
+    width: 100%;
+    height: 100%;
+    min-height: 0;
+    flex: 1 1 0%;
+    flex-direction: column;
+}
+
+.memori.memori-widget.memori-layout-chat > .memori-widget__surface,
+.memori.memori-widget.memori-layout-fullpage > .memori-widget__surface,
+.memori.memori-widget.memori-layout-zoomed_full_body > .memori-widget__surface {
     contain: layout;
 }
 
+/* After inserting .memori-widget__surface, Spin is no longer a direct child of
+   .memori-widget — keep it a stretching flex column so fullpage/chat fill the viewport. */
+.memori-widget > .memori-widget__surface > .memori-spin {
+    display: flex !important;
+    overflow: hidden;
+    width: 100%;
+    height: 100% !important;
+    min-height: 0;
+    flex: 1 1 0% !important;
+    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 {
+    height: 100% !important;
+    min-height: 0;
+    flex: 1 1 0% !important;
+}
+
+.memori-widget > .memori-widget__surface > .memori-spin > .memori-fullpage-top-header {
+    flex-shrink: 0;
+}
+
 /* --- 6. Base: brand e tema di default (in layer così integration può sovrascrivere --memori-primary) --- */
 @layer theme {
     :root,

package/src/version.ts

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