From c58c19cc1ea2b1ee5982ebcdb508683613ebf0d0 Mon Sep 17 00:00:00 2001
From: Adam French <adam.a.french@outlook.com>
Date: Tue, 10 Mar 2026 11:58:06 +0000
Subject: [PATCH] Make links clickable

---
 nginx/vue/src/components/util/Chat.vue | 24 +++++++++++++++++++++++-
 1 file changed, 23 insertions(+), 1 deletion(-)

diff --git a/nginx/vue/src/components/util/Chat.vue b/nginx/vue/src/components/util/Chat.vue
index 346a27d..c1610db 100644
--- a/nginx/vue/src/components/util/Chat.vue
+++ b/nginx/vue/src/components/util/Chat.vue
@@ -49,6 +49,25 @@ function isSafeFileUrl(url) {
     return typeof url === "string" && url.startsWith("/uploads/");
 }
 
+const urlRegex = /(https?:\/\/[^\s<]+)/g;
+
+function parseMessageParts(text) {
+    const parts = [];
+    let lastIndex = 0;
+    let match;
+    while ((match = urlRegex.exec(text)) !== null) {
+        if (match.index > lastIndex) {
+            parts.push({ type: "text", value: text.slice(lastIndex, match.index) });
+        }
+        parts.push({ type: "link", value: match[1] });
+        lastIndex = urlRegex.lastIndex;
+    }
+    if (lastIndex < text.length) {
+        parts.push({ type: "text", value: text.slice(lastIndex) });
+    }
+    return parts;
+}
+
 onMounted(() => {
     messagesStore.connect();
 });
@@ -66,7 +85,10 @@ onUnmounted(() => {
         >
             <p v-for="message in messages" :key="message.id">
                 <span class="text-tertiary">{{ message.authorId }}:</span>
-                {{ message.text }}
+                <template v-for="(part, i) in parseMessageParts(message.text || '')" :key="i">
+                    <a v-if="part.type === 'link'" :href="part.value" target="_blank" rel="noopener noreferrer" class="text-primary underline">{{ part.value }}</a>
+                    <span v-else>{{ part.value }}</span>
+                </template>
                 <template
                     v-if="message.fileUrl && isSafeFileUrl(message.fileUrl)"
                 >