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

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

@@ -27,47 +27,21 @@ exports[`renders Totem layout unchanged 1`] = `
       class="memori-widget__surface"
     >
       <style>
-        @layer integration {
+        @layer memori.overrides {
   body, .memori-client, .memori-widget, .memori-drawer, .memori-modal, .memori-header, .memori-dropdown, .memori-select {
     --memori-primary-color: #823ce1;
-    --memori-primary: #823ce1;
     --memori-primary-content: #ffffff;
-    --memori-primary-hover: color-mix(in oklch, var(--memori-primary), var(--memori-surface-contrast, black) 15%);
-    --memori-primary-active: color-mix(in oklch, var(--memori-primary), var(--memori-surface-contrast, black) 25%);
-    --memori-primary-disabled: color-mix(in oklch, var(--memori-primary), transparent 60%);
-    --memori-primary-subtle: color-mix(in oklch, var(--memori-primary), var(--memori-surface-contrast-inverse, white) 60%);
-    --memori-primary-subtle-hover: color-mix(in oklch, var(--memori-primary), var(--memori-surface-contrast-inverse, white) 50%);
-    --memori-border-primary: color-mix(in oklch, var(--memori-primary), transparent 70%);
-    --memori-border-primary-hover: color-mix(in oklch, var(--memori-primary), transparent 50%);
-    --memori-focus-ring-color: color-mix(in oklch, var(--memori-primary), transparent 80%);
-    --memori-focus-ring: 0 0 0 3px var(--memori-focus-ring-color);
-    --memori-shadow-primary: 0 8px 16px -4px color-mix(in oklch, var(--memori-primary), transparent 70%);
-    --memori-skeleton-base: color-mix(in oklch, var(--memori-primary), var(--memori-surface-contrast-inverse, white) 85%);
-    --memori-skeleton-highlight: color-mix(in oklch, var(--memori-primary), var(--memori-surface-contrast-inverse, white) 75%);
     --memori-icon-active-bg: color-mix(in oklch, var(--memori-primary) 12%, transparent);
-    --memori-icon-recording-bg: color-mix(in oklch, var(--memori-error, #dc2626) 12%, transparent);
+    --memori-icon-recording-bg: color-mix(in oklch, var(--memori-error) 12%, transparent);
   }
   [data-theme="dark"] .memori-widget,
   .memori-widget[data-theme="dark"],
   [data-theme="dark"] memori-client .memori-widget,
   memori-client[data-theme="dark"] .memori-widget {
     --memori-primary-color: #823ce1;
-    --memori-primary: #823ce1;
     --memori-primary-content: #ffffff;
-    --memori-primary-hover: color-mix(in oklch, var(--memori-primary), var(--memori-surface-contrast, black) 15%);
-    --memori-primary-active: color-mix(in oklch, var(--memori-primary), var(--memori-surface-contrast, black) 25%);
-    --memori-primary-disabled: color-mix(in oklch, var(--memori-primary), transparent 60%);
-    --memori-primary-subtle: color-mix(in oklch, var(--memori-primary), var(--memori-surface-contrast-inverse, white) 60%);
-    --memori-primary-subtle-hover: color-mix(in oklch, var(--memori-primary), var(--memori-surface-contrast-inverse, white) 50%);
-    --memori-border-primary: color-mix(in oklch, var(--memori-primary), transparent 70%);
-    --memori-border-primary-hover: color-mix(in oklch, var(--memori-primary), transparent 50%);
-    --memori-focus-ring-color: color-mix(in oklch, var(--memori-primary), transparent 80%);
-    --memori-focus-ring: 0 0 0 3px var(--memori-focus-ring-color);
-    --memori-shadow-primary: 0 8px 16px -4px color-mix(in oklch, var(--memori-primary), transparent 70%);
-    --memori-skeleton-base: color-mix(in oklch, var(--memori-primary), var(--memori-surface-contrast-inverse, white) 85%);
-    --memori-skeleton-highlight: color-mix(in oklch, var(--memori-primary), var(--memori-surface-contrast-inverse, white) 75%);
     --memori-icon-active-bg: color-mix(in oklch, var(--memori-primary) 12%, transparent);
-    --memori-icon-recording-bg: color-mix(in oklch, var(--memori-error, #dc2626) 12%, transparent);
+    --memori-icon-recording-bg: color-mix(in oklch, var(--memori-error) 12%, transparent);
   }
 }
 
@@ -103,7 +77,7 @@ exports[`renders Totem layout unchanged 1`] = `
       }
 
       .cls-2 {
-        fill: var(--memori-logo-text-color, '#744c99');
+        fill: var(--memori-text-color, '#744c99');
       }
     
               </style>
@@ -346,6 +320,102 @@ exports[`renders Totem layout unchanged 1`] = `
                   </span>
                 </span>
               </div>
+              <span
+                class="memori-tooltip"
+              >
+                <span
+                  class="memori-tooltip__trigger"
+                  id="base-ui-:rb:"
+                >
+                  <span
+                    style="display: inline-flex;"
+                  >
+                    <button
+                      aria-label="reload"
+                      class="memori-button memori-button--toolbar memori-button--sm memori-button--icon-only memori-icon-button memori-totem-rail--button"
+                      tabindex="0"
+                      title="reload"
+                      type="button"
+                    >
+                      <span
+                        class="memori-button__icon"
+                      >
+                        <svg
+                          class="lucide lucide-refresh-cw"
+                          fill="none"
+                          height="24"
+                          stroke="currentColor"
+                          stroke-linecap="round"
+                          stroke-linejoin="round"
+                          stroke-width="2"
+                          viewBox="0 0 24 24"
+                          width="24"
+                          xmlns="http://www.w3.org/2000/svg"
+                        >
+                          <path
+                            d="M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8"
+                          />
+                          <path
+                            d="M21 3v5h-5"
+                          />
+                          <path
+                            d="M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16"
+                          />
+                          <path
+                            d="M8 16H3v5"
+                          />
+                        </svg>
+                      </span>
+                    </button>
+                  </span>
+                </span>
+              </span>
+              <span
+                class="memori-tooltip"
+              >
+                <span
+                  class="memori-tooltip__trigger"
+                  id="base-ui-:rd:"
+                >
+                  <span
+                    style="display: inline-flex;"
+                  >
+                    <button
+                      aria-label="widget.settings"
+                      class="memori-button memori-button--toolbar memori-button--sm memori-button--icon-only memori-icon-button memori-totem-rail--button"
+                      tabindex="0"
+                      title="widget.settings"
+                      type="button"
+                    >
+                      <span
+                        class="memori-button__icon"
+                      >
+                        <svg
+                          class="lucide lucide-settings"
+                          fill="none"
+                          height="24"
+                          stroke="currentColor"
+                          stroke-linecap="round"
+                          stroke-linejoin="round"
+                          stroke-width="2"
+                          viewBox="0 0 24 24"
+                          width="24"
+                          xmlns="http://www.w3.org/2000/svg"
+                        >
+                          <path
+                            d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"
+                          />
+                          <circle
+                            cx="12"
+                            cy="12"
+                            r="3"
+                          />
+                        </svg>
+                      </span>
+                    </button>
+                  </span>
+                </span>
+              </span>
             </div>
             <div
               aria-hidden="true"
@@ -362,7 +432,7 @@ exports[`renders Totem layout unchanged 1`] = `
                 >
                   <span
                     class="memori-tooltip__trigger"
-                    id="base-ui-:re:"
+                    id="base-ui-:ri:"
                   >
                     <span
                       style="display: inline-flex;"
@@ -373,7 +443,7 @@ exports[`renders Totem layout unchanged 1`] = `
                         aria-label="login.user"
                         class="memori-button memori-button--toolbar memori-button--sm memori-button--icon-only memori-icon-button memori-totem-rail--button memori-totem-rail--account-trigger"
                         data-base-ui-click-trigger=""
-                        id="base-ui-:rc:"
+                        id="base-ui-:rg:"
                         tabindex="0"
                         title="login.user"
                         type="button"
@@ -524,11 +594,15 @@ exports[`renders Totem layout unchanged 1`] = `
                 <div
                   class="memori--title-container__content"
                 >
-                  <h2
-                    class="memori--title"
+                  <div
+                    class="memori--title-row"
                   >
-                    Memori
-                  </h2>
+                    <h2
+                      class="memori--title"
+                    >
+                      Memori
+                    </h2>
+                  </div>
                   <div
                     class="memori-expandable memori--description-text memori--description-text--collapsible"
                   >
@@ -588,17 +662,17 @@ exports[`renders Totem layout unchanged 1`] = `
                   >
                     <label
                       class="memori-combobox__label"
-                      for=":rf:"
-                      id=":rf:-label"
+                      for="memori-combobox-1"
+                      id="memori-combobox-1-label"
                     >
                       write_and_speak.chatLanguageLabel
                     </label>
                     <button
                       aria-expanded="false"
                       aria-haspopup="dialog"
-                      aria-labelledby=":rf:-label"
+                      aria-labelledby="memori-combobox-1-label"
                       class="memori-combobox__trigger"
-                      id=":rf:"
+                      id="memori-combobox-1"
                       role="combobox"
                       tabindex="0"
                       type="button"
@@ -633,7 +707,7 @@ exports[`renders Totem layout unchanged 1`] = `
                     </button>
                     <input
                       aria-hidden="true"
-                      id="base-ui-:rg:"
+                      id="base-ui-:rj:"
                       name="user-lang-pref"
                       style="overflow: hidden; white-space: nowrap; position: fixed; top: 0px; left: 0px; border: 0px; padding: 0px; width: 1px; height: 1px; margin: -1px;"
                       tabindex="-1"
@@ -702,7 +776,7 @@ exports[`renders Totem layout unchanged 1`] = `
                         >
                           <span
                             class="memori-tooltip__trigger"
-                            id="base-ui-:rj:"
+                            id="base-ui-:rm:"
                           >
                             <button
                               aria-label="privacyPolicy"

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

@@ -27,47 +27,21 @@ exports[`renders ZOOMED_FULL_BODY layout unchanged 1`] = `
       class="memori-widget__surface"
     >
       <style>
-        @layer integration {
+        @layer memori.overrides {
   body, .memori-client, .memori-widget, .memori-drawer, .memori-modal, .memori-header, .memori-dropdown, .memori-select {
     --memori-primary-color: #823ce1;
-    --memori-primary: #823ce1;
     --memori-primary-content: #ffffff;
-    --memori-primary-hover: color-mix(in oklch, var(--memori-primary), var(--memori-surface-contrast, black) 15%);
-    --memori-primary-active: color-mix(in oklch, var(--memori-primary), var(--memori-surface-contrast, black) 25%);
-    --memori-primary-disabled: color-mix(in oklch, var(--memori-primary), transparent 60%);
-    --memori-primary-subtle: color-mix(in oklch, var(--memori-primary), var(--memori-surface-contrast-inverse, white) 60%);
-    --memori-primary-subtle-hover: color-mix(in oklch, var(--memori-primary), var(--memori-surface-contrast-inverse, white) 50%);
-    --memori-border-primary: color-mix(in oklch, var(--memori-primary), transparent 70%);
-    --memori-border-primary-hover: color-mix(in oklch, var(--memori-primary), transparent 50%);
-    --memori-focus-ring-color: color-mix(in oklch, var(--memori-primary), transparent 80%);
-    --memori-focus-ring: 0 0 0 3px var(--memori-focus-ring-color);
-    --memori-shadow-primary: 0 8px 16px -4px color-mix(in oklch, var(--memori-primary), transparent 70%);
-    --memori-skeleton-base: color-mix(in oklch, var(--memori-primary), var(--memori-surface-contrast-inverse, white) 85%);
-    --memori-skeleton-highlight: color-mix(in oklch, var(--memori-primary), var(--memori-surface-contrast-inverse, white) 75%);
     --memori-icon-active-bg: color-mix(in oklch, var(--memori-primary) 12%, transparent);
-    --memori-icon-recording-bg: color-mix(in oklch, var(--memori-error, #dc2626) 12%, transparent);
+    --memori-icon-recording-bg: color-mix(in oklch, var(--memori-error) 12%, transparent);
   }
   [data-theme="dark"] .memori-widget,
   .memori-widget[data-theme="dark"],
   [data-theme="dark"] memori-client .memori-widget,
   memori-client[data-theme="dark"] .memori-widget {
     --memori-primary-color: #823ce1;
-    --memori-primary: #823ce1;
     --memori-primary-content: #ffffff;
-    --memori-primary-hover: color-mix(in oklch, var(--memori-primary), var(--memori-surface-contrast, black) 15%);
-    --memori-primary-active: color-mix(in oklch, var(--memori-primary), var(--memori-surface-contrast, black) 25%);
-    --memori-primary-disabled: color-mix(in oklch, var(--memori-primary), transparent 60%);
-    --memori-primary-subtle: color-mix(in oklch, var(--memori-primary), var(--memori-surface-contrast-inverse, white) 60%);
-    --memori-primary-subtle-hover: color-mix(in oklch, var(--memori-primary), var(--memori-surface-contrast-inverse, white) 50%);
-    --memori-border-primary: color-mix(in oklch, var(--memori-primary), transparent 70%);
-    --memori-border-primary-hover: color-mix(in oklch, var(--memori-primary), transparent 50%);
-    --memori-focus-ring-color: color-mix(in oklch, var(--memori-primary), transparent 80%);
-    --memori-focus-ring: 0 0 0 3px var(--memori-focus-ring-color);
-    --memori-shadow-primary: 0 8px 16px -4px color-mix(in oklch, var(--memori-primary), transparent 70%);
-    --memori-skeleton-base: color-mix(in oklch, var(--memori-primary), var(--memori-surface-contrast-inverse, white) 85%);
-    --memori-skeleton-highlight: color-mix(in oklch, var(--memori-primary), var(--memori-surface-contrast-inverse, white) 75%);
     --memori-icon-active-bg: color-mix(in oklch, var(--memori-primary) 12%, transparent);
-    --memori-icon-recording-bg: color-mix(in oklch, var(--memori-error, #dc2626) 12%, transparent);
+    --memori-icon-recording-bg: color-mix(in oklch, var(--memori-error) 12%, transparent);
   }
 }
 
@@ -344,11 +318,15 @@ exports[`renders ZOOMED_FULL_BODY layout unchanged 1`] = `
                         <div
                           class="memori--title-container__content"
                         >
-                          <h2
-                            class="memori--title"
+                          <div
+                            class="memori--title-row"
                           >
-                            Memori
-                          </h2>
+                            <h2
+                              class="memori--title"
+                            >
+                              Memori
+                            </h2>
+                          </div>
                           <div
                             class="memori-expandable memori--description-text memori--description-text--collapsible"
                           >
@@ -408,17 +386,17 @@ exports[`renders ZOOMED_FULL_BODY layout unchanged 1`] = `
                           >
                             <label
                               class="memori-combobox__label"
-                              for=":ra:"
-                              id=":ra:-label"
+                              for="memori-combobox-1"
+                              id="memori-combobox-1-label"
                             >
                               write_and_speak.chatLanguageLabel
                             </label>
                             <button
                               aria-expanded="false"
                               aria-haspopup="dialog"
-                              aria-labelledby=":ra:-label"
+                              aria-labelledby="memori-combobox-1-label"
                               class="memori-combobox__trigger"
-                              id=":ra:"
+                              id="memori-combobox-1"
                               role="combobox"
                               tabindex="0"
                               type="button"
@@ -453,7 +431,7 @@ exports[`renders ZOOMED_FULL_BODY layout unchanged 1`] = `
                             </button>
                             <input
                               aria-hidden="true"
-                              id="base-ui-:rb:"
+                              id="base-ui-:ra:"
                               name="user-lang-pref"
                               style="overflow: hidden; white-space: nowrap; position: fixed; top: 0px; left: 0px; border: 0px; padding: 0px; width: 1px; height: 1px; margin: -1px;"
                               tabindex="-1"
@@ -522,7 +500,7 @@ exports[`renders ZOOMED_FULL_BODY layout unchanged 1`] = `
                                 >
                                   <span
                                     class="memori-tooltip__trigger"
-                                    id="base-ui-:re:"
+                                    id="base-ui-:rd:"
                                   >
                                     <button
                                       aria-label="privacyPolicy"
@@ -615,7 +593,7 @@ exports[`renders ZOOMED_FULL_BODY layout unchanged 1`] = `
       }
 
       .cls-2 {
-        fill: var(--memori-logo-text-color, '#744c99');
+        fill: var(--memori-text-color, '#744c99');
       }
     
                           </style>

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

@@ -1,88 +1,115 @@
 import React from 'react';
-import { Meta, Story } from '@storybook/react';
+import type { Meta, StoryObj } 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';
-
-const meta: Meta = {
-  title: 'General/Layouts',
-  component: (args: Props) => <Memori {...args} />,
-  argTypes: {},
+import { withWidgetProviders } from '../../../.storybook/decorators';
+
+/**
+ * Canonical layout matrix — one story per LayoutName (plus Custom + HiddenChat note).
+ * Live staging/localhost agents live under `Live/` (see Live/Agents.stories.tsx).
+ */
+const meta = {
+  title: 'Layouts',
+  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 = {
-  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: 'ZOOMED_FULL_BODY',
+/** Fixture-first base — deterministic sidebar entry for each layout. */
+const fixtureBase: Partial<Props> = {
+  memori,
+  tenant,
+  memoriName: memori.name,
+  memoriID: memori.memoriID,
+  ownerUserName: 'memoridev',
+  tenantID: 'www.aisuru.com',
+  engineURL: 'https://engine.memori.ai',
+  apiURL: 'https://backend.memori.ai',
+  baseURL: 'https://www.aisuru.com',
   uiLang: 'IT',
   spokenLang: 'IT',
-  integrationID: '32922e14-24d6-4f5f-a06b-d963da14a658',
   showSettings: true,
+  showShare: true,
 };
 
-export const Default = Template.bind({});
-Default.args = {
-  ...DefaultLayout.args,
+/** Default layout = FULLPAGE (not Zoomed). */
+export const FullPage: Story = {
+  args: {
+    ...fixtureBase,
+    layout: 'FULLPAGE',
+  },
 };
 
-export const Totem = Template.bind({});
-Totem.args = {
-  ...DefaultLayout.args,
-  uiLang: 'it',
-  showShare: true,
-  showSettings: true,
-  // memori: memori,
-  integration: {
-    ...integration,
+export const Chat: Story = {
+  args: {
+    ...fixtureBase,
+    layout: 'CHAT',
+    showUpload: true,
   },
-  tenant,
-  layout: 'TOTEM',
 };
 
-export const ChatOnly = Template.bind({});
-ChatOnly.args = {
-  ...DefaultLayout.args,
-  uiLang: 'it',
-  showShare: true,
-  showSettings: true,
-  showUpload: true,
-  memori: memori,
-  tenant,
-  layout: 'CHAT',
+export const Totem: Story = {
+  args: {
+    ...fixtureBase,
+    layout: 'TOTEM',
+    integration: { ...integration },
+  },
+};
+
+export const ZoomedFullBody: Story = {
+  args: {
+    ...fixtureBase,
+    layout: 'ZOOMED_FULL_BODY',
+  },
+};
+
+export const WebsiteAssistant: Story = {
+  args: {
+    ...fixtureBase,
+    layout: 'WEBSITE_ASSISTANT',
+    multilingual: true,
+    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: Story = {
+  args: {
+    ...WebsiteAssistant.args,
+    avatar3dHidden: true,
+  },
+};
+
+/** Collapsed / FAB entry point for HIDDEN_CHAT. */
+export const HiddenChat: Story = {
+  args: {
+    ...fixtureBase,
+    layout: 'HIDDEN_CHAT',
+  },
 };
 
 const CustomLayout: React.FC<LayoutProps> = ({
-  Header,
-  headerProps,
-  Avatar,
-  avatarProps,
   Chat,
   chatProps,
   StartPanel,
@@ -97,10 +124,11 @@ const CustomLayout: React.FC<LayoutProps> = ({
   <>
     {integrationStyle}
     {integrationBackground}
-
-    <Spin spinning={loading} className="memori-mycustom-layout">
+    <Spin
+      spinning={loading}
+      className="memori-mycustom-layout"
+    >
       {poweredBy}
-
       <div className="memori-mycustom-layout--controls">
         {sessionId && hasUserActivatedSpeak && Chat && chatProps ? (
           <Chat {...chatProps} />
@@ -112,121 +140,10 @@ const CustomLayout: React.FC<LayoutProps> = ({
   </>
 );
 
-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 Custom: Story = {
+  args: {
+    ...fixtureBase,
+    layout: 'FULLPAGE',
+    customLayout: CustomLayout,
   },
 };
-
-export const WebsiteAssistantWithout3DAvatar = Template.bind({});
-WebsiteAssistantWithout3DAvatar.args = {
-  ...WebsiteAssistant.args,
-  avatar3dHidden: true,
-};
-
-export const HiddenChat = Template.bind({});
-HiddenChat.args = {
-  ...DefaultLayout.args,
-  uiLang: 'it',
-  showShare: true,
-  showSettings: true,
-  memori: memori,
-  tenant,
-  layout: 'HIDDEN_CHAT',
-};
-
-export const ZoomedFullBody = Template.bind({});
-ZoomedFullBody.args = {
-  ...DefaultLayout.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: 'ZOOMED_FULL_BODY',
-  uiLang: 'IT',
-  spokenLang: 'IT',
-  integrationID: '32922e14-24d6-4f5f-a06b-d963da14a658',
-  showSettings: true,
-};