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

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

@@ -70,42 +70,17 @@
     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;
     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);
 }
 
 .memori-button--icon > svg {
@@ -127,30 +102,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 +140,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;
@@ -586,39 +557,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-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: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),
+    .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);
 }
@@ -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/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.17';