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..5daf0186 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,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 ( +
+ ); + } catch (error) { + return
{text}
; + } +} + /** * @description this function constructs the message children basen on message type */ @@ -79,7 +105,9 @@ export function getMessageContent( if ("text" in message) { content.push( - , + + {formatMessageText(message.text)} + , ); } 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; +}