1 files changed, 25 insertions, 2 deletions
diff --git a/ui/lib/components/ActiveChannel.svelte b/ui/lib/components/ActiveChannel.svelte
index ece9f55..1b23bc1 100644
--- a/ui/lib/components/ActiveChannel.svelte
+++ b/ui/lib/components/ActiveChannel.svelte
@@ -1,10 +1,33 @@
 <script>
     import { messages } from '$lib/store';
     import Message from './Message.svelte';
+    import MessageRun from './MessageRun.svelte';
 
     export let channel = null;
     $: messageList = channel !== null ? $messages.inChannel(channel) : [];
 
+    function *chunkBy(xs, fn) {
+        let chunk;
+        let key;
+        for (let x of xs) {
+            let newKey = fn(x);
+            if (key !== newKey) {
+                if (chunk !== undefined) {
+                    yield [key, chunk];
+                }
+
+                chunk = [x];
+                key = newKey;
+            } else {
+                chunk.push(x);
+            }
+        }
+        if (chunk !== undefined) {
+            yield [key, chunk];
+        }
+    }
+
+
     let container;
     // TODO: eventually, store scroll height/last unread in channel? scroll there?
 
@@ -14,9 +37,9 @@
 </script>
 
 <div class="container" bind:this={container}>
-    {#each messageList as message}
+    {#each chunkBy(messageList, msg => msg.sender) as [sender, messages]}
         <div use:scroll>
-            <Message {...message} />
+            <MessageRun {sender} {messages} />
         </div>
     {/each}
 </div>