@memori.ai/memori-react 9.0.0-alpha.2 → 9.0.0-alpha.21

package/dist/components/layouts/chat.css

@@ -2,8 +2,8 @@
     overflow: hidden;
     height: 100vh !important;
     height: 100dvh !important;
-    min-height: 100vh;
-    min-height: 100dvh;
+    max-height: 100vh;
+    max-height: 100dvh;
     padding: 0;
 }
 
@@ -11,7 +11,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%;
@@ -24,18 +25,10 @@
     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 */
 @media (max-width: 768px) {
     .memori-widget.memori-layout-chat .memori-fullpage-header-row {
@@ -45,6 +38,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;
@@ -52,23 +46,48 @@
     }
 
     .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;
-    /* padding: 0.75rem 1rem 0.75rem; */
-    padding-bottom: var(--memori-spacing-4xl);
-    margin: 0 auto;
-    background: var(--memori-main-background);
+    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. */
+.memori-widget.memori-layout-chat:has(.memori-chat--content--has-global-background) .memori-chat-layout--body {
+    background: transparent;
 }
 
 .memori-widget.memori-layout-chat .memori-chat-layout--start-shell {
@@ -77,7 +96,6 @@
     min-height: 0;
     flex: 1;
     flex-direction: column;
-    /* margin-bottom: var(--memori-spacing-4xl); */
 }
 
 .memori-widget.memori-layout-chat .memori-chat-layout--start-panel-wrap {
@@ -88,20 +106,33 @@
     flex-direction: column;
     align-items: center;
     justify-content: center;
-    /* padding: 0.5rem 0 0.25rem; */
+    padding-inline-end: 6px;
 }
 
-.memori-widget.memori-layout-chat .memori-chat-layout--prechat-inputs {
+/* 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: 56rem;
+    max-width: none;
+    box-sizing: border-box;
     flex-shrink: 0;
-    padding-top: 0.25rem;
-    padding-bottom: env(safe-area-inset-bottom, 0);
-    margin: 0 auto;
+    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: var(--memori-secondary-background);
+    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 {
@@ -159,12 +190,51 @@
     background-image: none !important;
 }
 
-.memori-widget.memori-layout-chat .memori-chat-layout > .memori--powered-by {
+/* 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: 1rem;
-    left: 1rem;
-    display: inline-flex;
+    bottom: auto;
+    left: auto;
+    display: inline-flex !important;
+    width: auto;
+    flex-shrink: 0;
+    justify-content: flex-end;
+    padding: 0;
+    border-radius: 0;
+    margin: 0;
+    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 {
@@ -183,8 +253,8 @@
 
 .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;
     background: var(--memori-secondary-background);
@@ -193,22 +263,25 @@
 .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;
+    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;
+    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 {
@@ -219,13 +292,18 @@
 }
 
 .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 {
+    overflow: hidden;
+    min-width: 0;
     font-size: 1.05rem;
-    text-align: center;
+    text-align: left;
+    text-overflow: ellipsis;
+    white-space: nowrap;
 }
 
 .memori-widget.memori-layout-chat .memori-chat-layout--body .memori--start-panel .memori--title {
@@ -260,26 +338,23 @@
 .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;
 }
 
-.memori-chat-layout--main-with-artifact {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: space-between;
-    /* padding: 1rem; */
-    gap: 1rem;
-}
-
 .memori-chat-layout--controls {
     position: relative;
     z-index: 5;
@@ -287,18 +362,111 @@
     overflow: hidden;
     min-width: 0;
     height: 100%;
+    min-height: 0;
     max-height: 100%;
     flex: 1;
     flex-direction: column;
-    /* padding-bottom: 1.5rem; */
     transition: all 0.05s ease-in-out;
 }
 
-.memori-chat-layout--controls-with-artifact {
-    max-height: 100%;
-    flex: 0 0 49%;
-    /* padding-bottom: 2.5rem; */
-    margin: 0;
+/* Focus states for accessibility */
+.memori-chat-layout--controls:focus-within {
+    border-radius: var(--memori-radius-box);
+    outline-offset: 2px;
+}
+
+.memori-widget.memori-layout-chat .memori-chat-layout--controls {
+    border-radius: 0;
+    background: var(--memori-secondary-background);
+}
+
+/* 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-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-widget.memori-layout-chat .memori--grid-column-artifact {
+        display: none;
+    }
+}
+
+/* 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 {
@@ -374,16 +542,18 @@
 .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 {
-    max-width: 56rem;
-    padding: 0.75rem 0.5rem;
-    margin: 0 auto;
+    max-width: none;
+    padding: 0;
+    margin: 0;
 }
 
 .memori-chat-layout .memori-chat--content {
-    padding: 0;
+    padding-block: var(--memori-spacing-xl);
+    padding-inline: 0;
 }
 
 @media (max-width: 991px) {
@@ -520,12 +690,6 @@
     }
 }
 
-/* Focus states for accessibility */
-.memori-chat-layout--controls:focus-within {
-    border-radius: var(--memori-radius-box);
-    outline-offset: 2px;
-}
-
 /* High contrast mode support */
 @media (prefers-contrast: high) {
     .memori-chat-layout--main {
@@ -634,20 +798,3 @@
         transform: translateX(100%);
     }
 }
-
-/* Adjust chat layout when drawer is open */
-.memori-chat-layout:has(.memori-chat-layout--artifact-drawer .memori-artifact-drawer[data-headlessui-state~='open'])
-    .memori-chat-layout--controls {
-    margin-right: 50%;
-    filter: blur(1px);
-    opacity: 0.8;
-    transform: scale(0.98);
-    transition: all 0.05s ease-in-out;
-}
-
-.memori-chat-layout:has(.memori-chat-layout--artifact-drawer .memori-artifact-drawer[data-headlessui-state~='open'])
-    .memori-chat-layout--main {
-    backdrop-filter: blur(5px);
-    background: linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, rgba(248, 250, 252, 0.02) 100%);
-    transition: all 0.05s ease-in-out;
-}