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

feat: make chat scroll position to be at the bottom upon load

Browse source
This commit is contained in:
SauceyRed 2025-05-28 20:20:28 +02:00
parent c7b853230e
commit 19fcccfb5b
Signed by: sauceyred
GPG key ID: 270B096EF6E9A462
1 changed files with 17 additions and 20 deletions
Download patch file Download diff file Expand all files Collapse all files

37
components/MessageArea.vue
View file

@ -1,6 +1,6 @@
<template> <template>
<div id="message-area"> <div id="message-area">
<div id="messages"> <div id="messages" ref="messagesElement">
<Message v-for="message of messages" :username="displayNames[message.user_uuid]" :text="message.message" <Message v-for="message of messages" :username="displayNames[message.user_uuid]" :text="message.message"
:timestamp="uuidToTimestamp(message.uuid)" format="12" /> :timestamp="uuidToTimestamp(message.uuid)" format="12" />
</div> </div>
@ -29,7 +29,7 @@ if (messagesRes && props.reverse) {
messagesRes.reverse(); messagesRes.reverse();
} }
const messages = ref(messagesRes ?? []); const messages = ref<MessageResponse[]>([]);
const displayNames = ref<Record<string, string>>({}); const displayNames = ref<Record<string, string>>({});
@ -37,6 +37,18 @@ const route = useRoute();
const messageInput = ref<string>(); const messageInput = ref<string>();
const messagesElement = ref<HTMLDivElement>();
if (messagesRes) messages.value = messagesRes;
const displayNamesArr: Record<string, string> = {};
for (const message of messages.value) {
if (!displayNamesArr[message.user_uuid]) {
const displayName = await getDisplayName(message.user_uuid);
displayNamesArr[message.user_uuid] = displayName;
}
}
displayNames.value = displayNamesArr;
const accessToken = useCookie("access_token").value; const accessToken = useCookie("access_token").value;
const apiBase = useCookie("api_base").value; const apiBase = useCookie("api_base").value;
const { refresh } = useAuth(); const { refresh } = useAuth();
@ -88,14 +100,7 @@ function sendMessage(e: Event) {
} }
onMounted(async () => { onMounted(async () => {
const displayNamesArr: Record<string, string> = {}; messagesElement.value?.scrollTo({ top: messagesElement.value.scrollHeight });
for (const message of messages.value) {
if (!displayNamesArr[message.user_uuid]) {
const displayName = await getDisplayName(message.user_uuid);
displayNamesArr[message.user_uuid] = displayName;
}
}
displayNames.value = displayNamesArr;
}); });
</script> </script>
@ -117,17 +122,9 @@ onMounted(async () => {
#message-box { #message-box {
border: 1px solid rgb(70, 70, 70); border: 1px solid rgb(70, 70, 70);
padding-bottom: 1dvh;
padding-top: 1dvh;
margin-bottom: 1dvh; margin-bottom: 1dvh;
height: 7%;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
}
#message-form {
height: 50%;
width: 100%;
} }
#message-input { #message-input {