@memori.ai/memori-react 8.45.2 → 8.45.5

package/{src/components/layouts → dist/components/layouts/WebsiteAssistant}/website-assistant.css

@@ -9,7 +9,7 @@
 
 .memori-website_assistant--trigger {
     position: fixed;
-    z-index: 2147483647;
+    z-index: calc(var(--memori-z-index-base, 0) + 1800);
     right: 0px;
     bottom: 0px;
     display: flex;
@@ -97,13 +97,10 @@
 /* Desktop */
 @media (min-width: 1024px) {
     .memori-website_assistant--trigger-button {
-        width: 96px;
-        height: 96px;
+        width: 96px !important;
+        height: 96px !important;
     }
 
-
-
-
     .memori-website_assistant--trigger-button .memori-blob .mainDiv {
         width: 96px !important;
         height: 96px !important;
@@ -112,34 +109,37 @@
 
 /* ============================================
    CLOSE BUTTON
+   Matches HiddenChat header close (bordered icon control)
    ============================================ */
 
-.memori-website_assistant--close-button-wrapper {
-    position: absolute;
-    z-index: 1001;
-    top: 0.75rem;
-    left: 0.75rem;
-    flex-shrink: 0;
-    transition: transform 0.2s ease;
+.memori-website_assistant--close-button {
+    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-control);
+    margin: 0;
+    background: transparent;
+    color: var(--memori-text-color, #111827);
+    cursor: pointer;
+    line-height: 1;
+    transition: background-color 0.15s ease, border-color 0.15s ease;
 }
 
-.memori-website_assistant--close-button-wrapper:hover {
-    transform: scale(1.1);
+.memori-website_assistant--close-button:hover {
+    background: color-mix(in srgb, var(--memori-text-color, #111827) 6%, transparent);
 }
 
-.memori-website_assistant--close-button-wrapper button.memori-website_assistant--close-button {
-    width: 44px !important;
-    min-width: 44px !important;
-    height: 44px !important;
-    min-height: 44px !important;
-    padding: 0.75rem;
-    border: 2px solid rgba(130, 70, 175, 0.1);
-    border-radius: 50%;
-    -webkit-backdrop-filter: blur(10px);
-    backdrop-filter: blur(10px);
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15), 0 2px 4px rgba(0, 0, 0, 0.1);
-    font-size: 18px;
-    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+.memori-website_assistant--close-button .memori-icon-close {
+    width: 1.125rem;
+    height: 1.125rem;
+    fill: none;
+    stroke: currentColor;
 }
 
 /* ============================================
@@ -148,33 +148,63 @@
 
 .memori-widget.memori-layout-website_assistant {
     position: relative;
-    z-index: 2147483647;
-    font-size: 14px;
+    font-size: var(--memori-text-size-sm);
 }
 
 /*
- * Login and Position drawers are portaled to body by Headless UI.
- * When layout is WEBSITE_ASSISTANT we pass drawerClassName so they sit above the fixed panel.
+ * Drawers portal into the widget surface (containment). UI 2.0 Drawer uses
+ * memori-drawer__backdrop on the panel root classes from @memori.ai/ui.
  */
 .memori-drawer.memori-drawer--above-website-assistant,
-.memori-drawer.memori-drawer--above-website-assistant .memori-drawer--backdrop,
-.memori-drawer.memori-drawer--above-website-assistant .memori-drawer--container {
-    z-index: 2147483648;
+.memori-drawer.memori-drawer--above-website-assistant.memori-drawer,
+.memori-drawer.memori-drawer--above-website-assistant .memori-drawer__backdrop {
+    z-index: calc(var(--memori-z-index-base, 0) + 1400);
+}
+
+/*
+ * Split-panel width for side drawers (history / known facts / experts)
+ * — keep in sync with ArtifactDrawer and panel shift (`right: 55%`).
+ * Login is a centered modal gate (not a drawer), so it is excluded.
+ */
+.memori-widget.memori-layout-website_assistant .memori-drawer--right.memori-chat-history-drawer,
+.memori-widget.memori-layout-website_assistant .memori-drawer--right.memori-known-facts-drawer,
+.memori-widget.memori-layout-website_assistant .memori-drawer--right.memori--experts-drawer,
+.memori-widget.memori-layout-website_assistant .memori-drawer--right.memori-side-drawer {
+    --memori-modal-size-sm: 55%;
+    --memori-modal-size-md: 55%;
+    --memori-modal-size-lg: 55%;
+    width: 55%;
+    max-width: 100vw;
+}
+
+.memori-widget.memori-layout-website_assistant .memori-modal.memori-modal--above-website-assistant {
+    z-index: calc(var(--memori-z-index-base, 0) + 1600);
+}
+
+@media (max-width: 1260px) {
+    .memori-widget.memori-layout-website_assistant .memori-drawer--right.memori-chat-history-drawer,
+    .memori-widget.memori-layout-website_assistant .memori-drawer--right.memori-known-facts-drawer,
+    .memori-widget.memori-layout-website_assistant .memori-drawer--right.memori--experts-drawer,
+    .memori-widget.memori-layout-website_assistant .memori-drawer--right.memori-side-drawer {
+        --memori-modal-size-sm: 100%;
+        --memori-modal-size-md: 100%;
+        --memori-modal-size-lg: 100%;
+        width: 100% !important;
+        max-width: 100% !important;
+    }
 }
 
 .memori-widget.memori-layout-website_assistant .memori-website_assistant--collapsed,
 .memori-widget.memori-layout-website_assistant .memori-website_assistant--expanded {
     position: fixed;
-    z-index: 2147483647;
     right: 0;
     bottom: 0;
     overflow: hidden;
     width: 100vw;
     max-width: 100vw;
-    border-radius: 24px 24px 0 0;
+    border-radius: var(--memori-radius-overlay) var(--memori-radius-overlay) 0 0;
     -webkit-backdrop-filter: blur(20px);
     backdrop-filter: blur(20px);
-    background: rgba(255, 255, 255, 0.98);
     box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.12), 0 -2px 8px rgba(0, 0, 0, 0.08);
     transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
 }
@@ -194,14 +224,64 @@
 }
 
 .memori-widget.memori-layout-website_assistant .memori-website_assistant--expanded {
-    overflow: visible;
-    height: min(85vh, calc(100vh - 80px));
+    height: min(85vh, calc(100vh - var(--memori-spacing-5xl)));
+    height: min(85dvh, calc(100dvh - var(--memori-spacing-5xl)));
+    max-height: 100dvh;
     padding: 0.5rem 0rem;
     margin-bottom: 0;
+    background: var(--memori-secondary-background);
     opacity: 1;
     pointer-events: all;
 }
 
+/*
+ * Fullscreen: same approach as HiddenChat — class + inline styles expand the
+ * docked panel to the full window; browser Fullscreen API is requested on the panel.
+ */
+.memori-widget.memori-layout-website_assistant .memori-website_assistant--expanded.memori-website_assistant--fullscreen,
+.memori-widget.memori-layout-website_assistant .memori-website_assistant--expanded:fullscreen,
+.memori-widget.memori-layout-website_assistant .memori-website_assistant--expanded:-webkit-full-screen {
+    top: 0 !important;
+    right: 0 !important;
+    bottom: 0 !important;
+    left: 0 !important;
+    width: 100% !important;
+    max-width: none !important;
+    height: 100% !important;
+    padding: 0.5rem 0;
+    border-radius: 0 !important;
+    margin-bottom: 0;
+    box-shadow: none;
+}
+
+/*
+ * Keep in sync with ArtifactDrawer / side-drawer split width (55%).
+ * `--drawer-open` covers login/history/known-facts/experts; `--artifact-open`
+ * kept for backward compatibility (both applied together from the layout).
+ */
+.memori-widget.memori-layout-website_assistant
+    .memori-website_assistant--expanded.memori-website_assistant--drawer-open,
+.memori-widget.memori-layout-website_assistant
+    .memori-website_assistant--expanded.memori-website_assistant--artifact-open {
+    right: 55%;
+}
+
+/* Fullscreen must win over the drawer/artifact split offset */
+.memori-widget.memori-layout-website_assistant
+    .memori-website_assistant--expanded.memori-website_assistant--fullscreen.memori-website_assistant--drawer-open,
+.memori-widget.memori-layout-website_assistant
+    .memori-website_assistant--expanded:fullscreen.memori-website_assistant--drawer-open,
+.memori-widget.memori-layout-website_assistant
+    .memori-website_assistant--expanded:-webkit-full-screen.memori-website_assistant--drawer-open,
+.memori-widget.memori-layout-website_assistant
+    .memori-website_assistant--expanded.memori-website_assistant--fullscreen.memori-website_assistant--artifact-open,
+.memori-widget.memori-layout-website_assistant
+    .memori-website_assistant--expanded:fullscreen.memori-website_assistant--artifact-open,
+.memori-widget.memori-layout-website_assistant
+    .memori-website_assistant--expanded:-webkit-full-screen.memori-website_assistant--artifact-open {
+    right: 0 !important;
+}
+
 /* Tablet */
 @media (min-width: 601px) {
     .memori-widget.memori-layout-website_assistant .memori-website_assistant--collapsed,
@@ -209,11 +289,20 @@
         right: 0;
         width: 90vw;
         max-width: 480px;
-        border-radius: 24px 0 0 0;
+        border-radius: var(--memori-radius-overlay) 0 0 0;
+    }
+
+    .memori-widget.memori-layout-website_assistant
+        .memori-website_assistant--expanded.memori-website_assistant--drawer-open,
+    .memori-widget.memori-layout-website_assistant
+        .memori-website_assistant--expanded.memori-website_assistant--artifact-open {
+        right: 55%;
     }
 
     .memori-widget.memori-layout-website_assistant .memori-website_assistant--expanded {
-        height: min(75vh, calc(100vh - 80px));
+        height: min(75vh, calc(100vh - var(--memori-spacing-5xl)));
+        height: min(75dvh, calc(100dvh - var(--memori-spacing-5xl)));
+        max-height: 100dvh;
     }
 }
 
@@ -221,14 +310,21 @@
 @media (min-width: 1024px) {
     .memori-widget.memori-layout-website_assistant .memori-website_assistant--collapsed,
     .memori-widget.memori-layout-website_assistant .memori-website_assistant--expanded {
-        width: 30vw;
-        min-width: 400px;
-        max-width: 480px;
-        border-radius: 24px 0 0 0;
+        width: 480px;
+        border-radius: var(--memori-radius-overlay) 0 0 0;
+    }
+
+    .memori-widget.memori-layout-website_assistant
+        .memori-website_assistant--expanded.memori-website_assistant--drawer-open,
+    .memori-widget.memori-layout-website_assistant
+        .memori-website_assistant--expanded.memori-website_assistant--artifact-open {
+        right: 55%;
     }
 
     .memori-widget.memori-layout-website_assistant .memori-website_assistant--expanded {
         height: 100vh;
+        height: 100dvh;
+        max-height: 100dvh;
         border-radius: 0;
         margin-bottom: 0;
     }
@@ -279,12 +375,32 @@
     background: none;
 }
 
-.memori-website_assistant-layout .memori--powered-by {
-    right: auto;
-    left: 0.75rem;
-    background-color: transparent !important;
-    font-size: 0.75rem;
-    opacity: 0.7;
+/* Powered-by is not shown in WEBSITE_ASSISTANT; AI disclaimer wraps under the input. */
+.memori-website_assistant-layout .memori--powered-by,
+.memori-widget.memori-layout-website_assistant .memori--powered-by {
+    display: none !important;
+}
+
+/* Never show chat history control in this layout */
+.memori-widget.memori-layout-website_assistant .memori-header--chat-history-button {
+    display: none !important;
+}
+
+.memori-widget.memori-layout-website_assistant .memori-conversation-footer {
+    flex-wrap: wrap;
+    justify-content: center;
+}
+
+.memori-widget.memori-layout-website_assistant .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-website_assistant .memori-conversation-footer .memori-chat-inputs--ai-note {
+    text-align: left;
 }
 
 /* ============================================
@@ -297,7 +413,8 @@
     top: 0.75rem;
     right: 0.75rem;
     padding: 0.5rem;
-    border-radius: 12px;
+    border-radius: var(--memori-radius-surface);
+    background: var(--memori-secondary-background);
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
     text-align: right;
 }
@@ -307,14 +424,16 @@
 }
 
 .memori-website_assistant-layout .memori-header {
-    position: relative;
     z-index: 1000;
     display: inline-flex;
+    overflow: visible;
     width: auto;
     height: auto;
-    flex-direction: column;
-    padding: 0.5rem;
-    gap: 0.5rem;
+    flex-direction: row;
+    flex-shrink: 0;
+    flex-wrap: nowrap;
+    padding: 0;
+    gap: 0.35rem;
 }
 
 /* Less specific first (no-descending-specificity): single .memori-header--button */
@@ -322,14 +441,89 @@
 .memori-website_assistant-layout .memori-header .memori-share-button {
     margin-top: 0;
     margin-right: 0;
-    margin-left: auto;
+    margin-left: 0;
 }
 
 /* More specific: adjacent sibling (must come after general .memori-header--button rules) */
 .memori-website_assistant-layout .memori-header .memori-header--button + .memori-header--button {
     margin-top: 0;
     margin-right: 0;
+    margin-left: 0;
+}
+
+.memori-website_assistant-layout--header-row {
+    position: relative;
+    z-index: 1001;
+    display: flex;
+    overflow: visible;
+    width: 100%;
+    min-width: 0;
+    flex-shrink: 0;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0.75rem 1rem;
+    border-bottom: 1px solid var(--memori-border-color);
+    background: var(--memori-secondary-background);
+    gap: 0.75rem;
+}
+
+.memori-website_assistant-layout--header-actions {
+    display: inline-flex;
+    overflow: visible;
+    flex: 0 0 auto;
+    flex-shrink: 0;
+    align-items: center;
     margin-left: auto;
+    gap: 0.35rem;
+}
+
+.memori-website_assistant-layout .memori-chat-layout--brand {
+    display: flex;
+    overflow: hidden;
+    min-width: 0;
+    flex: 1 1 auto;
+    align-items: center;
+    gap: 0.75rem;
+}
+
+.memori-website_assistant-layout .memori-chat-layout--brand-avatar {
+    width: 40px;
+    height: 40px;
+    flex-shrink: 0;
+    border: 1px solid rgba(0, 0, 0, 0.06);
+    border-radius: 50%;
+    object-fit: cover;
+}
+
+.memori-website_assistant-layout .memori-chat-layout--brand-text {
+    display: flex;
+    min-width: 0;
+    flex: 1 1 auto;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 0.125rem;
+}
+
+.memori-website_assistant-layout .memori-chat-layout--brand-name {
+    display: block;
+    overflow: hidden;
+    width: 100%;
+    min-width: 0;
+    max-width: 100%;
+    color: var(--memori-text-color, #111);
+    font-size: 1rem;
+    font-weight: 600;
+    line-height: 1.2;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+@media (max-width: 480px) {
+    .memori-website_assistant-layout .memori-chat-layout--brand {
+        min-width: 0;
+        max-width: none;
+        flex: 1 1 auto;
+    }
 }
 
 /* Position dropdown below the trigger so it does not cover the share button */
@@ -351,6 +545,7 @@
     position: relative;
     overflow: hidden;
     min-height: 0;
+    max-height: 35vh;
     flex: 1;
     /* Prevent avatar/blob from growing unbounded and overlapping header/controls */
     contain: layout style;
@@ -436,19 +631,18 @@
     flex: 1;
     flex-direction: column;
     padding: 1rem;
-    -webkit-backdrop-filter: blur(10px);
-    backdrop-filter: blur(10px);
-    background: linear-gradient(to top, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.85) 50%, transparent 100%);
+    padding-bottom: 0;
+    background-color: var(--memori-secondary-background);
 }
 
 .memori-website_assistant-layout--controls .memori-chat--history,
 .memori-website_assistant-layout--controls .memori-chat--content {
-    background: transparent;
+    background: var(--memori-secondary-background);
 }
 
 .memori-website_assistant-layout--controls .memori-chat--history {
     padding: 0;
-    margin-top: 0;
+    /* margin-top: var(--memori-spacing-3xl); */
     -webkit-backdrop-filter: none;
     backdrop-filter: none;
 }
@@ -470,14 +664,18 @@
     width: 100%;
     max-width: 100%;
     padding: 0;
-    margin: 0 auto;
+    margin: auto;
 }
 
-.memori-wesite_assistant-layout--controls .memori--start-panel {
+.memori-website_assistant-layout--controls .memori--start-panel {
     flex: 1;
     align-content: center;
     align-self: center;
+    padding: 1rem;
     border: 0px;
+    border-radius: var(--memori-radius-surface);
+    margin: 0.75rem;
+    margin-bottom: var(--memori-spacing-2xl) !important;
     box-shadow: none !important;
 }
 
@@ -487,14 +685,37 @@
     flex: 1;
     flex-direction: column;
     padding: 0.75rem;
+    padding-bottom: 0;
     border: 0px !important;
+    background: var(--memori-secondary-background);
     box-shadow: none !important;
 }
 
-.memori-website_assistant-layout--controls .memori--start-panel {
-    padding: 1rem;
-    border-radius: 16px;
-    margin: 0.75rem;
+.memori-website_assistant-layout--controls .memori-chat--content--has-global-background,
+.memori-website_assistant-layout--controls .memori-chat--history:has(.memori-chat--content--has-global-background),
+.memori-website_assistant-layout--controls .memori-chat--wrapper:has(.memori-chat--content--has-global-background) {
+    background: transparent;
+}
+
+/* Input bar styles (dark compact pill) live in ChatInputs.css.
+   Anchor the bar at the bottom of the assistant panel. */
+.memori-widget.memori-layout-website_assistant .memori-website_assistant-layout--controls .memori-chat--wrapper {
+    display: flex;
+    min-height: 0;
+    flex: 1;
+    flex-direction: column;
+}
+
+.memori-widget.memori-layout-website_assistant .memori-website_assistant-layout--controls .memori-chat--history {
+    min-height: 0;
+    flex: 1 1 auto;
+    margin-bottom: 0;
+}
+
+.memori-widget.memori-layout-website_assistant .memori-website_assistant-layout--controls .memori-chat-inputs-wrapper {
+    width: 100%;
+    flex-shrink: 0;
+    margin-bottom: 0;
 }
 
 /* Tablet and up */
@@ -505,12 +726,12 @@
     }
 
     .memori-website_assistant-layout--controls .memori-chat--wrapper {
-        padding: 1rem;
+        padding: 0;
     }
 
     .memori-website_assistant-layout--controls .memori--start-panel {
         padding: 1.5rem;
-        margin: 1rem;
+        margin: 0 auto;
     }
 }
 
@@ -605,6 +826,11 @@
     }
 }
 
+/* After controls .memori--start-panel rules (no-descending-specificity: 3-class selector wins over 2-class) */
+.memori-widget.memori-layout-website_assistant .memori--start-panel {
+    border: none;
+}
+
 @media (max-width: 768px) {
     .memori-website_assistant--trigger-button {
         width: 80px !important;
@@ -632,14 +858,6 @@
     }
 }
 
-@media (max-width: 870px) {
-    .memori-website_assistant-layout .memori-header {
-        max-width: 64px;
-        margin-right: 1rem;
-        margin-left: auto;
-    }
-}
-
 /* ============================================
    ACCESSIBILITY & PERFORMANCE
    ============================================ */
@@ -647,7 +865,7 @@
 @media (prefers-reduced-motion: reduce) {
     .memori-website_assistant--trigger,
     .memori-website_assistant--trigger-button,
-    .memori-website_assistant--close-button-wrapper,
+    .memori-website_assistant--close-button,
     .memori-widget.memori-layout-website_assistant .memori-website_assistant--collapsed,
     .memori-widget.memori-layout-website_assistant .memori-website_assistant--expanded,
     .memori-widget.memori-layout-website_assistant .memori-website_assistant--expanded .memori-website_assistant-layout,
@@ -668,10 +886,4 @@
         width: 72px !important;
         height: 72px !important;
     }
-
-    .memori-website_assistant--close-button-wrapper button.memori-website_assistant--close-button {
-        width: 48px;
-        height: 48px;
-        padding: 0.875rem;
-    }
 }

package/dist/components/layouts/chat.css

@@ -1,5 +1,25 @@
 .memori-widget.memori-layout-chat {
-    height: 100vh !important;
+    display: flex;
+    height: 100%;
+    min-height: 0;
+    max-height: 100%;
+    flex-direction: column;
+}
+
+/* Fill the known mount nodes. Do not size memori-client / :host: the page owns those. */
+#memori-root:has(.memori-layout-chat),
+.memori-root:has(.memori-layout-chat) {
+    width: 100%;
+    height: 100%;
+    min-height: 0;
+}
+
+/* Same mount nodes when this stylesheet is injected into the web component shadow root. */
+:host:has(.memori-layout-chat) #memori-root,
+:host:has(.memori-layout-chat) .memori-root {
+    width: 100%;
+    height: 100%;
+    min-height: 0;
 }
 
 .memori-widget.memori-layout-chat .memori--global-background.no-background-image {
@@ -9,10 +29,13 @@
 .memori-widget > .memori-spin.memori-chat-layout {
     display: flex;
     height: 100%;
+    min-height: 0;
+    flex: 1 1 auto;
     flex-direction: column;
 }
 
 .memori-chat-layout--header {
+    flex: 0 0 auto;
     margin-bottom: 12px;
     text-align: right;
     transition: all 0.05s ease-in-out;
@@ -53,9 +76,10 @@
     overflow: hidden;
     width: 100%;
     height: 100%;
+    min-height: 0;
     flex: 1;
     flex-direction: row;
-    align-items: center;
+    /* align-items: center; */
     justify-content: center;
     /* max-width: 1200px; */
     transition: all 0.05s ease-in-out;
@@ -75,8 +99,7 @@
     z-index: 5;
     overflow: hidden;
     min-width: 0;
-    height: 100%;
-    max-height: 100%;
+    min-height: 0;
     flex: 1;
     /* padding-bottom: 1.5rem; */
     transition: all 0.05s ease-in-out;