<script>
  import MessageRun from './MessageRun.svelte';

  let { messageRuns, deleteMessage = async (id) => {} } = $props();

  $effect(() => {
    // This is just to force it to track messageRuns.
    const _ = messageRuns;
    document.querySelector('.message-run:last-child .message:last-child')?.scrollIntoView();
  });
</script>

{#each messageRuns as { sender, ownMessage, messages }}
  <MessageRun {sender} {ownMessage} {messages} {deleteMessage} />
{/each}
