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

package/dist/components/Chat/Chat.css

@@ -6,6 +6,24 @@
     flex-direction: column;
 }
 
+/**
+ * Shared conversation axis for CHAT + FULLPAGE:
+ * message list, empty/start state and input share one max-width and inline padding.
+ * Children must not set their own column max-width / margin-inline.
+ */
+.memori-conversation-column {
+    display: flex;
+    width: 100%;
+    min-width: 0;
+    max-width: var(--memori-conversation-max-width, 48rem);
+    height: 100%;
+    min-height: 0;
+    box-sizing: border-box;
+    flex: 1 1 auto;
+    flex-direction: column;
+    margin-inline: auto;
+}
+
 @media (max-width: 768px) {
     .memori-chat--wrapper.chat-focused {
         padding-bottom: 0;
@@ -17,8 +35,9 @@
     overflow: hidden;
     width: 100%;
     height: calc(100% - 50px);
+    min-height: 0;
     flex: 1;
-    border-radius: var(--memori-radius-box) var(--memori-radius-box) 0 0;
+    border-radius: var(--memori-radius-surface) var(--memori-radius-surface) 0 0;
     margin-bottom: 1rem;
     background-color: var(--memori-secondary-background);
 }
@@ -32,6 +51,84 @@
     margin-bottom: var(--memori-spacing-sm);
 }
 
+.memori-chat--history.memori-chat--history-touch {
+    height: 80% !important;
+    padding: 0;
+}
+
+.memori-chat--content {
+    position: relative;
+    display: flex;
+    height: 100%;
+    min-height: 0;
+    flex: 1;
+    flex-direction: column;
+    overflow-anchor: none;
+    /* background-color: var(--memori-secondary-background); */
+    /* padding: 2rem var(--memori-spacing-sm); */
+    /* mask-image: linear-gradient(transparent, black 5%, black 95%, transparent 100%); */
+    overflow-y: auto;
+    /* auto avoids Safari flash on programmatic scrollTop / late image layout */
+    scroll-behavior: auto;
+    scrollbar-color: color-mix(in oklch, var(--memori-neutral, #6b7280) 55%, transparent) transparent;
+    scrollbar-width: thin;
+}
+
+/* Prevent WebKit from shrinking message children inside the scroll flex column */
+.memori-chat--content > * {
+    min-width: 0;
+    max-width: 100%;
+    flex-shrink: 0;
+}
+
+.memori-chat--content::-webkit-scrollbar {
+    width: 8px;
+}
+
+.memori-chat--content::-webkit-scrollbar-track {
+    background: transparent;
+}
+
+.memori-chat--content::-webkit-scrollbar-thumb {
+    border-radius: 999px;
+    background-color: color-mix(in oklch, var(--memori-neutral, #6b7280) 45%, transparent);
+}
+
+.memori-chat--content::-webkit-scrollbar-thumb:hover {
+    background-color: color-mix(in oklch, var(--memori-neutral, #6b7280) 60%, transparent);
+}
+
+/* Conversation-column overrides sit between base and layout-scoped rules. */
+.memori-conversation-column .memori-chat--wrapper,
+.memori-conversation-column .memori-chat--history,
+.memori-conversation-column .memori-chat--content,
+.memori-conversation-column .memori-chat-inputs-wrapper,
+.memori-conversation-column .memori-chat-inputs,
+.memori-conversation-column .memori-chat-inputs--ai-note,
+.memori-conversation-column .memori--start-panel,
+.memori-conversation-column .memori-chat-layout--body,
+.memori-conversation-column .memori-chat-layout--start-shell,
+.memori-conversation-column .memori-chat-layout--start-panel-wrap {
+    width: 100%;
+    max-width: none;
+    margin-inline: 0;
+}
+
+.memori-chat--content.memori-chat--content-touch {
+    padding-bottom: 0;
+    padding-inline: 0;
+}
+
+.memori-conversation-column .memori-chat--content,
+.memori-conversation-column .memori-chat--content.memori-chat--content-touch {
+    padding-top: var(--memori-spacing-lg);
+    padding-inline: 0;
+}
+
+.memori-conversation-column .memori-chat-inputs-wrapper {
+    padding-inline: 0;
+}
+
 /* Solo widget layout CHAT: area messaggi a card — top radius only;
    bottom radius lives on the input bar so the panel reads as one unit */
 .memori-widget.memori-layout-chat .memori-chat-layout--controls .memori-chat--history {
@@ -63,32 +160,18 @@
     background-color: var(--memori-secondary-background);
 }
 
-.memori-chat--history.memori-chat--history-touch {
-    height: 80% !important;
-    padding: 0;
-}
-
-.memori-chat--content {
-    position: relative;
-    display: flex;
-    height: 100%;
-    flex: 1;
-    flex-direction: column;
-    /* background-color: var(--memori-secondary-background); */
-    /* padding: 2rem var(--memori-spacing-sm); */
-    /* mask-image: linear-gradient(transparent, black 5%, black 95%, transparent 100%); */
-    overflow-y: auto;
-    scroll-behavior: smooth;
-}
-
-/* Global background image lives on the chat content area (not the whole layout).
-   Pseudo-element keeps blur from affecting messages. */
 .memori-chat--content--has-global-background {
     background-color: transparent;
+}
+
+/* Global background image lives on the chat history area (not the whole layout),
+   which is the messages viewport and does not scroll: the image therefore stays
+   put while messages scroll over it. Pseudo-element keeps blur off the messages. */
+.memori-chat--history--has-global-background {
     isolation: isolate;
 }
 
-.memori-chat--content--has-global-background::before {
+.memori-chat--history--has-global-background::before {
     position: absolute;
     z-index: 0;
     top: 0;
@@ -101,16 +184,50 @@
     background-repeat: no-repeat;
     background-size: cover;
     content: '';
+    filter: blur(5px);
     pointer-events: none;
+    transform: scale(1.06);
 }
 
-.memori-chat--content--has-global-background > * {
+.memori-chat--history--has-global-background > * {
     position: relative;
     z-index: 1;
 }
 
-.memori-chat--content.memori-chat--content-touch {
+.memori-chat--jump-to-latest {
+    position: absolute;
+    z-index: 4;
+    right: 0;
+    bottom: 0.75rem;
+    left: 0;
+    display: flex;
+    justify-content: center;
+    pointer-events: none;
+}
+
+.memori-chat--jump-to-latest-btn {
+    display: inline-flex;
+    width: 2.25rem;
+    height: 2.25rem;
+    align-items: center;
+    justify-content: center;
     padding: 0;
+    border: 1px solid color-mix(in oklch, var(--memori-text-color) 14%, transparent);
+    border-radius: 999px;
+    background: var(--memori-secondary-background, #fff);
+    box-shadow: 0 0.5rem 1.25rem color-mix(in oklch, #000 16%, transparent);
+    color: var(--memori-text-color);
+    cursor: pointer;
+    pointer-events: auto;
+}
+
+.memori-chat--jump-to-latest-btn:hover {
+    background: color-mix(in oklch, var(--memori-text-color) 6%, var(--memori-secondary-background, #fff));
+}
+
+.memori-chat--jump-to-latest-btn:focus-visible {
+    outline: 2px solid var(--memori-primary, #1890ff);
+    outline-offset: 2px;
 }
 
 /* Ensure smooth scrolling on mobile */
@@ -169,7 +286,7 @@
     display: inline-flex;
     align-items: center;
     padding: 0.25rem 0.75rem;
-    border-radius: var(--memori-radius-box);
+    border-radius: var(--memori-radius-control);
     margin-right: var(--memori-spacing-sm);
     box-shadow: 0 0 0.25rem var(--memori-primary);
     color: var(--memori-text-color);
@@ -219,9 +336,7 @@
     display: flex;
     flex-direction: column;
     align-items: center;
-    justify-content: center;
-    border-radius: var(--memori-radius-box);
-    backdrop-filter: blur(4px);
+    border-radius: var(--memori-radius-overlay);
     background-color: rgba(0, 0, 0, 0.7);
     pointer-events: none;
 }
@@ -237,7 +352,7 @@
 .memori-chat--drag-overlay-text {
     padding: 0 2rem;
     color: var(--memori-text-color);
-    font-size: var(--memori-text-size-large);
+    font-size: var(--memori-text-size-lg);
     font-weight: var(--memori-text-weight-medium);
     text-align: center;
 }
@@ -273,10 +388,10 @@
     display: inline-flex;
     align-items: center;
     padding: 0.35rem 0.5rem;
-    border: 1px solid #d4d8dd;
+    border: 1px solid var(--memori-border-color);
     border-radius: 999px;
-    background: #fff;
-    color: #1f2937;
+    background: transparent;
+    color: var(--memori-text-color);
     cursor: pointer;
     font-size: 0.75rem;
     gap: 0.25rem;
@@ -285,9 +400,7 @@
 }
 
 .memori-chat--usage-badge:hover {
-    border-color: var(--memori-primary, #1890ff);
-    background-color: #f8fafc;
-    color: var(--memori-primary, #1890ff);
+    background-color: var(--memori-secondary-background);
 }
 
 .memori-chat--usage-badge:focus-visible {
@@ -299,6 +412,7 @@
     font-weight: 600;
 }
 
+.memori-chat--usage-modal.memori-modal__viewport .memori-modal__popup,
 .memori-chat--usage-modal .memori-modal--panel {
     min-width: 20rem;
     max-width: 30rem;
@@ -352,39 +466,67 @@
     margin: 0;
 }
 
-/* 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-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-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-chat[data-theme='dark']
     .memori-header
-    .memori-button:hover: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-chat[data-theme='dark']
     .memori-header
-    .memori-button:active:not(:disabled, .memori-button--disabled),
-.memori-widget.memori-layout-chat[data-theme='dark']
-    .memori-header
-    .memori-button.memori-button--active:not(:disabled, .memori-button--disabled),
-[data-theme='dark']
-    .memori-widget.memori-layout-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-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-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/dist/components/Chat/Chat.d.ts

@@ -60,6 +60,8 @@ export interface Props {
     maxTotalMessagePayload?: number;
     maxTextareaCharacters?: number;
     globalBackground?: string;
+    footerBrand?: React.ReactNode;
+    showAiGeneratedNote?: boolean;
 }
 declare const _default: React.NamedExoticComponent<Props>;
 export default _default;