@memori.ai/memori-react 2.17.1 → 2.18.1

package/src/components/Avatar/Avatar.tsx

@@ -75,9 +75,13 @@ const Avatar: React.FC<Props> = ({
       integrationConfig?.avatarURL ? (
         <>
           <div
-            className={cx('memori--avatar-wrapper', {
-              hidden: !avatar3dVisible,
-            })}
+            className={cx(
+              'memori--avatar-wrapper',
+              `memori--avatar-${integrationConfig?.avatar || 'default'}`,
+              {
+                hidden: !avatar3dVisible,
+              }
+            )}
           >
             {isClient &&
               (integrationConfig.avatar === 'readyplayerme' ||

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

@@ -38,7 +38,7 @@ exports[`renders Avatar with blob and avatar in blob unchanged 1`] = `
 exports[`renders Avatar with custom glb model unchanged 1`] = `
 <div>
   <div
-    class="memori--avatar-wrapper"
+    class="memori--avatar-wrapper memori--avatar-customglb"
   >
     <div
       class="model-viewer"
@@ -92,7 +92,7 @@ exports[`renders Avatar with custom glb model unchanged 1`] = `
 exports[`renders Avatar with rpm 3d avatar unchanged 1`] = `
 <div>
   <div
-    class="memori--avatar-wrapper"
+    class="memori--avatar-wrapper memori--avatar-readyplayerme"
   >
     <div
       class="memori--blob-container"

package/src/components/ChatBubble/ChatBubble.css

@@ -82,7 +82,7 @@
 .memori-chat--bubble.memori-chat--user-bubble {
     border-radius: 16px 16px 0 16px;
     margin: 10px 10px 5px auto;
-    background: var(--memori-primary);
+    background: var(--memori-chat-user-bubble-bg);
     box-shadow: 0 1px 6px 0 #d1d3de, 0 1px 3px 0 #c5c6d1;
     color: var(--memori-primary-text);
 }
@@ -236,4 +236,4 @@
     30% {
         transform: translateY(-10px);
     }
-}
+}

package/src/components/Header/Header.stories.tsx

@@ -42,12 +42,13 @@ const Template: Story<Props> = args => {
       <SettingsDrawer
         open={!!showSettingsDrawer}
         onClose={() => setShowSettingsDrawer(false)}
-        continuousSpeech={continuousSpeech}
-        continuousSpeechTimeout={continuousSpeechTimeout}
-        setContinuousSpeech={setContinuousSpeech}
-        setContinuousSpeechTimeout={setContinuousSpeechTimeout}
-        setControlsPosition={() => {}}
+        microphoneMode="HOLD_TO_TALK"
+        setMicrophoneMode={() => {}}
+        continuousSpeechTimeout={2}
+        setContinuousSpeechTimeout={() => {}}
         controlsPosition="bottom"
+        setControlsPosition={() => {}}
+        hideEmissions={false}
         setHideEmissions={() => {}}
       />
     </>
@@ -62,6 +63,7 @@ Default.args = {
   history,
   setShowPositionDrawer: () => {},
   setShowSettingsDrawer: () => {},
+  clearHistory: () => {},
   speakerMuted: false,
   hasUserActivatedSpeak: false,
   showShare: false,
@@ -82,6 +84,7 @@ WithPosition.args = {
   },
   setShowPositionDrawer: () => {},
   setShowSettingsDrawer: () => {},
+  clearHistory: () => {},
   speakerMuted: false,
   hasUserActivatedSpeak: false,
   showShare: false,
@@ -94,6 +97,7 @@ SpeakerMuted.args = {
   history,
   setShowPositionDrawer: () => {},
   setShowSettingsDrawer: () => {},
+  clearHistory: () => {},
   speakerMuted: true,
   hasUserActivatedSpeak: false,
   showShare: false,
@@ -106,6 +110,7 @@ WithShare.args = {
   history,
   setShowPositionDrawer: () => {},
   setShowSettingsDrawer: () => {},
+  clearHistory: () => {},
   speakerMuted: false,
   hasUserActivatedSpeak: false,
   showShare: true,
@@ -118,18 +123,34 @@ WithSettings.args = {
   history,
   setShowPositionDrawer: () => {},
   setShowSettingsDrawer: () => {},
+  clearHistory: () => {},
   speakerMuted: false,
   hasUserActivatedSpeak: false,
   showShare: false,
   showSettings: true,
 };
 
+export const WithClear = Template.bind({});
+WithClear.args = {
+  memori,
+  history,
+  setShowPositionDrawer: () => {},
+  setShowSettingsDrawer: () => {},
+  clearHistory: () => {},
+  speakerMuted: false,
+  hasUserActivatedSpeak: false,
+  showShare: false,
+  showSettings: false,
+  showClear: true,
+};
+
 export const WithOngoingChat = Template.bind({});
 WithOngoingChat.args = {
   memori,
   history,
   setShowPositionDrawer: () => {},
   setShowSettingsDrawer: () => {},
+  clearHistory: () => {},
   speakerMuted: false,
   hasUserActivatedSpeak: true,
   showShare: false,

package/src/components/Header/Header.test.tsx

@@ -15,6 +15,7 @@ it('renders Header unchanged', () => {
       hasUserActivatedSpeak={false}
       showShare={false}
       showSettings={false}
+      clearHistory={jest.fn()}
     />
   );
   expect(container).toMatchSnapshot();
@@ -40,6 +41,7 @@ it('renders Header with position unchanged', () => {
       hasUserActivatedSpeak={false}
       showShare={false}
       showSettings={false}
+      clearHistory={jest.fn()}
     />
   );
   expect(container).toMatchSnapshot();
@@ -57,6 +59,7 @@ it('renders Header with speaker muted unchanged', () => {
       hasUserActivatedSpeak={false}
       showShare={false}
       showSettings={false}
+      clearHistory={jest.fn()}
     />
   );
   expect(container).toMatchSnapshot();
@@ -74,6 +77,7 @@ it('renders Header with share button unchanged', () => {
       hasUserActivatedSpeak={false}
       showShare={true}
       showSettings={false}
+      clearHistory={jest.fn()}
     />
   );
   expect(container).toMatchSnapshot();
@@ -91,6 +95,26 @@ it('renders Header with settings button unchanged', () => {
       hasUserActivatedSpeak={false}
       showShare={false}
       showSettings={true}
+      clearHistory={jest.fn()}
+    />
+  );
+  expect(container).toMatchSnapshot();
+});
+
+it('renders Header with clear button unchanged', () => {
+  const { container } = render(
+    <Header
+      memori={memori}
+      history={history}
+      setShowPositionDrawer={jest.fn()}
+      setShowSettingsDrawer={jest.fn()}
+      speakerMuted={false}
+      setSpeakerMuted={jest.fn()}
+      hasUserActivatedSpeak={false}
+      showShare={false}
+      showSettings={false}
+      showClear
+      clearHistory={jest.fn()}
     />
   );
   expect(container).toMatchSnapshot();
@@ -108,6 +132,7 @@ it('renders Header with user activated speak unchanged', () => {
       hasUserActivatedSpeak={true}
       showShare={false}
       showSettings={false}
+      clearHistory={jest.fn()}
     />
   );
   expect(container).toMatchSnapshot();

package/src/components/Header/Header.tsx

@@ -16,6 +16,7 @@ import ShareButton from '../ShareButton/ShareButton';
 import FullscreenExit from '../icons/FullscreenExit';
 import Fullscreen from '../icons/Fullscreen';
 import Refresh from '../icons/Refresh';
+import Clear from '../icons/Clear';
 
 export interface Props {
   className?: string;
@@ -31,6 +32,8 @@ export interface Props {
   showSettings?: boolean;
   showSpeaker?: boolean;
   showReload?: boolean;
+  showClear?: boolean;
+  clearHistory: () => void;
 }
 
 const Header: React.FC<Props> = ({
@@ -47,6 +50,8 @@ const Header: React.FC<Props> = ({
   showSettings = true,
   showSpeaker = true,
   showReload = false,
+  showClear = false,
+  clearHistory,
 }) => {
   const { t } = useTranslation();
   const [fullScreenAvailable, setFullScreenAvailable] = useState(false);
@@ -71,6 +76,16 @@ const Header: React.FC<Props> = ({
           }}
         />
       )}
+      {showClear && (
+        <Button
+          primary
+          shape="circle"
+          className="memori-header--button memori-header--button--clear"
+          title={t('clearHistory') || 'Clear chat'}
+          icon={<Clear />}
+          onClick={clearHistory}
+        />
+      )}
       {memori.needsPosition && position && (
         <div className="memori-header--position">
           <span className="memori-header--position-placeName">

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

@@ -58,6 +58,84 @@ exports[`renders Header unchanged 1`] = `
 </div>
 `;
 
+exports[`renders Header with clear button unchanged 1`] = `
+<div>
+  <div
+    class="memori-header"
+  >
+    <button
+      class="memori-button memori-button--primary memori-button--circle memori-button--padded memori-button--icon-only memori-header--button memori-header--button--clear"
+      title="clearHistory"
+    >
+      <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="M899.1 869.6l-53-305.6H864c14.4 0 26-11.6 26-26V346c0-14.4-11.6-26-26-26H618V138c0-14.4-11.6-26-26-26H432c-14.4 0-26 11.6-26 26v182H160c-14.4 0-26 11.6-26 26v192c0 14.4 11.6 26 26 26h17.9l-53 305.6c-.3 1.5-.4 3-.4 4.4 0 14.4 11.6 26 26 26h723c1.5 0 3-.1 4.4-.4 14.2-2.4 23.7-15.9 21.2-30zM204 390h272V182h72v208h272v104H204V390zm468 440V674c0-4.4-3.6-8-8-8h-48c-4.4 0-8 3.6-8 8v156H416V674c0-4.4-3.6-8-8-8h-48c-4.4 0-8 3.6-8 8v156H202.8l45.1-260H776l45.1 260H672z"
+          />
+        </svg>
+      </span>
+    </button>
+    <button
+      class="memori-button memori-button--primary memori-button--circle memori-button--padded memori-button--icon-only memori-header--button memori-header--button--speaker"
+      title="widget.sound"
+    >
+      <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="M625.9 115c-5.9 0-11.9 1.6-17.4 5.3L254 352H90c-8.8 0-16 7.2-16 16v288c0 8.8 7.2 16 16 16h164l354.5 231.7c5.5 3.6 11.6 5.3 17.4 5.3 16.7 0 32.1-13.3 32.1-32.1V147.1c0-18.8-15.4-32.1-32.1-32.1zM586 803L293.4 611.7l-18-11.7H146V424h129.4l17.9-11.7L586 221v582zm348-327H806c-8.8 0-16 7.2-16 16v40c0 8.8 7.2 16 16 16h128c8.8 0 16-7.2 16-16v-40c0-8.8-7.2-16-16-16zm-41.9 261.8l-110.3-63.7a15.9 15.9 0 00-21.7 5.9l-19.9 34.5c-4.4 7.6-1.8 17.4 5.8 21.8L856.3 800a15.9 15.9 0 0021.7-5.9l19.9-34.5c4.4-7.6 1.7-17.4-5.8-21.8zM760 344a15.9 15.9 0 0021.7 5.9L892 286.2c7.6-4.4 10.2-14.2 5.8-21.8L878 230a15.9 15.9 0 00-21.7-5.9L746 287.8a15.99 15.99 0 00-5.8 21.8L760 344z"
+          />
+        </svg>
+      </span>
+    </button>
+    <div
+      class="memori-export-history-button memori-header--button memori-header--button--export"
+      data-headlessui-state=""
+      title="write_and_speak.exportChatHistoryMessage"
+    >
+      <button
+        class="memori-button memori-button--circle memori-button--icon-only memori-button--disabled"
+        data-headlessui-state=""
+        disabled=""
+        id="headlessui-popover-button-:rr:"
+        type="button"
+      >
+        <div
+          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="M464 512a48 48 0 1096 0 48 48 0 10-96 0zm200 0a48 48 0 1096 0 48 48 0 10-96 0zm-400 0a48 48 0 1096 0 48 48 0 10-96 0zm661.2-173.6c-22.6-53.7-55-101.9-96.3-143.3a444.35 444.35 0 00-143.3-96.3C630.6 75.7 572.2 64 512 64h-2c-60.6.3-119.3 12.3-174.5 35.9a445.35 445.35 0 00-142 96.5c-40.9 41.3-73 89.3-95.2 142.8-23 55.4-34.6 114.3-34.3 174.9A449.4 449.4 0 00112 714v152a46 46 0 0046 46h152.1A449.4 449.4 0 00510 960h2.1c59.9 0 118-11.6 172.7-34.3a444.48 444.48 0 00142.8-95.2c41.3-40.9 73.8-88.7 96.5-142 23.6-55.2 35.6-113.9 35.9-174.5.3-60.9-11.5-120-34.8-175.6zm-151.1 438C704 845.8 611 884 512 884h-1.7c-60.3-.3-120.2-15.3-173.1-43.5l-8.4-4.5H188V695.2l-4.5-8.4C155.3 633.9 140.3 574 140 513.7c-.4-99.7 37.7-193.3 107.6-263.8 69.8-70.5 163.1-109.5 262.8-109.9h1.7c50 0 98.5 9.7 144.2 28.9 44.6 18.7 84.6 45.6 119 80 34.3 34.3 61.3 74.4 80 119 19.4 46.2 29.1 95.2 28.9 145.8-.6 99.6-39.7 192.9-110.1 262.7z"
+            />
+          </svg>
+        </div>
+      </button>
+    </div>
+  </div>
+</div>
+`;
+
 exports[`renders Header with position unchanged 1`] = `
 <div>
   <div
@@ -405,7 +483,7 @@ exports[`renders Header with user activated speak unchanged 1`] = `
         aria-expanded="false"
         class="memori-button memori-button--circle memori-button--icon-only memori-button--primary"
         data-headlessui-state=""
-        id="headlessui-popover-button-:rr:"
+        id="headlessui-popover-button-:r10:"
         type="button"
       >
         <div

package/src/components/MemoriWidget/MemoriWidget.stories.tsx

@@ -121,6 +121,28 @@ ShowSettings.args = {
   showSettings: true,
 };
 
+export const ShowClear = Template.bind({});
+ShowClear.args = {
+  memori,
+  tenant,
+  showClear: true,
+};
+
+export const ShowOnlyLastMessages = Template.bind({});
+ShowOnlyLastMessages.args = {
+  memori,
+  tenant,
+  showOnlyLastMessages: true,
+};
+
+export const ShowOnlyLastMessagesWithAnotherDefault = Template.bind({});
+ShowOnlyLastMessagesWithAnotherDefault.args = {
+  memori,
+  tenant,
+  showOnlyLastMessages: false,
+  layout: 'WEBSITE_ASSISTANT',
+};
+
 export const WithAzureSpeechKey = Template.bind({});
 WithAzureSpeechKey.args = {
   memori,

package/src/components/MemoriWidget/MemoriWidget.tsx

@@ -298,6 +298,8 @@ export interface Props {
   showDates?: boolean;
   showContextPerLine?: boolean;
   showSettings?: boolean;
+  showClear?: boolean;
+  showOnlyLastMessages?: boolean;
   showTypingText?: boolean;
   preview?: boolean;
   embed?: boolean;
@@ -340,6 +342,8 @@ const MemoriWidget = ({
   showContextPerLine = false,
   showSettings = true,
   showTypingText = false,
+  showClear = false,
+  showOnlyLastMessages,
   height = '100vh',
   secret,
   baseUrl = 'https://app.twincreator.com',
@@ -1984,7 +1988,13 @@ const MemoriWidget = ({
   ) as CSSProperties;
 
   const integrationStylesheet = `
-    ${preview ? '#preview' : ':root'}, .memori-widget {
+    ${
+      preview
+        ? '#preview,'
+        : selectedLayout === 'WEBSITE_ASSISTANT'
+        ? ''
+        : ':root,'
+    } .memori-widget {
       ${Object.entries(integrationProperties)
         .map(([key, value]) => `${key}: ${value};`)
         .join('\n')}
@@ -2495,6 +2505,11 @@ const MemoriWidget = ({
     };
   }, []);
 
+  const showFullHistory =
+    showOnlyLastMessages === undefined
+      ? layout !== 'TOTEM' && layout !== 'WEBSITE_ASSISTANT'
+      : !showOnlyLastMessages;
+
   const headerProps: HeaderProps = {
     memori,
     history,
@@ -2521,6 +2536,8 @@ const MemoriWidget = ({
     showSettings,
     hasUserActivatedSpeak,
     showReload: selectedLayout === 'TOTEM',
+    showClear,
+    clearHistory: () => setHistory(h => h.slice(-1)),
   };
 
   const avatarProps: AvatarProps = {
@@ -2577,7 +2594,7 @@ const MemoriWidget = ({
     memoriTyping,
     typingText,
     showTypingText,
-    history: layout === 'TOTEM' ? history.slice(-2) : history,
+    history: showFullHistory ? history : history.slice(-2),
     authToken: loginToken,
     dialogState: currentDialogState,
     setDialogState: setCurrentDialogState,
@@ -2663,6 +2680,7 @@ const MemoriWidget = ({
         'memori-widget',
         `memori-layout-${layout.toLowerCase()}`,
         `memori-controls-${controlsPosition.toLowerCase()}`,
+        `memori--avatar-${integrationConfig?.avatar || 'default'}`,
         {
           'memori--preview': preview,
           'memori--embed': embed,

package/src/components/icons/Clear.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+
+const Clear = ({
+  className,
+  title,
+}: {
+  className?: string;
+  title?: string;
+}) => (
+  <svg
+    {...(!title ? { 'aria-hidden': 'true' } : {})}
+    focusable="false"
+    role="img"
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 1024 1024"
+    className={className}
+    aria-label={title}
+  >
+    <path d="M899.1 869.6l-53-305.6H864c14.4 0 26-11.6 26-26V346c0-14.4-11.6-26-26-26H618V138c0-14.4-11.6-26-26-26H432c-14.4 0-26 11.6-26 26v182H160c-14.4 0-26 11.6-26 26v192c0 14.4 11.6 26 26 26h17.9l-53 305.6c-.3 1.5-.4 3-.4 4.4 0 14.4 11.6 26 26 26h723c1.5 0 3-.1 4.4-.4 14.2-2.4 23.7-15.9 21.2-30zM204 390h272V182h72v208h272v104H204V390zm468 440V674c0-4.4-3.6-8-8-8h-48c-4.4 0-8 3.6-8 8v156H416V674c0-4.4-3.6-8-8-8h-48c-4.4 0-8 3.6-8 8v156H202.8l45.1-260H776l45.1 260H672z"></path>
+  </svg>
+);
+
+export default Clear;

package/src/components/layouts/__snapshots__/Chat.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`renders Chat layout unchanged 1`] = `
 <div>
   <div
-    class="memori memori-widget memori-layout-chat memori-controls-bottom memori--with-integration"
+    class="memori memori-widget memori-layout-chat memori-controls-bottom memori--avatar-readyplayerme memori--with-integration"
     data-memori-engine-state="{}"
     data-memori-id="66b4e161-2431-4b21-9b70-d8c27de730ca"
     data-memori-integration="cb3c4776-7f0b-4f97-a773-c32a5d7a3bf1"

package/src/components/layouts/__snapshots__/FullPage.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`renders FullPage layout unchanged 1`] = `
 <div>
   <div
-    class="memori memori-widget memori-layout-fullpage memori-controls-bottom memori--with-integration"
+    class="memori memori-widget memori-layout-fullpage memori-controls-bottom memori--avatar-readyplayerme memori--with-integration"
     data-memori-engine-state="{}"
     data-memori-id="66b4e161-2431-4b21-9b70-d8c27de730ca"
     data-memori-integration="cb3c4776-7f0b-4f97-a773-c32a5d7a3bf1"
@@ -128,7 +128,7 @@ exports[`renders FullPage layout unchanged 1`] = `
           class="memori--grid-column memori--grid-column-left"
         >
           <div
-            class="memori--avatar-wrapper"
+            class="memori--avatar-wrapper memori--avatar-readyplayerme"
           >
             <div
               class="memori--blob-container"

package/src/components/layouts/__snapshots__/Totem.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`renders Totem layout unchanged 1`] = `
 <div>
   <div
-    class="memori memori-widget memori-layout-totem memori-controls-bottom memori--with-integration"
+    class="memori memori-widget memori-layout-totem memori-controls-bottom memori--avatar-readyplayerme memori--with-integration"
     data-memori-engine-state="{}"
     data-memori-id="66b4e161-2431-4b21-9b70-d8c27de730ca"
     data-memori-integration="cb3c4776-7f0b-4f97-a773-c32a5d7a3bf1"
@@ -179,7 +179,7 @@ exports[`renders Totem layout unchanged 1`] = `
         class="memori-totem-layout--avatar"
       >
         <div
-          class="memori--avatar-wrapper"
+          class="memori--avatar-wrapper memori--avatar-readyplayerme"
         >
           <div
             class="memori--blob-container"

package/src/components/layouts/__snapshots__/WebsiteAssistant.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`renders WEBSITE_ASSISTANT layout unchanged 1`] = `
 <div>
   <div
-    class="memori memori-widget memori-layout-website_assistant memori-controls-bottom memori--with-integration"
+    class="memori memori-widget memori-layout-website_assistant memori-controls-bottom memori--avatar-readyplayerme memori--with-integration"
     data-memori-engine-state="{}"
     data-memori-id="66b4e161-2431-4b21-9b70-d8c27de730ca"
     data-memori-integration="cb3c4776-7f0b-4f97-a773-c32a5d7a3bf1"

package/src/components/layouts/website-assistant.css

@@ -44,6 +44,12 @@
     box-shadow: 0 0 0.5em 0.2em rgba(0, 0, 0, 0.85) inset, 0 0 0.15em 0 rgba(255, 255, 255, 0.85);
 }
 
+.memori-website_assistant--trigger-button .memori-blob,
+.memori-website_assistant--trigger-button .memori-blob .mainDiv,
+.memori-website_assistant--trigger-button .memori-blob figure {
+    pointer-events: none;
+    touch-action: none;
+}
 
 @media (max-width: 768px) {
     .memori-website_assistant--trigger-button .memori-blob {
@@ -94,7 +100,7 @@
 }
 
 .memori-website_assistant--trigger-button .memori-blob figure {
-    width: 65%;
+    width: 85%;
     border-radius: 0;
     opacity: 0.75;
 }
@@ -221,23 +227,7 @@
     margin-top: auto;
 }
 
-.memori-website_assistant-layout--avatar .memori--avatar-wrapper>div {
-    overflow: visible !important;
-    /* width: 100% !important;
-    height: 100% !important; */
-    width: auto !important;
-    height: 90% !important;
-    max-height: 90%;
-    border-radius: 0;
-    transform: scale(1.7) translate(0px, 10vh);
-}
 
-.memori-website_assistant-layout--avatar .memori--avatar-wrapper canvas {
-    width: auto !important;
-    max-width: 100%;
-    height: 100% !important;
-    max-height: 100%;
-}
 
 .memori-website_assistant-layout--controls {
     position: relative;
@@ -331,26 +321,51 @@
     z-index: 2;
 }
 
-.memori-website_assistant-layout--avatar .memori--avatar-wrapper>div canvas+div {
-    position: absolute !important;
+.memori-website_assistant-layout--avatar .memori--avatar-wrapper .avatar-loader {
+    display: flex;
     width: 100%;
     height: 100%;
+    align-items: center;
+    justify-content: center;
     transform: none !important;
 }
 
-.memori-website_assistant-layout--avatar .memori--avatar-wrapper .avatar-loader {
-    display: flex;
+.memori-layout-website_assistant .memori--avatar-wrapper>div {
+    overflow: visible !important;
+    /* width: 100% !important;
+    height: 100% !important; */
+    width: auto !important;
+    height: 90% !important;
+    max-height: 90%;
+    border-radius: 0;
+}
+
+.memori-layout-website_assistant .memori--avatar-wrapper>div canvas+div {
+    position: absolute !important;
     width: 100%;
     height: 100%;
-    align-items: center;
-    justify-content: center;
     transform: none !important;
 }
 
+.memori-layout-website_assistant.memori--avatar-readyplayerme-full .memori--avatar-wrapper>div {
+    transform: scale(1.7) translate(0px, 10vh);
+}
+
+.memori-website_assistant-layout--avatar .memori--avatar-wrapper canvas {
+    width: auto !important;
+    max-width: 100%;
+    height: 100% !important;
+    max-height: 100%;
+}
+
 .memori-website_assistant-layout--avatar .memori--avatar-wrapper .avatar-loader figure {
     text-align: center;
 }
 
+.memori-layout-website_assistant.memori--avatar-readyplayerme .memori-website_assistant--trigger-button .memori-blob figure {
+    width: 100%;
+}
+
 .memori-website_assistant-layout--avatar .memori--avatar-wrapper .avatar-loader .memori-spin--spinner {
     background: none;
 }
@@ -358,4 +373,20 @@
 .memori-website_assistant-layout .memori--description-text,
 .memori-website_assistant-layout .memori--translation-toggle {
     display: none;
+}
+
+.memori-website_assistant-layout .memori-chat--bubble,
+.memori-website_assistant-layout .memori-chat--bubble.memori-chat--user-bubble {
+    opacity: 0.6;
+    transition: opacity 0.2s ease-in-out;
+}
+
+.memori-website_assistant-layout .memori-chat--bubble p,
+.memori-website_assistant-layout .memori-chat--bubble.memori-chat--user-bubble p {
+    opacity: 1;
+}
+
+.memori-website_assistant-layout .memori-chat--bubble:hover,
+.memori-website_assistant-layout .memori-chat--bubble.memori-chat--user-bubble:hover {
+    opacity: 1;
 }

package/src/styles.css

@@ -70,7 +70,8 @@ body.sb-show-main #root,
     --memori-primary-text: #fff;
     --memori-inner-content-pad: 1rem;
     --memori-inner-bg: transparent;
-    --memori-chat-bubble-bg: #ffffff60;
+    --memori-chat-bubble-bg: #fff;
+    --memori-chat-user-bubble-bg: var(--memori-primary);
     --memori-text-color: #000;
     --memori-button-bg: #fff;
     --memori-button-text: #000;