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

Improve chat look #65

Merged
sauceyred merged 18 commits from improve-chat-look into main 2025-08-14 15:29:16 +00:00
Conversation 5 Commits 18 Files changed 10 +113 -118
10 changed files with 113 additions and 118 deletions
Download patch file Download diff file Expand all files Collapse all files

4
classes/Message.ts
View file

@ -12,8 +12,4 @@ export default class Message {
this.userUuid = user_uuid; this.userUuid = user_uuid;
this.message = message; this.message = message;
} }
getTimestamp() {
return uuidToTimestamp(this.uuid);
}
} }

147
components/Message.vue
View file

@ -1,24 +1,22 @@
<template> <template>
<div v-if="props.type == 'normal' || props.replyMessage" ref="messageElement" @contextmenu="showContextMenu($event, contextMenu, menuItems)" :id="props.last ? 'last-message' : undefined" <div v-if="props.type == 'normal' || props.replyMessage" ref="messageElement" @contextmenu="showContextMenu($event, contextMenu, menuItems)"
class="message normal-message" :class="{ 'mentioned': (props.replyMessage || props.isMentioned) && props.message.member.user.uuid != props.me.uuid && props.replyMessage?.member.user.uuid == props.me.uuid }" :data-message-id="props.messageId" class="message normal-message" :class="{ 'highlighted': (props.isMentioned || (props.replyMessage && props.message.member.user.uuid != me!.uuid && props.replyMessage?.member.user.uuid == me!.uuid)) }"
:editing.sync="props.editing" :replying-to.sync="props.replyingTo"> :data-message-id="props.message.uuid" :editing.sync="props.editing">
<div v-if="props.replyMessage" class="message-reply-svg"> <div v-if="props.replyMessage" class="message-reply-svg">
<svg <svg
width="1.5em" height="1.5em" width="1.5em" height="1.5em"
viewBox="0 0 150 87.5" version="1.1" id="svg1" viewBox="0 0 150 87.5" version="1.1" id="svg1"
style="overflow: visible;"> style="overflow: visible;">
<defs id="defs1" /> <defs id="defs1" />
<g id="layer1" <g id="layer1" transform="translate(40,-35)">
transform="translate(40,-35)"> <g id="g3" transform="translate(-35,-20)">
<g id="g3"
transform="translate(-35,-20)">
<path <path
style="stroke:var(--reply-text-color);stroke-width:8;stroke-opacity:1" style="stroke:var(--reply-text-color);stroke-width:8;stroke-opacity:1"
d="m 120.02168,87.850978 100.76157,2.4e-5" d="m 120,87.5 100,2.5e-5"
id="path3-5" /> id="path3-5" />
<path <path
style="stroke:var(--reply-text-color);stroke-width:8;stroke-opacity:1" style="stroke:var(--reply-text-color);stroke-width:8;stroke-opacity:1"
d="M 69.899501,174.963 120.2803,87.700931" d="M 70,150 120,87.5"
id="path3-5-2" /> id="path3-5-2" />
</g> </g>
</g> </g>
@ -29,36 +27,36 @@
:text="props.replyMessage?.message" :text="props.replyMessage?.message"
:reply-id="props.replyMessage.uuid" max-width="reply" /> :reply-id="props.replyMessage.uuid" max-width="reply" />
<div class="left-column"> <div class="left-column">
<Avatar :profile="props.author" class="message-author-avatar"/> <Avatar :profile="props.message.member" class="message-author-avatar"/>
</div> </div>
<div class="message-data"> <div class="message-data">
<div class="message-metadata"> <div class="message-metadata">
<span class="message-author-username" tabindex="0" :style="`color: ${props.authorColor}`"> <span class="message-author-username" tabindex="0" :style="`color: ${generateIrcColor(props.message.member.user.uuid)}`">
{{ getDisplayName(props.author) }} {{ getDisplayName(props.message.member) }}
</span> </span>
<span class="message-date" :title="date.toString()"> <span class="message-date" :title="date.toString()">
<span v-if="getDayDifference(date, currentDate) === 1">Yesterday at</span> <span v-if="getDayDifference(date, currentDate) === 1">Yesterday at</span>
<span v-else-if="getDayDifference(date, currentDate) > 1 ">{{ date.toLocaleDateString(undefined) }},</span> <span v-else-if="getDayDifference(date, currentDate) > 1 ">{{ date.toLocaleDateString(undefined) }},</span>
{{ date.toLocaleTimeString(undefined, { hour12: props.format == "12", timeStyle: "short" }) }} {{ date.toLocaleTimeString(undefined, { hour12: getPreferredTimeFormat() == "12", timeStyle: "short" }) }}
</span> </span>
</div> </div>
<div class="message-text" v-html="sanitized" :hidden="hasEmbed" tabindex="0"></div> <div class="message-text" v-html="sanitized" :hidden="hideText" tabindex="0"></div>
<MessageMedia v-if="mediaLinks.length" :links="mediaLinks" />
</div> </div>
<MessageMedia v-if="mediaLinks.length" :links="mediaLinks" />
</div> </div>
<div v-else ref="messageElement" @contextmenu="showContextMenu($event, contextMenu, menuItems)" :id="props.last ? 'last-message' : undefined" <div v-else ref="messageElement" @contextmenu="showContextMenu($event, contextMenu, menuItems)"
class="message grouped-message" :class="{ 'message-margin-bottom': props.marginBottom, 'mentioned': props.replyMessage || props.isMentioned }" class="message grouped-message" :class="{ 'mentioned': props.replyMessage || props.isMentioned }"
:data-message-id="props.messageId" :editing.sync="props.editing" :replying-to.sync="props.replyingTo"> :data-message-id="props.message.uuid" :editing.sync="props.editing">
<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, { hour12: props.format == "12", timeStyle: "short" }) }} {{ date.toLocaleTimeString(undefined, { hour12: getPreferredTimeFormat() == "12", timeStyle: "short" }) }}
</span> </span>
</div> </div>
<div class="message-data"> <div class="message-data">
<div class="message-text" :class="$style['message-text']" v-html="sanitized" :hidden="hasEmbed" tabindex="0"></div> <div class="message-text" :class="$style['message-text']" v-html="sanitized" :hidden="hideText" tabindex="0"></div>
<MessageMedia v-if="mediaLinks.length" :links="mediaLinks"/>
</div> </div>
<MessageMedia v-if="mediaLinks.length" :links="mediaLinks" />
</div> </div>
</template> </template>
@ -71,33 +69,37 @@ import MessageReply from './UserInterface/MessageReply.vue';
import type { ContextMenuInterface, ContextMenuItem } from '~/types/interfaces'; import type { ContextMenuInterface, ContextMenuItem } from '~/types/interfaces';
const { getDisplayName } = useProfile() const { getDisplayName } = useProfile()
const { getUser } = useAuth()
const props = defineProps<MessageProps>(); const props = defineProps<MessageProps>();
const me = await getUser()
const contextMenu = useState<ContextMenuInterface>("contextMenu", () => ({ show: false, pointerX: 0, pointerY: 0, items: [] })); const contextMenu = useState<ContextMenuInterface>("contextMenu", () => ({ show: false, pointerX: 0, pointerY: 0, items: [] }));
const messageElement = ref<HTMLDivElement>(); const messageElement = ref<HTMLDivElement>();
const dateHidden = ref<boolean>(true); const dateHidden = ref<boolean>(true);
const date = new Date(props.timestamp); const date = uuidToDate(props.message.uuid);
const currentDate: Date = new Date() const currentDate: Date = new Date()
console.log("[MSG] message to render:", props.message); console.log("[MSG] message to render:", props.message);
console.log("author:", props.author); console.log("author:", props.message.member);
console.log("[MSG] reply message:", props.replyMessage); console.log("[MSG] reply message:", props.replyMessage);
const linkRegex = /https?:\/\/(?:www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b(?:[-a-zA-Z0-9()@:%_\+.~#?&\/=]*)/g; const linkRegex = /https?:\/\/(?:www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b(?:[-a-zA-Z0-9()@:%_\+.~#?&\/=]*)/g;
const linkMatches = props.message.message.matchAll(linkRegex).map(link => link[0]); const linkMatches = props.message.message.matchAll(linkRegex).map(link => link[0]);
const mediaLinks: string[] = []; const mediaLinks = ref<string[]>([]);
console.log("link matches:", linkMatches); console.log("link matches:", linkMatches);
const hasEmbed = ref(false); const hideText = ref(false);
const sanitized = ref<string>(); const sanitized = ref<string>();
onMounted(async () => { onMounted(async () => {
const parsed = await parse(props.text, { gfm: true }); const parsed = await parse(props.message.message, { gfm: true });
sanitized.value = DOMPurify.sanitize(parsed, { sanitized.value = DOMPurify.sanitize(parsed, {
ALLOWED_TAGS: [ ALLOWED_TAGS: [
"strong", "em", "br", "blockquote", "strong", "em", "br", "blockquote",
@ -121,23 +123,35 @@ onMounted(async () => {
console.log("added listeners"); console.log("added listeners");
} }
const links: string[] = [];
for (const link of linkMatches) { for (const link of linkMatches) {
console.log("link:", link); console.log("link:", link);
try { try {
const res = await $fetch.raw(link); const res = await $fetch.raw(link);
if (res.ok && res.headers.get("content-type")?.match(/^image\/(apng|gif|jpeg|png|webp)$/)) { if (res.ok && res.headers.get("content-type")?.match(/^image\/(apng|gif|jpeg|png|webp)$/)) {
console.log("link is image"); console.log("link is image");
mediaLinks.push(link); links.push(link);
}
} catch (error) {
console.error(error);
} }
if (mediaLinks.length) {
hasEmbed.value = true
};
} catch (error) {
console.error(error);
}
}
console.log("media links:", mediaLinks); mediaLinks.value = [...links];
}
if (mediaLinks.value.length) {
const nonLinks = props.message.message.split(linkRegex);
let invalidContent = false;
for (const nonLink of nonLinks) {
if (nonLink != "" && nonLink != "\n" && nonLink != "<br>") {
invalidContent = true;
break;
}
}
hideText.value = !invalidContent;
};
console.log("media links:", mediaLinks);
}); });
//function toggleTooltip(e: Event) { //function toggleTooltip(e: Event) {
@ -148,13 +162,13 @@ const menuItems: ContextMenuItem[] = [
{ name: "Reply", icon: "lucide:reply", type: "normal", callback: () => { if (messageElement.value) replyToMessage(messageElement.value, props) } } { name: "Reply", icon: "lucide:reply", type: "normal", callback: () => { if (messageElement.value) replyToMessage(messageElement.value, props) } }
] ]
console.log("me:", props.me); console.log("me:", me);
if (props.author?.user.uuid == props.me.uuid) { if (props.message.member.user.uuid == me!.uuid) {
// Inserts "edit" option at index 1 (below the "reply" option) // Inserts "edit" option at index 1 (below the "reply" option)
menuItems.splice(1, 0, { name: "Edit (WIP)", icon: "lucide:square-pen", type: "normal", callback: () => { /* if (messageElement.value) editMessage(messageElement.value, props) */ } }); menuItems.splice(1, 0, { name: "Edit (WIP)", icon: "lucide:square-pen", type: "normal", callback: () => { /* if (messageElement.value) editMessage(messageElement.value, props) */ } });
} }
if (props.author?.user.uuid == props.me.uuid /* || check message delete permission*/) { if (props.message.member.user.uuid == me!.uuid /* || check message delete permission*/) {
// Inserts "edit" option at index 2 (below the "edit" option) // Inserts "edit" option at index 2 (below the "edit" option)
menuItems.splice(2, 0, { name: "Delete (WIP)", icon: "lucide:trash", type: "danger", callback: () => {} }); menuItems.splice(2, 0, { name: "Delete (WIP)", icon: "lucide:trash", type: "danger", callback: () => {} });
} }
@ -174,14 +188,20 @@ function getDayDifference(date1: Date, date2: Date) {
<style scoped> <style scoped>
.message { .message {
text-align: left;
/* border: 1px solid lightcoral; */
display: grid; display: grid;
grid-template-columns: 2rem 1fr; grid-template-columns: 4rem 1fr;
align-items: center; align-items: center;
column-gap: 1dvw;
width: 100%; text-align: left;
/* -4 dvw due to 2dvw of padding on both sides */
width: calc(100% - 4dvw);
overflow-wrap: anywhere; overflow-wrap: anywhere;
padding-top: .2rem;
padding-bottom: .2rem;
padding-left: 2dvw;
padding-right: 1dvw;
border-radius: 0 var(--minor-radius) var(--minor-radius) 0;
} }
.message-reply-preview { .message-reply-preview {
@ -197,14 +217,6 @@ function getDayDifference(date1: Date, date2: Date) {
margin-top: 1dvh; margin-top: 1dvh;
} }
.grouped-message {
margin-top: .3em;
}
#last-message {
margin-bottom: 2dvh;
}
.message-metadata { .message-metadata {
display: flex; display: flex;
gap: .5dvw; gap: .5dvw;
@ -213,10 +225,9 @@ function getDayDifference(date1: Date, date2: Date) {
.message-data { .message-data {
/* border: 1px solid white; */ /* border: 1px solid white; */
margin-left: .5dvw;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
height: fit-content; height: 100%;
width: 100%; width: 100%;
grid-row: 2; grid-row: 2;
grid-column: 2; grid-column: 2;
@ -228,10 +239,10 @@ function getDayDifference(date1: Date, date2: Date) {
} }
.message-author-avatar { .message-author-avatar {
min-height: 2em; min-height: 2.5em;
max-height: 2em; max-height: 2.5em;
min-width: 2em; min-width: 2.5em;
max-width: 2em; max-width: 2.5em;
} }
.left-column { .left-column {
@ -242,8 +253,11 @@ function getDayDifference(date1: Date, date2: Date) {
white-space: nowrap; white-space: nowrap;
grid-row: 2; grid-row: 2;
grid-column: 1; grid-column: 1;
height: 100%;
align-items: start;
} }
.author-username { .author-username {
margin-right: .5dvw; margin-right: .5dvw;
color: white; color: white;
@ -257,9 +271,7 @@ function getDayDifference(date1: Date, date2: Date) {
.side-message-date { .side-message-date {
font-size: .625em; font-size: .625em;
display: flex; margin-top: .4em;
align-items: center;
align-content: center;
} }
/* /*
@ -269,11 +281,11 @@ function getDayDifference(date1: Date, date2: Date) {
} }
*/ */
.mentioned { .highlighted {
background-color: var(--chat-important-background-color); background-color: var(--chat-important-background-color);
} }
.mentioned:hover { .highlighted:hover {
background-color: var(--chat-important-highlighted-background-color); background-color: var(--chat-important-highlighted-background-color);
} }
@ -298,6 +310,7 @@ function getDayDifference(date1: Date, date2: Date) {
<style> <style>
/* class used in utils/replyToMessage.ts */
.replying-to { .replying-to {
background-color: var(--chat-featured-message-color); background-color: var(--chat-featured-message-color);
} }

21
components/MessageArea.vue
View file

@ -1,14 +1,12 @@
<template> <template>
<div id="message-area"> <div id="message-area">
<div id="messages" ref="messagesElement"> <div id="messages" ref="messagesElement">
<Message v-for="(message, i) of messages" :username="getDisplayName(message.member.user)" :key="message.uuid" <Message v-for="(message, i) of messages" :key="message.uuid"
:text="message.message" :timestamp="messageTimestamps[message.uuid]" :img="message.member.user.avatar"
:format="timeFormat" :type="messagesType[message.uuid]"
:margin-bottom="(messages[i + 1] && messagesType[messages[i + 1].uuid] == 'normal') ?? false"
:last="i == messages.length - 1" :message-id="message.uuid" :author="message.member" :me="me"
:message="message" :is-reply="message.reply_to" :message="message" :is-reply="message.reply_to"
:author-color="`${generateIrcColor(message.member.user.uuid)}`" :reply-message="message.reply_to ? getReplyMessage(message.reply_to) : undefined"
:reply-message="message.reply_to ? getReplyMessage(message.reply_to) : undefined" /> :type="messagesType[message.uuid]"
:editing="false"
:is-mentioned="false" />
</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">
@ -320,8 +318,6 @@ router.beforeEach((to, from, next) => {
#message-area { #message-area {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
padding-left: 1dvw;
padding-right: 1dvw;
overflow: hidden; overflow: hidden;
flex-grow: 1; flex-grow: 1;
} }
@ -329,8 +325,8 @@ router.beforeEach((to, from, next) => {
#message-box { #message-box {
margin-top: auto; /* force it to the bottom of the screen */ margin-top: auto; /* force it to the bottom of the screen */
margin-bottom: 2dvh; margin-bottom: 2dvh;
margin-left: 1dvw; margin-left: 2dvw;
margin-right: 1dvw; margin-right: 2dvw;
padding-left: 2%; padding-left: 2%;
padding-right: 2%; padding-right: 2%;
@ -382,8 +378,7 @@ router.beforeEach((to, from, next) => {
overflow-y: scroll; overflow-y: scroll;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
padding-left: 1dvw; padding-bottom: 1em;
padding-right: 1dvw;
} }
.message-box-button { .message-box-button {

14
components/MessageMedia.vue
View file

@ -1,6 +1,9 @@
<template> <template>
<div class="media-container"> <div class="media-container">
<NuxtImg v-for="link of props.links" class="media-item" :src="link" @click.prevent="createModal(link)" /> <NuxtImg v-for="link of props.links"
class="media-item"
:src="link"
@click.prevent="createModal(link)" />
</div> </div>
</template> </template>
@ -8,7 +11,6 @@
import { ModalBase } from '#components'; import { ModalBase } from '#components';
import { render } from 'vue'; import { render } from 'vue';
const props = defineProps<{ links: string[] }>(); const props = defineProps<{ links: string[] }>();
function createModal(link: string) { function createModal(link: string) {
@ -34,14 +36,14 @@ function createModal(link: string) {
<style scoped> <style scoped>
.media-container { .media-container {
grid-column: 2; display: flex;
grid-row: 3; flex-wrap: wrap;
margin-left: .5dvw; gap: .2rem;
max-width: 100%;
} }
.media-item { .media-item {
cursor: pointer; cursor: pointer;
max-width: 15dvw; max-width: 15dvw;
} }
</style> </style>

1
public/themes/layout/gorb.css
View file

@ -9,6 +9,7 @@ complementaryColor = white
--sidebar-icon-gap: .25em; --sidebar-icon-gap: .25em;
--sidebar-margin: .5em; --sidebar-margin: .5em;
--minor-radius: .35em;
--standard-radius: .5em; --standard-radius: .5em;
--button-radius: .6em; --button-radius: .6em;
--guild-icon-radius: 15%; --guild-icon-radius: 15%;

6
public/themes/style/ash.css
View file

@ -10,15 +10,15 @@ complementaryColor = white
--reply-text-color: #969696; --reply-text-color: #969696;
--danger-text-color: #ff0000; --danger-text-color: #ff0000;
--chat-background-color: #2f2e2d; --chat-background-color: #383432;
--chat-highlighted-background-color: #3f3b38; --chat-highlighted-background-color: #4c4a48;
--chat-important-background-color: #ffcf5f38; --chat-important-background-color: #ffcf5f38;
--chat-important-highlighted-background-color: #ffa86f4f; --chat-important-highlighted-background-color: #ffa86f4f;
--chat-featured-message-color: #4f3f2f60; --chat-featured-message-color: #4f3f2f60;
--popup-background-color: #2f2828; --popup-background-color: #2f2828;
--popup-highlighted-background-color: #382f2f; --popup-highlighted-background-color: #382f2f;
--sidebar-background-color: #3e3a37; --sidebar-background-color: #322f2d;
--sidebar-highlighted-background-color: #46423b; --sidebar-highlighted-background-color: #46423b;
--topbar-background-color: #3a3733; --topbar-background-color: #3a3733;
--chatbox-background-color: #3a3733; --chatbox-background-color: #3a3733;

8
public/themes/style/dark.css
View file

@ -10,16 +10,16 @@ complementaryColor = white
--reply-text-color: #969696; --reply-text-color: #969696;
--danger-text-color: #ff0000; --danger-text-color: #ff0000;
--chat-background-color: #1f1e1d; --chat-background-color: #282624;
--chat-highlighted-background-color: #2f2b28; --chat-highlighted-background-color: #383430;
--chat-important-background-color: #ffc44f2f; --chat-important-background-color: #ffc44f2f;
--chat-important-highlighted-background-color: #ffa45f4a; --chat-important-highlighted-background-color: #ffa45f4a;
--chat-featured-message-color: #4f2f1f58; --chat-featured-message-color: #4f2f1f58;
--popup-background-color: #2f1f1f; --popup-background-color: #2f1f1f;
--popup-highlighted-background-color: #3f2f2f; --popup-highlighted-background-color: #3f2f2f;
--sidebar-background-color: #2e2a27; --sidebar-background-color: #1f1e1d;
--sidebar-highlighted-background-color: #36322b; --sidebar-highlighted-background-color: #2f2b28;
--topbar-background-color: #2a2723; --topbar-background-color: #2a2723;
--chatbox-background-color: #1a1713; --chatbox-background-color: #1a1713;

8
public/themes/style/light.css
View file

@ -10,13 +10,13 @@ complementaryColor = black
--reply-text-color: #969696; --reply-text-color: #969696;
--danger-text-color: #ff0000; --danger-text-color: #ff0000;
--chat-background-color: #f0ebe8; --chat-background-color: #f0edeb;
--chat-highlighted-background-color: #e8e4e0; --chat-highlighted-background-color: #aba8a4;
--chat-important-background-color: #df5f0b26; --chat-important-background-color: #df5f0b26;
--chat-important-hightlighted-background-color: #df5f0b3d; --chat-important-hightlighted-background-color: #df5f0b3d;
--chat-featured-message-color: #e8ac841f; --chat-featured-message-color: #e8ac841f;
--popup-background-color: #e8e4e0; --popup-background-color: #b8b4b0;
--popup-highlighted-background-color: #dfdbd6; --popup-highlighted-background-color: #a6a4a2;
--sidebar-background-color: #dbd8d4; --sidebar-background-color: #dbd8d4;
--sidebar-highlighted-background-color: #d4d0ca; --sidebar-highlighted-background-color: #d4d0ca;

20
types/props.ts
View file

@ -1,21 +1,9 @@
import type { GuildMemberResponse, MessageResponse, UserResponse } from "./interfaces"; import type { MessageResponse, UserResponse } from "./interfaces";
export interface MessageProps { export interface MessageProps {
class?: string,
img?: string | null,
author: GuildMemberResponse
text: string,
timestamp: number,
format: "12" | "24",
type: "normal" | "grouped",
marginBottom: boolean,
authorColor: string,
last: boolean,
messageId: string,
replyingTo?: boolean,
editing?: boolean,
me: UserResponse
message: MessageResponse, message: MessageResponse,
replyMessage?: MessageResponse replyMessage?: MessageResponse,
type: "normal" | "grouped",
editing?: boolean,
isMentioned?: boolean, isMentioned?: boolean,
} }

2
utils/replyToMessage.ts
View file

@ -9,7 +9,7 @@ export default (element: HTMLDivElement, props: MessageProps) => {
const messageBox = document.getElementById("message-box") as HTMLDivElement; const messageBox = document.getElementById("message-box") as HTMLDivElement;
if (messageBox) { if (messageBox) {
const div = document.createElement("div"); const div = document.createElement("div");
const messageReply = h(MessageReply, { author: getDisplayName(props.author), text: props.text || "", id: props.message.uuid, replyId: props.replyMessage?.uuid || element.dataset.messageId!, maxWidth: "full" }); const messageReply = h(MessageReply, { author: getDisplayName(props.message.member), text: props.message.message || "", id: props.message.uuid, replyId: props.replyMessage?.uuid || element.dataset.messageId!, maxWidth: "full" });
messageBox.prepend(div); messageBox.prepend(div);
render(messageReply, div); render(messageReply, div);
const message = document.querySelector(`.message[data-message-id='${props.message.uuid}']`); const message = document.querySelector(`.message[data-message-id='${props.message.uuid}']`);