@memori.ai/memori-react 9.0.0-alpha.0 → 9.0.0-alpha.10

package/src/components/layouts/chat.css

@@ -1,9 +1,6 @@
 .memori-widget.memori-layout-chat {
     overflow: hidden;
     height: 100vh !important;
-    height: 100dvh !important;
-    min-height: 100vh;
-    min-height: 100dvh;
     padding: 0;
 }
 
@@ -11,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%;
@@ -57,6 +55,14 @@
     }
 }
 
+.memori-widget.memori-layout-chat .memori-chat-layout--controls > .memori-conversation-column {
+    display: flex;
+    width: 100%;
+    min-height: 0;
+    flex: 1 1 auto;
+    flex-direction: column;
+}
+
 .memori-widget.memori-layout-chat .memori-chat-layout--body {
     display: flex;
     overflow: hidden;
@@ -65,10 +71,13 @@
     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);
+}
+
+/* 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 +86,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 +96,21 @@
     flex-direction: column;
     align-items: center;
     justify-content: center;
-    /* padding: 0.5rem 0 0.25rem; */
 }
 
-.memori-widget.memori-layout-chat .memori-chat-layout--prechat-inputs {
+/* Input bar is a flex sibling of body inside the shared conversation column */
+.memori-widget.memori-layout-chat .memori-conversation-column > .memori-chat-inputs-wrapper {
+    overflow: hidden;
     width: 100%;
-    max-width: 56rem;
     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;
 }
 
 .memori-widget.memori-layout-chat .memori-chat-inputs {
-    background: var(--memori-secondary-background);
+    background: transparent;
 }
 
 .memori-chat-layout--header-with-artifact {
@@ -159,12 +168,23 @@
     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;
+    z-index: 5;
     top: auto;
     right: auto;
-    bottom: 1rem;
-    left: 1rem;
-    display: inline-flex;
+    bottom: auto;
+    left: auto;
+    display: flex;
+    width: auto;
+    flex-shrink: 0;
+    justify-content: flex-end;
+    padding: 0;
+    border-radius: 0;
+    margin: 0;
+    background: transparent;
+    transform: none;
 }
 
 .memori-chat-layout--controls .memori-chat--wrapper {
@@ -183,8 +203,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,6 +213,7 @@
 .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 {
@@ -271,15 +292,6 @@
     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;
@@ -290,15 +302,39 @@
     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);
+}
+
+/* Artifact drawer column inside the Chat layout's flex row */
+.memori-chat-layout .memori--grid-column-artifact {
+    overflow: hidden;
+    width: 0;
+    min-width: 0;
+    flex-shrink: 0;
+    transition: width 0.25s ease;
+}
+
+.memori-chat-layout .memori--grid-column-artifact--open {
+    width: 480px;
+    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;
+    }
 }
 
 .memori-chat-layout--artifact-panel {
@@ -377,13 +413,14 @@
 }
 
 .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 +557,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 +665,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;
-}