@memori.ai/memori-react 8.45.1 → 8.45.4

package/src/components/Auth/Auth.tsx

@@ -1,201 +0,0 @@
-import React, { useState } from 'react';
-import { useTranslation } from 'react-i18next';
-import Button from '../ui/Button';
-import Modal from '../ui/Modal';
-import { useForm, SubmitHandler } from 'react-hook-form';
-import Plus from '../icons/Plus';
-
-export interface Props {
-  pwdOrTokens: null | 'password' | 'tokens';
-  setPwdOrTokens: (state: null | 'password' | 'tokens') => void;
-  onFinish?: (values: AuthInputs) => Promise<void>;
-  minimumNumberOfRecoveryTokens?: number;
-  showTokens?: boolean;
-  withModal?: boolean;
-  openModal?: boolean;
-}
-
-type AuthInputs = {
-  password?: string;
-  tokens?: string[];
-};
-
-function createArrayWithNumbers(length: number) {
-  return Array.from({ length }, (_, i) => i);
-}
-
-export const AuthWidget = ({
-  pwdOrTokens,
-  setPwdOrTokens,
-  onFinish,
-  minimumNumberOfRecoveryTokens = 1,
-  showTokens = true,
-  openModal = false,
-  withModal = false,
-}: Props) => {
-  const { t } = useTranslation();
-  const {
-    register,
-    handleSubmit,
-    formState: { errors },
-    setError,
-  } = useForm<AuthInputs>();
-  const [numTokens, setNumTokens] = useState(1);
-
-  const [showModal, setShowModal] = useState(!!pwdOrTokens);
-  const [isSubmitting, setIsSubmitting] = useState(false);
-
-  const onSubmit: SubmitHandler<AuthInputs> = data => {
-    const missingPassword = pwdOrTokens === 'password' && !data.password?.length;
-    const invalidTokens =
-      pwdOrTokens === 'tokens' &&
-      ((data?.tokens?.length || 0) < minimumNumberOfRecoveryTokens ||
-        !data?.tokens?.every(t => t.length));
-
-    if (missingPassword) {
-      setError('password', {
-        type: 'required',
-        message: t('auth.passwordRequired') || 'Password required',
-      });
-      return;
-    }
-
-    if (invalidTokens) {
-      setError('tokens', {
-        type: 'minLength',
-        message: t('auth.tokens') || 'Tokens',
-      });
-      return;
-    }
-
-    if (onFinish) {
-      setIsSubmitting(true);
-      onFinish(data)
-        .then(() => {
-          setShowModal(false);
-        })
-        .catch(() => {
-          if (pwdOrTokens === 'password') {
-            setError('password', {
-              type: 'auth',
-              message: t('auth.invalidCredentials') || 'Invalid credentials',
-            });
-          } else if (pwdOrTokens === 'tokens') {
-            setError('tokens', {
-              type: 'auth',
-              message: t('auth.invalidCredentials') || 'Invalid credentials',
-            });
-          }
-        })
-        .finally(() => {
-          setIsSubmitting(false);
-        });
-    }
-  };
-
-  const form = (
-    <form
-      name="memoriAuth"
-      onSubmit={handleSubmit(onSubmit)}
-      className="memori-auth-widget--form"
-    >
-      {(pwdOrTokens === 'password' || !showTokens) && (
-        <fieldset className="memori-auth-widget--password-fieldset">
-          <label>
-            Password:{' '}
-            <input
-              className="memori-auth-widget--input"
-              required
-              type="password"
-              placeholder="Password"
-              {...register('password', { required: true })}
-            />
-          </label>
-          {showTokens && (
-            <>
-              <hr />
-              <Button outlined onClick={() => setPwdOrTokens('tokens')}>
-                {t('auth.useRecoveryTokens') || 'Recovery tokens'}
-              </Button>
-            </>
-          )}
-        </fieldset>
-      )}
-      {pwdOrTokens === 'tokens' && showTokens && (
-        <fieldset className="memori-auth-widget--tokens-fieldset" name="tokens">
-          <legend>{t('auth.tokens')}: </legend>
-          {createArrayWithNumbers(numTokens).map(idx => {
-            return (
-              <label className="memori-auth-widget--token" key={idx}>
-                <input
-                  type="password"
-                  className="memori-auth-widget--input"
-                  placeholder="Recovery token"
-                  required
-                  autoComplete="off"
-                  {...register(`tokens.${idx}`, {
-                    required: true,
-                  })}
-                />
-              </label>
-            );
-          })}
-
-          <Button
-            onClick={() => setNumTokens(t => t + 1)}
-            className="memori-auth-widget--token-add"
-            icon={<Plus />}
-          >
-            {t('auth.addToken') || 'Add token'}
-          </Button>
-
-          <hr />
-          <Button outlined onClick={() => setPwdOrTokens('password')}>
-            {t('auth.usePassword') || 'Password'}
-          </Button>
-        </fieldset>
-      )}
-
-      {errors.tokens?.type === 'minLength' && (
-        <div className="memori-auth-widget--error">
-          {t('auth.atLeast') || 'At least'} {minimumNumberOfRecoveryTokens}
-        </div>
-      )}
-
-      {errors.password?.type === 'auth' && (
-        <div className="memori-auth-widget--error">
-          {errors.password.message}
-        </div>
-      )}
-      {errors.tokens?.type === 'auth' && (
-        <div className="memori-auth-widget--error">
-          {errors.tokens.message}
-        </div>
-      )}
-
-      <Button
-        htmlType="submit"
-        primary
-        className="memori-auth-widget--submit"
-        loading={isSubmitting}
-      >
-        {t('confirm') || 'Submit'}
-      </Button>
-    </form>
-  );
-
-  return withModal ? (
-    <Modal
-      open={openModal || showModal}
-      title={t('auth.title') || 'Authentication'}
-      onClose={() => setPwdOrTokens(null)}
-      closable={false}
-    >
-      {form}
-    </Modal>
-  ) : (
-    form
-  );
-};
-
-export default AuthWidget;

package/src/components/Auth/__snapshots__/Auth.test.tsx.snap

@@ -1,143 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`renders Auth on tokens unchanged 1`] = `
-<div>
-  <form
-    class="memori-auth-widget--form"
-    name="memoriAuth"
-  >
-    <fieldset
-      class="memori-auth-widget--tokens-fieldset"
-      name="tokens"
-    >
-      <legend>
-        auth.tokens
-        : 
-      </legend>
-      <label
-        class="memori-auth-widget--token"
-      >
-        <input
-          autocomplete="off"
-          class="memori-auth-widget--input"
-          name="tokens.0"
-          placeholder="Recovery token"
-          required=""
-          type="password"
-        />
-      </label>
-      <button
-        class="memori-button memori-button--rounded memori-button--padded memori-button--with-icon memori-auth-widget--token-add"
-      >
-        <span
-          class="memori-button--icon"
-        >
-          <svg
-            aria-hidden="true"
-            focusable="false"
-            role="img"
-            viewBox="0 0 1024 1024"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              d="M482 152h60q8 0 8 8v704q0 8-8 8h-60q-8 0-8-8V160q0-8 8-8z"
-            />
-            <path
-              d="M176 474h672q8 0 8 8v60q0 8-8 8H176q-8 0-8-8v-60q0-8 8-8z"
-            />
-          </svg>
-        </span>
-        auth.addToken
-      </button>
-      <hr />
-      <button
-        class="memori-button memori-button--outlined memori-button--rounded memori-button--padded"
-      >
-        auth.usePassword
-      </button>
-    </fieldset>
-    <button
-      class="memori-button memori-button--primary memori-button--rounded memori-button--padded memori-auth-widget--submit"
-      type="submit"
-    >
-      confirm
-    </button>
-  </form>
-</div>
-`;
-
-exports[`renders Auth unchanged 1`] = `
-<div>
-  <form
-    class="memori-auth-widget--form"
-    name="memoriAuth"
-  >
-    <fieldset
-      class="memori-auth-widget--password-fieldset"
-    >
-      <label>
-        Password:
-         
-        <input
-          class="memori-auth-widget--input"
-          name="password"
-          placeholder="Password"
-          required=""
-          type="password"
-        />
-      </label>
-    </fieldset>
-    <button
-      class="memori-button memori-button--primary memori-button--rounded memori-button--padded memori-auth-widget--submit"
-      type="submit"
-    >
-      confirm
-    </button>
-  </form>
-</div>
-`;
-
-exports[`renders Auth with modal unchanged 1`] = `
-<div>
-  <div
-    style="position: fixed; top: 1px; left: 1px; width: 1px; height: 0px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0px, 0px, 0px, 0px); white-space: nowrap; border-width: 0px; display: none;"
-  />
-</div>
-`;
-
-exports[`renders Auth with tokens unchanged 1`] = `
-<div>
-  <form
-    class="memori-auth-widget--form"
-    name="memoriAuth"
-  >
-    <fieldset
-      class="memori-auth-widget--password-fieldset"
-    >
-      <label>
-        Password:
-         
-        <input
-          class="memori-auth-widget--input"
-          name="password"
-          placeholder="Password"
-          required=""
-          type="password"
-        />
-      </label>
-      <hr />
-      <button
-        class="memori-button memori-button--outlined memori-button--rounded memori-button--padded"
-      >
-        auth.useRecoveryTokens
-      </button>
-    </fieldset>
-    <button
-      class="memori-button memori-button--primary memori-button--rounded memori-button--padded memori-auth-widget--submit"
-      type="submit"
-    >
-      confirm
-    </button>
-  </form>
-</div>
-`;

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',
-};