From 7ac75159e141987eba87fc4b47f2b4a896a9ede6 Mon Sep 17 00:00:00 2001
From: medchedli <medchedliby@gmail.com>
Date: Wed, 28 May 2025 19:32:36 +0100
Subject: [PATCH] feat: add url auto-linking for chat messages in the inbox
 page

---
 frontend/package.json                         |  7 +++---
 .../components/inbox/helpers/mapMessages.tsx  | 23 ++++++++++++++++++-
 frontend/src/components/inbox/inbox.css       | 11 +++++++++
 3 files changed, 37 insertions(+), 4 deletions(-)

diff --git a/frontend/package.json b/frontend/package.json
index d09f6b13..3f72d1cd 100755
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -28,6 +28,7 @@
     "@mui/x-data-grid": "^7.3.2",
     "@projectstorm/react-canvas-core": "^7.0.3",
     "@projectstorm/react-diagrams": "^7.0.4",
+    "autolinker": "^4.1.5",
     "axios": "^1.7.7",
     "eazychart-css": "^0.2.1-alpha.0",
     "eazychart-react": "^0.8.0-alpha.0",
@@ -38,17 +39,17 @@
     "normalizr": "^3.6.2",
     "notistack": "^3.0.1",
     "qs": "^6.12.1",
+    "random-seed": "^0.3.0",
     "react": "^18",
     "react-dom": "^18",
     "react-hook-form": "^7.51.5",
     "react-i18next": "^14.1.1",
     "react-query": "^3.39.3",
-    "socket.io-client": "^4.7.5",
-    "random-seed": "^0.3.0"
+    "socket.io-client": "^4.7.5"
   },
   "devDependencies": {
-    "@types/qs": "^6.9.15",
     "@types/node": "20.12.12",
+    "@types/qs": "^6.9.15",
     "@types/random-seed": "^0.3.5",
     "@types/react": "18.3.2",
     "@types/react-dom": "^18",
diff --git a/frontend/src/components/inbox/helpers/mapMessages.tsx b/frontend/src/components/inbox/helpers/mapMessages.tsx
index 165d52ab..adb39dcf 100644
--- a/frontend/src/components/inbox/helpers/mapMessages.tsx
+++ b/frontend/src/components/inbox/helpers/mapMessages.tsx
@@ -10,6 +10,7 @@ import { Message, MessageModel } from "@chatscope/chat-ui-kit-react";
 import MenuRoundedIcon from "@mui/icons-material/MenuRounded";
 import ReplyIcon from "@mui/icons-material/Reply";
 import { Chip, Grid } from "@mui/material";
+import Autolinker from "autolinker";
 import { ReactNode } from "react";
 
 import { ROUTES } from "@/services/api.class";
@@ -60,6 +61,24 @@ export function isSubsequent(
   );
 }
 
+/**
+ * @description Detects URLs in text and converts them to clickable links using Autolinker
+ */
+function formatMessageText(text: string): ReactNode {
+  return (
+    <span
+      dangerouslySetInnerHTML={{
+        __html: Autolinker.link(text, {
+          className: "chat-link",
+          newWindow: true,
+          truncate: { length: 50, location: "middle" },
+          stripPrefix: false,
+        }),
+      }}
+    />
+  );
+}
+
 /**
  * @description this function constructs the message children basen on message type
  */
@@ -79,7 +98,9 @@ export function getMessageContent(
 
   if ("text" in message) {
     content.push(
-      <Message.TextContent key={messageEntity.id} text={message.text} />,
+      <Message.TextContent key={messageEntity.id}>
+        {formatMessageText(message.text)}
+      </Message.TextContent>,
     );
   }
   let chips: { title: string }[] = [];
diff --git a/frontend/src/components/inbox/inbox.css b/frontend/src/components/inbox/inbox.css
index 330e6c2b..416e3570 100644
--- a/frontend/src/components/inbox/inbox.css
+++ b/frontend/src/components/inbox/inbox.css
@@ -105,3 +105,14 @@ div .cs-message-input__content-editor-container,
   padding: 15px 5px !important;
   box-shadow: 0px 4px 10px 10px rgba(0, 0, 0, 0.066);
 }
+
+/* Styles for autolinked chat messages */
+.chat-link {
+  color: inherit !important;
+  text-decoration: underline !important;
+  word-break: break-all !important;
+}
+
+.chat-link:hover {
+  opacity: 0.8;
+}