@memori.ai/memori-react 8.45.2 → 8.45.4

package/src/components/Avatar/Avatar.css

@@ -1,151 +0,0 @@
-@media (min-width: 870px) {
-    .memori--blob-container {
-        position: relative;
-        top: 50%;
-        width: 100%;
-        margin-bottom: auto;
-    }
-
-    .memori--blob-container .memori-blob {
-        top: 50%;
-        left: 50%;
-        width: 70%;
-        max-width: 300px;
-        height: 70%;
-        max-height: 300px;
-    }
-
-    .memori--blob-container .memori-blob figure {
-        width: 100%;
-        height: auto;
-        aspect-ratio: 1;
-    }
-
-    .memori--blob-container .memori-blob .mainDiv {
-        overflow: hidden;
-        width: 100%;
-        height: auto;
-        padding-top: 100%;
-    }
-}
-
-@media (max-width: 870px) {
-    .memori--blob-container {
-        position: static;
-        display: none;
-        width: 100%;
-    }
-
-    .memori--blob-container .memori-blob {
-        position: relative;
-    }
-}
-
-@media (max-width: 480px) {
-    .memori--blob-container {
-        display: none;
-    }
-}
-
-.memori--avatar-wrapper {
-    z-index: 100;
-    display: flex;
-    width: 100%;
-    height: 100%;
-    align-items: center;
-    justify-content: center;
-}
-
-.memori--avatar-wrapper.hidden {
-    display: none;
-}
-
-@media (max-width: 870px) {
-    /* .memori--avatar-wrapper div,
-    .memori--avatar-wrapper canvas,
-    .memori--avatar-wrapper model-viewer {
-        width: 150px !important;
-        height: 150px !important;
-    } */
-
-    .memori--avatar-wrapper model-viewer {
-        margin-top: 2rem;
-    }
-
-    .memori--avatar-wrapper div {
-        top: 1rem;
-    }
-}
-
-@media (orientation: landscape) and (max-width: 870px) {
-    .memori--avatar-wrapper {
-        display: none;
-    }
-}
-
-.memori--avatar-wrapper .avatar-loader figure {
-    width: 100%;
-    height: 300px;
-    margin: 0;
-}
-
-.memori--avatar-wrapper .avatar-loader figure img {
-    width: 250px;
-    height: 250px;
-}
-
-@media (max-width: 870px) {
-    .memori--avatar-wrapper .avatar-loader figure img {
-        width: 150px;
-        height: 150px;
-    }
-}
-
-.memori--avatar-wrapper .avatar-loader figcaption {
-    max-height: 50px;
-    font-size: 0.8em;
-    text-align: center;
-}
-
-.memori--avatar-toggle {
-    position: absolute;
-    z-index: 1001;
-    top: 0;
-    right: 0;
-    display: inline-flex;
-    align-items: center;
-    text-align: right;
-}
-
-@media (min-width: 871px) {
-    .memori--avatar-toggle {
-        display: none;
-    }
-}
-
-.memori--avatar-toggle button.memori-button {
-    color: var(--memori-primary, #1890ff);
-}
-
-.memori--avatar-toggle .memori--avatar-toggle-text {
-    font-size: 0.85em;
-}
-
-.memori--avatar-link-to-integrations {
-    position: absolute;
-    z-index: 101;
-    top: 0;
-    left: 0;
-    display: flex;
-    width: 100%;
-    height: 100%;
-    align-items: flex-start;
-    justify-content: flex-start;
-    padding: 2rem;
-}
-
-@media (max-width: 768px) {
-    .memori--avatar-link-to-integrations {
-        display: none;
-    }
-}

package/src/components/Avatar/Avatar.stories.tsx

@@ -1,160 +0,0 @@
-import React from 'react';
-import { Meta, Story } from '@storybook/react';
-import { memori, tenant, integration } from '../../mocks/data';
-import I18nWrapper from '../../I18nWrapper';
-import Avatar, { Props } from './Avatar';
-
-import './Avatar.css';
-import { ArtifactProvider } from '../MemoriArtifactSystem/context/ArtifactContext';
-import { VisemeProvider } from '../../context/visemeContext';
-
-const meta: Meta = {
-  title: 'Widget/Avatar',
-  component: Avatar,
-  argTypes: {
-    avatar3dVisible: {
-      control: {
-        type: 'boolean',
-      },
-    },
-  },
-  parameters: {
-    controls: { expanded: true },
-  },
-};
-
-export default meta;
-
-const integrationConfig = JSON.parse(integration.customData ?? '{}');
-
-const Template: Story<Props> = args => {
-  const [avatar3dVisible, setAvatar3dVisible] = React.useState(
-    args.avatar3dVisible
-  );
-
-  return (
-    <I18nWrapper>
-      <VisemeProvider>
-        {' '}
-        <ArtifactProvider>
-          <div
-            style={
-              args.integrationConfig?.avatar === 'customglb' ||
-              args.integrationConfig?.avatar === 'readyplayerme' ||
-              args.integrationConfig?.avatar === 'readyplayerme-full' ||
-              args.integrationConfig?.avatar === 'avatar-configurator'
-                ? {}
-                : { marginTop: '20vw' }
-            }
-          >
-            <Avatar
-              {...args}
-              integrationConfig={
-                args.integrationConfig
-                  ? {
-                      ...args.integrationConfig,
-                      avatarURL:
-                        args.integrationConfig.avatarURL?.split('#')?.[0] +
-                        `#${new Date(Date.now()).toISOString()}`,
-                    }
-                  : undefined
-              }
-              avatar3dVisible={avatar3dVisible}
-              setAvatar3dVisible={setAvatar3dVisible}
-              key={Date.now()}
-            />
-          </div>
-        </ArtifactProvider>
-      </VisemeProvider>
-    </I18nWrapper>
-  );
-};
-
-// 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 Default = Template.bind({});
-Default.args = {
-  memori,
-  tenant,
-  instruct: false,
-  avatar3dVisible: true,
-  setAvatar3dVisible: () => {},
-  hasUserActivatedSpeak: false,
-  isPlayingAudio: false,
-};
-
-export const AvatarInBlob = Template.bind({});
-AvatarInBlob.args = {
-  memori,
-  tenant,
-  instruct: false,
-  avatar3dVisible: true,
-  setAvatar3dVisible: () => {},
-  hasUserActivatedSpeak: false,
-  isPlayingAudio: false,
-  integrationConfig: {
-    ...integrationConfig,
-    avatar: 'userAvatar',
-    avatarURL: memori.avatarURL,
-  },
-};
-
-export const CustomGLBModel = Template.bind({});
-CustomGLBModel.args = {
-  memori,
-  tenant,
-  instruct: false,
-  avatar3dVisible: true,
-  setAvatar3dVisible: () => {},
-  hasUserActivatedSpeak: false,
-  isPlayingAudio: false,
-  integrationConfig: {
-    ...integrationConfig,
-    avatar: 'customglb',
-    avatarURL:
-      'https://assets.memori.ai/api/v2/asset/7383f05a-0788-49b0-b9b9-3bfc402c7ddf.glb#1669136149862',
-  },
-};
-
-export const ReadyPlayerMeAvatar = Template.bind({});
-ReadyPlayerMeAvatar.args = {
-  memori,
-  tenant,
-  instruct: false,
-  avatar3dVisible: true,
-  setAvatar3dVisible: () => {},
-  hasUserActivatedSpeak: false,
-  isPlayingAudio: false,
-  integration,
-  integrationConfig,
-};
-
-export const FullbodyReadyPlayerMeAvatar = Template.bind({});
-FullbodyReadyPlayerMeAvatar.args = {
-  memori,
-  tenant,
-  instruct: false,
-  avatar3dVisible: true,
-  setAvatar3dVisible: () => {},
-  hasUserActivatedSpeak: false,
-  isPlayingAudio: false,
-  integration,
-  integrationConfig: {
-    ...integrationConfig,
-    avatar: 'readyplayerme-full',
-    avatarURL:
-      'https://models.readyplayer.me/63b55751f17e295642bf07a2.glb#1669136149862',
-  },
-};
-
-export const AvatarConfigurator = Template.bind({});
-AvatarConfigurator.args = {
-  ...FullbodyReadyPlayerMeAvatar.args,
-  integrationConfig: {
-    ...integrationConfig,
-    avatar: 'avatar-configurator',
-    avatarURL:
-      'https://models.readyplayer.me/63b55751f17e295642bf07a2.glb#1669136149862',
-  },
-  avatarType: 'avatar3d',
-};

package/src/components/Avatar/Avatar.test.tsx

@@ -1,158 +0,0 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-import { memori, tenant, integration } from '../../mocks/data';
-import Avatar from './Avatar';
-import { VisemeProvider } from '../../context/visemeContext';
-import { ArtifactProvider } from '../MemoriArtifactSystem/context/ArtifactContext';
-const integrationConfig = JSON.parse(integration.customData ?? '{}');
-
-it('renders defualt Avatar (blob) unchanged', () => {
-  const { container } = render(
-    <VisemeProvider>
-      <ArtifactProvider>
-      <Avatar
-        memori={memori}
-      tenant={tenant}
-      isTotem={false}
-      setEnablePositionControls={() => {}}
-      instruct={false}
-      avatar3dVisible={true}
-      setAvatar3dVisible={() => {}}
-      hasUserActivatedSpeak={false}
-        isPlayingAudio={false}
-      />
-      </ArtifactProvider>
-    </VisemeProvider>
-  );
-  expect(container).toMatchSnapshot();
-});
-
-it('renders Avatar with blob and avatar in blob unchanged', () => {
-  const { container } = render(
-    <VisemeProvider>
-      <Avatar
-        memori={memori}
-        integrationConfig={{
-        ...integrationConfig,
-        avatar: 'userAvatar',
-        avatarURL: memori.avatarURL,
-      }}
-      tenant={tenant}
-      instruct={false}
-      isTotem={false}
-      setEnablePositionControls={() => {}}
-      avatar3dVisible={true}
-      setAvatar3dVisible={() => {}}
-      hasUserActivatedSpeak={false}
-      isPlayingAudio={false}
-      />
-    </VisemeProvider>
-  );
-  expect(container).toMatchSnapshot();
-});
-
-it('renders Avatar with custom glb model unchanged', () => {
-  const { container } = render(
-    <VisemeProvider>
-      <Avatar
-        memori={memori}
-        integration={integration}
-        isTotem={false}
-        setEnablePositionControls={() => {}}
-        integrationConfig={{
-        ...integrationConfig,
-        avatar: 'customglb',
-        avatarURL:
-          'https://assets.memori.ai/api/v2/asset/7383f05a-0788-49b0-b9b9-3bfc402c7ddf.glb#1669136149862',
-      }}
-      tenant={tenant}
-      instruct={false}
-      avatar3dVisible={true}
-      setAvatar3dVisible={() => {}}
-      hasUserActivatedSpeak={false}
-      isPlayingAudio={false}
-      />
-    </VisemeProvider>
-  );
-  expect(container).toMatchSnapshot();
-});
-
-it('renders Avatar with rpm 3d avatar unchanged', () => {
-  const { container } = render( 
-    <VisemeProvider>
-      <Avatar
-        memori={memori}
-      integration={integration}
-      isTotem={false}
-      setEnablePositionControls={() => {}}
-      integrationConfig={{
-        ...integrationConfig,
-        avatar: 'readyplayerme',
-        avatarURL:
-          'https://assets.memori.ai/api/v2/asset/b791f77c-1a94-4272-829e-eca82fcc62b7.glb',
-      }}
-      tenant={tenant}
-      instruct={false}
-      avatar3dVisible={true}
-      setAvatar3dVisible={() => {}}
-        hasUserActivatedSpeak={false}
-        isPlayingAudio={false}
-      />
-    </VisemeProvider>
-  );
-  expect(container).toMatchSnapshot();
-});
-
-it('renders Avatar with avatar-configurator like readyplayerme-full', () => {
-  const { container } = render(
-    <VisemeProvider>
-      <Avatar
-        memori={memori}
-        integration={integration}
-        isTotem={false}
-        setEnablePositionControls={() => {}}
-        integrationConfig={{
-          ...integrationConfig,
-          avatar: 'avatar-configurator',
-          avatarURL:
-            'https://assets.memori.ai/api/v2/asset/b791f77c-1a94-4272-829e-eca82fcc62b7.glb',
-        }}
-        tenant={tenant}
-        instruct={false}
-        avatar3dVisible={true}
-        setAvatar3dVisible={() => {}}
-        hasUserActivatedSpeak={false}
-        isPlayingAudio={false}
-        avatarType="avatar3d"
-      />
-    </VisemeProvider>
-  );
-  expect(container).toMatchSnapshot();
-});
-
-it('renders Avatar with avatar-configurator on totem layout unchanged', () => {
-  const { container } = render(
-    <VisemeProvider>
-      <Avatar
-        memori={memori}
-        integration={integration}
-        isTotem
-        setEnablePositionControls={() => {}}
-        integrationConfig={{
-          ...integrationConfig,
-          avatar: 'avatar-configurator',
-          avatarURL:
-            'https://assets.memori.ai/api/v2/asset/b791f77c-1a94-4272-829e-eca82fcc62b7.glb',
-        }}
-        tenant={tenant}
-        instruct={false}
-        avatar3dVisible={true}
-        setAvatar3dVisible={() => {}}
-        hasUserActivatedSpeak={false}
-        isPlayingAudio={false}
-        avatarType="avatar3d"
-      />
-    </VisemeProvider>
-  );
-  expect(container).toMatchSnapshot();
-});

package/src/components/Avatar/Avatar.tsx

@@ -1,245 +0,0 @@
-import React, { memo, useEffect, useState } from 'react';
-import {
-  Integration,
-  Memori,
-  Tenant,
-} from '@memori.ai/memori-api-client/dist/types';
-import ErrorBoundary from '../ErrorBoundary/ErrorBoundary';
-import Tooltip from '../ui/Tooltip';
-import { getResourceUrl } from '../../helpers/media';
-import Blob from '../Blob/Blob';
-import ModelViewer from '../CustomGLBModelViewer/ModelViewer';
-import Button from '../ui/Button';
-import { useTranslation } from 'react-i18next';
-import Eye from '../icons/Eye';
-import EyeInvisible from '../icons/EyeInvisible';
-import Edit from '../icons/Edit';
-import cx from 'classnames';
-import ContainerAvatarView from './AvatarView';
-import { useViseme } from '../../context/visemeContext';
-import { is3dAvatarWithUrl, usesRpmAvatarView } from '../../types/integration';
-
-export interface Props {
-  memori: Memori;
-  integration?: Integration;
-  integrationConfig?: { [key: string]: any };
-  tenant?: Tenant;
-  instruct?: boolean;
-  hasUserActivatedSpeak?: boolean;
-  avatar3dVisible?: boolean;
-  setAvatar3dVisible: (visible: boolean) => void;
-  isPlayingAudio?: boolean;
-  loading?: boolean;
-  baseUrl?: string;
-  apiUrl?: string;
-  animation?: string;
-  isZoomed?: boolean;
-  chatProps?: any;
-  enablePositionControls?: boolean;
-  setEnablePositionControls: (value: boolean) => void;
-  avatarType?: 'blob' | 'avatar3d' | null;
-  isTotem?: boolean;
-}
-
-const Avatar: React.FC<Props> = ({
-  memori,
-  integration,
-  integrationConfig,
-  tenant,
-  instruct = false,
-  avatar3dVisible = false,
-  setAvatar3dVisible,
-  hasUserActivatedSpeak = false,
-  isPlayingAudio = false,
-  loading = false,
-  baseUrl,
-  apiUrl,
-  animation,
-  isZoomed = false,
-  chatProps,
-  avatarType = null,
-  enablePositionControls,
-  setEnablePositionControls,
-  isTotem = false,
-}) => {
-  const { t } = useTranslation();
-  const [isClient, setIsClient] = useState(false);
-
-  const { stopProcessing, updateCurrentViseme, resetVisemeQueue } = useViseme();
-
-  useEffect(() => {
-    setIsClient(true);
-  }, []);
-
-  // Get the avatar URL, if the avatar is a user avatar, the avatar URL is the user avatar URL, if the avatar is a default avatar, the avatar URL is the default avatar URL
-  const getAvatarUrl = () => {
-    if (
-      integrationConfig?.avatar === 'userAvatar' &&
-      memori.avatarURL &&
-      memori.avatarURL.length > 0
-    ) {
-      return getResourceUrl({
-        type: 'avatar',
-        tenantID: tenant?.name,
-        resourceURI: memori.avatarURL,
-        baseURL: baseUrl,
-        apiURL: apiUrl,
-      });
-    }
-    return undefined;
-  };
-
-  const renderAvatar = () => {
-    if (
-      is3dAvatarWithUrl(
-        integrationConfig?.avatar,
-        integrationConfig?.avatarURL
-      ) &&
-      avatarType &&
-      avatarType !== 'blob'
-    ) {
-      return (
-        <>
-          <div
-            className={cx(
-              'memori--avatar-wrapper',
-              `memori--avatar-${integrationConfig?.avatar || 'default'}`,
-              {
-                hidden: !avatar3dVisible,
-              }
-            )}
-          >
-            {renderAvatarContent()}
-          </div>
-          {renderAvatarToggle()}
-        </>
-      );
-    }
-    return (
-      <div className="memori--blob-container">
-        {isClient && <Blob speaking={isPlayingAudio} avatar={getAvatarUrl()} />}
-      </div>
-    );
-  };
-
-  const renderAvatarContent = () => {
-    if (!isClient || !integrationConfig) return null;
-    if (usesRpmAvatarView(integrationConfig.avatar)) {
-      return (
-        <ErrorBoundary
-          fallback={
-            <div className="memori--blob-container">
-              {isClient && (
-                <Blob speaking={isPlayingAudio} avatar={getAvatarUrl()} />
-              )}
-            </div>
-          }
-        >
-          <ContainerAvatarView
-            enablePositionControls={enablePositionControls}
-            updateCurrentViseme={updateCurrentViseme}
-            url={integrationConfig.avatarURL}
-            sex={memori.voiceType === 'FEMALE' ? 'FEMALE' : 'MALE'}
-            fallbackImg={getAvatarUrl()}
-            headMovement
-            eyeBlink
-            animation={animation}
-            halfBody={integrationConfig.avatar === 'readyplayerme'}
-            speaking={isPlayingAudio}
-            loading={loading}
-            style={getAvatarStyle()}
-            stopProcessing={stopProcessing}
-            resetVisemeQueue={resetVisemeQueue}
-            isZoomed={isZoomed}
-            isTotem={isTotem}
-            chatEmission={chatProps?.dialogState?.emission}
-            setEnablePositionControls={setEnablePositionControls}
-          />
-        </ErrorBoundary>
-      );
-    }
-
-    if (integrationConfig.avatar === 'customglb') {
-      return (
-        <ModelViewer
-          poster={getAvatarUrl() || ''}
-          src={integrationConfig.avatarURL}
-          alt=""
-        />
-      );
-    }
-
-    return null;
-  };
-
-  // Render the avatar toggle
-  const renderAvatarToggle = () => (
-    <div className="memori--avatar-toggle">
-      <Button
-        ghost
-        onClick={() => setAvatar3dVisible(!avatar3dVisible)}
-        icon={avatar3dVisible ? <EyeInvisible /> : <Eye />}
-      >
-        <span className="memori--avatar-toggle-text">
-          {avatar3dVisible ? t('hide') : t('show')}
-        </span>
-      </Button>
-    </div>
-  );
-
-  const getAvatarStyle = () => {
-    if (integrationConfig?.avatar === 'readyplayerme') {
-      return {
-        width: '100%',
-        height: '100%',
-        backgroundColor: 'none',
-        // borderRadius: '100%',
-        boxShadow: 'none',
-      };
-    }
-    return {
-      width: '100%',
-      height: '100%',
-      backgroundColor: 'none',
-    };
-  };
-
-  const renderIntegrationsLink = () => {
-    if (!(instruct && !hasUserActivatedSpeak && memori.isGiver && tenant?.name))
-      return null;
-
-    const href = `https://${tenant.name}/${
-      memori.culture === 'it-IT' ? 'it' : 'en'
-    }/${memori.ownerUserName}/${memori.name}/integrations${
-      integration?.integrationID
-        ? `?integration=${integration.integrationID}&openAvatarModal=true`
-        : ''
-    }`;
-
-    return (
-      <div className="memori--avatar-link-to-integrations">
-        <a
-          className="memori-button memori-button--circle memori-button--outlined"
-          href={href}
-        >
-          <Tooltip content={t('widgetgoToIntegrationsToCustomizeAvatar')}>
-            <span className="memori-button--icon">
-              <Edit />
-            </span>
-          </Tooltip>
-        </a>
-      </div>
-    );
-  };
-
-  return (
-    <>
-      {renderAvatar()}
-      {renderIntegrationsLink()}
-    </>
-  );
-};
-
-export default memo(Avatar, (prevProps, nextProps) => {
-  return JSON.stringify(prevProps) === JSON.stringify(nextProps);
-});