users worden nu beter geresolved

resources/js/components/Chat.vue

@@ -149,7 +149,7 @@ const participantsById = computed(() => {
         {} as Record<
             number,
             {
-                id: number;
+                id: string;
                 name: string;
                 pivot?: { display_name: string | null } | null;
             }

resources/js/components/ChatMessage.vue

@@ -19,10 +19,13 @@ const props = defineProps<{
 }>();
 
 const processedContent = computed(() => {
-    return props.message.content.replace(/<user:(\d+)>/g, (match, userId) => {
-        // This is a placeholder for a more robust user lookup
-        return `<a href="${route('users.show', userId)}" class="text-blue-500 hover:underline">@user${userId}</a>`;
-    });
+    return props.message.content.replace(
+        /<user:([0-9a-f-]+)>/g,
+        (match, userId) => {
+            // This is a placeholder for a more robust user lookup
+            return `<a href="${route('users.show', userId)}" class="text-blue-500 hover:underline">@user${userId}</a>`;
+        },
+    );
 });
 </script>
 

resources/js/components/chat/ChatSystemMessage.vue

@@ -39,11 +39,11 @@ const parsedContent = computed(() => {
     let content = props.message.content;
 
     // 1. Replace <user:id> placeholders with links to their dynamic profile
-    const userRegex = /<user:(\d+)>/g;
+    const userRegex = /<user:([0-9a-f-]+)>/g;
     content = content.replace(userRegex, (match, userId) => {
-        const user = props.participantsById[Number(userId)];
+        const user = props.participantsById[(userId)];
         if (user) {
-            const url = route('dynamics.users.show', [props.dynamicId, Number(userId)]);
+            const url = route('dynamics.users.show', [props.dynamicId, (userId)]);
             return `<a href="${url}" class="c-chat__user-link font-semibold text-blue-500 hover:underline">${
                 user.pivot?.display_name ?? user.name
             }</a>`;
@@ -77,7 +77,7 @@ const parsedContent = computed(() => {
                     /[-\/\\^$*+?.()|[\]{}]/g,
                     '\\$&',
                 );
-                
+
                 const nameRegex = new RegExp(`"${escapedName}"`, 'g');
                 content = content.replace(
                     nameRegex,

resources/js/components/chat/ChatUserMessage.vue

@@ -49,15 +49,21 @@ const parsedContent = computed(() => {
     let content = props.message.content;
 
     // 1. Replace <user:id> placeholders with links to their dynamic profile
-    const userRegex = /<user:(\d+)>/g;
+    const userRegex = /<user:([0-9a-f-]+)>/g;
     content = content.replace(userRegex, (match, userId) => {
-        const user = props.participantsById[Number(userId)];
+        const user = props.participantsById[(userId)];
+
         if (user) {
-            const url = route('dynamics.users.show', [props.dynamicId, Number(userId)]);
+            const url = route('dynamics.users.show', [
+                props.dynamicId,
+                (userId),
+            ]);
+
             return `<a href="${url}" class="c-chat__user-link font-semibold text-blue-500 hover:underline">${
                 user.pivot?.display_name ?? user.name
             }</a>`;
         }
+
         return `User #${userId}`;
     });
 
@@ -87,7 +93,7 @@ const parsedContent = computed(() => {
                     /[-\/\\^$*+?.()|[\]{}]/g,
                     '\\$&',
                 );
-                
+
                 const nameRegex = new RegExp(`"${escapedName}"`, 'g');
                 content = content.replace(
                     nameRegex,
@@ -104,9 +110,7 @@ const parsedContent = computed(() => {
 <template>
     <div>
         <div class="c-chat__message-header">
-            <span class="c-chat__message-author">{{
-                message.user?.name
-            }}</span>
+            <span class="c-chat__message-author">{{ message.user?.name }}</span>
             <span
                 class="c-chat__message-time"
                 :title="formatTimestamp(message.created_at).full"
@@ -138,10 +142,7 @@ const parsedContent = computed(() => {
                     class="relative cursor-pointer transition-opacity hover:opacity-90"
                     @click="emit('open-lightbox', item.url, item.mime_type)"
                 >
-                    <video
-                        :src="item.url"
-                        class="c-chat__video"
-                    ></video>
+                    <video :src="item.url" class="c-chat__video"></video>
                     <div class="c-chat__play-overlay">▶</div>
                 </div>
             </div>