chat wip

new-client/src/widgets/chat/ui/ChatMessages.vue

@@ -0,0 +1,59 @@
+<template>
+  <div class="chat-messages">
+    <div v-if="messages" ref="scroll" class="chat-messages__list">
+      <template v-for="(page, pageIdx) in messages.pages" :key="pageIdx">
+        <ChatMessage v-for="message in page.messages" :key="message.id" :message="message" />
+      </template>
+    </div>
+
+    <ChadSpinner v-if="isFetching" class="chat-messages__spinner" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import ChadSpinner from '@shared/components/ui/Spinner.vue'
+import { useInfiniteScroll } from '@vueuse/core'
+import ChatMessage from '@widgets/chat/ui/ChatMessage.vue'
+import { useTemplateRef } from 'vue'
+import { useChat } from '../composables/use-chat'
+
+const scrollRef = useTemplateRef('scroll')
+
+const { messages, hasMoreMessages, fetchNextPage, isFetching } = useChat()
+
+useInfiniteScroll(
+  scrollRef,
+  () => {
+    fetchNextPage()
+  },
+  {
+    distance: 500,
+    direction: 'top',
+    interval: 300,
+    canLoadMore: () => hasMoreMessages.value && !isFetching.value,
+  },
+)
+</script>
+
+<style lang="scss">
+.chat-messages {
+  position: relative;
+  overflow: hidden;
+
+  &__spinner {
+    position: absolute;
+    top: var(--space-4);
+    left: 50%;
+    translate: -50% 0;
+    z-index: 1;
+  }
+
+  &__list {
+    overflow-y: auto;
+
+    display: flex;
+    flex-direction: column-reverse;
+    height: 100%;
+  }
+}
+</style>