@memori.ai/memori-react 8.45.2 → 8.45.4

package/src/components/layouts/HiddenChat.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 HIDDEN_CHAT layout unchanged', () => {
-  const { container } = render(
-    <I18nWrapper>
-      <ArtifactProvider>
-      <VisemeProvider>
-        <Memori
-          showShare={true}
-          showSettings={true}
-          memori={memori}
-          tenant={tenant}
-          tenantID="aisuru.com"
-          integration={integration}
-          layout="HIDDEN_CHAT"
-        />
-      </VisemeProvider>
-      </ArtifactProvider>
-    </I18nWrapper>
-  );
-  expect(container).toMatchSnapshot();
-});

package/src/components/layouts/HiddenChat.tsx

@@ -1,233 +0,0 @@
-import React, { useState, useEffect, useRef } from 'react';
-import Spin from '../ui/Spin';
-import { LayoutProps } from '../MemoriWidget/MemoriWidget';
-import { useTranslation } from 'react-i18next';
-import { useArtifact } from '../MemoriArtifactSystem/context/ArtifactContext';
-import QuestionHelp from '../icons/QuestionHelp';
-import Close from '../icons/Close';
-
-const HiddenChatLayout: React.FC<LayoutProps> = ({
-  Header,
-  headerProps,
-  Chat,
-  chatProps,
-  startPanelProps,
-  sessionId,
-  hasUserActivatedSpeak,
-  autoStart,
-  StartPanel,
-  onSidebarToggle,
-}) => {
-
-  const { t } = useTranslation();
-  const [isOpen, setIsOpen] = useState(false);
-  const [fullScreen, setFullScreen] = useState(false);
-  const [hasTriggeredAutostart, setHasTriggeredAutostart] = useState(false);
-
-  const { state, closeArtifact } = useArtifact();
-  const { onClickStart, hasInitialSession } = startPanelProps || {};
-
-  // Use refs to store original sidebar properties to restore them later
-  const originalSidebarStyles = useRef({
-    right: '',
-    width: '',
-    backgroundColor: '',
-  });
-
-  useEffect(() => {
-    // Add fullscreen change event listener to handle ESC key
-    const handleFullscreenChange = () => {
-      if (!document.fullscreenElement && fullScreen) {
-        restoreFromFullscreen();
-      }
-    };
-
-    document.addEventListener('fullscreenchange', handleFullscreenChange);
-
-    return () => {
-      document.removeEventListener('fullscreenchange', handleFullscreenChange);
-    };
-  }, [fullScreen]);
-
-  useEffect(() => {
-    const mainDiv = document.body;
-    if (isOpen) {
-      if (!fullScreen) {
-        mainDiv.style.width = 'calc(100% - 350px)';
-        mainDiv.style.marginRight = '300px';
-        mainDiv.style.transition = 'all 0.5s';
-      } else {
-        mainDiv.style.width = '100%';
-        mainDiv.style.marginLeft = '0';
-      }
-    } else {
-      // Reset the body styles when sidebar is closed
-      mainDiv.style.width = '100%';
-      mainDiv.style.marginRight = '0';
-      mainDiv.style.marginLeft = '0';
-      closeArtifact();
-    }
-  }, [isOpen, fullScreen]);
-
-  const handleSidebarToggle = () => {
-
-    // Only trigger autostart when opening the sidebar for the first time
-    // and when we haven't already triggered it
-    if (!isOpen && !hasTriggeredAutostart && (autoStart || autoStart === undefined) && (!sessionId || hasInitialSession)) {
-      setHasTriggeredAutostart(true);
-      onClickStart?.();
-    }
-    
-    // If we're in fullscreen mode and trying to close the sidebar
-    if (fullScreen && isOpen) {
-      // Exit fullscreen first
-      if (document.fullscreenElement) {
-        document.exitFullscreen().catch(err => {
-          console.warn('[HiddenChatLayout] Error exiting fullscreen:', err);
-        });
-      }
-      // Restore sidebar styles
-      restoreFromFullscreen();
-    } 
-
-    const newState = !isOpen;
-    setIsOpen(newState);
-    
-    // Notify parent component about sidebar state change
-    if (onSidebarToggle) {
-      onSidebarToggle(newState);
-    }
-    
-  };
-
-  const restoreFromFullscreen = () => {
-    const sidebarElement = document.querySelector('.memori-sidebar');
-    if (sidebarElement) {
-      //restore closing button
-      const closeButton = document.querySelector('.memori-close-label');
-      if (closeButton) {
-        (closeButton as HTMLElement).style.display = 'flex';
-      }
-      // Restore original styles
-      const sidebar = sidebarElement as HTMLElement;
-      sidebar.style.right = originalSidebarStyles.current.right;
-      sidebar.style.width = originalSidebarStyles.current.width;
-      sidebar.style.backgroundColor =
-        originalSidebarStyles.current.backgroundColor;
-
-      // Remove the fullscreen class
-      sidebar.classList.remove('memori-sidebar-fullscreen');
-    }
-    setFullScreen(false);
-  };
-
-  const handleFullscreenToggle = () => {
-    
-    if (!document.fullscreenElement) {
-      // Enter fullscreen
-      const sidebarElement = document.querySelector('.memori-sidebar');
-      if (sidebarElement) {
-        const sidebar = sidebarElement as HTMLElement;
-
-        //hide closing button
-        const closeButton = document.querySelector('.memori-close-label');
-        if (closeButton) {
-          (closeButton as HTMLElement).style.display = 'none';
-        }
-
-        // Store original styles before modifying
-        originalSidebarStyles.current = {
-          right: sidebar.style.right,
-          width: sidebar.style.width,
-          backgroundColor: sidebar.style.backgroundColor,
-        };
-
-        // Set styles for fullscreen
-        sidebar.style.right = '0';
-        sidebar.style.width = '100%';
-        sidebar.style.backgroundColor = '#FFFFFF';
-
-        // Request fullscreen
-        sidebar.requestFullscreen().catch(err => {
-          console.warn('[HiddenChatLayout] Error enabling fullscreen:', err);
-        });
-      }
-      setFullScreen(true);
-    } else {
-      // Exit fullscreen
-      if (document.exitFullscreen) {
-        document.exitFullscreen().catch(err => {
-          console.warn('[HiddenChatLayout] Error exiting fullscreen:', err);
-        });
-      }
-      restoreFromFullscreen();
-    }
-  };
-
-  return (
-    <>
-      <input
-        type="checkbox"
-        id="memori-sidebar-toggle"
-        className={`memori-sidebar-toggle ${state.isDrawerOpen ? 'memori-sidebar-toggle-artifact' : ''}`}
-        checked={isOpen}
-        onChange={handleSidebarToggle}
-      />
-      <div className="memori-sidebar-container">
-        <label
-          htmlFor="memori-sidebar-toggle"
-          className="memori-sidebar-toggle-label memori-open-label"
-        >
-          <QuestionHelp className="memori-icon" aria-label={t('expand')} />
-        </label>
-        
-        <aside
-          className={`memori-sidebar ${
-            fullScreen ? 'memori-sidebar-fullscreen' : ''
-          }`}
-        >
-          <label
-            htmlFor="memori-sidebar-toggle"
-            className="memori-sidebar-toggle-label memori-close-label"
-          >
-            <span>
-              <Close className="memori-icon-close" aria-label={t('collapse')} />
-            </span>
-          </label>
-          <div className="memori-sidebar-content">
-            <div className="memori-hidden-chat-layout--header">
-              {Header && headerProps && (
-                <Header
-                  position={{
-                    latitude: 0,
-                    longitude: 0,
-                    placeName: '',
-                  }}
-                  {...headerProps}
-                  className="memori-hidden-chat-layout-header--layout"
-                  fullScreenHandler={handleFullscreenToggle}
-                />
-              )}
-            </div>
-          </div>
-          <div id="extension" />
-          <div className="memori-hidden-chat-layout--controls">
-            {sessionId && hasUserActivatedSpeak && Chat && chatProps ? (
-              <Chat {...chatProps} />
-            ) : !autoStart && startPanelProps ? (
-              <div className="memori-loading">
-                <StartPanel {...startPanelProps} />
-              </div>
-            ) : (
-              <div className="memori-loading">
-                <Spin />
-              </div>
-            )}
-          </div>
-        </aside>
-      </div>
-    </>
-  );
-};
-
-export default HiddenChatLayout;

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

@@ -1,131 +0,0 @@
-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';
-
-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: {},
-  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 TotemWithFullBodyAvatar = Template.bind({});
-TotemWithFullBodyAvatar.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: 'TOTEM',
-};
-
-export const TotemWithHalfBodyAvatar = Template.bind({});
-TotemWithHalfBodyAvatar.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: '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,
-    }),
-  },
-  tenant,
-  layout: 'TOTEM',
-};
-

package/src/components/layouts/Totem.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 Totem layout unchanged', () => {
-  const { container } = render(
-    <I18nWrapper>
-      <ArtifactProvider>
-      <VisemeProvider>
-        <Memori
-        showShare={true}
-        showSettings={true}
-        memori={memori}
-        tenant={tenant}
-        tenantID="aisuru.com"
-        integration={integration}
-          layout="TOTEM"
-        />
-      </VisemeProvider>
-      </ArtifactProvider>
-    </I18nWrapper>
-  );
-  expect(container).toMatchSnapshot();
-});

package/src/components/layouts/Totem.tsx

@@ -1,49 +0,0 @@
-import React from 'react';
-import Spin from '../ui/Spin';
-import { LayoutProps } from '../MemoriWidget/MemoriWidget';
-
-const TotemLayout: 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-totem-layout">
-      {poweredBy}
-
-      <div className="memori-totem-layout--header">
-        {Header && headerProps && <Header {...headerProps} />}
-      </div>
-
-      <div className="memori-totem-layout--avatar">
-        {Avatar && avatarProps && <Avatar chatProps={chatProps} {...avatarProps} isTotem />}
-      </div>
-
-      <div id="extension" />
-
-      <div className="memori-totem-layout--controls">
-        {sessionId && hasUserActivatedSpeak && Chat && chatProps ? (
-          <Chat {...chatProps} />
-        ) : startPanelProps ? (
-          <StartPanel {...startPanelProps} />
-        ) : null}
-      </div>
-    </Spin>
-  </>
-);
-
-export default TotemLayout;

package/src/components/layouts/WebsiteAssistant.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 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

@@ -1,132 +0,0 @@
-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 { useTranslation } from 'react-i18next';
-
-const WebsiteAssistantLayout: React.FC<LayoutProps> = ({
-  Header,
-  headerProps,
-  Avatar,
-  avatarProps,
-  Chat,
-  chatProps,
-  StartPanel,
-  startPanelProps,
-  integrationStyle,
-  sessionId,
-  hasUserActivatedSpeak,
-  loading = false,
-  poweredBy,
-  avatar3dHidden,
-}) => {
-  const { t } = useTranslation();
-  const [collapsed, _setCollapsed] = useState(true);
-  const [expandedKey, setExpandedKey] = useState<string>();
-
-  const stopAudio = useMemo(() => chatProps?.stopAudio, [chatProps?.stopAudio]);
-
-  const setCollapsed = (collapsed: boolean) => {
-    _setCollapsed(collapsed);
-    setExpandedKey(collapsed ? undefined : new Date().toISOString());
-    try {
-      stopAudio?.();
-    } catch (e) {
-      console.log(e);
-    }
-  };
-
-  return (
-    <>
-      {collapsed && (
-        <div className="memori-website_assistant--trigger">
-          <Button
-            className="memori-website_assistant--trigger-button"
-            ghost
-            shape="circle"
-            onClick={() => setCollapsed(false)}
-            title={t('expand') || 'Expand'}
-          >
-            <Blob avatar={avatarProps?.memori.avatarURL} />
-          </Button>
-        </div>
-      )}
-      <div
-        className={`memori-website_assistant--${
-          collapsed ? 'collapsed' : 'expanded'
-        }`}
-      >
-        {!collapsed && (
-          <>
-            {integrationStyle}
-
-            <Spin
-              spinning={loading}
-              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
-                    {...headerProps}
-                    showSettings={false}
-                    showReload={false}
-                  />
-              )}
-
-              {!(avatar3dHidden === true || avatar3dHidden === 'true') && (
-                <div className="memori-website_assistant-layout--avatar">
-                  {Avatar && avatarProps && (
-                    <Avatar
-                      {...avatarProps}
-                      integrationConfig={
-                        avatarProps.integrationConfig
-                          ? {
-                              ...avatarProps.integrationConfig,
-                              avatarURL: avatarProps.integrationConfig?.avatarURL
-                                ? `${
-                                    avatarProps.integrationConfig?.avatarURL.split(
-                                      '#'
-                                    )[0]
-                                  }#${expandedKey}`
-                                : undefined,
-                            }
-                          : {}
-                      }
-                      key={expandedKey}
-                    />
-                  )}
-                </div>
-              )}
-
-              <div id="extension" />
-
-              <div className="memori-website_assistant-layout--controls">
-                {sessionId && hasUserActivatedSpeak && Chat && chatProps ? (
-                  <Chat {...chatProps} />
-                ) : startPanelProps ? (
-                  <StartPanel {...startPanelProps} />
-                ) : null}
-              </div>
-            </Spin>
-          </>
-        )}
-      </div>
-    </>
-  );
-};
-
-export default WebsiteAssistantLayout;