frontend/components/Message.vue

<template>
	<div v-if="props.type == 'normal'" :id="props.last ? 'last-message' : undefined" class="message normal-message" :class="{ 'message-margin-bottom': props.marginBottom }" tabindex="0">
		<div class="left-column">
			<img v-if="props.img" class="message-author-avatar" :src="props.img" :alt="username">
			<Icon v-else name="lucide:user" class="message-author-avatar" />
		</div>
		<div class="message-data">
			<div class="message-metadata">
				<span class="message-author-username">
					{{ username }}
				</span>
				<span class="message-date" :title="date.toString()">
					{{ messageDate }}
				</span>
			</div>
			<div class="message-text" v-html="sanitized"></div>
		</div>
	</div>
	<div v-else ref="messageElement" :id="props.last ? 'last-message' : undefined" class="message grouped-message" tabindex="0">
		<div class="left-column">
			<div>
				<span :class="{ 'invisible': dateHidden }" class="message-date" :title="date.toString()">
					{{ messageDate }}
				</span>
			</div>
		</div>
		<div class="message-data">
			<div class="message-text" v-html="sanitized"></div>
		</div>
	</div>
</template>

<script lang="ts" setup>
import DOMPurify from 'dompurify';
import { parseInline } from 'marked';

const props = defineProps<{
	class?: string,
	img?: string | null,
	username: string,
	text: string,
	timestamp: number,
	format: "12" | "24",
	type: "normal" | "grouped",
	marginBottom: boolean,
	last: boolean
}>();

const messageDate = ref<string>();

const messageElement = ref<HTMLDivElement>();

const dateHidden = ref<boolean>(true);

const date = new Date(props.timestamp);

let dateHour = date.getHours();
let dateMinute = date.getMinutes();
if (props.format == "12") {
	if (dateHour > 12) {
		dateHour = dateHour - 12;
		messageDate.value = `${dateHour}:${dateMinute < 10 ? "0" + dateMinute : dateMinute} PM`
	} else {
		if (dateHour == 0) {
			dateHour = 12;
		}
		messageDate.value = `${dateHour}:${dateMinute < 10 ? "0" + dateMinute : dateMinute} ${dateHour >= 0 && dateHour < 13 ? "AM" : "PM"}`
	}
} else {
	messageDate.value = `${dateHour}:${dateMinute < 10 ? "0" + dateMinute : dateMinute}`
}

console.log("message:", props.text);
console.log("author:", props.username);

const sanitized = ref<string>();

onMounted(async () => {
	const parsed = await parseInline(props.text, {gfm: true });
	sanitized.value = DOMPurify.sanitize(parsed, { ALLOWED_TAGS: ["strong", "em", "br", "blockquote", "code", "ul", "ol", "li", "a"] });
	console.log("adding listeners")
	await nextTick();
	messageElement.value?.addEventListener("mouseenter", (e: Event) => {
		dateHidden.value = false;
	});

	messageElement.value?.addEventListener("mouseleave", (e: Event) => {
		dateHidden.value = true;
	});
	console.log("added listeners");
});

//function toggleTooltip(e: Event) {
//	showHover.value = !showHover.value;
//}

</script>

<style scoped>
.message {
	text-align: left;
	/* border: 1px solid lightcoral; */
	display: grid;
	grid-template-columns: 1fr 19fr;
	align-items: center;
}

.normal-message {
	margin-top: 1dvh;
}

#last-message {
	margin-bottom: 2dvh;
}

.message-metadata {
	display: flex;
	gap: .5dvw;
	align-items: center;
}

.message-data {
	/* border: 1px solid white; */
	margin-left: .5dvw;
	display: flex;
	flex-direction: column;
	gap: 1dvh;
	height: 100%;
}

.message-author {
	display: flex;
	align-items: center;
}

.message-author-avatar {
	height: 2.3em;
	width: 2.3em;
	border-radius: 50%;
}

.left-column {
	margin-right: .5dvw;
	text-align: center;
	align-content: center;
}

.author-username {
	margin-right: .5dvw;
	color: white;
}

.message-date {
	font-size: .7em;
	color: rgb(150, 150, 150);
	cursor: default;
}

/*
.message-date-tooltip {
	height: 20px;;
	width: 20px;
}
*/
</style>