MessageList State

<template>
  <div :class="['im-message-list-container']">
    <!-- 消息列表 -->
    <div ref="messageListRef" class="message-list" @scroll="handleScroll">
      <div v-for="message in messageList" :key="message.ID" class="message-item">
        <div class="message-sender">{{ message.nick || message.from }}</div>
        <div class="message-content">
          <span v-if="message.type === MessageType.TEXT" class="text-message">{{ message.payload.text }}</span>
          <span v-else-if="message.type === MessageType.IMAGE" class="image-message">This is an image message</span>
          <span v-else-if="message.type === MessageType.CUSTOM" class="custom-message">This is a custom message</span>
          <span v-else>other message</span>
        </div>
        <div class="message-time">
          {{ new Date(message.time * 1000).toLocaleTimeString() }}
        </div>
      </div>
    </div>

    <!-- 空状态 -->
    <div v-if="!messageList || messageList?.length === 0" class="empty-state">
      暂无消息
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, watch, onMounted, nextTick } from 'vue';
import { useMessageListState, MessageType } from '@tencentcloud/chat-uikit-vue3';

const {
  messageList,
  hasMoreOlderMessage,
  loadMoreOlderMessage,
  isDisableScroll,
  setIsDisableScroll,
} = useMessageListState();

const isLoading = ref(false);
const messageListRef = ref<HTMLDivElement | null>(null);
const prevScrollHeight = ref(0);

// 加载更多消息
const handleLoadMore = async () => {
  if (isLoading.value || !hasMoreOlderMessage.value) {
    return;
  }

  isLoading.value = true;
  try {
    // 记录当前滚动高度
    if (messageListRef.value) {
      prevScrollHeight.value = messageListRef.value.scrollHeight;
    }

    await loadMoreOlderMessage();
  } catch (error) {
    console.error('加载更多消息失败:', error);
  } finally {
    isLoading.value = false;
  }
};

// 处理滚动事件
const handleScroll = (e: Event) => {
  const target = e.target as HTMLDivElement;
  const { scrollTop, scrollHeight, clientHeight } = target;

  // 检测是否滚动到顶部，触发加载更多
  if (scrollTop === 0 && hasMoreOlderMessage.value && !isLoading.value) {
    handleLoadMore();
  }

  // 检测用户是否在查看历史消息
  const isAtBottom = scrollTop + clientHeight >= scrollHeight - 10;
  setIsDisableScroll(!isAtBottom);
};

// 保持滚动位置（加载更多消息后）
watch(messageList, () => {
  nextTick(() => {
    if (messageListRef.value && prevScrollHeight.value > 0) {
      const newScrollHeight = messageListRef.value.scrollHeight;
      const scrollDiff = newScrollHeight - prevScrollHeight.value;
      messageListRef.value.scrollTop = scrollDiff;
      prevScrollHeight.value = 0;
    }
  });
});

// 自动滚动到底部（新消息到达时）
watch([messageList, isDisableScroll], () => {
  nextTick(() => {
    if (messageListRef.value && !isDisableScroll.value) {
      messageListRef.value.scrollTop = messageListRef.value.scrollHeight;
    }
  });
});

onMounted(() => {
  // 初始加载完成后滚动到底部
  nextTick(() => {
    if (messageListRef.value) {
      messageListRef.value.scrollTop = messageListRef.value.scrollHeight;
    }
  });
});
</script>

<style scoped lang="scss">
.im-message-list-container {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  overflow: auto hidden;
  height: 100%; // Ensure container has a height

  .message-list {
    flex: 1;
    overflow-y: auto;
    min-height: 0; // Important for flex container with overflow
    padding: 10px;

    .message-item {
      margin-bottom: 15px;
      padding: 10px;
      background: #f5f5f5;
      border-radius: 8px;

      .message-sender {
        font-weight: bold;
        color: #333;
        margin-bottom: 5px;
      }

      .message-content {
        color: #666;
        line-height: 1.5;
        margin-bottom: 5px;
      }

      .message-time {
        font-size: 12px;
        color: #999;
        text-align: right;
      }
    }
  }

  .empty-state {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #999;
    font-size: 14px;
  }
}
</style>

// MessageModel 接口定义，详细内容请参考 @tencentcloud/chat-uikit-engine 文档
// 这是一个复杂的消息模型，包含消息ID、类型、发送者、内容、时间、状态等属性。
// 示例结构 (非完整定义):
interface MessageModel {
  ID: string;
  conversationID: string;
  type: MessageType;
  payload: any;
  flow: 'in' | 'out';
  from: string;
  to: string;
  time: number; // Unix 时间戳 (秒)
  status: 'unSend' | 'success' | 'fail';
  isDeleted: boolean;
  isRevoked: boolean;
  hasRiskContent: boolean; // 是否包含风险内容
  // ... 其他属性
}