@memori.ai/memori-react 1.0.2 → 1.2.0

package/esm/index.stories.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
 import Memori from './index';
 const meta = {
     title: 'Default',
@@ -16,7 +16,7 @@ const meta = {
     },
 };
 export default meta;
-const Template = args => React.createElement(Memori, { ...args });
+const Template = args => _jsx(Memori, { ...args });
 export const Anonymous = Template.bind({});
 Anonymous.args = {
     ownerUserName: 'nzambello',

package/esm/index.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.stories.js","sourceRoot":"","sources":["../src/index.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,MAAiB,MAAM,SAAS,CAAC;AAExC,MAAM,IAAI,GAAS;IACjB,KAAK,EAAE,SAAS;IAChB,SAAS,EAAE,MAAM;IACjB,QAAQ,EAAE;QACR,gCAAgC,EAAE;YAChC,OAAO,EAAE;gBACP,IAAI,EAAE,MAAM;aACb;SACF;KACF;IACD,UAAU,EAAE;QACV,QAAQ,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE;QAC5B,MAAM,EAAE,YAAY;KACrB;CACF,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,MAAM,QAAQ,GAAiB,IAAI,CAAC,EAAE,CAAC,oBAAC,MAAM,OAAK,IAAI,GAAI,CAAC;AAI5D,MAAM,CAAC,MAAM,SAAS,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC3C,SAAS,CAAC,IAAI,GAAG;IACf,aAAa,EAAE,WAAW;IAC1B,UAAU,EAAE,QAAQ;IACpB,QAAQ,EAAE,oBAAoB;IAC9B,MAAM,EAAE,2BAA2B;IACnC,OAAO,EAAE,4BAA4B;IACrC,MAAM,EAAE,IAAI;IACZ,SAAS,EAAE,IAAI;CAChB,CAAC"}
+{"version":3,"file":"index.stories.js","sourceRoot":"","sources":["../src/index.stories.tsx"],"names":[],"mappings":";AAEA,OAAO,MAAiB,MAAM,SAAS,CAAC;AAExC,MAAM,IAAI,GAAS;IACjB,KAAK,EAAE,SAAS;IAChB,SAAS,EAAE,MAAM;IACjB,QAAQ,EAAE;QACR,gCAAgC,EAAE;YAChC,OAAO,EAAE;gBACP,IAAI,EAAE,MAAM;aACb;SACF;KACF;IACD,UAAU,EAAE;QACV,QAAQ,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE;QAC5B,MAAM,EAAE,YAAY;KACrB;CACF,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,MAAM,QAAQ,GAAiB,IAAI,CAAC,EAAE,CAAC,KAAC,MAAM,OAAK,IAAI,GAAI,CAAC;AAI5D,MAAM,CAAC,MAAM,SAAS,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC3C,SAAS,CAAC,IAAI,GAAG;IACf,aAAa,EAAE,WAAW;IAC1B,UAAU,EAAE,QAAQ;IACpB,QAAQ,EAAE,oBAAoB;IAC9B,MAAM,EAAE,2BAA2B;IACnC,OAAO,EAAE,4BAA4B;IACrC,MAAM,EAAE,IAAI;IACZ,SAAS,EAAE,IAAI;CAChB,CAAC"}

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.0.2",
+  "version": "1.2.0",
   "name": "@memori.ai/memori-react",
   "author": "Memori Srl",
   "main": "dist/index.js",
@@ -31,6 +31,7 @@
   "engines": {
     "node": ">=16"
   },
+  "packageManager": "yarn@3.2.3",
   "storybook": {
     "url": "https://memori-ai.github.io/memori-react/"
   },
@@ -108,8 +109,20 @@
       "ecmaVersion": "latest",
       "sourceType": "module"
     },
+    "settings": {
+      "react": {
+        "version": "detect"
+      }
+    },
+    "globals": {
+      "JSX": "readonly",
+      "NodeJS": "readonly",
+      "MutationCallback": "readonly"
+    },
     "extends": [
+      "eslint:recommended",
       "plugin:react/recommended",
+      "plugin:react/jsx-runtime",
       "plugin:storybook/recommended",
       "prettier"
     ],
@@ -125,6 +138,8 @@
       "endOfLine": "off",
       "react/no-unknown-property": "off",
       "react/require-default-props": "off",
+      "no-unused-vars": "off",
+      "no-extra-boolean-cast": "off",
       "no-console": "off",
       "no-shadow": "off"
     }
@@ -264,7 +279,7 @@
   "dependencies": {
     "@fontsource/exo-2": "^4.5.10",
     "@headlessui/react": "1.7.4",
-    "@memori.ai/memori-api-client": "^1.1.0",
+    "@memori.ai/memori-api-client": "^2.0.0",
     "@react-three/drei": "8.20.2",
     "@react-three/fiber": "7.0.25",
     "antd": "4.18.9",

package/src/components/Avatar/Avatar.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { memo, useEffect, useMemo, useState } from 'react';
 import {
   Integration,
   Memori,
@@ -6,7 +6,7 @@ import {
 } from '@memori.ai/memori-api-client/dist/types';
 import ErrorBoundary from '../ErrorBoundary/ErrorBoundary';
 import Tooltip from '../ui/Tooltip';
-import AvatarView from '../AvatarView';
+import AvatarView, { Props as AvatarViewProps } from '../AvatarView';
 import { getResourceUrl } from '../../helpers/media';
 import Blob from '../Blob/Blob';
 import ModelViewer from '../CustomGLBModelViewer/ModelViewer';
@@ -27,6 +27,7 @@ export interface Props {
   avatar3dVisible?: boolean;
   setAvatar3dVisible: (visible: boolean) => void;
   isPlayingAudio?: boolean;
+  loading?: boolean;
   baseUrl?: string;
   apiUrl?: string;
 }
@@ -41,6 +42,7 @@ const Avatar: React.FC<Props> = ({
   setAvatar3dVisible,
   hasUserActivatedSpeak = false,
   isPlayingAudio = false,
+  loading = false,
   baseUrl,
   apiUrl,
 }) => {
@@ -51,9 +53,24 @@ const Avatar: React.FC<Props> = ({
     setIsClient(true);
   }, []);
 
+  const animation = useMemo(
+    () =>
+      isPlayingAudio
+        ? (['Talk 1', 'Talk 2', 'Talk 3'][
+            Math.round(Math.random() * 2)
+          ] as AvatarViewProps['animation'])
+        : loading
+        ? 'Loading'
+        : (['Idle', 'Idle 1', 'Idle 2', 'Idle 3'][
+            Math.round(Math.random() * 3)
+          ] as AvatarViewProps['animation']),
+    [isPlayingAudio, loading]
+  );
+
   return (
     <>
       {(integrationConfig?.avatar === 'readyplayerme' ||
+        integrationConfig?.avatar === 'readyplayerme-full' ||
         integrationConfig?.avatar === 'customglb') &&
       integrationConfig?.avatarURL ? (
         <>
@@ -62,53 +79,65 @@ const Avatar: React.FC<Props> = ({
               hidden: !avatar3dVisible,
             })}
           >
-            {isClient && integrationConfig.avatar === 'readyplayerme' && (
-              <ErrorBoundary
-                fallback={
-                  <div className="memori--blob-container">
-                    {isClient && (
-                      <Blob
-                        speaking={isPlayingAudio}
-                        avatar={
-                          integrationConfig?.avatar === 'userAvatar' &&
-                          memori.avatarURL &&
-                          memori.avatarURL.length > 0
-                            ? getResourceUrl({
-                                type: 'avatar',
-                                tenantID: tenant?.id,
-                                resourceURI: memori.avatarURL,
-                                baseURL: baseUrl,
-                                apiURL: apiUrl,
-                              })
-                            : undefined
-                        }
-                      />
-                    )}
-                  </div>
-                }
-              >
-                <AvatarView
-                  url={integrationConfig.avatarURL}
-                  fallbackImg={getResourceUrl({
-                    type: 'avatar',
-                    tenantID: tenant?.id,
-                    resourceURI: memori.avatarURL,
-                    baseURL: baseUrl,
-                    apiURL: apiUrl,
-                  })}
-                  headMovement
-                  eyeBlink
-                  speaking={isPlayingAudio}
-                  style={{
-                    width: '300px',
-                    height: '300px',
-                    backgroundColor: 'none',
-                    borderRadius: '100%',
-                    boxShadow: 'none',
-                  }}
-                />
-              </ErrorBoundary>
-            )}
+            {isClient &&
+              (integrationConfig.avatar === 'readyplayerme' ||
+                integrationConfig.avatar === 'readyplayerme-full') && (
+                <ErrorBoundary
+                  fallback={
+                    <div className="memori--blob-container">
+                      {isClient && (
+                        <Blob
+                          speaking={isPlayingAudio}
+                          avatar={
+                            integrationConfig?.avatar === 'userAvatar' &&
+                            memori.avatarURL &&
+                            memori.avatarURL.length > 0
+                              ? getResourceUrl({
+                                  type: 'avatar',
+                                  tenantID: tenant?.id,
+                                  resourceURI: memori.avatarURL,
+                                  baseURL: baseUrl,
+                                  apiURL: apiUrl,
+                                })
+                              : undefined
+                          }
+                        />
+                      )}
+                    </div>
+                  }
+                >
+                  <AvatarView
+                    url={integrationConfig.avatarURL}
+                    fallbackImg={getResourceUrl({
+                      type: 'avatar',
+                      tenantID: tenant?.id,
+                      resourceURI: memori.avatarURL,
+                      baseURL: baseUrl,
+                      apiURL: apiUrl,
+                    })}
+                    headMovement
+                    eyeBlink
+                    halfBody={integrationConfig.avatar === 'readyplayerme'}
+                    animation={animation}
+                    speaking={isPlayingAudio}
+                    style={
+                      integrationConfig.avatar === 'readyplayerme'
+                        ? {
+                            width: '300px',
+                            height: '300px',
+                            backgroundColor: 'none',
+                            borderRadius: '100%',
+                            boxShadow: 'none',
+                          }
+                        : {
+                            width: '600px',
+                            height: '600px',
+                            backgroundColor: 'none',
+                          }
+                    }
+                  />
+                </ErrorBoundary>
+              )}
             {isClient && integrationConfig.avatar === 'customglb' && (
               <ModelViewer
                 poster={getResourceUrl({
@@ -180,4 +209,6 @@ const Avatar: React.FC<Props> = ({
   );
 };
 
-export default Avatar;
+export default memo(Avatar, (prevProps, nextProps) => {
+  return JSON.stringify(prevProps) === JSON.stringify(nextProps);
+});

package/src/components/AvatarView/AvatarView.stories.tsx

@@ -31,6 +31,27 @@ const meta: Meta = {
         type: 'boolean',
       },
     },
+    halfBody: {
+      control: {
+        type: 'boolean',
+      },
+    },
+    animation: {
+      control: {
+        type: 'select',
+        options: [
+          'Idle',
+          'Idle 1',
+          'Idle 2',
+          'Idle 3',
+          'Loading',
+          'Sad',
+          'Talk 1',
+          'Talk 2',
+          'Talk 3',
+        ],
+      },
+    },
   },
   parameters: {
     controls: { expanded: true },
@@ -64,8 +85,7 @@ Default.args = {
   headMovement: false,
   rotateAvatar: false,
   speaking: false,
-  url:
-    'https://assets.memori.ai/api/v2/asset/b791f77c-1a94-4272-829e-eca82fcc62b7.glb',
+  url: 'https://assets.memori.ai/api/v2/asset/b791f77c-1a94-4272-829e-eca82fcc62b7.glb',
   fallbackImg:
     'https://assets.memori.ai/api/v2/asset/d8035229-08cf-42a7-a532-ab051df2603d.png',
 };
@@ -76,8 +96,7 @@ EyeBlink.args = {
   headMovement: false,
   rotateAvatar: false,
   speaking: false,
-  url:
-    'https://assets.memori.ai/api/v2/asset/b791f77c-1a94-4272-829e-eca82fcc62b7.glb',
+  url: 'https://assets.memori.ai/api/v2/asset/b791f77c-1a94-4272-829e-eca82fcc62b7.glb',
   fallbackImg:
     'https://assets.memori.ai/api/v2/asset/d8035229-08cf-42a7-a532-ab051df2603d.png',
 };
@@ -88,8 +107,7 @@ HeadMovement.args = {
   headMovement: true,
   rotateAvatar: false,
   speaking: false,
-  url:
-    'https://assets.memori.ai/api/v2/asset/b791f77c-1a94-4272-829e-eca82fcc62b7.glb',
+  url: 'https://assets.memori.ai/api/v2/asset/b791f77c-1a94-4272-829e-eca82fcc62b7.glb',
   fallbackImg:
     'https://assets.memori.ai/api/v2/asset/d8035229-08cf-42a7-a532-ab051df2603d.png',
 };
@@ -100,8 +118,7 @@ RotateAvatar.args = {
   headMovement: false,
   rotateAvatar: true,
   speaking: false,
-  url:
-    'https://assets.memori.ai/api/v2/asset/b791f77c-1a94-4272-829e-eca82fcc62b7.glb',
+  url: 'https://assets.memori.ai/api/v2/asset/b791f77c-1a94-4272-829e-eca82fcc62b7.glb',
   fallbackImg:
     'https://assets.memori.ai/api/v2/asset/d8035229-08cf-42a7-a532-ab051df2603d.png',
 };
@@ -112,8 +129,58 @@ Speaking.args = {
   headMovement: false,
   rotateAvatar: false,
   speaking: true,
-  url:
-    'https://assets.memori.ai/api/v2/asset/b791f77c-1a94-4272-829e-eca82fcc62b7.glb',
+  url: 'https://assets.memori.ai/api/v2/asset/b791f77c-1a94-4272-829e-eca82fcc62b7.glb',
   fallbackImg:
     'https://assets.memori.ai/api/v2/asset/d8035229-08cf-42a7-a532-ab051df2603d.png',
 };
+
+export const Fullbody = Template.bind({});
+Fullbody.args = {
+  eyeBlink: true,
+  headMovement: true,
+  rotateAvatar: true,
+  speaking: false,
+  url: 'https://models.readyplayer.me/63b55751f17e295642bf07a2.glb',
+  fallbackImg:
+    'https://assets.memori.ai/api/v2/asset/3049582f-db5f-452c-913d-e4340d4afd0a.png',
+  halfBody: false,
+};
+
+export const FullbodyAnimatedIdle = Template.bind({});
+FullbodyAnimatedIdle.args = {
+  eyeBlink: true,
+  headMovement: true,
+  rotateAvatar: true,
+  speaking: false,
+  url: 'https://models.readyplayer.me/63b55751f17e295642bf07a2.glb',
+  fallbackImg:
+    'https://assets.memori.ai/api/v2/asset/3049582f-db5f-452c-913d-e4340d4afd0a.png',
+  animation: 'Idle',
+  halfBody: false,
+};
+
+export const FullbodyAnimatedLoading = Template.bind({});
+FullbodyAnimatedLoading.args = {
+  eyeBlink: true,
+  headMovement: true,
+  rotateAvatar: true,
+  speaking: false,
+  url: 'https://models.readyplayer.me/63b55751f17e295642bf07a2.glb',
+  fallbackImg:
+    'https://assets.memori.ai/api/v2/asset/3049582f-db5f-452c-913d-e4340d4afd0a.png',
+  animation: 'Loading',
+  halfBody: false,
+};
+
+export const FullbodyAnimatedSpeaking = Template.bind({});
+FullbodyAnimatedSpeaking.args = {
+  eyeBlink: true,
+  headMovement: true,
+  rotateAvatar: true,
+  speaking: true,
+  url: 'https://models.readyplayer.me/63b55751f17e295642bf07a2.glb',
+  fallbackImg:
+    'https://assets.memori.ai/api/v2/asset/3049582f-db5f-452c-913d-e4340d4afd0a.png',
+  animation: 'Talk 1',
+  halfBody: false,
+};

package/src/components/AvatarView/components/avatar.tsx

@@ -40,9 +40,7 @@ export default function Avatar({
     return () => {
       Object.values(materials).forEach(dispose);
 
-      Object.values(nodes)
-        .filter(isSkinnedMesh)
-        .forEach(dispose);
+      Object.values(nodes).filter(isSkinnedMesh).forEach(dispose);
     };
   }, [materials, nodes, url, onLoaded]);
 

package/src/components/AvatarView/components/fullbodyAvatar.tsx

@@ -0,0 +1,88 @@
+import React, { memo, useEffect, useMemo } from 'react';
+import { AnimationMixer, Object3D, Vector3 } from 'three';
+import { useAnimations, useGLTF } from '@react-three/drei';
+import useEyeBlink from '../utils/useEyeBlink';
+import useHeadMovement from '../utils/useHeadMovement';
+import useMouthSpeaking from '../utils/useMouthSpeaking';
+import { dispose, useGraph } from '@react-three/fiber';
+import { correctMaterials, hideHands, isSkinnedMesh } from '../utils/utils';
+
+export interface AvatarProps {
+  url: string;
+  eyeBlink?: boolean;
+  headMovement?: boolean;
+  speaking?: boolean;
+  onLoaded?: () => void;
+  animation?:
+    | 'Idle'
+    | 'Idle 1'
+    | 'Idle 2'
+    | 'Idle 3'
+    | 'Loading'
+    | 'Sad'
+    | 'Talk 1'
+    | 'Talk 2'
+    | 'Talk 3';
+}
+
+const position = new Vector3(0, -1, 0);
+
+export default function Avatar({
+  url,
+  eyeBlink,
+  headMovement,
+  speaking,
+  onLoaded,
+  animation,
+}: AvatarProps) {
+  const { scene } = useGLTF(url);
+  const { animations } = useGLTF(
+    'https://assets.memori.ai/api/v2/asset/b11eef07-c45b-4959-9d43-be8105365c1f.glb'
+  );
+  const { nodes, materials } = useGraph(scene);
+
+  const anim = useAnimations(animations, scene);
+
+  useEyeBlink(eyeBlink, nodes);
+  useHeadMovement(headMovement, nodes);
+  useMouthSpeaking(!!speaking, nodes);
+
+  useEffect(() => {
+    correctMaterials(materials);
+
+    if (onLoaded) onLoaded();
+
+    return () => {
+      Object.values(materials).forEach(dispose);
+
+      Object.values(nodes).filter(isSkinnedMesh).forEach(dispose);
+    };
+  }, [materials, nodes, url, onLoaded]);
+
+  // useEffect(() => {
+  // console.log('animation', animation, animation && animation in anim.actions);
+  try {
+    if (animation && animation in anim.actions) {
+      Object.keys(anim.actions).forEach(name => {
+        let action = anim.actions[name];
+        if (!action) return;
+        else if (name === animation) action.play();
+        else action.stop();
+      });
+    } else {
+      Object.values(anim.actions).forEach(action => {
+        if (!action) return;
+        action?.reset().stop();
+      });
+    }
+  } catch (e) {
+    console.log(e);
+  }
+  // }, [animation]);
+
+  return (
+    <group position={position}>
+      <primitive object={scene} />
+    </group>
+  );
+}

package/src/components/AvatarView/index.tsx

@@ -1,6 +1,7 @@
 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';
@@ -15,15 +16,23 @@ export interface Props {
   speaking?: boolean;
   style?: CSSProperties;
   fallback?: React.ReactNode;
+  halfBody?: boolean;
+  animation?: AvatarProps['animation'];
 }
 
-const defaultStyle = {
+const defaultStylesHalfBody = {
   width: '250px',
   height: '250px',
   backgroundColor: 'white',
   borderRadius: '100%',
 };
 
+const defaultStylesFullBody = {
+  width: '500px',
+  height: '500px',
+  backgroundColor: 'white',
+};
+
 export default function AvatarView({
   url,
   fallbackImg,
@@ -33,11 +42,23 @@ export default function AvatarView({
   headMovement,
   speaking,
   fallback,
+  halfBody = true,
+  animation,
 }: Props) {
+  const defaultStyles = halfBody
+    ? defaultStylesHalfBody
+    : defaultStylesFullBody;
   return (
     <Canvas
-      style={style || defaultStyle}
-      camera={{ fov: 40, position: [0, 0, 0.6] }}
+      style={style || defaultStyles}
+      camera={
+        halfBody
+          ? {
+              fov: 40,
+              position: [0, 0, 0.6],
+            }
+          : { fov: 40, position: [0, 0, 3] }
+      }
     >
       <Suspense fallback={fallback || <Loader fallbackImg={fallbackImg} />}>
         {isAndroid() ? (
@@ -51,13 +72,25 @@ export default function AvatarView({
         ) : (
           <Environment preset="sunset" />
         )}
-        {rotateAvatar && <OrbitControls enablePan={false} enableZoom={false} />}
-        <Avatar
-          url={url}
-          eyeBlink={eyeBlink}
-          headMovement={headMovement}
-          speaking={speaking}
-        />
+        {rotateAvatar && halfBody && (
+          <OrbitControls enablePan={false} enableZoom={false} />
+        )}
+        {halfBody ? (
+          <Avatar
+            url={url}
+            eyeBlink={eyeBlink}
+            headMovement={headMovement}
+            speaking={speaking}
+          />
+        ) : (
+          <FullbodyAvatar
+            url={url}
+            eyeBlink={eyeBlink}
+            headMovement={headMovement}
+            speaking={speaking}
+            animation={animation}
+          />
+        )}
       </Suspense>
     </Canvas>
   );

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

@@ -20,7 +20,7 @@ const dialogState = {
 
 const DateTimeFormat = Intl.DateTimeFormat;
 beforeEach(() => {
-  jest.spyOn(global.Intl, 'DateTimeFormat').mockImplementation(
+  jest.spyOn(Intl, 'DateTimeFormat').mockImplementation(
     (locale, options) =>
       new DateTimeFormat(locale, {
         ...options,

package/src/components/ChatInputs/ChatInputs.css

@@ -32,13 +32,13 @@
 .memori-chat-inputs--mic:hover,
 .memori-chat-inputs--mic:active,
 .memori-chat-inputs--mic:focus {
-    border-color: var(--ant-primary-color) !important;
+    border-color: var(--memori-primary) !important;
 }
 
 .memori-chat-inputs--mic:active,
 .memori-chat-inputs--mic:focus {
-    box-shadow: 0 0.2rem 0.33rem var(--ant-primary-4) !important;
-    color: var(--ant-primary-color) !important;
+    box-shadow: 0 0.2rem 0.33rem var(--memori-primary) !important;
+    color: var(--memori-primary) !important;
 }
 
 .memori-chat-inputs--mic.memori-chat-inputs--mic--listening {

package/src/components/Header/Header.tsx

@@ -26,6 +26,7 @@ export interface Props {
   hasUserActivatedSpeak?: boolean;
   showShare?: boolean;
   showSettings?: boolean;
+  showSpeaker?: boolean;
 }
 
 const Header: React.FC<Props> = ({
@@ -40,6 +41,7 @@ const Header: React.FC<Props> = ({
   hasUserActivatedSpeak = false,
   showShare = true,
   showSettings = true,
+  showSpeaker = true,
 }) => {
   const { t } = useTranslation();
 
@@ -58,14 +60,16 @@ const Header: React.FC<Props> = ({
           />
         </div>
       )}
-      <Button
-        primary
-        shape="circle"
-        className="memori-header--button"
-        icon={speakerMuted ? <SoundDeactivated /> : <Sound />}
-        onClick={() => setSpeakerMuted(!speakerMuted)}
-        title={t('widget.sound') || 'Sound'}
-      />
+      {showSpeaker && (
+        <Button
+          primary
+          shape="circle"
+          className="memori-header--button"
+          icon={speakerMuted ? <SoundDeactivated /> : <Sound />}
+          onClick={() => setSpeakerMuted(!speakerMuted)}
+          title={t('widget.sound') || 'Sound'}
+        />
+      )}
       <ExportHistoryButton
         history={history}
         memori={memori}

package/src/components/ImageUpload/ImageUpload.css

@@ -37,13 +37,13 @@ legend.helper p {
 
 .memori--upload .ant-upload.ant-upload-select-picture-card:hover,
 .memori--upload .ant-upload.ant-upload-select-picture-card:focus {
-    border-color: var(--ant-primary-color);
+    border-color: var(--memori-primary);
     opacity: 1;
 }
 
 .memori--upload .ant-upload.ant-upload-select-picture-card:hover .ant-upload,
 .memori--upload .ant-upload.ant-upload-select-picture-card:focus .ant-upload {
-    color: var(--ant-primary-color);
+    color: var(--memori-primary);
 }
 
 .memori--upload .ant-upload-list {