refactor: strip html in msg parsing for TTS, fix plaintext to copy

memori-ai · Oct 11, 2024 · 4d95f39 · 4d95f39
1 parent 754f6a8
commit 4d95f39
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 10 deletions.
diff --git a/src/components/ChatBubble/ChatBubble.tsx b/src/components/ChatBubble/ChatBubble.tsx
@@ -1,4 +1,4 @@
-import React, { useLayoutEffect, useRef, useState } from 'react';
+import React, { useLayoutEffect, useState } from 'react';
 import cx from 'classnames';
 import {
   ExpertReference,
@@ -18,13 +18,12 @@ import FeedbackButtons from '../FeedbackButtons/FeedbackButtons';
 import { useTranslation } from 'react-i18next';
 import { marked } from 'marked';
 import DOMPurify from 'dompurify';
-import { cleanUrl } from '../../helpers/utils';
 import Button from '../ui/Button';
 import QuestionHelp from '../icons/QuestionHelp';
 import Copy from '../icons/Copy';
 import Code from '../icons/Code';
 import WhyThisAnswer from '../WhyThisAnswer/WhyThisAnswer';
-import { stripEmojis, escapeHTML, stripMarkdown } from '../../helpers/utils';
+import { cleanUrl, stripHTML, stripOutputTags } from '../../helpers/utils';
 
 import markedLinkifyIt from 'marked-linkify-it';
 import markedKatex from 'marked-katex-extension';
@@ -149,7 +148,7 @@ const ChatBubble: React.FC<Props> = ({
 
   const plainText = message.fromUser
     ? text
-    : escapeHTML(stripMarkdown(stripEmojis(text)));
+    : stripHTML(stripOutputTags(renderedText));
 
   useLayoutEffect(() => {
     if (typeof window !== 'undefined' && !message.fromUser) {

diff --git a/src/components/MemoriWidget/MemoriWidget.tsx b/src/components/MemoriWidget/MemoriWidget.tsx
@@ -29,7 +29,6 @@ import React, {
   useCallback,
   CSSProperties,
   useRef,
-  useContext,
 } from 'react';
 import { useTranslation } from 'react-i18next';
 import memoriApiClient from '@memori.ai/memori-api-client';
@@ -74,6 +73,7 @@ import {
   escapeHTML,
   stripMarkdown,
   stripOutputTags,
+  stripHTML,
 } from '../../helpers/utils';
 import { anonTag, uiLanguages } from '../../helpers/constants';
 import { getErrori18nKey } from '../../helpers/error';
@@ -1972,8 +1972,9 @@ const MemoriWidget = ({
       });
     };
 
-    //if there is an emotion, remove the tag <output > from the text
-    const textToSpeak = text.replace(/<output>(.*?)<\/output>/g, '$1');
+    const textToSpeak = escapeHTML(
+      stripMarkdown(stripEmojis(stripHTML(stripOutputTags(text))))
+    );
 
     speechSynthesizer.speakSsmlAsync(
       `<speak version="1.0" xmlns="http://www.w3.org/2001/10/synthesis" xmlns:mstts="https://www.w3.org/2001/mstts" xmlns:emo="http://www.w3.org/2009/10/emotionml" xml:lang="${getCultureCodeByLanguage(
@@ -1983,7 +1984,7 @@ const MemoriWidget = ({
       )}"><mstts:express-as style="${getAzureStyleForEmotion(
         emotion
       )}"><s>${replaceTextWithPhonemes(
-        escapeHTML(stripMarkdown(stripEmojis(stripOutputTags(textToSpeak)))),
+        textToSpeak,
         userLang.toLowerCase()
       )}</s></mstts:express-as></voice></speak>`,
       result => {

diff --git a/src/helpers/utils.ts b/src/helpers/utils.ts
@@ -150,6 +150,7 @@ export const stripEmojis = (text: string) => {
 
 export const stripMarkdown = (text: string) => {
   // Remove code blocks
+  text = text.replaceAll(/```*?```/g, '');
   text = text.replaceAll(/```[\s\S]*?```/g, '');
   // Remove inline code
   text = text.replaceAll(/`[^`]*`/g, '');
@@ -194,6 +195,12 @@ export const stripOutputTags = (text: string): string => {
   return stripOutputTags(textBefore + textAfter);
 };
 
+export const stripHTML = (text: string) => {
+  const el = document.createElement('div');
+  el.innerHTML = text;
+  return el.textContent || '';
+};
+
 export const escapeHTML = (text: string) => {
   const el = document.createElement('textarea');
   el.textContent = text;

diff --git a/src/index.stories.tsx b/src/index.stories.tsx
@@ -42,7 +42,7 @@ Localhost.args = {
   ownerUserName: 'nicola',
   memoriID: '1a9c75e8-57aa-4ce3-8ea5-256185fa79a7',
   ownerUserID: '04a8cff9-13d6-4367-9cb2-72b9af9ee494',
-  tenantID: 'app.memorytwin.com',
+  tenantID: 'www.aisuru.com',
   apiURL: 'http://localhost:7778',
   baseURL: 'http://localhost:3000',
   uiLang: 'EN',
@@ -58,7 +58,7 @@ LocalhostBoE.args = {
   ownerUserName: 'nicola',
   memoriID: '2b094cd6-77b8-4e09-a807-0039b84c988e',
   ownerUserID: '04a8cff9-13d6-4367-9cb2-72b9af9ee494',
-  tenantID: 'app.memorytwin.com',
+  tenantID: 'www.aisuru.com',
   apiURL: 'http://localhost:7778',
   baseURL: 'http://localhost:3000',
   uiLang: 'EN',