Bug fix - Broken Links & HTML Artifacts in Message to Client #932

DSL/DMapper/services/hbs/bot_responses_to_messages.handlebars

@@ -2,7 +2,7 @@
 {{#each data.botMessages}}
   {
    "chatId": "{{../data.chatId}}",
-   "content": "{{filterControlCharacters result}}",
+  "content": "{{{filterControlCharacters (escapeQuotes result)}}}",
    "buttons": "[{{#each ../data.buttons}}{\"title\": \"{{#if (eq title true)}}Yes{{else if (eq title false)}}No{{else}}{{{title}}}{{/if}}\",\"payload\": \"{{{payload}}}\"}{{#unless @last}},{{/unless}}{{/each}}]",
    "authorTimestamp": "{{../data.authorTimestamp}}",
    "authorId": "{{../data.authorId}}",

GUI/src/components/Flow/NodeTypes/StepNode.tsx

@@ -3,10 +3,12 @@
 import Track from 'components/Track';
 import { FC, memo, useCallback, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
+import sanitizeHtml from 'sanitize-html';
 import useServiceStore from 'store/new-services.store';
 import { StepType } from 'types';
 import { NodeDataProps } from 'types/service-flow';
 import { validateStep } from 'utils/flow-utils';
+import { decodeHtmlEntities } from 'utils/string-util';
 
 type StepNodeProps = {
   data: NodeDataProps;
@@ -21,8 +23,17 @@
     fontWeight: 500,
   };
   const createMarkup = (text: string) => {
+    const decodedText = decodeHtmlEntities(text);
+    const sanitizedText = sanitizeHtml(decodedText, {
+      allowedTags: ['a', 'b', 'strong', 'i', 'em', 'u', 'p', 'br', 'ul', 'ol', 'li', 'code'],
+      allowedAttributes: {
+        a: ['href', 'target', 'rel'],
+      },
+      disallowedTagsMode: 'discard',
+    });
+
     return {
-      __html: text,
+      __html: sanitizedText,
     };
   };
 
@@ -52,7 +63,7 @@
   }, [data, endpoints]);
 
   useEffect(() => {
-    void updateIsTestedAndPassed();
+    updateIsTestedAndPassed();
   }, [updateIsTestedAndPassed]);
 
   return (

GUI/src/components/Markdowify/index.tsx

@@ -72,6 +72,16 @@
 
 const hasSpecialFormat = (m: string) => m.includes('\n\n') && m.indexOf('.') > 0 && m.indexOf(':') > m.indexOf('.');
 
+const htmlLinkToMarkdown = (value: string): string =>
+  value.replaceAll(
+    /<a\s+[^>]*href\s*=\s*(?:"([^"]*)"|'([^']*)'|([^\s>]+))[^>]*>((?:[^<]|<(?!\/a>))*)<\/a>/gi,
+    (_, href1: string, href2: string, href3: string, label: string) => {
+      const href = (href1 ?? href2 ?? href3 ?? '').trim();
+      const text = sanitizeHtml(label ?? '', { allowedTags: [], allowedAttributes: {} }).trim() || href;
+      return href ? `[${text}](${href})` : text;
+    },
+  );
+
 function formatMessage(message?: string): string {
   const sanitizedMessage = sanitizeHtml(message ?? '');
 
@@ -87,9 +97,10 @@
     dataImagePattern,
     (_, prefix, dataUrl) => `${prefix}[image](${dataUrl})`,
   );
+  const markdownLinksMessage = htmlLinkToMarkdown(finalMessage);
 
-  return finalMessage
-    .replaceAll(/&#x([0-9A-F]+);/gi, (_, hex: string) => String.fromCharCode(parseInt(hex, 16)))
+  return markdownLinksMessage
+    .replaceAll(/&#x([0-9A-F]+);/gi, (_, hex: string) => String.fromCodePoint(Number.parseInt(hex, 16)))
     .replaceAll('&amp;', '&')
     .replaceAll('&gt;', '>')
     .replaceAll('&lt;', '<')
@@ -105,7 +116,7 @@
           return `${prefix}${year}. `;
         }
       }
-      return `${prefix}${year}\\. `;
+      return String.raw`${prefix}${year}\. `;
     })
     .replaceAll(/(?<=\n)\d+\.\s/g, hasSpecialFormat(finalMessage) ? '\n\n$&' : '$&')
     .replaceAll(/^(\s+)/g, (match) => match.replaceAll(' ', '&nbsp;'));

GUI/src/components/chat/bot-message.tsx

@@ -22,7 +22,6 @@ interface ChatMessageProps {
 
 const BotMessage = ({ message }: ChatMessageProps) => {
   const renderContent = useCallback(() => {
-    if (message.message.startsWith('<p>')) return message.message.replace('<p>', '').replace('</p>', '');
     return <Markdownify message={message.message} />;
   }, [message.message]);
 

GUI/src/components/chat/chat.module.scss

@@ -141,6 +141,16 @@
       .content {
         border-radius: 6px 48px 48px 29px;
         background-color: blue;
+        color: white;
+
+        a {
+          color: #a8d4ff;
+          text-decoration: underline;
+
+          &:visited {
+            color: #c8a8ff;
+          }
+        }
       }
 
       .icon {
@@ -223,7 +233,7 @@
       pointer-events: none;
       user-select: none;
       background-color: #f5f5f5;
-      color: #999;
+      color: #696969;
     }
   }
 
@@ -268,18 +278,18 @@
   font-weight: bold;
 
   &.success {
-    color: rgb(0, 138, 0);
+    color: rgb(0, 100, 0);
     background: #0f02;
   }
 
   &.error {
-    color: rgb(170, 0, 0);
+    color: rgb(80, 0, 0);
     background: #f002;
   }
 
   &.info {
-    color: rgb(0, 0, 203);
+    color: rgb(0, 0, 80);
     background: #00f2;
   }
 
   &.normal {
@@ -378,6 +388,16 @@
     .main {
       .content {
         background-color: get-color(sapphire-blue-12);
+        color: var(--dark-bg-extra-light);
+
+        a {
+          color: #a8d4ff;
+          text-decoration: underline;
+
+          &:visited {
+            color: #c8a8ff;
+          }
+        }
       }
     }
   }

GUI/src/services/service-builder.ts

@@ -12,6 +12,7 @@
 import { EndpointData } from 'types/endpoint';
 import { NodeDataProps } from 'types/service-flow';
 import {
+  decodeHtmlEntities,
   getLastDigits,
   isNumericString,
   removeTrailingUnderscores,
@@ -186,9 +187,9 @@
   try {
     let yamlContent = getYamlContent(nodes, edges, name, description, showError);
 
     const mcqNodes = nodes.filter(
       (node) => node.data?.stepType === StepType.MultiChoiceQuestion,
     ) as Node<NodeDataProps>[];
 
     if (mcqNodes.length > 0) {
       const nodesUpToFirstMcq = nodes.slice(
@@ -420,7 +421,7 @@
   try {
     allRelations.forEach((r) => {
       const [parentNodeId, childNodeId] = r.split(',');
       const parentNode = nodes.findLast((node) => node.id === parentNodeId) as Node<NodeDataProps> | undefined;
       if (
         !parentNode?.type ||
         parentNode.type !== 'custom' ||
@@ -429,7 +430,7 @@
         return;
       }
 
       const childNode = nodes.find((node) => node.id === childNodeId) as Node<NodeDataProps> | undefined;
       const parentStepName = toSnakeCase(parentNode.data.label);
 
       if (parentNode.data.stepType === StepType.Textfield) {
@@ -602,11 +603,10 @@
   });
 
   const spacePlaceholder = '___SPACE___';
+  const rawMessage = typeof parentNode.data.message === 'string' ? decodeHtmlEntities(parentNode.data.message) : '';
   const markdownMessage = htmlToMarkdown
     .translate(
-      typeof parentNode.data.message === 'string'
-        ? parentNode.data.message.replace('{{', '${').replace('}}', '}').replaceAll(' ', spacePlaceholder)
-        : '',
+      rawMessage.replace('{{', '${').replace('}}', '}').replaceAll(' ', spacePlaceholder),
     )
     .replaceAll(spacePlaceholder, ' ')
     .replaceAll(/\\([-~>[\]_*#().!`=<\\])/g, String.raw`\\$1`);
@@ -640,8 +640,8 @@
   const firstChildNode = conditionRelations[0].split(',')[1];
   const secondChildNode = conditionRelations[1].split(',')[1];
 
   const firstChild = nodes.find((node) => node.id === firstChildNode) as Node<NodeDataProps> | undefined;
   const secondChild = nodes.find((node) => node.id === secondChildNode) as Node<NodeDataProps> | undefined;
 
   const rulesChildren = Array.isArray(parentNode.data.rules?.children) ? parentNode.data.rules.children : [];
   const invalidRulesExist = hasInvalidRules(rulesChildren);
@@ -880,7 +880,7 @@
   const nodes = useServiceStore.getState().nodes as Node<NodeDataProps>[];
 
   await saveFlow({
     name: !name
       ? `${t('newService.defaultServiceName').toString()}_${format(new Date(), 'dd_MM_yyyy_HH_mm_ss')}`
       : name,
     edges,

GUI/src/utils/string-util.ts

@@ -24,14 +24,14 @@
 };
 
 export const toSnakeCase = (value: string) => {
-  return value.toLowerCase().trim().replace(/\s+/g, '_').replace(/-+/g, '_').replace(/_+/g, '_');
+  return value.toLowerCase().trim().replaceAll(/\s+/g, '_').replaceAll(/-+/g, '_').replaceAll(/_+/g, '_');
 };
 
 export const fromSnakeCase = (value: string) => {
   const parts = value.split('_');
 
   // Check if the last part is a number
   const lastPart = parts[parts.length - 1];
   const isLastPartNumber = /^\d+$/.test(lastPart);
 
   if (isLastPartNumber && parts.length > 1) {
@@ -96,7 +96,7 @@
     changed = false;
     iterationCount++;
 
-    str = str.replace(
+    str = str.replaceAll(
       /\$\{([^${}]*)\$\{([^}]*)\}([^}]*)\}/g,
       (match: string, p1: string, p2: string, p3: string): string => {
         changed = true;
@@ -116,7 +116,7 @@
     changed = false;
     iterationCount++;
 
-    str = str.replace(
+    str = str.replaceAll(
       /\$\{([^{}]*)\{([^}]*)\}([^}]*)\}/g,
       (match: string, p1: string, p2: string, p3: string): string => {
         changed = true;
@@ -151,3 +151,23 @@
 
   return str.substring(start, end + 1);
 }
+
+export function decodeHtmlEntities(value: string): string {
+  if (typeof value !== 'string' || value.length === 0) return value;
+
+  if (typeof document !== 'undefined') {
+    const textarea = document.createElement('textarea');
+    textarea.innerHTML = value;
+    return textarea.value;
+  }
+
+  return value
+    .replaceAll(/&#x([0-9A-F]+);/gi, (_, hex: string) => String.fromCodePoint(Number.parseInt(hex, 16)))
+    .replaceAll(/&#(\d+);/g, (_, code: string) => String.fromCodePoint(Number.parseInt(code, 10)))
+    .replaceAll('&', '&')
+    .replaceAll('>', '>')
+    .replaceAll('&lt;', '<')
+    .replaceAll('&quot;', '"')
+    .replaceAll('&#39;', "'")
+    .replaceAll('&apos;', "'");
+}