refactor: hide output tags in chat, strip them for TTS

src/components/ChatBubble/ChatBubble.css

@@ -101,7 +101,7 @@
     }
 }
 
-.memori-chat--bubble p+p {
+.memori-chat--bubble p + p {
     margin-top: 0.5em;
 }
 
@@ -266,7 +266,6 @@
 }
 
 @keyframes wave {
-
     0%,
     60%,
     100% {
@@ -282,6 +281,10 @@
     width: 100%;
 }
 
-.memori-chat--bubble mjx-container[jax='CHTML'][display='true'] {
+.memori-chat--bubble output {
+    display: none;
+}
+
+.dot mjx-container[jax='CHTML'][display='true'] {
     text-align: left;
-}
+}

src/components/ChatBubble/ChatBubble.stories.tsx

@@ -298,6 +298,19 @@ WithMarkdownCode.args = {
   },
 };
 
+export const WithOutputCode = Template.bind({});
+WithOutputCode.args = {
+  memori,
+  apiUrl: 'https://backend.memori.ai',
+  tenant,
+  message: {
+    fromUser: false,
+    text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.\n\n```markdown\n# titolo\n```\n\nSed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\n\n<output class="memori-output">{ "data": [ 0, 1, 2 ] }</output>',
+    initial: false,
+    generatedByAI: true,
+  },
+};
+
 export const WithMarkdownTable = Template.bind({});
 WithMarkdownTable.args = {
   memori,

src/components/MemoriWidget/MemoriWidget.tsx

@@ -72,6 +72,7 @@ import {
   stripEmojis,
   escapeHTML,
   stripMarkdown,
+  stripOutputTags,
 } from '../../helpers/utils';
 import { anonTag } from '../../helpers/constants';
 import { getErrori18nKey } from '../../helpers/error';
@@ -1919,7 +1920,7 @@ const MemoriWidget = ({
       `<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(
         userLang
       )}"><voice name="${getTTSVoice(userLang)}"><s>${replaceTextWithPhonemes(
-        escapeHTML(stripMarkdown(stripEmojis(text))),
+        escapeHTML(stripOutputTags(stripMarkdown(stripEmojis(text)))),
         userLang.toLowerCase()
       )}</s></voice></speak>`,
       result => {

src/helpers/utils.test.ts

@@ -1,4 +1,9 @@
-import { difference, stripEmojis, stripMarkdown } from './utils';
+import {
+  difference,
+  stripEmojis,
+  stripMarkdown,
+  stripOutputTags,
+} from './utils';
 
 describe('Utils/difference', () => {
   it('should return the difference between two objects with numeric values', () => {
@@ -120,3 +125,17 @@ describe('utils/stripMarkdown', () => {
     expect(result).toEqual('');
   });
 });
+
+describe('utils/stripOutputTags', () => {
+  it('should remove output tag', () => {
+    const result = stripOutputTags('test\n<output>pippo</output>');
+    expect(result).toEqual('test\n');
+  });
+
+  it('should remove output tag with class', () => {
+    const result = stripOutputTags(
+      'test\n<output class="memori-output">pippo</output>'
+    );
+    expect(result).toEqual('test\n');
+  });
+});

src/helpers/utils.ts

@@ -180,6 +180,18 @@ export const stripMarkdown = (text: string) => {
   return text;
 };
 
+export const stripOutputTags = (text: string): string => {
+  let hasTags = text.includes('</output>');
+
+  if (!hasTags) return text;
+
+  let output = text.split('</output>');
+  let textBefore = output[0].split('<output')[0];
+  let textAfter = output[1];
+
+  return stripOutputTags(textBefore + textAfter);
+};
+
 export const escapeHTML = (text: string) => {
   const el = document.createElement('textarea');
   el.textContent = text;