<template>
  <v-infinite-scroll
    class="mt-[-16px] overflow-hidden"
    :onLoad="props.loader"
  >
    <template v-for="item in props.messages" :key="item">
      <chat-message class="mb-4" :item="item" />
    </template>

    <template #empty>
      <div class="flex-grow-1"></div>
    </template>
  </v-infinite-scroll>
</template>

<script setup lang="ts">
import ChatMessage from "@/components/chat/ChatMessage.vue"

const props = defineProps<{ loader: (opts: any) => Promise<any>, messages: any[] }>()
</script>