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,38 +20,42 @@ export function ChatMessages({ messages, theme }: ChatMessagesProps) {
       ref.current.scrollTop = ref.current.scrollHeight;
     }
   }, [messages]);
-
   return (
     <MessagesWrapper ref={ref}>
-      {messages.map((message, idx) => (
-        <MessageOuterWrapper>
-          {(idx === 0 ||
-            messages[idx - 1].date.getDay() != messages[idx].date.getDay()) && (
-            <DateSeparator>
-              {message.date.getDay() === today
-                ? "Today"
-                : message.date.toLocaleDateString()}
-            </DateSeparator>
-          )}
-          <MessageWrapper key={idx}>
-            <Icon>
-              <UserIcon theme={theme} />
-            </Icon>
+      {messages.map((message, idx) => {
+        return (
+          <MessageOuterWrapper key={idx}>
+            {(idx === 0 ||
+              messages[idx - 1].date.getDay() !=
+                messages[idx].date.getDay()) && (
+              <DateSeparator>
+                {message.date.getDay() === today
+                  ? "Today"
+                  : message.date.toLocaleDateString()}
+              </DateSeparator>
+            )}
+            <MessageWrapper>
+              <Icon>
+                <UserIcon theme={theme} />
+              </Icon>
 
-            <ContentWrapper>
-              <MessageHeaderWrapper>
-                <UserNameWrapper theme={theme}>
-                  {message.sender.slice(0, 10)}
-                </UserNameWrapper>
-                <TimeWrapper theme={theme}>
-                  {message.date.toLocaleString()}
-                </TimeWrapper>
-              </MessageHeaderWrapper>
-              <MessageText theme={theme}>{message.content}</MessageText>
-            </ContentWrapper>
-          </MessageWrapper>
-        </MessageOuterWrapper>
-      ))}
+              <ContentWrapper>
+                <MessageHeaderWrapper>
+                  <UserNameWrapper theme={theme}>
+                    {message.sender.slice(0, 10)}
+                  </UserNameWrapper>
+                  <TimeWrapper theme={theme}>
+                    {message.date.toLocaleString()}
+                  </TimeWrapper>
+                </MessageHeaderWrapper>
+                <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",
         ]),
       });