|
@@ -1,7 +1,7 @@
|
|
|
<template>
|
|
|
<div class="voice-assistant">
|
|
|
<!-- 聊天框 -->
|
|
|
- <el-scrollbar class="h100" noresize ref="scrollbarRef" max-height="400px" v-if="messageList.length">
|
|
|
+ <el-scrollbar class="h100" noresize ref="scrollbarRef" max-height="400px" v-if="messageList.length" @click="stopScroll">
|
|
|
<div class="chat-box" ref="chatBoxRef">
|
|
|
<div v-for="(item, index) in messageList" :key="index" class="chat-item" :class="item.body?.content?.callSentenceInfo?.role">
|
|
|
<div v-if="item.body?.content?.callSentenceInfo?.role === 'user'" class="user">
|
|
@@ -21,6 +21,9 @@
|
|
|
</div>
|
|
|
</el-scrollbar>
|
|
|
<Empty v-else />
|
|
|
+ <el-button @click.stop="keepScroll" class="keep-scroll" title="回到底部" circle v-if="!isScrollBottom">
|
|
|
+ <SvgIcon name="ele-ArrowDown" size="18px" />
|
|
|
+ </el-button>
|
|
|
<!-- 识别内容 通话结束才展示-->
|
|
|
<div class="recognize-box" v-if="talkEnd && messageList.length">
|
|
|
<transition name="el-zoom-in-bottom">
|
|
@@ -183,6 +186,9 @@ const wsReceive = (message: any) => {
|
|
|
talkEnd.value = true;
|
|
|
getRecognize();
|
|
|
scrollToBottom();
|
|
|
+ setTimeout(() => {
|
|
|
+ stopScroll();
|
|
|
+ }, 500);
|
|
|
}, 1000);
|
|
|
console.log('通话转写结束了');
|
|
|
}
|
|
@@ -207,13 +213,28 @@ const getRecognize = () => {
|
|
|
recognizeList.value = result;
|
|
|
});
|
|
|
};
|
|
|
+// 停止滚动
|
|
|
+const stopScroll = () => {
|
|
|
+ isScrollBottom.value = false;
|
|
|
+};
|
|
|
// 滚动到底部
|
|
|
+const isScrollBottom = ref(true); // 是否需要滚动到底部
|
|
|
+const isAutoScroll = ref(true); // 是否自动滚动
|
|
|
const scrollToBottom = async () => {
|
|
|
+ if (!isScrollBottom.value) return;
|
|
|
await nextTick(); // 等待 DOM 更新
|
|
|
const max = chatBoxRef.value?.clientHeight;
|
|
|
scrollbarRef.value?.setScrollTop(max);
|
|
|
+ isAutoScroll.value = true;
|
|
|
+};
|
|
|
+watch(messageList.value, () => {
|
|
|
+ scrollToBottom();
|
|
|
+});
|
|
|
+// 继续滚动
|
|
|
+const keepScroll = () => {
|
|
|
+ isScrollBottom.value = true;
|
|
|
+ scrollToBottom();
|
|
|
};
|
|
|
-
|
|
|
// 一键填单
|
|
|
const fillSingle = () => {
|
|
|
ElMessageBox.confirm(`确定要一键填单吗?填单后会覆盖之前填写的内容,请谨慎操作`, '提示', {
|
|
@@ -230,8 +251,25 @@ const fillSingle = () => {
|
|
|
})
|
|
|
.catch(() => {});
|
|
|
};
|
|
|
-watch(messageList.value, () => {
|
|
|
- scrollToBottom();
|
|
|
+// setInterval(() => {
|
|
|
+// messageList.value.push({
|
|
|
+// body: {
|
|
|
+// content: {
|
|
|
+// callSentenceInfo: {
|
|
|
+// text: '你好,我是小智,有什么可以帮您的吗?',
|
|
|
+// role: 'agent',
|
|
|
+// },
|
|
|
+// calledNumber: '1009',
|
|
|
+// callerNumber: '19136073037',
|
|
|
+// },
|
|
|
+// },
|
|
|
+// timestamps: new Date().getTime(),
|
|
|
+// });
|
|
|
+// }, 1000);
|
|
|
+onMounted(() => {
|
|
|
+ scrollbarRef.value.wrapRef.addEventListener('mousewheel', () => {
|
|
|
+ stopScroll();
|
|
|
+ });
|
|
|
});
|
|
|
</script>
|
|
|
|
|
@@ -241,10 +279,15 @@ watch(messageList.value, () => {
|
|
|
height: 100%;
|
|
|
min-height: 400px;
|
|
|
position: relative;
|
|
|
+ .keep-scroll {
|
|
|
+ position: absolute;
|
|
|
+ right: 10px;
|
|
|
+ bottom: 40px;
|
|
|
+ z-index: 100;
|
|
|
+ }
|
|
|
.chat-box {
|
|
|
width: 100%;
|
|
|
padding-bottom: 50px;
|
|
|
-
|
|
|
.agent {
|
|
|
justify-content: flex-end;
|
|
|
}
|