xiangyuan-app/src/pages/home/chat/components/ChatMessageContainer.vue

<template>
  <FlexCol position="relative" width="100%" height="100%">
    <slot name="header" />
    <!--聊天内容-->
    <FlexCol flex="1" flexBasis="100%" :padding="20">
      <FlexRow
        v-if="historyItemsPagerManager && historyItemsPagerManager.hasMoreOlder.value"
        position="absolute"
        center
        :inset="{t:0,l:0,r:0}"
      >
        <Button
          size="small"
          :loading="historyItemsPagerManager.loadingMore.value"
          @click="() => historyItemsPagerManager!.loadOlder()"
        >
          加载更多
        </Button>
      </FlexRow>
      <ActivityIndicator v-if="historyItemsPagerManager?.loadingInit.value" />
      <scroll-view
        ref="scrollRectRef"
        scroll-y 
        :style="{ flex: 1, height, minHeight: height, maxHeight: height }"
        :scroll-top="scrollY"
      >
        <FlexCol gap="gap.sm">
          <FlexRow 
            v-if="sessionManager.currentSessionId.value === CHAT_SESSION_LOCAL_ID" 
            align="center"
            gap="gap.sm"
            :padding="[10,0]"
          >
            <Icon icon="warning" />
            您处于临时会话，离开后消息将丢失，请注意保存
          </FlexRow>
          <ChatMessage
            v-for="message in chatManager.messages.value"
            :key="message.id"
            :message="message"
            :isGlobalLoading="chatManager.isLoading.value"
            @delete="deleteMessage(message.id)"
            @action="chatManager.send($event)"
            @mulitSelect="emit('intoSelectMode', [message.id])"
          />
        </FlexCol>
      </scroll-view>
    </FlexCol>
    <!--聊天输入框-->
    <slot name="footer" />
    <slot />
  </FlexCol>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue';
import ChatMessage from './ChatMessage.vue';
import type { ChatInterfaceManager, ChatManager } from '../core/Chat';
import type { ChatHistoryItemsPagerManager } from '../composables/useChatHistoryItemsPager';
import { CHAT_SESSION_LOCAL_ID, type ChatSessionManager } from '../composables/useChatSession';
import FlexCol from '@/components/layout/FlexCol.vue';
import FlexRow from '@/components/layout/FlexRow.vue';
import Button from '@/components/basic/Button.vue';
import ActivityIndicator from '@/components/basic/ActivityIndicator.vue';
import Icon from '@/components/basic/Icon.vue';

export interface ChatMessageContainerExpose {
  scrollToBottom: () => void;
  stopMessageEditing: () => void;
}

const props = withDefaults(defineProps<{
  chatManager: ChatManager;
  sessionManager: ChatSessionManager;
  historyItemsPagerManager?: ChatHistoryItemsPagerManager;
  chatInterfaceManager: ChatInterfaceManager;
  height?: string;
}>(), {
  height: '40vh',
});

const emit = defineEmits<{
  (e: 'intoSelectMode', messageIds: number[]): void;
}>();

const scrollY = ref(0);

function deleteMessage(messageId: number) {
  props.sessionManager.onDeleteMessage(messageId);
}
function scrollToBottom() {
  scrollY.value = 10000 + Math.random() * 1000;
}

onMounted(() => {
  props.chatInterfaceManager.scrollToBottom = scrollToBottom;
});
defineExpose({
  scrollToBottom,
});
</script>

<style lang="scss">
</style>