@memori.ai/memori-react 9.0.0-alpha.9 → 9.0.0-rc.0

package/dist/components/layouts/chat.css

@@ -1,9 +1,29 @@
 .memori-widget.memori-layout-chat {
+    display: flex;
     overflow: hidden;
-    height: 100vh !important;
+    height: 100%;
+    min-height: 0;
+    max-height: 100%;
+    flex-direction: column;
     padding: 0;
 }
 
+/* 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 {
     background: none;
 }
@@ -14,6 +34,7 @@
     overflow: hidden;
     height: 100%;
     min-height: 0;
+    flex: 1 1 auto;
     flex-direction: column;
 }
 
@@ -22,19 +43,12 @@
     line-height: 1.2;
     overflow-x: hidden;
     overflow-y: auto;
+    padding-inline-end: 8px;
     text-align: left;
 }
 
-@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;
-    }
-}
-
-/* Mobile CHAT header: single row (brand + actions); horizontal scroll if needed */
+/* Mobile CHAT header: single row (brand + actions). Keep overflow visible so
+   outline icon buttons (audio, more) are not clipped. */
 @media (max-width: 768px) {
     .memori-widget.memori-layout-chat .memori-fullpage-header-row {
         flex-wrap: nowrap;
@@ -42,29 +56,52 @@
     }
 
     .memori-widget.memori-layout-chat .memori-fullpage-header-actions {
+        overflow: visible;
         min-width: 0;
+        flex: 0 0 auto;
         flex-wrap: nowrap;
-        -webkit-overflow-scrolling: touch;
-        overflow-x: auto;
-        overflow-y: hidden;
     }
 
     .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 {
+        overflow: visible;
+        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%;
+    min-width: 0;
+    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. */
@@ -88,23 +125,38 @@
     flex-direction: column;
     align-items: center;
     justify-content: center;
+    padding-inline-end: 6px;
 }
 
-/* Input bar is a flex sibling of body — full-bleed footer outside the scroll area */
-.memori-widget.memori-layout-chat .memori-chat-layout--controls > .memori-chat-inputs-wrapper {
+/* 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;
 }
@@ -160,32 +212,60 @@
     background-image: none !important;
 }
 
-/* Powered-by footer under the input, on the same --memori-secondary-background strip */
-.memori-widget.memori-layout-chat .memori-chat-layout--controls > .memori--powered-by {
-    position: relative;
+/* Powered-by lives in the conversation footer row under the input */
+.memori-widget.memori-layout-chat .memori-conversation-footer > .memori--powered-by {
+    position: relative !important;
     z-index: 5;
     top: auto;
     right: auto;
     bottom: auto;
     left: auto;
-    display: flex;
-    width: 100%;
+    display: inline-flex !important;
+    width: auto;
     flex-shrink: 0;
-    justify-content: center;
-    padding: 0.35rem 1rem 0.85rem;
+    justify-content: flex-end;
+    padding: 0;
     border-radius: 0;
     margin: 0;
-    background: var(--memori-secondary-background);
+    background: transparent;
     transform: none;
 }
 
+@media (max-width: 768px) {
+    .memori-widget.memori-layout-chat .memori-conversation-footer {
+        justify-content: center;
+        gap: 0;
+    }
+
+    .memori-widget.memori-layout-chat .memori-conversation-footer > .memori--powered-by {
+        display: none !important;
+    }
+
+    .memori-widget.memori-layout-chat .memori-conversation-footer .memori-chat-inputs--ai-note {
+        overflow: visible;
+        flex: 0 1 auto;
+        text-align: center;
+        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 {
     display: flex;
     height: 100%;
     min-height: 0;
     flex: 1;
     flex-direction: column;
-    border-radius: 12px;
+    border-radius: var(--memori-radius-surface);
 }
 
 /* Solo layout CHAT: start panel compatto e conversazione centrata */
@@ -195,56 +275,63 @@
 
 .memori-widget.memori-layout-chat .memori-chat-layout--body .memori--start-panel {
     width: 100%;
-    max-width: 30.5rem;
-    align-self: center;
+    max-width: none;
+    align-self: stretch;
     border: none;
-    border-radius: 16px;
+    border-radius: var(--memori-radius-surface);
     background: var(--memori-secondary-background);
 }
 
 .memori-widget.memori-layout-chat .memori-chat-layout--body .memori--start-panel__body {
     padding: var(--memori-spacing-lg) var(--memori-spacing-xl);
-    padding-top: 0;
+    /* padding-top: 0; */
     background: var(--memori-main-background);
 }
 
 .memori-widget.memori-layout-chat .memori-chat-layout--body .memori--title-container {
-    flex-direction: column;
-    align-items: center;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    align-items: flex-start;
     padding-top: 1rem;
-    text-align: center;
+    text-align: left;
 }
 
 .memori-widget.memori-layout-chat .memori-chat-layout--body .memori--title-container .memori--avatar {
     width: 4rem;
     height: 4rem;
+    flex-shrink: 0;
     padding: 0;
-    border-radius: var(--memori-radius-box);
-    margin-right: 0;
-    margin-bottom: 0.65rem;
+    border-radius: var(--memori-radius-surface);
+    margin-right: calc(var(--memori-spacing-sm) + var(--memori-spacing-xs) / 2);
+    margin-bottom: 0;
 }
 
 .memori-widget.memori-layout-chat .memori-chat-layout--body .memori--title-container .memori--avatar img {
     width: 100%;
     height: 100%;
-    border-radius: 10px;
+    border-radius: var(--memori-radius-surface);
     object-fit: cover;
 }
 
 .memori-widget.memori-layout-chat .memori-chat-layout--body .memori--title-container__content {
+    min-width: 0;
     max-width: 100%;
-    align-items: center;
+    align-items: flex-start;
 }
 
 .memori-widget.memori-layout-chat .memori-chat-layout--body .memori--title-container .memori--title {
-    font-size: 1.05rem;
-    text-align: center;
+    overflow: hidden;
+    min-width: 0;
+    font-size: var(--memori-text-size-lg);
+    text-align: left;
+    text-overflow: ellipsis;
+    white-space: nowrap;
 }
 
 .memori-widget.memori-layout-chat .memori-chat-layout--body .memori--start-panel .memori--title {
     margin-bottom: 0.5rem;
     color: var(--memori-text-color, #111) !important;
-    font-size: var(--memori-text-size-heading-large);
+    font-size: var(--memori-text-size-2xl);
     line-height: var(--memori-text-line-tight);
 }
 
@@ -273,14 +360,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;
 }
 
@@ -291,6 +384,7 @@
     overflow: hidden;
     min-width: 0;
     height: 100%;
+    min-height: 0;
     max-height: 100%;
     flex: 1;
     flex-direction: column;
@@ -299,8 +393,7 @@
 
 /* Focus states for accessibility */
 .memori-chat-layout--controls:focus-within {
-    border-radius: var(--memori-radius-box);
-    outline-offset: 2px;
+    border-radius: var(--memori-radius-composer);
 }
 
 .memori-widget.memori-layout-chat .memori-chat-layout--controls {
@@ -308,27 +401,105 @@
     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: 480px;
+.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 {
-        display: none;
+@media (max-width: 1199px) {
+    .memori-widget.memori-layout-chat .memori-chat-layout--main {
+        position: relative;
+    }
+
+    .memori-widget.memori-layout-chat .memori--grid-column-artifact--open {
+        position: absolute;
+        z-index: 8;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        width: min(620px, 100%);
+        box-shadow: var(--memori-shadow-lg, 0 10px 28px rgba(0, 0, 0, 0.12));
     }
 }
 
+/* Custom background image fills the messages area across the whole page width:
+   it is painted on the layout row instead of the conversation column, so it also
+   covers the side gutters, while header and input bar stay solid strips. */
+.memori-chat-layout--main--has-background {
+    position: relative;
+    isolation: isolate;
+}
+
+.memori-chat-layout--main--has-background::before {
+    position: absolute;
+    z-index: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    background-color: #eee;
+    background-image: var(--memori-chat-global-background);
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    content: '';
+    filter: blur(5px);
+    pointer-events: none;
+    transform: scale(1.06);
+}
+
+.memori-widget.memori-layout-chat .memori-chat-layout--main--has-background .memori--grid-column-artifact {
+    position: relative;
+    z-index: 5;
+}
+
+.memori-widget.memori-layout-chat .memori-chat-layout--main--has-background .memori-chat-layout--controls,
+.memori-widget.memori-layout-chat .memori-chat-layout--main--has-background .memori-chat-layout--body {
+    background: transparent;
+}
+
+/* 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);
+}
+
+/* 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 {
+    margin-bottom: 0;
+    background: var(--memori-secondary-background);
+}
+
+/* The column-scoped image would otherwise paint a second, narrower copy. */
+.memori-widget.memori-layout-chat
+    .memori-chat-layout--main--has-background
+    .memori-chat--history--has-global-background::before {
+    display: none;
+}
+
 .memori-chat-layout--artifact-panel {
     position: relative;
     display: flex;
@@ -338,8 +509,7 @@
     height: 100%;
     flex: 0 0 50%;
     flex-direction: column;
-    border: 1px solid rgba(255, 255, 255, 0.3);
-    border-radius: var(--memori-radius-box);
+    border-radius: var(--memori-radius-overlay);
     backdrop-filter: blur(20px);
     background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(248, 250, 252, 0.8) 100%);
     box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
@@ -402,6 +572,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;
+    min-height: 0;
 }
 
 .memori-widget.memori-layout-chat .memori-chat-layout--controls .memori-chat--wrapper {
@@ -411,7 +582,8 @@
 }
 
 .memori-chat-layout .memori-chat--content {
-    padding: var(--memori-spacing-xl);
+    padding-block: var(--memori-spacing-xl);
+    padding-inline: 0;
 }
 
 @media (max-width: 991px) {