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

package/src/components/layouts/Totem.test.tsx

@@ -1,4 +1,5 @@
-import { render } from '@testing-library/react';
+import React from 'react';
+import { render } from '../../testUtils';
 import Memori from '../MemoriWidget/MemoriWidget';
 import { integration, memori, tenant } from '../../mocks/data';
 import I18nWrapper from '../../I18nWrapper';

package/src/components/layouts/Totem.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import Spin from '../ui/Spin';
+import { Spin } from '@memori.ai/ui';
 import { LayoutProps } from '../MemoriWidget/MemoriWidget';
 
 const TotemLayout: React.FC<LayoutProps> = ({
@@ -26,11 +26,15 @@ const TotemLayout: React.FC<LayoutProps> = ({
       {poweredBy}
 
       <div className="memori-totem-layout--header">
-        {Header && headerProps && <Header {...headerProps} />}
+        {Header && headerProps && (
+          <Header buttonVariant="outline" {...headerProps} />
+        )}
       </div>
 
       <div className="memori-totem-layout--avatar">
-        {Avatar && avatarProps && <Avatar chatProps={chatProps} {...avatarProps} isTotem />}
+        {Avatar && avatarProps && (
+          <Avatar chatProps={chatProps} {...avatarProps} isTotem />
+        )}
       </div>
 
       <div id="extension" />

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

@@ -0,0 +1,115 @@
+import React from 'react';
+import { Meta, Story } from '@storybook/react';
+import { memori, tenant, integration } from '../../../mocks/data';
+import Memori, { Props } from '../../../index';
+import I18nWrapper from '../../../I18nWrapper';
+import { VisemeProvider } from '../../../context/visemeContext';
+import { ArtifactProvider } from '../../MemoriArtifactSystem/context/ArtifactContext';
+
+const meta: Meta = {
+  title: 'General/Layouts/WebsiteAssistant',
+  component: (args: Props) => (
+    <Memori
+      {...args}
+      engineURL="https://engine.memori.ai"
+      apiURL="https://backend.memori.ai"
+      baseURL="https://www.aisuru.com"
+    />
+  ),
+  argTypes: {},
+  parameters: {
+    controls: { expanded: true },
+    layout: 'fullscreen',
+  },
+};
+
+export default meta;
+
+const Template: Story<Props> = args => (
+  <I18nWrapper>
+    <ArtifactProvider>
+      <VisemeProvider>
+        <Memori {...args} />
+      </VisemeProvider>
+    </ArtifactProvider>
+  </I18nWrapper>
+);
+
+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,
+};
+

package/src/components/layouts/WebsiteAssistant/WebsiteAssistant.test.tsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import { render } from '../../../testUtils';
+import Memori from '../../MemoriWidget/MemoriWidget';
+import { integration, memori, tenant } from '../../../mocks/data';
+import I18nWrapper from '../../../I18nWrapper';
+import { VisemeProvider } from '../../../context/visemeContext';
+import { ArtifactProvider } from '../../MemoriArtifactSystem/context/ArtifactContext';
+
+Object.defineProperty(window, 'matchMedia', {
+  writable: true,
+  value: jest.fn().mockImplementation(query => ({
+    matches: false,
+    media: query,
+    onchange: null,
+    addListener: jest.fn(), // Deprecated
+    removeListener: jest.fn(), // Deprecated
+    addEventListener: jest.fn(),
+    removeEventListener: jest.fn(),
+    dispatchEvent: jest.fn(),
+  })),
+});
+
+it('renders WEBSITE_ASSISTANT layout unchanged', () => {
+  const { container } = render(
+    <I18nWrapper>
+      <ArtifactProvider>
+        <VisemeProvider>
+          <Memori
+            showShare={true}
+            showSettings={true}
+            memori={memori}
+            tenant={tenant}
+            tenantID="aisuru.com"
+            integration={integration}
+            layout="WEBSITE_ASSISTANT"
+          />
+        </VisemeProvider>
+      </ArtifactProvider>
+    </I18nWrapper>
+  );
+  expect(container).toMatchSnapshot();
+});
+

package/src/components/layouts/{WebsiteAssistant.tsx → WebsiteAssistant/WebsiteAssistant.tsx}

@@ -1,9 +1,8 @@
 import React, { useState, useMemo } from 'react';
-import Spin from '../ui/Spin';
-import { LayoutProps } from '../MemoriWidget/MemoriWidget';
-import Button from '../ui/Button';
-import Blob from '../Blob/Blob';
-import Close from '../icons/Close';
+import { Spin, Button } from '@memori.ai/ui';
+import { LayoutProps } from '../../MemoriWidget/MemoriWidget';
+import Blob from '../../Blob/Blob';
+import { X } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
 
 const WebsiteAssistantLayout: React.FC<LayoutProps> = ({
@@ -44,9 +43,11 @@ const WebsiteAssistantLayout: React.FC<LayoutProps> = ({
         <div className="memori-website_assistant--trigger">
           <Button
             className="memori-website_assistant--trigger-button"
-            ghost
+            variant="ghost"
             shape="circle"
             onClick={() => setCollapsed(false)}
+            aria-label={t('expand') || 'Expand'}
+            aria-expanded={false}
             title={t('expand') || 'Expand'}
           >
             <Blob avatar={avatarProps?.memori.avatarURL} />
@@ -67,25 +68,26 @@ const WebsiteAssistantLayout: React.FC<LayoutProps> = ({
               className="memori-website_assistant-layout"
             >
               {poweredBy}
-
-              <div className="memori-website_assistant--close-button-wrapper">
-                <Button
-                  className="memori-website_assistant--close-button"
-                  primary
-                  shape="circle"
-                  onClick={() => setCollapsed(true)}
-                  icon={<Close />}
-                  title={t('close') || 'Close'}
-                />
-              </div>
-
-              {Header && headerProps && (
-                              <Header
+              <div className="memori-website_assistant-layout--header-row">
+                {Header && headerProps && (
+                  <Header
+                    buttonVariant="outline"
                     {...headerProps}
                     showSettings={false}
                     showReload={false}
                   />
-              )}
+                )}
+                <div className="memori-website_assistant--close-button-wrapper">
+                  <Button
+                    className="memori-website_assistant--close-button"
+                    variant="ghost"
+                    onClick={() => setCollapsed(true)}
+                    aria-label={t('close') || 'Close'}
+                    icon={<X aria-hidden />}
+                    title={t('close') || 'Close'}
+                  />
+                </div>
+              </div>
 
               {!(avatar3dHidden === true || avatar3dHidden === 'true') && (
                 <div className="memori-website_assistant-layout--avatar">
@@ -96,7 +98,8 @@ const WebsiteAssistantLayout: React.FC<LayoutProps> = ({
                         avatarProps.integrationConfig
                           ? {
                               ...avatarProps.integrationConfig,
-                              avatarURL: avatarProps.integrationConfig?.avatarURL
+                              avatarURL: avatarProps.integrationConfig
+                                ?.avatarURL
                                 ? `${
                                     avatarProps.integrationConfig?.avatarURL.split(
                                       '#'
@@ -118,7 +121,10 @@ const WebsiteAssistantLayout: React.FC<LayoutProps> = ({
                 {sessionId && hasUserActivatedSpeak && Chat && chatProps ? (
                   <Chat {...chatProps} />
                 ) : startPanelProps ? (
-                  <StartPanel {...startPanelProps} />
+                  <StartPanel
+                    {...startPanelProps}
+                    showFullDescriptionOnMobile={true}
+                  />
                 ) : null}
               </div>
             </Spin>

package/src/components/layouts/WebsiteAssistant/__snapshots__/WebsiteAssistant.test.tsx.snap

@@ -0,0 +1,76 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders WEBSITE_ASSISTANT layout unchanged 1`] = `
+<div>
+  <div
+    class="memori memori-widget memori-layout-website_assistant memori-controls-bottom memori--avatar-readyplayerme memori--with-integration"
+    data-memori-engine-state="{}"
+    data-memori-id="66b4e161-2431-4b21-9b70-d8c27de730ca"
+    data-memori-integration="cb3c4776-7f0b-4f97-a773-c32a5d7a3bf1"
+    data-memori-name="Memori"
+    data-memori-secondary-id="25ced51c-3520-41af-8bbe-222d861b8e32"
+    style="height: 100vh;"
+  >
+    <div
+      class="memori-website_assistant--trigger"
+    >
+      <button
+        aria-expanded="false"
+        aria-label="expand"
+        class="memori-button memori-button--ghost memori-button--md memori-button--circle memori-website_assistant--trigger-button"
+        tabindex="0"
+        title="expand"
+        type="button"
+      >
+        <span
+          class="memori-button__content"
+        >
+          <div
+            class="memori-blob"
+          >
+            <figure>
+              <img
+                alt=""
+                role="presentation"
+                src="https://aisuru.com/images/aisuru/square_logo.png"
+              />
+            </figure>
+            <div
+              class="mainDiv"
+            />
+            <div
+              class="mainDiv"
+            />
+            <div
+              class="mainDiv"
+            />
+            <div
+              class="mainDiv"
+            />
+            <div
+              class="mainDiv"
+            />
+          </div>
+        </span>
+      </button>
+    </div>
+    <div
+      class="memori-website_assistant--collapsed"
+    />
+    <audio
+      id="memori-audio"
+      src="https://aisuru.com/intro.mp3"
+      style="display: none;"
+    />
+  </div>
+  <div
+    aria-atomic="false"
+    aria-label="Notifications"
+    aria-live="polite"
+    aria-relevant="additions text"
+    class="memori-alert-viewport memori-alert-viewport--top-end"
+    role="region"
+    tabindex="-1"
+  />
+</div>
+`;

package/src/components/layouts/{website-assistant.css → WebsiteAssistant/website-assistant.css}

@@ -27,6 +27,10 @@
     transition: all 0.3s ease;
 }
 
+.memori-widget.memori-layout-website_assistant .memori-chat-inputs-wrapper {
+    margin-bottom: var(--memori-spacing-xl);
+}
+
 .memori-website_assistant--trigger-button .memori-blob,
 .memori-website_assistant--trigger-button .memori-blob .mainDiv,
 .memori-website_assistant--trigger-button .memori-blob figure {
@@ -97,13 +101,10 @@
 /* Desktop */
 @media (min-width: 1024px) {
     .memori-website_assistant--trigger-button {
-        width: 96px;
-        height: 96px;
+        width: 96px !important;
+        height: 96px !important;
     }
 
-
-
-
     .memori-website_assistant--trigger-button .memori-blob .mainDiv {
         width: 96px !important;
         height: 96px !important;
@@ -115,10 +116,8 @@
    ============================================ */
 
 .memori-website_assistant--close-button-wrapper {
-    position: absolute;
+    position: relative;
     z-index: 1001;
-    top: 0.75rem;
-    left: 0.75rem;
     flex-shrink: 0;
     transition: transform 0.2s ease;
 }
@@ -133,12 +132,10 @@
     height: 44px !important;
     min-height: 44px !important;
     padding: 0.75rem;
-    border: 2px solid rgba(130, 70, 175, 0.1);
-    border-radius: 50%;
-    -webkit-backdrop-filter: blur(10px);
-    backdrop-filter: blur(10px);
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15), 0 2px 4px rgba(0, 0, 0, 0.1);
-    font-size: 18px;
+    border: none;
+    background-color: var(--memori-main-background);
+    box-shadow: none;
+    color: var(--memori-text-color);
     transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
 }
 
@@ -148,8 +145,7 @@
 
 .memori-widget.memori-layout-website_assistant {
     position: relative;
-    z-index: 2147483647;
-    font-size: 14px;
+    font-size: var(--memori-text-size-small);
 }
 
 /*
@@ -159,22 +155,20 @@
 .memori-drawer.memori-drawer--above-website-assistant,
 .memori-drawer.memori-drawer--above-website-assistant .memori-drawer--backdrop,
 .memori-drawer.memori-drawer--above-website-assistant .memori-drawer--container {
-    z-index: 2147483648;
+    z-index: 2147483000;
 }
 
 .memori-widget.memori-layout-website_assistant .memori-website_assistant--collapsed,
 .memori-widget.memori-layout-website_assistant .memori-website_assistant--expanded {
     position: fixed;
-    z-index: 2147483647;
     right: 0;
     bottom: 0;
     overflow: hidden;
     width: 100vw;
     max-width: 100vw;
-    border-radius: 24px 24px 0 0;
+    border-radius: var(--memori-radius-box) var(--memori-radius-box) 0 0;
     -webkit-backdrop-filter: blur(20px);
     backdrop-filter: blur(20px);
-    background: rgba(255, 255, 255, 0.98);
     box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.12), 0 -2px 8px rgba(0, 0, 0, 0.08);
     transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
 }
@@ -194,8 +188,7 @@
 }
 
 .memori-widget.memori-layout-website_assistant .memori-website_assistant--expanded {
-    overflow: visible;
-    height: min(85vh, calc(100vh - 80px));
+    height: min(85vh, calc(100vh - var(--memori-spacing-5xl)));
     padding: 0.5rem 0rem;
     margin-bottom: 0;
     opacity: 1;
@@ -209,11 +202,11 @@
         right: 0;
         width: 90vw;
         max-width: 480px;
-        border-radius: 24px 0 0 0;
+        border-radius: var(--memori-radius-box) 0 0 0;
     }
 
     .memori-widget.memori-layout-website_assistant .memori-website_assistant--expanded {
-        height: min(75vh, calc(100vh - 80px));
+        height: min(75vh, calc(100vh - var(--memori-spacing-5xl)));
     }
 }
 
@@ -224,7 +217,7 @@
         width: 30vw;
         min-width: 400px;
         max-width: 480px;
-        border-radius: 24px 0 0 0;
+        border-radius: var(--memori-radius-box) 0 0 0;
     }
 
     .memori-widget.memori-layout-website_assistant .memori-website_assistant--expanded {
@@ -281,10 +274,29 @@
 
 .memori-website_assistant-layout .memori--powered-by {
     right: auto;
-    left: 0.75rem;
-    background-color: transparent !important;
-    font-size: 0.75rem;
-    opacity: 0.7;
+    left: 50%;
+    justify-content: center;
+    text-align: center;
+    transform: translateX(-50%);
+}
+
+.memori-widget.memori-layout-website_assistant.memori--avatar-readyplayerme
+    .memori-website_assistant-layout
+    .memori--powered-by,
+.memori-widget.memori-layout-website_assistant.memori--avatar-readyplayerme-full
+    .memori-website_assistant-layout
+    .memori--powered-by,
+.memori-widget.memori-layout-website_assistant.memori--avatar-customglb
+    .memori-website_assistant-layout
+    .memori--powered-by,
+.memori-widget.memori-layout-website_assistant.memori--avatar-customrpm
+    .memori-website_assistant-layout
+    .memori--powered-by {
+    right: auto;
+    left: 1rem;
+    justify-content: flex-start;
+    text-align: left;
+    transform: none;
 }
 
 /* ============================================
@@ -297,7 +309,7 @@
     top: 0.75rem;
     right: 0.75rem;
     padding: 0.5rem;
-    border-radius: 12px;
+    border-radius: var(--memori-radius-box);
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
     text-align: right;
 }
@@ -307,14 +319,13 @@
 }
 
 .memori-website_assistant-layout .memori-header {
-    position: relative;
     z-index: 1000;
     display: inline-flex;
     width: auto;
     height: auto;
-    flex-direction: column;
-    padding: 0.5rem;
-    gap: 0.5rem;
+    flex-direction: row;
+    padding: 0;
+    gap: 0.35rem;
 }
 
 /* Less specific first (no-descending-specificity): single .memori-header--button */
@@ -322,14 +333,25 @@
 .memori-website_assistant-layout .memori-header .memori-share-button {
     margin-top: 0;
     margin-right: 0;
-    margin-left: auto;
+    margin-left: 0;
 }
 
 /* More specific: adjacent sibling (must come after general .memori-header--button rules) */
 .memori-website_assistant-layout .memori-header .memori-header--button + .memori-header--button {
     margin-top: 0;
     margin-right: 0;
-    margin-left: auto;
+    margin-left: 0;
+}
+
+.memori-website_assistant-layout--header-row {
+    position: absolute;
+    z-index: 1001;
+    top: 0.75rem;
+    right: 0.75rem;
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    gap: 0.5rem;
 }
 
 /* Position dropdown below the trigger so it does not cover the share button */
@@ -351,6 +373,7 @@
     position: relative;
     overflow: hidden;
     min-height: 0;
+    max-height: 35vh;
     flex: 1;
     /* Prevent avatar/blob from growing unbounded and overlapping header/controls */
     contain: layout style;
@@ -435,19 +458,17 @@
     flex: 1;
     flex-direction: column;
     padding: 1rem;
-    -webkit-backdrop-filter: blur(10px);
-    backdrop-filter: blur(10px);
-    background: linear-gradient(to top, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.85) 50%, transparent 100%);
+    background-color: var(--memori-secondary-background);
 }
 
 .memori-website_assistant-layout--controls .memori-chat--history,
 .memori-website_assistant-layout--controls .memori-chat--content {
-    background: transparent;
+    background: var(--memori-secondary-background);
 }
 
 .memori-website_assistant-layout--controls .memori-chat--history {
     padding: 0;
-    margin-top: 0;
+    margin-top: var(--memori-spacing-3xl);
     -webkit-backdrop-filter: none;
     backdrop-filter: none;
 }
@@ -469,14 +490,18 @@
     width: 100%;
     max-width: 100%;
     padding: 0;
-    margin: 0 auto;
+    margin: auto;
 }
 
-.memori-wesite_assistant-layout--controls .memori--start-panel {
+.memori-website_assistant-layout--controls .memori--start-panel {
     flex: 1;
     align-content: center;
     align-self: center;
+    padding: 1rem;
     border: 0px;
+    border-radius: var(--memori-radius-box);
+    margin: 0.75rem;
+    margin-bottom: var(--memori-spacing-2xl) !important;
     box-shadow: none !important;
 }
 
@@ -490,12 +515,6 @@
     box-shadow: none !important;
 }
 
-.memori-website_assistant-layout--controls .memori--start-panel {
-    padding: 1rem;
-    border-radius: 16px;
-    margin: 0.75rem;
-}
-
 /* Tablet and up */
 @media (min-width: 601px) {
     .memori-website_assistant-layout--controls .memori--start-panel,
@@ -509,7 +528,7 @@
 
     .memori-website_assistant-layout--controls .memori--start-panel {
         padding: 1.5rem;
-        margin: 1rem;
+        margin: 0 auto;
     }
 }
 
@@ -604,6 +623,11 @@
     }
 }
 
+/* After controls .memori--start-panel rules (no-descending-specificity: 3-class selector wins over 2-class) */
+.memori-widget.memori-layout-website_assistant .memori--start-panel {
+    border: none;
+}
+
 @media (max-width: 768px) {
     .memori-website_assistant--trigger-button {
         width: 80px !important;
@@ -631,14 +655,6 @@
     }
 }
 
-@media (max-width: 870px) {
-    .memori-website_assistant-layout .memori-header {
-        max-width: 64px;
-        margin-right: 1rem;
-        margin-left: auto;
-    }
-}
-
 /* ============================================
    ACCESSIBILITY & PERFORMANCE
    ============================================ */

package/src/components/layouts/ZoomedFullBody.test.tsx

@@ -1,4 +1,5 @@
-import { render } from '@testing-library/react';
+import React from 'react';
+import { render } from '../../testUtils';
 import Memori from '../MemoriWidget/MemoriWidget';
 import { integration, memori, tenant } from '../../mocks/data';
 import I18nWrapper from '../../I18nWrapper';