第一部分：下拉刷新
我这里就把主要的下拉刷新的写一下，上拉是一样的道理，就不写了
<div class="talk_top" ref="listWrapper" id="listWrapper">
<div class="loadingpic" v-loading="loading"></div>
<div v-for="message in messages" :key="message.id" class="message">
<div class="minetext" v-html="message.text"></div>
</div>
</div><script>
export default {
data() {
return {
loading: false, // 加载中
messages:[],
}
},
mounted() {
this.$nextTick(() => {
this.getAiLogsByTopicId(); // 初始化数据
this.re();
});
},
methods: {
//这是放在mounted中获取初始数据
getAiLogsByTopicId() {
this.$axios
.get("/userApp/ai/getAiLogsByTopicId", {
params: {
TopicId: this.topic.topicId,
pageNum: 1,
pageSize: this.page.pageSize
}
})
.then(res => {
if (res.code === 200) {
this.messages = res.rows.reverse();
// console.log(res.rows);
this.total = Number(res.total);
}
});
},
//放在re()里面的数据接口
getlist() {
if (this.total >= this.messages.length) {
this.page.pageNum++;
this.loading = true;
this.$axios
.get("/userApp/ai/getAiLogsByTopicId", {
params: {
TopicId: this.topic.topicId,
pageNum: this.page.pageNum,
pageSize: this.page.pageSize
}
})
.then(res => {
if (res.code === 200) {
if (this.page.pageNum >= Number(res.allPage)) {
this.$message.success("数据到底啦");
this.loading = false;
return;
} else {
this.messages = [...res.rows.reverse(), ...this.messages];
this.total = Number(res.total);
// console.log(this.messages);
this.loading = false;
}
}
})
.catch(error => {
this.$message.error(error.msg);
this.loading = false;
});
} else {
this.$message.success("数据到底啦");
// this.showdown = true;
this.loading = false;
}
},
// 下拉、上拉刷新
re() {
var flag = false;
var PstartX;
var PstartY;
var PMoveX;
var PMoveY;
var PendX;
var PendY;
let that = this;
document.onmousedown = function(ev) {
flag = true;
PstartX = ev.pageX;
PstartY = ev.pageY;
// console.log("start:" + PstartX, PstartY);
document.onmousemove = function(ev) {
PMoveX = ev.pageX;
PMoveY = ev.pageY;
if (flag) {
// console.log("move:" + PMoveX, PMoveY);
var resutl = getpostion(PMoveY, PstartY);
switch (resutl) {
case 0:
// console.log("无操作");
break;
case 1:
// console.log("向上");
break;
case 2:
// console.log("向下");
if (PMoveY - PstartY > 0) {
if (PMoveY - PstartY >= 50) {
document.getElementById("listWrapper").style.marginTop =
PMoveY - PstartY + "px";
}
that.loading = true;
// document.getElementById("loadingpic").style.display = "block";
}
break;
}
}
};
document.onmouseup = function(ev) {
flag = false;
PendX = ev.pageX;
PendY = ev.pageY;
// console.log("end:" + PendX, PendY);
var resutl = getpostion(PMoveY, PstartY);
switch (resutl) {
case 0:
// console.log("无操作");
break;
case 1:
// console.log("向上");
break;
case 2:
// console.log("向下");
// location.reload();
setTimeout(() => {
that.getlist(); //调用接口
//回弹到初始位置
document.getElementById("listWrapper").style.marginTop = "0px";
}, 500);
break;
}
};
// 判断是上拉还是下拉
function getpostion(PMoveY, PstartY) {
if (PMoveY - PstartY == 0) {
return 0; //无操作
}
if (PMoveY - PstartY < 0) {
return 1; //向上
}
if (PMoveY - PstartY > 0) {
return 2; //向下
}
}
};
},
}
}
</script>在他的基础上修改了一下，他的上面有点小问题https://www.cnblogs.com/zmcxsf/p/10443189.html
第二部分：滚动条到底部
方法一
1、调用接口数据，然后调用re（）方法，如果不调用re方法，页面没反应
2、在 mounted中获取滚动区域的document，然后让调用方法，让盒子滚动到底部，这样页面一打开，滚动条就在底部了
3、监听滚动事件，判断用户滚动状态
<template>
<div class="chat">
<div class="center">
<div v-if="pasId === 0">
<div class="talk_history" id="chat">
<div class="talk_top" ref="listWrapper" id="listWrapper">
<div class="loadingpic" v-loading="loading"></div>
<div v-for="message in messages" :key="message.id" class="message">
。。。。内容
</div>
</div>
</div>
<div class="talk_huifu">
<div style="border-bottom:1px solid #f8f8f8;display:flex">
<el-upload
ref="upload"
class="upload-demo"
action="https://jsonplaceholder.typicode.com/posts/"
:show-file-list="false"
:file-list="fileList"
accept=".pdf"
:on-change="talkchange"
:http-request="http"
>
<img
style="margin:0 15px 0 10px"
src="../../assets/img/wenjianjia.png"
title="发送文件"
/>
</el-upload>
</div>
<div align="right">
<el-input
type="textarea"
v-model="talk"
:maxlength="4000"
:rows="3"
resize="none"
placeholder="有什么我可以帮您？"
></el-input>
<el-button size="medium" :disabled="disabled" @click="sub(0)"
>发送</el-button
>
</div>
</div>
</div>
</div>
</template>
<script>
let source = null;
var AIurl = "http://192.168.4.172:8081/userApp/ai/sse";
var resultUrl = "http://192.168.4.172:8081/userApp/ai/aiHelp";
import { EventSourcePolyfill } from "event-source-polyfill";
export default {
layout: "AI2",
name: "",
data() {
return {
disabled: false, //ai回答结束，按钮取消禁用
showdown: false, //数据到底啦
chatContent: null,
isScrolling: true,
loading: false, // 加载中
page: 1,
total: 0, //总条数
talk: "", //发送的聊天信息
len: true, //发送信息的次数
fileList: [], //发送文件
topic: {}, //新建对话的信息
word: {}, //文件的信息
messages: [], //聊天历史
page: {
pageNum: 0,
pageSize: 10
},
total: 0,
pasId: 0, //上一页的id
};
},
mounted() {
this.getAiLogsByTopicId(); // 初始化数据
this.re();
setTimeout(() => {
this.chatContent = document.getElementsByClassName("talk_top")[0];
this.scrollToBottom();
// 监听滚动事件，判断用户滚动状态
this.chatContent.addEventListener("scroll", this.handleScroll);
}, 1000);
},
watch: {
disabled: {
handler(newval, oldval) {
this.disabled = newval;
},
deep: true,
immediate: true
}
},
methods: {
// 定义将滚动条定位在底部的方法
scrollToBottom() {
var that = this;
this.$nextTick(() => {
if (that.isScrolling) {
that.chatContent.scrollTop =
that.chatContent.scrollHeight - that.chatContent.offsetHeight;
// console.log(that.chatContent.scrollTop);
}
});
},
handleScroll() {
const scrollContainer = this.chatContent;
const scrollTop = scrollContainer.scrollTop;
const scrollHeight = scrollContainer.scrollHeight;
const offsetHeight = scrollContainer.offsetHeight;
if (scrollTop + offsetHeight < scrollHeight) {
// 用户开始滚动并在最底部之上，取消保持在最底部的效果
this.isScrolling = true;
} else {
// 用户停止滚动并滚动到最底部，开启保持到最底部的效果
this.isScrolling = false;
}
},
// 发送对话---------------------------------------------------
// 加载数据对话
getAiLogsByTopicId() {
this.$axios
.get("/userApp/ai/getAiLogsByTopicId", {
params: {
TopicId: this.topic.topicId,
pageNum: 1,
pageSize: this.page.pageSize
}
})
.then(res => {
if (res.code === 200) {
this.messages = res.rows.reverse();
// console.log(res.rows);
this.total = Number(res.total);
}
});
},
getlist() {
if (this.total >= this.messages.length) {
this.page.pageNum++;
this.loading = true;
this.$axios
.get("/userApp/ai/getAiLogsByTopicId", {
params: {
TopicId: this.topic.topicId,
pageNum: this.page.pageNum,
pageSize: this.page.pageSize
}
})
.then(res => {
if (res.code === 200) {
if (this.page.pageNum >= Number(res.allPage)) {
this.$message.success("数据到底啦");
this.loading = false;
return;
} else {
this.messages = [...res.rows.reverse(), ...this.messages];
this.total = Number(res.total);
// console.log(this.messages);
this.loading = false;
}
}
})
.catch(error => {
this.$message.error(error.msg);
this.loading = false;
});
} else {
this.$message.success("数据到底啦");
// this.showdown = true;
this.loading = false;
}
},
// 下拉、上拉刷新
re() {
var flag = false;
var PstartX;
var PstartY;
var PMoveX;
var PMoveY;
var PendX;
var PendY;
let that = this;
document.onmousedown = function(ev) {
flag = true;
PstartX = ev.pageX;
PstartY = ev.pageY;
// console.log("start:" + PstartX, PstartY);
document.onmousemove = function(ev) {
PMoveX = ev.pageX;
PMoveY = ev.pageY;
if (flag) {
// console.log("move:" + PMoveX, PMoveY);
var resutl = getpostion(PMoveY, PstartY);
switch (resutl) {
case 0:
// console.log("无操作");
break;
case 1:
// console.log("向上");
break;
case 2:
// console.log("向下");
if (PMoveY - PstartY > 0) {
if (PMoveY - PstartY >= 50) {
document.getElementById("listWrapper").style.marginTop =
PMoveY - PstartY + "px";
}
that.loading = true;
// document.getElementById("loadingpic").style.display = "block";
}
break;
}
}
};
document.onmouseup = function(ev) {
flag = false;
PendX = ev.pageX;
PendY = ev.pageY;
// console.log("end:" + PendX, PendY);
var resutl = getpostion(PMoveY, PstartY);
switch (resutl) {
case 0:
// console.log("无操作");
break;
case 1:
// console.log("向上");
break;
case 2:
// console.log("向下");
// location.reload();
setTimeout(() => {
that.getlist(); //调用接口
//回弹到初始位置
document.getElementById("listWrapper").style.marginTop = "0px";
}, 500);
break;
}
};
// 判断是上拉还是下拉
function getpostion(PMoveY, PstartY) {
if (PMoveY - PstartY == 0) {
return 0; //无操作
}
if (PMoveY - PstartY < 0) {
return 1; //向上
}
if (PMoveY - PstartY > 0) {
return 2; //向下
}
}
};
},
sub(type) {
let that = this;
// 判断次数，在发送
if (type === 1) {
this.messages.push({
aiId: "", //编号
userId: "", //用户id
userAsk: "", //用户询问
aiReply: "", //ai回复
askTime: "", //询问时间
isPdf: true, //是否是pdf
fileName: this.word.fileName, //文件名称
fileSize: this.word.fileSize, //文件大小
aiTopicId: this.topic.topicId //话题编号
});
this.$message.success("请稍等，正在响应中");
this.load(this.messages[this.messages.length - 1], 1, that.chatContent);//调用接口
setTimeout(() => {
that.chatContent.scrollTop = that.chatContent.scrollHeight + 150;
}, 500);
this.word = {};
} else {
if (this.talk === "") {
this.$message.error("请填写内容");
} else {
this.messages.push({
aiId: "", //编号
userId: "", //用户id
userAsk: this.talk, //用户询问
aiReply: "", //ai回复
askTime: "", //询问时间
isPdf: false, //是否是pdf
fileName: null, //文件名称
fileSize: null, //文件大小
aiTopicId: this.topic.topicId //话题编号
});
this.$message.success("请稍等，正在响应中");
this.load(
this.messages[this.messages.length - 1],
0,
that.chatContent
);
setTimeout(() => {
that.chatContent.scrollTop = that.chatContent.scrollHeight + 150;
}, 500);
}
this.talk = "";
}
},
// 获取ai结果
load(item, type, chatContent) {
this.disabled = true;
if (type === 1) {
source = new EventSourcePolyfill(
Url +
"userApp/ai/sse?question=" +
this.word.fileDownloadPath +
"&fileName=" +
this.word.fileName +
"&fileSize=" +
this.word.fileSize +
"&isPdf=true&aiTopicId=" +
this.topic.topicId,
{
headers: {
token: this.$cookies.get("userToken")
}
}
);
} else {
source = new EventSourcePolyfill(
Url +
"userApp/ai/sse?question=" +
this.talk +
"&isPdf=false&aiTopicId=" +
this.topic.topicId,
{
headers: {
token: this.$cookies.get("userToken")
}
}
);
}
// open：订阅成功（和后端连接成功）
source.addEventListener("open", function(e) {});
source.onmessage = e => {
// console.log(JSON.parse(e.data));
if (JSON.parse(e.data).end) {
// 结束了
item.aiId = JSON.parse(e.data).end;
this.disabled = false;
return;
} else if (JSON.parse(e.data).error) {
this.$message.error(JSON.parse(e.data).error);
this.disabled = false;
return;
} else {
item.aiReply += JSON.parse(e.data).content.replace(/\\n/g, "\n");
if (this.isScrolling) {
chatContent.scrollTop = chatContent.scrollHeight;
}
}
};
source.onerror = event => {
if (event.error !== undefined) {
this.$message.error("出错了，请联系客服人员");
}
this.disabled = false;
event.target.close();
};
},
// 上传文件
talkchange(file, fileList) {
this.$refs.upload.uploadFiles = [];
this.fileList = [];
this.fileList = fileList;
},
async http(file, fileList) {
var formData = new FormData();
formData.append("files", file.file);
this.$axios.post("/dev/file/uploadFile", formData).then(res => {
if (res.code === 200) {
this.word = {
fileName: res.data[0].fileName,
fileSize: res.data[0].fileSize,
fileDownloadPath: res.data[0].fileDownloadPath
};
// this.$message.success("上传成功");
this.sub(1);
}
});
},
}
};
</script>方法二
如果在流式数据中使用，需要添加判断条件，如果滚动条在底部就滚动，否则不滚动
if (that.isScrolling) {
that.scrollToBottom()
}
<template>
<div id="Mindopt" class="Mindopt">
<div id="right_AI" class="right_AI">
<div
style="text-align: left; margin-bottom: 20px"
v-for="(ele, index) in messages"
:key="index"
>
<div class="box1" v-if="ele.content"></div>
<div class="box2" v-if="ele.reply_content"></div>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'Mindopt',
data () {
return {
isScrolling: true,
oldScrollTop: 0,
}
},
watch: {
messages: {
handler (val) {
this.scrollToBottom()
},
deep: true
}
},
mounted () {
document.querySelector('#right_AI').addEventListener('scroll', this.handleScroll)
},
created () {
this.chatMemory();
},
methods: {
// 定义将滚动条定位在底部的方法
scrollToBottom () {
this.$nextTick(() => {
if (this.isScrolling) {
var container = this.$el.querySelector('#right_AI')
container.scrollTop = container.scrollHeight
}
})
},
handleScroll () {
let scrollTop = document.querySelector('#right_AI').scrollTop
// 更新——滚动前，滚动条距文档顶部的距离
let scrollStep = scrollTop - this.oldScrollTop
this.oldScrollTop = scrollTop
//判断当前是向上or向下滚动
if (scrollStep < 0) {
//向上
this.isScrolling = false
} else {
this.isScrolling = true
}
},
// 获取当前对话历史
async chatMemory () {
axios
.get(this.$globalPath + "agent/info/1", {
headers: {
Authorization: getToken(),
},
})
.then((response) => {
this.messages = response.data.data.messages;
// 为了防止图片在加载中，然后不能及时获取到高度，以至于滚动条不到底部
setTimeout(() => {
this.scrollToBottom()
}, 1000)
})
.catch((error) => {
// 处理错误情况
console.error(error);
});
},
}
}
</script>
三、流式数据
没有下拉刷新，就只是流式数据对话，
发送对话，滚动条到底部，ai回答的时候出现省略号闪烁。
上传多个文件并显示文件列表
第一种方法：使用new XMLHttpRequest()
<template>
<div id="BotsLook" class="BotsLook">
<!-- 左侧对话内容 -->
<div style="display: flex; width: 100vw; height: calc(100% - 80px)">
<div class="left">
<div
class="content"
id="AIleft"
:style="{
height:
uploadList.length > 0
? `calc(100% - 200px)`
: `calc(100% - 110px)`,
}"
>
<div
style="text-align: left; margin-bottom: 20px"
v-for="(ele, index) in ansterList"
:key="index"
>
<div v-if="ele.files">
<div style="margin-bottom: 20px">
<div
style="
display: flex;
margin-bottom: 5px;
line-height: 32px;
font-size: 14px;
font-weight: 600;
"
>
<img :src="avatar" class="left_box_content_lizi_avaterImg" />
<span>{{ info.nick_name }}</span>
</div>
<div v-if="Array.isArray(ele.files)">
<div
class="wenjian_box_show"
style="margin-left: 32px"
v-for="(obj, ind) in ele.files"
:key="ind"
>
<div style="display: flex">
<img
:src="imgs(obj.file_name)"
style="width: 30px; height: 36px"
/>
<div style="width: 82%">
<div class="wenjian_box_name">
{{ obj.file_name }}
</div>
<div style="font-size: 12px">
{{ obj.file_size | sizeTostr }}
</div>
</div>
</div>
</div>
</div>
<div v-else class="wenjian_box_show" style="margin-left: 32px">
<div style="display: flex">
<img
:src="imgs(ele.files.file_name)"
style="width: 30px; height: 40px"
/>
<div style="width: 82%">
<div class="wenjian_box_name">
{{ ele.files.file_name }}
</div>
<div style="font-size: 12px">
{{ ele.files.file_size | sizeTostr }}
</div>
</div>
</div>
</div>
<div>
<div
v-if="ele.content"
class="left_box_content_anster"
:style="{
'margin-left': '32px',
}"
v-html="ele.content"
></div>
</div>
</div>
</div>
<div v-else>
<div v-if="ele.content" style="margin-bottom: 20px">
<div
style="
display: flex;
margin-bottom: 5px;
line-height: 32px;
font-size: 14px;
font-weight: 600;
"
>
<img :src="avatar" class="left_box_content_lizi_avaterImg" />
<span>{{ info.nick_name }}</span>
</div>
<div
class="left_box_content_anster"
style="margin-left: 32px"
v-html="ele.content"
></div>
</div>
</div>
<div style="margin-bottom: 20px">
<div
style="
display: flex;
margin-bottom: 5px;
line-height: 32px;
font-size: 14px;
font-weight: 600;
"
>
<img
:src="BotsInfo.ico"
class="left_box_content_lizi_avaterImg"
/>
<span>{{ BotsInfo.name }}</span>
</div>
<div
v-if="ele.reply_content"
style="display: inline-block; max-width: 100%"
class="imghover"
>
<div
v-highlight
class="left_box_content_lizi_AI markdown-body"
style="margin-left: 32px"
v-html="ele.reply_content"
></div>
</div>
</div>
</div>
<div
v-if="overdot"
class="left_box_content_lizi_AI"
style="margin-left: 32px; padding: 12px"
>
<span class="dot">•••</span>
</div>
</div>
<!-- 停止响应 -->
<div v-if="over" style="margin: auto; width: 100px">
<el-button
:style="{
position: 'absolute',
bottom: uploadList.length > 0 ? '190px' : '100px',
}"
@click="overBtn"
>{{ $t('Stop') }}</el-button
>
</div>
<!-- 输入框+文件 -->
<div class="left_box_inpt">
<div class="right_box_inpt_wenjian" v-if="uploadList.length > 0">
<div class="wenjian_far_box">
<div
class="wenjian_box"
style="position: relative"
v-for="(ele, index) in uploadList"
:key="index"
>
<div v-if="imgs(ele.file.name) === 'image'">
<img :src="ele.location" style="width: 30px; height: 36px" />
</div>
<div v-else style="display: flex">
<img
:src="imgs(ele.file.name)"
style="width: 30px; height: 36px"
/>
<div style="width: 65%">
<div class="wenjian_box_name">
{{ ele.file.name }}
</div>
<div style="font-size: 12px" v-if="!ele.progressFlag">
{{ ele.file.size | sizeTostr }}
</div>
<div style="font-size: 12px" v-if="ele.progressFlag">
{{ ele.progress }}%
</div>
</div>
</div>
<el-button
@click="deleteUpload(ele, index)"
type="text"
class="subbtn wenjian_btn"
icon="el-icon-error"
>
</el-button>
<div v-if="ele.progressFlag" class="mask"></div>
</div>
</div>
<div style="display: flex">
<el-input
v-model="memory"
@input="oninput"
@keyup.enter.native="sub()"
>
</el-input>
<div style="display: flex; line-height: 50px; padding: 0 10px">
<el-tooltip
class="item"
effect="dark"
:content="$t('upload')"
placement="top"
>
<el-upload
ref="upload"
action="#"
multiple
:http-request="httpRequest"
:before-upload="beforeUpload"
:show-file-list="false"
accept=".pdf,docx,.xls,.xlsx"
>
<el-button
class="subbtn"
type="text"
style="padding: 17px 0"
icon="el-icon-circle-plus-outline"
>
</el-button>
</el-upload>
</el-tooltip>
<span
style="
width: 1px;
height: 15px;
background-color: #dcdfe6;
margin: auto 10px;
"
></span>
<el-tooltip
class="item"
effect="dark"
:content="$t('send')"
placement="top"
>
<el-button
:disabled="BtnDisabled"
class="subbtn"
type="text"
@click="sub()"
>
<img
v-if="BtnDisabled"
src="@/assets/right1.png"
style="width: 15px"
/>
<img v-else src="@/assets/right3.png" style="width: 15px" />
</el-button>
</el-tooltip>
</div>
</div>
</div>
<div class="right_box_inpt" v-else>
<el-input
v-model="memory"
@input="oninput"
@keyup.enter.native="sub()"
>
</el-input>
<div style="display: flex; line-height: 50px; padding: 0 10px">
<el-tooltip
class="item"
effect="dark"
:content="$t('upload')"
placement="top"
>
<el-upload
ref="upload"
action="#"
multiple
:http-request="httpRequest"
:before-upload="beforeUpload"
:show-file-list="false"
accept=".pdf,docx,.xls,.xlsx"
>
<el-button
class="subbtn"
type="text"
style="padding: 17px 0"
icon="el-icon-circle-plus-outline"
>
</el-button>
</el-upload>
</el-tooltip>
<span
style="
width: 1px;
height: 15px;
background-color: #dcdfe6;
margin: auto 10px;
"
></span>
<el-tooltip
class="item"
effect="dark"
:content="$t('send')"
placement="top"
>
<el-button
:disabled="BtnDisabled"
class="subbtn"
type="text"
@click="sub()"
>
<img
v-if="BtnDisabled"
src="@/assets/right1.png"
style="width: 15px"
/>
<img v-else src="@/assets/right3.png" style="width: 15px" />
</el-button>
</el-tooltip>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import axios from "axios";
import { getToken } from "@/utils/auth";
import { matchType } from "@/utils/index";
import { mapGetters } from "vuex";
import { marked } from "marked";
// import hljs from "highlight.js";
// 两个地方
var xhr = new XMLHttpRequest();
export default {
computed: {
...mapGetters(["sidebar", "avatar", "name", "info"]),
},
data () {
return {
active: null,
BotsInfo: {
plugins: [],
private: [],
},
memory: "", //发送信息
ansterList: [],
over: false, //停止响应
overdot: false, //省略号是否显示
BtnDisabled: true, //发送按钮
isScrolling: true,
starttoolTime: 0, // 工具开始时间
startTime: 0, // 模型开始时间
endTime: 0, // 结束时间
uploadList: [],
loading: false, //文件上传中
dicshow: true,
dicshowBtn: false,
tooltipIsShow: false,
uniqueArr: [],
shareData: {
qr_code: "",
url: ""
},
loading: true,
oldScrollTop: 0
};
},
filters: {
sizeTostr: function (val) {
if (val === 0) return "0 B";
var k = 1024;
var sizes = ["B", "KB", "MB", "GB", "PB", "TB", "EB", "ZB", "YB"],
i = Math.floor(Math.log(val) / Math.log(k));
return (val / Math.pow(k, i)).toPrecision(3) + "" + sizes[i];
},
},
watch: {
ansterList: {
handler (val) {
this.scrollToBottom()
},
deep: true
}
},
created () {
this.agentBotInfo();
},
mounted () {
document.querySelector('#AIleft').addEventListener('scroll', this.handleScroll)
setTimeout(() => {
const dom = this.$el.querySelector("#rightdicshow")
const dicFather = this.$el.querySelector("#dicFather")
const domScrollWidth = dom && dom.scrollWidth
const domClientWidth = dicFather && dicFather.clientWidth
this.tooltipIsShow = (domScrollWidth + 62) === domClientWidth
}, 100);
},
beforeDestroy () {
xhr.abort();
this.overdot = false;
this.over = false;
this.BtnDisabled = false;
this.memory = "";
},
methods: {
// 定义将滚动条定位在底部的方法
scrollToBottom () {
this.$nextTick(() => {
if (this.isScrolling) {
var container = this.$el.querySelector('#AIleft')
container.scrollTop = container.scrollHeight
}
})
},
handleScroll () {
let scrollTop = document.querySelector('#AIleft').scrollTop
// 更新——滚动前，滚动条距文档顶部的距离
let scrollStep = scrollTop - this.oldScrollTop
this.oldScrollTop = scrollTop
//判断当前是向上or向下滚动
if (scrollStep < 0) {
//向上
this.isScrolling = false
} else {
this.isScrolling = true
}
},
// 获取详情
agentBotInfo () {
axios
.get(
this.$globalPath + "agent/info/" + JSON.parse(this.$route_query.id),
{
headers: {
Authorization: getToken(),
},
}
)
.then((response) => {
this.BotsInfo = response.data.data;
this.ansterList = this.BotsInfo.messages;
if (this.ansterList.length > 0) {
this.ansterList.forEach((i) => {
i.text = i.reply_content;
if (i.reply_content) {
// 创建自定义渲染器
class CustomRenderer extends marked.Renderer {
heading (text, level) {
// 将一级标题转换为h1标签
if (level === 1) {
return `<div class="hClass"># ${text}</div>`;
} else if (level === 2) {
return `<div class="hClass">## ${text}</div>`;
} else if (level === 3) {
return `<div class="hClass">### ${text}</div>`;
} else if (level === 4) {
return `<div class="hClass">#### ${text}</div>`;
} else if (level === 5) {
return `<div class="hClass">##### ${text}</div>`;
} else if (level === 6) {
return `<div class="hClass">###### ${text}</div>`;
}
}
}
// 使用自定义渲染器
const renderer = new CustomRenderer();
i.reply_content = marked(i.reply_content, {
renderer: renderer,
breaks: true,
});
// i.reply_content = marked(i.reply_content);
}
});
}
})
.catch((error) => {
// 处理错误情况
console.error(error);
});
},
// 对话-----------------------------------------------------------------------------------
// 根据文件名，判断后缀名格式，然后返回对应的图片
imgs (val) {
let text = matchType(val);
if (text === "pdf") {
return require("@/assets/pdf.svg");
} else if (text === "image") {
return text;
} else if (text === "excel") {
return require("@/assets/excel.svg");
} else if (text === "word") {
return require("@/assets/word.svg");
}
},
// 上传文件前
beforeUpload (file) {
// 限制文件大小和pdf不能超过250页
const fileLi = {};
for (const key in file) {
fileLi[key] = file[key];
}
const isLt2M = file.size > 10 * 1024 * 1024;
let fileType = file.name.substring(file.name.lastIndexOf(".") + 1);
const istype = ["pdf", "docx", "xls", "xlsx"].includes(fileType);
if (!istype) {
this.$message.error(this.$t("uploadType"));
return false;
}
if (isLt2M) {
this.$message.error(this.$t("uploadLt2M"));
return false;
}
if (istype && !isLt2M) {
this.uploadList.push({
file: fileLi,
progress: 0,
status: "ready",
location: "",
progressFlag: false,
local_file_url: "",
});
// this.loading = true;
}
return istype && !isLt2M;
},
async httpRequest (file, callback) {
this.BtnDisabled = true;
let formdata = new FormData();
formdata.append("file", file.file);
this.uploadList.forEach((i) => {
if (i.file.uid === file.file.uid) {
i.progressFlag = true;
}
});
axios({
url: this.$globalPath + "upload/kimi_upload",
method: "post",
data: formdata,
headers: {
"Content-Type": "multipart/form-data",
Authorization: getToken(),
},
onUploadProgress: (progressEvent) => {
// progressEvent.loaded:已上传文件大小
// progressEvent.total:被上传文件的总大小
this.uploadList.forEach((i) => {
if (i.file.uid === file.file.uid) {
i.progress = (progressEvent.loaded / progressEvent.total) * 100;
}
});
// this.uploadList[0].progress =
// (progressEvent.loaded / progressEvent.total) * 100;
},
}).then((response) => {
if (response.status === 200) {
this.uploadList.forEach((i) => {
if (i.file.uid === file.file.uid) {
i.status = "success";
i.file_id = response.data.file_id;
i.location = response.data.file_location;
i.local_file_url = response.data.local_file_url;
if (i.progress === 100) {
i.progressFlag = false;
}
}
});
} else {
this.uploadList.forEach((i) => {
if (i.file.uid === file.file.uid) {
i.status = "error";
this.uploadList.splice(index, 1);
}
});
}
let a = this.uploadList.every((item) => !item.progressFlag);
if (a) {
this.BtnDisabled = false;
}
});
},
// 删除文件
deleteUpload (ele, index) {
this.uploadList.splice(index, 1);
if (this.memory === "" && this.uploadList.length === 0) {
this.BtnDisabled = true;
}
},
// 监听输入框
oninput (e) {
if (e !== "") {
this.BtnDisabled = false;
} else {
this.BtnDisabled = true;
}
},
// 停止回响
overBtn () {
xhr.abort();
this.overdot = false;
this.over = false;
this.BtnDisabled = false;
this.memory = "";
this.ansterList[this.ansterList.length - 1].reply_content = "";
},
// 发送对话
sub (ele) {
let that = this;
if (ele) {
// 输入的内容
this.ansterList.push({
reply_content: "", //ai回复内容
// id: null,
// appid: 1, //应用编号 首页对话为1
// role: "user", //user=正常对话 system=预设内容
content: ele, //对话内容
userid: this.info.id, //当前用户
toolshow: false, //是否调用工具
tool: 0, //0是正在调用，1是已调用，2是运行完毕，3是展示运行结果
modelTime: 0, //模型时间
toolTime: 0, //工具时间
Time: 0, //总时间
toolName: "", //工具名称
toolText: false,
});
} else {
if (this.uploadList.length === 0) {
// 输入的内容
this.ansterList.push({
reply_content: "", //ai回复内容
content: this.memory, //对话内容
userid: this.info.id, //当前用户
toolshow: false,
tool: 0,
modelTime: 0, //模型时间
toolTime: 0, //工具时间
Time: 0,
toolName: "",
toolText: false,
});
} else {
const files = [];
this.uploadList.forEach((i) => {
files.push({
file_name: i.file.name, //文件名
file_size: i.file.size, //文件大小
file_url: i.location,
file_id: i.file_id,
local_file_url: i.local_file_url,
});
});
// 上传文件
this.ansterList.push({
reply_content: "", //ai回复内容
content: this.memory, //对话内容
userid: this.info.id, //当前用户
toolshow: false,
tool: 0,
modelTime: 0, //模型时间
toolTime: 0, //工具时间
Time: 0,
toolName: "",
toolText: false,
files: files,
});
}
}
const tijiao = {
id: this.BotsInfo.id,
memory: ele ? ele : this.memory, //对话内容
};
if (this.uploadList.length > 0) {
tijiao.files = [];
this.uploadList.forEach((i) => {
tijiao.files.push({
file_name: i.file.name, //文件名
file_size: i.file.size, //文件大小
file_url: i.location,
file_id: i.file_id,
local_file_url: i.local_file_url,
});
});
}
// console.log(tijiao);
setTimeout(() => {
this.load(
this.ansterList[this.ansterList.length - 1],
that.chatContent,
tijiao
);
}, 500);
},
// 获取ai结果
async load (item, chatContent, tijiao) {
this.startTime = 0;
this.startTime = new Date().getTime();
this.overdot = true;
this.over = true;
this.BtnDisabled = true;
this.memory = "";
this.uploadList = [];
const that = this;
let toolList = [];
if (that.isScrolling) {
that.scrollToBottom()
}
xhr.open("POST", this.$globalPath + "agent/public_chat", true);
xhr.setRequestHeader("Content-Type", "application/json");
xhr.setRequestHeader("Authorization", getToken());
xhr.onreadystatechange = function () {
// console.log(xhr);
if (xhr.readyState === 4 && xhr.status === 200) {
console.log("读取完毕");
// var result = xhr.responseText;
// console.log(result);
that.over = false;
that.overdot = false;
} else if (xhr.status !== 200 && xhr.status !== 0) {
console.log("HTTP 错误:" + xhr.status);
that.over = false;
that.overdot = false;
} else if (xhr.status === 0 && xhr.readyState !== 4) {
this.overdot = true;
this.over = true;
} else if (xhr.status === 0 && xhr.readyState === 4) {
that.over = false;
that.overdot = false;
that.$message({
message: this.$t("errorsub"),
type: "error",
});
}
};
xhr.onprogress = function (e) {
// console.log("onprogress", e);
//每次数据到达都会触发
var response = e.currentTarget.response;
if (response.slice(-6) == "[done]") {
// 这里做当收到'[done]'时的处理
console.log("成功完成!");
that.over = false;
that.overdot = false;
// item.reply_content = 'load1' + response
} else if (response.substr(0, 6) === "开始工具调用") {
item.toolshow = true;
item.tool = 0;
that.$forceUpdate();
that.starttoolTime = 0;
that.starttoolTime = new Date().getTime();
let coli = response.substring(response.lastIndexOf("正在调用"));
item.toolName = coli.substr(0, coli.indexOf(",")).substr(4);
let str = response.substring(6, response.indexOf("正在调用"));
that.toolRun(item, chatContent, str);
} else if (response.startsWith("多工具调用")) {
// console.log(response);
let aa = response.slice(6);
// 获取工具，too->开头，s\n结尾的
const toolRegex = /tool->([\s\S]+?)s\n/g;
if (aa.match(toolRegex) && aa.match(toolRegex).length > 0) {
// 去重
toolList = aa.match(toolRegex).filter((item, index, self) => {
return index === self.findIndex((obj) => obj === item);
});
that.uniqueArr = [];
// 去除开头tool->,结尾s\n
toolList.forEach((i) => {
i = i.slice(6, -2);
that.uniqueArr.push(i.split("|"));
});
if (that.uniqueArr.length > 0) {
item.toolName = that.uniqueArr[0][0];
// that.uniqueArr.forEach((j) => {
// item.toolName = j[0];
// item.toolshow = true;
// item.tool = 0;
// });
if (item.toolName) {
item.toolshow = true;
item.tool = 0;
}
}
// 去除插件的部分，保留回答的内容
let abc = null;
abc = toolList.join(" ");
// 创建自定义渲染器
class CustomRenderer extends marked.Renderer {
heading (text, level) {
// 将一级标题转换为h1标签
if (level === 1) {
return `<div class="hClass"># ${text}</div>`;
} else if (level === 2) {
return `<div class="hClass">## ${text}</div>`;
} else if (level === 3) {
return `<div class="hClass">### ${text}</div>`;
} else if (level === 4) {
return `<div class="hClass">#### ${text}</div>`;
} else if (level === 5) {
return `<div class="hClass">##### ${text}</div>`;
} else if (level === 6) {
return `<div class="hClass">###### ${text}</div>`;
}
}
}
// 使用自定义渲染器
const renderer = new CustomRenderer();
const lastcont = aa.slice(abc.length - 1);
if (lastcont.trim().length > 0) {
item.tool = 2;
item.Time = 0;
item.modelTime = 0;
item.toolTime = 0;
that.uniqueArr.forEach((i) => {
item.Time += Number(i[1].slice(0, -1));
item.modelTime += Number(i[2].slice(2, -1));
item.toolTime += Number(i[3].slice(2));
});
item.Time = item.Time.toFixed(2);
item.modelTime = item.modelTime.toFixed(2);
item.toolTime = item.toolTime.toFixed(2);
item.reply_content = marked(lastcont, {
renderer: renderer,
breaks: true,
});
item.text = lastcont;
} else {
item.tool = 1;
}
if (that.isScrolling) {
chatContent.scrollTop = chatContent.scrollHeight;
}
}
} else {
item.toolshow = false;
that.over = true;
that.overdot = false;
// 创建自定义渲染器
class CustomRenderer extends marked.Renderer {
heading (text, level) {
// 将一级标题转换为h1标签
if (level === 1) {
return `<div class="hClass"># ${text}</div>`;
} else if (level === 2) {
return `<div class="hClass">## ${text}</div>`;
} else if (level === 3) {
return `<div class="hClass">### ${text}</div>`;
} else if (level === 4) {
return `<div class="hClass">#### ${text}</div>`;
} else if (level === 5) {
return `<div class="hClass">##### ${text}</div>`;
} else if (level === 6) {
return `<div class="hClass">###### ${text}</div>`;
}
}
}
// 使用自定义渲染器
const renderer = new CustomRenderer();
item.reply_content = marked(response, {
renderer: renderer,
breaks: true,
});
item.text = response;
// item.reply_content = item.reply_content.replace(/\s+$/m, "");
}
if (that.isScrolling) {
that.scrollToBottom()
}
};
xhr.send(JSON.stringify(tijiao));
},
//调用工具接口
toolRun (item, chatContent, str) {
this.endTime = 0;
this.over = true;
this.BtnDisabled = true;
const that = this;
item.tool = 1;
if (that.isScrolling) {
that.scrollToBottom()
}
xhr.open("POST", this.$globalPath + "agent/tool_run", true);
xhr.setRequestHeader("Content-Type", "application/json");
xhr.setRequestHeader("Authorization", getToken());
xhr.onreadystatechange = function () {
// console.log('toolRun', xhr);
if (xhr.readyState === 4 && xhr.status === 200) {
console.log("读取完毕");
// var result = xhr.responseText;
// console.log(result);
if (item.tool === 3) {
localStorage.setItem("tool", 2);
item.toolText = true;
that.$forceUpdate();
} else {
item.tool = 2;
item.toolText = true;
}
that.over = false;
that.overdot = false;
// that.agentBotInfo();
} else if (xhr.status !== 200 && xhr.status !== 0) {
console.log("HTTP 错误:" + xhr.status);
that.over = false;
that.overdot = false;
} else if (xhr.status === 0 && xhr.readyState !== 4) {
this.overdot = true;
this.over = true;
} else if (xhr.status === 0 && xhr.readyState === 4) {
that.over = false;
that.overdot = false;
that.$message({
message: this.$t("errorsub"),
type: "error",
});
}
};
xhr.onprogress = function (e) {
if (that.endTime === 0) {
that.endTime = new Date().getTime();
item.toolTime = (that.endTime - that.starttoolTime) / 1000; // 转换为秒
item.modelTime = (that.endTime - that.startTime) / 1000; // 转换为秒
item.Time = (item.toolTime + item.modelTime).toFixed(2);
}
// console.log("onprogress", e);
//每次数据到达都会触发
var response = e.currentTarget.response;
// console.log('toolRun', response);
if (response.slice(-6) == "[done]") {
// 这里做当收到'[done]'时的处理
console.log("成功完成!");
that.over = false;
that.overdot = false;
} else {
that.over = true;
that.overdot = false;
// 创建自定义渲染器
class CustomRenderer extends marked.Renderer {
heading (text, level) {
// 将一级标题转换为h1标签
if (level === 1) {
return `<div class="hClass"># ${text}</div>`;
} else if (level === 2) {
return `<div class="hClass">## ${text}</div>`;
} else if (level === 3) {
return `<div class="hClass">### ${text}</div>`;
} else if (level === 4) {
return `<div class="hClass">#### ${text}</div>`;
} else if (level === 5) {
return `<div class="hClass">##### ${text}</div>`;
} else if (level === 6) {
return `<div class="hClass">###### ${text}</div>`;
}
}
}
// 使用自定义渲染器
const renderer = new CustomRenderer();
item.reply_content = marked(response, {
renderer: renderer,
breaks: true,
});
item.text = response;
// item.reply_content = item.reply_content.replace(/\s+$/m, "");
}
if (that.isScrolling) {
that.scrollToBottom()
}
};
xhr.send(str);
},
},
};
</script>
<style lang="scss" scoped>
.dot {
font-family: simsun; /*固定字体避免设置的宽度无效*/
animation: dot 1s infinite step-start;
display: inline-block;
width: 1.5em;
vertical-align: bottom; /*始终让省略号在文字的下面*/
overflow: hidden;
}
@keyframes dot {
/*动态改变显示宽度, 但始终让总占据空间不变, 避免抖动*/
0% {
width: 0;
margin-right: 1.5em;
}
33% {
width: 0.5em;
margin-right: 1em;
}
66% {
width: 1em;
margin-right: 0.5em;
}
100% {
width: 1.5em;
margin-right: 0;
}
}
</style>第二种方法：post方法使用插件@microsoft/fetch-event-source
这里就只写方法了
其中new AbortController()是为了可以断开连接
<script>
let ctrlAbout2 = null;
import { fetchEventSource } from '@microsoft/fetch-event-source';
export default {
data () {
return {
};
},
beforeDestroy () {
if (ctrlAbout2) {
ctrlAbout2.abort()
}
},
methods: {
toolRun (item, chatContent, str) {
ctrlAbout2 = new AbortController();
let source2 = fetchEventSource(this.$globalPath + "agent/tool_run", {
method: 'POST',
headers: {
"Content-Type": 'application/json',
"Accept": 'text/event-stream; charset=utf-8',
'Connection': 'keep-alive',
'Authorization': getToken()
},
body: JSON.stringify(str),
openWhenHidden: true,
onopen (response) {
// // console.log(response)
// if (response.ok) {
// return; // everything's good
// } else if (response.status >= 400 && response.status < 500 && response.status !== 429) {
// // client-side errors are usually non-retriable:
// throw new FatalError();
// } else {
// throw new RetriableError();
// }
},
onmessage (event) {
//每次数据到达都会触发
// 返回的JSON格式，是单引号不能转换，必须双引号才能JSON.parse
var res2 = event.data.replaceAll(/"/g, '\\"')
var res = res2.replaceAll(/'/g, '"')
var response = JSON.parse(res).message
// var response = event.data
if (response === "[done]") {
// 这里做当收到'[done]'时的处理
console.log("成功完成!");
that.over = false;
that.overdot = false;
that.BtnDisabled = true;
that.inputdisabled = false
} else {
that.over = true;
that.overdot = false;
messag1 += response.replaceAll("\\n", "\n")
item.reply_content = marked(messag1, markedOptions);
item.text = messag1;
}
if (that.isScrolling) {
that.scrollToBottom()
}
},
onclose (msg) {
// console.log(msg);
ctrlAbout2.abort()//出错后不要重试
that.over = false;
that.BtnDisabled = true;
that.inputdisabled = false
},
onerror (error) {
// console.log(error);
ctrlAbout2.abort()
that.over = false;
that.BtnDisabled = true;
that.inputdisabled = false
throw error// 必须抛出错误，否则停止不了
}
})
},
// 停止回响
overBtn () {
if (ctrlAbout) {
ctrlAbout.abort()
}
if (ctrlAbout2) {
ctrlAbout2.abort()
}
// xhr.abort();
this.overdot = false;
this.over = false;
this.BtnDisabled = false;
this.inputdisabled = false
this.messinput = "";
// this.messages[this.messages.length - 1].reply_content = "";
},
},
};
</script>第三种方法：get使用插件"event-source-polyfill"
<script>
let eventSource = null
import { EventSourcePolyfill } from "event-source-polyfill";
export default {
data () {
return {
};
},
beforeDestroy () {
if (eventSource) {
eventSource.close();
}
},
methods: {
getanalysis (uuid, ele) {
this.itemanalysis = ele
ele.isanalysis = true
this.$forceUpdate();
if (eventSource) {
eventSource.close();
}
ele.drawerAnalysis = ''
let url = this.$globalPath + 'agent/get_logs?uuid=' + uuid
let that = this
this.drawerdot = true
if (that.isScrolling) {
that.scrollToBottom()
}
// 如果需要加参数的话是在url 后面拼接参数 sysm/user/1
eventSource = new EventSourcePolyfill(
url,
{
// heartbeatTimeout: 3 * 60 * 1000,//这是自定义配置请求超时时间 默认是4500ms(印象中是)
headers: {
'Authorization': getToken(),
},
}
);
let message = ''
// open：订阅成功（和后端连接成功）
eventSource.onopen = function (e) { };
eventSource.onmessage = function (e) {
if (e.data === '[done]') {
eventSource.close();
that.drawerdot = false
} else {
// 返回的JSON格式，是单引号不能转换，必须双引号才能JSON.parse
var res2 = e.data.replaceAll(/"/g, '\\"')
var res = res2.replaceAll(/'/g, '"')
var cont = JSON.parse(res).message
message += cont.replaceAll("\\n", "\n") + ``
ele.drawerAnalysis = marked(message, {
breaks: true,
});
if (that.isScrolling) {
that.scrollToBottom()
}
}
};
//error：错误（可能是断开，可能是后端返回的信息）
eventSource.onerror = function (e) {
that.drawerdot = false
e.target.close(); // 关闭连接
};
},
},
};
</script>
2910
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
