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

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

@@ -1,48 +1,38 @@
-import React from 'react';
-import { Meta, Story } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react';
 import { tenant } from '../../../mocks/data';
-import { Props } from '../../MemoriWidget/MemoriWidget';
-import Memori from '../../../index';
-import I18nWrapper from '../../../I18nWrapper';
-import { VisemeProvider } from '../../../context/visemeContext';
-import { ArtifactProvider } from '../../MemoriArtifactSystem/context/ArtifactContext';
+import Memori, { Props } from '../../../index';
+import { withWidgetProviders } from '../../../../.storybook/decorators';
 
-const meta: Meta = {
-  title: 'General/Layouts/FullBody',
-  component: (args: Props) => <Memori {...args}    />,
-  argTypes: {},
+/**
+ * FULLPAGE layout with Ready Player Me avatar configurations.
+ * (Folder name "FullBody" is historical — layout prop is always FULLPAGE.)
+ */
+const meta = {
+  title: 'Layouts/FullPage',
+  component: Memori,
+  decorators: [withWidgetProviders],
   parameters: {
     controls: { expanded: true },
     layout: 'fullscreen',
   },
-};
+} satisfies Meta<typeof Memori>;
 
 export default meta;
+type Story = StoryObj<typeof meta>;
 
-
-const Template: Story<Props> = args => (
-  <I18nWrapper>
-    <ArtifactProvider>
-      <VisemeProvider>
-        <Memori {...args} />
-      </VisemeProvider>
-    </ArtifactProvider>
-  </I18nWrapper>
-);
-
-const DefaultLayout = Template.bind({});
-DefaultLayout.args = {
-  emoriName: 'Layout Storybook',
+const stagingBase: Partial<Props> = {
+  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',
-  layout: 'FULL_CHAT',
+  layout: 'FULLPAGE',
   uiLang: 'IT',
   spokenLang: 'IT',
   integrationID: '0b1256c1-530c-4e67-aef8-36667c8887bb',
+  tenant,
 };
 
 const baseIntegration = {
@@ -58,53 +48,50 @@ const baseIntegration = {
   lastChangeTimestamp: '2022-06-13T14:44:52.833573Z',
 };
 
-export const FullBodyWithFullBodyAvatar = Template.bind({});
-FullBodyWithFullBodyAvatar.args = {
-    ...DefaultLayout.args,
+export const WithFullBodyAvatar: Story = {
+  args: {
+    ...stagingBase,
     avatar3DURL:
       'https://assets-staging.memori.ai/api/v2/asset/c0bb0d40-aebf-4e58-bfa0-45a4d7935153.glb#1763646903757',
-  integration: {
-    ...baseIntegration,
-    customData: JSON.stringify({
-      textColor: '#000000',
-      buttonBgColor: '#007eb6',
-      buttonTextColor: '#ffffff',
-      blurBackground: true,
-      innerBgColor: 'light',
-      multilanguage: true,
-      avatar: 'readyplayerme-full',
-      avatarURL:
-        'https://assets-staging.memori.ai/api/v2/asset/c0bb0d40-aebf-4e58-bfa0-45a4d7935153.glb#1763646903757',
-      name: 'Layout Storybook',
-      showShare: true,
-    }),
+    integration: {
+      ...baseIntegration,
+      customData: JSON.stringify({
+        textColor: '#000000',
+        buttonBgColor: '#007eb6',
+        buttonTextColor: '#ffffff',
+        blurBackground: true,
+        innerBgColor: 'light',
+        multilanguage: true,
+        avatar: 'readyplayerme-full',
+        avatarURL:
+          'https://assets-staging.memori.ai/api/v2/asset/c0bb0d40-aebf-4e58-bfa0-45a4d7935153.glb#1763646903757',
+        name: 'Layout Storybook',
+        showShare: true,
+      }),
+    },
   },
-  tenant,
-  layout: 'FULLPAGE',
 };
 
-export const FullBodyWithHalfBodyAvatar = Template.bind({});
-FullBodyWithHalfBodyAvatar.args = {
-    ...DefaultLayout.args,
+export const WithHalfBodyAvatar: Story = {
+  args: {
+    ...stagingBase,
     avatar3DURL:
       'https://assets.memori.ai/api/v2/asset/acc38f4a-e4c3-4a21-9818-c3d1672820ea.glb#1762875973109',
-  integration: {
-    ...baseIntegration,
-    customData: JSON.stringify({
-      textColor: '#000000',
-      buttonBgColor: '#007eb6',
-      buttonTextColor: '#ffffff',
-      blurBackground: true,
-      innerBgColor: 'light',
-      multilanguage: true,
-      avatar: 'readyplayerme',
-      avatarURL:
-        'https://assets.memori.ai/api/v2/asset/acc38f4a-e4c3-4a21-9818-c3d1672820ea.glb#1762875973109',
-      name: 'Layout Storybook',
-      showShare: true,
-    }),
+    integration: {
+      ...baseIntegration,
+      customData: JSON.stringify({
+        textColor: '#000000',
+        buttonBgColor: '#007eb6',
+        buttonTextColor: '#ffffff',
+        blurBackground: true,
+        innerBgColor: 'light',
+        multilanguage: true,
+        avatar: 'readyplayerme',
+        avatarURL:
+          'https://assets.memori.ai/api/v2/asset/acc38f4a-e4c3-4a21-9818-c3d1672820ea.glb#1762875973109',
+        name: 'Layout Storybook',
+        showShare: true,
+      }),
+    },
   },
-  tenant,
-  layout: 'FULLPAGE',
 };
-

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

@@ -1,48 +1,34 @@
-import React from 'react';
-import { Meta, Story } from '@storybook/react';
-import { memori, tenant } from '../../../mocks/data';
-import { Props } from '../../MemoriWidget/MemoriWidget';
-import Memori from '../../../index';
-import I18nWrapper from '../../../I18nWrapper';
-import { VisemeProvider } from '../../../context/visemeContext';
-import { ArtifactProvider } from '../../MemoriArtifactSystem/context/ArtifactContext';
+import type { Meta, StoryObj } from '@storybook/react';
+import { tenant } from '../../../mocks/data';
+import Memori, { Props } from '../../../index';
+import { withWidgetProviders } from '../../../../.storybook/decorators';
 
-const meta: Meta = {
-  title: 'General/Layouts/Totem',
-  component: (args: Props) => <Memori {...args} engineURL="https://engine.memori.ai" apiURL="https://backend.memori.ai" baseURL="https://www.aisuru.com"    />,
-  argTypes: {},
+const meta = {
+  title: 'Layouts/Totem',
+  component: Memori,
+  decorators: [withWidgetProviders],
   parameters: {
     controls: { expanded: true },
     layout: 'fullscreen',
   },
-};
+} satisfies Meta<typeof Memori>;
 
 export default meta;
+type Story = StoryObj<typeof meta>;
 
-
-const Template: Story<Props> = args => (
-  <I18nWrapper>
-    <ArtifactProvider>
-      <VisemeProvider>
-        <Memori {...args} />
-      </VisemeProvider>
-    </ArtifactProvider>
-  </I18nWrapper>
-);
-
-const DefaultLayout = Template.bind({});
-DefaultLayout.args = {
-  emoriName: 'Layout Storybook',
+const stagingBase: Partial<Props> = {
+  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',
-  layout: 'FULL_CHAT',
+  layout: 'TOTEM',
   uiLang: 'IT',
   spokenLang: 'IT',
   integrationID: '0b1256c1-530c-4e67-aef8-36667c8887bb',
+  tenant,
 };
 
 const baseIntegration = {
@@ -58,74 +44,70 @@ const baseIntegration = {
   lastChangeTimestamp: '2022-06-13T14:44:52.833573Z',
 };
 
-export const TotemWithFullBodyAvatar = Template.bind({});
-TotemWithFullBodyAvatar.args = {
-    ...DefaultLayout.args,
+export const WithFullBodyAvatar: Story = {
+  args: {
+    ...stagingBase,
     avatar3DURL:
       'https://assets-staging.memori.ai/api/v2/asset/c0bb0d40-aebf-4e58-bfa0-45a4d7935153.glb#1763646903757',
-  integration: {
-    ...baseIntegration,
-    customData: JSON.stringify({
-      textColor: '#000000',
-      buttonBgColor: '#007eb6',
-      buttonTextColor: '#ffffff',
-      blurBackground: true,
-      innerBgColor: 'light',
-      multilanguage: true,
-      avatar: 'readyplayerme-full',
-      avatarURL:
-        'https://assets-staging.memori.ai/api/v2/asset/c0bb0d40-aebf-4e58-bfa0-45a4d7935153.glb#1763646903757',
-      name: 'Layout Storybook',
-      showShare: true,
-    }),
+    integration: {
+      ...baseIntegration,
+      customData: JSON.stringify({
+        textColor: '#000000',
+        buttonBgColor: '#007eb6',
+        buttonTextColor: '#ffffff',
+        blurBackground: true,
+        innerBgColor: 'light',
+        multilanguage: true,
+        avatar: 'readyplayerme-full',
+        avatarURL:
+          'https://assets-staging.memori.ai/api/v2/asset/c0bb0d40-aebf-4e58-bfa0-45a4d7935153.glb#1763646903757',
+        name: 'Layout Storybook',
+        showShare: true,
+      }),
+    },
   },
-  tenant,
-  layout: 'TOTEM',
 };
 
-export const TotemWithHalfBodyAvatar = Template.bind({});
-TotemWithHalfBodyAvatar.args = {
-    ...DefaultLayout.args,
+export const WithHalfBodyAvatar: Story = {
+  args: {
+    ...stagingBase,
     avatar3DURL:
       'https://assets.memori.ai/api/v2/asset/acc38f4a-e4c3-4a21-9818-c3d1672820ea.glb#1762875973109',
-  integration: {
-    ...baseIntegration,
-    customData: JSON.stringify({
-      textColor: '#000000',
-      buttonBgColor: '#007eb6',
-      buttonTextColor: '#ffffff',
-      blurBackground: true,
-      innerBgColor: 'light',
-      multilanguage: true,
-      avatar: 'readyplayerme',
-      avatarURL:
-        'https://assets.memori.ai/api/v2/asset/acc38f4a-e4c3-4a21-9818-c3d1672820ea.glb#1762875973109',
-      name: 'Layout Storybook',
-      showShare: true,
-    }),
+    integration: {
+      ...baseIntegration,
+      customData: JSON.stringify({
+        textColor: '#000000',
+        buttonBgColor: '#007eb6',
+        buttonTextColor: '#ffffff',
+        blurBackground: true,
+        innerBgColor: 'light',
+        multilanguage: true,
+        avatar: 'readyplayerme',
+        avatarURL:
+          'https://assets.memori.ai/api/v2/asset/acc38f4a-e4c3-4a21-9818-c3d1672820ea.glb#1762875973109',
+        name: 'Layout Storybook',
+        showShare: true,
+      }),
+    },
   },
-  tenant,
-  layout: 'TOTEM',
 };
 
-export const TotemWithDefaultTotem = Template.bind({});
-TotemWithDefaultTotem.args = {
-  ...DefaultLayout.args,
-  integration: {
-    ...baseIntegration,
-    customData: JSON.stringify({
-      textColor: '#000000',
-      buttonBgColor: '#007eb6',
-      buttonTextColor: '#ffffff',
-      blurBackground: true,
-      innerBgColor: 'light',
-      multilanguage: true,
-      avatar: 'default_totem',
-      name: 'Layout Storybook',
-      showShare: true,
-    }),
+export const WithDefaultTotem: Story = {
+  args: {
+    ...stagingBase,
+    integration: {
+      ...baseIntegration,
+      customData: JSON.stringify({
+        textColor: '#000000',
+        buttonBgColor: '#007eb6',
+        buttonTextColor: '#ffffff',
+        blurBackground: true,
+        innerBgColor: 'light',
+        multilanguage: true,
+        avatar: 'default_totem',
+        name: 'Layout Storybook',
+        showShare: true,
+      }),
+    },
   },
-  tenant,
-  layout: 'TOTEM',
 };
-

package/src/components/layouts/WebsiteAssistant/website-assistant.css

@@ -152,13 +152,13 @@
 }
 
 /*
- * Login and Position drawers are portaled to body by Headless UI.
- * When layout is WEBSITE_ASSISTANT we pass drawerClassName so they sit above the fixed panel.
+ * Drawers portal into the widget surface (containment). Host-page float for the
+ * trigger stays high; do not inflate Drawer z-index here.
  */
 .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: 2147483000;
+    z-index: 1400;
 }
 
 .memori-widget.memori-layout-website_assistant .memori-website_assistant--collapsed,

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

@@ -1,48 +1,34 @@
-import React from 'react';
-import { Meta, Story } from '@storybook/react';
-import { memori, tenant } from '../../../mocks/data';
-import { Props } from '../../MemoriWidget/MemoriWidget';
-import Memori from '../../../index';
-import I18nWrapper from '../../../I18nWrapper';
-import { VisemeProvider } from '../../../context/visemeContext';
-import { ArtifactProvider } from '../../MemoriArtifactSystem/context/ArtifactContext';
+import type { Meta, StoryObj } from '@storybook/react';
+import { tenant } from '../../../mocks/data';
+import Memori, { Props } from '../../../index';
+import { withWidgetProviders } from '../../../../.storybook/decorators';
 
-const meta: Meta = {
-  title: 'General/Layouts/ZoomedFullBody',
-  component: (args: Props) => <Memori {...args} engineURL="https://engine.memori.ai" apiURL="https://backend.memori.ai" baseURL="https://www.aisuru.com"    />,
-  argTypes: {},
+const meta = {
+  title: 'Layouts/ZoomedFullBody',
+  component: Memori,
+  decorators: [withWidgetProviders],
   parameters: {
     controls: { expanded: true },
     layout: 'fullscreen',
   },
-};
+} satisfies Meta<typeof Memori>;
 
 export default meta;
+type Story = StoryObj<typeof meta>;
 
-
-const Template: Story<Props> = args => (
-  <I18nWrapper>
-    <ArtifactProvider>
-      <VisemeProvider>
-        <Memori {...args} />
-      </VisemeProvider>
-    </ArtifactProvider>
-  </I18nWrapper>
-);
-
-const DefaultLayout = Template.bind({});
-DefaultLayout.args = {
-  emoriName: 'Layout Storybook',
+const stagingBase: Partial<Props> = {
+  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',
-  layout: 'FULL_CHAT',
+  layout: 'ZOOMED_FULL_BODY',
   uiLang: 'IT',
   spokenLang: 'IT',
   integrationID: '0b1256c1-530c-4e67-aef8-36667c8887bb',
+  tenant,
 };
 
 const baseIntegration = {
@@ -58,74 +44,70 @@ const baseIntegration = {
   lastChangeTimestamp: '2022-06-13T14:44:52.833573Z',
 };
 
-export const ZoomedFullBodyWithFullBodyAvatar = Template.bind({});
-ZoomedFullBodyWithFullBodyAvatar.args = {
-    ...DefaultLayout.args,
+export const WithFullBodyAvatar: Story = {
+  args: {
+    ...stagingBase,
     avatar3DURL:
       'https://assets-staging.memori.ai/api/v2/asset/c0bb0d40-aebf-4e58-bfa0-45a4d7935153.glb#1763646903757',
-  integration: {
-    ...baseIntegration,
-    customData: JSON.stringify({
-      textColor: '#000000',
-      buttonBgColor: '#007eb6',
-      buttonTextColor: '#ffffff',
-      blurBackground: true,
-      innerBgColor: 'light',
-      multilanguage: true,
-      avatar: 'readyplayerme-full',
-      avatarURL:
-        'https://assets-staging.memori.ai/api/v2/asset/c0bb0d40-aebf-4e58-bfa0-45a4d7935153.glb#1763646903757',
-      name: 'Layout Storybook',
-      showShare: true,
-    }),
+    integration: {
+      ...baseIntegration,
+      customData: JSON.stringify({
+        textColor: '#000000',
+        buttonBgColor: '#007eb6',
+        buttonTextColor: '#ffffff',
+        blurBackground: true,
+        innerBgColor: 'light',
+        multilanguage: true,
+        avatar: 'readyplayerme-full',
+        avatarURL:
+          'https://assets-staging.memori.ai/api/v2/asset/c0bb0d40-aebf-4e58-bfa0-45a4d7935153.glb#1763646903757',
+        name: 'Layout Storybook',
+        showShare: true,
+      }),
+    },
   },
-  tenant,
-  layout: 'ZOOMED_FULL_BODY',
 };
 
-export const ZoomedFullBodyWithHalfBodyAvatar = Template.bind({});
-ZoomedFullBodyWithHalfBodyAvatar.args = {
-    ...DefaultLayout.args,
+export const WithHalfBodyAvatar: Story = {
+  args: {
+    ...stagingBase,
     avatar3DURL:
       'https://assets.memori.ai/api/v2/asset/acc38f4a-e4c3-4a21-9818-c3d1672820ea.glb#1762875973109',
-  integration: {
-    ...baseIntegration,
-    customData: JSON.stringify({
-      textColor: '#000000',
-      buttonBgColor: '#007eb6',
-      buttonTextColor: '#ffffff',
-      blurBackground: true,
-      innerBgColor: 'light',
-      multilanguage: true,
-      avatar: 'readyplayerme',
-      avatarURL:
-        'https://assets.memori.ai/api/v2/asset/acc38f4a-e4c3-4a21-9818-c3d1672820ea.glb#1762875973109',
-      name: 'Layout Storybook',
-      showShare: true,
-    }),
+    integration: {
+      ...baseIntegration,
+      customData: JSON.stringify({
+        textColor: '#000000',
+        buttonBgColor: '#007eb6',
+        buttonTextColor: '#ffffff',
+        blurBackground: true,
+        innerBgColor: 'light',
+        multilanguage: true,
+        avatar: 'readyplayerme',
+        avatarURL:
+          'https://assets.memori.ai/api/v2/asset/acc38f4a-e4c3-4a21-9818-c3d1672820ea.glb#1762875973109',
+        name: 'Layout Storybook',
+        showShare: true,
+      }),
+    },
   },
-  tenant,
-  layout: 'ZOOMED_FULL_BODY',
 };
 
-export const ZoomedFullBodyWithDefaultTotem = Template.bind({});
-ZoomedFullBodyWithDefaultTotem.args = {
-  ...DefaultLayout.args,
-  integration: {
-    ...baseIntegration,
-    customData: JSON.stringify({
-      textColor: '#000000',
-      buttonBgColor: '#007eb6',
-      buttonTextColor: '#ffffff',
-      blurBackground: true,
-      innerBgColor: 'light',
-      multilanguage: true,
-      avatar: 'default_totem',
-      name: 'Layout Storybook',
-      showShare: true,
-    }),
+export const WithDefaultTotem: Story = {
+  args: {
+    ...stagingBase,
+    integration: {
+      ...baseIntegration,
+      customData: JSON.stringify({
+        textColor: '#000000',
+        buttonBgColor: '#007eb6',
+        buttonTextColor: '#ffffff',
+        blurBackground: true,
+        innerBgColor: 'light',
+        multilanguage: true,
+        avatar: 'default_totem',
+        name: 'Layout Storybook',
+        showShare: true,
+      }),
+    },
   },
-  tenant,
-  layout: 'ZOOMED_FULL_BODY',
 };
-