@memori.ai/memori-react 9.0.0-alpha.2 → 9.0.0-alpha.21

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

@@ -11,11 +11,13 @@
 }
 
 .memori-widget.memori-layout-hidden_chat .memori-chat--history {
-    background: transparent;
+    background: var(--memori-secondary-background);
 }
 
-.memori-widget.memori-layout-hidden_chat .memori-chat--bubble {
-    background-color: var(--memori-secondary-background);
+.memori-widget.memori-layout-hidden_chat .memori-chat--bubble:not(.memori-chat--user-bubble) {
+    border: none;
+    /* background-color: var(--memori-secondary-background); */
+    box-shadow: none;
 }
 
 .memori-widget.memori-layout-hidden_chat .memori-media-item--document {
@@ -42,7 +44,10 @@
     justify-content: center;
     padding: var(--memori-spacing-sm);
     border-radius: var(--memori-radius-box) 0 0 var(--memori-radius-box);
-    background-color: var(--memori-primary);
+    /* Prefer --memori-primary-color: dark theme remaps --memori-primary to
+       --memori-primary-hover, which can circularly resolve to an invalid value. */
+    background-color: var(--memori-primary-color, var(--memori-primary));
+    color: var(--memori-primary-content, #fff);
     cursor: pointer;
     font-size: var(--memori-text-size-large);
     font-weight: var(--memori-text-weight-semibold);
@@ -65,6 +70,68 @@
     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.
+   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-website_assistant--close-button {
+    position: relative;
+    z-index: 2;
+    top: auto;
+    right: auto;
+    flex-shrink: 0;
+    border-color: color-mix(in srgb, var(--memori-text-color, #111827) 28%, transparent);
+    color: var(--memori-text-color, #111827);
+    opacity: 1;
+    pointer-events: auto;
+    visibility: visible;
+}
+
+.memori-button--icon > svg {
+    margin: 0;
+}
+
+.memori-icon,
+.memori-icon-close {
+    width: var(--memori-spacing-xl);
+    height: var(--memori-spacing-xl);
+    stroke: currentColor;
+}
+
+.memori-icon {
+    stroke: #fff;
+}
+
+.memori-icon-close {
+    fill: none;
+}
+
+/* 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;
+}
+
+.memori-widget.memori-layout-hidden_chat .memori-conversation-footer {
+    flex-wrap: wrap;
+    justify-content: center;
+}
+
+.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 {
     position: fixed;
     z-index: 1000;
@@ -72,15 +139,11 @@
     right: calc(-1 * var(--memori-hidden-chat-width));
     width: var(--memori-hidden-chat-width);
     height: 100%;
-    background-color: var(--memori-main-background, #fff);
+    background-color: var(--memori-secondary-background);
     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;
@@ -89,15 +152,42 @@
 }
 
 .memori-widget.memori-layout-hidden_chat .memori-chat-inputs {
-    background: var(--memori-secondary-background);
+    background: transparent;
+}
+
+/* Input bar styles (dark compact pill) live in ChatInputs.css.
+   Keep the bar full-width at the bottom of the sidebar column. */
+.memori-widget.memori-layout-hidden_chat .memori-sidebar .memori-chat--wrapper {
+    display: flex;
+    min-height: 0;
+    flex: 1;
+    flex-direction: column;
+}
+
+.memori-widget.memori-layout-hidden_chat .memori-sidebar .memori-chat--history {
+    min-height: 0;
+    flex: 1 1 auto;
+    margin-bottom: 0;
 }
 
-.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-sidebar
+    .memori-chat--content--has-global-background,
+.memori-widget.memori-layout-hidden_chat
+    .memori-sidebar
+    .memori-chat--history:has(.memori-chat--content--has-global-background) {
+    background: transparent;
 }
 
-.memori-widget.memori-layout-hidden_chat .memori--start-description {
-    margin-top: auto;
+.memori-widget.memori-layout-hidden_chat .memori-sidebar .memori-chat-inputs-wrapper {
+    width: 100%;
+    flex-shrink: 0;
+    background: var(--memori-secondary-background);
+}
+
+.memori-widget.memori-layout-hidden_chat .memori-sidebar .memori-chat-layout--prechat-inputs {
+    width: 100%;
+    flex-shrink: 0;
 }
 
 /* Fullscreen styles */
@@ -109,7 +199,7 @@
     box-shadow: none;
 }
 
-.memori-sidebar-fullscreen .memori-close-label {
+.memori-sidebar-fullscreen .memori-close-label:not(.memori-hidden-chat-layout--header-close) {
     z-index: 1100;
     top: var(--memori-spacing-sm);
     right: var(--memori-spacing-sm);
@@ -192,8 +282,9 @@
     right: 0;
 }
 
+/* Keep in sync with ArtifactDrawer split width (55% / --memori-modal-size-md override) */
 .memori-sidebar-toggle-artifact:checked ~ .memori-sidebar-container .memori-sidebar {
-    right: 46%;
+    right: 55%;
 }
 
 .memori-sidebar-toggle:checked ~ .memori-sidebar-container .memori-open-label {
@@ -216,9 +307,11 @@
 
 .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 rgba(0, 0, 0, 0.06);
+    border-bottom: 1px solid var(--memori-border-color);
     margin-bottom: 0;
     background: var(--memori-secondary-background);
     text-align: left;
@@ -226,7 +319,10 @@
 
 .memori-widget.memori-layout-hidden_chat .memori-sidebar .memori-chat-layout--header-row {
     display: flex;
+    overflow: visible;
     width: 100%;
+    min-width: 0;
+    max-width: 100%;
     align-items: center;
     justify-content: space-between;
     gap: 0.75rem;
@@ -235,6 +331,7 @@
 .memori-widget.memori-layout-hidden_chat .memori-sidebar .memori-hidden-chat-layout--header-actions {
     display: inline-flex;
     flex: 0 0 auto;
+    flex-shrink: 0;
     align-items: center;
     margin-left: auto;
     gap: 0.35rem;
@@ -251,10 +348,13 @@
 }
 
 @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-chat-layout--brand-avatar {
+        width: 32px;
+        height: 32px;
+    }
+
+    .memori-widget.memori-layout-hidden_chat .memori-sidebar .memori-chat-layout--brand-name {
+        font-size: 0.9375rem;
     }
 }
 
@@ -310,11 +410,18 @@
     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 {
+/* `.memori-header` defaults to width:100%; inside header-actions that pushes the close
+   button off-screen — constrain it to its icon row only. */
+.memori-widget.memori-layout-hidden_chat
+    .memori-sidebar
+    .memori-hidden-chat-layout--header-actions
+    .memori-header {
     width: auto;
     min-width: 0;
-    flex: 0 1 auto;
+    height: auto;
+    flex: 0 0 auto;
+    margin-left: 0;
+    padding-inline: 0;
 }
 
 .memori-widget.memori-layout-hidden_chat .memori-header--position .memori-header--position-placeName {
@@ -325,7 +432,7 @@
     display: flex;
     overflow: hidden;
     min-width: 0;
-    flex: 1 1 auto;
+    flex: 1 1 0;
     align-items: center;
     gap: 0.75rem;
 }
@@ -370,8 +477,14 @@
     flex: 1;
     flex-direction: column;
     align-items: stretch;
-    padding: 0.75rem 1rem 0.75rem;
-    background: var(--memori-main-background);
+    padding: 0;
+    background: var(--memori-secondary-background);
+}
+
+.memori-widget.memori-layout-hidden_chat
+    .memori-sidebar
+    .memori-chat-layout--body:has(.memori-chat--content--has-global-background) {
+    background: transparent;
 }
 
 .memori-widget.memori-layout-hidden_chat .memori-sidebar .memori-chat-layout--start-shell {
@@ -411,25 +524,11 @@
 }
 
 .memori-widget.memori-layout-hidden_chat .memori-sidebar .memori-chat-layout--body .memori--title-container {
-    flex-direction: column;
-    align-items: center;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    align-items: flex-start;
     padding-top: 1rem;
-    text-align: center;
-}
-
-.memori-button--icon > svg {
-    margin: 0;
-}
-
-.memori-icon,
-.memori-icon-close {
-    width: var(--memori-spacing-xl);
-    height: var(--memori-spacing-xl);
-    stroke: #fff;
-}
-
-.memori-icon-close {
-    fill: var(--memori-main-background, #fff);
+    text-align: left;
 }
 
 @media (max-width: 768px) {
@@ -437,6 +536,10 @@
         display: none;
     } */
 
+    .memori-widget.memori-layout-hidden_chat .memori-sidebar .memori-hidden-chat-layout--header-close {
+        z-index: 3;
+    }
+
     .memori-sidebar {
         right: -100%;
         width: 100%;
@@ -465,39 +568,43 @@
     }
 }
 
-/* Dark theme: header controls — white outline and icon (incl. share + position popover) */
+/* Dark theme: keep open/floating toggle on a solid primary fill */
+.memori-widget.memori-layout-hidden_chat[data-theme='dark']
+    .memori-sidebar-toggle-label:not(.memori-hidden-chat-layout--header-close),
+[data-theme='dark']
+    .memori-widget.memori-layout-hidden_chat
+    .memori-sidebar-toggle-label:not(.memori-hidden-chat-layout--header-close) {
+    background-color: var(--memori-primary-color, var(--memori-primary));
+    color: var(--memori-primary-content, #fff);
+}
+
+/* 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),
+    .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: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),
 [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) {
+    .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;
 }
@@ -514,8 +621,11 @@
     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;
+.memori-widget.memori-layout-hidden_chat[data-theme='dark']
+    .memori-hidden-chat-layout--header-close.memori-website_assistant--close-button,
+[data-theme='dark']
+    .memori-widget.memori-layout-hidden_chat
+    .memori-hidden-chat-layout--header-close.memori-website_assistant--close-button {
+    border-color: #fff;
     color: #fff;
 }

package/src/components/layouts/layouts.stories.tsx

@@ -1,7 +1,9 @@
 import React from 'react';
 import { Meta, Story } from '@storybook/react';
+import { Spin } from '@memori.ai/ui';
 import { memori, tenant, integration } from '../../mocks/data';
 import Memori, { Props } from '../../index';
+import { LayoutProps } from '../MemoriWidget/MemoriWidget';
 import I18nWrapper from '../../I18nWrapper';
 import { VisemeProvider } from '../../context/visemeContext';
 import { ArtifactProvider } from '../MemoriArtifactSystem/context/ArtifactContext';
@@ -31,24 +33,18 @@ const Template: Story<Props> = args => (
 const DefaultLayout = Template.bind({});
 DefaultLayout.args = {
   memoriName: 'Layout Storybook',
-  ownerUserName: 'andrea.patini',
+  ownerUserName: 'Andrea-Patini',
   memoriID: 'ae20fc5a-cc15-4db9-b7dd-2cd4a621b85e',
   ownerUserID: '91dbc9ba-b684-4fbe-9828-b5980af6cda9',
   tenantID: 'aisuru-staging.aclambda.online',
   engineURL: 'https://engine-staging.memori.ai/memori/v2',
   apiURL: 'https://backend-staging.memori.ai/api/v2',
-  layout: 'FULLPAGE',
+  // baseURL: 'http://localhost:3000',
+  layout: 'ZOOMED_FULL_BODY',
   uiLang: 'IT',
   spokenLang: 'IT',
-  integrationID: '0b1256c1-530c-4e67-aef8-36667c8887bb',
-  autoStart: false,
-  sessionID: '' as string | undefined,
-  showUpload: true,
-  showReasoning: false,
-  showLogin: true,
-  multilingual: true,
-  avatar3dHidden: true,
-  showMessageConsumption: true,
+  integrationID: '32922e14-24d6-4f5f-a06b-d963da14a658',
+  showSettings: true,
 };
 
 export const Default = Template.bind({});
@@ -62,7 +58,7 @@ Totem.args = {
   uiLang: 'it',
   showShare: true,
   showSettings: true,
-  memori: memori,
+  // memori: memori,
   integration: {
     ...integration,
   },
@@ -82,6 +78,130 @@ ChatOnly.args = {
   layout: 'CHAT',
 };
 
+const CustomLayout: React.FC<LayoutProps> = ({
+  Header,
+  headerProps,
+  Avatar,
+  avatarProps,
+  Chat,
+  chatProps,
+  StartPanel,
+  startPanelProps,
+  integrationStyle,
+  integrationBackground,
+  sessionId,
+  hasUserActivatedSpeak,
+  loading = false,
+  poweredBy,
+}) => (
+  <>
+    {integrationStyle}
+    {integrationBackground}
+
+    <Spin spinning={loading} className="memori-mycustom-layout">
+      {poweredBy}
+
+      <div className="memori-mycustom-layout--controls">
+        {sessionId && hasUserActivatedSpeak && Chat && chatProps ? (
+          <Chat {...chatProps} />
+        ) : startPanelProps ? (
+          <StartPanel {...startPanelProps} />
+        ) : null}
+      </div>
+    </Spin>
+  </>
+);
+
+export const Custom = Template.bind({});
+Custom.args = {
+  ...DefaultLayout.args,
+  uiLang: 'it',
+  showShare: true,
+  showSettings: true,
+  memori: memori,
+  tenant,
+  layout: 'FULLPAGE',
+  customLayout: CustomLayout,
+};
+
+export const WebsiteAssistant2 = Template.bind({});
+WebsiteAssistant2.args = {
+  memoriName: 'Marconi Express',
+  ownerUserName: 'exmita',
+  memoriID: '1755979f-28f1-45d1-8f41-bb34e1f7756b',
+  ownerUserID: '3194fcd3-040b-4d5e-a925-691911fb1177',
+  tenantID: 'exmachina.aclambda.online',
+  engineURL: 'https://engine.memori.ai',
+  apiURL: 'https://backend.memori.ai',
+  baseURL: 'https://exmachina.aclambda.online',
+  uiLang: 'IT',
+  avatar3dHidden: true,
+  spokenLang: 'IT',
+  layout: 'WEBSITE_ASSISTANT',
+};
+
+export const WebsiteAssistant3 = Template.bind({});
+WebsiteAssistant3.args = {
+  memoriName: 'Layout Storybook',
+  ownerUserName: 'Andrea-Patini',
+  memoriID: 'ae20fc5a-cc15-4db9-b7dd-2cd4a621b85e',
+  ownerUserID: '91dbc9ba-b684-4fbe-9828-b5980af6cda9',
+  tenantID: 'aisuru-staging.aclambda.online',
+  engineURL: 'https://engine-staging.memori.ai/memori/v2',
+  apiURL: 'https://backend-staging.memori.ai/api/v2',
+  baseURL: 'http://localhost:3000',
+  layout: 'WEBSITE_ASSISTANT',
+  avatar3dHidden: true,
+  uiLang: 'IT',
+  spokenLang: 'IT',
+  showOnlyLastMessages: true,
+  integrationID: '716f4728-919c-4015-aae1-88998a081c6f',
+};
+
+export const WebsiteAssistant = Template.bind({});
+WebsiteAssistant.args = {
+  uiLang: 'EN',
+  showShare: false,
+  showSettings: true,
+  memori: memori,
+  tenant,
+  layout: 'WEBSITE_ASSISTANT',
+  memoriName: 'Memori',
+  memoriID: '25ced51c-3520-41af-8bbe-222d861b8e32',
+  ownerUserName: 'memoridev',
+  tenantID: 'www.aisuru.com',
+  apiURL: 'https://backend.memori.ai',
+  baseURL: 'https://www.aisuru.com',
+  spokenLang: 'EN',
+  context: {
+    SOURCE: 'WEBSITE',
+    PATH: '/en/',
+  },
+  multilingual: true,
+  integrationID: 'cb3c4776-7f0b-4f97-a773-c32a5d7a3bf1',
+  integration: {
+    ...integration,
+    customData: JSON.stringify({
+      textColor: '#2a2a2a',
+      buttonBgColor: '#653165',
+      buttonTextColor: '#ffffff',
+      blurBackground: true,
+      innerBgColor: 'light',
+      innerBgAlpha: 0.8,
+      multilanguage: true,
+      avatar: 'readyplayerme',
+      avatarURL:
+        'https://assets.memori.ai/api/v2/asset/b791f77c-1a94-4272-829e-eca82fcc62b7.glb',
+    }),
+  },
+};
+
+export const WebsiteAssistantWithout3DAvatar = Template.bind({});
+WebsiteAssistantWithout3DAvatar.args = {
+  ...WebsiteAssistant.args,
+  avatar3dHidden: true,
+};
+
 export const HiddenChat = Template.bind({});
 HiddenChat.args = {
   ...DefaultLayout.args,
@@ -103,10 +223,10 @@ ZoomedFullBody.args = {
   tenantID: 'aisuru-staging.aclambda.online',
   engineURL: 'https://engine-staging.memori.ai/memori/v2',
   apiURL: 'https://backend-staging.memori.ai/api/v2',
-  baseURL: 'http://localhost:3000',
-  layout: 'FULLPAGE',
+  // baseURL: 'http://localhost:3000',
+  layout: 'ZOOMED_FULL_BODY',
   uiLang: 'IT',
   spokenLang: 'IT',
   integrationID: '32922e14-24d6-4f5f-a06b-d963da14a658',
-  showSettings: true
+  showSettings: true,
 };