@memori.ai/memori-react 9.0.0-alpha.16 → 9.0.0-alpha.18

package/esm/components/layouts/chat.css

@@ -1,6 +1,9 @@
 .memori-widget.memori-layout-chat {
     overflow: hidden;
     height: 100vh !important;
+    height: 100dvh !important;
+    max-height: 100vh;
+    max-height: 100dvh;
     padding: 0;
 }
 
@@ -26,9 +29,6 @@
 }
 
 @media (max-width: 600px) {
-    .memori-widget.memori-layout-chat .memori-chat-inputs-wrapper {
-        margin-bottom: var(--memori-spacing-md);
-    }
     .memori-widget.memori-layout-chat .memori--start-description {
         display: none;
     }
@@ -43,6 +43,7 @@
 
     .memori-widget.memori-layout-chat .memori-fullpage-header-actions {
         min-width: 0;
+        flex: 1 1 auto;
         flex-wrap: nowrap;
         -webkit-overflow-scrolling: touch;
         overflow-x: auto;
@@ -50,29 +51,43 @@
     }
 
     .memori-widget.memori-layout-chat .memori-fullpage-header-actions .memori-header.memori-header--fullpage {
-        min-width: 0;
+        min-width: max-content;
+        flex-shrink: 0;
         flex-wrap: nowrap;
     }
+
+    .memori-widget.memori-layout-chat .memori-fullpage-header-actions .memori-icon-button,
+    .memori-widget.memori-layout-chat .memori-fullpage-header-actions .memori-button {
+        flex-shrink: 0;
+    }
 }
 
+/* Column fills the chat pane so the input strip can go edge-to-edge;
+   message reading width is applied on --body / the input field itself. */
 .memori-widget.memori-layout-chat .memori-chat-layout--controls > .memori-conversation-column {
     display: flex;
     width: 100%;
+    max-width: none;
     min-height: 0;
     flex: 1 1 auto;
     flex-direction: column;
+    margin-inline: 0;
+    padding-inline: 0;
 }
 
 .memori-widget.memori-layout-chat .memori-chat-layout--body {
     display: flex;
     overflow: hidden;
     width: 100%;
+    max-width: var(--memori-conversation-max-width, 48rem);
     min-height: 0;
+    box-sizing: border-box;
     flex: 1;
     flex-direction: column;
     align-items: stretch;
-    margin: 0 auto;
     background: var(--memori-secondary-background);
+    margin-inline: auto;
+    padding-inline: var(--memori-conversation-inline-padding, var(--memori-spacing-md));
 }
 
 /* When a global background is on chat content, keep the body strip neutral. */
@@ -98,21 +113,32 @@
     justify-content: center;
 }
 
-/* Input bar is a flex sibling of body inside the shared conversation column */
+/* Full-bleed input strip across the chat column; field stays on the conversation axis */
 .memori-widget.memori-layout-chat .memori-conversation-column > .memori-chat-inputs-wrapper {
     overflow: hidden;
     width: 100%;
+    max-width: none;
+    box-sizing: border-box;
     flex-shrink: 0;
     border-top: none;
     background: var(--memori-secondary-background);
     border-bottom-left-radius: 0;
     border-bottom-right-radius: 0;
+    margin-inline: 0;
+    padding-inline: var(--memori-conversation-inline-padding, var(--memori-spacing-md));
 }
 
 .memori-widget.memori-layout-chat .memori-chat-inputs {
     background: transparent;
 }
 
+.memori-widget.memori-layout-chat .memori-conversation-column > .memori-chat-inputs-wrapper .memori-chat-inputs,
+.memori-widget.memori-layout-chat .memori-conversation-column > .memori-chat-inputs-wrapper .memori-conversation-footer {
+    width: 100%;
+    max-width: var(--memori-conversation-max-width, 48rem);
+    margin-inline: auto;
+}
+
 .memori-chat-layout--header-with-artifact {
     display: none;
 }
@@ -204,6 +230,15 @@
         text-overflow: unset;
         white-space: normal;
     }
+
+    .memori-widget.memori--active.memori-layout-chat .memori-conversation-footer {
+        justify-content: flex-start;
+    }
+
+    .memori-widget.memori--active.memori-layout-chat .memori-conversation-footer .memori-chat-inputs--ai-note {
+        flex: 1 1 auto;
+        text-align: left;
+    }
 }
 
 .memori-chat-layout--controls .memori-chat--wrapper {
@@ -300,14 +335,20 @@
 .memori-chat-layout--main {
     position: relative;
     display: flex;
-    overflow: hidden;
+    /* clip (not hidden): the blurred/scaled global-background ::before expands
+       scrollable overflow; overflow:hidden still creates a scrollport, so
+       Chat's scrollIntoView can shift the whole chrome upward and clip the header. */
+    overflow: clip;
     width: 100%;
+    min-width: 0;
     height: 100%;
-    flex: 1;
+    min-height: 0;
+    flex: 1 1 0%;
     flex-direction: row;
-    align-items: center;
-    justify-content: center;
-    /* max-width: 1200px; */
+    /* Stretch — never center the column vertically or an overflowing
+       controls pane gets clipped at the top (header) and leaves a gap below. */
+    align-items: stretch;
+    justify-content: flex-start;
     transition: all 0.05s ease-in-out;
 }
 
@@ -318,6 +359,7 @@
     overflow: hidden;
     min-width: 0;
     height: 100%;
+    min-height: 0;
     max-height: 100%;
     flex: 1;
     flex-direction: column;
@@ -335,23 +377,34 @@
     background: var(--memori-secondary-background);
 }
 
-/* Artifact drawer column inside the Chat layout's flex row */
-.memori-chat-layout .memori--grid-column-artifact {
+/* Header sits above the content row (FULLPAGE pattern) so opening the
+   artifact only redistributes the chat/artifact columns. */
+.memori-widget.memori-layout-chat .memori-chat-layout--header {
+    position: relative;
+    z-index: 6;
+    width: 100%;
+    flex-shrink: 0;
+}
+
+/* Artifact drawer column — flex sibling of chat controls inside --main */
+.memori-widget.memori-layout-chat .memori--grid-column-artifact {
     overflow: hidden;
     width: 0;
     min-width: 0;
+    height: 100%;
+    min-height: 0;
     flex-shrink: 0;
     transition: width 0.25s ease;
 }
 
-.memori-chat-layout .memori--grid-column-artifact--open {
-    width: 620px;
+.memori-widget.memori-layout-chat .memori--grid-column-artifact--open {
+    width: min(620px, 55%);
     border-left: 1px solid var(--memori-border-color);
     background: var(--memori-secondary-background);
 }
 
 @media (max-width: 1260px) {
-    .memori-chat-layout .memori--grid-column-artifact {
+    .memori-widget.memori-layout-chat .memori--grid-column-artifact {
         display: none;
     }
 }
@@ -377,10 +430,12 @@
     background-repeat: no-repeat;
     background-size: cover;
     content: '';
+    filter: blur(5px);
     pointer-events: none;
+    transform: scale(1.06);
 }
 
-.memori-chat-layout--main--has-background .memori--grid-column-artifact {
+.memori-widget.memori-layout-chat .memori-chat-layout--main--has-background .memori--grid-column-artifact {
     position: relative;
     z-index: 5;
 }
@@ -390,38 +445,18 @@
     background: transparent;
 }
 
-/* The header is a solid strip, so the image starts below it. */
-.memori-widget.memori-layout-chat .memori-chat-layout--main--has-background .memori-chat-layout--header {
+/* Header is outside --main; keep it a solid strip above the backgrounded content. */
+.memori-widget.memori-layout-chat:has(.memori-chat-layout--main--has-background) .memori-chat-layout--header {
     background: var(--memori-secondary-background);
 }
 
-/* The input bar stays a solid strip, so the image ends where the messages end.
-   It breaks out of the conversation column to span the whole width; the
-   surrounding `overflow: hidden` on the controls clips it to the chat column. */
+/* Input strip is already full-bleed (see rules above); keep its solid surface over the image. */
 .memori-widget.memori-layout-chat
     .memori-chat-layout--main--has-background
     .memori-conversation-column
     > .memori-chat-inputs-wrapper {
-    width: 100vw;
-    max-width: 100vw;
     margin-bottom: 0;
     background: var(--memori-secondary-background);
-    margin-inline: calc(50% - 50vw);
-    padding-inline: var(--memori-conversation-inline-padding, var(--memori-spacing-md));
-}
-
-.memori-widget.memori-layout-chat
-    .memori-chat-layout--main--has-background
-    .memori-conversation-column
-    > .memori-chat-inputs-wrapper
-    .memori-chat-inputs,
-.memori-widget.memori-layout-chat
-    .memori-chat-layout--main--has-background
-    .memori-conversation-column
-    > .memori-chat-inputs-wrapper
-    .memori-conversation-footer {
-    max-width: var(--memori-conversation-max-width, 48rem);
-    margin-inline: auto;
 }
 
 /* The column-scoped image would otherwise paint a second, narrower copy. */
@@ -504,7 +539,7 @@
 .memori-widget.memori-layout-chat .memori-chat-layout--controls .memori--start-panel,
 .memori-widget.memori-layout-chat .memori-chat-layout--controls .memori-chat--wrapper {
     min-width: 0;
-    margin-top: var(--memori-spacing-lg);
+    min-height: 0;
 }
 
 .memori-widget.memori-layout-chat .memori-chat-layout--controls .memori-chat--wrapper {

package/esm/components/layouts/fullpage.css

@@ -162,21 +162,25 @@
     justify-content: flex-end;
 }
 
-/* FullPage header controls: compact square actions + rounded login CTA */
-.memori-widget.memori-layout-fullpage .memori-header.memori-header--fullpage {
+/* FullPage / Chat / Zoomed header controls: compact square actions + rounded login CTA */
+.memori-widget.memori-layout-fullpage .memori-header.memori-header--fullpage,
+.memori-widget.memori-layout-chat .memori-header.memori-header--fullpage {
     min-width: 0;
     flex-wrap: nowrap;
     justify-content: flex-end;
-    gap: 0.5rem;
+    gap: 0.75rem;
 }
 
 .memori-widget.memori-layout-fullpage .memori-header--fullpage-primary,
-.memori-widget.memori-layout-fullpage .memori-header--fullpage-secondary {
+.memori-widget.memori-layout-fullpage .memori-header--fullpage-secondary,
+.memori-widget.memori-layout-chat .memori-header--fullpage-primary,
+.memori-widget.memori-layout-chat .memori-header--fullpage-secondary {
     flex-wrap: nowrap;
     gap: 0.5rem;
 }
 
-.memori-widget.memori-layout-fullpage .memori-header--fullpage-divider {
+.memori-widget.memori-layout-fullpage .memori-header--fullpage-divider,
+.memori-widget.memori-layout-chat .memori-header--fullpage-divider {
     min-height: 26px;
     margin: 0;
 }
@@ -478,8 +482,7 @@
         flex: 1 1 auto;
     }
 
-    .memori-widget.memori-layout-fullpage .memori-fullpage-header-actions,
-    .memori-widget.memori-layout-chat .memori-fullpage-header-actions {
+    .memori-widget.memori-layout-fullpage .memori-fullpage-header-actions {
         flex: 0 0 auto;
         justify-content: flex-end;
     }
@@ -492,7 +495,7 @@
 
     .memori-widget.memori-layout-chat .memori-fullpage-header-actions {
         min-width: 0;
-        flex: 0 0 auto;
+        flex: 1 1 auto;
         flex-wrap: nowrap;
         justify-content: flex-end;
         -webkit-overflow-scrolling: touch;
@@ -501,7 +504,13 @@
     }
 
     .memori-widget.memori-layout-chat .memori-fullpage-header-actions .memori-header.memori-header--fullpage {
-        min-width: 0;
+        min-width: max-content;
+        flex-shrink: 0;
         flex-wrap: nowrap;
     }
+
+    .memori-widget.memori-layout-chat .memori-fullpage-header-actions .memori-icon-button,
+    .memori-widget.memori-layout-chat .memori-fullpage-header-actions .memori-button {
+        flex-shrink: 0;
+    }
 }

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

@@ -70,42 +70,19 @@
     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 */
+/* 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-sidebar-toggle-label {
+    .memori-hidden-chat-layout--header-close.memori-website_assistant--close-button {
     position: relative;
+    z-index: 2;
     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;
+    flex-shrink: 0;
     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);
+    visibility: visible;
 }
 
 .memori-button--icon > svg {
@@ -127,30 +104,30 @@
     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 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;
 }
 
-/* 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;
+.memori-widget.memori-layout-hidden_chat .memori-conversation-footer {
+    flex-wrap: wrap;
     justify-content: center;
-    padding: 0.35rem 1rem 0.85rem;
-    border-radius: 0;
-    margin: 0;
-    background: var(--memori-secondary-background);
-    transform: none;
+}
+
+.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 {
@@ -165,10 +142,6 @@
     transition: all 0.3s ease-in-out;
 }
 
-.memori-widget.memori-layout-hidden_chat .memori-sidebar .memori-chat--content {
-    padding: var(--memori-spacing-xl);
-}
-
 .memori-widget.memori-layout-hidden_chat .memori-sidebar .memori-chat-history {
     height: calc(100% - var(--memori-spacing-5xl));
     padding: 0;
@@ -336,6 +309,8 @@
 
 .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 var(--memori-border-color);
@@ -346,7 +321,10 @@
 
 .memori-widget.memori-layout-hidden_chat .memori-sidebar .memori-chat-layout--header-row {
     display: flex;
+    overflow: hidden;
     width: 100%;
+    min-width: 0;
+    max-width: 100%;
     align-items: center;
     justify-content: space-between;
     gap: 0.75rem;
@@ -354,7 +332,10 @@
 
 .memori-widget.memori-layout-hidden_chat .memori-sidebar .memori-hidden-chat-layout--header-actions {
     display: inline-flex;
-    flex: 0 0 auto;
+    min-width: 0;
+    max-width: 100%;
+    flex: 0 1 auto;
+    flex-shrink: 0;
     align-items: center;
     margin-left: auto;
     gap: 0.35rem;
@@ -445,6 +426,7 @@
     display: flex;
     overflow: hidden;
     min-width: 0;
+    max-width: calc(100% - 7.5rem);
     flex: 1 1 auto;
     align-items: center;
     gap: 0.75rem;
@@ -586,39 +568,33 @@
     color: var(--memori-primary-content, #fff);
 }
 
-/* Dark theme: header controls — white outline and icon (incl. share + position popover) */
+/* 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),
-[data-theme='dark']
-    .memori-widget.memori-layout-hidden_chat
-    .memori-header
-    .memori-button:hover: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: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),
 [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;
 }

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

@@ -61,8 +61,7 @@
     margin-left: auto;
     background: transparent;
     gap: var(--memori-spacing-md);
-    transition: background-color var(--memori-motion-duration-fast, 0.15s)
-        var(--memori-motion-ease, ease);
+    transition: background-color var(--memori-motion-duration-fast, 0.15s) var(--memori-motion-ease, ease);
 }
 
 .memori-widget.memori-layout-zoomed_full_body .memori-fullpage-header-row.memori-header--scrolled,
@@ -83,7 +82,7 @@
     min-height: 0;
     flex: 1 1 auto;
     border: none;
-    border-radius: 0;
+    border-radius: var(--memori-radius-box);
     margin-bottom: 0;
     background-color: var(--memori-secondary-background);
 }
@@ -163,7 +162,7 @@
     min-width: 0;
     flex-wrap: nowrap;
     justify-content: flex-end;
-    gap: 0.5rem;
+    gap: 0.75rem;
 }
 
 .memori-widget.memori-layout-zoomed_full_body .memori-header--fullpage-primary,
@@ -313,7 +312,9 @@
 }
 
 /* Hide avatar column when artifact drawer is open */
-.memori-widget.memori-layout-zoomed_full_body .memori-fullpage-content-row:has(.memori--grid-column-artifact--open) .memori--grid-column-left {
+.memori-widget.memori-layout-zoomed_full_body
+    .memori-fullpage-content-row:has(.memori--grid-column-artifact--open)
+    .memori--grid-column-left {
     display: none;
 }
 

package/esm/helpers/positionPopover.d.ts

@@ -1 +1 @@
-export declare function shouldRestartSessionOnPositionPopoverClose(wasOpen: boolean, nextOpen: boolean, autoStart: boolean): boolean;
+export declare function shouldRestartSessionOnPositionPopoverClose(wasOpen: boolean, nextOpen: boolean, autoStart: boolean, sessionAlreadyStarted?: boolean): boolean;

package/esm/helpers/positionPopover.js

@@ -1,4 +1,4 @@
-export function shouldRestartSessionOnPositionPopoverClose(wasOpen, nextOpen, autoStart) {
-    return wasOpen && !nextOpen && !!autoStart;
+export function shouldRestartSessionOnPositionPopoverClose(wasOpen, nextOpen, autoStart, sessionAlreadyStarted = false) {
+    return (wasOpen && !nextOpen && !!autoStart && !sessionAlreadyStarted);
 }
 //# sourceMappingURL=positionPopover.js.map

package/esm/helpers/positionPopover.js.map

@@ -1 +1 @@
-{"version":3,"file":"positionPopover.js","sourceRoot":"","sources":["../../src/helpers/positionPopover.ts"],"names":[],"mappings":"AAMA,MAAM,UAAU,0CAA0C,CACxD,OAAgB,EAChB,QAAiB,EACjB,SAAkB;IAElB,OAAO,OAAO,IAAI,CAAC,QAAQ,IAAI,CAAC,CAAC,SAAS,CAAC;AAC7C,CAAC"}
+{"version":3,"file":"positionPopover.js","sourceRoot":"","sources":["../../src/helpers/positionPopover.ts"],"names":[],"mappings":"AAMA,MAAM,UAAU,0CAA0C,CACxD,OAAgB,EAChB,QAAiB,EACjB,SAAkB,EAClB,qBAAqB,GAAG,KAAK;IAE7B,OAAO,CACL,OAAO,IAAI,CAAC,QAAQ,IAAI,CAAC,CAAC,SAAS,IAAI,CAAC,qBAAqB,CAC9D,CAAC;AACJ,CAAC"}