151 lines
4.8 KiB
Vue
151 lines
4.8 KiB
Vue
<script setup lang="ts">
|
|
import { computed } from 'vue';
|
|
import { route } from 'ziggy-js';
|
|
|
|
const props = defineProps<{
|
|
message: {
|
|
id: number;
|
|
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;
|
|
}>;
|
|
};
|
|
participantsById: Record<
|
|
number,
|
|
{
|
|
id: number;
|
|
name: string;
|
|
pivot?: { display_name: string | null } | null;
|
|
}
|
|
>;
|
|
dynamicId: string;
|
|
}>();
|
|
|
|
const emit = defineEmits<{
|
|
(e: 'open-lightbox', url: string, mimeType: string): void;
|
|
}>();
|
|
|
|
function formatTimestamp(isoString: string): { full: string; time: string } {
|
|
const date = new Date(isoString);
|
|
return {
|
|
full: date.toLocaleString(),
|
|
time: date.toLocaleTimeString([], {
|
|
hour: '2-digit',
|
|
minute: '2-digit',
|
|
hour12: false,
|
|
}),
|
|
};
|
|
}
|
|
|
|
const parsedContent = computed(() => {
|
|
let content = props.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 = props.participantsById[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 (props.message.subject_id && props.message.subject_type) {
|
|
if (
|
|
props.message.subject_type === 'mutation' ||
|
|
props.message.subject_type === 'ledger'
|
|
) {
|
|
const ledgerId =
|
|
props.message.subject_type === 'mutation'
|
|
? props.message.subject?.ledger_id
|
|
: props.message.subject?.id;
|
|
|
|
const ledgerName =
|
|
props.message.subject_type === 'mutation'
|
|
? props.message.subject?.ledger?.name
|
|
: props.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;
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<div>
|
|
<div class="c-chat__message-header">
|
|
<span class="c-chat__message-author">{{
|
|
message.user?.name
|
|
}}</span>
|
|
<span
|
|
class="c-chat__message-time"
|
|
:title="formatTimestamp(message.created_at).full"
|
|
>
|
|
{{ formatTimestamp(message.created_at).time }}
|
|
</span>
|
|
</div>
|
|
<p class="c-chat__message-text" v-html="parsedContent"></p>
|
|
|
|
<!-- Attached Media Display -->
|
|
<div
|
|
v-if="message.media && message.media.length > 0"
|
|
class="c-chat__message-media"
|
|
>
|
|
<div
|
|
v-for="item in message.media"
|
|
:key="item.id"
|
|
class="c-chat__media-item"
|
|
>
|
|
<img
|
|
v-if="item.mime_type.startsWith('image/')"
|
|
:src="item.url"
|
|
:alt="item.file_name"
|
|
class="c-chat__image cursor-pointer transition-opacity hover:opacity-90"
|
|
@click="emit('open-lightbox', item.url, item.mime_type)"
|
|
/>
|
|
<div
|
|
v-else-if="item.mime_type.startsWith('video/')"
|
|
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>
|
|
<div class="c-chat__play-overlay">▶</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|