<template>
|
<div id="intelligentAssistant">
|
<Spin v-if="loading" fix>
|
<Icon type="ios-loading" size=18 class="demo-spin-icon-load"></Icon>
|
<div>Loading</div>
|
</Spin>
|
<!-- <img src="" alt=""> -->
|
<!-- <div style="border-top: 1px solid #ececec;padding-top: 10px;"> -->
|
<!-- <div class="clearfix">
|
<div v-if="answer[type].value" style="float: right;display: inline-block;">
|
<Tooltip content="复制" placement="top">
|
<Icon type="md-copy" size="20" style="padding-left: 2px;cursor: pointer;" @click="copy" />
|
</Tooltip>
|
</div>
|
<div v-if="answer[type].value" style="float: right;display: inline-block;">
|
<Tooltip content="清空全部" placement="top">
|
<Icon type="md-trash" size="20" style="cursor: pointer;" @click="clear" />
|
</Tooltip>
|
</div>
|
<RadioGroup v-model="type" type="button" button-style="solid" size="small" @on-change="changeRadio">
|
<Radio label="chatGpt">ChatGPT</Radio>
|
<Radio label="wenXinYiYan">文心一言</Radio>
|
<Radio label="qingHua">清华智谱</Radio>
|
<Radio label="hangye">行业大模型</Radio>
|
</RadioGroup>
|
</div> -->
|
<!-- <div id="answer"
|
:style="{ marginTop: '20px', height: height + 'px', overflowY: 'auto', whiteSpace: 'pre-wrap', }"
|
:class="answer[type].value ? 'answerClass' : 'gradientclass'">
|
<div v-html="answer[type].value ? answer[type].value : answer[type].tip"></div>
|
<div id="answer_end" style="height: 0;"></div>
|
</div> -->
|
<!-- </div> -->
|
<main>
|
<div v-for="(message, index) in messages" :key="index" :class="message.sender">
|
<img :src="message.avatar" class="avatar" v-if="message.sender == 'ai'" />
|
<div v-if="message.sender == 'user'" class="action2">
|
<Poptip placement="left" trigger="hover">
|
<div class="dots">
|
<div class="dot"></div>
|
<div class="dot"></div>
|
<div class="dot"></div>
|
</div>
|
<div slot="content" style="color: #000;">
|
<div style="cursor: pointer;height: 20px;line-height: 20px;" @click="clear(index)">
|
<Icon type="md-trash" color="#00A0E9" />删除
|
</div>
|
<div style="cursor: pointer;height: 20px;line-height: 20px;" @click="copy(message)">
|
<Icon type="md-copy" color="#00A0E9" />复制
|
</div>
|
</div>
|
</Poptip>
|
</div>
|
<div class="message">
|
<div class="timestamp">{{ message.timestamp }}</div>
|
<div class="text">{{ message.text }}</div>
|
</div>
|
<div v-if="message.sender == 'ai'" class="action1">
|
<Poptip placement="right" trigger="hover">
|
<div class="dots">
|
<div class="dot"></div>
|
<div class="dot"></div>
|
<div class="dot"></div>
|
</div>
|
<div slot="content">
|
<div style="cursor: pointer;height: 30px;line-height: 30px;width: 50px;" @click="clear(index)">
|
<Icon type="md-trash" color="#00A0E9" />删除
|
</div>
|
<div style="cursor: pointer;height: 30px;line-height: 30px;width: 50px;" @click="copy(message)">
|
<Icon type="md-copy" color="#00A0E9" />复制
|
</div>
|
</div>
|
</Poptip>
|
</div>
|
<img :src="message.avatar" class="avatar" v-if="message.sender == 'user'" />
|
</div>
|
</main>
|
|
|
<footer>
|
<Button type="error" icon="md-trash" style="margin-left: 5px;" :disabled="!messages.length" @click="clearAll">
|
清空对话
|
</Button>
|
<div style="display: flex;justify-content: space-around;margin-top: 3px;">
|
<div style="position: relative;width: calc(100% - 100px);">
|
<Input v-model="inputText" :autosize="{ minRows: 4, maxRows: 4 }" type="textarea"
|
placeholder="在此处输入或者粘贴内容, 按Enter建换行" />
|
<div style="position: absolute;top: 1px;right: 10px;cursor: pointer;" @click="inputText = ''">
|
<Icon type="ios-close-circle" size="14" color="rgb(153, 151, 153)" />
|
</div>
|
</div>
|
<div style="border-top: 1px solid #ececec;">
|
<Button type="primary" icon="md-paper-plane" style="width: 80px;" :loading="loading"
|
:disabled="!inputText" @click="submit">
|
提交
|
</Button>
|
</div>
|
</div>
|
|
</footer>
|
</div>
|
</template>
|
|
<script>
|
import { fetchEventSource } from '@microsoft/fetch-event-source'
|
import axios from '@/libs/api.request'
|
|
export default {
|
name: 'intelligentAssistant',
|
components: {//组件
|
|
},
|
props: {//传参
|
|
},
|
data() {
|
return {//数据
|
loading: false,
|
inputText: '',//输入框数据
|
type: 'chatGpt',//选择的智能类型
|
answer: {
|
chatGpt: {
|
value: '',//实际答案
|
tip: 'OpenAI研发\n一款聊天机器人程序',//空值的提示语
|
loading: false,
|
},//
|
wenXinYiYan: {
|
value: '',
|
tip: '百度研发\n有用、有趣、有温度的智能伙伴',
|
loading: false,
|
},//
|
qingHua: {
|
value: '',
|
tip: '清华大学计算机系技术成果\n新一代认知智能大模型',
|
loading: false,
|
},
|
hangye: {
|
value: '',
|
tip: '开发中\n敬请期待...',
|
loading: false,
|
},
|
},//答案
|
height: '',//答案高度
|
timer: {
|
chatGpt: null,
|
wenXinYiYan: null,
|
qingHua: null,
|
},//定时器
|
messages: [
|
// { sender: 'user', text: 111, avatar: require('../../assets/images/gptUser.png'), timestamp: this.getNowTime() },
|
// { sender: 'ai', text: 2222, avatar: require('../../assets/images/rrlogo.png'), timestamp: this.getNowTime() },
|
// { sender: 'user', text: 1111, avatar: require('../../assets/images/gptUser.png'), timestamp: this.getNowTime() },
|
// { sender: 'ai', text: '你好，下面是一篇关于健康生活方式的文章。 健康是人类生活中最宝贵的财富之一。然而，在现代社会中，由于生活节奏快、工作压力大、环境污染等因素的影响，越来越多的人面临着健康问题。因此，养成健康的生活方式变得尤为重要。 首先，健康的饮食习惯是保持健康的重要因素之一。均衡饮食是维持身体健康的基础。人体需要蛋白质、碳水化合物、脂肪、维生素、矿物质等多种营养物质来维持正常的生理功能。因此，我们应该多吃新鲜蔬菜、水果、全谷类食品，减少高热量、高脂肪、高糖食品的摄入。此外，要保持饮食的多样性，避免偏食，以确保摄入的营养物质的全面性和均衡性。 其次，适当的运动是维持健康的重要手段。现代社会的生活方式使得很多人长时间坐着，缺乏运动。长期缺乏运动会导致肥胖、心血管疾病、糖尿病等健康问题。因此，我们应该适当增加日常的运动量，例如步行、跑步、骑车等有氧运动，以及力量训练等无氧运动，以促进新陈代谢，增强身体的抵抗力和免疫力。 此外，保持良好的生活习惯也是维持健康的重要因素之一。良好的生活习惯包括规律作息、充足睡眠、戒烟限酒、保持心情愉快等。规律作息和充足睡眠对维持身体健康和精神状态至关重要。戒烟限酒可以减少患心血管疾病、肺部疾病等健康问题的风险。保持心情愉快可以减少压力，促进身心健康。 最后，定期体检和积极治疗也是保持健康的重要手段。定期体检可以及早发现潜在的健康问题，以便及时采取措施进行治疗。一旦发现健康问题，要积极配合医', avatar: require('../../assets/images/rrlogo.png'), timestamp: this.getNowTime() },
|
// { sender: 'ai', text: '你好，下面是一篇关于健康生活方式的文章。 健康是人类生活中最宝贵的财富之一。然而，在现代社会中，由于生活节奏快、工作压力大、环境污染等因素的影响，越来越多的人面临着健康问题。因此，养成健康的生活方式变得尤为重要。 首先，健康的饮食习惯是保持健康的重要因素之一。均衡饮食是维持身体健康的基础。人体需要蛋白质、碳水化合物、脂肪、维生素、矿物质等多种营养物质来维持正常的生理功能。因此，我们应该多吃新鲜蔬菜、水果、全谷类食品，减少高热量、高脂肪、高糖食品的摄入。此外，要保持饮食的多样性，避免偏食，以确保摄入的营养物质的全面性和均衡性。 其次，适当的运动是维持健康的重要手段。现代社会的生活方式使得很多人长时间坐着，缺乏运动。长期缺乏运动会导致肥胖、心血管疾病、糖尿病等健康问题。因此，我们应该适当增加日常的运动量，例如步行、跑步、骑车等有氧运动，以及力量训练等无氧运动，以促进新陈代谢，增强身体的抵抗力和免疫力。 此外，保持良好的生活习惯也是维持健康的重要因素之一。良好的生活习惯包括规律作息、充足睡眠、戒烟限酒、保持心情愉快等。规律作息和充足睡眠对维持身体健康和精神状态至关重要。戒烟限酒可以减少患心血管疾病、肺部疾病等健康问题的风险。保持心情愉快可以减少压力，促进身心健康。 最后，定期体检和积极治疗也是保持健康的重要手段。定期体检可以及早发现潜在的健康问题，以便及时采取措施进行治疗。一旦发现健康问题，要积极配合医', avatar: require('../../assets/images/rrlogo.png'), timestamp: this.getNowTime() },
|
// { sender: 'ai', text: '你好，下面是一篇关于健康生活方式的文章。 健康是人类生活中最宝贵的财富之一。然而，在现代社会中，由于生活节奏快、工作压力大、环境污染等因素的影响，越来越多的人面临着健康问题。因此，养成健康的生活方式变得尤为重要。 首先，健康的饮食习惯是保持健康的重要因素之一。均衡饮食是维持身体健康的基础。人体需要蛋白质、碳水化合物、脂肪、维生素、矿物质等多种营养物质来维持正常的生理功能。因此，我们应该多吃新鲜蔬菜、水果、全谷类食品，减少高热量、高脂肪、高糖食品的摄入。此外，要保持饮食的多样性，避免偏食，以确保摄入的营养物质的全面性和均衡性。 其次，适当的运动是维持健康的重要手段。现代社会的生活方式使得很多人长时间坐着，缺乏运动。长期缺乏运动会导致肥胖、心血管疾病、糖尿病等健康问题。因此，我们应该适当增加日常的运动量，例如步行、跑步、骑车等有氧运动，以及力量训练等无氧运动，以促进新陈代谢，增强身体的抵抗力和免疫力。 此外，保持良好的生活习惯也是维持健康的重要因素之一。良好的生活习惯包括规律作息、充足睡眠、戒烟限酒、保持心情愉快等。规律作息和充足睡眠对维持身体健康和精神状态至关重要。戒烟限酒可以减少患心血管疾病、肺部疾病等健康问题的风险。保持心情愉快可以减少压力，促进身心健康。 最后，定期体检和积极治疗也是保持健康的重要手段。定期体检可以及早发现潜在的健康问题，以便及时采取措施进行治疗。一旦发现健康问题，要积极配合医', avatar: require('../../assets/images/rrlogo.png'), timestamp: this.getNowTime() },
|
// { sender: 'ai', text: '你好，下面是一篇关于健康生活方式的文章。 健康是人类生活中最宝贵的财富之一。然而，在现代社会中，由于生活节奏快、工作压力大、环境污染等因素的影响，越来越多的人面临着健康问题。因此，养成健康的生活方式变得尤为重要。 首先，健康的饮食习惯是保持健康的重要因素之一。均衡饮食是维持身体健康的基础。人体需要蛋白质、碳水化合物、脂肪、维生素、矿物质等多种营养物质来维持正常的生理功能。因此，我们应该多吃新鲜蔬菜、水果、全谷类食品，减少高热量、高脂肪、高糖食品的摄入。此外，要保持饮食的多样性，避免偏食，以确保摄入的营养物质的全面性和均衡性。 其次，适当的运动是维持健康的重要手段。现代社会的生活方式使得很多人长时间坐着，缺乏运动。长期缺乏运动会导致肥胖、心血管疾病、糖尿病等健康问题。因此，我们应该适当增加日常的运动量，例如步行、跑步、骑车等有氧运动，以及力量训练等无氧运动，以促进新陈代谢，增强身体的抵抗力和免疫力。 此外，保持良好的生活习惯也是维持健康的重要因素之一。良好的生活习惯包括规律作息、充足睡眠、戒烟限酒、保持心情愉快等。规律作息和充足睡眠对维持身体健康和精神状态至关重要。戒烟限酒可以减少患心血管疾病、肺部疾病等健康问题的风险。保持心情愉快可以减少压力，促进身心健康。 最后，定期体检和积极治疗也是保持健康的重要手段。定期体检可以及早发现潜在的健康问题，以便及时采取措施进行治疗。一旦发现健康问题，要积极配合医', avatar: require('../../assets/images/rrlogo.png'), timestamp: this.getNowTime() },
|
// { sender: 'ai', text: '你好，下面是一篇关于健康生活方式的文章。 健康是人类生活中最宝贵的财富之一。然而，在现代社会中，由于生活节奏快、工作压力大、环境污染等因素的影响，越来越多的人面临着健康问题。因此，养成健康的生活方式变得尤为重要。 首先，健康的饮食习惯是保持健康的重要因素之一。均衡饮食是维持身体健康的基础。人体需要蛋白质、碳水化合物、脂肪、维生素、矿物质等多种营养物质来维持正常的生理功能。因此，我们应该多吃新鲜蔬菜、水果、全谷类食品，减少高热量、高脂肪、高糖食品的摄入。此外，要保持饮食的多样性，避免偏食，以确保摄入的营养物质的全面性和均衡性。 其次，适当的运动是维持健康的重要手段。现代社会的生活方式使得很多人长时间坐着，缺乏运动。长期缺乏运动会导致肥胖、心血管疾病、糖尿病等健康问题。因此，我们应该适当增加日常的运动量，例如步行、跑步、骑车等有氧运动，以及力量训练等无氧运动，以促进新陈代谢，增强身体的抵抗力和免疫力。 此外，保持良好的生活习惯也是维持健康的重要因素之一。良好的生活习惯包括规律作息、充足睡眠、戒烟限酒、保持心情愉快等。规律作息和充足睡眠对维持身体健康和精神状态至关重要。戒烟限酒可以减少患心血管疾病、肺部疾病等健康问题的风险。保持心情愉快可以减少压力，促进身心健康。 最后，定期体检和积极治疗也是保持健康的重要手段。定期体检可以及早发现潜在的健康问题，以便及时采取措施进行治疗。一旦发现健康问题，要积极配合医', avatar: require('../../assets/images/rrlogo.png'), timestamp: this.getNowTime() },
|
|
],
|
messagesCopy: [],
|
first: true,
|
}
|
},
|
mounted() {//挂载完毕
|
this.height = window.innerHeight - 305
|
|
this.getChat()
|
|
},
|
activated() {//激活页面
|
|
},
|
beforeRouteLeave(to, form, next) {//路由跳转
|
next()
|
},
|
beforeDestroy() {//页面销毁
|
clearInterval(this.timer.chatGpt)
|
clearInterval(this.timer.wenXinYiYan)
|
clearInterval(this.timer.qingHua)
|
|
},
|
methods: {//页面函数
|
getNowTime() {
|
let now = new Date();
|
let formattedDate = now.toLocaleString('zh-CN', { year: 'numeric', month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit', second: '2-digit' }).replace(/\//g, '-').replace(/:/g, '-').replace(',', '');
|
return formattedDate;
|
},
|
/**
|
* 切换选项
|
*/
|
changeRadio() {
|
document.getElementById('answer_end').scrollIntoView({ behavior: 'smooth' })
|
},
|
/**
|
* 复制答案
|
*/
|
copy(item) {
|
//创建input标签
|
var input = document.createElement('input')
|
//将input的值设置为需要复制的内容
|
input.value = item.text
|
//添加input标签
|
document.body.appendChild(input)
|
//选中input标签
|
input.select()
|
//执行复制
|
document.execCommand('copy')
|
//成功提示信息
|
this.$Message.success('复制成功!')
|
//移除input标签
|
document.body.removeChild(input)
|
},
|
/**
|
* 清空全部答案
|
*/
|
clear(index) {
|
let that = this
|
that.$Modal.confirm({
|
title: "确认删除",
|
content: "确认删除吗？此操作不可恢复！",
|
loading: true,
|
onOk: () => {
|
setTimeout(() => {
|
axios.request({
|
url: '/eventkg/DeleteGptChatContent',
|
method: 'post',
|
data: {
|
id: that.messagesCopy[index].id
|
},
|
}).then(res => {
|
if (res.data.Check == true) {
|
that.messages.splice(index, 1)
|
that.messagesCopy.splice(index, 1)
|
} else {
|
|
}
|
}).catch(err => {
|
})
|
that.$Modal.remove();
|
}, 1000);
|
},
|
});
|
|
},
|
clearAll() {
|
let that = this
|
that.$Modal.confirm({
|
title: "确认清空",
|
content: "确认清空吗？此操作不可恢复！",
|
loading: true,
|
onOk: () => {
|
setTimeout(() => {
|
axios.request({
|
url: '/eventkg/DeleteGptChatContent',
|
method: 'post',
|
data: {
|
id: localStorage.getItem('userId')
|
},
|
}).then(res => {
|
if (res.data.Check == true) {
|
that.messages = []
|
that.messagesCopy = []
|
} else {
|
|
}
|
}).catch(err => {
|
})
|
that.$Modal.remove();
|
}, 1000);
|
},
|
});
|
},
|
/**
|
* 获取聊天记录
|
*/
|
getChat() {
|
this.messagesCopy = []
|
axios.request({
|
url: '/eventkg/GetGptChatPages',
|
method: 'post',
|
data: {
|
pageIndex: 1,
|
pageSize: 50
|
},
|
}).then(res => {
|
if (res.data.Check == true) {
|
let items = res.data.Data.Items
|
for (let i = 0; i < items.length; i++) {
|
if (items[i].Type == 'user') {
|
this.messagesCopy.push({ id: items[i].Id, sender: 'user', text: items[i].Content, avatar: require('../../assets/images/gptUser.png'), timestamp: items[i].CreateTime });
|
}
|
if (items[i].Type == 'gpt') {
|
this.messagesCopy.push({ id: items[i].Id, sender: 'ai', text: items[i].Content, avatar: require('../../assets/images/rrlogo.png'), timestamp: items[i].CreateTime });
|
}
|
}
|
if (this.first) {
|
this.messages = JSON.parse(JSON.stringify(this.messagesCopy))
|
this.first = false
|
}
|
} else {
|
|
}
|
}).catch(err => {
|
|
})
|
|
},
|
/**
|
* 提交
|
*/
|
submit() {
|
this.loading = true
|
if (this.inputText) {
|
this.messages.push({ sender: 'user', text: this.inputText, avatar: require('../../assets/images/gptUser.png'), timestamp: this.getNowTime() });
|
axios.request({
|
url: '/EventKg/GetChatGPT',
|
method: 'post',
|
data: {
|
keyword: this.inputText
|
},
|
}).then(res => {
|
if (res.data.Check == true) {
|
console.log(res.data.Data.Info);
|
let text = res.data.Data.Info
|
this.inputText = ''
|
this.messages.push({ sender: 'ai', text: text, avatar: require('../../assets/images/rrlogo.png'), timestamp: this.getNowTime() });
|
this.getChat()
|
this.loading = false
|
} else {
|
this.loading = false
|
}
|
}).catch(err => {
|
|
})
|
|
} else {
|
this.$Message.error('请输入问题')
|
this.loading = false
|
}
|
|
},
|
/**
|
* 流式显示文字
|
*/
|
textShowType(content_init, content_add) {
|
|
},
|
/**
|
*ChatGPT请求
|
*/
|
getAnswer_chatGpt() {
|
let data = {
|
// messages: [{
|
// role: 'user',
|
// content: this.inputText,
|
// }]
|
keyword: this.inputText
|
}
|
this.answer.chatGpt.loading = true
|
let controller = new AbortController()
|
let $this = this
|
const eventSource = fetchEventSource('http://101.133.134.71:9019/EventKg/GetChatGPT', {
|
method: 'POST',
|
// headers: { 'Content-Type': 'application/json' },
|
// body: JSON.stringify(
|
// data
|
// ),
|
data: data,
|
|
signal: controller.signal,
|
onopen() {//建立连接的回调
|
console.log('open')
|
if ($this.answer.chatGpt.value) {
|
$this.answer.chatGpt.value += '\n\n'
|
}
|
},
|
onmessage(event) {//接收一次数据段时回调，因为是流式返回，所以这个回调会被调用多次
|
$this.answer.chatGpt.loading = false
|
let data = JSON.parse(event.data)
|
if (data.choices && data.choices.length > 0 && data.choices[0].delta && data.choices[0].delta.content) {
|
$this.answer.chatGpt.value += data.choices[0].delta.content
|
if ($this.type === 'chatGpt') {
|
//滚动到文本末端
|
document.getElementById('answer_end').scrollIntoView({ behavior: 'smooth' })
|
}
|
}
|
},
|
onclose() {//正常结束的回调
|
$this.answer.chatGpt.loading = false
|
controller.abort()//出错后不要重试
|
eventSource.close()
|
},
|
onerror(error) {//连接出现异常回调
|
$this.answer.chatGpt.loading = false
|
console.log('close', error)
|
controller.abort()//出错后不要重试
|
eventSource.close()
|
}
|
})
|
|
// return axios.request({
|
// url: 'Chat/OpenAI/Send',
|
// data,
|
// method: 'post'
|
// })
|
},
|
/**
|
* 文心一言请求
|
*/
|
getAnswer_wenXinYiYan() {
|
let data = {
|
messages: [{
|
role: 'user',
|
content: this.inputText,
|
}]
|
}
|
this.answer.wenXinYiYan.loading = true
|
let controller = new AbortController()
|
let $this = this
|
const eventSource = fetchEventSource('http://101.133.134.71:9019/EventKg/GetChatGPT', {
|
method: 'POST',
|
// headers: { 'Content-Type': 'application/json' },
|
data: {
|
keyword: this.inputText
|
},
|
// body: JSON.stringify(
|
// data
|
// ),
|
signal: controller.signal,
|
onopen() {//建立连接的回调
|
console.log('open')
|
if ($this.answer.wenXinYiYan.value) {
|
$this.answer.wenXinYiYan.value += '\n\n'
|
}
|
},
|
onmessage(event) {//接收一次数据段时回调，因为是流式返回，所以这个回调会被调用多次
|
$this.answer.wenXinYiYan.loading = false
|
let data = JSON.parse(event.data)
|
if (data && data.result) {
|
$this.answer.wenXinYiYan.value += data.result
|
if ($this.type === 'wenXinYiYan') {
|
//滚动到文本末端
|
document.getElementById('answer_end').scrollIntoView({ behavior: 'smooth' })
|
}
|
}
|
},
|
onclose() {//正常结束的回调
|
$this.answer.wenXinYiYan.loading = false
|
controller.abort()//出错后不要重试
|
eventSource.close()
|
},
|
onerror(error) {//连接出现异常回调
|
$this.answer.wenXinYiYan.loading = false
|
console.log('close', error)
|
controller.abort()//出错后不要重试
|
eventSource.close()
|
}
|
})
|
// return axios.request({
|
// url: 'Chat/Baidu/Send',
|
// data,
|
// method: 'post'
|
// })
|
},
|
/**
|
* 清华智谱请求
|
*/
|
getAnswer_qingHua() {
|
let data = {
|
messages: [{
|
role: 'user',
|
content: this.inputText,
|
}]
|
}
|
this.answer.qingHua.loading = true
|
let controller = new AbortController()
|
let $this = this
|
const eventSource = fetchEventSource('http://101.133.134.71:9019/EventKg/GetChatGPT', {
|
method: 'POST',
|
// headers: { 'Content-Type': 'application/json' },
|
// body: JSON.stringify(
|
// data
|
// ),
|
data: {
|
keyword: this.inputText
|
},
|
signal: controller.signal,
|
onopen() {//建立连接的回调
|
console.log('open')
|
if ($this.answer.qingHua.value) {
|
$this.answer.qingHua.value += '\n\n'
|
}
|
},
|
onmessage(event) {//接收一次数据段时回调，因为是流式返回，所以这个回调会被调用多次
|
$this.answer.qingHua.loading = false
|
$this.answer.qingHua.value += event.data
|
if ($this.type === 'qingHua') {
|
//滚动到文本末端
|
document.getElementById('answer_end').scrollIntoView({ behavior: 'smooth' })
|
}
|
},
|
onclose() {//正常结束的回调
|
$this.answer.qingHua.loading = false
|
controller.abort()//出错后不要重试
|
eventSource.close()
|
},
|
onerror(error) {//连接出现异常回调
|
$this.answer.qingHua.loading = false
|
console.log('close', error)
|
controller.abort()//出错后不要重试
|
eventSource.close()
|
}
|
})
|
// return axios.request({
|
// url: 'Chat/Zhipu/Send',
|
// data,
|
// method: 'post'
|
// })
|
},
|
},
|
watch: {//数据监听
|
messages() {
|
// 等待Vue更新DOM
|
if (this.messages.length > 0) {
|
this.$nextTick(() => {
|
// 将滚动条滚动到最新的消息
|
const messages = document.querySelectorAll('.message');
|
const lastMessage = messages[messages.length - 1];
|
lastMessage.scrollIntoView();
|
});
|
}
|
}
|
|
|
},
|
computed: {//计算属性
|
|
}
|
}
|
</script>
|
<style scoped>
|
/deep/ .ivu-radio-group-button-solid .ivu-radio-wrapper-checked:not(.ivu-radio-wrapper-disabled) {
|
background: #f4d196;
|
}
|
|
/deep/ .ivu-radio-group-button .ivu-radio-wrapper-checked:first-child {
|
border-color: #f4d196;
|
}
|
|
/deep/ .ivu-radio-group-button-solid .ivu-radio-wrapper-checked:not(.ivu-radio-wrapper-disabled):hover {
|
background: #f4d196;
|
}
|
|
/deep/ .ivu-radio-group-button .ivu-radio-wrapper-checked:active {
|
border-color: #f4d196;
|
}
|
|
/deep/ .ivu-radio-group-button .ivu-radio-wrapper-checked {
|
border-color: #f4d196;
|
box-shadow: -1px 0 0 0 #f4d196;
|
}
|
|
/deep/ .ivu-radio-group-button .ivu-radio-wrapper-checked:hover {
|
border-color: #f4d196;
|
}
|
|
.gradientclass {
|
background-image: linear-gradient(to bottom, white, #f1e6d2);
|
text-align: center;
|
padding-top: 32px;
|
font-weight: 700;
|
font-size: 16px;
|
color: #101010;
|
}
|
|
.answerClass {
|
padding: 10px;
|
font-weight: 400;
|
font-size: 13px;
|
line-height: 22px;
|
color: #101010;
|
background-image: linear-gradient(to bottom, white, #f1e6d2);
|
|
}
|
|
#intelligentAssistant {
|
height: calc(100vh - 110px);
|
min-height: 500px;
|
position: relative;
|
}
|
|
#intelligentAssistant footer {
|
width: 100%;
|
height: 150px;
|
background-color: #F5F7F9;
|
position: absolute;
|
bottom: 0px;
|
}
|
|
main {
|
display: flex;
|
flex-direction: column;
|
align-items: flex-start;
|
padding: 10px;
|
overflow-y: auto;
|
height: calc(100vh - 250px);
|
}
|
|
.message {
|
display: flex;
|
flex-direction: column;
|
/* max-width: 60%; */
|
padding: 10px;
|
margin-bottom: 10px;
|
border-radius: 10px;
|
position: relative;
|
|
}
|
|
|
|
.dots {
|
display: flex;
|
flex-direction: column;
|
justify-content: space-between;
|
height: 12px;
|
width: 20px;
|
padding-left: 9px;
|
}
|
|
|
.dot {
|
width: 2px;
|
height: 2px;
|
border-radius: 50%;
|
background-color: black;
|
}
|
|
.user {
|
align-self: flex-end;
|
color: white;
|
display: flex;
|
position: relative;
|
}
|
|
.action {
|
position: absolute;
|
bottom: 0;
|
}
|
|
.ai {
|
align-self: flex-start;
|
color: black;
|
display: flex;
|
position: relative;
|
}
|
|
.action {
|
position: absolute;
|
bottom: 0;
|
}
|
|
.avatar {
|
width: 40px;
|
height: 40px;
|
/* border-radius: 50%; */
|
}
|
|
.timestamp {
|
font-size: 0.8em;
|
color: #aaa;
|
}
|
|
.user .text {
|
background-color: #0084ff;
|
margin-top: 5px;
|
border-radius: 3px;
|
padding: 5px;
|
}
|
|
.ai .text {
|
background-color: #FFF;
|
border-radius: 3px;
|
padding: 3px;
|
margin-top: 5px;
|
}
|
|
.demo-spin-col .circular {
|
width: 25px;
|
height: 25px;
|
}
|
|
.demo-spin-icon-load {
|
animation: ani-demo-spin 1s linear infinite;
|
}
|
|
@keyframes ani-demo-spin {
|
from {
|
transform: rotate(0deg);
|
}
|
|
50% {
|
transform: rotate(180deg);
|
}
|
|
to {
|
transform: rotate(360deg);
|
}
|
}
|
|
.demo-spin-col {
|
height: 100px;
|
position: relative;
|
border: 1px solid #eee;
|
}</style>
|
<style>#intelligentAssistant .ivu-radio-input {
|
visibility: hidden;
|
}</style>
|
|
