1 files changed, 34 insertions, 0 deletions
diff --git a/ui/lib/components/MessageRun.svelte b/ui/lib/components/MessageRun.svelte
new file mode 100644
index 0000000..0ecaabc
--- /dev/null
+++ b/ui/lib/components/MessageRun.svelte
@@ -0,0 +1,34 @@
+<script>
+    import { logins, currentUser } from '$lib/store';
+    import Message from '$lib/components/Message.svelte';
+
+    export let sender;
+    export let messages;
+
+    let name;
+    $: name = $logins.get(sender);
+    $: ownMessage = $currentUser.id == sender;
+</script>
+
+<div
+        class="card card-hover m-4 relative"
+        class:own-message={ownMessage}
+        class:other-message={!ownMessage}>
+    <span class="chip variant-soft sticky top-o left-0">
+        @{name}:
+    </span>
+    {#each messages as { at, body }}
+        <Message {at} {body} />
+    {/each}
+</div>
+
+<style>
+    .own-message {
+        width: 80%;
+        margin-right: auto;
+    }
+    .other-message {
+        width: 80%;
+        margin-left: auto;
+    }
+</style>