gorb/frontend
4
0
Fork 0
Code Issues 7 Pull requests 3 Projects Releases Packages 1 Wiki Activity Actions

feat: add message id as data field of Message component

Browse source
This commit is contained in:
SauceyRed 2025-07-09 07:37:05 +02:00
parent cca2c5ffd9
commit 7ddc2acb02
Signed by: sauceyred
GPG key ID: 2BF92EB6D8A5CCA7
2 changed files with 5 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

7
components/Message.vue
View file

@ -1,5 +1,5 @@
<template> <template>
<div v-if="props.type == 'normal'" :id="props.last ? 'last-message' : undefined" class="message normal-message"> <div @click="emitId" v-if="props.type == 'normal'" :id="props.last ? 'last-message' : undefined" class="message normal-message" :data-message-id="props.messageId">
<div class="left-column"> <div class="left-column">
<img v-if="props.img" class="message-author-avatar" :src="props.img" :alt="username" /> <img v-if="props.img" class="message-author-avatar" :src="props.img" :alt="username" />
<Icon v-else name="lucide:user" class="message-author-avatar" /> <Icon v-else name="lucide:user" class="message-author-avatar" />
@ -16,7 +16,7 @@
<div class="message-text" v-html="sanitized" tabindex="0"></div> <div class="message-text" v-html="sanitized" tabindex="0"></div>
</div> </div>
</div> </div>
<div v-else ref="messageElement" :id="props.last ? 'last-message' : undefined" class="message grouped-message" :class="{ 'message-margin-bottom': props.marginBottom }"> <div v-else ref="messageElement" :id="props.last ? 'last-message' : undefined" class="message grouped-message" :class="{ 'message-margin-bottom': props.marginBottom }" :data-message-id="props.messageId">
<div class="left-column"> <div class="left-column">
<span :class="{ 'invisible': dateHidden }" class="message-date side-message-date" :title="date.toString()"> <span :class="{ 'invisible': dateHidden }" class="message-date side-message-date" :title="date.toString()">
{{ date.toLocaleTimeString(undefined, { timeStyle: "short" }) }} {{ date.toLocaleTimeString(undefined, { timeStyle: "short" }) }}
@ -41,7 +41,8 @@ const props = defineProps<{
format: "12" | "24", format: "12" | "24",
type: "normal" | "grouped", type: "normal" | "grouped",
marginBottom: boolean, marginBottom: boolean,
last: boolean last: boolean,
messageId: string
}>(); }>();
const messageElement = ref<HTMLDivElement>(); const messageElement = ref<HTMLDivElement>();

2
components/MessageArea.vue
View file

@ -5,7 +5,7 @@
:text="message.message" :timestamp="messageTimestamps[message.uuid]" :img="message.user.avatar" :text="message.message" :timestamp="messageTimestamps[message.uuid]" :img="message.user.avatar"
format="12" :type="messagesType[message.uuid]" format="12" :type="messagesType[message.uuid]"
:margin-bottom="(messages[i + 1] && messagesType[messages[i + 1].uuid] == 'normal') ?? false" :margin-bottom="(messages[i + 1] && messagesType[messages[i + 1].uuid] == 'normal') ?? false"
:last="i == messages.length - 1" /> :last="i == messages.length - 1" :message-id="message.uuid" />
</div> </div>
<div id="message-box" class="rounded-corners"> <div id="message-box" class="rounded-corners">
<form id="message-form" @submit="sendMessage"> <form id="message-form" @submit="sendMessage">