@memori.ai/memori-react 4.4.0 → 4.4.1

package/src/components/ChatBubble/ChatBubble.css

@@ -61,11 +61,13 @@
 
 .memori-chat--bubble-typing {
     display: flex;
+    align-items: center;
 }
 
 .memori-chat--bubble p {
     margin-top: 0;
     margin-bottom: 0;
+    font-size: 0.75em;
 }
 
 .memori-chat--bubble ul,
@@ -87,8 +89,8 @@
 
 @media (max-width: 600px) {
     .memori-chat--bubble p {
-        font-size: 14px;
-        line-height: 1.4;
+        font-size: 11px;
+        line-height: 1.2;
     }
 }
 

package/src/components/MemoriWidget/MemoriWidget.tsx

@@ -1354,88 +1354,83 @@ const MemoriWidget = ({
         i18n.language ??
         'IT'
       ).toUpperCase();
+
+      let voiceType = memori.voiceType;
+      if (memori.enableBoardOfExperts && currentDialogState?.emitter) {
+        let expert = experts?.find(e => e.name === currentDialogState?.emitter);
+
+        // TODO: once got info from backend, select voice from expert
+        // if (expert?.voiceType) {
+        //   voiceType = expert.voiceType;
+        // }
+      }
+
       switch (voiceLang) {
         case 'IT':
           voice = `${
-            memori.voiceType === 'MALE'
-              ? 'it-IT-DiegoNeural'
-              : 'it-IT-ElsaNeural'
+            voiceType === 'MALE' ? 'it-IT-DiegoNeural' : 'it-IT-ElsaNeural'
           }`;
           break;
         case 'DE':
           voice = `${
-            memori.voiceType === 'MALE'
-              ? 'de-DE-ConradNeural'
-              : 'de-DE-KatjaNeural'
+            voiceType === 'MALE' ? 'de-DE-ConradNeural' : 'de-DE-KatjaNeural'
           }`;
           break;
         case 'EN':
           voice = `${
-            memori.voiceType === 'MALE'
-              ? 'en-GB-RyanNeural'
-              : 'en-GB-SoniaNeural'
+            voiceType === 'MALE' ? 'en-GB-RyanNeural' : 'en-GB-SoniaNeural'
           }`;
           break;
         case 'ES':
           voice = `${
-            memori.voiceType === 'MALE'
-              ? 'es-ES-AlvaroNeural'
-              : 'es-ES-ElviraNeural'
+            voiceType === 'MALE' ? 'es-ES-AlvaroNeural' : 'es-ES-ElviraNeural'
           }`;
           break;
         case 'FR':
           voice = `${
-            memori.voiceType === 'MALE'
-              ? 'fr-FR-HenriNeural'
-              : 'fr-FR-DeniseNeural'
+            voiceType === 'MALE' ? 'fr-FR-HenriNeural' : 'fr-FR-DeniseNeural'
           }`;
           break;
         case 'PT':
           voice = `${
-            memori.voiceType === 'MALE'
-              ? 'pt-PT-DuarteNeural'
-              : 'pt-PT-RaquelNeural'
+            voiceType === 'MALE' ? 'pt-PT-DuarteNeural' : 'pt-PT-RaquelNeural'
           }`;
           break;
         case 'UK':
           voice = `${
-            memori.voiceType === 'MALE'
-              ? 'uk-UA-OstapNeural'
-              : 'uk-UA-PolinaNeural'
+            voiceType === 'MALE' ? 'uk-UA-OstapNeural' : 'uk-UA-PolinaNeural'
           }`;
           break;
         case 'RU':
           voice = `${
-            memori.voiceType === 'MALE'
-              ? 'ru-RU-DmitryNeural'
-              : 'ru-RU-SvetlanaNeural'
+            voiceType === 'MALE' ? 'ru-RU-DmitryNeural' : 'ru-RU-SvetlanaNeural'
           }`;
           break;
         case 'PL':
           voice = `${
-            memori.voiceType === 'MALE'
-              ? 'pl-PL-MarekNeural'
-              : 'pl-PL-AgnieszkaNeural'
+            voiceType === 'MALE' ? 'pl-PL-MarekNeural' : 'pl-PL-AgnieszkaNeural'
           }`;
           break;
         case 'FI':
           voice = `${
-            memori.voiceType === 'MALE'
-              ? 'fi-FI-HarriNeural'
-              : 'fi-FI-SelmaNeural'
+            voiceType === 'MALE' ? 'fi-FI-HarriNeural' : 'fi-FI-SelmaNeural'
           }`;
           break;
         default:
           voice = `${
-            memori.voiceType === 'MALE'
-              ? 'it-IT-DiegoNeural'
-              : 'it-IT-IsabellaNeural'
+            voiceType === 'MALE' ? 'it-IT-DiegoNeural' : 'it-IT-IsabellaNeural'
           }`;
           break;
       }
       return voice;
     },
-    [memori.voiceType, i18n.language, memori.culture]
+    [
+      memori.voiceType,
+      memori.enableBoardOfExperts,
+      currentDialogState?.emitter,
+      i18n.language,
+      memori.culture,
+    ]
   );
 
   const getCultureCodeByLanguage = (lang?: string): string => {

package/src/components/StartPanel/StartPanel.css

@@ -199,6 +199,7 @@
 .memori--deep-thought-disclaimer h2 {
     margin-top: 0;
     margin-bottom: 0.5em;
+    color: var(--memori-text-color, rgba(0, 0, 0, 0.85));
 }
 
 .memori--deep-thought-disclaimer .memori-tooltip {

package/src/components/Typing/Typing.stories.tsx

@@ -86,3 +86,45 @@ WithCustomLoadingTextList.args = {
     ],
   },
 };
+
+export const WithCustomLoadingTextListAndInitialDelay = Template.bind({});
+WithCustomLoadingTextListAndInitialDelay.args = {
+  sentences: {
+    en: [
+      {
+        text: '',
+        delayAfter: 10,
+      },
+      {
+        text: 'I am asking the unicorns what they think about it',
+        delayAfter: 5,
+      },
+      {
+        text: 'I am trying to understand what my cat is saying about it',
+        delayAfter: 10,
+      },
+      {
+        text: 'I am collecting the opinions of the people I know',
+        delayAfter: 2,
+      },
+    ],
+    it: [
+      {
+        text: '',
+        delayAfter: 10,
+      },
+      {
+        text: 'Chiedo agli unicorni cosa ne pensano',
+        delayAfter: 5,
+      },
+      {
+        text: 'Sto cercando di capire cosa ne pensa il mio gatto',
+        delayAfter: 10,
+      },
+      {
+        text: 'Sto raccogliendo le opinioni delle persone che conosco',
+        delayAfter: 2,
+      },
+    ],
+  },
+};

package/src/components/Typing/Typing.tsx

@@ -84,13 +84,16 @@ const Typing = ({
   const [text, setText] = useState(
     sentences?.[lang]?.length
       ? `${
-          sentences[lang][0].text.endsWith('...')
+          sentences[lang][0].text.endsWith('...') ||
+          !sentences[lang][0].text.length
             ? sentences[lang][0].text
             : `${sentences[lang][0].text}...`
         }${getSeparatorString(sentences[lang][0].delayAfter)}`
       : sentence
       ? `${
-          sentence.endsWith('...') ? sentence : `${sentence}...`
+          sentence.endsWith('...') || !sentence.length
+            ? sentence
+            : `${sentence}...`
         }${getSeparatorString()}`
       : ''
   );
@@ -109,7 +112,7 @@ const Typing = ({
         const sentence = sentences[lang][nextIndex];
         setText(
           `${
-            sentence.text.endsWith('...')
+            sentence.text.endsWith('...') || !sentence.text.length
               ? sentence.text
               : `${sentence.text}...`
           }${getSeparatorString(sentence.delayAfter)}`

package/src/helpers/constants.ts

@@ -125,6 +125,10 @@ export const boardOfExpertsLoadingSentences: {
   }[];
 } = {
   it: [
+    {
+      text: '',
+      delayAfter: 10,
+    },
     {
       text: "Cerco l'esperto più adatto",
       delayAfter: 5,
@@ -147,6 +151,10 @@ export const boardOfExpertsLoadingSentences: {
     },
   ],
   en: [
+    {
+      text: '',
+      delayAfter: 10,
+    },
     {
       text: "I'm looking for the most suitable expert",
       delayAfter: 5,

package/src/index.tsx

@@ -42,7 +42,7 @@ export interface Props {
   pin?: string;
   context?: { [key: string]: string };
   initialQuestion?: string;
-  uiLang?: 'en' | 'it';
+  uiLang?: 'en' | 'it' | 'IT' | 'EN';
   spokenLang?: string;
   multilingual?: boolean;
   authToken?: string;
@@ -310,7 +310,7 @@ Memori.propTypes = {
   pin: PropTypes.string,
   context: PropTypes.objectOf(PropTypes.any),
   initialQuestion: PropTypes.string,
-  uiLang: PropTypes.oneOf(['en', 'it']),
+  uiLang: PropTypes.oneOf(['en', 'it', 'EN', 'IT']),
   spokenLang: PropTypes.string,
   multilingual: PropTypes.bool,
   authToken: PropTypes.string,