fix link

src/components/Chat/MessageDisplay.tsx

@@ -1,10 +1,11 @@
-import React, { useEffect } from 'react';
+import React, { useEffect } from "react";
-import DOMPurify from 'dompurify';
+import DOMPurify from "dompurify";
-import './styles.css';
+import "./styles.css";
-import { executeEvent } from '../../utils/events';
+import { executeEvent } from "../../utils/events";
 
 const extractComponents = (url) => {
-  if (!url || !url.startsWith("qortal://")) { // Check if url exists and starts with "qortal://"
+  if (!url || !url.startsWith("qortal://")) {
+    // Check if url exists and starts with "qortal://"
     return null;
   }
 
@@ -31,13 +32,13 @@ function processText(input) {
       if (parts.length > 0) {
         const fragment = document.createDocumentFragment();
         parts.forEach((part) => {
-          if (part.startsWith('qortal://')) {
+          if (part.startsWith("qortal://")) {
-            const link = document.createElement('span');
+            const link = document.createElement("span");
-            link.setAttribute('data-url', part);
+            link.setAttribute("data-url", part);
             link.textContent = part;
-            link.style.color = 'var(--code-block-text-color)';
+            link.style.color = "var(--code-block-text-color)";
-            link.style.textDecoration = 'underline';
+            link.style.textDecoration = "underline";
-            link.style.cursor = 'pointer';
+            link.style.cursor = "pointer";
             fragment.appendChild(link);
           } else {
             fragment.appendChild(document.createTextNode(part));
@@ -50,7 +51,7 @@ function processText(input) {
     }
   }
 
-  const wrapper = document.createElement('div');
+  const wrapper = document.createElement("div");
   wrapper.innerHTML = input;
   processNode(wrapper);
   return wrapper.innerHTML;
@@ -63,20 +64,64 @@ export const MessageDisplay = ({ htmlContent, isReply }) => {
     let textFormatted = text;
     const urlPattern = /(\bhttps?:\/\/[^\s<]+|\bwww\.[^\s<]+)/g;
     textFormatted = text.replace(urlPattern, (url) => {
-      const href = url.startsWith('http') ? url : `https://${url}`;
+      const href = url.startsWith("http") ? url : `https://${url}`;
-      return `<a href="${DOMPurify.sanitize(href)}" class="auto-link">${DOMPurify.sanitize(url)}</a>`;
+      return `<a href="${DOMPurify.sanitize(
+        href
+      )}" class="auto-link">${DOMPurify.sanitize(url)}</a>`;
     });
     return processText(textFormatted);
   };
 
   const sanitizedContent = DOMPurify.sanitize(linkify(htmlContent), {
     ALLOWED_TAGS: [
-      'a', 'b', 'i', 'em', 'strong', 'p', 'br', 'div', 'span', 'img', 
+      "a",
-      'ul', 'ol', 'li', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'blockquote', 'code', 'pre', 'table', 'thead', 'tbody', 'tr', 'th', 'td'
+      "b",
+      "i",
+      "em",
+      "strong",
+      "p",
+      "br",
+      "div",
+      "span",
+      "img",
+      "ul",
+      "ol",
+      "li",
+      "h1",
+      "h2",
+      "h3",
+      "h4",
+      "h5",
+      "h6",
+      "blockquote",
+      "code",
+      "pre",
+      "table",
+      "thead",
+      "tbody",
+      "tr",
+      "th",
+      "td",
     ],
     ALLOWED_ATTR: [
-      'href', 'target', 'rel', 'class', 'src', 'alt', 'title', 
+      "href",
-      'width', 'height', 'style', 'align', 'valign', 'colspan', 'rowspan', 'border', 'cellpadding', 'cellspacing', 'data-url'
+      "target",
+      "rel",
+      "class",
+      "src",
+      "alt",
+      "title",
+      "width",
+      "height",
+      "style",
+      "align",
+      "valign",
+      "colspan",
+      "rowspan",
+      "border",
+      "cellpadding",
+      "cellspacing",
+      "data-url",
     ],
   });
 
@@ -84,24 +129,31 @@ export const MessageDisplay = ({ htmlContent, isReply }) => {
     e.preventDefault();
 
     const target = e.target;
-    if (target.tagName === 'A') {
+    if (target.tagName === "A") {
-      const href = target.getAttribute('href');
+      const href = target.getAttribute("href");
-      window.electronAPI.openExternal(href);
+      if (chrome && chrome.tabs) {
-    } else if (target.getAttribute('data-url')) {
+        chrome.tabs.create({ url: href }, (tab) => {
-      const url = target.getAttribute('data-url');
+          if (chrome.runtime.lastError) {
+            console.error("Error opening tab:", chrome.runtime.lastError);
+          } else {
+            console.log("Tab opened successfully:", tab);
+          }
+        });
+      }
+    } else if (target.getAttribute("data-url")) {
+      const url = target.getAttribute("data-url");
       const res = extractComponents(url);
       if (res) {
         const { service, name, identifier, path } = res;
         executeEvent("addTab", { data: { service, name, identifier, path } });
-        executeEvent("open-apps-mode", { });
+        executeEvent("open-apps-mode", {});
-
       }
     }
   };
 
   return (
     <div
-      className={`tiptap ${isReply ? 'isReply' : ''}`}
+      className={`tiptap ${isReply ? "isReply" : ""}`}
       dangerouslySetInnerHTML={{ __html: sanitizedContent }}
       onClick={handleClick}
     />