samuelandert.eth/auth.andert.me
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fixed messages to auto scroll to bottom

Browse Source
This commit is contained in:
Samuel Andert 2023-07-22 11:15:26 +02:00
parent 97fb57c659
commit 77a183a7c2
2 changed files with 16 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/lib/components/MessageInput.svelte
View File

@ -22,7 +22,7 @@
}
</script>
<footer class="fixed bottom-0 left-0 right-0 bg-white p-4 flex justify-end">
<footer class="bg-white p-4 flex justify-end">
<input
type="text"
class="flex-grow border rounded px-3 py-2 mr-2"

26
src/lib/components/Messages.svelte
View File

@ -1,24 +1,28 @@
<script>
import { messages, createMessage } from '$lib/services/messages';
import { onMount, afterUpdate } from 'svelte';
createMessage({
text: 'Component loaded',
sender: '$lib/components/Messages.svelte',
type: 'SYSTEM'
});
// Since messages is a store, we can subscribe to changes and store the latest messages in a variable
let latestMessages = [];
// Subscribe to the messages store to keep track of the latest messages
$: messages.subscribe((value) => {
messages.subscribe((value) => {
latestMessages = value;
});
let messagesContainer;
const scrollToBottom = () => {
if (messagesContainer) {
messagesContainer.scrollTop = messagesContainer.scrollHeight;
}
};
onMount(scrollToBottom);
afterUpdate(scrollToBottom);
</script>
<main class="p-4 overflow-y-auto h-full w-full">
<!-- Your messages, displayed in chronological order -->
<main bind:this={messagesContainer} class="p-4 overflow-y-auto h-full w-full">
{#each latestMessages as message}
<div class="bg-white p-3 rounded-lg shadow-lg mb-2">
<div class="bg-white p-3 rounded-lg shadow-lg mb-2 border-b border-gray-300">
<div class="flex items-center justify-between">
<p class="text-sm text-gray-600">
{message.type} | {message.sender}