Add link highliting (#24)

packages/react-chat/src/components/Chat/ChatMessageContent.tsx

@@ -0,0 +1,39 @@
+import React, { useEffect, useState } from "react";
+
+/* eslint-disable no-useless-escape */
+const regEx =
+  /(?:(?:http|https):\/\/)?(?:[-a-z0-9]+\.)+[a-z]+(?::\d+)?(?:(?:\/[-\+~%/\.\w]+)?\/?(?:[&?][-\+=&;%@\.\w]+)?(?:#[\w]+)?)?/gi;
+/* eslint-enable no-useless-escape */
+
+type ChatMessageContentProps = {
+  content: string;
+};
+
+export function ChatMessageContent({ content }: ChatMessageContentProps) {
+  const [elements, setElements] = useState<(string | React.ReactElement)[]>([
+    content,
+  ]);
+
+  useEffect(() => {
+    const split = content.split(regEx);
+    const newSplit: (string | React.ReactElement)[] = [split[0]];
+    const matches = content.match(regEx);
+    if (matches) {
+      matches.forEach((match, idx) => {
+        const link =
+          match.startsWith("http://") || match.startsWith("https://")
+            ? match
+            : "https://" + match;
+        newSplit.push(
+          <a key={idx} href={link}>
+            {match}
+          </a>,
+          split[idx + 1]
+        );
+      });
+      setElements(newSplit);
+    }
+  }, [content]);
+
+  return <>{elements.map((el) => el)}</>;
+}

packages/react-chat/src/components/Chat/ChatMessages.tsx

@@ -5,6 +5,8 @@ import { ChatMessage } from "../../models/ChatMessage";
 import { Theme } from "../../styles/themes";
 import { UserIcon } from "../Icons/UserIcon";
 
+import { ChatMessageContent } from "./ChatMessageContent";
+
 type ChatMessagesProps = {
   messages: ChatMessage[];
   theme: Theme;
@@ -18,20 +20,21 @@ export function ChatMessages({ messages, theme }: ChatMessagesProps) {
       ref.current.scrollTop = ref.current.scrollHeight;
     }
   }, [messages]);
-
   return (
     <MessagesWrapper ref={ref}>
-      {messages.map((message, idx) => (
-        <MessageOuterWrapper>
+      {messages.map((message, idx) => {
+        return (
+          <MessageOuterWrapper key={idx}>
             {(idx === 0 ||
-            messages[idx - 1].date.getDay() != messages[idx].date.getDay()) && (
+              messages[idx - 1].date.getDay() !=
+                messages[idx].date.getDay()) && (
               <DateSeparator>
                 {message.date.getDay() === today
                   ? "Today"
                   : message.date.toLocaleDateString()}
               </DateSeparator>
             )}
-          <MessageWrapper key={idx}>
+            <MessageWrapper>
               <Icon>
                 <UserIcon theme={theme} />
               </Icon>
@@ -45,11 +48,14 @@ export function ChatMessages({ messages, theme }: ChatMessagesProps) {
                     {message.date.toLocaleString()}
                   </TimeWrapper>
                 </MessageHeaderWrapper>
-              <MessageText theme={theme}>{message.content}</MessageText>
+                <MessageText theme={theme}>
+                  <ChatMessageContent content={message.content} />
+                </MessageText>
               </ContentWrapper>
             </MessageWrapper>
           </MessageOuterWrapper>
-      ))}
+        );
+      })}
     </MessagesWrapper>
   );
 }

packages/react-chat/src/hooks/useMessenger.ts

@@ -69,7 +69,7 @@ export function useMessenger(chatId: string, chatIdList: string[]) {
       const messenger = await Messenger.create(identity, {
         bootstrap: getBootstrapNodes.bind({}, [
           "fleets",
-          "wakuv2.prod",
+          "wakuv2.test",
           "waku-websocket",
         ]),
       });