@memori.ai/memori-react 8.45.1 → 8.45.4

package/src/components/icons/ThumbUp.tsx

@@ -1,29 +0,0 @@
-import React from 'react';
-
-const ThumbUp = ({
-  className,
-  title,
-}: {
-  className?: string;
-  title?: string;
-}) => (
-  <svg
-    {...(!title ? { 'aria-hidden': 'true' } : {})}
-    focusable="false"
-    role="img"
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 24 24"
-    fill="none"
-    stroke="currentColor"
-    strokeLinecap="round"
-    strokeLinejoin="round"
-    strokeWidth="2"
-    tabIndex={-1}
-    className={className}
-    aria-label={title}
-  >
-    <path d="M14 9V5a3 3 0 00-3-3l-4 9v11h11.28a2 2 0 002-1.7l1.38-9a2 2 0 00-2-2.3zM7 22H4a2 2 0 01-2-2v-7a2 2 0 012-2h3"></path>
-  </svg>
-);
-
-export default ThumbUp;

package/src/components/icons/Translation.tsx

@@ -1,24 +0,0 @@
-import React from 'react';
-
-const Translation = ({
-  className,
-  title,
-}: {
-  className?: string;
-  title?: string;
-}) => (
-  <svg
-    {...(!title ? { 'aria-hidden': 'true' } : {})}
-    focusable="false"
-    role="img"
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 1024 1024"
-    className={className}
-    aria-label={title}
-  >
-    <path d="M140 188h584v164h76V144c0-17.7-14.3-32-32-32H96c-17.7 0-32 14.3-32 32v736c0 17.7 14.3 32 32 32h544v-76H140V188z"></path>
-    <path d="M414.3 256h-60.6c-3.4 0-6.4 2.2-7.6 5.4L219 629.4c-.3.8-.4 1.7-.4 2.6 0 4.4 3.6 8 8 8h55.1c3.4 0 6.4-2.2 7.6-5.4L322 540h196.2L422 261.4c-1.3-3.2-4.3-5.4-7.7-5.4zm12.4 228h-85.5L384 360.2 426.7 484zM936 528H800v-93c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v93H592c-13.3 0-24 10.7-24 24v176c0 13.3 10.7 24 24 24h136v152c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8V752h136c13.3 0 24-10.7 24-24V552c0-13.3-10.7-24-24-24zM728 680h-88v-80h88v80zm160 0h-88v-80h88v80z"></path>
-  </svg>
-);
-
-export default Translation;

package/src/components/icons/Twitter.tsx

@@ -1,23 +0,0 @@
-import React from 'react';
-
-const Twitter = ({
-  className,
-  title,
-}: {
-  className?: string;
-  title?: string;
-}) => (
-  <svg
-    {...(!title ? { 'aria-hidden': 'true' } : {})}
-    focusable="false"
-    role="img"
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 1024 1024"
-    className={className}
-    aria-label={title}
-  >
-    <path d="M928 254.3c-30.6 13.2-63.9 22.7-98.2 26.4a170.1 170.1 0 0 0 75-94 336.64 336.64 0 0 1-108.2 41.2A170.1 170.1 0 0 0 672 174c-94.5 0-170.5 76.6-170.5 170.6 0 13.2 1.6 26.4 4.2 39.1-141.5-7.4-267.7-75-351.6-178.5a169.32 169.32 0 0 0-23.2 86.1c0 59.2 30.1 111.4 76 142.1a172 172 0 0 1-77.1-21.7v2.1c0 82.9 58.6 151.6 136.7 167.4a180.6 180.6 0 0 1-44.9 5.8c-11.1 0-21.6-1.1-32.2-2.6C211 652 273.9 701.1 348.8 702.7c-58.6 45.9-132 72.9-211.7 72.9-14.3 0-27.5-.5-41.2-2.1C171.5 822 261.2 850 357.8 850 671.4 850 843 590.2 843 364.7c0-7.4 0-14.8-.5-22.2 33.2-24.3 62.3-54.4 85.5-88.2z" />
-  </svg>
-);
-
-export default Twitter;

package/src/components/icons/Upload.tsx

@@ -1,34 +0,0 @@
-import React from 'react';
-
-export const UploadIcon: React.FC<{ className?: string }> = ({ className }) => {
-  return (
-    <svg 
-      className={className} 
-      viewBox="0 0 24 24" 
-      fill="none" 
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path 
-        d="M21 15V19C21 19.5304 20.7893 20.0391 20.4142 20.4142C20.0391 20.7893 19.5304 21 19 21H5C4.46957 21 3.96086 20.7893 3.58579 20.4142C3.21071 20.0391 3 19.5304 3 19V15" 
-        stroke="currentColor" 
-        strokeWidth="1.5" 
-        strokeLinecap="round" 
-        strokeLinejoin="round"
-      />
-      <path 
-        d="M17 8L12 3L7 8" 
-        stroke="currentColor" 
-        strokeWidth="1.5" 
-        strokeLinecap="round" 
-        strokeLinejoin="round"
-      />
-      <path 
-        d="M12 3V15" 
-        stroke="currentColor" 
-        strokeWidth="1.5" 
-        strokeLinecap="round" 
-        strokeLinejoin="round"
-      />
-    </svg>
-  );
-};

package/src/components/icons/User.tsx

@@ -1,17 +0,0 @@
-import React from 'react';
-
-const User = ({ className, title }: { className?: string; title?: string }) => (
-  <svg
-    {...(!title ? { 'aria-hidden': 'true' } : {})}
-    focusable="false"
-    role="img"
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 1024 1024"
-    className={className}
-    aria-label={title}
-  >
-    <path d="M858.5 763.6a374 374 0 0 0-80.6-119.5 375.63 375.63 0 0 0-119.5-80.6c-.4-.2-.8-.3-1.2-.5C719.5 518 760 444.7 760 362c0-137-111-248-248-248S264 225 264 362c0 82.7 40.5 156 102.8 201.1-.4.2-.8.3-1.2.5-44.8 18.9-85 46-119.5 80.6a375.63 375.63 0 0 0-80.6 119.5A371.7 371.7 0 0 0 136 901.8a8 8 0 0 0 8 8.2h60c4.4 0 7.9-3.5 8-7.8 2-77.2 33-149.5 87.8-204.3 56.7-56.7 132-87.9 212.2-87.9s155.5 31.2 212.2 87.9C779 752.7 810 825 812 902.2c.1 4.4 3.6 7.8 8 7.8h60a8 8 0 0 0 8-8.2c-1-47.8-10.9-94.3-29.5-138.2zM512 534c-45.9 0-89.1-17.9-121.6-50.4S340 407.9 340 362c0-45.9 17.9-89.1 50.4-121.6S466.1 190 512 190s89.1 17.9 121.6 50.4S684 316.1 684 362c0 45.9-17.9 89.1-50.4 121.6S557.9 534 512 534z" />
-  </svg>
-);
-
-export default User;

package/src/components/icons/Warning.tsx

@@ -1,24 +0,0 @@
-import React from 'react';
-
-const Warning = ({
-  className,
-  title,
-}: {
-  className?: string;
-  title?: string;
-}) => (
-  <svg
-    {...(!title ? { 'aria-hidden': 'true' } : {})}
-    focusable="false"
-    role="img"
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 1024 1024"
-    className={className}
-    aria-label={title}
-    color="currentColor"
-  >
-    <path fill="currentColor" d="M464 720a48 48 0 1096 0 48 48 0 10-96 0zm16-304v184c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V416c0-4.4-3.6-8-8-8h-48c-4.4 0-8 3.6-8 8zm475.7 440l-416-720c-6.2-10.7-16.9-16-27.7-16s-21.6 5.3-27.7 16l-416 720C56 877.4 71.4 904 96 904h832c24.6 0 40-26.6 27.7-48zm-783.5-27.9L512 239.9l339.8 588.2H172.2z"></path>
-  </svg>
-);
-
-export default Warning;

package/src/components/icons/WhatsApp.tsx

@@ -1,24 +0,0 @@
-import React from 'react';
-
-const WhatsApp = ({
-  className,
-  title,
-}: {
-  className?: string;
-  title?: string;
-}) => (
-  <svg
-    {...(!title ? { 'aria-hidden': 'true' } : {})}
-    focusable="false"
-    role="img"
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 1024 1024"
-    className={className}
-    aria-label={title}
-  >
-    <path d="M713.5 599.9c-10.9-5.6-65.2-32.2-75.3-35.8-10.1-3.8-17.5-5.6-24.8 5.6-7.4 11.1-28.4 35.8-35 43.3-6.4 7.4-12.9 8.3-23.8 2.8-64.8-32.4-107.3-57.8-150-131.1-11.3-19.5 11.3-18.1 32.4-60.2 3.6-7.4 1.8-13.7-1-19.3-2.8-5.6-24.8-59.8-34-81.9-8.9-21.5-18.1-18.5-24.8-18.9-6.4-.4-13.7-.4-21.1-.4-7.4 0-19.3 2.8-29.4 13.7-10.1 11.1-38.6 37.8-38.6 92s39.5 106.7 44.9 114.1c5.6 7.4 77.7 118.6 188.4 166.5 70 30.2 97.4 32.8 132.4 27.6 21.3-3.2 65.2-26.6 74.3-52.5 9.1-25.8 9.1-47.9 6.4-52.5-2.7-4.9-10.1-7.7-21-13z"></path>
-    <path d="M925.2 338.4c-22.6-53.7-55-101.9-96.3-143.3-41.3-41.3-89.5-73.8-143.3-96.3C630.6 75.7 572.2 64 512 64h-2c-60.6.3-119.3 12.3-174.5 35.9-53.3 22.8-101.1 55.2-142 96.5-40.9 41.3-73 89.3-95.2 142.8-23 55.4-34.6 114.3-34.3 174.9.3 69.4 16.9 138.3 48 199.9v152c0 25.4 20.6 46 46 46h152.1c61.6 31.1 130.5 47.7 199.9 48h2.1c59.9 0 118-11.6 172.7-34.3 53.5-22.3 101.6-54.3 142.8-95.2 41.3-40.9 73.8-88.7 96.5-142 23.6-55.2 35.6-113.9 35.9-174.5.3-60.9-11.5-120-34.8-175.6zm-151.1 438C704 845.8 611 884 512 884h-1.7c-60.3-.3-120.2-15.3-173.1-43.5l-8.4-4.5H188V695.2l-4.5-8.4C155.3 633.9 140.3 574 140 513.7c-.4-99.7 37.7-193.3 107.6-263.8 69.8-70.5 163.1-109.5 262.8-109.9h1.7c50 0 98.5 9.7 144.2 28.9 44.6 18.7 84.6 45.6 119 80 34.3 34.3 61.3 74.4 80 119 19.4 46.2 29.1 95.2 28.9 145.8-.6 99.6-39.7 192.9-110.1 262.7z"></path>
-  </svg>
-);
-
-export default WhatsApp;

package/src/components/icons/icons.stories.css

@@ -1,5 +0,0 @@
-.showcase-icon {
-    width: 3rem;
-    height: 3rem;
-    font-size: 3rem;
-}

package/src/components/icons/icons.stories.tsx

@@ -1,81 +0,0 @@
-import React from 'react';
-import { Meta, Story } from '@storybook/react';
-
-import './loading.css';
-import './icons.stories.css';
-
-interface Props {
-  iconName: string;
-}
-
-interface IconProps {
-  className?: string;
-  title?: string;
-}
-
-// Import all icons at module level
-const iconContext = (require as any).context('./', false, /\.tsx$/);
-const iconModules: { [key: string]: React.ComponentType<any> } = {};
-
-iconContext.keys().forEach((key: string) => {
-  const iconName = key.replace('./', '').replace('.tsx', '');
-  if (!iconName.includes('stories')) {
-    iconModules[iconName] = iconContext(key).default;
-  }
-});
-
-const IconShowcaseItem = ({ iconName, ...iconProps }: Props & IconProps) => {
-  const Icon = iconModules[iconName];
-  if (!Icon) return null;
-  return <Icon {...iconProps} className="showcase-icon" />;
-};
-
-const IconsShowcase = (iconProps: IconProps) => {
-  const iconNames = Object.keys(iconModules);
-  return (
-    <div
-      style={{
-        display: 'grid',
-        gridTemplateColumns: 'repeat(7, 1fr)',
-        gridGap: '2rem',
-      }}
-    >
-      {iconNames.map(iconName => (
-        <div
-          key={iconName}
-          style={{
-            textAlign: 'center',
-          }}
-        >
-          <IconShowcaseItem iconName={iconName} {...iconProps} />
-          <p>{iconName}</p>
-        </div>
-      ))}
-    </div>
-  );
-};
-
-const meta: Meta = {
-  title: 'Definitions/Icons',
-  component: IconsShowcase,
-  argTypes: {
-    children: {
-      control: {
-        type: 'text',
-      },
-    },
-  },
-  parameters: {
-    controls: { expanded: true },
-  },
-};
-
-export default meta;
-
-const Template: Story<IconProps> = args => <IconsShowcase {...args} />;
-
-// By passing using the Args format for exported stories, you can control the props for a component for reuse in a test
-// https://storybook.js.org/docs/react/workflows/unit-testing
-export const Showcase = Template.bind({});
-
-Showcase.args = {};

package/src/components/icons/loading.css

@@ -1,14 +0,0 @@
-.memori-loading-icon {
-    display: inline-block;
-    animation: memori-loading 1s infinite linear;
-}
-
-@keyframes memori-loading {
-    0% {
-        transform: rotate(0deg);
-    }
-
-    100% {
-        transform: rotate(360deg);
-    }
-}

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

@@ -1,40 +0,0 @@
-import { render } from '@testing-library/react';
-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 Chat layout unchanged', () => {
-  const { container } = render(
-    <I18nWrapper>
-      <ArtifactProvider >
-      <VisemeProvider>
-        <Memori
-          showShare={true}
-        showSettings={true}
-        memori={memori}
-        tenant={tenant}
-        tenantID="aisuru.com"
-        integration={integration}
-          layout="CHAT"
-        />
-      </VisemeProvider>
-      </ArtifactProvider>
-    </I18nWrapper>
-  );
-  expect(container).toMatchSnapshot();
-});

package/src/components/layouts/Chat.tsx

@@ -1,69 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import Spin from '../ui/Spin';
-import { LayoutProps } from '../MemoriWidget/MemoriWidget';
-import ArtifactDrawer from '../MemoriArtifactSystem/components/ArtifactDrawer/ArtifactDrawer';
-import { useArtifact } from '../MemoriArtifactSystem/context/ArtifactContext';
-
-const ChatLayout: React.FC<LayoutProps> = ({
-  Header,
-  headerProps,
-  Chat,
-  chatProps,
-  StartPanel,
-  startPanelProps,
-  integrationStyle,
-  integrationBackground,
-  sessionId,
-  hasUserActivatedSpeak,
-  loading = false,
-  poweredBy,
-}) => {
-  const { state } = useArtifact();
-
-
-  return (
-    <>
-      {integrationStyle}
-      {integrationBackground}
-
-      <Spin spinning={loading} className="memori-chat-layout">
-        {poweredBy}
-
-        <div className={`memori-chat-layout--header ${
-          state.isDrawerOpen ? 'memori-chat-layout--header-with-artifact' : ''
-        }`}>
-          {Header && headerProps && <Header {...headerProps} />}
-        </div>
-
-        <div id="extension" />
-
-        <div
-          className={`memori-chat-layout--main ${
-            state.isDrawerOpen ? 'memori-chat-layout--main-with-artifact' : ''
-          }`}
-        >
-          <div
-            className={
-              state.isFullscreen
-                ? `memori-chat-layout-controls-hide`
-                : `memori-chat-layout--controls ${
-                    state.isDrawerOpen
-                      ? 'memori-chat-layout--controls-with-artifact'
-                      : ''
-                  }`
-            }
-          >
-            {sessionId && hasUserActivatedSpeak && Chat && chatProps ? (
-              <Chat {...chatProps} />
-            ) : startPanelProps ? (
-              <StartPanel {...startPanelProps} />
-            ) : null}
-          </div>
-        </div>
-
-      </Spin>
-    </>
-  );
-};
-
-export default ChatLayout;

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

@@ -1,110 +0,0 @@
-import React from 'react';
-import { Meta, Story } 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';
-
-const meta: Meta = {
-  title: 'General/Layouts/FullBody',
-  component: (args: Props) => <Memori {...args}    />,
-  argTypes: {},
-  parameters: {
-    controls: { expanded: true },
-    layout: 'fullscreen',
-  },
-};
-
-export default meta;
-
-
-const Template: Story<Props> = args => (
-  <I18nWrapper>
-    <ArtifactProvider>
-      <VisemeProvider>
-        <Memori {...args} />
-      </VisemeProvider>
-    </ArtifactProvider>
-  </I18nWrapper>
-);
-
-const DefaultLayout = Template.bind({});
-DefaultLayout.args = {
-  emoriName: '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',
-  uiLang: 'IT',
-  spokenLang: 'IT',
-  integrationID: '0b1256c1-530c-4e67-aef8-36667c8887bb',
-};
-
-const baseIntegration = {
-  integrationID: '0b1256c1-530c-4e67-aef8-36667c8887bb',
-  memoriID: '157860e8-f014-43b3-a7c5-fb4a08c87025',
-  type: 'LANDING_EXPERIENCE',
-  state: 'NEW',
-  deviceEmails: null,
-  invocationText: null,
-  jobID: null,
-  publish: true,
-  creationTimestamp: '2022-06-13T14:44:52.833573Z',
-  lastChangeTimestamp: '2022-06-13T14:44:52.833573Z',
-};
-
-export const FullBodyWithFullBodyAvatar = Template.bind({});
-FullBodyWithFullBodyAvatar.args = {
-    ...DefaultLayout.args,
-    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,
-    }),
-  },
-  tenant,
-  layout: 'FULLPAGE',
-};
-
-export const FullBodyWithHalfBodyAvatar = Template.bind({});
-FullBodyWithHalfBodyAvatar.args = {
-    ...DefaultLayout.args,
-    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,
-    }),
-  },
-  tenant,
-  layout: 'FULLPAGE',
-};
-

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

@@ -1,65 +0,0 @@
-import { render } from '@testing-library/react';
-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 FullPage layout unchanged', () => {
-  const { container } = render(
-    <I18nWrapper>
-      <ArtifactProvider
-      >
-        <VisemeProvider>
-          <Memori
-            showShare={true}
-            showSettings={true}
-            memori={memori}
-            tenant={tenant}
-            tenantID="aisuru.com"
-            integration={integration}
-            layout="FULLPAGE"
-          />
-        </VisemeProvider>
-      </ArtifactProvider>
-    </I18nWrapper>
-  );
-  expect(container).toMatchSnapshot();
-});
-
-it('renders FullPage layout with root css properties unchanged', () => {
-  const { container } = render(
-    <I18nWrapper>
-      <ArtifactProvider
-      >
-      <VisemeProvider>
-        <Memori
-          showShare={true}
-          showSettings={true}
-          memori={memori}
-          tenant={tenant}
-          tenantID="aisuru.com"
-          integration={integration}
-          layout="FULLPAGE"
-          applyVarsToRoot
-        />
-      </VisemeProvider>
-      </ArtifactProvider>
-    </I18nWrapper>
-  );
-  expect(container).toMatchSnapshot();
-});

package/src/components/layouts/FullPage.tsx

@@ -1,80 +0,0 @@
-import React, { useEffect, useState } from 'react';
-import Spin from '../ui/Spin';
-import { LayoutProps } from '../MemoriWidget/MemoriWidget';
-import { useArtifact } from '../MemoriArtifactSystem/context/ArtifactContext';
-import ArtifactDrawer from '../MemoriArtifactSystem/components/ArtifactDrawer/ArtifactDrawer';
-
-const FullPageLayout: React.FC<LayoutProps> = ({
-  Header,
-  headerProps,
-  Avatar,
-  avatarProps,
-  Chat,
-  chatProps,
-  StartPanel,
-  startPanelProps,
-  integrationStyle,
-  integrationBackground,
-  sessionId,
-  hasUserActivatedSpeak,
-  loading = false,
-  poweredBy,
-}) => {
-  const { state } = useArtifact();
-  const hasArtifact = state.currentArtifact;
-  return (
-    <>
-      {integrationStyle}
-      {integrationBackground}
-
-      <Spin spinning={loading}>
-        <div
-          className={`memori-chat-layout--header ${
-            state.isDrawerOpen ? 'memori-chat-layout--header-with-artifact' : ''
-          }`}
-        >
-          {Header && headerProps && <Header {...headerProps} />}
-        </div>
-
-        <div className="memori--grid">
-          {!state.isDrawerOpen && (
-            <div className="memori--grid-column memori--grid-column-left">
-              {Avatar && avatarProps && (
-                <Avatar chatProps={chatProps} {...avatarProps} />
-              )}
-
-              <div id="extension" />
-            </div>
-          )}
-          <div
-            className={`memori-chat-layout--main ${
-              hasArtifact ? 'memori-chat-layout--main-with-artifact' : ''
-            }`}
-          >
-            <div
-              className={
-                state.isFullscreen
-                  ? `memori-chat-layout-controls-hide`
-                  : `memori-chat-layout--controls ${
-                      state.isDrawerOpen
-                        ? 'memori-chat-layout--controls-with-artifact'
-                        : ''
-                    }`
-              }
-            >
-              {sessionId && hasUserActivatedSpeak && Chat && chatProps ? (
-                <Chat {...chatProps} />
-              ) : startPanelProps ? (
-                <StartPanel {...startPanelProps} />
-              ) : null}
-            </div>
-          </div>
-
-          {poweredBy}
-        </div>
-      </Spin>
-    </>
-  );
-};
-
-export default FullPageLayout;