@memori.ai/memori-react 7.2.0 → 7.3.1

package/src/components/ChatBubble/ChatBubble.stories.tsx

@@ -104,6 +104,20 @@ GeneratedByAI.args = {
   },
 };
 
+export const WithTranslationAndOriginal = Template.bind({});
+WithTranslationAndOriginal.args = {
+  memori,
+  tenant,
+  message: {
+    fromUser: false,
+    text: 'Hello, this is a translated text so you can talk to me in different languages',
+    initial: false,
+    translatedText:
+      'Ciao, questo è un testo tradotto in modo che tu possa parlarmi in diverse lingue',
+  },
+  showTranslationOriginal: true,
+};
+
 export const WithLongLink = Template.bind({});
 WithLongLink.args = {
   memori,

package/src/components/ChatBubble/ChatBubble.test.tsx

@@ -92,6 +92,25 @@ it('renders ChatBubble with msg generated by AI unchanged', () => {
   expect(container).toMatchSnapshot();
 });
 
+it('renders ChatBubble with translation and original unchanged', () => {
+  const { container } = render(
+    <ChatBubble
+      memori={memori}
+      tenant={tenant}
+      sessionID={sessionID}
+      showTranslationOriginal={true}
+      message={{
+        fromUser: false,
+        text: 'Hello, this is a translated text so you can talk to me in different languages',
+        initial: false,
+        translatedText:
+          'Ciao, questo è un testo tradotto in modo che tu possa parlarmi in diverse lingue',
+      }}
+    />
+  );
+  expect(container).toMatchSnapshot();
+});
+
 it('renders ChatBubble with msg from BoE expert unchanged', () => {
   const { container } = render(
     <ChatBubble

package/src/components/ChatBubble/ChatBubble.tsx

@@ -12,6 +12,7 @@ import { Transition } from '@headlessui/react';
 import { getResourceUrl } from '../../helpers/media';
 import UserIcon from '../icons/User';
 import AI from '../icons/AI';
+import Translation from '../icons/Translation';
 import Tooltip from '../ui/Tooltip';
 import FeedbackButtons from '../FeedbackButtons/FeedbackButtons';
 import { useTranslation } from 'react-i18next';
@@ -39,6 +40,7 @@ export interface Props {
   showFeedback?: boolean;
   showWhyThisAnswer?: boolean;
   showCopyButton?: boolean;
+  showTranslationOriginal?: boolean;
   simulateUserPrompt?: (msg: string) => void;
   showAIicon?: boolean;
   isFirst?: boolean;
@@ -86,6 +88,7 @@ const ChatBubble: React.FC<Props> = ({
   showFeedback,
   showWhyThisAnswer = true,
   showCopyButton = true,
+  showTranslationOriginal = false,
   simulateUserPrompt,
   showAIicon = true,
   isFirst = false,
@@ -93,15 +96,18 @@ const ChatBubble: React.FC<Props> = ({
   userAvatar,
   experts,
 }) => {
-  const { t } = useTranslation();
+  const { t, i18n } = useTranslation();
+  const lang = i18n.language || 'en';
   const [showingWhyThisAnswer, setShowingWhyThisAnswer] = useState(false);
 
+  const text = message.translatedText || message.text;
+
   const renderedText = message.fromUser
-    ? message.translatedText || message.text
+    ? text
     : DOMPurify.sanitize(
         (
           marked.parse(
-            (message.translatedText || message.text)
+            text
               // remove leading and trailing whitespaces
               .trim()
               // remove markdown links
@@ -132,10 +138,8 @@ const ChatBubble: React.FC<Props> = ({
         .replace(/<p><br><\/p>/g, '<br>');
 
   const plainText = message.fromUser
-    ? message.translatedText || message.text
-    : escapeHTML(
-        stripMarkdown(stripEmojis(message.translatedText || message.text))
-      );
+    ? text
+    : escapeHTML(stripMarkdown(stripEmojis(text)));
 
   useLayoutEffect(() => {
     if (typeof window !== 'undefined' && !message.fromUser) {
@@ -313,6 +317,26 @@ const ChatBubble: React.FC<Props> = ({
                 </Tooltip>
               )}
 
+              {showTranslationOriginal &&
+                message.translatedText &&
+                message.translatedText !== message.text && (
+                  <Tooltip
+                    align="left"
+                    content={`${
+                      lang === 'it' ? 'Testo originale' : 'Original text'
+                    }: ${message.text}`}
+                    className="memori-chat--bubble-action-icon memori-chat--bubble-action-icon--ai"
+                  >
+                    <span>
+                      <Translation
+                        aria-label={
+                          lang === 'it' ? 'Testo originale' : 'Original text'
+                        }
+                      />
+                    </span>
+                  </Tooltip>
+                )}
+
               {!message.fromUser &&
                 message.questionAnswered &&
                 apiUrl &&

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

@@ -4328,6 +4328,138 @@ exports[`renders ChatBubble with msg generated by AI unchanged 1`] = `
 </div>
 `;
 
+exports[`renders ChatBubble with translation and original unchanged 1`] = `
+<div>
+  <div
+    class="memori-chat--bubble-container"
+  >
+    <picture
+      class="memori-chat--bubble-avatar transition ease-in-out duration-300 opacity-0 scale-075 translate-x--15"
+      title="Memori"
+    >
+      <img
+        alt="Memori"
+        class="memori-chat--bubble-avatar-img"
+        src="https://aisuru.com/images/aisuru/square_logo.png"
+      />
+    </picture>
+    <div
+      class="memori-chat--bubble memori-chat--with-addon transition ease-in-out duration-300 opacity-0 scale-09 translate-x--30"
+    >
+      <div
+        class="memori-chat--bubble-content"
+        dir="auto"
+      >
+        <p>
+          Ciao, questo è un testo tradotto in modo che tu possa parlarmi in diverse lingue
+        </p>
+      </div>
+      <div
+        class="memori-chat--bubble-addon"
+      >
+        <button
+          class="memori-button memori-button--ghost memori-button--circle memori-button--padded memori-button--icon-only memori-chat--bubble-action-icon"
+          title="copy"
+        >
+          <span
+            class="memori-button--icon"
+          >
+            <svg
+              aria-hidden="true"
+              fill="none"
+              focusable="false"
+              role="img"
+              stroke="currentColor"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="1.5"
+              viewBox="0 0 24 24"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <rect
+                height="14"
+                rx="2"
+                ry="2"
+                width="14"
+                x="8"
+                y="8"
+              />
+              <path
+                d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"
+              />
+            </svg>
+          </span>
+        </button>
+        <button
+          class="memori-button memori-button--ghost memori-button--circle memori-button--padded memori-button--icon-only memori-chat--bubble-action-icon"
+          title="copyRawCode"
+        >
+          <span
+            class="memori-button--icon"
+          >
+            <svg
+              aria-hidden="true"
+              fill="none"
+              focusable="false"
+              role="img"
+              stroke="currentColor"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="1.5"
+              viewBox="0 0 24 24"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M10 9.5 8 12l2 2.5"
+              />
+              <path
+                d="m14 9.5 2 2.5-2 2.5"
+              />
+              <rect
+                height="18"
+                rx="2"
+                width="18"
+                x="3"
+                y="3"
+              />
+            </svg>
+          </span>
+        </button>
+        <div
+          class="memori-tooltip memori-tooltip--align-left memori-chat--bubble-action-icon memori-chat--bubble-action-icon--ai"
+        >
+          <div
+            class="memori-tooltip--content"
+          >
+            Original text: Hello, this is a translated text so you can talk to me in different languages
+          </div>
+          <div
+            class="memori-tooltip--trigger"
+          >
+            <span>
+              <svg
+                aria-hidden="true"
+                focusable="false"
+                role="img"
+                viewBox="0 0 1024 1024"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M140 188h584v164h76V144c0-17.7-14.3-32-32-32H96c-17.7 0-32 14.3-32 32v736c0 17.7 14.3 32 32 32h544v-76H140V188z"
+                />
+                <path
+                  d="M414.3 256h-60.6c-3.4 0-6.4 2.2-7.6 5.4L219 629.4c-.3.8-.4 1.7-.4 2.6 0 4.4 3.6 8 8 8h55.1c3.4 0 6.4-2.2 7.6-5.4L322 540h196.2L422 261.4c-1.3-3.2-4.3-5.4-7.7-5.4zm12.4 228h-85.5L384 360.2 426.7 484zM936 528H800v-93c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v93H592c-13.3 0-24 10.7-24 24v176c0 13.3 10.7 24 24 24h136v152c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8V752h136c13.3 0 24-10.7 24-24V552c0-13.3-10.7-24-24-24zM728 680h-88v-80h88v80zm160 0h-88v-80h88v80z"
+                />
+              </svg>
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
 exports[`renders ChatBubble with user msg unchanged 1`] = `
 <div>
   <div

package/src/components/MemoriWidget/MemoriWidget.tsx

@@ -338,6 +338,7 @@ export interface Props {
   customLayout?: React.FC<LayoutProps>;
   showShare?: boolean;
   showCopyButton?: boolean;
+  showTranslationOriginal?: boolean;
   showInstruct?: boolean;
   showInputs?: boolean;
   showDates?: boolean;
@@ -390,6 +391,7 @@ const MemoriWidget = ({
   preview = false,
   embed = false,
   showCopyButton = true,
+  showTranslationOriginal = false,
   showInputs = true,
   showDates = false,
   showContextPerLine = false,
@@ -473,10 +475,8 @@ const MemoriWidget = ({
   const integrationConfig = integration?.customData
     ? JSON.parse(integration.customData)
     : null;
-  const isMultilanguageEnabled =
-    multilingual !== undefined
-      ? multilingual
-      : !!integrationConfig?.multilanguage;
+
+  const isMultilanguageEnabled =  multilingual !== undefined ? multilingual : !!integrationConfig?.multilanguage;
   const forcedTimeout = integrationConfig?.forcedTimeout as number | undefined;
   const [userLang, setUserLang] = useState(
     memoriLang ??
@@ -668,6 +668,7 @@ const MemoriWidget = ({
 
     try {
       if (
+        !hidden &&
         translate &&
         !instruct &&
         isMultilanguageEnabled &&
@@ -773,8 +774,9 @@ const MemoriWidget = ({
           isMultilanguageEnabled
         ) {
           translateDialogState(currentState, userLang, msg).then(ts => {
-            if (ts.emission) {
-              speak(ts.emission);
+            let text = ts.translatedEmission || ts.emission;
+            if (text) {
+              speak(text);
             }
           });
         } else {
@@ -881,45 +883,66 @@ const MemoriWidget = ({
         };
       }
     } else {
-      const t = await getTranslation(emission, userLang, language, baseUrl);
-      if (state.hints && state.hints.length > 0) {
-        const translatedHints = await Promise.all(
-          (state.hints ?? []).map(async hint => {
-            const tHint = await getTranslation(
-              hint,
-              userLang,
-              language,
-              baseUrl
-            );
-            return {
-              text: tHint?.text ?? hint,
-              originalText: hint,
-            } as TranslatedHint;
-          })
-        );
-        translatedState = {
-          ...state,
-          emission: t.text,
-          translatedHints,
-        };
-      } else {
-        translatedState = {
-          ...state,
-          emission: t.text,
-          hints:
-            state.hints ??
-            (state.state === 'G1' ? currentDialogState?.hints : []),
-        };
-      }
+      try {
+        const t = await getTranslation(emission, userLang, language, baseUrl);
+        if (state.hints && state.hints.length > 0) {
+          const translatedHints = await Promise.all(
+            (state.hints ?? []).map(async hint => {
+              const tHint = await getTranslation(
+                hint,
+                userLang,
+                language,
+                baseUrl
+              );
+              return {
+                text: tHint?.text ?? hint,
+                originalText: hint,
+              } as TranslatedHint;
+            })
+          );
+          translatedState = {
+            ...state,
+            emission: t.text,
+            translatedHints,
+          };
+        } else {
+          translatedState = {
+            ...state,
+            emission: emission,
+            translatedEmission: t.text,
+            hints:
+              state.hints ??
+              (state.state === 'G1' ? currentDialogState?.hints : []),
+          };
+        }
 
-      if (t.text.length > 0)
+        if (t.text.length > 0)
+          translatedMsg = {
+            text: emission,
+            translatedText: t.text,
+            emitter: state.emitter,
+            media: state.media,
+            fromUser: false,
+            questionAnswered: msg,
+            generatedByAI: !!state.completion,
+            contextVars: state.contextVars,
+            date: state.currentDate,
+            placeName: state.currentPlaceName,
+            placeLatitude: state.currentLatitude,
+            placeLongitude: state.currentLongitude,
+            placeUncertaintyKm: state.currentUncertaintyKm,
+            tag: state.currentTag,
+            memoryTags: state.memoryTags,
+          };
+      } catch (error) {
+        console.error(error);
+        translatedState = { ...state, emission };
         translatedMsg = {
-          text: t.text,
+          text: emission,
           emitter: state.emitter,
           media: state.media,
           fromUser: false,
           questionAnswered: msg,
-          generatedByAI: !!state.completion,
           contextVars: state.contextVars,
           date: state.currentDate,
           placeName: state.currentPlaceName,
@@ -929,6 +952,7 @@ const MemoriWidget = ({
           tag: state.currentTag,
           memoryTags: state.memoryTags,
         };
+      }
     }
 
     setCurrentDialogState(translatedState);
@@ -1453,8 +1477,9 @@ const MemoriWidget = ({
             { ...currentState, emission: emission },
             userLang
           ).then(ts => {
-            if (ts.emission) {
-              speak(ts.emission);
+            let text = ts.translatedEmission || ts.emission;
+            if (text) {
+              speak(text);
             }
           });
         } else if (emission && emission.length > 0) {
@@ -2589,8 +2614,9 @@ const MemoriWidget = ({
 
           translateDialogState(session.dialogState, userLang)
             .then(ts => {
-              if (ts.emission) {
-                speak(ts.emission);
+              let text = ts.translatedEmission || ts.emission;
+              if (text) {
+                speak(text);
               }
             })
             .finally(() => {
@@ -2646,8 +2672,9 @@ const MemoriWidget = ({
             if (session && session.resultCode === 0) {
               translateDialogState(session.currentState, userLang)
                 .then(ts => {
-                  if (ts.emission) {
-                    speak(ts.emission);
+                  let text = ts.translatedEmission || ts.emission;
+                  if (text) {
+                    speak(text);
                   }
                 })
                 .finally(() => {
@@ -2699,8 +2726,9 @@ const MemoriWidget = ({
             if (session && session.resultCode === 0) {
               translateDialogState(session.currentState, userLang)
                 .then(ts => {
-                  if (ts.emission) {
-                    speak(ts.emission);
+                  let text = ts.translatedEmission || ts.emission;
+                  if (text) {
+                    speak(text);
                   }
                 })
                 .finally(() => {
@@ -2752,8 +2780,9 @@ const MemoriWidget = ({
             if (session && session.resultCode === 0) {
               translateDialogState(session.currentState, userLang)
                 .then(ts => {
-                  if (ts.emission) {
-                    speak(ts.emission);
+                  let text = ts.translatedEmission || ts.emission;
+                  if (text) {
+                    speak(text);
                   }
                 })
                 .finally(() => {
@@ -2788,8 +2817,9 @@ const MemoriWidget = ({
           // no need to change tag
           translateDialogState(currentState, userLang)
             .then(ts => {
-              if (ts.emission) {
-                speak(ts.emission);
+              let text = ts.translatedEmission || ts.emission;
+              if (text) {
+                speak(text);
               }
             })
             .finally(() => {
@@ -2808,8 +2838,9 @@ const MemoriWidget = ({
         // everything is fine, just translate dialog state and activate chat
         translateDialogState(dialogState!, userLang)
           .then(ts => {
-            if (ts.emission) {
-              speak(ts.emission);
+            let text = ts.translatedEmission || ts.emission;
+            if (text) {
+              speak(text);
             }
           })
           .finally(() => {
@@ -2998,6 +3029,7 @@ const MemoriWidget = ({
     instruct: instruct,
     sessionId: sessionId,
     clickedStart: clickedStart,
+    isMultilanguageEnabled: isMultilanguageEnabled,
     onClickStart: onClickStart,
     initializeTTS: initializeTTS,
     isUserLoggedIn: !!loginToken && !!user?.userID,
@@ -3039,6 +3071,7 @@ const MemoriWidget = ({
     showAIicon,
     showWhyThisAnswer,
     showCopyButton,
+    showTranslationOriginal,
     client,
     selectReceiverTag,
     preview,

package/src/components/StartPanel/StartPanel.test.tsx

@@ -238,6 +238,26 @@ it('renders StartPanel with integrationConfig unchanged', () => {
   expect(container).toMatchSnapshot();
 });
 
+it('renders StartPanel with multilangual unchanged', () => {
+  const { container } = render(
+    <StartPanel
+      memori={memori}
+      tenant={tenant}
+      isMultilanguageEnabled
+      language="it"
+      userLang="en"
+      setUserLang={() => {}}
+      openPositionDrawer={() => {}}
+      instruct={false}
+      sessionId={sessionID}
+      clickedStart={false}
+      onClickStart={() => {}}
+      setShowLoginDrawer={jest.fn()}
+    />
+  );
+  expect(container).toMatchSnapshot();
+});
+
 it('renders StartPanel with completion provider down unchanged', () => {
   const { container } = render(
     <StartPanel

package/src/components/StartPanel/StartPanel.tsx

@@ -45,6 +45,7 @@ export interface Props {
   showLogin?: boolean;
   setShowLoginDrawer: (show: boolean) => void;
   notEnoughCredits?: boolean;
+  isMultilanguageEnabled?: boolean | undefined;
 }
 
 const StartPanel: React.FC<Props> = ({
@@ -58,7 +59,6 @@ const StartPanel: React.FC<Props> = ({
   apiUrl,
   position,
   openPositionDrawer,
-  integrationConfig,
   instruct = false,
   clickedStart,
   onClickStart,
@@ -69,6 +69,7 @@ const StartPanel: React.FC<Props> = ({
   showLogin = false,
   setShowLoginDrawer,
   notEnoughCredits = false,
+  isMultilanguageEnabled
 }) => {
   const { t, i18n } = useTranslation();
   const [translatedDescription, setTranslatedDescription] = useState(
@@ -233,7 +234,7 @@ const StartPanel: React.FC<Props> = ({
             )}
           </p>
 
-          {integrationConfig?.multilanguage && !instruct && (
+          {isMultilanguageEnabled && !instruct && (
             <div className="memori--language-chooser">
               <label id="user-lang-pref-label" htmlFor="user-lang-pref">
                 {t('write_and_speak.iWantToTalkToIn', {