better system messages, display name relocation

resources/js/components/Chat.vue

@@ -5,23 +5,39 @@ import { useEcho, echoIsConfigured, configureEcho } from '@laravel/echo-vue';
 import { route } from 'ziggy-js';
 import { Paperclip, Info } from '@lucide/vue';
 
-const props = defineProps<{
-    chat: {
-        id: number;
-        messages: Array<{
+const props = withDefaults(
+    defineProps<{
+        chat: {
             id: number;
-            user: { id: number; name: string };
-            content: string;
-            created_at: string;
-            media?: Array<{
+            messages: Array<{
                 id: number;
-                url: string;
-                file_name: string;
-                mime_type: string;
+                user: { id: number; name: string } | null;
+                content: string;
+                created_at: string;
+                subject_id?: number | null;
+                subject_type?: string | null;
+                subject?: any;
+                media?: Array<{
+                    id: number;
+                    url: string;
+                    file_name: string;
+                    mime_type: string;
+                }>;
             }>;
+        };
+        participants?: Array<{
+            id: number;
+            name: string;
+            pivot?: {
+                display_name: string | null;
+            } | null;
         }>;
-    };
-}>();
+        dynamicId: number;
+    }>(),
+    {
+        participants: () => [],
+    }
+);
 
 if (!echoIsConfigured()) {
     configureEcho({
@@ -50,6 +66,83 @@ useEcho(`chats.${props.chat.id}`, 'MessageSent', (e: any) => {
     props.chat.messages.push(e.message);
 });
 
+const participantsById = computed(() => {
+    return props.participants.reduce(
+        (acc, p) => {
+            acc[p.id] = p;
+            return acc;
+        },
+        {} as Record<
+            number,
+            {
+                id: number;
+                name: string;
+                pivot?: { display_name: string | null } | null;
+            }
+        >,
+    );
+});
+
+function parseMessageContent(message: {
+    content: string;
+    subject_id?: number | null;
+    subject_type?: string | null;
+    subject?: any;
+}) {
+    let content = message.content;
+
+    // 1. Replace <user:id> placeholders with links to their dynamic profile
+    const userRegex = /<user:(\d+)>/g;
+    content = content.replace(userRegex, (match, userId) => {
+        const user = participantsById.value[Number(userId)];
+        if (user) {
+            const url = route('dynamics.users.show', [props.dynamicId, Number(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}`;
+    });
+
+    // 2. Link subjects if found in the text
+    if (message.subject_id && message.subject_type) {
+        if (
+            message.subject_type === 'App\\Models\\Mutation' ||
+            message.subject_type === 'App\\Models\\Ledger'
+        ) {
+            const ledgerId =
+                message.subject_type === 'App\\Models\\Mutation'
+                    ? message.subject?.ledger_id
+                    : message.subject?.id;
+
+            const ledgerName =
+                message.subject_type === 'App\\Models\\Mutation'
+                    ? message.subject?.ledger?.name
+                    : message.subject?.name;
+
+            if (ledgerId && ledgerName) {
+                const ledgerUrl = route('dynamics.ledgers.show', [
+                    props.dynamicId,
+                    ledgerId,
+                ]);
+
+                const escapedName = ledgerName.replace(
+                    /[-\/\\^$*+?.()|[\]{}]/g,
+                    '\\$&',
+                );
+                
+                const nameRegex = new RegExp(`"${escapedName}"`, 'g');
+                content = content.replace(
+                    nameRegex,
+                    `"<a href="${ledgerUrl}" class="c-chat__subject-link font-semibold text-blue-500 hover:underline">${ledgerName}</a>"`,
+                );
+            }
+        }
+    }
+
+    return content;
+}
+
 function handleFileChange(event: Event) {
     const files = (event.target as HTMLInputElement).files;
     if (files) {
@@ -65,7 +158,10 @@ function removeFile(index: number) {
 
 const currentUser = computed(() => usePage().props.auth?.user);
 
-function isOwnMessage(messageUserId: number): boolean {
+function isOwnMessage(messageUserId: number | null): boolean {
+    if (messageUserId === null) {
+        return false;
+    }
     return currentUser.value && currentUser.value.id === messageUserId;
 }
 
@@ -107,17 +203,16 @@ function closeLightbox() {
                 :class="[
                     'c-chat__message',
                     {
-                        'c-chat__message--system':
-                            message.user.id === 0,
-                        'c-chat__message--own': isOwnMessage(message.user.id),
-                        'c-chat__message--other': !isOwnMessage(
-                            message.user.id,
+                        'c-chat__message--system': message.user === null,
+                        'c-chat__message--own': isOwnMessage(message.user?.id),
+                        'c-chat__message--other': message.user !== null && !isOwnMessage(
+                            message.user?.id,
                         ),
                     },
                 ]"
             >
                 <!-- Standard User Chat Message -->
-                <template v-if="!message.content.startsWith('System:')">
+                <template v-if="message.user">
                     <div class="c-chat__message-header">
                         <span class="c-chat__message-author">{{
                             message.user.name
@@ -166,9 +261,10 @@ function closeLightbox() {
                 <template v-else>
                     <div class="c-chat__system-inner">
                         <Info class="c-chat__system-icon" />
-                        <span class="c-chat__system-text">
-                            {{ message.content.replace(/^System:\s*/, '') }}
-                        </span>
+                        <span
+                            class="c-chat__system-text"
+                            v-html="parseMessageContent(message)"
+                        ></span>
                         <span class="c-chat__system-time">
                             {{
                                 new Date(message.created_at).toLocaleTimeString(

resources/js/components/DisplayNameForm.vue

@@ -1,113 +0,0 @@
-<script setup lang="ts">
-import { useForm } from '@inertiajs/vue3';
-import { route } from 'ziggy-js';
-
-const props = defineProps<{
-    dynamicId: number;
-    participant: {
-        id: number;
-        name: string;
-        display_name: string | null;
-    };
-}>();
-
-const form = useForm({
-    display_name: props.participant.display_name ?? '',
-});
-
-function submit() {
-    form.put(route('dynamics.participant.update', props.dynamicId));
-}
-</script>
-
-<template>
-    <div class="c-display-name-form">
-        <h4 class="c-display-name-form__title">
-            Display Name for {{ participant.name }}
-        </h4>
-        <form @submit.prevent="submit" class="c-display-name-form__form">
-            <div class="c-display-name-form__field">
-                <label
-                    for="display_name"
-                    class="c-display-name-form__label"
-                >
-                    Dynamic-specific Display Name
-                </label>
-                <input
-                    v-model="form.display_name"
-                    id="display_name"
-                    type="text"
-                    class="c-display-name-form__input"
-                />
-                <div
-                    v-if="form.errors.display_name"
-                    class="c-display-name-form__error"
-                >
-                    {{ form.errors.display_name }}
-                </div>
-            </div>
-
-            <div class="c-display-name-form__actions">
-                <button
-                    type="submit"
-                    :disabled="form.processing"
-                    class="c-display-name-form__submit-btn"
-                >
-                    Save
-                </button>
-            </div>
-        </form>
-    </div>
-</template>
-
-<style scoped>
-@reference '../../css/app.css';
-
-.c-display-name-form {
-    @apply mt-8;
-}
-
-.c-display-name-form__title {
-    @apply text-lg font-medium;
-    color: var(--foreground);
-}
-
-.c-display-name-form__form {
-    @apply mt-4 space-y-4;
-}
-
-.c-display-name-form__field {
-    @apply block;
-}
-
-.c-display-name-form__label {
-    @apply block text-sm font-medium;
-    color: var(--foreground);
-}
-
-.c-display-name-form__input {
-    @apply mt-1 block w-full rounded-md border shadow-sm focus:border-indigo-500 focus:ring-indigo-500;
-    border-color: var(--border);
-    background-color: var(--background);
-    color: var(--foreground);
-}
-
-.c-display-name-form__error {
-    @apply text-sm;
-    color: var(--destructive);
-}
-
-.c-display-name-form__actions {
-    @apply flex items-center gap-4;
-}
-
-.c-display-name-form__submit-btn {
-    @apply inline-flex items-center rounded-md border border-transparent bg-gray-800 px-4 py-2 text-xs font-semibold tracking-widest text-white uppercase transition duration-150 ease-in-out hover:bg-gray-700 focus:bg-gray-700 focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 focus:outline-none active:bg-gray-900;
-    background-color: var(--primary);
-    color: var(--primary-foreground);
-
-    &:hover {
-        opacity: 0.9;
-    }
-}
-</style>

resources/js/components/DynamicDisplayNameItem.vue

@@ -0,0 +1,47 @@
+<script setup lang="ts">
+import { useForm } from '@inertiajs/vue3';
+import { route } from 'ziggy-js';
+import { Input } from '@/components/ui/input';
+import { Button } from '@/components/ui/button';
+import InputError from '@/components/InputError.vue';
+
+const props = defineProps<{
+    dynamic: {
+        id: number;
+        name: string;
+        pivot: {
+            display_name: string | null;
+        };
+    };
+}>();
+
+const form = useForm({
+    display_name: props.dynamic.pivot?.display_name ?? '',
+});
+
+function submit() {
+    form.put(route('dynamics.participant.update', props.dynamic.id), {
+        preserveScroll: true,
+    });
+}
+</script>
+
+<template>
+    <form @submit.prevent="submit" class="flex flex-col sm:flex-row items-start sm:items-center gap-4 p-4 border rounded-lg bg-card text-card-foreground">
+        <div class="flex-1 w-full">
+            <div class="font-medium text-sm mb-1">{{ dynamic.name }}</div>
+            <Input
+                v-model="form.display_name"
+                class="w-full"
+                placeholder="Enter custom display name"
+                required
+            />
+            <InputError class="mt-1" :message="form.errors.display_name" />
+        </div>
+        <div class="sm:self-end">
+            <Button type="submit" size="sm" :disabled="form.processing">
+                Save
+            </Button>
+        </div>
+    </form>
+</template>

resources/js/components/MutationList.vue

@@ -174,7 +174,7 @@ function getAmountClass(amount: number): string {
                     </button>
                 </div>
 
-                <Chat :chat="mutation.chat" />
+                <Chat :chat="mutation.chat" :dynamic-id="dynamicId" :participants="participants" />
             </li>
         </ul>
         <div v-if="mutations.length === 0" class="c-mutation-list__empty">