<template>
|
<div ref="messageContainer" class="h-100% relative">
|
<div class="chat-list" v-for="(item, index) in list" :key="index">
|
<!-- 靠左 message：system、assistant 类型 -->
|
<div class="left-message message-item" v-if="item.type !== 'user'">
|
<div class="message">
|
<div class="left-text-container" ref="markdownViewRef">
|
<MarkdownView class="left-text" :content="item.thinking" />
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<!-- 回到底部 -->
|
<div v-if="isScrolling" class="to-bottom" @click="handleGoBottom">
|
<el-button :icon="ArrowDownBold" circle />
|
</div>
|
</template>
|
<script setup lang="ts">
|
import { PropType } from 'vue'
|
import MarkdownView from '@/components/MarkdownView/index.vue'
|
import { useClipboard } from '@vueuse/core'
|
import { ArrowDownBold} from '@element-plus/icons-vue'
|
import { ChatMessageVO } from '@/api/ai/chat/message'
|
import { ChatConversationVO } from '@/api/ai/chat/conversation'
|
import { useUserStore } from '@/store/modules/user'
|
|
const message = useMessage() // 消息弹窗
|
const { copy } = useClipboard() // 初始化 copy 到粘贴板
|
const userStore = useUserStore()
|
|
// 判断“消息列表”滚动的位置(用于判断是否需要滚动到消息最下方)
|
const messageContainer: any = ref(null)
|
const isScrolling = ref(false) //用于判断用户是否在滚动
|
|
// 定义 props
|
const props = defineProps({
|
conversation: {
|
type: Object as PropType<ChatConversationVO>,
|
required: true
|
},
|
list: {
|
type: Array as PropType<ChatMessageVO[]>,
|
required: true
|
}
|
})
|
|
const { list } = toRefs(props) // 消息列表
|
|
const emits = defineEmits(['onDeleteSuccess', 'onRefresh', 'onEdit']) // 定义 emits
|
|
// ============ 处理对话滚动 ==============
|
|
/** 滚动到底部 */
|
const scrollToBottom = async (isIgnore?: boolean) => {
|
// 注意要使用 nextTick 以免获取不到 dom
|
await nextTick()
|
if (isIgnore || !isScrolling.value) {
|
messageContainer.value.scrollTop =
|
messageContainer.value.scrollHeight - messageContainer.value.offsetHeight
|
}
|
}
|
|
function handleScroll() {
|
const scrollContainer = messageContainer.value
|
const scrollTop = scrollContainer.scrollTop
|
const scrollHeight = scrollContainer.scrollHeight
|
const offsetHeight = scrollContainer.offsetHeight
|
if (scrollTop + offsetHeight < scrollHeight - 100) {
|
// 用户开始滚动并在最底部之上，取消保持在最底部的效果
|
isScrolling.value = true
|
} else {
|
// 用户停止滚动并滚动到最底部，开启保持到最底部的效果
|
isScrolling.value = false
|
}
|
}
|
|
/** 回到底部 */
|
const handleGoBottom = async () => {
|
const scrollContainer = messageContainer.value
|
scrollContainer.scrollTop = scrollContainer.scrollHeight
|
}
|
|
/** 回到顶部 */
|
const handlerGoTop = async () => {
|
const scrollContainer = messageContainer.value
|
scrollContainer.scrollTop = 0
|
}
|
|
defineExpose({ scrollToBottom, handlerGoTop, handleGoBottom }) // 提供方法给 parent 调用
|
|
// ============ 处理消息操作 ==============
|
|
/** 刷新 */
|
const onRefresh = async (message: ChatMessageVO) => {
|
emits('onRefresh', message)
|
}
|
|
/** 编辑 */
|
const onEdit = async (message: ChatMessageVO) => {
|
emits('onEdit', message)
|
}
|
|
/** 初始化 */
|
onMounted(async () => {
|
messageContainer.value.addEventListener('scroll', handleScroll)
|
})
|
</script>
|
|
<style scoped lang="scss">
|
.message-container {
|
position: relative;
|
overflow-y: scroll;
|
}
|
|
// 中间
|
.chat-list {
|
display: flex;
|
flex-direction: column;
|
overflow-y: hidden;
|
padding: 0 20px;
|
.message-item {
|
margin-top: 30px;
|
}
|
|
.message {
|
display: flex;
|
flex-direction: column;
|
text-align: left;
|
height: 480px;
|
|
.left-text-container {
|
width: 855px;
|
height: 450px;
|
position: relative;
|
display: flex;
|
flex-direction: column;
|
overflow-wrap: break-word;
|
background: rgba(115,196,255,0.05);
|
border-radius: 4px 4px 4px 4px;
|
border-left: 1px solid #73C4FF;
|
padding: 10px 10px 5px 10px;
|
|
.left-text {
|
font-weight: 400;
|
font-size: 14px;
|
color: rgba(219,238,255,0.6);
|
}
|
}
|
|
}
|
|
// 复制、删除按钮
|
.btn-cus {
|
display: flex;
|
background-color: transparent;
|
align-items: center;
|
|
.btn-image {
|
height: 20px;
|
}
|
}
|
|
.btn-cus:hover {
|
cursor: pointer;
|
background-color: #f6f6f6;
|
}
|
}
|
|
// 回到底部
|
.to-bottom {
|
position: absolute;
|
z-index: 1000;
|
bottom: 0;
|
right: 50%;
|
}
|
</style>
|
