feat: convert urls in response text to links and add styling

FullStackWithLawrence · Jan 23, 2024 · 031eac7 · 031eac7
1 parent 9033b6d
commit 031eac7
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 1 deletion.
diff --git a/client/src/components/chatApp/Component.css b/client/src/components/chatApp/Component.css
@@ -11,3 +11,12 @@
 .cs-conversation-header {
   text-align: center;
 }
+
+a {
+  text-decoration: underline;
+  color: black;
+}
+a:hover {
+  text-decoration: underline;
+  color: midnightblue;
+}
diff --git a/client/src/components/chatApp/Component.jsx b/client/src/components/chatApp/Component.jsx
@@ -78,9 +78,20 @@ function ChatApp(props) {
     return conversation_header;
   }
 
+  function convertMarkdownLinksToHTML(message) {
+    const markdownLinkRegex = /\[([^\]]+)\]\(([^)]+)\)/g;
+    return message.replace(markdownLinkRegex, '<a href="$2">$1</a>');
+  }
+  function convertURLsToHTML(message) {
+    const urlRegex = /(https?:\/\/[^\s]+)/g;
+    return message.replace(urlRegex, '<a href="$1">$1</a>');
+  }
+
   function messageFactory(message, direction, sender) {
+    const converted_message = convertMarkdownLinksToHTML(message);
+    const converted_message2 = convertURLsToHTML(converted_message);
     return {
-      message: message,
+      message: converted_message2,
       direction: direction,
       sentTime: new Date().toLocaleString(),
       sender: sender,