ChatMessageList (消息列表)

<script setup lang="ts">
import { ref } from 'vue'
import {
  DEMO_TZ,
  ME,
  demoReactions,
  demoUsers,
  makeDirectConversation,
  resolveDemoMedia,
} from '~/utils/chatDemo'

// A direct chat opened with unread messages: it opens at the "unread" divider,
// and `read` reports how far you have actually seen. Right-click (or long-press)
// a message for the menu; photos open in one lightbox for the whole chat.
const messages = ref(makeDirectConversation())
const readUpTo = ref(16)
</script>

<template>
  <div class="w-full border-default/20 flex h-[30rem] flex-col overflow-hidden rounded-kun-lg border">
    <KunChatMessageList
      class="bg-default-100 flex-1"
      :messages="messages"
      :users="demoUsers"
      :current-user-id="ME"
      :last-read-seq="16"
      :peer-read-seq="14"
      :reaction-options="demoReactions"
      :resolve-media-url="resolveDemoMedia"
      :time-zone="DEMO_TZ"
      @read="(seq) => (readUpTo = seq)"
    />
    <p class="text-default-500 border-default/20 border-t px-3 py-1.5 text-xs">
      已读到 seq {{ readUpTo }}
    </p>
  </div>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue'
import {
  DEMO_TZ,
  ME,
  demoReactions,
  demoUsers,
  makeGroupConversation,
  resolveDemoMedia,
} from '~/utils/chatDemo'

// A group: names on the first message of each run, the avatar beside the last,
// service messages as centred pills. Click the pinned bar to jump to the
// pinned message and see it flash.
const messages = ref(makeGroupConversation())
const pinned = computed(() => messages.value.filter((m) => m.pinned_at))
const list = ref<{ scrollToSeq: (seq: number) => boolean } | null>(null)
</script>

<template>
  <div class="w-full border-default/20 flex h-[30rem] flex-col overflow-hidden rounded-kun-lg border">
    <KunChatPinnedBar :messages="pinned" @jump="(seq) => list?.scrollToSeq(seq)" />
    <KunChatMessageList
      ref="list"
      class="bg-default-100 flex-1"
      kind="group"
      :messages="messages"
      :users="demoUsers"
      :current-user-id="ME"
      :reaction-options="demoReactions"
      :resolve-media-url="resolveDemoMedia"
      :time-zone="DEMO_TZ"
    />
  </div>
</template>

<script setup lang="ts">
import { computed, nextTick, onMounted, ref, shallowRef } from 'vue'
import type { KunChatMessage } from '@kungal/ui-vue'
import { ME, demoUsers, makeHistory, resolveDemoMedia } from '~/utils/chatDemo'

// Paging both ways, as the API does it (`before_seq`, `after_seq`,
// `around_seq`). Scroll up: older pages arrive above you and the view does not
// move. "跳到第 5 条" loads a window around a message that is not loaded — the
// list is then detached from the newest message (`has-newer`), and the
// scroll-down button brings the newest page back.
const PAGE = 30
const history = shallowRef<KunChatMessage[]>([])
const loaded = ref<KunChatMessage[]>([])
const loadingOlder = ref(false)
const loadingNewer = ref(false)
const list = ref<{ scrollToSeq: (seq: number) => boolean; scrollToBottom: () => void } | null>(null)

const first = computed(() => loaded.value[0]?.seq ?? 0)
const last = computed(() => loaded.value[loaded.value.length - 1]?.seq ?? 0)
const hasOlder = computed(() => first.value > 1)
const hasNewer = computed(() => last.value < history.value.length)
const slice = (from: number, to: number) => history.value.filter((m) => m.seq >= from && m.seq <= to)

onMounted(() => {
  history.value = makeHistory(400)
  loaded.value = slice(history.value.length - PAGE + 1, history.value.length)
})

const later = (fn: () => void) => setTimeout(fn, 500)
const loadOlder = () => {
  loadingOlder.value = true
  later(() => {
    loaded.value = [...slice(first.value - PAGE, first.value - 1), ...loaded.value]
    loadingOlder.value = false
  })
}
const loadNewer = () => {
  loadingNewer.value = true
  later(() => {
    loaded.value = [...loaded.value, ...slice(last.value + 1, last.value + PAGE)]
    loadingNewer.value = false
  })
}
const jump = async (seq: number) => {
  if (list.value?.scrollToSeq(seq)) return
  loaded.value = slice(seq - PAGE / 2, seq + PAGE / 2)
  await nextTick()
  list.value?.scrollToSeq(seq)
}
const latest = async () => {
  loaded.value = slice(history.value.length - PAGE + 1, history.value.length)
  await nextTick()
  list.value?.scrollToBottom()
}
</script>

<template>
  <div class="w-full border-default/20 flex h-[30rem] flex-col overflow-hidden rounded-kun-lg border">
    <div class="border-default/20 flex items-center gap-2 border-b px-3 py-2 text-sm">
      <KunButton size="sm" variant="flat" @click="jump(5)">跳到第 5 条</KunButton>
      <span class="text-default-500">已载入 seq {{ first }}–{{ last }},共 {{ history.length }} 条</span>
    </div>
    <KunChatMessageList
      ref="list"
      class="bg-default-100 flex-1"
      :messages="loaded"
      :users="demoUsers"
      :current-user-id="ME"
      :has-older="hasOlder"
      :has-newer="hasNewer"
      :loading-older="loadingOlder"
      :loading-newer="loadingNewer"
      :resolve-media-url="resolveDemoMedia"
      @load-older="loadOlder"
      @load-newer="loadNewer"
      @jump="jump"
      @latest="latest"
    >
      <template #start>
        <p class="text-default-500 py-4 text-center text-xs">这是你们对话的开始</p>
      </template>
    </KunChatMessageList>
  </div>
</template>

<script setup lang="ts">
import { nextTick, ref, shallowRef } from 'vue'
import type { KunChatMessage } from '@kungal/ui-vue'
import { ME, demoReactions, demoUsers, makeHistory, resolveDemoMedia } from '~/utils/chatDemo'

// Three thousand messages in one list. Rows off screen skip layout and paint
// (`content-visibility: auto`), so scrolling stays smooth without a
// virtualisation library; the button reports how long the first render took.
const messages = shallowRef<KunChatMessage[]>([])
const took = ref<number | null>(null)

const load = async (count: number) => {
  const start = performance.now()
  messages.value = makeHistory(count)
  await nextTick()
  requestAnimationFrame(() => (took.value = Math.round(performance.now() - start)))
}
</script>

<template>
  <div class="w-full border-default/20 flex h-[30rem] flex-col overflow-hidden rounded-kun-lg border">
    <div class="border-default/20 flex items-center gap-2 border-b px-3 py-2 text-sm">
      <KunButton size="sm" variant="flat" @click="load(3000)">载入 3000 条</KunButton>
      <span v-if="took !== null" class="text-default-500">
        {{ messages.length }} 条,首次渲染 {{ took }} ms
      </span>
    </div>
    <KunChatMessageList
      class="bg-default-100 flex-1"
      :messages="messages"
      :users="demoUsers"
      :current-user-id="ME"
      :reaction-options="demoReactions"
      :resolve-media-url="resolveDemoMedia"
    >
      <template #empty>点上面的按钮载入 3000 条消息</template>
    </KunChatMessageList>
  </div>
</template>