Merge pull request #1054 from Hexastack/feat/add-url-styling-in-inbox-chat-messages

Add URL auto-linking for chat messages in the inbox page

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",

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,31 @@ export function isSubsequent(
   );
 }
 
+/**
+ * @description Detects URLs in text and converts them to clickable links using Autolinker
+ */
+function formatMessageText(text: string): ReactNode {
+  try {
+    const linkedText = Autolinker.link(text, {
+      className: "chat-link",
+      newWindow: true,
+      truncate: { length: 50, location: "middle" },
+      stripPrefix: false,
+      sanitizeHtml: true,
+    });
+
+    return (
+      <div
+        dangerouslySetInnerHTML={{
+          __html: linkedText,
+        }}
+      />
+    );
+  } catch (error) {
+    return <div>{text}</div>;
+  }
+}
+
 /**
  * @description this function constructs the message children basen on message type
  */
@@ -79,7 +105,9 @@ export function getMessageContent(
 
   if ("text" in message) {
     content.push(
-      <Message.TextContent key={messageEntity.id} text={message.text} />,
+      <Message.CustomContent key={messageEntity.id}>
+        {formatMessageText(message.text)}
+      </Message.CustomContent>,
     );
   }
   let chips: { title: string }[] = [];

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;
+}