Update

Author: XhstormR

src/app/message/message.component.html

@@ -9,10 +9,22 @@
             <mat-card-subtitle>{{ message.sender }}</mat-card-subtitle>
         </mat-card-header>
         <mat-card-content>
-            @switch (message.type) { @case ("Text") {<span class="content">{{ message.text }}</span>} @case
-            ("File") {<span class="content">{{ message.fileName }}({{ message.fileSize | fileSize }})</span>
-            @if (isImage) {
-            <img [src]="imageUrl" alt="image" style="max-width: 100%">} } }<mat-divider></mat-divider>
+            @switch (message.type) {
+                @case ("Text") {
+                    @if (isUrl) {
+                        <p><a [href]="url" rel="noopener noreferrer" target="_blank">{{ url }}</a></p>
+                    } @else {
+                        <span class="content">{{ message.text }}</span>
+                    }
+                }
+                @case ("File") {
+                    <span class="content">{{ message.fileName }}({{ message.fileSize | fileSize }})</span>
+                    @if (isImage) {
+                        <img [src]="imageUrl" alt="image" style="max-width: 100%" />
+                    }
+                }
+            }
+            <mat-divider></mat-divider>
         </mat-card-content>
         <mat-card-actions>
             @switch (message.type) { @case ("Text") {

src/app/message/message.component.ts

@@ -1,4 +1,4 @@
-import { Component, Input, OnDestroy, OnInit } from "@angular/core";
+import {Component, Input, OnDestroy, OnInit, SecurityContext} from "@angular/core";
 import { DatePipe } from "@angular/common";
 import { FileSizePipe } from "../file-size.pipe";
 import { MatCardModule } from "@angular/material/card";
@@ -12,7 +12,8 @@ import { NotificationService } from "../service/notification.service";
 import { Clipboard } from "@angular/cdk/clipboard";
 import { PeerService } from "../service/peer.service";
 import { FileMessage, Message, TextMessage } from "../message.model";
-import { download, error } from "../utils";
+import {download, error, isValidUrl} from "../utils";
+import {DomSanitizer} from "@angular/platform-browser";
 
 @Component({
     selector: "app-message",
@@ -34,13 +35,17 @@ export class MessageComponent implements OnInit, OnDestroy {
     @Input()
     message!: Message;
 
+    isUrl = false;
+    url: string | undefined;
+
     isImage = false;
     imageUrl: string | undefined;
     readonly imagePattern = /^image\/.+$/;
 
     constructor(
         private notificationService: NotificationService,
         private clipboard: Clipboard,
+        private sanitizer: DomSanitizer,
         public peerService: PeerService,
     ) {}
 
@@ -64,6 +69,10 @@ export class MessageComponent implements OnInit, OnDestroy {
             this.isImage = true;
             this.imageUrl = URL.createObjectURL(blob);
         }
+        if (this.message.type == "Text" && isValidUrl(this.message.text)) {
+            this.isUrl = true;
+            this.url = this.sanitizer.sanitize(SecurityContext.URL, this.message.text) || '';
+        }
     }
 
     ngOnDestroy(): void {

src/app/utils.ts

@@ -48,6 +48,15 @@ export function blobToDataUrl(blob: Blob) {
     });
 }
 
+export function isValidUrl(str: string): boolean {
+    try {
+        const url = new URL(str);
+        return url.protocol === 'http:' || url.protocol === 'https:';
+    } catch {
+        return false;
+    }
+}
+
 export async function dataUrlToBlob(dataUrl: string) {
     let response = await fetch(dataUrl);
     return await response.blob();