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

Updated the Messages to the new abstracted composite syntax.

Browse Source
This commit is contained in:
Samuel Andert
2023-07-26 16:25:59 +02:00
parent 920e7b7ca1
commit 979251bd6b
15 changed files with 220 additions and 161 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,13 +1,10 @@
<script>
import { messages } from '$lib/services/messages';
import { onMount, afterUpdate } from 'svelte';
import Composite from '$lib/core/Composite.svelte';
let latestMessages = [];
export let store;
messages.subscribe((value) => {
latestMessages = value;
});
let isStoreLoaded = false;
let messagesContainer;
@ -24,24 +21,30 @@
afterUpdate(() => {
scrollToBottom();
});
$: if ($store) isStoreLoaded = true;
</script>
<main bind:this={messagesContainer} class="w-full h-full p-4 overflow-y-auto">
{#each latestMessages as message}
<div class="p-3 mb-2 bg-white border-b border-gray-300 rounded-lg shadow-lg">
<div class="flex items-center justify-between">
<p class="text-sm text-gray-600">
{message.type} | {message.sender}
</p>
<p class="text-xs text-gray-600">{message.timestamp}</p>
</div>
<p class="mt-2 text-base text-gray-800">{message.text}</p>
</div>
<!-- Render Composite Component -->
{#if message.composite}
<div class="overflow-y-auto max-h-80vh">
<Composite composite={message.composite} />
</div>
{/if}
{/each}
</main>
{#if isStoreLoaded}
{#if $store.messages}
<main bind:this={messagesContainer} class="w-full h-full p-4 overflow-y-auto">
{#each $store.messages as message}
<div class="p-3 mb-2 bg-white border-b border-gray-300 rounded-lg shadow-lg">
<div class="flex items-center justify-between">
<p class="text-sm text-gray-600">
{message.type} | {message.sender}
</p>
<p class="text-xs text-gray-600">{message.timestamp}</p>
</div>
<p class="mt-2 text-base text-gray-800">{message.text}</p>
</div>
{#if message.composite}
<div class="overflow-y-auto max-h-80vh">
<Composite composite={message.composite} />
</div>
{/if}
{/each}
</main>
{/if}
{:else}
<div>Loading...</div>
{/if}