fix: improved message displaying

front/src/components/MessageComponent.tsx

@@ -10,6 +10,32 @@ export default function MessageComponent({ message, user, channel, deleteMessage
         deleteMessage: ((messageId: number) => void) | undefined;
     }) {
 
+    function getMessageArray(message: Message) {
+        const array = []
+        var string = ''
+        message.content.split(" ").forEach((word) => {
+            console.log(word)
+            if (word.startsWith("@")) {
+                const mention = message.mentions.find((mention) => `@${mention.username}` === word);
+                if (mention) {
+                    array.push(string)
+                    string = ''
+                    array.push(word)
+                } else {
+                    string += word + " "
+                }
+            } else if (word.startsWith("https://") || word.startsWith("http://")) {
+                array.push(string)
+                string = ''
+                array.push(word)
+            } else {
+                string += word + " "
+            }
+        });
+        array.push(string)
+        return array.filter((word) => word !== '');
+    }
+    
     return (
         <div key={message.id} className="message">
             <div className="message-content">
@@ -17,12 +43,9 @@ export default function MessageComponent({ message, user, channel, deleteMessage
                 <div className="message-content-right">
                     <span><Link to={`/u/${message.username}`}>{message.username}</Link> {new Date(message.date * 1000).toLocaleString()}</span>
                     <div className="message-text">
-                        {message.content.split(" ").map((word, index) => {
+                        {getMessageArray(message).map((word, index) => {
                             if (word.startsWith("@")) {
-                                const mention = message.mentions.find((mention) => `@${mention.username}` === word);
+                                return <span key={index} ><Link to={`/u/${word.substring(1)}`}>{word}</Link> </span>
-                                if (mention) {
-                                    return <span key={index} ><Link to={`/u/${mention.username}`}>{word}</Link> </span>;
-                                }
                             } else if (word.startsWith("https://") || word.startsWith("http://")) {
                                 return <span key={index} ><Link to={word}>{word}</Link> </span>
                             }