@memori.ai/memori-react 8.10.1 → 8.12.0

package/esm/components/ui/Tooltip.css

@@ -2,12 +2,13 @@
 
 .memori-tooltip {
     position: relative;
+    z-index: 1000;
     display: inline-block;
 }
 
 .memori-tooltip--content {
     position: absolute;
-    z-index: 100;
+    z-index: 1000;
     top: 50%;
     left: 100%;
     display: none;
@@ -47,6 +48,7 @@
     transition: 0.3s;
 }
 
+
 .memori-tooltip.memori-tooltip--align-left .memori-tooltip--content::before {
     right: -15px;
     left: auto;
@@ -113,3 +115,49 @@
 .memori-tooltip.memori-tooltip--disabled {
     cursor: not-allowed;
 }
+
+.memori-tooltip.memori-tooltip--align-bottomLeft .memori-tooltip--content,
+.memori-tooltip.memori-tooltip--align-bottomRight .memori-tooltip--content {
+    top: 100%;
+    right: initial;
+    left: 50%;
+    margin: initial;
+    margin-top: 15px;
+}
+
+.memori-tooltip.memori-tooltip--align-bottomLeft .memori-tooltip--content::before {
+    z-index: 1001;
+    top: -15px;
+    bottom: initial;
+    left: 66%;
+    border-color: transparent transparent rgba(0, 0, 0, 0.8) transparent;
+    margin-top: 0px;
+    margin-bottom: initial;
+    margin-left: 5px;
+}
+
+.memori-tooltip.memori-tooltip--align-bottomRight .memori-tooltip--content::before {
+    z-index: 1001;
+    top: -15px;
+    right: 10px;
+    bottom: initial;
+    left: auto;
+    border-color: transparent transparent rgba(0, 0, 0, 0.8) transparent;
+    margin-top: -5px;
+    margin-right: 5px;
+    margin-bottom: initial;
+}
+
+.memori-tooltip.memori-tooltip--align-bottomLeft:not(.memori-tooltip--disabled).memori-tooltip--visible
+    .memori-tooltip--content,
+.memori-tooltip.memori-tooltip--align-bottomLeft:not(.memori-tooltip--disabled):not(.memori-tooltip--visible):hover
+    .memori-tooltip--content {
+    transform: translateX(-73%);
+}
+
+.memori-tooltip.memori-tooltip--align-bottomRight:not(.memori-tooltip--disabled).memori-tooltip--visible
+    .memori-tooltip--content,
+.memori-tooltip.memori-tooltip--align-bottomRight:not(.memori-tooltip--disabled):not(.memori-tooltip--visible):hover
+    .memori-tooltip--content {
+    transform: translateX(33%);
+}

package/esm/components/ui/Tooltip.d.ts

@@ -2,7 +2,7 @@ import React, { FC } from 'react';
 export interface Props {
     content: string | JSX.Element | React.ReactNode;
     className?: string;
-    align?: 'left' | 'right' | 'topLeft' | 'topRight';
+    align?: 'left' | 'right' | 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight';
     disabled?: boolean;
     children: React.ReactNode;
     visible?: boolean;

package/esm/locales/de.json

@@ -24,7 +24,9 @@
     "last_7_days": "Letzte 7 Tage",
     "last_30_days": "Letzte 30 Tage",
     "missingData": "Fehlende Informationen",
+    "date": "Geburtsdatum",
     "day": "Tag",
+    "copied": "Kopiert!",
     "month": "Monat",
     "year": "Jahr",
     "createdAt": "Erstellungsdatum",
@@ -106,6 +108,8 @@
         "tokens": "Token",
         "addToken": "Token hinzufügen",
         "usePassword": "Passwort verwenden",
+        "passwordRequired": "Passwort erforderlich",
+        "invalidCredentials": "Ungültige Zugangsdaten",
         "atLeast": "Mindestens"
     },
     "widget": {
@@ -342,7 +346,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

@@ -25,8 +25,13 @@
     "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 +110,8 @@
         "tokens": "Tokens",
         "addToken": "Add token",
         "usePassword": "Use password",
+        "passwordRequired": "Password required",
+        "invalidCredentials": "Invalid credentials",
         "atLeast": "At least"
     },
     "widget": {
@@ -406,7 +413,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,9 @@
     "yesterday": "Ayer",
     "last_7_days": "Últimos 7 días",
     "last_30_days": "Últimos 30 días",
+    "date": "Fecha de nacimiento",
     "month": "Mes",
+    "copied": "¡Copiado!",
     "missingData": "Información faltante",
     "year": "Año",
     "createdAt": "Fecha de creación",
@@ -106,6 +108,8 @@
         "tokens": "Fichas",
         "addToken": "Agregar token",
         "usePassword": "Usar contraseña",
+        "passwordRequired": "Contraseña obligatoria",
+        "invalidCredentials": "Credenciales no válidas",
         "atLeast": "Al menos"
     },
     "widget": {
@@ -369,7 +373,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

@@ -24,8 +24,10 @@
     "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 +106,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"
     },
@@ -378,7 +381,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,14 +21,19 @@
     "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",
@@ -106,6 +111,7 @@
         "tokens": "Token",
         "addToken": "Aggiungi token",
         "usePassword": "Utilizza la password",
+        "invalidCredentials": "Credenziali non valide",
         "atLeast": "Almeno"
     },
     "widget": {
@@ -405,7 +411,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

@@ -89,7 +89,8 @@ 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;
@@ -123,4 +124,4 @@ body.sb-show-main #root,
     .mobile-hidden {
         display: none;
     }
-}
+}

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "8.10.1",
+  "version": "8.12.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.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,

package/src/components/Chat/Chat.tsx

@@ -317,7 +317,7 @@ const Chat: React.FC<Props> = ({
                   // Filter out HTML and plain text media items from the message
                   ...(message?.media?.filter(
                     m =>
-                      m.mimeType !== 'text/html' && m.mimeType !== 'text/plain'
+                      m.mimeType !== 'text/html' && !m.properties?.functionSignature
                   ) || []),
 
                   // Extract document attachments that are embedded in the message text
@@ -431,6 +431,7 @@ const Chat: React.FC<Props> = ({
           instruct={instruct}
           authToken={authToken}
           sendMessage={sendMessage}
+          isTyping={memoriTyping}
           microphoneMode={microphoneMode}
           sendOnEnter={sendOnEnter}
           setSendOnEnter={setSendOnEnter}