@memori.ai/memori-react 8.38.4 → 9.0.0-alpha.0

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

@@ -3,8 +3,9 @@
 exports[`renders Auth on tokens unchanged 1`] = `
 <div>
   <form
-    class="memori-auth-widget--form"
-    name="memoriAuth"
+    class="memori-form memori-auth-widget--form"
+    name="auth"
+    novalidate=""
   >
     <fieldset
       class="memori-auth-widget--tokens-fieldset"
@@ -17,50 +18,80 @@ exports[`renders Auth on tokens unchanged 1`] = `
       <label
         class="memori-auth-widget--token"
       >
+        <span
+          class="sr-only"
+        >
+          auth.tokenNumber
+        </span>
         <input
+          aria-label="auth.tokenNumber"
           autocomplete="off"
-          class="memori-auth-widget--input"
+          class="memori-input memori-input--default memori-input--md memori-auth-widget--input"
+          id="base-ui-:r2:"
           name="tokens.0"
           placeholder="Recovery token"
           required=""
           type="password"
+          value=""
         />
       </label>
       <button
-        class="memori-button memori-button--rounded memori-button--padded memori-button--with-icon memori-auth-widget--token-add"
+        class="memori-button memori-button--primary memori-button--md memori-auth-widget--token-add"
+        tabindex="0"
+        type="button"
       >
         <span
-          class="memori-button--icon"
+          class="memori-button__icon"
         >
           <svg
-            aria-hidden="true"
-            focusable="false"
-            role="img"
-            viewBox="0 0 1024 1024"
+            class="lucide lucide-plus"
+            fill="none"
+            height="24"
+            stroke="currentColor"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            viewBox="0 0 24 24"
+            width="24"
             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"
+              d="M5 12h14"
             />
             <path
-              d="M176 474h672q8 0 8 8v60q0 8-8 8H176q-8 0-8-8v-60q0-8 8-8z"
+              d="M12 5v14"
             />
           </svg>
         </span>
-        auth.addToken
+        <span
+          class="memori-button__content"
+        >
+          auth.addToken
+        </span>
       </button>
       <hr />
       <button
-        class="memori-button memori-button--outlined memori-button--rounded memori-button--padded"
+        class="memori-button memori-button--outline memori-button--md"
+        tabindex="0"
+        type="button"
       >
-        auth.usePassword
+        <span
+          class="memori-button__content"
+        >
+          auth.usePassword
+        </span>
       </button>
     </fieldset>
     <button
-      class="memori-button memori-button--primary memori-button--rounded memori-button--padded memori-auth-widget--submit"
+      class="memori-button memori-button--primary memori-button--md memori-auth-widget--submit"
+      tabindex="0"
       type="submit"
     >
-      confirm
+      <span
+        class="memori-button__content"
+      >
+        confirm
+      </span>
     </button>
   </form>
 </div>
@@ -69,74 +100,99 @@ exports[`renders Auth on tokens unchanged 1`] = `
 exports[`renders Auth unchanged 1`] = `
 <div>
   <form
-    class="memori-auth-widget--form"
-    name="memoriAuth"
+    class="memori-form memori-auth-widget--form"
+    name="auth"
+    novalidate=""
   >
     <fieldset
       class="memori-auth-widget--password-fieldset"
     >
-      <label>
+      <label
+        for="auth-password"
+      >
         Password:
          
         <input
-          class="memori-auth-widget--input"
+          class="memori-input memori-input--default memori-input--md memori-auth-widget--input"
+          id="auth-password"
           name="password"
           placeholder="Password"
           required=""
           type="password"
+          value=""
         />
       </label>
     </fieldset>
     <button
-      class="memori-button memori-button--primary memori-button--rounded memori-button--padded memori-auth-widget--submit"
+      class="memori-button memori-button--primary memori-button--md memori-auth-widget--submit"
+      tabindex="0"
       type="submit"
     >
-      confirm
+      <span
+        class="memori-button__content"
+      >
+        confirm
+      </span>
     </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>
+<div
+  aria-hidden="true"
+  data-base-ui-inert=""
+/>
 `;
 
 exports[`renders Auth with tokens unchanged 1`] = `
 <div>
   <form
-    class="memori-auth-widget--form"
-    name="memoriAuth"
+    class="memori-form memori-auth-widget--form"
+    name="auth"
+    novalidate=""
   >
     <fieldset
       class="memori-auth-widget--password-fieldset"
     >
-      <label>
+      <label
+        for="auth-password"
+      >
         Password:
          
         <input
-          class="memori-auth-widget--input"
+          class="memori-input memori-input--default memori-input--md memori-auth-widget--input"
+          id="auth-password"
           name="password"
           placeholder="Password"
           required=""
           type="password"
+          value=""
         />
       </label>
       <hr />
       <button
-        class="memori-button memori-button--outlined memori-button--rounded memori-button--padded"
+        class="memori-button memori-button--outline memori-button--md"
+        tabindex="0"
+        type="button"
       >
-        auth.useRecoveryTokens
+        <span
+          class="memori-button__content"
+        >
+          auth.useRecoveryTokens
+        </span>
       </button>
     </fieldset>
     <button
-      class="memori-button memori-button--primary memori-button--rounded memori-button--padded memori-auth-widget--submit"
+      class="memori-button memori-button--primary memori-button--md memori-auth-widget--submit"
+      tabindex="0"
       type="submit"
     >
-      confirm
+      <span
+        class="memori-button__content"
+      >
+        confirm
+      </span>
     </button>
   </form>
 </div>

package/src/components/Avatar/Avatar.css

@@ -69,11 +69,11 @@
     } */
 
     .memori--avatar-wrapper model-viewer {
-        margin-top: 2rem;
+        margin-top: var(--memori-spacing-2xl);
     }
 
     .memori--avatar-wrapper div {
-        top: 1rem;
+        top: var(--memori-spacing-lg);
     }
 }
 

package/src/components/Avatar/Avatar.tsx

@@ -5,15 +5,13 @@ import {
   Tenant,
 } from '@memori.ai/memori-api-client/dist/types';
 import ErrorBoundary from '../ErrorBoundary/ErrorBoundary';
-import Tooltip from '../ui/Tooltip';
+import { Tooltip } from '@memori.ai/ui';
 import { getResourceUrl } from '../../helpers/media';
 import Blob from '../Blob/Blob';
 import ModelViewer from '../CustomGLBModelViewer/ModelViewer';
-import Button from '../ui/Button';
+import { Button } from '@memori.ai/ui';
 import { useTranslation } from 'react-i18next';
-import Eye from '../icons/Eye';
-import EyeInvisible from '../icons/EyeInvisible';
-import Edit from '../icons/Edit';
+import { Eye, EyeOff, Pencil } from 'lucide-react';
 import cx from 'classnames';
 import ContainerAvatarView from './AvatarView';
 import { useViseme } from '../../context/visemeContext';
@@ -180,9 +178,14 @@ const Avatar: React.FC<Props> = ({
   const renderAvatarToggle = () => (
     <div className="memori--avatar-toggle">
       <Button
-        ghost
+        variant="ghost"
         onClick={() => setAvatar3dVisible(!avatar3dVisible)}
-        icon={avatar3dVisible ? <EyeInvisible /> : <Eye />}
+        aria-label={
+          avatar3dVisible
+            ? String(t('hide'))
+            : String(t('show'))
+        }
+        icon={avatar3dVisible ? <EyeOff aria-hidden /> : <Eye aria-hidden />}
       >
         <span className="memori--avatar-toggle-text">
           {avatar3dVisible ? t('hide') : t('show')}
@@ -228,7 +231,7 @@ const Avatar: React.FC<Props> = ({
         >
           <Tooltip content={t('widgetgoToIntegrationsToCustomizeAvatar')}>
             <span className="memori-button--icon">
-              <Edit />
+              <Pencil />
             </span>
           </Tooltip>
         </a>

package/src/components/Avatar/AvatarView/AvatarComponent/Shadow/DynamicShadow.tsx

@@ -19,7 +19,7 @@ const DynamicShadow = ({
       scale: 10,
       far: 5,
       resolution: 1024,
-      color: '#000000',
+      color: 'var(--memori-text-color)',
     };
 
     if (!animator) {

package/src/components/Avatar/AvatarView/AvatarComponent/components/loader.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Html, useProgress } from '@react-three/drei';
-import Spin from '../../../../ui/Spin';
+import { Spin } from '@memori.ai/ui';
 
 interface Props {
   fallbackImg?: string;

package/src/components/Avatar/AvatarView/AvatarComponent/positionControls/positionControls.css

@@ -10,13 +10,13 @@
   height: 340px;
   max-height: 340px;
   flex-direction: column;
-  padding: 16px;
-  border-radius: 16px;
+  padding: var(--memori-spacing-md);
+  border-radius: var(--memori-radius-box);
   -webkit-backdrop-filter: blur(10px);
   backdrop-filter: blur(10px);
-  background-color: var(--memori-inner-bg, #fff);
+  background-color: var(--memori-main-background);
   box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
-  gap: 0.5rem;
+  gap: var(--memori-spacing-sm);
   text-align: left;
   transform: none; /* Remove transform */
 }
@@ -25,14 +25,14 @@
 .memori--slider-container {
   display: flex;
   flex-direction: column;
-  padding: 8px 0;
-  gap: 0.75rem;
+  padding: var(--memori-spacing-sm) 0;
+  gap: var(--memori-spacing-md);
 }
 
 .memori--slider-label {
-  color: var(--memori-text-color, #333);
-  /* margin-bottom: 8px; */
-  font-size: 1.2rem;
+  color: var(--memori-text-color);
+  /* margin-bottom: var(--memori-spacing-sm); */
+  font-size: var(--memori-text-size-large);
 }
 
 /* Button adjustments */
@@ -40,16 +40,16 @@
   display: flex;
   flex-direction: row;
   margin-top: 0px;
-  margin-bottom: 12px;
+  margin-bottom: calc(var(--memori-spacing-sm) + var(--memori-spacing-xs));
   /* justify-content: space-between; */
   /* margin-top: 36px; */
-  gap: 8px;
+  gap: var(--memori-spacing-sm);
 }
 
 .memori--preset-buttons button {
   min-height: 36px;
   flex: 1;
-  padding: 8px 4px;
+  padding: var(--memori-spacing-sm) var(--memori-spacing-xs);
   font-size: 0.9rem;
 }
 
@@ -59,34 +59,34 @@
   top: -25px;
   right: -30px;
   border-radius: 50%;
-  background-color: var(--memori-inner-bg, #fff);
+  background-color: var(--memori-main-background);
 }
 
 .memori--position-controls-close-button {
   min-width: 36px;
   min-height: 36px;
-  padding: 8px;
+  padding: var(--memori-spacing-sm);
 }
 
 /* Totem specific adjustments */
 @media screen and (max-width: 480px) {
   .memori--position-controls {
     right: 10px;
-    bottom: 80px;
+    bottom: var(--memori-spacing-5xl);
     width: 280px;
   }
 
   .memori--preset-buttons {
-    margin-top: 32px;
+    margin-top: var(--memori-spacing-xl);
   }
   
   .memori--preset-buttons button {
-    padding: 6px 4px;
+    padding: calc(var(--memori-spacing-xs) + 2px) var(--memori-spacing-xs);
     font-size: 0.85rem;
   }
   
   .memori--slider-container {
-    padding: 6px 0;
+    padding: calc(var(--memori-spacing-xs) + 2px) 0;
   }
 }
 
@@ -97,7 +97,7 @@
   }
 
   /* .memori--preset-buttons {
-    margin-top: 32px;
+    margin-top: var(--memori-spacing-xl);
   } */
   
   .memori--slider-label {
@@ -105,7 +105,7 @@
   }
   
   .memori--preset-buttons button {
-    padding: 10px 6px;
-    font-size: 1rem;
+    padding: calc(var(--memori-spacing-sm) + 2px) calc(var(--memori-spacing-xs) + 2px);
+    font-size: var(--memori-text-size-base);
   }
 }

package/src/components/Avatar/AvatarView/AvatarComponent/positionControls/positionControls.tsx

@@ -1,9 +1,8 @@
 import { useEffect, useRef } from 'react';
 import { setLocalConfig } from '../../../../../helpers/configuration';
 import { useTranslation } from 'react-i18next';
-import Slider from '../../../../../components/ui/Slider';
-import Button from '../../../../ui/Button';
-import Close from '../../../../icons/Close';
+import { Slider, Button } from '@memori.ai/ui';
+import { X } from 'lucide-react';
 
 interface PositionControlsProps {
   avatarHeight: number;
@@ -104,9 +103,8 @@ const PositionControls: React.FC<PositionControlsProps> = ({
     <div className="memori--position-controls">
       <div className="memori--position-controls-close">
         <Button
-          ghost
-          icon={<Close />}
-          outlined
+          variant="ghost"
+          icon={<X />}
           danger
           shape="circle"
           className="memori--position-controls-close-button"
@@ -117,7 +115,7 @@ const PositionControls: React.FC<PositionControlsProps> = ({
       </div>
       {/* <div className="memori--slider-container"> */}
         <Slider
-          defaultValue={settingsRef.current.height}
+          value={avatarHeight}
           min={0.5}
           max={100}
           label={t('write_and_speak.height')}
@@ -130,7 +128,7 @@ const PositionControls: React.FC<PositionControlsProps> = ({
       {/* </div> */}
       {/* <div className="memori--slider-container"> */}
         <Slider
-          defaultValue={settingsRef.current.depth}
+          value={avatarDepth}
           min={0.5}
           max={100}
           step={5}
@@ -143,8 +141,8 @@ const PositionControls: React.FC<PositionControlsProps> = ({
       {/* </div> */}
       <div className="memori--preset-buttons">
         <Button
-          outlined
-          isActive={
+          variant="outline"
+          active={
             avatarHeight ===
               (halfBody ? zoomedPosition.height : normalPosition.height) &&
             avatarDepth ===
@@ -160,8 +158,8 @@ const PositionControls: React.FC<PositionControlsProps> = ({
           {t('write_and_speak.zoomed')}
         </Button>
         <Button
-          outlined
-          isActive={
+          variant="outline"
+          active={
             avatarHeight ===
               (halfBody ? normalPosition.height : zoomedPosition.height) &&
             avatarDepth ===
@@ -177,8 +175,8 @@ const PositionControls: React.FC<PositionControlsProps> = ({
           {t('write_and_speak.normal')}
         </Button>
         <Button
-          outlined
-          isActive={
+          variant="outline"
+          active={
             avatarHeight ===
               (halfBody ? farPosition.height : normalPosition.height) &&
             avatarDepth ===

package/src/components/Blob/Blob.css

@@ -12,17 +12,22 @@
     justify-content: center;
     border-radius: 90% 95% 85% 105%;
     animation: wobble calc(150ms * var(--memori-blob-t)) linear infinite;
+    backface-visibility: hidden;
     background: #f0f;
     box-shadow: 0 0 0.5em 0.2em #000 inset, 0 0 0.15em 0 #fff;
     filter: hue-rotate(0deg);
     font-size: 20vmin;
     mix-blend-mode: screen;
-    transform: translate(var(--memori-blob-x, -50%), var(--memori-blob-y, -50%)) rotate(0deg);
+    transform: translate(var(--memori-blob-x, -50%), var(--memori-blob-y, -50%)) rotate(0deg) translateZ(0);
     transform-origin: 50% 50%;
+    will-change: transform;
 }
 
 .memori-blob.memori-blob--speaking {
     animation: blobspeaking 2s ease-in-out infinite;
+    backface-visibility: hidden;
+    transform: translateZ(0);
+    will-change: transform;
 }
 
 @media screen and (max-height: 1280px) {
@@ -84,43 +89,40 @@
 @keyframes wobble {
     to {
         filter: hue-rotate(360deg);
-        transform: translate(var(--memori-blob-x), var(--memori-blob-y)) rotate(360deg);
+        transform: translate(var(--memori-blob-x), var(--memori-blob-y)) rotate(360deg) translateZ(0);
     }
 }
 
 @keyframes blobspeaking {
-    0% {
+    0%, 100% {
         filter: brightness(1);
-        transform: scale(1);
+        transform: scale(1) translateZ(0);
     }
 
     15% {
         filter: brightness(1.1);
+        transform: scale(1) translateZ(0);
     }
 
     30% {
         filter: brightness(1);
-        transform: scale(0.99);
+        transform: scale(0.99) translateZ(0);
     }
 
     50% {
         filter: brightness(1.05);
-        transform: scale(1.01);
+        transform: scale(1.01) translateZ(0);
     }
 
     75% {
         filter: brightness(1.15);
-    }
-
-    100% {
-        filter: brightness(1.1);
-        transform: scale(0.99);
+        transform: scale(1) translateZ(0);
     }
 }
 
 .memori-blob {
     position: relative;
-    z-index: 100;
+    z-index: 10;
     top: 25%;
 }
 

package/src/components/BlockedMemoriBadge/BlockedMemoriBadge.css

@@ -17,16 +17,16 @@
 }
 
 .blocked-memori-badge.margin-left {
-    margin-left: 0.5rem;
+    margin-left: var(--memori-spacing-sm);
 }
 
 .blocked-memori-badge--icon {
     width: 1rem;
     height: 1rem;
-    color: #d48806;
+    color: var(--memori-text-color);
     cursor: pointer;
     fill: currentColor;
-    font-size: 1rem;
+    font-size: var(--memori-text-size-base);
 }
 
 .blocked-memori-badge--tooltip {
@@ -36,5 +36,5 @@
 }
 
 .blocked-memori-badge--title {
-    margin-left: 0.5rem;
+    margin-left: var(--memori-spacing-sm);
 }

package/src/components/BlockedMemoriBadge/BlockedMemoriBadge.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
-import Tooltip from '../ui/Tooltip';
-import Warning from '../icons/Warning';
+import { Tooltip } from '@memori.ai/ui';
+import { AlertTriangle } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
 
 export interface Props {
@@ -59,7 +59,7 @@ const BlockedMemoriBadge = ({
         <div
           className={`blocked-memori-badge ${marginLeft ? ` margin-left` : ''}`}
         >
-          <Warning className="blocked-memori-badge--icon" />
+          <AlertTriangle className="blocked-memori-badge--icon" />
         </div>
         {showTitle && (
           <span className="blocked-memori-badge--title">