@govtechsg/oobee 0.10.20

package/src/static/ejs/partials/scripts/screenshotLightbox.ejs

@@ -0,0 +1,71 @@
+<%# functions used to show lightbox of screenshot when thumbnail is clicked on %>
+<script>
+    const lightbox = document.getElementsByClassName('screenshot-lightbox')[0];
+    const lightboxHeader = document.getElementsByClassName('lightbox-header')[0];
+    const lightboxTitle = document.querySelector('.lightbox-header h5');
+    const lightboxContent = document.getElementsByClassName('lightbox-content')[0]; 
+    const lightboxImg = document.getElementById('lightbox-image');
+
+    var customFlowScreenshots = document.getElementsByClassName('custom-flow-screenshot'); 
+    Array.from(customFlowScreenshots).forEach(screenshot => {
+        screenshot.onerror = function(event) {
+            screenshot.onerror = null;
+            screenshot.remove();
+        }
+        screenshot.onclick = event => {
+            event.preventDefault();
+            const pageTitle = screenshot.parentNode.getElementsByTagName('a')[0].textContent;
+            const pageUrl = screenshot.parentNode.getElementsByTagName('a')[0].href;
+            openLightbox(screenshot.src, pageTitle, pageUrl);
+        }
+    }) 
+
+    lightbox.addEventListener('click', event => {
+        if (event.target === lightbox || event.target === lightboxHeader || event.target === lightboxTitle) {
+            closeLightbox();
+        }
+    })
+
+    const offcanvasElem = document.getElementsByClassName('offcanvas')[0];
+    const offcanvasItem = new bootstrap.Offcanvas(offcanvasElem); 
+    offcanvasItem._config.keyboard = false; // Disable default keyboard handling
+
+    const pagesScannedModalElem = document.getElementById('pagesScannedModal'); 
+    const pagesScannedModalItem = new bootstrap.Modal(pagesScannedModalElem);
+    pagesScannedModalItem._config.keyboard = false; 
+
+    document.addEventListener('keydown', event => {
+      if (event.key === 'Escape') {
+        if (offcanvasItem._isShown) {
+          if (lightbox.style.display === 'block') {
+            event.preventDefault(); // Prevent default bootstrap behaviour
+            closeLightbox(); 
+          } else {
+            offcanvasItem.hide();
+          }
+        }
+
+        if (pagesScannedModalItem._isShown) {
+          if (lightbox.style.display === 'block') {
+            event.preventDefault(); // Prevent default bootstrap behaviour
+            closeLightbox(); 
+          } else {
+            pagesScannedModalItem.hide();
+          }
+        }
+      }
+    })
+
+    const openLightbox = (imgSrc, pageTitle, pageUrl) => {
+        lightbox.style.display = 'block';
+        
+        lightboxImg.src = imgSrc;
+        lightboxImg.alt = `Screenshot of ${pageUrl}`;
+
+        lightboxTitle.textContent = pageTitle;
+    }
+
+    const closeLightbox = () => {
+        lightbox.style.display = 'none'; 
+    }
+</script>

package/src/static/ejs/partials/scripts/summaryScanResults.ejs

@@ -0,0 +1,14 @@
+<script>
+  document.getElementById('summarymustFixIcon').src =
+    "data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M17.1429 0H2.85714C1.27919 0 0 1.27919 0 2.85714V17.1429C0 18.7208 1.27919 20 2.85714 20H17.1429C18.7208 20 20 18.7208 20 17.1429V2.85714C20 1.27919 18.7208 0 17.1429 0Z' fill='%23f26949'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11.4292 9.99822V5.71251C11.4292 4.92353 10.7896 4.28394 10.0006 4.28394C9.21161 4.28394 8.57202 4.92353 8.57202 5.71251V9.99822C8.57202 10.7872 9.21161 11.4268 10.0006 11.4268C10.7896 11.4268 11.4292 10.7872 11.4292 9.99822ZM10.0006 12.8554C9.21202 12.8554 8.57202 13.4954 8.57202 14.2839C8.57202 15.0725 9.21202 15.7125 10.0006 15.7125C10.7892 15.7125 11.4292 15.0725 11.4292 14.2839C11.4292 13.4954 10.7892 12.8554 10.0006 12.8554Z' fill='white'/%3E%3C/svg%3E%0A";
+  document.getElementById('summarymustFixIcon').alt = 'must fix icon';
+  document.getElementById('summarygoodToFixIcon').src =
+    "data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M17.1429 0H2.85714C1.27919 0 0 1.27919 0 2.85714V17.1429C0 18.7208 1.27919 20 2.85714 20H17.1429C18.7208 20 20 18.7208 20 17.1429V2.85714C20 1.27919 18.7208 0 17.1429 0Z' fill='%23ffb200'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M10 6.5625C8.10131 6.5625 6.5625 8.10131 6.5625 10C6.5625 11.8987 8.10131 13.4375 10 13.4375C11.8987 13.4375 13.4375 11.8987 13.4375 10C13.4375 8.10131 11.8987 6.5625 10 6.5625ZM4.84375 10C4.84375 7.15207 7.15207 4.84375 10 4.84375C12.8479 4.84375 15.1562 7.15207 15.1562 10C15.1562 12.8479 12.8479 15.1562 10 15.1562C7.15207 15.1562 4.84375 12.8479 4.84375 10Z' fill='white'/%3E%3C/svg%3E%0A";
+  document.getElementById('summarygoodToFixIcon').alt = 'good to fix icon';
+  document.getElementById('summaryneedsReviewIcon').src =
+    "data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M17.1429 0H2.85714C1.27919 0 0 1.27919 0 2.85714V17.1429C0 18.7208 1.27919 20 2.85714 20H17.1429C18.7208 20 20 18.7208 20 17.1429V2.85714C20 1.27919 18.7208 0 17.1429 0Z' fill='%23c9c8c6'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M8.09759 7.26594C8.23445 6.67496 8.46462 6.23328 8.7881 5.9409C9.14891 5.65474 9.57815 5.51166 10.0758 5.51166C10.5984 5.51166 11.0152 5.64852 11.3262 5.92224C11.6372 6.19596 11.7928 6.53188 11.7928 6.93002C11.7928 7.22862 11.7057 7.48367 11.5315 7.69518C11.4195 7.84448 11.0712 8.15552 10.4864 8.6283C9.90785 9.11353 9.51594 9.54277 9.31065 9.91602C9.12403 10.3079 9.03072 10.7745 9.03072 11.3157V11.7449L9.04938 11.8569C9.04938 11.9316 9.06026 12 9.08204 12.0622C9.10381 12.1244 9.12558 12.1742 9.14736 12.2115C9.16913 12.2488 9.20645 12.2815 9.25933 12.3095C9.31221 12.3375 9.35264 12.3593 9.38064 12.3748C9.40863 12.3904 9.45995 12.4012 9.5346 12.4075C9.60925 12.4137 9.66058 12.4168 9.68857 12.4168H9.85187H10.0012C10.2065 12.4168 10.3589 12.409 10.4584 12.3935C10.5579 12.3779 10.6466 12.3313 10.7243 12.2535C10.8021 12.1757 10.841 12.056 10.841 11.8942C10.841 11.6827 10.8534 11.465 10.8783 11.2411C10.897 11.0109 10.9343 10.8305 10.9903 10.6998C11.0712 10.5008 11.3324 10.2208 11.7741 9.86003C12.6077 9.15707 13.1427 8.61587 13.3791 8.23639C13.6279 7.83204 13.7523 7.41524 13.7523 6.986C13.7523 6.17729 13.4102 5.48678 12.7259 4.91446C12.0603 4.30482 11.1458 4 9.9825 4C8.88763 4 8.00428 4.2986 7.33243 4.8958C6.71656 5.41835 6.36198 6.07154 6.26866 6.85537C6.25622 6.89269 6.25 6.9549 6.25 7.04199C6.25 7.29705 6.3402 7.51633 6.52061 7.69984C6.70101 7.88336 6.91563 7.97512 7.16446 7.97512C7.37597 7.97512 7.56571 7.90824 7.73367 7.77449C7.90163 7.64075 8.0105 7.47123 8.06026 7.26594H8.09759ZM10.0012 13.2939C9.62791 13.2939 9.30754 13.4246 9.04005 13.6858C8.77255 13.9471 8.6388 14.2644 8.6388 14.6376C8.6388 15.0047 8.77255 15.3235 9.04005 15.5941C9.30754 15.8647 9.62791 16 10.0012 16C10.3744 16 10.6948 15.8647 10.9623 15.5941C11.2298 15.3235 11.3635 15.0047 11.3635 14.6376C11.3635 14.2644 11.2298 13.9471 10.9623 13.6858C10.6948 13.4246 10.3744 13.2939 10.0012 13.2939Z' fill='white'/%3E%3C/svg%3E%0A";
+  document.getElementById('summaryneedsReviewIcon').alt = 'needs review icon';
+  document.getElementById('summarypassedIcon').src =
+    "data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M17.1429 0H2.85714C1.27919 0 0 1.27919 0 2.85714V17.1429C0 18.7208 1.27919 20 2.85714 20H17.1429C18.7208 20 20 18.7208 20 17.1429V2.85714C20 1.27919 18.7208 0 17.1429 0Z' fill='%233aa566'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15.1781 5.3131C15.7942 5.80597 15.8941 6.70496 15.4012 7.32105L9.68694 14.4639C9.19407 15.08 8.29508 15.1799 7.67899 14.687C7.0629 14.1941 6.96301 13.2951 7.45589 12.6791L13.1702 5.5362C13.663 4.92011 14.562 4.82023 15.1781 5.3131Z' fill='white'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M4.70415 9.70455C5.26204 9.14666 6.16656 9.14666 6.72446 9.70455L9.5816 12.5617C10.1395 13.1196 10.1395 14.0241 9.5816 14.582C9.02371 15.1399 8.11919 15.1399 7.56129 14.582L4.70415 11.7249C4.14626 11.167 4.14626 10.2624 4.70415 9.70455Z' fill='white'/%3E%3C/svg%3E%0A";
+  document.getElementById('summarypassedIcon').alt = 'passed icon';
+</script>

package/src/static/ejs/partials/scripts/summaryTable.ejs

@@ -0,0 +1,78 @@
+<script>
+  Object.keys(scanItems).forEach(category => {
+    if (category !== 'passed') {
+      const ruleInCategory = scanItems[category].rules.forEach((rule, index) => {
+        helpUrl = `<a href=${rule.helpUrl} target="_blank" class="help-link"></a>`;
+        wcagLink =
+          rule.conformance[0] === 'best-practice'
+            ? `<span style="color:#26241b">Best practice</span>`
+            : generateWcagConformanceLinks(rule.conformance);
+        description =
+          `${rule.description}`.replace(/</g, '&lt;').replace(/>/g, '&gt;') + `\n${wcagLink}`;
+
+        rowStrings = [
+          `${category}-description-${index}`,
+          `${category}-occurrences-${index}`,
+          `${category}-pages-${index}`,
+          `${category}-helpUrl-${index}`,
+        ];
+
+        var newRow = document.createElement('tr');
+        var newCell = document.createElement('td');
+        newCell.setAttribute('class', `table-${category}-icon`);
+        newRow.append(newCell);
+
+        rowStrings.forEach(string => {
+          var newCell = document.createElement('td');
+          newCell.setAttribute('id', `table-${string}`);
+          newRow.append(newCell);
+        });
+
+        document.getElementById('summary-table-contents').appendChild(newRow);
+
+        document.getElementById(`table-${category}-description-${index}`).innerHTML = description;
+        document
+          .getElementById(`table-${category}-description-${index}`)
+          .setAttribute('style', 'text-align: left; padding-left: 10px;white-space:break-spaces');
+
+        document.getElementById(`table-${category}-occurrences-${index}`).innerHTML =
+          rule.totalItems;
+        document
+          .getElementById(`table-${category}-occurrences-${index}`)
+          .setAttribute('style', 'text-align: right; padding-right: 10px');
+
+        document.getElementById(`table-${category}-pages-${index}`).innerHTML =
+          rule.pagesAffected.length;
+        document
+          .getElementById(`table-${category}-pages-${index}`)
+          .setAttribute('style', 'text-align: right;');
+
+        document.getElementById(`table-${category}-helpUrl-${index}`).innerHTML = helpUrl;
+      });
+    }
+  });
+
+  const allMustFixIcons = document.getElementsByClassName('table-mustFix-icon');
+  for (let i = 0; i < allMustFixIcons.length; i++) {
+    const mustFixImg = document.createElement('img');
+    mustFixImg.alt = 'must fix icon';
+    mustFixImg.src = `data:image/svg+xml,%3Csvg width='25' height='25' viewBox='0 0 20 21' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M17.1429 0.102879H2.85714C1.27919 0.102879 0 1.38206 0 2.96002V17.2457C0 18.8237 1.27919 20.1029 2.85714 20.1029H17.1429C18.7208 20.1029 20 18.8237 20 17.2457V2.96002C20 1.38206 18.7208 0.102879 17.1429 0.102879Z' fill='%23f26949'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11.4294 10.101V5.81531C11.4294 5.02633 10.7898 4.38673 10.0008 4.38673C9.21186 4.38673 8.57227 5.02633 8.57227 5.81531V10.101C8.57227 10.89 9.21186 11.5296 10.0008 11.5296C10.7898 11.5296 11.4294 10.89 11.4294 10.101ZM10.0008 12.9582C9.21227 12.9582 8.57227 13.5982 8.57227 14.3867C8.57227 15.1753 9.21227 15.8153 10.0008 15.8153C10.7894 15.8153 11.4294 15.1753 11.4294 14.3867C11.4294 13.5982 10.7894 12.9582 10.0008 12.9582Z' fill='white'/%3E%3C/svg%3E%0A`;
+    allMustFixIcons[i].appendChild(mustFixImg);
+  }
+
+  const allGoodToFixIcons = document.getElementsByClassName('table-goodToFix-icon');
+  for (let i = 0; i < allGoodToFixIcons.length; i++) {
+    const goodToFixImg = document.createElement('img');
+    goodToFixImg.alt = 'good to fix icon';
+    goodToFixImg.src = `data:image/svg+xml,%3Csvg width='25' height='25' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M17.1429 0H2.85714C1.27919 0 0 1.27919 0 2.85714V17.1429C0 18.7208 1.27919 20 2.85714 20H17.1429C18.7208 20 20 18.7208 20 17.1429V2.85714C20 1.27919 18.7208 0 17.1429 0Z' fill='%23ffb200'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M10 6.5625C8.10131 6.5625 6.5625 8.10131 6.5625 10C6.5625 11.8987 8.10131 13.4375 10 13.4375C11.8987 13.4375 13.4375 11.8987 13.4375 10C13.4375 8.10131 11.8987 6.5625 10 6.5625ZM4.84375 10C4.84375 7.15207 7.15207 4.84375 10 4.84375C12.8479 4.84375 15.1562 7.15207 15.1562 10C15.1562 12.8479 12.8479 15.1562 10 15.1562C7.15207 15.1562 4.84375 12.8479 4.84375 10Z' fill='white'/%3E%3C/svg%3E%0A`;
+    allGoodToFixIcons[i].appendChild(goodToFixImg);
+  }
+
+  const allNeedsReviewIcons = document.getElementsByClassName('table-needsReview-icon');
+  for (let i = 0; i < allNeedsReviewIcons.length; i++) {
+    const needsReviewImg = document.createElement('img');
+    needsReviewImg.alt = 'needs review icon';
+    needsReviewImg.src = `data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M17.1429 0H2.85714C1.27919 0 0 1.27919 0 2.85714V17.1429C0 18.7208 1.27919 20 2.85714 20H17.1429C18.7208 20 20 18.7208 20 17.1429V2.85714C20 1.27919 18.7208 0 17.1429 0Z' fill='%23c9c8c6'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M8.09759 7.26594C8.23445 6.67496 8.46462 6.23328 8.7881 5.9409C9.14891 5.65474 9.57815 5.51166 10.0758 5.51166C10.5984 5.51166 11.0152 5.64852 11.3262 5.92224C11.6372 6.19596 11.7928 6.53188 11.7928 6.93002C11.7928 7.22862 11.7057 7.48367 11.5315 7.69518C11.4195 7.84448 11.0712 8.15552 10.4864 8.6283C9.90785 9.11353 9.51594 9.54277 9.31065 9.91602C9.12403 10.3079 9.03072 10.7745 9.03072 11.3157V11.7449L9.04938 11.8569C9.04938 11.9316 9.06026 12 9.08204 12.0622C9.10381 12.1244 9.12558 12.1742 9.14736 12.2115C9.16913 12.2488 9.20645 12.2815 9.25933 12.3095C9.31221 12.3375 9.35264 12.3593 9.38064 12.3748C9.40863 12.3904 9.45995 12.4012 9.5346 12.4075C9.60925 12.4137 9.66058 12.4168 9.68857 12.4168H9.85187H10.0012C10.2065 12.4168 10.3589 12.409 10.4584 12.3935C10.5579 12.3779 10.6466 12.3313 10.7243 12.2535C10.8021 12.1757 10.841 12.056 10.841 11.8942C10.841 11.6827 10.8534 11.465 10.8783 11.2411C10.897 11.0109 10.9343 10.8305 10.9903 10.6998C11.0712 10.5008 11.3324 10.2208 11.7741 9.86003C12.6077 9.15707 13.1427 8.61587 13.3791 8.23639C13.6279 7.83204 13.7523 7.41524 13.7523 6.986C13.7523 6.17729 13.4102 5.48678 12.7259 4.91446C12.0603 4.30482 11.1458 4 9.9825 4C8.88763 4 8.00428 4.2986 7.33243 4.8958C6.71656 5.41835 6.36198 6.07154 6.26866 6.85537C6.25622 6.89269 6.25 6.9549 6.25 7.04199C6.25 7.29705 6.3402 7.51633 6.52061 7.69984C6.70101 7.88336 6.91563 7.97512 7.16446 7.97512C7.37597 7.97512 7.56571 7.90824 7.73367 7.77449C7.90163 7.64075 8.0105 7.47123 8.06026 7.26594H8.09759ZM10.0012 13.2939C9.62791 13.2939 9.30754 13.4246 9.04005 13.6858C8.77255 13.9471 8.6388 14.2644 8.6388 14.6376C8.6388 15.0047 8.77255 15.3235 9.04005 15.5941C9.30754 15.8647 9.62791 16 10.0012 16C10.3744 16 10.6948 15.8647 10.9623 15.5941C11.2298 15.3235 11.3635 15.0047 11.3635 14.6376C11.3635 14.2644 11.2298 13.9471 10.9623 13.6858C10.6948 13.4246 10.3744 13.2939 10.0012 13.2939Z' fill='white'/%3E%3C/svg%3E%0A`;
+    allNeedsReviewIcons[i].appendChild(needsReviewImg);
+  }
+</script>

package/src/static/ejs/partials/scripts/utils.ejs

@@ -0,0 +1,441 @@
+<%# utility functions %>
+<script>
+  function createElementFromString(htmlString) {
+    const tempContainer = document.createElement('div');
+    tempContainer.innerHTML = htmlString.trim();
+    return tempContainer.firstChild;
+  }
+
+  const oobeeAiHtmlETL = <%- oobeeAi.htmlETL %>;
+  const oobeeAiRules = <%- JSON.stringify(oobeeAi.rules) %>;
+
+  // extract tagname and attribute name from html tag
+  // e.g. ["input", "type", "value", "role"] from <input type="text" value="..." role="..." />
+  const getHtmlTagAndAttributes = (htmlString) => {
+    const regex = /<(\w+)(\s+(\w+)(\s*=\s*"[^"]*")?)*\s*\/?>/;
+    const match = htmlString.match(regex); // check if structure of html tag is valid
+
+    if (match) {
+      const tagName = match[1];
+      const attributes = match[0]
+        .match(/\w+\s*=\s*"[^"]*"/g) // extract attributes e.g. ['type="text"', 'value="..."']
+        .map((attr) => attr.match(/(\w+)\s*=/)[1]); // get the name e.g. "type" from each
+      return [tagName, ...attributes];
+    }
+    return [];
+  };
+
+  const rulesUsingRoles = [
+    'aria-allowed-attr',
+    'aria-required-attr',
+    'aria-required-children',
+    'aria-required-parent',
+    'aria-roles',
+    'aria-allowed-role',
+  ];
+
+  const escapeHtmlForAI = html => {
+    return html
+      .replace(/&/g, '&amp;')
+      .replace(/</g, '&lt;')
+      .replace(/>/g, '&gt;')
+      .replace(/"/g, '&quot;')
+      .replace(/'/g, '&#039;');
+  };
+
+  // getLocalStorageUUID returns the local storage's uuid if exists if not generates one
+  // and returns the newly generated uuid
+  const getLocalStorageUUID = () => {
+    const storagePath = '<%= storagePath %>';
+    let uuid = localStorage.getItem(`${storagePath}-uuid`);
+    if (uuid) {
+      return uuid;
+    }
+
+    const generateUUID = () => {
+      return ([1e7] + -1e3 + -4e3 + -8e3 + -1e11).replace(/[018]/g, c =>
+        (c ^ (crypto.getRandomValues(new Uint8Array(1))[0] & (15 >> (c / 4)))).toString(16),
+      );
+    };
+    uuid = generateUUID();
+    localStorage.setItem(`${storagePath}-uuid`, uuid);
+
+    return uuid;
+  }
+
+  const formatFeedbackFormUrl = (uuid, websiteUrl, ruleId, basicHtml, usefulCount, notUsefulCount) => {
+    // AI Response Feedback Data Fields
+    const
+      formUrl = `https://docs.google.com/forms/d/e/1FAIpQLSdWbOHX9ggWlL7JUAz8s-Jmv-fjvM-R7dcFwqm1gTZ-sNcxHg/formResponse`,
+      uuidField = 'entry.1599149312',
+      websiteUrlField = 'entry.1146860880',
+      ruleIdField = 'entry.942691547',
+      basicHtmlField = 'entry.2085981400',
+      usefulCountField = 'entry.809957654',
+      notUsefulCountField = 'entry.89318735';
+
+    return `${formUrl}?${uuidField}=${uuid}&${websiteUrlField}=${websiteUrl}&${ruleIdField}=${ruleId}&${basicHtmlField}=${basicHtml}&${usefulCountField}=${usefulCount}&${notUsefulCountField}=${notUsefulCount}`;
+  }
+
+  const logAiResponseFeedback = (feedbackType, ruleId, buttonsDiv, basicHtml) => {
+    const isUseful = feedbackType === 'useful';
+    const websiteUrl = '<%= urlScanned %>';
+    const storagePath = '<%= storagePath %>';
+    const finalUrl = formatFeedbackFormUrl(getLocalStorageUUID(), websiteUrl, ruleId, escapeHtmlForAI(basicHtml), isUseful ? 1 : 0, isUseful ? 0 : 1);
+    try {
+      fetch(finalUrl, {
+        mode: 'no-cors'
+      });
+
+      // Store useful value in storage
+      let aiUsefulFeedbackLog = localStorage.getItem(storagePath);
+      if (aiUsefulFeedbackLog === null) {
+        aiUsefulFeedbackLog = {};
+      } else {
+        aiUsefulFeedbackLog = JSON.parse(aiUsefulFeedbackLog);
+      }
+      aiUsefulFeedbackLog[buttonsDiv] = isUseful ? 'useful' : 'notUseful';
+      localStorage.setItem(storagePath, JSON.stringify(aiUsefulFeedbackLog));
+    } catch (err) {
+      console.log('Error sending feedback to backend: ', err);
+    }
+
+    document
+      .getElementById(buttonsDiv)
+      .replaceChildren(
+        createElementFromString(
+          `<p class="aiFeedbackResponse">You rated this AI suggestion ${isUseful ? 'useful': 'not useful'}. <a class="undoAiFeedback" href="#" onclick="undoAiFeedback(\'${buttonsDiv}\', \'${ruleId}\', \'${escapeHtmlForAI(
+              basicHtml,
+            )}\')">Undo</a></p>`,
+        ),
+      );
+  };
+
+  const undoAiFeedback = (buttonDiv, ruleId, basicHtml) => {
+    const storagePath = '<%= storagePath %>';
+    const websiteUrl = '<%= urlScanned %>';
+    var aiUsefulFeedbackLog = JSON.parse(localStorage.getItem(storagePath)) || {};
+    const feedbackType = aiUsefulFeedbackLog[buttonDiv];
+    const isUseful = feedbackType === 'useful';
+    const finalUrl = formatFeedbackFormUrl(getLocalStorageUUID(), websiteUrl, ruleId, escapeHtmlForAI(basicHtml), isUseful ? -1 : 0, isUseful ? 0 : -1);
+    try {
+      fetch(finalUrl, {
+        mode: 'no-cors'
+      });
+
+      // Remove useful value in storage
+      delete aiUsefulFeedbackLog[buttonDiv];
+      localStorage.setItem(storagePath, JSON.stringify(aiUsefulFeedbackLog));
+    } catch (err) {
+      console.log('Error undoing AI feedback: ', err);
+    }
+
+    document.getElementById(buttonDiv)
+      .innerHTML = `<button class="aiFeedbackButton" onClick="logAiResponseFeedback('useful', '${ruleId}', '${buttonDiv}', '${basicHtml}')">
+          <svg
+            width="16"
+            height="16"
+            viewBox="0 0 16 16"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M8.48027 2.03518C7.7505 1.85274 7.07264 2.40464 7.02379 3.11914C6.96883 3.92143 6.84821 4.65807 6.69707 5.09623C6.60165 5.37104 6.33142 5.86951 5.90318 6.34737C5.47799 6.82294 4.92456 7.2466 4.27647 7.4237C3.7635 7.56339 3.2406 8.00767 3.2406 8.65652V11.7107C3.2406 12.3557 3.76121 12.8283 4.34594 12.8901C5.16273 12.9771 5.53982 13.2069 5.92456 13.442L5.9612 13.4649C6.16883 13.5908 6.40242 13.7305 6.70165 13.8344C7.0047 13.9382 7.3589 14 7.82073 14H10.4925C11.2077 14 11.7131 13.6359 11.9688 13.1878C12.0924 12.9763 12.1592 12.7365 12.1627 12.4916C12.1627 12.3756 12.1451 12.2534 12.1039 12.1374C12.2573 11.9367 12.394 11.6962 12.4764 11.4496C12.5604 11.1977 12.6077 10.868 12.4795 10.5725C12.5322 10.4733 12.5711 10.3672 12.6009 10.2649C12.6596 10.0588 12.6871 9.83132 12.6871 9.61071C12.6871 9.39086 12.6596 9.16415 12.6009 8.95728C12.5742 8.86218 12.5389 8.76969 12.4955 8.68094C12.6292 8.49077 12.7152 8.27126 12.7463 8.0409C12.7773 7.81054 12.7526 7.57609 12.6741 7.35729C12.5169 6.90538 12.1535 6.5176 11.7581 6.3863C11.1116 6.17103 10.3818 6.17561 9.83751 6.22523C9.72452 6.2354 9.61177 6.24813 9.49935 6.2634C9.76416 5.12935 9.74791 3.94777 9.45202 2.82143C9.40054 2.64097 9.30179 2.47753 9.16597 2.34802C9.03016 2.21852 8.86221 2.12764 8.6795 2.0848L8.48027 2.03518ZM10.4925 13.2374H7.82073C7.43142 13.2374 7.16195 13.1847 6.9505 13.1122C6.736 13.0382 6.56425 12.9382 6.35814 12.8122L6.32761 12.7939C5.90395 12.5351 5.41311 12.2359 4.42685 12.1313C4.17266 12.1038 4.00396 11.9099 4.00396 11.7115V8.65652C4.00396 8.46263 4.17647 8.24202 4.47724 8.16034C5.31311 7.93133 5.98639 7.40004 6.47264 6.85653C6.95737 6.31455 7.28485 5.73058 7.41768 5.34661C7.60317 4.81226 7.72836 3.997 7.78561 3.17105C7.8047 2.89472 8.06042 2.71762 8.29477 2.77563L8.49477 2.82601C8.61691 2.85655 8.69172 2.93517 8.71462 3.02067C9.02636 4.20847 8.98792 5.46108 8.60393 6.62752C8.5822 6.6924 8.5783 6.76192 8.59265 6.82882C8.607 6.89572 8.63907 6.95753 8.6855 7.00778C8.73193 7.05803 8.79101 7.09488 8.85657 7.11447C8.92212 7.13406 8.99174 7.13566 9.05813 7.11912L9.06042 7.11836L9.0711 7.11607L9.11538 7.10538C9.37641 7.04995 9.64048 7.00993 9.90621 6.98553C10.4123 6.93973 11.0184 6.94431 11.5169 7.11072C11.6505 7.155 11.8604 7.33973 11.952 7.6069C12.0337 7.84202 12.0184 8.11835 11.749 8.38705L11.4795 8.65652L11.749 8.92675C11.7818 8.95957 11.8291 9.03438 11.8665 9.1672C11.9032 9.29468 11.9238 9.44964 11.9238 9.61071C11.9238 9.77254 11.9032 9.92674 11.8665 10.055C11.8283 10.1878 11.7818 10.2626 11.749 10.2954L11.4795 10.5649L11.749 10.8351C11.7848 10.871 11.8322 10.9702 11.7528 11.2076C11.67 11.4379 11.5385 11.6475 11.3673 11.8221L11.0978 12.0916L11.3673 12.3618C11.3719 12.3657 11.3986 12.4 11.3986 12.4916C11.3952 12.6036 11.3634 12.7129 11.3062 12.8092C11.1803 13.029 10.9222 13.2366 10.4925 13.2366V13.2374Z"
+              fill="#9021a6"
+            />
+          </svg>
+          Useful</button
+        >    <button class="aiFeedbackButton" style="margin-left:16px" onClick="logAiResponseFeedback('notUseful', '${ruleId}', '${buttonDiv}', '${basicHtml}')">
+          <svg
+            width="16"
+            height="16"
+            viewBox="0 0 16 16"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M8.48066 13.9646C7.7509 14.1478 7.07382 13.5951 7.0242 12.8807C6.96924 12.0791 6.84864 11.3425 6.69749 10.9036C6.60208 10.6288 6.33185 10.1311 5.90362 9.65325C5.47844 9.17693 4.92502 8.75327 4.27694 8.57694C3.76398 8.43648 3.24109 7.99222 3.24109 7.34338V4.29002C3.24109 3.645 3.76169 3.17249 4.34641 3.1099C5.16318 3.02364 5.54027 2.79311 5.92499 2.558L5.96163 2.53586C6.16926 2.40915 6.40284 2.26946 6.70207 2.16641C7.00512 2.06107 7.35931 2 7.82113 2H10.4928C11.2081 2 11.7134 2.36488 11.9691 2.81219C12.0943 3.03127 12.163 3.27554 12.163 3.50912C12.163 3.62515 12.1455 3.74729 12.1042 3.86331C12.2577 4.06331 12.3943 4.30376 12.4767 4.55032C12.5607 4.80222 12.608 5.13199 12.4798 5.42816C12.5325 5.5274 12.5714 5.63274 12.6012 5.73579C12.6599 5.94189 12.6874 6.1686 12.6874 6.38921C12.6874 6.60981 12.6599 6.83652 12.6012 7.04263C12.5745 7.13423 12.5401 7.22888 12.4958 7.31972C12.7966 7.75559 12.8149 8.23573 12.6744 8.64259C12.5172 9.09448 12.1539 9.48226 11.7584 9.61356C11.1119 9.82958 10.3821 9.82424 9.83788 9.77462C9.72488 9.76444 9.61214 9.75172 9.49972 9.73645C9.76468 10.8707 9.74843 12.0526 9.45239 13.1791C9.34705 13.5669 9.03255 13.8264 8.67989 13.915L8.48066 13.9646ZM10.4928 2.76334H7.82113C7.43183 2.76334 7.16237 2.81525 6.95092 2.88776C6.73642 2.96181 6.56467 3.06257 6.35857 3.18776L6.32804 3.20684C5.90438 3.46485 5.41356 3.76408 4.42732 3.86942C4.17313 3.89614 4.00443 4.09079 4.00443 4.28926V7.34338C4.00443 7.53803 4.17694 7.75788 4.4777 7.83955C5.31356 8.06856 5.98682 8.6006 6.47307 9.1441C6.95779 9.68607 7.28527 10.27 7.41809 10.6532C7.60358 11.1876 7.72877 12.0028 7.78602 12.8287C7.8051 13.1051 8.06082 13.2829 8.29517 13.2242L8.49516 13.1745C8.6173 13.144 8.6921 13.0646 8.715 12.9799C9.02689 11.7919 8.98845 10.539 8.60432 9.37234C8.58276 9.30751 8.57901 9.23808 8.59344 9.17131C8.60787 9.10453 8.63996 9.04285 8.68636 8.9927C8.73276 8.94256 8.79177 8.90579 8.85723 8.88623C8.92269 8.86667 8.9922 8.86504 9.05851 8.88151H9.0608L9.07148 8.88457L9.11576 8.89449C9.37678 8.94991 9.64085 8.98993 9.90658 9.01433C10.4127 9.06013 11.0188 9.05555 11.5172 8.88991C11.6508 8.84487 11.8607 8.66014 11.9523 8.39297C12.034 8.15787 12.0187 7.88154 11.7493 7.6136L11.4798 7.34338L11.7493 7.07316C11.7821 7.0411 11.8294 6.96629 11.8668 6.83271C11.9035 6.70523 11.9241 6.55027 11.9241 6.38921C11.9241 6.22814 11.9035 6.07318 11.8668 5.94571C11.8287 5.81288 11.7821 5.73731 11.7493 5.70525L11.4798 5.43503L11.7493 5.16481C11.7852 5.12893 11.8325 5.03046 11.7531 4.7923C11.6703 4.56236 11.5388 4.35302 11.3676 4.17857L11.0982 3.90835L11.3676 3.63813C11.3722 3.63431 11.3989 3.59996 11.3989 3.50836C11.3954 3.39665 11.3636 3.28766 11.3065 3.19157C11.1798 2.97097 10.9226 2.76334 10.4928 2.76334Z"
+              fill="#9021a6"
+            />
+          </svg>
+          Not useful
+        </button>`;
+  };
+
+  const memoizeApiCall = () => {
+    // cache
+    let ongoingPromise = {};
+    let catalogCache = {};
+    let requestedDateTime = {};
+
+    return async (apiUrl) => {
+      const key = JSON.stringify(apiUrl);
+      const currDateTime = new Date();
+      const diffInMinutes = (currDateTime - (requestedDateTime[key] || 0)) / (1000 * 60);
+
+      // do not refresh api call if previous call made <= 10mins ago
+      if (requestedDateTime[key] && diffInMinutes <= 10) {
+        // check if the api request has already been made
+        if (ongoingPromise[key]) {
+          return ongoingPromise[key];
+        }
+
+        // check if the data is already in the cache
+        if (catalogCache[key]) {
+          return Promise.resolve(catalogCache[key]);
+        }
+      }
+
+      requestedDateTime[key] = currDateTime;
+      // if not in the cache, make the API call and store the result
+      const apiPromise = fetch(apiUrl)
+        .then((response) => {
+          if (!response.ok) {
+            throw new Error('response status not ok');
+          }
+
+          return response.json()
+        })
+        .then((data) => {
+          catalogCache[key] = data; // store the result in the cache
+          delete ongoingPromise[key]; // remove the ongoing promise
+
+          return data;
+        })
+        .catch((error) => {
+          delete ongoingPromise[key]; // remove the promise from the queue in case of an error
+          throw new Error('Network Error');
+        });
+
+      // add the promise to the queue
+      ongoingPromise[key] = apiPromise;
+
+      return apiPromise;
+    }
+  };
+
+  const api = memoizeApiCall();
+
+  const apiUrls = {
+    catalog: 'https://govtechsg.github.io/purple-ai/catalog.json',
+    getRuleIdData: (ruleId) => `https://govtechsg.github.io/purple-ai/results/${ruleId}.json`
+  }
+
+  const isOffline = () => !window.navigator.onLine;
+
+  const checkPurpleAiQueryLabel = async (ruleId, ruleHtml) => {
+    const oobeeAiQueryLabel = {
+      label: null,
+      hasNetworkError: false,
+      hasGenericError: false
+    }
+
+    return api(apiUrls.catalog).then(catalogData => {
+        // no information for current rule
+        if (!catalogData[ruleId] || catalogData[ruleId].length === 0) {
+          return oobeeAiQueryLabel;
+        }
+
+        if (rulesUsingRoles.includes(ruleId)) {
+          const ariaValidAttrValueHtml = ruleHtml.replace(/<|>/g, '');
+          const ariaValidAttrValueHtmlList = ariaValidAttrValueHtml.split(' ');
+          const htmlElement = ariaValidAttrValueHtmlList[0];
+          const roleForHtml = ariaValidAttrValueHtmlList.find(item => /^role="\w+"/.test(item));
+          if (roleForHtml) {
+            const currentLabel = `${htmlElement}_${roleForHtml}`.trim();
+            const foundLabel = catalogData[ruleId].find(label => label === currentLabel);
+            oobeeAiQueryLabel.label = foundLabel ? escapeHtmlForAI(currentLabel) : null;
+            return oobeeAiQueryLabel;
+          }
+        }
+
+        // e.g. li_aria-controls_aria-selected_role
+        const currentLabelList = getHtmlTagAndAttributes(oobeeAiHtmlETL(ruleHtml));
+        const currentLabel = currentLabelList.join('_');
+
+        if (catalogData[ruleId].includes(currentLabel)) {
+          oobeeAiQueryLabel.label = escapeHtmlForAI(currentLabel);
+          return oobeeAiQueryLabel;
+        }
+
+        // count the number of elements in keyArr that
+        // have matching elements at the same index in currentLabelList
+        // return match if >= 3 elements matching
+        const currentLabelSet = new Set(currentLabelList);
+        const foundLabel = catalogData[ruleId].find(label => {
+          const keyArr = label.split('_');
+          const attrMatch = keyArr.filter(key => currentLabelSet.has(key));
+
+          return attrMatch.length >= 3;
+        })
+
+        oobeeAiQueryLabel.label = foundLabel ? escapeHtmlForAI(foundLabel) : null;
+        return oobeeAiQueryLabel;
+      })
+      .catch(err => {
+        console.error(`An error has occurred while checking if ${ruleId} needs AI query`);
+        if (err.message === 'Network Error') {
+          return {
+            label: null,
+            hasNetworkError: true,
+            hasGenericError: false
+          }
+        } else {
+          return {
+            label: null,
+            hasNetworkError: false,
+            hasGenericError: true
+          }
+        }
+      });
+  }
+
+  const handleOfflinePurpleAi = async (ruleId, accordionDiv, html, buttonsDiv, aiErrorDiv) => {
+    let oobeeAiQueryLabel = await checkPurpleAiQueryLabel(ruleId, html);
+    if (oobeeAiQueryLabel.hasNetworkError) {
+      document
+        .getElementById(aiErrorDiv)
+        .replaceChildren(
+          createElementFromString(
+            `<div class="generateAiError">This feature requires internet connection. Please try again</div>`,
+          ),
+        );
+    } else if (oobeeAiQueryLabel.hasNetworkError) {
+      document
+        .getElementById(aiErrorDiv)
+        .replaceChildren(
+          createElementFromString(
+            `<div class="generateAiError">Something went wrong. Please try again</div>`,
+          ),
+        );
+    } else if (!oobeeAiQueryLabel.label) {
+      document.getElementById(accordionDiv).innerHTML = `<span class="processAI">Processing AI suggestions, please check back later.</span>`
+    } else {
+      await getPurpleAiAnswer(ruleId, accordionDiv, oobeeAiQueryLabel.label, buttonsDiv, aiErrorDiv);
+    }
+  }
+
+  const getPurpleAiAnswer = async (ruleId, accordionDiv, ruleHtmlLabel, buttonsDiv, aiErrorDiv, html) => {
+    const storagePath = '<%= storagePath %>';
+    document.getElementById(buttonsDiv).disabled = true;
+    document.getElementById(buttonsDiv).textContent = 'Generating...';
+
+    api(apiUrls.getRuleIdData(ruleId))
+      .then(ruleIdData => {
+        const escapedHtml = escapeHtmlForAI(ruleIdData[ruleHtmlLabel]);
+        const replacedString = escapedHtml.replaceAll(
+          /```(?:html)?([\s\S]*?)```/g,
+          `<code class="codeForAiResponse language-html hljs">$1</code>`,
+        );
+        const replacedRuleHtmlLabel = escapeHtmlForAI(ruleHtmlLabel);
+        document.getElementById(accordionDiv).innerHTML = `
+        <div class="ai-response-card">
+          <p class="mb-0">
+            ${replacedString.replace(/\n/g, '<br />')}
+          </p>
+        </div>`
+
+        if (!isOffline()) {
+          const aiVoteFeedback = JSON.parse(localStorage.getItem(storagePath));
+          if (aiVoteFeedback && aiVoteFeedback[buttonsDiv]) {
+            var voteString = aiVoteFeedback[buttonsDiv] === 'useful' ?
+              `You rated this AI suggestion useful. ` :
+              `You rated this AI suggestion not useful. `;
+            const votedElem = createElementFromString(`
+              <div id=${buttonsDiv} style="display: flex;justify-content: flex-end;margin-top: 16px;">
+                <p class="aiFeedbackResponse">${voteString}<a class="undoAiFeedback" href="#" onclick="undoAiFeedback(\'${buttonsDiv}\', \'${ruleId}\', \'${escapeHtmlForAI(
+                        ruleHtmlLabel,
+                      )}\')">Undo</a>
+                </p>
+              </div>
+            `)
+            document.getElementById(accordionDiv).getElementsByClassName('ai-response-card')[0].appendChild(votedElem);
+          } else {
+            const feedbackButtonsElem = createElementFromString(  `
+              <div id=${buttonsDiv} class="feedbackButtons">
+                <button class="aiFeedbackButton" onClick="logAiResponseFeedback('useful', '${ruleId}', '${buttonsDiv}', '${replacedRuleHtmlLabel}')">
+                  <svg
+                    width="16"
+                    height="16"
+                    viewBox="0 0 16 16"
+                    fill="none"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M8.48027 2.03518C7.7505 1.85274 7.07264 2.40464 7.02379 3.11914C6.96883 3.92143 6.84821 4.65807 6.69707 5.09623C6.60165 5.37104 6.33142 5.86951 5.90318 6.34737C5.47799 6.82294 4.92456 7.2466 4.27647 7.4237C3.7635 7.56339 3.2406 8.00767 3.2406 8.65652V11.7107C3.2406 12.3557 3.76121 12.8283 4.34594 12.8901C5.16273 12.9771 5.53982 13.2069 5.92456 13.442L5.9612 13.4649C6.16883 13.5908 6.40242 13.7305 6.70165 13.8344C7.0047 13.9382 7.3589 14 7.82073 14H10.4925C11.2077 14 11.7131 13.6359 11.9688 13.1878C12.0924 12.9763 12.1592 12.7365 12.1627 12.4916C12.1627 12.3756 12.1451 12.2534 12.1039 12.1374C12.2573 11.9367 12.394 11.6962 12.4764 11.4496C12.5604 11.1977 12.6077 10.868 12.4795 10.5725C12.5322 10.4733 12.5711 10.3672 12.6009 10.2649C12.6596 10.0588 12.6871 9.83132 12.6871 9.61071C12.6871 9.39086 12.6596 9.16415 12.6009 8.95728C12.5742 8.86218 12.5389 8.76969 12.4955 8.68094C12.6292 8.49077 12.7152 8.27126 12.7463 8.0409C12.7773 7.81054 12.7526 7.57609 12.6741 7.35729C12.5169 6.90538 12.1535 6.5176 11.7581 6.3863C11.1116 6.17103 10.3818 6.17561 9.83751 6.22523C9.72452 6.2354 9.61177 6.24813 9.49935 6.2634C9.76416 5.12935 9.74791 3.94777 9.45202 2.82143C9.40054 2.64097 9.30179 2.47753 9.16597 2.34802C9.03016 2.21852 8.86221 2.12764 8.6795 2.0848L8.48027 2.03518ZM10.4925 13.2374H7.82073C7.43142 13.2374 7.16195 13.1847 6.9505 13.1122C6.736 13.0382 6.56425 12.9382 6.35814 12.8122L6.32761 12.7939C5.90395 12.5351 5.41311 12.2359 4.42685 12.1313C4.17266 12.1038 4.00396 11.9099 4.00396 11.7115V8.65652C4.00396 8.46263 4.17647 8.24202 4.47724 8.16034C5.31311 7.93133 5.98639 7.40004 6.47264 6.85653C6.95737 6.31455 7.28485 5.73058 7.41768 5.34661C7.60317 4.81226 7.72836 3.997 7.78561 3.17105C7.8047 2.89472 8.06042 2.71762 8.29477 2.77563L8.49477 2.82601C8.61691 2.85655 8.69172 2.93517 8.71462 3.02067C9.02636 4.20847 8.98792 5.46108 8.60393 6.62752C8.5822 6.6924 8.5783 6.76192 8.59265 6.82882C8.607 6.89572 8.63907 6.95753 8.6855 7.00778C8.73193 7.05803 8.79101 7.09488 8.85657 7.11447C8.92212 7.13406 8.99174 7.13566 9.05813 7.11912L9.06042 7.11836L9.0711 7.11607L9.11538 7.10538C9.37641 7.04995 9.64048 7.00993 9.90621 6.98553C10.4123 6.93973 11.0184 6.94431 11.5169 7.11072C11.6505 7.155 11.8604 7.33973 11.952 7.6069C12.0337 7.84202 12.0184 8.11835 11.749 8.38705L11.4795 8.65652L11.749 8.92675C11.7818 8.95957 11.8291 9.03438 11.8665 9.1672C11.9032 9.29468 11.9238 9.44964 11.9238 9.61071C11.9238 9.77254 11.9032 9.92674 11.8665 10.055C11.8283 10.1878 11.7818 10.2626 11.749 10.2954L11.4795 10.5649L11.749 10.8351C11.7848 10.871 11.8322 10.9702 11.7528 11.2076C11.67 11.4379 11.5385 11.6475 11.3673 11.8221L11.0978 12.0916L11.3673 12.3618C11.3719 12.3657 11.3986 12.4 11.3986 12.4916C11.3952 12.6036 11.3634 12.7129 11.3062 12.8092C11.1803 13.029 10.9222 13.2366 10.4925 13.2366V13.2374Z"
+                      fill="#9021a6"
+                    />
+                  </svg>
+                  Useful
+                </button>
+                <button class="aiFeedbackButton" style="margin-left:16px" onClick="logAiResponseFeedback('notUseful', '${ruleId}', '${buttonsDiv}', '${replacedRuleHtmlLabel}')">
+                  <svg
+                    width="16"
+                    height="16"
+                    viewBox="0 0 16 16"
+                    fill="none"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M8.48066 13.9646C7.7509 14.1478 7.07382 13.5951 7.0242 12.8807C6.96924 12.0791 6.84864 11.3425 6.69749 10.9036C6.60208 10.6288 6.33185 10.1311 5.90362 9.65325C5.47844 9.17693 4.92502 8.75327 4.27694 8.57694C3.76398 8.43648 3.24109 7.99222 3.24109 7.34338V4.29002C3.24109 3.645 3.76169 3.17249 4.34641 3.1099C5.16318 3.02364 5.54027 2.79311 5.92499 2.558L5.96163 2.53586C6.16926 2.40915 6.40284 2.26946 6.70207 2.16641C7.00512 2.06107 7.35931 2 7.82113 2H10.4928C11.2081 2 11.7134 2.36488 11.9691 2.81219C12.0943 3.03127 12.163 3.27554 12.163 3.50912C12.163 3.62515 12.1455 3.74729 12.1042 3.86331C12.2577 4.06331 12.3943 4.30376 12.4767 4.55032C12.5607 4.80222 12.608 5.13199 12.4798 5.42816C12.5325 5.5274 12.5714 5.63274 12.6012 5.73579C12.6599 5.94189 12.6874 6.1686 12.6874 6.38921C12.6874 6.60981 12.6599 6.83652 12.6012 7.04263C12.5745 7.13423 12.5401 7.22888 12.4958 7.31972C12.7966 7.75559 12.8149 8.23573 12.6744 8.64259C12.5172 9.09448 12.1539 9.48226 11.7584 9.61356C11.1119 9.82958 10.3821 9.82424 9.83788 9.77462C9.72488 9.76444 9.61214 9.75172 9.49972 9.73645C9.76468 10.8707 9.74843 12.0526 9.45239 13.1791C9.34705 13.5669 9.03255 13.8264 8.67989 13.915L8.48066 13.9646ZM10.4928 2.76334H7.82113C7.43183 2.76334 7.16237 2.81525 6.95092 2.88776C6.73642 2.96181 6.56467 3.06257 6.35857 3.18776L6.32804 3.20684C5.90438 3.46485 5.41356 3.76408 4.42732 3.86942C4.17313 3.89614 4.00443 4.09079 4.00443 4.28926V7.34338C4.00443 7.53803 4.17694 7.75788 4.4777 7.83955C5.31356 8.06856 5.98682 8.6006 6.47307 9.1441C6.95779 9.68607 7.28527 10.27 7.41809 10.6532C7.60358 11.1876 7.72877 12.0028 7.78602 12.8287C7.8051 13.1051 8.06082 13.2829 8.29517 13.2242L8.49516 13.1745C8.6173 13.144 8.6921 13.0646 8.715 12.9799C9.02689 11.7919 8.98845 10.539 8.60432 9.37234C8.58276 9.30751 8.57901 9.23808 8.59344 9.17131C8.60787 9.10453 8.63996 9.04285 8.68636 8.9927C8.73276 8.94256 8.79177 8.90579 8.85723 8.88623C8.92269 8.86667 8.9922 8.86504 9.05851 8.88151H9.0608L9.07148 8.88457L9.11576 8.89449C9.37678 8.94991 9.64085 8.98993 9.90658 9.01433C10.4127 9.06013 11.0188 9.05555 11.5172 8.88991C11.6508 8.84487 11.8607 8.66014 11.9523 8.39297C12.034 8.15787 12.0187 7.88154 11.7493 7.6136L11.4798 7.34338L11.7493 7.07316C11.7821 7.0411 11.8294 6.96629 11.8668 6.83271C11.9035 6.70523 11.9241 6.55027 11.9241 6.38921C11.9241 6.22814 11.9035 6.07318 11.8668 5.94571C11.8287 5.81288 11.7821 5.73731 11.7493 5.70525L11.4798 5.43503L11.7493 5.16481C11.7852 5.12893 11.8325 5.03046 11.7531 4.7923C11.6703 4.56236 11.5388 4.35302 11.3676 4.17857L11.0982 3.90835L11.3676 3.63813C11.3722 3.63431 11.3989 3.59996 11.3989 3.50836C11.3954 3.39665 11.3636 3.28766 11.3065 3.19157C11.1798 2.97097 10.9226 2.76334 10.4928 2.76334Z"
+                      fill="#9021a6"
+                    />
+                  </svg>
+                  Not useful
+                </button>
+              </div>
+            `);
+            document.getElementById(accordionDiv).getElementsByClassName('ai-response-card')[0].appendChild(feedbackButtonsElem);
+          }
+        }
+
+        document.querySelectorAll('.codeForAiResponse').forEach(el => {
+          hljs.highlightElement(el);
+        });
+      }).catch((err) => {
+        console.log('Error fetching AI response', err);
+        document.getElementById(buttonsDiv).disabled = false;
+        document.getElementById(buttonsDiv).style = `border: 1px solid #6E52EF;color: #6E52EF;`;
+        document.getElementById(buttonsDiv).textContent = 'Generate response';
+        const errorMessageToDisplay = err.message === 'Network Error'
+          ? 'This feature requires internet connection. Please try again'
+          : 'Something went wrong. Please try again.'
+        document
+          .getElementById(aiErrorDiv)
+          .replaceChildren(
+            createElementFromString(
+              `<div class="generateAiError">${errorMessageToDisplay}</div>`,
+            ),
+          );
+      });
+  }
+
+  function getFormattedCategoryTitle(category) {
+    const titles = {
+      mustFix: 'Must Fix',
+      goodToFix: 'Good to Fix',
+      needsReview: 'Needs Review',
+      passed: 'Passed',
+    };
+
+    return titles[category];
+  }
+
+  function escapeHtmlStringForArg(string) {
+    return htmlEscapeString(string)
+      .replaceAll('&#039;', "\\'")
+      .replace(/&gt;\s+(.*?)\s+&lt;\//g, '&gt;$1&lt;/');
+  }
+
+  function htmlEscapeString(string) {
+    if (string.includes('&lt;/script>')) {
+      string = string.replaceAll('&lt;/script>', '<\/script>')
+    }
+    return string
+      .replace(/&/g, '&amp;')
+      .replace(/</g, '&lt;')
+      .replace(/>/g, '&gt;')
+      .replace(/"/g, '&quot;')
+      .replace(/'/g, '&#039;');
+  }
+</script>