541 lines
13 KiB
Vue
541 lines
13 KiB
Vue
|
<template>
|
|||
|
|
<view class="container" :style="pageHeight">
|
|||
|
|
<!-- <view class="top_">
|
|||
|
|
<u-icon @click="goBack()" name="arrow-left" color="#fff" size="20"></u-icon>
|
|||
|
|
<view class="">{{info.title || "details"}}</view>
|
|||
|
|
<view class="AirWall"></view>
|
|||
|
|
</view> -->
|
|||
|
|
<view class="box-1">
|
|||
|
|
<scroll-view
|
|||
|
|
scroll-y
|
|||
|
|
refresher-background="transparent"
|
|||
|
|
style="height: 100%;"
|
|||
|
|
@scrolltoupper="refresherrefresh"
|
|||
|
|
|
|||
|
|
:refresher-enabled="false"
|
|||
|
|
:scroll-with-animation="false"
|
|||
|
|
:refresher-triggered="scrollView.refresherTriggered"
|
|||
|
|
:scroll-into-view="scrollView.intoView"
|
|||
|
|
>
|
|||
|
|
<!-- <view id="topId"></view> -->
|
|||
|
|
<view class="talk-list" >
|
|||
|
|
<view class=""
|
|||
|
|
v-for="(item,index) in messagesList"
|
|||
|
|
:key="item.id"
|
|||
|
|
>
|
|||
|
|
<view class="item flex-col push" v-if="item.query" >
|
|||
|
|
<image :src="imagesUrl+userAvatar" mode="aspectFill" class="pic"></image>
|
|||
|
|
<view class="content">
|
|||
|
|
<template v-if="item.contentType === 'image'">
|
|||
|
|
<image :src="item.content" mode="widthFix" style="width: 400rpx;"></image>
|
|||
|
|
</template>
|
|||
|
|
<template v-else>
|
|||
|
|
{{item.query}}
|
|||
|
|
</template>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<view class="item flex-col pull " v-if="item.answer" >
|
|||
|
|
<image :src="info.icon" mode="aspectFill" class="pic"></image>
|
|||
|
|
<view class="content">
|
|||
|
|
<template v-if="item.contentType === 'image'">
|
|||
|
|
<image :src="item.content" mode="widthFix" style="width: 400rpx;"></image>
|
|||
|
|
</template>
|
|||
|
|
<template v-else>
|
|||
|
|
|
|||
|
|
<text class="" >
|
|||
|
|
{{item.answer}}
|
|||
|
|
</text>
|
|||
|
|
|
|||
|
|
</template>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view id="bottomId"></view>
|
|||
|
|
</scroll-view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<view class="box-2">
|
|||
|
|
<view class="flex-col">
|
|||
|
|
|
|||
|
|
<view class="flex-grow">
|
|||
|
|
<input type="text" class="content" v-model="content" placeholder="Please enter what you want to know" placeholder-style="color:#DDD;" :cursor-spacing="6">
|
|||
|
|
</view>
|
|||
|
|
<!-- <view style="margin-right: 20rpx;">
|
|||
|
|
<uni-icons type="image" size="24" color="#32714F" @tap="handleImageClick"></uni-icons>
|
|||
|
|
|
|||
|
|
</view> -->
|
|||
|
|
<button class="send" @tap="handleSendClick">send</button>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
import { getHistoryMsg } from "@/request/template-talk/history-msg.js";
|
|||
|
|
import requestChat from '../../utils/requestChat'
|
|||
|
|
import config from '@/config'
|
|||
|
|
export default {
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
imagesUrl:config.imagesUrl,
|
|||
|
|
info:{},
|
|||
|
|
title:'',
|
|||
|
|
// 聊天列表数据
|
|||
|
|
messagesList:[],
|
|||
|
|
// 滚动容器
|
|||
|
|
scrollView:{
|
|||
|
|
refresherTriggered:false,
|
|||
|
|
intoView:"",
|
|||
|
|
safeAreaHeight:0
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 请求参数
|
|||
|
|
ajax:{
|
|||
|
|
rows:20, //每页数量
|
|||
|
|
page:1, //页码
|
|||
|
|
flag:true, // 请求开关
|
|||
|
|
sendFlag:false
|
|||
|
|
},
|
|||
|
|
// 发送内容
|
|||
|
|
content:'',
|
|||
|
|
userId:null,
|
|||
|
|
userAvatar:null,
|
|||
|
|
taskChat:null,
|
|||
|
|
firstId:null,
|
|||
|
|
limit:20,
|
|||
|
|
scrollId:'bottomId'
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
computed:{
|
|||
|
|
// 页面高度
|
|||
|
|
pageHeight(){
|
|||
|
|
const safeAreaHeight = this.scrollView.safeAreaHeight;
|
|||
|
|
if(safeAreaHeight > 0){
|
|||
|
|
return `height: calc(${safeAreaHeight}px - var(--window-top));`
|
|||
|
|
}
|
|||
|
|
return "";
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
created() {
|
|||
|
|
|
|||
|
|
let tempInfo={
|
|||
|
|
icon:this.$route.query.icon,
|
|||
|
|
token:this.$route.query.token,
|
|||
|
|
conversation:this.$route.query.conversation,
|
|||
|
|
userId:this.$route.query.userId,
|
|||
|
|
userAvatar:this.$route.query.userAvatar
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
this.info = tempInfo
|
|||
|
|
this.userId = this.$route.query.userId
|
|||
|
|
this.userAvatar = this.$route.query.userAvatar
|
|||
|
|
this.getMessage()
|
|||
|
|
|
|||
|
|
|
|||
|
|
console.log(tempInfo,138);
|
|||
|
|
},
|
|||
|
|
onShow() {
|
|||
|
|
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
|
|||
|
|
goBack(){
|
|||
|
|
uni.navigateBack()
|
|||
|
|
},
|
|||
|
|
// 下拉刷新
|
|||
|
|
refresherrefresh(e){
|
|||
|
|
console.log(e,151);
|
|||
|
|
this.getMessage();
|
|||
|
|
this.scrollView.refresherTriggered = true;
|
|||
|
|
},
|
|||
|
|
// 获取历史消息
|
|||
|
|
getMessage(){
|
|||
|
|
|
|||
|
|
if(!this.ajax.flag||!uni.getStorageSync(this.info.conversation)){
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
let url = 'v1/messages?user='+this.userId+'&conversation_id='+uni.getStorageSync(this.info.conversation)+'&limit='+this.limit
|
|||
|
|
if(this.firstId){
|
|||
|
|
url = url+"&first_id="+this.firstId
|
|||
|
|
}
|
|||
|
|
let that = this
|
|||
|
|
let get = async ()=>{
|
|||
|
|
that.ajax.flag = false;
|
|||
|
|
console.log(that.info.token,158);
|
|||
|
|
let res = await requestChat({
|
|||
|
|
url: url ,
|
|||
|
|
method: 'get',
|
|||
|
|
token:that.info.token
|
|||
|
|
})
|
|||
|
|
let data = res.data
|
|||
|
|
that.scrollView.refresherTriggered = false;
|
|||
|
|
|
|||
|
|
// 获取待滚动元素选择器，解决插入数据后，滚动条定位时使用。取当前消息数据的第一条信息元素
|
|||
|
|
|
|||
|
|
for (var i = 0; i < data.length; i++) {
|
|||
|
|
if(i==0){
|
|||
|
|
that.firstId = data[i].id
|
|||
|
|
}
|
|||
|
|
that.messagesList.unshift(data[i])
|
|||
|
|
}
|
|||
|
|
that.$set(that.messagesList,0,that.messagesList[0])
|
|||
|
|
console.log(that.messagesList.length,JSON.stringify(that.messagesList[0]),185);
|
|||
|
|
// 数据挂载后执行，不懂的请自行阅读 Vue.js 文档对 Vue.nextTick 函数说明。
|
|||
|
|
that.$nextTick(()=>{
|
|||
|
|
that.$forceUpdate()
|
|||
|
|
// 设置当前滚动的位置
|
|||
|
|
that.scrollView.intoView = this.scrollId;
|
|||
|
|
})
|
|||
|
|
that.ajax.flag = true;
|
|||
|
|
}
|
|||
|
|
get();
|
|||
|
|
},
|
|||
|
|
// 发送信息
|
|||
|
|
handleSendClick(){
|
|||
|
|
if(!this.content){
|
|||
|
|
uni.showToast({
|
|||
|
|
title:'Please enter valid content',
|
|||
|
|
icon:'none'
|
|||
|
|
})
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
this.sendMessage(this.content);
|
|||
|
|
},
|
|||
|
|
async sendMessage(query) {
|
|||
|
|
console.log('Starting sendMessage...');
|
|||
|
|
|
|||
|
|
if(this.ajax.sendFlag) {
|
|||
|
|
uni.showToast({
|
|||
|
|
title: 'Please wait',
|
|||
|
|
icon: 'none'
|
|||
|
|
})
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
this.content = '';
|
|||
|
|
this.ajax.sendFlag = true;
|
|||
|
|
|
|||
|
|
// 构建消息对象
|
|||
|
|
const msgItem = {
|
|||
|
|
query: query,
|
|||
|
|
answer: "",
|
|||
|
|
contentType: 'text'
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// 构建请求数据
|
|||
|
|
const requestData = {
|
|||
|
|
"inputs": { "type": "text" },
|
|||
|
|
"query": query,
|
|||
|
|
"response_mode": "streaming",
|
|||
|
|
"conversation_id": uni.getStorageSync(this.info.conversation) || null,
|
|||
|
|
"user": this.userId
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// 添加到消息列表
|
|||
|
|
this.messagesList.unshift(msgItem);
|
|||
|
|
|
|||
|
|
// #ifdef APP-PLUS
|
|||
|
|
try {
|
|||
|
|
const xhr = new plus.net.XMLHttpRequest();
|
|||
|
|
const url = `${config.publicUrl}v1/chat-messages`;
|
|||
|
|
|
|||
|
|
xhr.open('POST', url, true);
|
|||
|
|
|
|||
|
|
// 设置请求头
|
|||
|
|
xhr.setRequestHeader('Authorization', this.info.token);
|
|||
|
|
xhr.setRequestHeader('Content-Type', 'application/json');
|
|||
|
|
xhr.setRequestHeader('Accept', 'text/event-stream');
|
|||
|
|
|
|||
|
|
let tempList = [];
|
|||
|
|
let that = this;
|
|||
|
|
|
|||
|
|
// 监听数据流
|
|||
|
|
xhr.onprogress = function(event) {
|
|||
|
|
console.log('Receiving data...');
|
|||
|
|
const receivedText = event.target.responseText;
|
|||
|
|
console.log('Received text length:', receivedText.length);
|
|||
|
|
|
|||
|
|
// 按数据块分割
|
|||
|
|
const lines = receivedText.split('\ndata: ');
|
|||
|
|
console.log('Processing lines:', lines.length);
|
|||
|
|
|
|||
|
|
// 处理每一行数据
|
|||
|
|
lines.forEach((line, index) => {
|
|||
|
|
try {
|
|||
|
|
if (!line.trim()) return;
|
|||
|
|
|
|||
|
|
// 清理并解析数据
|
|||
|
|
const cleanLine = line.replace('data: ', '');
|
|||
|
|
const data = JSON.parse(cleanLine);
|
|||
|
|
console.log('Parsed data:', data);
|
|||
|
|
|
|||
|
|
// 处理会话ID
|
|||
|
|
if (data.conversation_id) {
|
|||
|
|
uni.setStorageSync(that.info.conversation, data.conversation_id);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 处理回答内容
|
|||
|
|
if (data.answer) {
|
|||
|
|
const uniqueKey = data.answer + '' + index;
|
|||
|
|
if (!tempList.includes(uniqueKey)) {
|
|||
|
|
console.log('New answer chunk:', data.answer);
|
|||
|
|
tempList.push(uniqueKey);
|
|||
|
|
msgItem.answer += data.answer;
|
|||
|
|
that.$set(that.messagesList, 0, msgItem);
|
|||
|
|
that.scrollView.intoView = 'bottomId';
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
} catch (error) {
|
|||
|
|
console.log('Parse error for line:', error);
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// 请求完成
|
|||
|
|
xhr.onload = function() {
|
|||
|
|
console.log('Request completed');
|
|||
|
|
that.ajax.sendFlag = false;
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// 请求错误
|
|||
|
|
xhr.onerror = function(error) {
|
|||
|
|
console.error('Request failed:', error);
|
|||
|
|
that.ajax.sendFlag = false;
|
|||
|
|
uni.showToast({
|
|||
|
|
title: 'Request failed',
|
|||
|
|
icon: 'none'
|
|||
|
|
});
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// 设置超时
|
|||
|
|
xhr.timeout = 900000; // 15分钟
|
|||
|
|
xhr.ontimeout = function() {
|
|||
|
|
console.error('Request timeout');
|
|||
|
|
that.ajax.sendFlag = false;
|
|||
|
|
uni.showToast({
|
|||
|
|
title: 'Request timeout',
|
|||
|
|
icon: 'none'
|
|||
|
|
});
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// 发送请求
|
|||
|
|
console.log('Sending request...');
|
|||
|
|
xhr.send(JSON.stringify(requestData));
|
|||
|
|
|
|||
|
|
} catch (error) {
|
|||
|
|
console.error('Error in sendMessage:', error);
|
|||
|
|
this.ajax.sendFlag = false;
|
|||
|
|
uni.showToast({
|
|||
|
|
title: 'Request failed',
|
|||
|
|
icon: 'none'
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
// #endif
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style lang="scss">
|
|||
|
|
@import "../../lib/global.scss";
|
|||
|
|
.AirWall{
|
|||
|
|
width: 20px;
|
|||
|
|
height: 20px;
|
|||
|
|
}
|
|||
|
|
.top_{
|
|||
|
|
width: 100%;
|
|||
|
|
position: fixed;
|
|||
|
|
left: 0px;
|
|||
|
|
top: 0px;
|
|||
|
|
height: 180rpx;
|
|||
|
|
background: #32714F;
|
|||
|
|
z-index: 99999;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
|
|||
|
|
padding: 15px;
|
|||
|
|
padding-top: 100rpx;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
color: #fff;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
}
|
|||
|
|
page{
|
|||
|
|
background-color: #F3F3F3;
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
}
|
|||
|
|
.container{
|
|||
|
|
height: calc(100vh - var(--window-top));
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
flex-wrap: nowrap;
|
|||
|
|
align-content: center;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
align-items: stretch;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 加载数据提示 */
|
|||
|
|
.tips{
|
|||
|
|
position: fixed;
|
|||
|
|
left: 0;
|
|||
|
|
top:var(--window-top);
|
|||
|
|
width: 100%;
|
|||
|
|
z-index: 9;
|
|||
|
|
background-color: rgba(0,0,0,0.15);
|
|||
|
|
height: 72rpx;
|
|||
|
|
line-height: 72rpx;
|
|||
|
|
transform:translateY(-80rpx);
|
|||
|
|
transition: transform 0.3s ease-in-out 0s;
|
|||
|
|
|
|||
|
|
&.show{
|
|||
|
|
transform:translateY(0);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.box-1{
|
|||
|
|
width: 100%;
|
|||
|
|
height: 0;
|
|||
|
|
flex: 1 0 auto;
|
|||
|
|
box-sizing: content-box;
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
.box-2{
|
|||
|
|
height: auto;
|
|||
|
|
z-index: 2;
|
|||
|
|
border-top: #e5e5e5 solid 1px;
|
|||
|
|
box-sizing: content-box;
|
|||
|
|
background-color: #F3F3F3;
|
|||
|
|
|
|||
|
|
/* 兼容iPhoneX */
|
|||
|
|
padding-bottom: 0;
|
|||
|
|
padding-bottom: constant(safe-area-inset-bottom);
|
|||
|
|
padding-bottom: env(safe-area-inset-bottom);
|
|||
|
|
|
|||
|
|
>view{
|
|||
|
|
padding: 0 20rpx;
|
|||
|
|
height: 100rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.content{
|
|||
|
|
background-color: #fff;
|
|||
|
|
height: 64rpx;
|
|||
|
|
padding: 0 20rpx;
|
|||
|
|
border-radius: 32rpx;
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.send{
|
|||
|
|
background-color: #32714F;
|
|||
|
|
color: #fff;
|
|||
|
|
height: 64rpx;
|
|||
|
|
margin-left: 20rpx;
|
|||
|
|
border-radius: 32rpx;
|
|||
|
|
padding: 0;
|
|||
|
|
width: 120rpx;
|
|||
|
|
line-height: 62rpx;
|
|||
|
|
|
|||
|
|
&:active{
|
|||
|
|
background-color: #32714F;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.talk-list{
|
|||
|
|
padding-bottom: 20rpx;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column-reverse;
|
|||
|
|
flex-wrap: nowrap;
|
|||
|
|
align-content: flex-start;
|
|||
|
|
justify-content: flex-end;
|
|||
|
|
align-items: stretch;
|
|||
|
|
|
|||
|
|
// 添加弹性容器，让内容自动在顶部
|
|||
|
|
&::before{
|
|||
|
|
content: '.';
|
|||
|
|
display: inline;
|
|||
|
|
visibility: hidden;
|
|||
|
|
line-height: 0;
|
|||
|
|
font-size: 0;
|
|||
|
|
flex: 1 0 auto;
|
|||
|
|
height: 1px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
/* 消息项，基础类 */
|
|||
|
|
.item{
|
|||
|
|
padding: 20rpx 20rpx 0 20rpx;
|
|||
|
|
align-items:flex-start;
|
|||
|
|
align-content:flex-start;
|
|||
|
|
color: #333;
|
|||
|
|
|
|||
|
|
.pic{
|
|||
|
|
width: 92rpx;
|
|||
|
|
height: 92rpx;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
border: #fff solid 1px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.content{
|
|||
|
|
padding: 20rpx;
|
|||
|
|
border-radius: 4px;
|
|||
|
|
max-width: 500rpx;
|
|||
|
|
word-break: break-all;
|
|||
|
|
line-height: 52rpx;
|
|||
|
|
position: relative;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 收到的消息 */
|
|||
|
|
&.pull{
|
|||
|
|
.content{
|
|||
|
|
margin-left: 32rpx;
|
|||
|
|
background-color: #fff;
|
|||
|
|
|
|||
|
|
&::after{
|
|||
|
|
content: '';
|
|||
|
|
display: block;
|
|||
|
|
width: 0;
|
|||
|
|
height: 0;
|
|||
|
|
border-top: 16rpx solid transparent;
|
|||
|
|
border-bottom: 16rpx solid transparent;
|
|||
|
|
border-right: 20rpx solid #fff;
|
|||
|
|
position: absolute;
|
|||
|
|
top: 30rpx;
|
|||
|
|
left: -18rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
/* 发出的消息 */
|
|||
|
|
&.push{
|
|||
|
|
/* 主轴为水平方向，起点在右端。使不修改DOM结构，也能改变元素排列顺序 */
|
|||
|
|
flex-direction: row-reverse;
|
|||
|
|
|
|||
|
|
.content{
|
|||
|
|
margin-right: 32rpx;
|
|||
|
|
background-color: #32714F;
|
|||
|
|
color: #fff;
|
|||
|
|
|
|||
|
|
&::after{
|
|||
|
|
content: '';
|
|||
|
|
display: block;
|
|||
|
|
width: 0;
|
|||
|
|
height: 0;
|
|||
|
|
border-top: 16rpx solid transparent;
|
|||
|
|
border-bottom: 16rpx solid transparent;
|
|||
|
|
border-left: 20rpx solid #32714F;
|
|||
|
|
position: absolute;
|
|||
|
|
top: 30rpx;
|
|||
|
|
right: -18rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|