@memori.ai/memori-react 8.11.0 → 8.13.0

package/esm/locales/de.json

@@ -24,7 +24,10 @@
     "last_7_days": "Letzte 7 Tage",
     "last_30_days": "Letzte 30 Tage",
     "missingData": "Fehlende Informationen",
+    "date": "Geburtsdatum",
     "day": "Tag",
+    "copied": "Kopiert!",
+    "placeholder": "Stellen Sie eine Frage",
     "month": "Monat",
     "year": "Jahr",
     "createdAt": "Erstellungsdatum",
@@ -106,6 +109,8 @@
         "tokens": "Token",
         "addToken": "Token hinzufügen",
         "usePassword": "Passwort verwenden",
+        "passwordRequired": "Passwort erforderlich",
+        "invalidCredentials": "Ungültige Zugangsdaten",
         "atLeast": "Mindestens"
     },
     "widget": {
@@ -233,9 +238,10 @@
     "upload": {
         "loginRequired": "Login erforderlich",
         "loginRequiredDescription": "Bitte melden Sie sich an, um Bilder hochzuladen",
-        "uploadFiles": "Dateien hochladen",
-        "uploadImage": "Bild hochladen",
-        "uploadDocument": "Dokument hochladen",
+        "uploadFiles": "Dateien hochladen ({{shortcut}}+O zum Öffnen des Datei-Selektors)",
+        "uploadFilesWithShortcut": "{{shortcut}}+O zum Öffnen des Datei-Selektors",
+        "uploadImages": "Bilder hochladen",
+        "uploadDocuments": "Dokumente hochladen",
         "replace": "Ersetzen",
         "remaining": "verbleibend",
         "maxReached": "Maximal erreicht",
@@ -244,7 +250,8 @@
         "uploadFailed": "Hochladen fehlgeschlagen",
         "uploadSuccess": "Hochladen erfolgreich",
         "uploadSuccessDescription": "Die Datei wurde erfolgreich hochgeladen",
-        "maxImagesReached": "Sie können bis zu {{max}} Bilder hochladen"
+        "maxImagesReached": "Sie können bis zu {{max}} Bilder hochladen",
+        "dragAndDropFiles": "Ziehen Sie Dateien hierher, um sie zur Chat hinzuzufügen"
     },
     "media": {
         "title": "Titel",
@@ -342,7 +349,8 @@
         "termsOfService": "Nutzungsbedingungen",
         "pAndCUAccepted": "Ich akzeptiere die Nutzungsbedingungen von Deep Thought",
         "editAccount": "Konto bearbeiten",
-        "save": "Speichern"
+        "save": "Speichern",
+        "successfullyLoggedIn": "{{username}} hat sich erfolgreich angemeldet"
     },
     "chatLogs": {
         "anyMessage": "Jede Nachricht",

package/esm/locales/en.json

@@ -22,11 +22,17 @@
     "all": "All",
     "today": "Today",
     "yesterday": "Yesterday",
+    "placeholder": "Ask a question",
     "last_7_days": "Last 7 days",
     "last_30_days": "Last 30 days",
     "month": "Month",
+    "copied": "Copied!",
     "year": "Year",
+    "dayPlaceholder": "DD",
+    "monthPlaceholder": "MM",
+    "yearPlaceholder": "YYYY",
     "createdAt": "Creation date",
+    "date": "Birth date",
     "selected": "Selected",
     "page": "page",
     "actions": "Actions",
@@ -105,6 +111,8 @@
         "tokens": "Tokens",
         "addToken": "Add token",
         "usePassword": "Use password",
+        "passwordRequired": "Password required",
+        "invalidCredentials": "Invalid credentials",
         "atLeast": "At least"
     },
     "widget": {
@@ -243,14 +251,15 @@
     "upload": {
         "loginRequired": "Login required",
         "loginRequiredDescription": "Please login to upload images",
-        "uploadFiles": "Upload files",
-        "uploadImage": "Upload image",
+        "uploadFiles": "Upload files ({{shortcut}}+O to open file chooser)",
+        "uploadFilesWithShortcut": "{{shortcut}}+O to open file chooser",
+        "uploadImages": "Upload images",
         "replace": "Replace",
         "maxImagesReached": "You can upload up to {{max}} images",
         "maxDocumentsReached": "You can upload up to {{max}} documents",
         "remaining": "remaining",
         "lastDocumentSlot": "Upload last document",
-        "uploadDocument": "Upload document",
+        "uploadDocuments": "Upload documents",
         "maxReached": "Max limit reached",
         "imageTitle": "Image title: {{title}}",
         "titleHelp": "Adding a descriptive title helps the AI provide more context and appropriate responses.",
@@ -259,12 +268,13 @@
         "fileReadingFailed": "File reading failed",
         "uploadFailed": "Upload failed",
         "uploadSuccess": "Upload success",
-        "titleImage": "Image: {{title}}",
+        "titleImage": "Image title: {{title}}",
         "uploadSuccessDescription": "The file has been uploaded successfully",
         "titleImageUpload": "Upload images",
         "partialUpload": "Only {{uploaded}} images on {{total}} will be uploaded. Maximum {{max}} images allowed.",
         "maxImages": "Maximum {{max}} images allowed.",
-        "upload": "Upload"
+        "upload": "Upload",
+        "dragAndDropFiles": "Drag and drop files here to add them to the chat"
     },
     "media": {
         "title": "Title",
@@ -406,7 +416,8 @@
         "termsStatus": "Terms Status",
         "enabled": "Enabled",
         "disabled": "Disabled",
-        "advancedFeatures": "Advanced Features"
+        "advancedFeatures": "Advanced Features",
+        "successfullyLoggedIn": "{{username}} has successfully logged in"
     },
     "chatLogs": {
         "anyMessage": "Any message",

package/esm/locales/es.json

@@ -24,7 +24,10 @@
     "yesterday": "Ayer",
     "last_7_days": "Últimos 7 días",
     "last_30_days": "Últimos 30 días",
+    "placeholder": "Haz una pregunta",
+    "date": "Fecha de nacimiento",
     "month": "Mes",
+    "copied": "¡Copiado!",
     "missingData": "Información faltante",
     "year": "Año",
     "createdAt": "Fecha de creación",
@@ -106,6 +109,8 @@
         "tokens": "Fichas",
         "addToken": "Agregar token",
         "usePassword": "Usar contraseña",
+        "passwordRequired": "Contraseña obligatoria",
+        "invalidCredentials": "Credenciales no válidas",
         "atLeast": "Al menos"
     },
     "widget": {
@@ -233,9 +238,10 @@
     "upload": {
         "loginRequired": "Connexion requise",
         "loginRequiredDescription": "Veuillez vous connecter pour télécharger des images",
-        "uploadFiles": "Télécharger des fichiers",
-        "uploadImage": "Télécharger une image",
-        "uploadDocument": "Télécharger un document",
+        "uploadFiles": "Télécharger des fichiers ({{shortcut}}+O para abrir el selector de archivos)",
+        "uploadFilesWithShortcut": "{{shortcut}}+O para abrir el selector de archivos",
+        "uploadImages": "Télécharger des images",
+        "uploadDocuments": "Télécharger des documents",
         "apiClientNotConfigured": "API client non configuré correctement pour le téléchargement de médias",
         "fileReadingFailed": "Échec de la lecture du fichier",
         "uploadFailed": "Échec du téléchargement",
@@ -244,7 +250,8 @@
         "replace": "Remplacer",
         "maxImagesReached": "Vous pouvez télécharger jusqu'à {{max}} images",
         "remaining": "restant",
-        "maxReached": "Limite atteinte"
+        "maxReached": "Limite atteinte",
+        "dragAndDropFiles": "Arrastre y suelte los archivos aquí para agregarlos a la chat"
     },
     "media": {
         "title": "Título",
@@ -369,7 +376,8 @@
         "termsOfService": "Términos de servicio",
         "pAndCUAccepted": "Acepto los términos de servicio sobre Deep Thought",
         "editAccount": "Editar cuenta",
-        "save": "Ahorrar"
+        "save": "Ahorrar",
+        "successfullyLoggedIn": "{{username}} ha iniciado sesión correctamente"
     },
     "chatLogs": {
         "anyMessage": "Cualquier mensaje",

package/esm/locales/fr.json

@@ -21,11 +21,14 @@
     "day": "Jour",
     "month": "Mois",
     "year": "Année",
+    "placeholder": "Faites une question",
     "createdAt": "Date de création",
     "all": "Tous",
     "today": "Aujourd'hui",
+    "date": "Date de naissance",
     "yesterday": "Hier",
     "last_7_days": "7 derniers jours",
+    "copied": "Copié !",
     "missingData": "Informations manquantes",
     "last_30_days": "30 derniers jours",
     "selected": "Choisi",
@@ -104,6 +107,7 @@
         "useRecoveryTokens": "Utiliser des jetons de récupération",
         "tokens": "Jetons",
         "addToken": "Ajouter un jeton",
+        "invalidCredentials": "Identifiants invalides",
         "usePassword": "Utiliser le mot de passe",
         "atLeast": "Au moins"
     },
@@ -242,9 +246,10 @@
     "upload": {
         "loginRequired": "Connexion requise",
         "loginRequiredDescription": "Veuillez vous connecter pour télécharger des images",
-        "uploadFiles": "Télécharger des fichiers",
-        "uploadImage": "Télécharger une image",
-        "uploadDocument": "Télécharger un document",
+        "uploadFiles": "Télécharger des fichiers ({{shortcut}}+O pour ouvrir le sélecteur de fichiers)",
+        "uploadFilesWithShortcut": "{{shortcut}}+O pour ouvrir le sélecteur de fichiers",
+        "uploadImages": "Télécharger des images",
+        "uploadDocuments": "Télécharger des documents",
         "replace": "Remplacer",
         "remaining": "restant",
         "maxReached": "Limite atteinte",
@@ -253,7 +258,8 @@
         "fileReadingFailed": "Échec de la lecture du fichier",
         "uploadFailed": "Échec du téléchargement",
         "uploadSuccess": "Téléchargement réussi",
-        "uploadSuccessDescription": "Le fichier a été téléchargé avec succès"
+        "uploadSuccessDescription": "Le fichier a été téléchargé avec succès",
+        "dragAndDropFiles": "Glissez et déposez les fichiers ici pour les ajouter à la chat"
     },
     "media": {
         "title": "Titre",
@@ -378,7 +384,8 @@
         "termsOfService": "Conditions d'utilisation",
         "pAndCUAccepted": "J'accepte les conditions d'utilisation de Deep Thought",
         "editAccount": "Modifier le compte",
-        "save": "Sauvegarder"
+        "save": "Sauvegarder",
+        "successfullyLoggedIn": "{{username}} s'est connecté avec succès"
     },
     "chatLogs": {
         "anyMessage": "Tout message",

package/esm/locales/it.json

@@ -21,17 +21,23 @@
     "day": "Giorno",
     "month": "Mese",
     "year": "Anno",
+    "dayPlaceholder": "GG",
+    "monthPlaceholder": "MM",
+    "yearPlaceholder": "AAAA",
     "createdAt": "Data creazione",
     "selected": "Selezionati",
     "page": "pagina",
     "actions": "Azioni",
     "next": "Successivo",
     "all": "Tutti",
+    "copied": "Copiato!",
     "today": "Oggi",
     "yesterday": "Ieri",
+    "date": "Data di nascita",
     "last_7_days": "Ultimi 7 giorni",
     "last_30_days": "Ultimi 30 giorni",
     "previous": "Precedente",
+    "placeholder": "Fai una domanda",
     "copy": "Copia",
     "copyRawCode": "Copia codice sorgente",
     "copyToClipboard": "Copia negli appunti",
@@ -106,6 +112,7 @@
         "tokens": "Token",
         "addToken": "Aggiungi token",
         "usePassword": "Utilizza la password",
+        "invalidCredentials": "Credenziali non valide",
         "atLeast": "Almeno"
     },
     "widget": {
@@ -267,10 +274,11 @@
     "upload": {
         "loginRequired": "Login richiesto",
         "loginRequiredDescription": "Per caricare immagini, devi prima accedere",
-        "uploadFiles": "Carica file",
-        "uploadImage": "Carica immagine",
+        "uploadFiles": "Carica file ({{shortcut}}+O per aprire il selettore file)",
+        "uploadFilesWithShortcut": "{{shortcut}}+O per aprire il selettore file",
+        "uploadImages": "Carica immagini",
         "lastDocumentSlot": "Carica ultimo documento",
-        "uploadDocument": "Carica documento",
+        "uploadDocuments": "Carica documenti",
         "maxDocumentsReached": "Puoi caricare fino a {{max}} documenti",
         "replace": "Sostituisci documento",
         "maxImagesReached": "Puoi caricare fino a {{max}} immagini",
@@ -280,13 +288,14 @@
         "uploadSuccess": "Caricamento riuscito",
         "remaining": "rimanenti",
         "maxReached": "Limite raggiunto",
-        "titleImage": "Immagine: {{title}}",
+        "titleImage": "Titolo immagine: {{title}}",
         "titleImageUpload": "Carica immagini",
         "titleHelp": "Aggiungi un titolo descrittivo per aiutare l'AI a fornire risposte più appropriate.",
         "titlePlaceholder": "Inserisci il titolo dell'immagine",
         "uploadSuccessDescription": "Il file è stato caricato con successo",
         "partialUpload": "Solo {{uploaded}} immagini su {{total}} immagini saranno caricate. Massimo {{max}} immagini consentite.",
-        "cancel": "Annulla"
+        "cancel": "Annulla",
+        "dragAndDropFiles": "Trascina qui i file per aggiungerli alla chat"
     },
     "gamification": {
         "level": "Livello",
@@ -405,7 +414,8 @@
         "termsOfService": "i termini del servizio",
         "pAndCUAccepted": "Accetto le condizioni di utilizzo relative a Pensiero Profondo",
         "editAccount": "Modifica account",
-        "save": "Salva"
+        "save": "Salva",
+        "successfullyLoggedIn": "{{username}} ha effettuato l'accesso con successo"
     },
     "chatLogs": {
         "atLeast": "Almeno {{count}} messaggi",

package/esm/styles.css

@@ -43,7 +43,6 @@
 @import url('./components/ShareButton/ShareButton.css');
 @import url('./components/Snippet/Snippet.css');
 @import url('./components/StartPanel/StartPanel.css');
-@import url('./components/UploadMenu/UploadMenu.css');
 @import url('./components/DateSelector/DateSelector.css');
 @import url('./components/AgeVerificationModal/AgeVerificationModal.css');
 @import url('./components/KnownFacts/KnownFacts.css');
@@ -89,14 +88,15 @@ body.sb-show-main #root,
 #storybook-docs,
 .memori-widget {
     --memori-font-family: 'Lexend Deca Variable', 'Lexend Deca', sans-serif;
-    --memori-primary: rgb(130, 70, 175);
+    --memori-primary-rgb: 130, 70, 175;
+    --memori-primary: rgb(var(--memori-primary-rgb));
     --memori-primary-text: #fff;
     --memori-inner-content-pad: 1rem;
     --memori-inner-bg: transparent;
     --memori-chat-bubble-bg: #fff;
     --memori-chat-user-bubble-bg: var(--memori-primary);
     --memori-text-color: #000;
-    --memori-border-radius: 5px;
+    --memori-border-radius: 8px;
     --memori-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.02);
     --memori-button-bg: #fff;
     --memori-button-text: #000;
@@ -123,4 +123,4 @@ body.sb-show-main #root,
     .mobile-hidden {
         display: none;
     }
-}
+}

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "8.11.0",
+  "version": "8.13.0",
   "name": "@memori.ai/memori-react",
   "author": "Memori Srl",
   "main": "dist/index.js",
@@ -292,7 +292,7 @@
   },
   "dependencies": {
     "@headlessui/react": "1.7.4",
-    "@memori.ai/memori-api-client": "6.13.3",
+    "@memori.ai/memori-api-client": "6.17.0",
     "@react-three/drei": "8.20.2",
     "@react-three/fiber": "7.0.25",
     "classnames": "2.5.1",

package/src/components/AgeVerificationModal/AgeVerificationModal.css

@@ -13,12 +13,12 @@
     flex-direction: column;
     align-items: center;
 }
-
+/* 
 @media (min-width: 640px) {
     .age-verification-form {
         min-width: 600px;
     }
-}
+} */
 
 .age-verification-form fieldset {
     padding-right: 0;
@@ -53,15 +53,42 @@
     color: var(--memori-error-color);
 }
 
-button.age-verisfication-submit {
-    display: inline-flex;
-    height: auto;
-    align-items: center;
-    justify-content: center;
-    padding: 4px 15px;
-    margin-right: auto;
-    margin-left: auto;
-    font-weight: 700;
-    text-transform: uppercase;
-    white-space: normal;
-}
+button.age-verification-submit {
+   position: relative;
+    overflow: hidden;
+    width: 100%;
+    min-width: 220px;
+    max-width: 220px;
+    min-height: 42px;
+    padding: 1rem 2rem;
+    border: none;
+    border-radius: 12px;
+    border-radius: 8px;
+    margin-top: 1rem;
+    background: var(--memori-primary);
+    color: white;
+    cursor: pointer;
+    font-size: 1rem;
+    font-weight: 600;
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+button.age-verification-submit::before {
+    position: absolute;
+    top: 0;
+    left: -100%;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
+    content: '';
+    transition: left 0.5s ease;
+}
+
+button.age-verification-submit:hover::before {
+    left: 100%;
+}
+
+
+button.age-verification-submit:active {
+    transform: translateY(0);
+}

package/src/components/AgeVerificationModal/AgeVerificationModal.tsx

@@ -46,6 +46,8 @@ const AgeVerificationModal = ({ visible = false, onClose, minAge }: Props) => {
   return (
     <Modal
       open={visible}
+      width="600px"
+      widthMd="600px"
       title={t('ageVerification')}
       className="age-verification-modal"
       closable
@@ -65,7 +67,7 @@ const AgeVerificationModal = ({ visible = false, onClose, minAge }: Props) => {
             <legend className="sr-only">{t('birthDate')}</legend>
 
             <DateSelector
-              defaultDate={new Date(Date.now())}
+              //defaultDate={new Date(Date.now())}
               onChange={date => {
                 setBirthDate(date);
               }}

package/src/components/Auth/Auth.tsx

@@ -43,25 +43,53 @@ export const AuthWidget = ({
   const [numTokens, setNumTokens] = useState(1);
 
   const [showModal, setShowModal] = useState(!!pwdOrTokens);
+  const [isSubmitting, setIsSubmitting] = useState(false);
 
   const onSubmit: SubmitHandler<AuthInputs> = data => {
-    if (
-      (pwdOrTokens === 'password' && !data.password?.length) ||
-      (pwdOrTokens === 'tokens' &&
-        ((data?.tokens?.length || 0) < minimumNumberOfRecoveryTokens ||
-          !data?.tokens?.every(t => t.length)))
-    ) {
+    const missingPassword = pwdOrTokens === 'password' && !data.password?.length;
+    const invalidTokens =
+      pwdOrTokens === 'tokens' &&
+      ((data?.tokens?.length || 0) < minimumNumberOfRecoveryTokens ||
+        !data?.tokens?.every(t => t.length));
+
+    if (missingPassword) {
+      setError('password', {
+        type: 'required',
+        message: t('auth.passwordRequired') || 'Password required',
+      });
+      return;
+    }
+
+    if (invalidTokens) {
       setError('tokens', {
         type: 'minLength',
-        message: 'Tokens',
+        message: t('auth.tokens') || 'Tokens',
       });
       return;
     }
 
     if (onFinish) {
-      onFinish(data).then(() => {
-        setShowModal(false);
-      });
+      setIsSubmitting(true);
+      onFinish(data)
+        .then(() => {
+          setShowModal(false);
+        })
+        .catch(() => {
+          if (pwdOrTokens === 'password') {
+            setError('password', {
+              type: 'auth',
+              message: t('auth.invalidCredentials') || 'Invalid credentials',
+            });
+          } else if (pwdOrTokens === 'tokens') {
+            setError('tokens', {
+              type: 'auth',
+              message: t('auth.invalidCredentials') || 'Invalid credentials',
+            });
+          }
+        })
+        .finally(() => {
+          setIsSubmitting(false);
+        });
     }
   };
 
@@ -134,7 +162,23 @@ export const AuthWidget = ({
         </div>
       )}
 
-      <Button htmlType="submit" primary className="memori-auth-widget--submit">
+      {errors.password?.type === 'auth' && (
+        <div className="memori-auth-widget--error">
+          {errors.password.message}
+        </div>
+      )}
+      {errors.tokens?.type === 'auth' && (
+        <div className="memori-auth-widget--error">
+          {errors.tokens.message}
+        </div>
+      )}
+
+      <Button
+        htmlType="submit"
+        primary
+        className="memori-auth-widget--submit"
+        loading={isSubmitting}
+      >
         {t('confirm') || 'Submit'}
       </Button>
     </form>

package/src/components/Avatar/Avatar.stories.tsx

@@ -5,6 +5,7 @@ import I18nWrapper from '../../I18nWrapper';
 import Avatar, { Props } from './Avatar';
 
 import './Avatar.css';
+import { ArtifactProvider } from '../MemoriArtifactSystem/context/ArtifactContext';
 
 const meta: Meta = {
   title: 'Widget/Avatar',
@@ -32,6 +33,7 @@ const Template: Story<Props> = args => {
 
   return (
     <I18nWrapper>
+      <ArtifactProvider>
       <div
         style={
           args.integrationConfig?.avatar === 'customglb' ||
@@ -58,6 +60,7 @@ const Template: Story<Props> = args => {
           key={Date.now()}
         />
       </div>
+      </ArtifactProvider>
     </I18nWrapper>
   );
 };

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

@@ -7,8 +7,8 @@
   display: flex;
   width: 380px; /* Fixed width */
   max-width: 100%; /* Maximum width relative to screen */
-  height: 320px;
-  max-height: 320px;
+  height: 340px;
+  max-height: 340px;
   flex-direction: column;
   padding: 16px;
   border-radius: 16px;

package/src/components/Chat/Chat.css

@@ -52,7 +52,7 @@
     flex: 1;
     flex-direction: column;
     padding: 2rem 10px;
-    mask-image: linear-gradient(transparent, black 5%, black 95%, transparent 100%);
+    /* mask-image: linear-gradient(transparent, black 5%, black 95%, transparent 100%); */
     overflow-y: auto;
     scroll-behavior: smooth;
 }
@@ -76,8 +76,8 @@
     margin-bottom: 10px;
     background-position: center;
     background-size: cover;
-    border-top-left-radius: 3px;
-    border-top-right-radius: 3px;
+    border-top-left-radius: 12px;
+    border-top-right-radius: 12px;
 }
 
 .memori-chat--cover+.memori-chat--bubble-initial {
@@ -146,4 +146,38 @@
 
 .memori-chat--known-tag {
     margin-right: 0.5rem;
+}
+
+/* Drag and drop overlay */
+.memori-chat--drag-overlay {
+    position: absolute;
+    z-index: 1000;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    border-radius: 10px;
+    backdrop-filter: blur(4px);
+    background-color: rgba(0, 0, 0, 0.7);
+    pointer-events: none;
+}
+
+.memori-chat--drag-overlay-icon {
+    width: 64px;
+    height: 64px;
+    margin-bottom: 1rem;
+    color: #fff;
+    opacity: 0.9;
+}
+
+.memori-chat--drag-overlay-text {
+    padding: 0 2rem;
+    color: #ffffff;
+    font-size: 1.2rem;
+    font-weight: 500;
+    text-align: center;
 }

package/src/components/Chat/Chat.stories.tsx

@@ -980,6 +980,20 @@ def process_data(df):
   setSendOnEnter: () => {},
 };
 
+export const WithTyping = Template.bind({});
+WithTyping.args = {
+  memori,
+  tenant,
+  sessionID,
+  history,
+  dialogState: {
+    state: 'X2a',
+  },
+  layout: 'DEFAULT',
+  memoriTyping: true,
+  typingText: 'Sto pensando...',
+};
+
 export const WithAllMediaTypes = Template.bind({});
 WithAllMediaTypes.args = {
   memori,
@@ -1325,8 +1339,8 @@ build-storybook = "build-storybook"`,
   setSendOnEnter: () => {},
 };
 
-export const withBase64Image = Template.bind({});
-withBase64Image.args = {
+export const WithBase64Image = Template.bind({});
+WithBase64Image.args = {
   memori,
   tenant,
   sessionID,