✨ feat: Add MDI icons easily in answer text

Something like:

PDF - [[i|file-pdf|red]
Word Doc - [[i|file-word-box|blue]
Excel - [[i|microsoft-excel|green]
Text Document - [[i|text-box-outline]
Tag - [[i|tag-text|purple]
Check Mark - [[i|check|green]
Link 1 - [[i|link-variant|red]
Link 2 - [[i|link-box|orange]
Link New Window - [[i|open-in-new]
Alert - [[i|alert-decagram|red]

src/store.js

@@ -22,7 +22,8 @@ import {
   queryParamStringAsObject,
   sleep,
   uuid,
-  addTtsPauses
+  addTtsPauses,
+  handleIcons
 } from "@/utils/utils";
 import { accountsSdk } from "@livechat/accounts-sdk";
 import LiveChat from "@livechat/agent-app-widget-sdk";
@@ -2226,8 +2227,10 @@ async function handleTeneoResponse(currentUserInput, context, params, vuetify) {
       const response = {
         userInput: currentUserInput,
         id: uuid(),
-        teneoAnswer: md.render(
-          cleanEmptyChunks(tResp.getOutputText()).replace(/onclick="[^"]+"/g, 'class="sendInput"')
+        teneoAnswer: handleIcons(
+          md.render(
+            cleanEmptyChunks(tResp.getOutputText()).replace(/onclick="[^"]+"/g, 'class="sendInput"')
+          )
         ),
         teneoResponse: json
       };
@@ -2734,8 +2737,10 @@ function handleLoginResponse(context, json, vuetify, resolve) {
   const response = {
     type: "reply",
     id: uuid(),
-    text: md.render(
-      cleanEmptyChunks(tResp.getOutputText()).replace(/onclick="[^"]+"/g, 'class="sendInput"')
+    text: handleIcons(
+      md.render(
+        cleanEmptyChunks(tResp.getOutputText()).replace(/onclick="[^"]+"/g, 'class="sendInput"')
+      )
     ),
     bodyText: "",
     teneoResponse: json,

src/utils/utils.js

@@ -877,6 +877,49 @@ export const download = (data, filename, type = "text/plain") => {
   }
 };
 
+export const handleIcons = myString => {
+  var regexp = /\[\[(.{1,30}?)\]/g;
+  const matches = myString.matchAll(regexp);
+
+  let reformattedStr = "";
+  let cursorPos = 0;
+
+  for (const match of matches) {
+    console.log(match);
+    // the complete match
+    const index = match.index;
+
+    const fullMatch = match[0];
+    // console.log(fullMatch);
+
+    // append string content from the last match
+    reformattedStr += myString.substr(cursorPos, index - cursorPos);
+
+    //update cursorPos to end of match.
+    cursorPos = index + fullMatch.length;
+
+    // isolating each capture group match
+    const group1 = match[1];
+
+    const leopardInfo = group1.split("|");
+    // console.log(leopardInfo);
+
+    if (leopardInfo.length > 0 && leopardInfo[0] === "i") {
+      let html = `<i aria-hidden="true" class="v-icon mdi mdi-${leopardInfo[1]} ${
+        leopardInfo[2] ? leopardInfo[2].toLowerCase() + "--text" : ""
+      }"></i>`;
+      reformattedStr += html;
+    }
+  }
+
+  // if there is still string content present after the last match, append it here
+  if (cursorPos < myString.length) {
+    reformattedStr += myString.substr(cursorPos, myString.length - cursorPos);
+  }
+
+  return reformattedStr;
+};
+
 export const getBase64Image = img => {
   const canvas = document.createElement("canvas");
   canvas.width = img.width;