@memori.ai/memori-react 7.8.8 → 7.9.0

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

@@ -55,6 +55,7 @@ it('renders Chat unchanged', () => {
       startListening={jest.fn()}
       stopListening={jest.fn()}
       resetTranscript={jest.fn()}
+      setEnableFocusChatInput={jest.fn()}
     />
   );
   expect(container).toMatchSnapshot();
@@ -86,6 +87,7 @@ it('renders Chat with memori typing unchanged', () => {
       showMicrophone={false}
       listening={false}
       startListening={jest.fn()}
+      setEnableFocusChatInput={jest.fn()}
       memoriTyping
     />
   );
@@ -118,6 +120,7 @@ it('renders Chat with hints unchanged', () => {
       showMicrophone={false}
       listening={false}
       startListening={jest.fn()}
+      setEnableFocusChatInput={jest.fn()}
     />
   );
   expect(container).toMatchSnapshot();
@@ -149,6 +152,7 @@ it('renders Chat with media unchanged', () => {
       showMicrophone={false}
       listening={false}
       startListening={jest.fn()}
+      setEnableFocusChatInput={jest.fn()}
     />
   );
   expect(container).toMatchSnapshot();
@@ -181,6 +185,7 @@ it('renders Chat with dates unchanged', () => {
       listening={false}
       startListening={jest.fn()}
       showDates
+      setEnableFocusChatInput={jest.fn()}
     />
   );
   expect(container).toMatchSnapshot();
@@ -212,6 +217,7 @@ it('renders Chat with context vars unchanged', () => {
       showMicrophone={false}
       listening={false}
       startListening={jest.fn()}
+      setEnableFocusChatInput={jest.fn()}
       showContextPerLine
     />
   );
@@ -247,6 +253,7 @@ it('renders Chat on X3 state unchanged', () => {
       showMicrophone={false}
       listening={false}
       startListening={jest.fn()}
+      setEnableFocusChatInput={jest.fn()}
       showContextPerLine
     />
   );
@@ -282,6 +289,7 @@ it('renders Chat on X2a state unchanged', () => {
       showMicrophone={false}
       listening={false}
       startListening={jest.fn()}
+      setEnableFocusChatInput={jest.fn()}
       showContextPerLine
     />
   );
@@ -315,6 +323,7 @@ it('renders Chat with user unchanged', () => {
       startListening={jest.fn()}
       stopListening={jest.fn()}
       resetTranscript={jest.fn()}
+      setEnableFocusChatInput={jest.fn()}
     />
   );
   expect(container).toMatchSnapshot();
@@ -347,6 +356,7 @@ it('renders Chat with custom user avatar unchanged', () => {
       startListening={jest.fn()}
       stopListening={jest.fn()}
       resetTranscript={jest.fn()}
+      setEnableFocusChatInput={jest.fn()}
     />
   );
   expect(container).toMatchSnapshot();
@@ -379,6 +389,7 @@ it('renders Chat with custom user avatar as react element unchanged', () => {
       startListening={jest.fn()}
       stopListening={jest.fn()}
       resetTranscript={jest.fn()}
+      setEnableFocusChatInput={jest.fn()}
     />
   );
   expect(container).toMatchSnapshot();

package/src/components/Chat/Chat.tsx

@@ -58,6 +58,7 @@ export interface Props {
   onChangeUserMessage: (userMessage: string) => void;
   sendMessage: (msg: string) => void;
   listening?: boolean;
+  setEnableFocusChatInput: (enableFocusChatInput: boolean) => void;
   isPlayingAudio?: boolean;
   stopAudio: () => void;
   startListening: () => void;
@@ -104,6 +105,7 @@ const Chat: React.FC<Props> = ({
   onChangeUserMessage,
   sendMessage,
   listening,
+  setEnableFocusChatInput,
   isPlayingAudio,
   stopAudio,
   startListening,
@@ -130,8 +132,13 @@ const Chat: React.FC<Props> = ({
 
   const onTextareaFocus = () => {
     stopListening();
-    if (hasTouchscreen() && window.innerWidth <= 768) {
+    const hasTouch = hasTouchscreen();  
+
+    if (hasTouch) setEnableFocusChatInput(true);
+    // if the user is on mobile and had not recorded audio, add the chat-focused class to the chat wrapper
+    if (hasTouch && window.innerWidth <= 768) {
       document.getElementById('chat-wrapper')?.classList?.add('chat-focused');
+      // add the chat-focused class to the memori widget
       document
         .querySelector('.memori.memori-widget')
         ?.classList?.add('chat-focused');

package/src/components/MemoriWidget/MemoriWidget.tsx

@@ -457,6 +457,7 @@ const MemoriWidget = ({
   } = client;
 
   const [instruct, setInstruct] = useState(false);
+  const [enableFocusChatInput, setEnableFocusChatInput] = useState(true);
 
   const [loginToken, setLoginToken] = useState<string | undefined>(
     additionalInfo?.loginToken ?? authToken
@@ -544,6 +545,11 @@ const MemoriWidget = ({
   const [controlsPosition, setControlsPosition] = useState<'center' | 'bottom'>(
     'center'
   );
+
+  const [enablePositionControls, setEnablePositionControls] = useState(false);
+  const [avatarType, setAvatarType] = useState<'blob' | 'avatar3d' | null>(
+    null
+  );
   const [hideEmissions, setHideEmissions] = useState(false);
 
   const {
@@ -598,6 +604,7 @@ const MemoriWidget = ({
     setControlsPosition(
       getLocalConfig('controlsPosition', defaultControlsPosition)
     );
+    setAvatarType(getLocalConfig('avatarType', 'avatar3d'));
     setHideEmissions(getLocalConfig('hideEmissions', false));
 
     if (!additionalInfo?.loginToken && !authToken) {
@@ -1133,6 +1140,7 @@ const MemoriWidget = ({
             userToken ?? loginToken ?? additionalInfo?.loginToken ?? authToken,
           language: getCultureCodeByLanguage(userLang),
           referral: referral,
+          timeZoneOffset: new Date().getTimezoneOffset().toString(),
         },
       });
       if (
@@ -1229,6 +1237,7 @@ const MemoriWidget = ({
             userToken ?? loginToken ?? additionalInfo?.loginToken ?? authToken,
           language: getCultureCodeByLanguage(userLang),
           referral: referral,
+          timeZoneOffset: new Date().getTimezoneOffset().toString(),
         },
       });
 
@@ -1383,6 +1392,7 @@ const MemoriWidget = ({
                 authToken,
               language: getCultureCodeByLanguage(userLang),
               referral: referral,
+              timeZoneOffset: new Date().getTimezoneOffset().toString(),
             },
           });
         } else if (!!currentState) {
@@ -2106,14 +2116,28 @@ const MemoriWidget = ({
     }
   };
 
+  const focusChatInput = () => {
+    let textarea = document.querySelector(
+      '#chat-fieldset textarea'
+    ) as HTMLTextAreaElement | null;
+    // console.log('textarea', enableFocusChatInput);
+    if (textarea && enableFocusChatInput) {
+      textarea.focus();
+      // console.log('focused');
+    } else {
+      textarea?.blur();
+      // console.log('blurred');
+    }
+  };
+
   /**
    * Focus on the chat input on mount
    */
   useEffect(() => {
-    let textarea = document.querySelector(
-      '#chat-fieldset textarea'
-    ) as HTMLTextAreaElement | null;
-    if (textarea) textarea.focus();
+    // focus on chat input disabled for totem layout
+    if (selectedLayout !== 'TOTEM') {
+      focusChatInput();
+    }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [currentDialogState?.emission]);
 
@@ -2162,13 +2186,16 @@ const MemoriWidget = ({
   /**
    * Listening methods
    */
-  const startListening = () => {
+  const startListening = async () => {
     if (!AZURE_COGNITIVE_SERVICES_TTS_KEY) return;
 
     clearListening();
     setTranscript('');
     resetTranscript();
 
+    // remove focus on chat input if the user is on mobile
+    if (hasTouchscreen()) setEnableFocusChatInput(false);
+
     try {
       navigator.mediaDevices
         .getUserMedia({ audio: true })
@@ -2669,6 +2696,7 @@ const MemoriWidget = ({
               additionalInfo?.loginToken ??
               authToken,
             language: getCultureCodeByLanguage(userLang),
+            timeZoneOffset: new Date().getTimezoneOffset().toString(),
           },
         });
 
@@ -3079,6 +3107,9 @@ const MemoriWidget = ({
     loading: !!memoriTyping,
     baseUrl,
     apiUrl,
+    enablePositionControls,
+    setEnablePositionControls,
+    avatarType,
   };
 
   const startPanelProps: StartPanelProps = {
@@ -3163,6 +3194,7 @@ const MemoriWidget = ({
     stopAudio,
     resetTranscript,
     listening,
+    setEnableFocusChatInput,
     isPlayingAudio,
     customMediaRenderer,
     user,
@@ -3378,6 +3410,11 @@ const MemoriWidget = ({
           setControlsPosition={setControlsPosition}
           hideEmissions={hideEmissions}
           setHideEmissions={setHideEmissions}
+          avatarType={avatarType}
+          setAvatarType={setAvatarType}
+          enablePositionControls={enablePositionControls}
+          setEnablePositionControls={setEnablePositionControls}
+          isAvatar3d={!!integrationConfig?.avatarURL}
           additionalSettings={additionalSettings}
         />
       )}

package/src/components/SettingsDrawer/SettingsDrawer.css

@@ -1,7 +1,7 @@
 .memori-settings-drawer .memori-settings-drawer--field {
     display: flex;
     flex-direction: column;
-    margin: 0.5rem 0 1.5rem;
+    margin: 0.5rem 0;
 }
 
 .memori-settings-drawer .memori-settings-drawer--field .memori-select--value {
@@ -9,9 +9,11 @@
 }
 
 .memori-settings-drawer--controlsposition-radio,
+.memori-settings-drawer--avatarType-radio,
 .memori-settings-drawer--microphoneMode-radio {
     display: flex;
     flex-wrap: wrap;
     align-items: center;
     margin: 0.5rem 0;
-}
+    gap: 0.2rem;
+}

package/src/components/SettingsDrawer/SettingsDrawer.test.tsx

@@ -25,6 +25,9 @@ it('renders SettingsDrawer unchanged', () => {
       setControlsPosition={jest.fn()}
       hideEmissions={false}
       setHideEmissions={jest.fn()}
+      avatarType="avatar3d"
+      setAvatarType={jest.fn()}
+      setEnablePositionControls={jest.fn()}
     />
   );
   expect(container).toMatchSnapshot();
@@ -43,6 +46,9 @@ it('renders SettingsDrawer open unchanged', () => {
       setControlsPosition={jest.fn()}
       hideEmissions={false}
       setHideEmissions={jest.fn()}
+      avatarType="avatar3d"
+      setAvatarType={jest.fn()}
+      setEnablePositionControls={jest.fn()}
     />
   );
   expect(container).toMatchSnapshot();
@@ -61,6 +67,9 @@ it('renders SettingsDrawer open with continuous speech enabled unchanged', () =>
       setControlsPosition={jest.fn()}
       hideEmissions={false}
       setHideEmissions={jest.fn()}
+      avatarType="avatar3d"
+      setAvatarType={jest.fn()}
+      setEnablePositionControls={jest.fn()}
     />
   );
   expect(container).toMatchSnapshot();
@@ -79,6 +88,9 @@ it('renders SettingsDrawer open with non-default continuous speech timeout uncha
       setControlsPosition={jest.fn()}
       hideEmissions={false}
       setHideEmissions={jest.fn()}
+      avatarType="avatar3d"
+      setAvatarType={jest.fn()}
+      setEnablePositionControls={jest.fn()}
     />
   );
   expect(container).toMatchSnapshot();
@@ -98,6 +110,9 @@ it('renders SettingsDrawer for totem layout open unchanged', () => {
       setControlsPosition={jest.fn()}
       hideEmissions={false}
       setHideEmissions={jest.fn()}
+      avatarType="avatar3d"
+      setAvatarType={jest.fn()}
+      setEnablePositionControls={jest.fn()}
     />
   );
   expect(container).toMatchSnapshot();
@@ -117,6 +132,9 @@ it('renders SettingsDrawer for totem layout open with controls at center unchang
       setControlsPosition={jest.fn()}
       hideEmissions={false}
       setHideEmissions={jest.fn()}
+      avatarType="avatar3d"
+      setAvatarType={jest.fn()}
+      setEnablePositionControls={jest.fn()}
     />
   );
   expect(container).toMatchSnapshot();
@@ -136,6 +154,9 @@ it('renders SettingsDrawer for totem layout with continuous speech and hide emis
       setControlsPosition={jest.fn()}
       hideEmissions={true}
       setHideEmissions={jest.fn()}
+      avatarType="avatar3d"
+      setAvatarType={jest.fn()}
+      setEnablePositionControls={jest.fn()}
     />
   );
   expect(container).toMatchSnapshot();
@@ -172,6 +193,9 @@ it('renders SettingsDrawer with additional custom settings unchanged', () => {
       hideEmissions={false}
       setHideEmissions={jest.fn()}
       additionalSettings={<AdditionalSettings />}
+      avatarType="avatar3d"
+      setAvatarType={jest.fn()}
+      setEnablePositionControls={jest.fn()}
     />
   );
   expect(container).toMatchSnapshot();

package/src/components/SettingsDrawer/SettingsDrawer.tsx

@@ -3,10 +3,11 @@ import { useTranslation } from 'react-i18next';
 import Checkbox from '../ui/Checkbox';
 import Select from '../ui/Select';
 import { setLocalConfig } from '../../helpers/configuration';
-import { RadioGroup } from '@headlessui/react';
+import { RadioGroup, Switch } from '@headlessui/react';
 import Button from '../ui/Button';
 import { Props as WidgetProps } from '../MemoriWidget/MemoriWidget';
-
+import { useState } from 'react';
+import Slider from '../ui/Slider';
 export interface Props {
   open: boolean;
   layout?: WidgetProps['layout'];
@@ -20,6 +21,11 @@ export interface Props {
   hideEmissions?: boolean;
   setHideEmissions: (value: boolean) => void;
   additionalSettings?: WidgetProps['additionalSettings'];
+  avatarType?: 'blob' | 'avatar3d' | null;
+  setAvatarType: (value: 'blob' | 'avatar3d' | null) => void;
+  enablePositionControls?: boolean;
+  setEnablePositionControls: (value: boolean) => void;
+  isAvatar3d?: boolean;
 }
 
 const silenceSeconds = [2, 3, 5, 10, 15, 20, 30, 60];
@@ -37,6 +43,11 @@ const SettingsDrawer = ({
   hideEmissions,
   setHideEmissions,
   additionalSettings,
+  avatarType,
+  setAvatarType,
+  enablePositionControls,
+  setEnablePositionControls,
+  isAvatar3d,
 }: Props) => {
   const { t } = useTranslation();
 
@@ -58,7 +69,7 @@ const SettingsDrawer = ({
           value={microphoneMode}
           defaultValue={microphoneMode}
           className="memori-settings-drawer--microphoneMode-radio"
-          onChange={value => {
+          onChange={(value: any) => {
             let micMode =
               value === 'CONTINUOUS' ? 'CONTINUOUS' : 'HOLD_TO_TALK';
 
@@ -117,7 +128,7 @@ const SettingsDrawer = ({
               value={controlsPosition}
               defaultValue={controlsPosition}
               className="memori-settings-drawer--controlsposition-radio"
-              onChange={value => {
+              onChange={(value: any) => {
                 setControlsPosition(value);
                 setLocalConfig('controlsPosition', value);
               }}
@@ -144,6 +155,67 @@ const SettingsDrawer = ({
               </RadioGroup.Option>
             </RadioGroup>
           </div>
+
+          {isAvatar3d && (
+            <>
+              <div className="memori-settings-drawer--field controls">
+
+                <label
+                  htmlFor="avatarType"
+                  className="memori-settings-drawer-label"
+                >
+                  {t('write_and_speak.avatarType') || 'Avatar type'}:
+                </label>
+                <RadioGroup
+                  id="avatarType"
+                  name="avatarType"
+                  value={avatarType}
+                  defaultValue={avatarType}
+                  className="memori-settings-drawer--avatarType-radio"
+                  onChange={(value: any) => {
+                    setAvatarType && setAvatarType(value);
+                    setLocalConfig('avatarType', value);
+                  }}
+                >
+                  <RadioGroup.Option
+                    value="blob"
+                    className="memori-settings-drawer--avatarType-radio-button"
+                  >
+                    {({ checked }) => (
+                      <Button primary={checked} outlined={!checked}>
+                        {t('write_and_speak.blob') || 'Blob'}
+                      </Button>
+                    )}
+                  </RadioGroup.Option>
+                  <RadioGroup.Option
+                    value="avatar3d"
+                    className="memori-settings-drawer--avatarType-radio-button"
+                  >
+                    {({ checked }) => (
+                      <Button primary={checked} outlined={!checked}>
+                        {t('write_and_speak.avatar3d') || 'Avatar 3D'}
+                      </Button>
+                    )}
+                  </RadioGroup.Option>
+                </RadioGroup>
+              </div>
+
+              <div className="memori-settings-drawer--field">
+                <Checkbox
+                  label={
+                    t('write_and_speak.enablePositionControls') ||
+                    'Enable position controls'
+                  }
+                  name="enablePositionControls"
+                  checked={enablePositionControls}
+                  onChange={e => {
+                    setEnablePositionControls(e.target.checked);
+                  }}
+                />
+              </div>
+            </>
+          )}
+
           <div className="memori-settings-drawer--field">
             <Checkbox
               label={

package/src/components/layouts/Totem.tsx

@@ -36,7 +36,7 @@ const TotemLayout: React.FC<LayoutProps> = ({
       </div>
 
       <div className="memori-totem-layout--avatar">
-        {Avatar && avatarProps && <Avatar {...avatarProps} />}
+        {Avatar && avatarProps && <Avatar {...avatarProps} isTotem />}
       </div>
 
       <div id="extension" />

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

@@ -90,6 +90,116 @@ FullPage.args = {
   layout: 'FULLPAGE',
 };
 
+export const Totem = Template.bind({});
+Totem.args = {
+  uiLang: 'it',
+  showShare: true,
+  showSettings: true,
+  // memori,
+  // tenant,
+  memori: {
+    memoriID: '6573844d-a7cd-47ef-9e78-840d82020c21',
+    name: 'Nicola',
+    password: null,
+    recoveryTokens: null,
+    newPassword: null,
+    ownerUserID: null,
+    ownerUserName: 'nzambello',
+    ownerTenantName: 'aisuru.com',
+    memoriConfigurationID: 'fd10bb42-98d9-4c08-8e02-2b08bd4e4975',
+    description:
+      'Sono Nicola Zambello, sviluppatore e attivista per un web etico e sostenibile',
+    completionDescription: null,
+    engineMemoriID: '9b0a2913-d3d8-4e98-a49d-6e1c99479e1b',
+    isOwner: false,
+    isGiver: false,
+    isReceiver: false,
+    giverTag: null,
+    giverPIN: null,
+    privacyType: 'PUBLIC',
+    secretToken: null,
+    minimumNumberOfRecoveryTokens: null,
+    totalNumberOfRecoveryTokens: null,
+    sentInvitations: [],
+    receivedInvitations: [],
+    integrations: [
+      {
+        integrationID: '62de8c99-0ac2-4cbe-bd95-a39ad7dc6b32',
+        memoriID: '6573844d-a7cd-47ef-9e78-840d82020c21',
+        type: 'LANDING_EXPERIENCE',
+        state: 'NEW',
+        deviceEmails: null,
+        invocationText: null,
+        jobID: null,
+        customData:
+          '{"textColor":"#000000","buttonBgColor":"#007eb6","buttonTextColor":"#ffffff","globalBackground":"https://assets.memori.ai/api/v2/asset/cade3b9c-0437-4342-b2bd-8db9c2a3a20e.png","blurBackground":true,"innerBgColor":"light","multilanguage":true,"avatar":"readyplayerme","avatarURL":"https://assets.memori.ai/api/v2/asset/893c41df-7619-436d-9e86-fe1d406fc933.glb#1681736752156","name":"Pagina pubblica","contextVars":"ANIMALE:CANE","personTag":"☠️","personPIN":"666666","personName":"Pirata","showShare":true,"avatarFullBodyURL":"https://models.readyplayer.me/63b55751f17e295642bf07a2.glb"}',
+        resources: [],
+        publish: true,
+        creationTimestamp: '2022-06-13T14:44:52.833573Z',
+        lastChangeTimestamp: '2022-06-13T14:44:52.833573Z',
+      },
+    ],
+    avatarURL:
+      'https://assets.memori.ai/api/v2/asset/3049582f-db5f-452c-913d-e4340d4afd0a.png',
+    coverURL:
+      'https://assets.memori.ai/api/v2/asset/e9bb9f6d-8f34-45ab-af9e-6d630d9a51a8.png',
+    avatar3DURL:
+      'https://assets.memori.ai/api/v2/asset/893c41df-7619-436d-9e86-fe1d406fc933.glb',
+    avatarOriginal3DURL:
+      'https://d1a370nemizbjq.cloudfront.net/c7c80a1d-deda-4fe1-96c6-fabad0771aa2.glb',
+    needsPosition: false,
+    voiceType: 'MALE',
+    culture: 'it-IT',
+    categories: [
+      'biografico',
+      'tecnologia',
+      'web',
+      'open-source',
+      'green',
+      'privacy',
+    ],
+    exposed: true,
+    disableR2R3Loop: null,
+    disableR4Loop: null,
+    disableR5Loop: null,
+    enableCompletions: true,
+    completionModel: null,
+    chainingMemoriID: null,
+    chainingBaseURL: null,
+    chainingPassword: null,
+    contentQualityIndex: 210.8,
+    contentQualityIndexTimestamp: '2023-04-17T00:01:32.194744Z',
+    publishedInTheMetaverse: true,
+    metaverseEnvironment: 'apartment',
+    blockedUntil: null,
+    creationTimestamp: '2022-06-13T14:21:55.793034Z',
+    lastChangeTimestamp: '2023-04-15T08:15:36.403546Z',
+  },
+  integration: {
+    integrationID: '62de8c99-0ac2-4cbe-bd95-a39ad7dc6b32',
+    memoriID: '6573844d-a7cd-47ef-9e78-840d82020c21',
+    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',
+    customData: JSON.stringify({
+      ...JSON.parse(
+        '{"textColor":"#000000","buttonBgColor":"#007eb6","buttonTextColor":"#ffffff","globalBackground":"https://assets.memori.ai/api/v2/asset/cade3b9c-0437-4342-b2bd-8db9c2a3a20e.png","blurBackground":true,"innerBgColor":"light","multilanguage":true,"avatar":"readyplayerme","avatarURL":"https://assets.memori.ai/api/v2/asset/893c41df-7619-436d-9e86-fe1d406fc933.glb#1681736752156","name":"Pagina pubblica","contextVars":"ANIMALE:CANE","personTag":"☠️","personPIN":"666666","personName":"Pirata","showShare":true,"avatarFullBodyURL":"https://models.readyplayer.me/63b55751f17e295642bf07a2.glb"}'
+      ),
+      avatar: 'readyplayerme-full',
+      avatarURL:
+        'https://models.readyplayer.me/63b55751f17e295642bf07a2.glb#' +
+        // 'https://models.readyplayer.me/63b558263858282637c54115.glb#' +
+        new Date(Date.now()).getTime(),
+    }),
+  },
+  layout: 'TOTEM',
+};
+
 export const ChatOnly = Template.bind({});
 ChatOnly.args = {
   uiLang: 'it',
@@ -200,7 +310,6 @@ ChatOnly.args = {
   layout: 'CHAT',
 };
 
-
 export const Custom = Template.bind({});
 Custom.args = {
   uiLang: 'it',
@@ -431,7 +540,6 @@ HiddenChat.args = {
   layout: 'HIDDEN_CHAT',
 };
 
-
 export const ZoomedFullBody = Template.bind({});
 ZoomedFullBody.args = {
   uiLang: 'it',
@@ -535,7 +643,7 @@ ZoomedFullBody.args = {
       ),
       avatar: 'readyplayerme-full',
       avatarURL:
-        'https://assets.memori.ai/api/v2/asset/3932bf70-e953-4e8a-b63a-f316544c283e.glb'+
+        'https://assets.memori.ai/api/v2/asset/3932bf70-e953-4e8a-b63a-f316544c283e.glb' +
         new Date(Date.now()).getTime(),
     }),
   },

package/src/components/layouts/totem.css

@@ -1,5 +1,5 @@
 .memori-widget.memori-layout-totem {
-    height: 100vh !important;
+    height: 95vh !important;
 }
 
 .memori-widget.memori-layout-totem .memori--global-background.no-background-image {
@@ -95,28 +95,28 @@
     bottom: auto;
 }
 
-.memori-totem-layout--avatar .memori--avatar-wrapper>div {
-    overflow: visible !important;
+/* .memori-totem-layout--avatar .memori--avatar-wrapper>div {
+    overflow: visible !important; */
     /* width: 100% !important;
     height: 100% !important; */
-    width: auto !important;
+    /* width: auto !important;
     height: 90vh !important;
     max-height: 90vh;
     border-radius: 0;
     transform: scale(1.7) translate(0px, 10vh);
-}
+} */
 
-.memori-totem-layout--avatar .memori--avatar-wrapper canvas {
+/* .memori-totem-layout--avatar .memori--avatar-wrapper canvas {
     width: auto !important;
     max-width: 100%;
     height: 100% !important;
     max-height: 100%;
-}
+} */
 
-.memori-totem-layout--controls {
+/* .memori-totem-layout--controls {
     position: relative;
     z-index: 5;
-}
+} */
 
 .memori-totem-layout--controls .memori--start-panel,
 .memori-totem-layout--controls .memori-chat--history,

package/src/components/ui/Button.css

@@ -12,6 +12,10 @@
     font-size: 14px;
     transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
 }
+.memori-button--active {
+    background: var(--memori-primary);
+    color: var(--memori-primary-text);
+}
 
 .memori-button:hover {
     box-shadow: 0 2px 0 rgba(0, 0, 0, 0.02), 0 4px 8px rgba(0, 0, 0, 0.04);