@memori.ai/memori-react 6.8.1 → 6.8.4

package/src/components/AvatarView/index.tsx

@@ -1,101 +0,0 @@
-import { CSSProperties } from 'react';
-import React, { Suspense } from 'react';
-import Avatar from './components/avatar';
-import FullbodyAvatar, { AvatarProps } from './components/fullbodyAvatar';
-import Loader from './components/loader';
-import { Canvas } from '@react-three/fiber';
-import { OrbitControls, SpotLight, Environment } from '@react-three/drei';
-import { isAndroid, isiOS } from '../../helpers/utils';
-
-export interface Props {
-  url: string;
-  sex: 'MALE' | 'FEMALE';
-  fallbackImg?: string;
-  eyeBlink?: boolean;
-  headMovement?: boolean;
-  rotateAvatar?: boolean;
-  speaking?: boolean;
-  style?: CSSProperties;
-  fallback?: React.ReactNode;
-  halfBody?: boolean;
-  animation?: AvatarProps['animation'];
-}
-
-const defaultStylesHalfBody = {
-  width: '250px',
-  height: '250px',
-  backgroundColor: 'white',
-  borderRadius: '100%',
-};
-
-const defaultStylesFullBody = {
-  width: '500px',
-  height: '500px',
-  backgroundColor: 'white',
-};
-
-export default function AvatarView({
-  url,
-  sex,
-  fallbackImg,
-  style,
-  rotateAvatar,
-  eyeBlink,
-  headMovement,
-  speaking,
-  fallback,
-  halfBody = true,
-  animation,
-}: Props) {
-  const defaultStyles = halfBody
-    ? defaultStylesHalfBody
-    : defaultStylesFullBody;
-
-  return (
-    <Canvas
-      style={style || defaultStyles}
-      camera={
-        halfBody
-          ? {
-              fov: 40,
-              position: [0, 0, 0.6],
-            }
-          : { fov: 40, position: [0, 0.0000175, 3] }
-      }
-    >
-      <Suspense fallback={fallback || <Loader fallbackImg={fallbackImg} />}>
-        {isAndroid() || isiOS() ? (
-          <SpotLight
-            distance={100}
-            position={[-0.3, 0.2, 1.25]}
-            angle={Math.PI / 2}
-            attenuation={5}
-            anglePower={5}
-          />
-        ) : (
-          <Environment files="https://raw.githack.com/pmndrs/drei-assets/456060a26bbeb8fdf79326f224b6d99b8bcce736/hdri/venice_sunset_1k.hdr" />
-        )}
-        {rotateAvatar && halfBody && (
-          <OrbitControls enablePan={false} enableZoom={false} />
-        )}
-        {halfBody ? (
-          <Avatar
-            url={url}
-            eyeBlink={eyeBlink}
-            headMovement={headMovement}
-            speaking={speaking}
-          />
-        ) : (
-          <FullbodyAvatar
-            url={url}
-            sex={sex}
-            eyeBlink={eyeBlink}
-            headMovement={headMovement}
-            speaking={speaking}
-            animation={animation}
-          />
-        )}
-      </Suspense>
-    </Canvas>
-  );
-}

package/src/components/AvatarView/utils/useEyeBlink.ts

@@ -1,48 +0,0 @@
-import { SkinnedMesh } from 'three';
-import { Nodes } from './utils';
-import { useEffect } from 'react';
-import { useFrame } from '@react-three/fiber';
-
-let blinkTime: number = 999;
-let timeout: NodeJS.Timeout;
-
-let headMesh: SkinnedMesh;
-let morphIndex: number = 0;
-
-const setNextBlink = () => {
-  blinkTime = 0;
-  timeout = setTimeout(setNextBlink, Math.random() * 5000 + 2000);
-};
-
-export default function useEyeBlink(
-  enabled: boolean | undefined,
-  nodes: Nodes
-) {
-  useEffect(() => {
-    if (!enabled) return;
-
-    headMesh = (nodes.Wolf3D_Head || nodes.Wolf3D_Avatar) as SkinnedMesh;
-
-    if (headMesh?.morphTargetDictionary && headMesh?.morphTargetInfluences) {
-      morphIndex = headMesh.morphTargetDictionary.eyesClosed;
-    }
-
-    timeout = setTimeout(setNextBlink, 3000);
-
-    return () => {
-      clearTimeout(timeout);
-    };
-  }, [nodes, enabled]);
-
-  useFrame((_, delta) => {
-    if (!enabled) return;
-
-    if (blinkTime < 2 && headMesh?.morphTargetInfluences) {
-      let value = Math.abs(Math.sin((blinkTime * Math.PI) / 2));
-      blinkTime += delta * 10;
-      headMesh.morphTargetInfluences[morphIndex] = value;
-    } else if (headMesh?.morphTargetInfluences) {
-      headMesh.morphTargetInfluences[morphIndex] = 0;
-    }
-  });
-}

package/src/components/AvatarView/utils/useMouthSpeaking.ts

@@ -1,70 +0,0 @@
-import { Nodes } from './utils';
-import { SkinnedMesh } from 'three';
-import { useEffect } from 'react';
-import { useFrame } from '@react-three/fiber';
-
-let mouthMoveTime: number = 999;
-let timeout: NodeJS.Timeout;
-
-let mouthMesh: SkinnedMesh;
-let mouthOpenMorphIndex: number = 0;
-let mouthSmileMorphIndex: number = 0;
-let mouthFunnerMorphIndex: number = 0;
-let mouthPuckerMorphIndex: number = 0;
-
-const setNextMouthOpen = () => {
-  mouthMoveTime = 0;
-  timeout = setTimeout(setNextMouthOpen, Math.random() * 500);
-};
-
-// https://learn.microsoft.com/it-it/azure/cognitive-services/speech-service/how-to-speech-synthesis-viseme?tabs=visemeid&pivots=programming-language-javascript
-
-export default function useMouthSpeaking(
-  speaking: boolean | undefined,
-  nodes: Nodes
-) {
-  useEffect(() => {
-    if (!speaking) return;
-
-    mouthMesh = (nodes.Wolf3D_Head ||
-      nodes.Wolf3D_Avatar ||
-      nodes.Wolf3D_Avatar001) as SkinnedMesh;
-
-    if (mouthMesh?.morphTargetDictionary && mouthMesh?.morphTargetInfluences) {
-      mouthOpenMorphIndex = mouthMesh.morphTargetDictionary.mouthOpen;
-      mouthSmileMorphIndex = mouthMesh.morphTargetDictionary.mouthSmile;
-      mouthFunnerMorphIndex = mouthMesh.morphTargetDictionary.mouthFunner;
-      mouthPuckerMorphIndex = mouthMesh.morphTargetDictionary.mouthPucker;
-    }
-
-    timeout = setTimeout(setNextMouthOpen, 200);
-    // timeout = setTimeout(visemeDD = 0.4, start - audioOffset);
-
-    return () => {
-      clearTimeout(timeout);
-    };
-  }, [nodes, speaking]);
-
-  useFrame((_, delta) => {
-    if (!speaking) {
-      if (mouthMesh?.morphTargetInfluences) {
-        mouthMesh.morphTargetInfluences[mouthOpenMorphIndex] = 0;
-        mouthMesh.morphTargetInfluences[mouthSmileMorphIndex] = 0;
-        mouthMesh.morphTargetInfluences[mouthFunnerMorphIndex] = 0;
-        mouthMesh.morphTargetInfluences[mouthPuckerMorphIndex] = 0;
-      }
-    } else if (mouthMoveTime < 2 && mouthMesh?.morphTargetInfluences) {
-      let value = Math.abs(Math.sin((mouthMoveTime * Math.PI) / 2));
-      mouthMoveTime += delta * 10;
-      mouthMesh.morphTargetInfluences[mouthOpenMorphIndex] = value / 3;
-      mouthMesh.morphTargetInfluences[mouthSmileMorphIndex] = value / 10;
-      mouthMesh.morphTargetInfluences[mouthFunnerMorphIndex] = value / 7;
-      mouthMesh.morphTargetInfluences[mouthPuckerMorphIndex] = value / 5;
-    } else if (mouthMesh?.morphTargetInfluences) {
-      mouthMesh.morphTargetInfluences[mouthOpenMorphIndex] = 0;
-      mouthMesh.morphTargetInfluences[mouthSmileMorphIndex] = 0;
-      mouthMesh.morphTargetInfluences[mouthFunnerMorphIndex] = 0;
-      mouthMesh.morphTargetInfluences[mouthPuckerMorphIndex] = 0;
-    }
-  });
-}

package/src/components/AvatarView/utils/useSmile.ts

@@ -1,31 +0,0 @@
-import { Nodes } from './utils';
-import { SkinnedMesh } from 'three';
-import { useEffect } from 'react';
-import { useFrame } from '@react-three/fiber';
-
-let headMesh: SkinnedMesh;
-let mouthSmileMorphIndex: number = 0;
-
-export default function useSmile(smiling: boolean | undefined, nodes: Nodes) {
-  useEffect(() => {
-    if (!smiling) return;
-
-    headMesh = (nodes.Wolf3D_Head ||
-      nodes.Wolf3D_Avatar ||
-      nodes.Wolf3D_Avatar001) as SkinnedMesh;
-
-    if (headMesh?.morphTargetDictionary && headMesh?.morphTargetInfluences) {
-      mouthSmileMorphIndex = headMesh.morphTargetDictionary.mouthSmile;
-    }
-  }, [nodes, smiling]);
-
-  useFrame(() => {
-    if (!smiling) {
-      if (headMesh?.morphTargetInfluences) {
-        headMesh.morphTargetInfluences[mouthSmileMorphIndex] = 0;
-      }
-    } else if (headMesh?.morphTargetInfluences) {
-      headMesh.morphTargetInfluences[mouthSmileMorphIndex] = 1 / 3;
-    }
-  });
-}

package/src/components/ExportHistoryButton/ExportHistoryButton.stories.tsx

@@ -1,73 +0,0 @@
-import React from 'react';
-import { Meta, Story } from '@storybook/react';
-import ExportHistoryButton, { Props } from './ExportHistoryButton';
-import I18nWrapper from '../../I18nWrapper';
-import { memori, history } from '../../mocks/data';
-import Download from '../icons/Download';
-
-const meta: Meta = {
-  title: 'Export History Button',
-  component: ExportHistoryButton,
-  argTypes: {
-    memori: {
-      control: {
-        type: 'object',
-      },
-    },
-    icon: {
-      control: {
-        type: 'object',
-      },
-    },
-  },
-  parameters: {
-    controls: { expanded: true },
-  },
-};
-
-export default meta;
-
-const Template: Story<Props> = args => (
-  <I18nWrapper>
-    <div style={{ textAlign: 'right' }}>
-      <ExportHistoryButton {...args} />
-    </div>
-  </I18nWrapper>
-);
-
-const TemplateRight: Story<Props> = args => (
-  <I18nWrapper>
-    <div style={{ textAlign: 'left' }}>
-      <ExportHistoryButton {...args} />
-    </div>
-  </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,
-  history,
-};
-
-export const WithCustomIcon = Template.bind({});
-WithCustomIcon.args = {
-  memori,
-  history,
-  icon: <Download />,
-};
-
-export const WithCustomCSSClass = Template.bind({});
-WithCustomCSSClass.args = {
-  memori,
-  history,
-  buttonClassName: 'memori-button--primary',
-};
-
-export const AlignLeft = TemplateRight.bind({});
-AlignLeft.args = {
-  memori,
-  history,
-  align: 'left',
-};

package/src/components/ExportHistoryButton/ExportHistoryButton.test.tsx

@@ -1,69 +0,0 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-import ExportHistoryButton from './ExportHistoryButton';
-import { memori, history } from '../../mocks/data';
-import Download from '../icons/Download';
-
-import './ExportHistoryButton.css';
-
-it('renders ExportHistoryButton unchanged', () => {
-  const { container } = render(
-    <ExportHistoryButton memori={memori} history={[]} />
-  );
-  expect(container).toMatchSnapshot();
-});
-
-it('renders ExportHistoryButton unchanged with history', () => {
-  const { container } = render(
-    <ExportHistoryButton memori={memori} history={history} />
-  );
-  expect(container).toMatchSnapshot();
-});
-
-it('renders ExportHistoryButton unchanged with className', () => {
-  const { container } = render(
-    <ExportHistoryButton memori={memori} history={[]} className="test" />
-  );
-  expect(container).toMatchSnapshot();
-});
-
-it('renders ExportHistoryButton unchanged disabled', () => {
-  const { container } = render(
-    <ExportHistoryButton memori={memori} history={[]} disabled />
-  );
-  expect(container).toMatchSnapshot();
-});
-
-it('renders ExportHistoryButton unchanged with custom icon', () => {
-  const { container } = render(
-    <ExportHistoryButton
-      memori={memori}
-      history={history}
-      icon={<Download />}
-    />
-  );
-  expect(container).toMatchSnapshot();
-});
-
-it('renders ExportHistoryButton unchanged with custom button props', () => {
-  const { container } = render(
-    <ExportHistoryButton
-      memori={memori}
-      history={history}
-      icon={<Download />}
-      buttonClassName="test"
-    />
-  );
-  expect(container).toMatchSnapshot();
-});
-
-it('renders ExportHistoryButton unchanged with custom filename', () => {
-  const { container } = render(
-    <ExportHistoryButton
-      memori={memori}
-      history={[]}
-      filename="awanagana.txt"
-    />
-  );
-  expect(container).toMatchSnapshot();
-});

package/src/components/ExportHistoryButton/ExportHistoryButton.tsx

@@ -1,103 +0,0 @@
-import React from 'react';
-import { Memori, Message } from '@memori.ai/memori-api-client/dist/types';
-import { useTranslation } from 'react-i18next';
-import { Popover } from '@headlessui/react';
-import Button from '../ui/Button';
-import MessageIcon from '../icons/Message';
-import cx from 'classnames';
-
-export interface Props {
-  history: Message[];
-  memori: Memori;
-  icon?: React.ReactNode;
-  className?: string;
-  buttonClassName?: string;
-  align?: 'left' | 'right';
-  disabled?: boolean;
-  filename?: string;
-}
-
-const downloadFile = (text: string, filename = 'export-chat.txt') => {
-  const data = new Blob([text], { type: 'text/plain' });
-  const url = URL.createObjectURL(data);
-  const element = document.createElement('a');
-  element.setAttribute('href', url);
-  element.setAttribute('download', filename);
-  element.style.display = 'none';
-
-  document.body.appendChild(element);
-  element.click();
-  document.body.removeChild(element);
-};
-
-const ExportHistoryButton = ({
-  history,
-  memori,
-  className,
-  buttonClassName,
-  icon,
-  disabled = false,
-  align = 'right',
-  filename,
-}: Props) => {
-  const { t } = useTranslation();
-
-  const text = `${t(
-    'write_and_speak.conversationStartedLabel'
-  )} ${new Intl.DateTimeFormat('it', {
-    dateStyle: 'short',
-    timeStyle: 'short',
-  }).format(new Date())}\n\n`.concat(
-    history
-      .map(m => `${m.fromUser ? 'YOU' : memori.name}: ${m.text}`)
-      .join('\n')
-  );
-
-  return (
-    <Popover
-      title={t('write_and_speak.exportChatHistoryMessage')}
-      className={cx('memori-export-history-button', className, {
-        'memori-export-history-button--align-left': align === 'left',
-      })}
-    >
-      {({ close }) => (
-        <>
-          <Popover.Button
-            disabled={disabled}
-            className={cx(
-              'memori-button',
-              'memori-button--circle',
-              'memori-button--icon-only',
-              buttonClassName,
-              {
-                'memori-button--disabled': disabled,
-                'memori-button--primary': !disabled,
-              }
-            )}
-          >
-            <div className="memori-button--icon">{icon || <MessageIcon />}</div>
-          </Popover.Button>
-
-          <Popover.Panel className="memori-export-history-button--panel">
-            <p>{t('write_and_speak.exportChatHistory')}</p>
-            <Button
-              primary
-              onClick={() =>
-                downloadFile(
-                  text,
-                  filename ||
-                    `${memori.name.replace(/\W+/g, '-')}-export-chat.txt`
-                )
-              }
-            >
-              {t('yes') || 'Yes'}
-            </Button>
-            <Button onClick={() => close()}>{t('no') || 'No'}</Button>
-          </Popover.Panel>
-        </>
-      )}
-    </Popover>
-  );
-};
-
-export default ExportHistoryButton;