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

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

@@ -6,26 +6,30 @@
     height: 100%;
 }
 
-.memori-sidebar-toggle {
-    display: none;
+.memori-widget.memori-layout-hidden_chat {
+    --memori-hidden-chat-width: min(470px, 100vw);
 }
-.memori-chat--content {
-    padding: 0;
+
+.memori-widget.memori-layout-hidden_chat .memori-chat--history {
+    background: transparent;
 }
 
-.memori-chat-inputs {
-    padding: 8px 24px;
+.memori-widget.memori-layout-hidden_chat .memori-chat--bubble {
+    background-color: var(--memori-secondary-background);
 }
 
-.memori-chat-inputs--disclaimer {
-    width: 100%;
-    padding: 8px 16px;
+.memori-widget.memori-layout-hidden_chat .memori-media-item--document {
+    background-color: var(--memori-secondary-background);
 }
 
-.memori-chat-history {
-    height: calc(100% - 75px);
-    margin: 0;
+.memori-widget.memori-layout-hidden_chat .memori-media-item--document .memori-media-item--snippet {
+    background-color: var(--memori-secondary-background);
 }
+
+.memori-sidebar-toggle {
+    display: none;
+}
+
 /* Modern floating toggle button */
 .memori-sidebar-toggle-label {
     position: absolute;
@@ -33,15 +37,16 @@
     right: 0;
     display: flex;
     width: auto;
-    height: 80px;
+    height: var(--memori-spacing-5xl);
     align-items: center;
     justify-content: center;
-    padding: 12px 8px;
+    padding: var(--memori-spacing-sm);
+    border-radius: var(--memori-radius-box) 0 0 var(--memori-radius-box);
     background-color: var(--memori-primary);
-    color: white;
     cursor: pointer;
-    font-size: 18px;
-    font-weight: bold;
+    font-size: var(--memori-text-size-large);
+    font-weight: var(--memori-text-weight-semibold);
+    line-height: var(--memori-text-line-normal);
     text-orientation: mixed;
     transform: translateY(-50%);
     transition: all 0.3s ease-in-out;
@@ -49,12 +54,12 @@
 }
 
 .memori-open-label {
-    border-radius: 5px 0 0 5px;
+    border-radius: var(--memori-radius-box) 0 0 var(--memori-radius-box);
 }
 
 .memori-close-label {
-    right: 350px;
-    border-radius: 5px 0 0 5px;
+    right: var(--memori-hidden-chat-width);
+    border-radius: var(--memori-radius-box) 0 0 var(--memori-radius-box);
     opacity: 0;
     pointer-events: none;
     transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out, right 0.3s ease-in-out;
@@ -64,14 +69,37 @@
     position: fixed;
     z-index: 1000;
     top: 0;
-    right: -350px;
-    width: 350px;
+    right: calc(-1 * var(--memori-hidden-chat-width));
+    width: var(--memori-hidden-chat-width);
     height: 100%;
-    background-color: white;
-    box-shadow: -2px 0 5px rgba(0, 0, 0, 0.1);
+    background-color: var(--memori-main-background, #fff);
+    box-shadow: -2px 0 var(--memori-spacing-sm) rgba(0, 0, 0, 0.1);
     transition: all 0.3s ease-in-out;
 }
 
+.memori-widget.memori-layout-hidden_chat .memori-sidebar .memori-chat--content {
+    padding: 0;
+}
+
+.memori-widget.memori-layout-hidden_chat .memori-sidebar .memori-chat-history {
+    height: calc(100% - var(--memori-spacing-5xl));
+    padding: 0;
+    margin: 0;
+    background: var(--memori-secondary-background);
+}
+
+.memori-widget.memori-layout-hidden_chat .memori-chat-inputs {
+    background: var(--memori-secondary-background);
+}
+
+.memori-widget.memori-layout-hidden_chat .memori-sidebar .memori-chat-inputs {
+    padding: var(--memori-spacing-sm) var(--memori-spacing-lg);
+}
+
+.memori-widget.memori-layout-hidden_chat .memori--start-description {
+    margin-top: auto;
+}
+
 /* Fullscreen styles */
 .memori-sidebar-fullscreen {
     right: 0 !important;
@@ -83,10 +111,12 @@
 
 .memori-sidebar-fullscreen .memori-close-label {
     z-index: 1100;
-    top: 10px;
-    right: 10px;
-    width: 38px;
-    height: 38px;
+    top: var(--memori-spacing-sm);
+    right: var(--memori-spacing-sm);
+    width: var(--memori-spacing-2xl);
+    min-width: var(--memori-spacing-2xl);
+    height: var(--memori-spacing-2xl);
+    min-height: var(--memori-spacing-2xl);
     border-radius: 50%;
     background-color: var(--memori-primary);
     opacity: 1;
@@ -98,37 +128,41 @@
 
 .memori-hidden-chat-layout--controls {
     display: flex;
-    height: 95%;
-    padding: 10px;
-    margin-top: 50px;
+    overflow: hidden;
+    width: 100%;
+    height: 100%;
+    min-height: 0;
+    flex-direction: column;
 }
 
 .memori-sidebar-fullscreen .memori-hidden-chat-layout--controls {
-    height: calc(100% - 80px);
-    max-height: none;
+    height: 100%;
 }
 
 .memori-fullscreen-button {
     display: flex;
-    width: 38px;
-    height: 38px;
+    width: var(--memori-spacing-2xl);
+    min-width: var(--memori-spacing-2xl);
+    height: var(--memori-spacing-2xl);
+    min-height: var(--memori-spacing-2xl);
     align-items: center;
     justify-content: center;
     border: none;
     border-radius: 50%;
-    margin-left: 10px;
+    margin-left: var(--memori-spacing-sm);
     aspect-ratio: 1;
     background-color: var(--memori-primary);
-    color: white;
+    color: var(--memori-main-background, #fff);
     cursor: pointer;
     transition: background-color 0.3s ease-in-out;
 }
 
 .memori-sidebar-content h2 {
-    margin-bottom: 20px;
+    margin-bottom: var(--memori-spacing-lg);
     color: var(--memori-primary);
-    font-size: 24px;
-    font-weight: bold;
+    font-size: var(--memori-text-size-heading-large);
+    font-weight: var(--memori-text-weight-semibold);
+    line-height: var(--memori-text-line-tight);
 }
 
 .memori-sidebar-content ul {
@@ -137,13 +171,15 @@
 }
 
 .memori-sidebar-content li {
-    margin-bottom: 10px;
+    margin-bottom: var(--memori-spacing-sm);
 }
 
 .memori-sidebar-content a {
     display: flex;
     align-items: center;
-    color: #4b5563;
+    color: var(--memori-text-color);
+    font-size: var(--memori-text-size-base);
+    line-height: var(--memori-text-line-normal);
     text-decoration: none;
     transition: color 0.2s ease-in-out;
 }
@@ -152,12 +188,6 @@
     color: var(--memori-primary);
 }
 
-.memori-sidebar-content svg {
-    width: 20px;
-    height: 20px;
-    margin-right: 10px;
-}
-
 .memori-sidebar-toggle:checked ~ .memori-sidebar-container .memori-sidebar {
     right: 0;
 }
@@ -169,7 +199,7 @@
 .memori-sidebar-toggle:checked ~ .memori-sidebar-container .memori-open-label {
     opacity: 0;
     pointer-events: none;
-    transform: translateY(-50%) translateX(350px);
+    transform: translateY(-50%) translateX(var(--memori-hidden-chat-width));
 }
 
 .memori-loading {
@@ -179,53 +209,212 @@
     justify-content: center;
 }
 
-.memori-sidebar-content {
-    position: absolute;
-    top: -10px;
-    width: 100%;
-    padding: 20px;
-}
-
 .memori-sidebar-toggle:checked ~ .memori-sidebar-container .memori-close-label {
     opacity: 1;
     pointer-events: auto;
 }
 
-.memori-hidden-chat-layout--header {
-    display: flex;
+.memori-widget.memori-layout-hidden_chat .memori-sidebar .memori-chat-layout--header {
     width: 100%;
-    align-items: center;
-    justify-content: flex-end;
-    padding: 10px;
-    margin: 0;
-    background-color: white;
-    color: white;
+    flex-shrink: 0;
+    padding: 0.75rem 1rem;
+    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
+    margin-bottom: 0;
+    background: var(--memori-secondary-background);
+    text-align: left;
 }
 
-.memori-hidden-chat-layout-header--layout {
+.memori-widget.memori-layout-hidden_chat .memori-sidebar .memori-chat-layout--header-row {
     display: flex;
     width: 100%;
     align-items: center;
-    justify-content: flex-end;
-    padding: 10px;
-    margin: 0;
-    background-color: white;
-    color: white;
-    gap: 4px;
+    justify-content: space-between;
+    gap: 0.75rem;
+}
+
+.memori-widget.memori-layout-hidden_chat .memori-sidebar .memori-hidden-chat-layout--header-actions {
+    display: inline-flex;
+    flex: 0 0 auto;
+    align-items: center;
+    margin-left: auto;
+    gap: 0.35rem;
+}
+
+/* Sidebar is narrow (~470px): icon-only chat history, same UX as <992px elsewhere */
+.memori-widget.memori-layout-hidden_chat .memori-sidebar .memori-header--chat-history-button .memori-button__content {
+    display: none !important;
+}
+
+.memori-widget.memori-layout-hidden_chat .memori-sidebar .memori-header--chat-history-button.memori-button {
+    gap: 0;
+    padding-inline: 8px;
+}
+
+@media (max-width: 480px) {
+    .memori-widget.memori-layout-hidden_chat .memori-sidebar .memori-chat-layout--brand {
+        min-width: 0;
+        max-width: calc(100% - 6.5rem);
+        flex: 1 1 auto;
+    }
+}
+
+.memori-widget.memori-layout-hidden_chat .memori-sidebar .memori-hidden-chat-layout--overflow-menu {
+    max-width: min(100vw - 2rem, 420px);
+}
+
+.memori-hidden-chat-layout--share-submenu,
+.memori-hidden-chat-layout--share-submenu > *,
+.memori-hidden-chat-layout--share-submenu > * > * {
+    width: 100%;
 }
 
-.memori-hidden-chat-layout-header--layout > button,
-.memori-hidden-chat-layout-header--layout > div > button {
+.memori-widget.memori-layout-hidden_chat .memori-sidebar .memori-hidden-chat-layout--share-submenu {
+    display: block;
+    width: 100%;
+}
+
+.memori-widget.memori-layout-hidden_chat .memori-sidebar .memori-hidden-chat-layout--overflow-user {
     display: flex;
-    width: 38px;
-    height: 38px;
+    align-items: center;
+    padding: 0.5rem 0.75rem 0.65rem;
+    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
+    margin-bottom: 0.25rem;
+    gap: 0.5rem;
+}
+
+.memori-widget.memori-layout-hidden_chat .memori-sidebar .memori-hidden-chat-layout--overflow-user-avatar,
+.memori-widget.memori-layout-hidden_chat .memori-sidebar .memori-hidden-chat-layout--overflow-user-avatar-placeholder {
+    width: 2rem;
+    height: 2rem;
+    flex-shrink: 0;
+    border-radius: 40% 60% 55% 45% / 45% 55% 45% 55%;
+}
+
+.memori-widget.memori-layout-hidden_chat .memori-sidebar .memori-hidden-chat-layout--overflow-user-avatar {
+    object-fit: cover;
+}
+
+.memori-widget.memori-layout-hidden_chat .memori-sidebar .memori-hidden-chat-layout--overflow-user-avatar-placeholder {
+    display: inline-flex;
     align-items: center;
     justify-content: center;
+    background: var(--memori-primary);
+    color: var(--memori-main-background, #fff);
+    font-size: 0.875rem;
+    font-weight: 600;
+}
+
+.memori-widget.memori-layout-hidden_chat .memori-sidebar .memori-hidden-chat-layout--overflow-user-name {
+    color: var(--memori-text-color, #111);
+    font-size: 0.875rem;
+    font-weight: 600;
+}
+
+/* .memori-header defaults to width:100%; in a narrow sidebar that steals space from the brand row. */
+.memori-widget.memori-layout-hidden_chat .memori-sidebar .memori-chat-layout--header-row > .memori-header {
+    width: auto;
+    min-width: 0;
+    flex: 0 1 auto;
+}
+
+.memori-widget.memori-layout-hidden_chat .memori-header--position .memori-header--position-placeName {
+    display: none;
+}
+
+.memori-widget.memori-layout-hidden_chat .memori-sidebar .memori-chat-layout--brand {
+    display: flex;
+    overflow: hidden;
+    min-width: 0;
+    flex: 1 1 auto;
+    align-items: center;
+    gap: 0.75rem;
+}
+
+.memori-widget.memori-layout-hidden_chat .memori-sidebar .memori-chat-layout--brand-avatar {
+    width: 40px;
+    height: 40px;
+    flex-shrink: 0;
+    border: 1px solid rgba(0, 0, 0, 0.06);
     border-radius: 50%;
-    aspect-ratio: 1;
-    background-color: var(--memori-primary);
-    cursor: pointer;
-    transition: background-color 0.3s ease-in-out;
+    object-fit: cover;
+}
+
+.memori-widget.memori-layout-hidden_chat .memori-sidebar .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-widget.memori-layout-hidden_chat .memori-sidebar .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;
+}
+
+.memori-widget.memori-layout-hidden_chat .memori-sidebar .memori-chat-layout--body {
+    display: flex;
+    overflow: hidden;
+    width: 100%;
+    min-height: 0;
+    flex: 1;
+    flex-direction: column;
+    align-items: stretch;
+    padding: 0.75rem 1rem 0.75rem;
+    background: var(--memori-main-background);
+}
+
+.memori-widget.memori-layout-hidden_chat .memori-sidebar .memori-chat-layout--start-shell {
+    display: flex;
+    width: 100%;
+    min-height: 0;
+    flex: 1;
+    flex-direction: column;
+}
+
+.memori-widget.memori-layout-hidden_chat .memori-sidebar .memori-chat-layout--start-panel-wrap {
+    display: flex;
+    overflow: auto;
+    min-height: 0;
+    flex: 1 1 auto;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    margin: 0.5rem 0 1.5rem;
+}
+
+.memori-widget.memori-layout-hidden_chat .memori-sidebar .memori-chat-layout--body .memori--cover {
+    display: none;
+}
+
+.memori-widget.memori-layout-hidden_chat .memori-sidebar .memori-chat-layout--body .memori--start-panel {
+    width: 100%;
+    max-width: 30.5rem;
+    align-self: center;
+    border: none;
+    border-radius: 16px;
+    background: var(--memori-secondary-background);
+}
+
+.memori-widget.memori-layout-hidden_chat .memori-sidebar .memori-chat-layout--body .memori--start-panel__body {
+    padding: var(--memori-spacing-lg) var(--memori-spacing-xl);
+}
+
+.memori-widget.memori-layout-hidden_chat .memori-sidebar .memori-chat-layout--body .memori--title-container {
+    flex-direction: column;
+    align-items: center;
+    padding-top: 1rem;
+    text-align: center;
 }
 
 .memori-button--icon > svg {
@@ -234,18 +423,19 @@
 
 .memori-icon,
 .memori-icon-close {
-    width: 25px;
-    height: 25px;
+    width: var(--memori-spacing-xl);
+    height: var(--memori-spacing-xl);
+    stroke: #fff;
 }
 
 .memori-icon-close {
-    fill: white;
+    fill: var(--memori-main-background, #fff);
 }
 
 @media (max-width: 768px) {
-    .memori-sidebar-container {
+    /* .memori-sidebar-container {
         display: none;
-    }
+    } */
 
     .memori-sidebar {
         right: -100%;
@@ -274,3 +464,58 @@
         height: 100% !important;
     }
 }
+
+/* Dark theme: header controls — white outline and icon (incl. share + position popover) */
+.memori-widget.memori-layout-hidden_chat[data-theme='dark']
+    .memori-header
+    .memori-button:not(:disabled):not(.memori-button--disabled),
+[data-theme='dark']
+    .memori-widget.memori-layout-hidden_chat
+    .memori-header
+    .memori-button:not(:disabled):not(.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-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),
+[data-theme='dark']
+    .memori-widget.memori-layout-hidden_chat
+    .memori-header
+    .memori-button:active:not(: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) {
+    border: var(--memori-border) solid #fff;
+    color: #fff;
+}
+
+.memori-widget.memori-layout-hidden_chat[data-theme='dark'] .memori-header .memori-dropdown--user-trigger,
+[data-theme='dark'] .memori-widget.memori-layout-hidden_chat .memori-header .memori-dropdown--user-trigger {
+    border: var(--memori-border) solid #fff;
+    color: #fff;
+}
+
+.memori-widget.memori-layout-hidden_chat[data-theme='dark'] .memori-header .memori-dropdown--user-trigger:hover,
+[data-theme='dark'] .memori-widget.memori-layout-hidden_chat .memori-header .memori-dropdown--user-trigger:hover {
+    border: var(--memori-border) solid #fff;
+    color: #fff;
+}
+
+.memori-widget.memori-layout-hidden_chat[data-theme='dark'] .memori-hidden-chat-layout--overflow-trigger,
+[data-theme='dark'] .memori-widget.memori-layout-hidden_chat .memori-hidden-chat-layout--overflow-trigger {
+    border: var(--memori-border) solid #fff;
+    color: #fff;
+}