@memori.ai/memori-react 9.0.0-alpha.16 → 9.0.0-alpha.18

package/src/components/layouts/fullpage.css

@@ -162,21 +162,25 @@
     justify-content: flex-end;
 }
 
-/* FullPage header controls: compact square actions + rounded login CTA */
-.memori-widget.memori-layout-fullpage .memori-header.memori-header--fullpage {
+/* FullPage / Chat / Zoomed header controls: compact square actions + rounded login CTA */
+.memori-widget.memori-layout-fullpage .memori-header.memori-header--fullpage,
+.memori-widget.memori-layout-chat .memori-header.memori-header--fullpage {
     min-width: 0;
     flex-wrap: nowrap;
     justify-content: flex-end;
-    gap: 0.5rem;
+    gap: 0.75rem;
 }
 
 .memori-widget.memori-layout-fullpage .memori-header--fullpage-primary,
-.memori-widget.memori-layout-fullpage .memori-header--fullpage-secondary {
+.memori-widget.memori-layout-fullpage .memori-header--fullpage-secondary,
+.memori-widget.memori-layout-chat .memori-header--fullpage-primary,
+.memori-widget.memori-layout-chat .memori-header--fullpage-secondary {
     flex-wrap: nowrap;
     gap: 0.5rem;
 }
 
-.memori-widget.memori-layout-fullpage .memori-header--fullpage-divider {
+.memori-widget.memori-layout-fullpage .memori-header--fullpage-divider,
+.memori-widget.memori-layout-chat .memori-header--fullpage-divider {
     min-height: 26px;
     margin: 0;
 }
@@ -478,8 +482,7 @@
         flex: 1 1 auto;
     }
 
-    .memori-widget.memori-layout-fullpage .memori-fullpage-header-actions,
-    .memori-widget.memori-layout-chat .memori-fullpage-header-actions {
+    .memori-widget.memori-layout-fullpage .memori-fullpage-header-actions {
         flex: 0 0 auto;
         justify-content: flex-end;
     }
@@ -492,7 +495,7 @@
 
     .memori-widget.memori-layout-chat .memori-fullpage-header-actions {
         min-width: 0;
-        flex: 0 0 auto;
+        flex: 1 1 auto;
         flex-wrap: nowrap;
         justify-content: flex-end;
         -webkit-overflow-scrolling: touch;
@@ -501,7 +504,13 @@
     }
 
     .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;
+    }
 }

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

@@ -70,42 +70,19 @@
     transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out, right 0.3s ease-in-out;
 }
 
-/* Close control lives in the header icon group (next to mute), not as a mid-page float */
+/* Close control lives in the header icon group (next to mute), not as a mid-page float.
+   Visuals come from `.memori-website_assistant--close-button` (shared with WEBSITE_ASSISTANT). */
 .memori-widget.memori-layout-hidden_chat
     .memori-sidebar
-    .memori-hidden-chat-layout--header-close.memori-sidebar-toggle-label {
+    .memori-hidden-chat-layout--header-close.memori-website_assistant--close-button {
     position: relative;
+    z-index: 2;
     top: auto;
     right: auto;
-    display: inline-flex;
-    width: 2.5rem;
-    min-width: 2.5rem;
-    height: 2.5rem;
-    min-height: 2.5rem;
-    align-items: center;
-    justify-content: center;
-    padding: 0;
-    border: var(--memori-border, 1px) solid color-mix(in srgb, var(--memori-text-color, #111827) 18%, transparent);
-    border-radius: var(--memori-radius-box, 0.5rem);
-    margin: 0;
-    background: transparent;
-    color: var(--memori-text-color, #111827);
-    cursor: pointer;
-    font-size: inherit;
-    font-weight: inherit;
-    line-height: 1;
+    flex-shrink: 0;
     opacity: 1;
     pointer-events: auto;
-    text-orientation: mixed;
-    transform: none;
-    transition: background-color 0.15s ease, border-color 0.15s ease;
-    writing-mode: horizontal-tb;
-}
-
-.memori-widget.memori-layout-hidden_chat
-    .memori-sidebar
-    .memori-hidden-chat-layout--header-close.memori-sidebar-toggle-label:hover {
-    background: color-mix(in srgb, var(--memori-text-color, #111827) 6%, transparent);
+    visibility: visible;
 }
 
 .memori-button--icon > svg {
@@ -127,30 +104,30 @@
     fill: none;
 }
 
-.memori-widget.memori-layout-hidden_chat .memori-sidebar .memori-hidden-chat-layout--header-close .memori-icon-close {
-    width: 1.125rem;
-    height: 1.125rem;
-    fill: none;
-    stroke: currentColor;
+/* Powered-by is not shown in HIDDEN_CHAT; AI disclaimer wraps under the input. */
+.memori-widget.memori-layout-hidden_chat .memori-sidebar .memori--powered-by {
+    display: none !important;
 }
 
-/* Powered-by footer under the input on --memori-secondary-background */
-.memori-widget.memori-layout-hidden_chat .memori-sidebar .memori--powered-by {
-    position: relative;
-    z-index: 5;
-    top: auto;
-    right: auto;
-    bottom: auto;
-    left: auto;
-    display: flex;
-    width: 100%;
-    flex-shrink: 0;
+.memori-widget.memori-layout-hidden_chat .memori-conversation-footer {
+    flex-wrap: wrap;
     justify-content: center;
-    padding: 0.35rem 1rem 0.85rem;
-    border-radius: 0;
-    margin: 0;
-    background: var(--memori-secondary-background);
-    transform: none;
+}
+
+.memori-widget.memori-layout-hidden_chat
+    .memori-conversation-footer
+    .memori-chat-inputs--ai-note {
+    overflow: visible;
+    flex: 1 1 100%;
+    text-align: center;
+    text-overflow: unset;
+    white-space: normal;
+}
+
+.memori-widget.memori--active.memori-layout-hidden_chat
+    .memori-conversation-footer
+    .memori-chat-inputs--ai-note {
+    text-align: left;
 }
 
 .memori-sidebar {
@@ -165,10 +142,6 @@
     transition: all 0.3s ease-in-out;
 }
 
-.memori-widget.memori-layout-hidden_chat .memori-sidebar .memori-chat--content {
-    padding: var(--memori-spacing-xl);
-}
-
 .memori-widget.memori-layout-hidden_chat .memori-sidebar .memori-chat-history {
     height: calc(100% - var(--memori-spacing-5xl));
     padding: 0;
@@ -336,6 +309,8 @@
 
 .memori-widget.memori-layout-hidden_chat .memori-sidebar .memori-chat-layout--header {
     width: 100%;
+    max-width: 100%;
+    box-sizing: border-box;
     flex-shrink: 0;
     padding: 0.75rem 1rem;
     border-bottom: 1px solid var(--memori-border-color);
@@ -346,7 +321,10 @@
 
 .memori-widget.memori-layout-hidden_chat .memori-sidebar .memori-chat-layout--header-row {
     display: flex;
+    overflow: hidden;
     width: 100%;
+    min-width: 0;
+    max-width: 100%;
     align-items: center;
     justify-content: space-between;
     gap: 0.75rem;
@@ -354,7 +332,10 @@
 
 .memori-widget.memori-layout-hidden_chat .memori-sidebar .memori-hidden-chat-layout--header-actions {
     display: inline-flex;
-    flex: 0 0 auto;
+    min-width: 0;
+    max-width: 100%;
+    flex: 0 1 auto;
+    flex-shrink: 0;
     align-items: center;
     margin-left: auto;
     gap: 0.35rem;
@@ -445,6 +426,7 @@
     display: flex;
     overflow: hidden;
     min-width: 0;
+    max-width: calc(100% - 7.5rem);
     flex: 1 1 auto;
     align-items: center;
     gap: 0.75rem;
@@ -586,39 +568,33 @@
     color: var(--memori-primary-content, #fff);
 }
 
-/* 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-hidden_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-hidden_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-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-button:hover:not(.memori-icon-button, .memori-icon-button--active, .memori-icon-button--recording, :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),
+    .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-hidden_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-hidden_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/src/components/layouts/layouts.stories.tsx

@@ -43,7 +43,7 @@ DefaultLayout.args = {
   layout: 'ZOOMED_FULL_BODY',
   uiLang: 'IT',
   spokenLang: 'IT',
-  // integrationID: '32922e14-24d6-4f5f-a06b-d963da14a658',
+  integrationID: '32922e14-24d6-4f5f-a06b-d963da14a658',
   showSettings: true,
 };
 

package/src/components/layouts/zoomed-full-body.css

@@ -61,8 +61,7 @@
     margin-left: auto;
     background: transparent;
     gap: var(--memori-spacing-md);
-    transition: background-color var(--memori-motion-duration-fast, 0.15s)
-        var(--memori-motion-ease, ease);
+    transition: background-color var(--memori-motion-duration-fast, 0.15s) var(--memori-motion-ease, ease);
 }
 
 .memori-widget.memori-layout-zoomed_full_body .memori-fullpage-header-row.memori-header--scrolled,
@@ -83,7 +82,7 @@
     min-height: 0;
     flex: 1 1 auto;
     border: none;
-    border-radius: 0;
+    border-radius: var(--memori-radius-box);
     margin-bottom: 0;
     background-color: var(--memori-secondary-background);
 }
@@ -163,7 +162,7 @@
     min-width: 0;
     flex-wrap: nowrap;
     justify-content: flex-end;
-    gap: 0.5rem;
+    gap: 0.75rem;
 }
 
 .memori-widget.memori-layout-zoomed_full_body .memori-header--fullpage-primary,
@@ -313,7 +312,9 @@
 }
 
 /* Hide avatar column when artifact drawer is open */
-.memori-widget.memori-layout-zoomed_full_body .memori-fullpage-content-row:has(.memori--grid-column-artifact--open) .memori--grid-column-left {
+.memori-widget.memori-layout-zoomed_full_body
+    .memori-fullpage-content-row:has(.memori--grid-column-artifact--open)
+    .memori--grid-column-left {
     display: none;
 }
 

package/src/helpers/positionPopover.test.ts

@@ -1,10 +1,16 @@
 import { shouldRestartSessionOnPositionPopoverClose } from './positionPopover';
 
 describe('shouldRestartSessionOnPositionPopoverClose', () => {
-  it('restarts only when closing an open popover with autoStart', () => {
-    expect(shouldRestartSessionOnPositionPopoverClose(true, false, true)).toBe(
-      true
-    );
+  it('restarts only when closing an open popover with autoStart and no session', () => {
+    expect(
+      shouldRestartSessionOnPositionPopoverClose(true, false, true, false)
+    ).toBe(true);
+  });
+
+  it('does not restart when a session is already started', () => {
+    expect(
+      shouldRestartSessionOnPositionPopoverClose(true, false, true, true)
+    ).toBe(false);
   });
 
   it('does not restart when already closed (user/info popover dismiss)', () => {

package/src/helpers/positionPopover.ts

@@ -1,13 +1,16 @@
 /**
  * Whether closing the position popover should re-run autoStart (`onClickStart`).
- * Only true on a real open → closed transition, so incidental
- * `setPositionPopoverOpen(false)` calls (e.g. opening user/info popovers)
- * do not wipe chat history.
+ * Only true on a real open → closed transition when a session has not started yet
+ * (e.g. autostart blocked waiting for position). Closing during an active session
+ * must not wipe chat history.
  */
 export function shouldRestartSessionOnPositionPopoverClose(
   wasOpen: boolean,
   nextOpen: boolean,
-  autoStart: boolean
+  autoStart: boolean,
+  sessionAlreadyStarted = false
 ): boolean {
-  return wasOpen && !nextOpen && !!autoStart;
+  return (
+    wasOpen && !nextOpen && !!autoStart && !sessionAlreadyStarted
+  );
 }

package/src/styles.css

@@ -31,6 +31,7 @@
 @import url('./components/ExpertsDrawer/ExpertsDrawer.css');
 @import url('./components/ExportHistoryButton/ExportHistoryButton.css');
 @import url('./components/FeedbackButtons/FeedbackButtons.css');
+@import url('./components/IconButton/IconButton.css');
 @import url('./components/Header/Header.css');
 @import url('./components/PositionPopover/PositionPopover.css');
 @import url('./components/MediaWidget/MediaItemWidget.css');

package/src/version.ts

@@ -1,2 +1,2 @@
 // This file is auto-generated. Do not edit manually.
-export const version = '9.0.0-alpha.16';
+export const version = '9.0.0-alpha.18';