@memori.ai/memori-react 7.2.0 → 7.3.0

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,
@@ -668,6 +670,7 @@ const MemoriWidget = ({
 
     try {
       if (
+        !hidden &&
         translate &&
         !instruct &&
         isMultilanguageEnabled &&
@@ -773,8 +776,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 +885,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 +954,7 @@ const MemoriWidget = ({
           tag: state.currentTag,
           memoryTags: state.memoryTags,
         };
+      }
     }
 
     setCurrentDialogState(translatedState);
@@ -1453,8 +1479,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 +2616,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 +2674,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 +2728,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 +2782,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 +2819,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 +2840,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(() => {
@@ -3039,6 +3072,7 @@ const MemoriWidget = ({
     showAIicon,
     showWhyThisAnswer,
     showCopyButton,
+    showTranslationOriginal,
     client,
     selectReceiverTag,
     preview,

package/src/helpers/translations.ts

@@ -14,17 +14,25 @@ export const dialogKeywords = [
   'non mi è piaciuto',
 ];
 
+const stripOutputTags = (text: string) => {
+  return text.replaceAll(/<output.*?>(.*?)<\/output>/g, '');
+};
+
 export const getTranslation = async (
   text: string,
   to: string,
   from?: string,
   baseUrl?: string
 ): Promise<DeeplTranslation> => {
+  let textToTranslate = stripOutputTags(text);
+
   const isReservedKeyword = dialogKeywords.indexOf(text.toLowerCase()) > -1;
   const fromLanguage = isReservedKeyword ? 'IT' : from?.toUpperCase();
   const deeplResult = await fetch(
-    `${baseUrl || 'https://aisuru.com'}/api/translate?text=${encodeURIComponent(
-      text
+    `${
+      baseUrl || 'https://www.aisuru.com'
+    }/api/translate?text=${encodeURIComponent(
+      textToTranslate
     )}&target_lang=${to.toUpperCase()}${
       fromLanguage ? `&source_lang=${fromLanguage}` : ''
     }`,

package/src/index.stories.tsx

@@ -30,7 +30,7 @@ Anonymous.args = {
   memoriName: 'Nicola',
   tenantID: 'aisuru.com',
   apiURL: 'https://backend.memori.ai',
-  baseURL: 'https://aisuru.com',
+  baseURL: 'https://www.aisuru.com',
   uiLang: 'it',
   showShare: true,
   showSettings: true,
@@ -82,20 +82,6 @@ Staging.args = {
   layout: 'FULLPAGE',
 };
 
-export const StagingTokenized = Template.bind({});
-StagingTokenized.args = {
-  memoriName: 'Test',
-  ownerUserName: 'nicola',
-  memoriID: '36798f8a-7018-4cf7-9be4-e681949a46a3',
-  ownerUserID: '585ec0ff-e805-495e-b8fc-5b0b8dd288ff',
-  tenantID: 'aisuru-staging-tokenized.aclambda.online',
-  apiURL: 'https://backend-staging.memori.ai',
-  baseURL: 'https://aisuru-staging-tokenized.aclambda.online',
-  uiLang: 'EN',
-  lang: 'IT',
-  layout: 'FULLPAGE',
-};
-
 const TemplateWithBatchButton: Story<Props> = args => (
   <div>
     <button
@@ -136,7 +122,7 @@ WithBatch.args = {
   memoriName: 'Nicola',
   tenantID: 'aisuru.com',
   apiURL: 'https://backend.memori.ai',
-  baseURL: 'https://aisuru.com',
+  baseURL: 'https://www.aisuru.com',
   uiLang: 'it',
   showShare: true,
   showSettings: true,
@@ -148,7 +134,7 @@ WithCustomUserAvatar.args = {
   memoriName: 'Nicola',
   tenantID: 'aisuru.com',
   apiURL: 'https://backend.memori.ai',
-  baseURL: 'https://aisuru.com',
+  baseURL: 'https://www.aisuru.com',
   uiLang: 'it',
   showShare: true,
   showSettings: true,

package/src/index.tsx

@@ -29,6 +29,7 @@ export interface Props {
   customLayout?: WidgetProps['customLayout'];
   showShare?: boolean;
   showCopyButton?: boolean;
+  showTranslationOriginal?: boolean;
   showInstruct?: boolean;
   showInputs?: boolean;
   showDates?: boolean;
@@ -90,6 +91,7 @@ const Memori: React.FC<Props> = ({
   customLayout,
   showShare = true,
   showCopyButton = true,
+  showTranslationOriginal = false,
   showSettings = true,
   showInstruct = false,
   showTypingText = false,
@@ -242,6 +244,7 @@ const Memori: React.FC<Props> = ({
       sessionID={sessionID}
       showShare={showShare}
       showCopyButton={showCopyButton}
+      showTranslationOriginal={showTranslationOriginal}
       showSettings={showSettings}
       showInstruct={showInstruct}
       showTypingText={showTypingText}
@@ -318,6 +321,7 @@ Memori.propTypes = {
   customLayout: PropTypes.any,
   showShare: PropTypes.bool,
   showCopyButton: PropTypes.bool,
+  showTranslationOriginal: PropTypes.bool,
   showInstruct: PropTypes.bool,
   showInputs: PropTypes.bool,
   showDates: PropTypes.bool,