|
|
<template>
|
|
|
<view class="chat">
|
|
|
<view v-for="(m,index) in messages" :key="m.id" :id="'msg-' + m.id" :class="['msg', m.role]">
|
|
|
<view v-if="m.role === 'user'" class="bubble user-bubble">
|
|
|
<text v-if="m.inputType === 'text'">{{ m.content }}</text>
|
|
|
<view class="text-voice" v-if="m.inputType === 'voice'" @tap="playVoice(m)">
|
|
|
<text>{{ m.duration }}</text>
|
|
|
<image class="voice-play" src="@/static/voice-play.png" mode="widthFix"></image>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view v-else class="bubble ai-bubble">
|
|
|
<view v-if="m.type === 'card'" class="ai-card">
|
|
|
<view class="ai-card-title">{{ m.title }}</view>
|
|
|
<view class="ai-card-body">{{ m.content }}</view>
|
|
|
</view>
|
|
|
<view v-else-if="m.loading" class="ai-loading">
|
|
|
<view class="loading-dot"></view>
|
|
|
<view class="loading-dot"></view>
|
|
|
<view class="loading-dot"></view>
|
|
|
</view>
|
|
|
<view v-else>
|
|
|
<text>{{
|
|
|
m.displayText !== undefined ? m.displayText : m.content
|
|
|
}}</text>
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
<view class="continue-create" v-if="m.isBreak && index === messages.length - 1">
|
|
|
<view class="text" @tap="continueCreate">
|
|
|
继续生成 →
|
|
|
</view>
|
|
|
<!-- upvote-highlight -->
|
|
|
</view>
|
|
|
<view class="tool-box" v-if="!isReplying && index === messages.length - 1 && m.role === 'assistant'">
|
|
|
<image class="tool-image" src="@/static/refresh.png" mode="widthFix" @tap="refresh"></image>
|
|
|
<image class="tool-image"
|
|
|
:src="isHighLight ? (upvoteIndex === 0 ? upvoteHighLightImage : upvoteImage) : upvoteImage"
|
|
|
mode="widthFix" @tap="upvote"></image>
|
|
|
<image class="tool-image rote"
|
|
|
:src="isHighLight ? (upvoteIndex === 1 ? upvoteHighLightImage : upvoteImage) : upvoteImage"
|
|
|
mode="widthFix" @tap="unUpvote"></image>
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
|
|
|
<uni-popup ref="popup" type="bottom" class="popup" @change="changeShow">
|
|
|
<view class="feedback">
|
|
|
<view class="top">
|
|
|
<view class="title">反馈</view>
|
|
|
<view class="close" @tap="closeFeedback">×</view>
|
|
|
</view>
|
|
|
<view class="quick-ask">
|
|
|
<view :class="['ask',item.id === askActive ? 'active' : '']" v-for="item in quickAskList" :key="item.id" @tap="selectAsk(item.id)">{{item.label}}</view>
|
|
|
</view>
|
|
|
<view>
|
|
|
<textarea class="textarea" placeholder="我们想知道你对此回答不满意的原因，你认为更好的回答是什么？"></textarea>
|
|
|
</view>
|
|
|
<button type="primary" style="font-size: 16px;" @tap="submitFeedback">提交</button>
|
|
|
</view>
|
|
|
</uni-popup>
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
export default {
|
|
|
props: {
|
|
|
messages: {
|
|
|
type: Array,
|
|
|
default () {
|
|
|
return [];
|
|
|
},
|
|
|
},
|
|
|
isReplying: {
|
|
|
type: Boolean,
|
|
|
default: false
|
|
|
}
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
upvoteImage: require('@/static/upvote.png'),
|
|
|
upvoteHighLightImage: require('@/static/upvote-highlight.png'),
|
|
|
isHighLight: false,
|
|
|
upvoteIndex: null,
|
|
|
quickAskList : [
|
|
|
{
|
|
|
id : 1,
|
|
|
label : '虚假信息'
|
|
|
},
|
|
|
{
|
|
|
id : 2,
|
|
|
label : '没有帮助'
|
|
|
},
|
|
|
{
|
|
|
id : 3,
|
|
|
label : '其他'
|
|
|
}
|
|
|
],
|
|
|
askActive : null
|
|
|
}
|
|
|
},
|
|
|
methods: {
|
|
|
changeShow(e) {
|
|
|
this.$emit('changeShow',e.show)
|
|
|
},
|
|
|
selectAsk(id){
|
|
|
this.askActive = id;
|
|
|
},
|
|
|
continueCreate() {
|
|
|
this.$emit('continueCreate')
|
|
|
},
|
|
|
refresh() {
|
|
|
this.$emit('refresh')
|
|
|
},
|
|
|
upvote() {
|
|
|
if (this.upvoteIndex !== 0) {
|
|
|
this.isHighLight = true
|
|
|
} else {
|
|
|
this.isHighLight = !this.isHighLight;
|
|
|
}
|
|
|
this.upvoteIndex = 0;
|
|
|
if (this.isHighLight) {
|
|
|
uni.showToast({
|
|
|
title: '反馈成功',
|
|
|
icon: 'none',
|
|
|
duration: 1500
|
|
|
})
|
|
|
}
|
|
|
},
|
|
|
unUpvote() {
|
|
|
if (this.upvoteIndex !== 1) {
|
|
|
this.$refs.popup.open();
|
|
|
}
|
|
|
if (!this.isHighLight) {
|
|
|
this.$refs.popup.open();
|
|
|
}else{
|
|
|
this.isHighLight = !this.isHighLight;
|
|
|
}
|
|
|
this.upvoteIndex = 1;
|
|
|
},
|
|
|
submitFeedback(){
|
|
|
this.$refs.popup.close();
|
|
|
this.isHighLight = true;
|
|
|
uni.showToast({
|
|
|
title: '反馈成功',
|
|
|
icon: 'none',
|
|
|
duration: 1500
|
|
|
})
|
|
|
},
|
|
|
closeFeedback(){
|
|
|
this.$refs.popup.close();
|
|
|
this.isHighLight = false;
|
|
|
},
|
|
|
playVoice(voicePath) {
|
|
|
console.log('voicePath', voicePath);
|
|
|
// if (!voicePath) {
|
|
|
// uni.showToast({
|
|
|
// title: "无可播放的语音",
|
|
|
// icon: "none",
|
|
|
// });
|
|
|
// return;
|
|
|
// }
|
|
|
// if (!this.innerAudioContext) {
|
|
|
// this.innerAudioContext = uni.createInnerAudioContext();
|
|
|
// this.innerAudioContext.autoplay = false;
|
|
|
// this.innerAudioContext.onError(() => {
|
|
|
// uni.showToast({
|
|
|
// title: "播放失败",
|
|
|
// icon: "none",
|
|
|
// });
|
|
|
// });
|
|
|
// }
|
|
|
// try {
|
|
|
// this.innerAudioContext.stop();
|
|
|
// } catch (e) {}
|
|
|
// this.innerAudioContext.src = voicePath;
|
|
|
// this.innerAudioContext.play();
|
|
|
},
|
|
|
},
|
|
|
};
|
|
|
</script>
|
|
|
|
|
|
<style scoped lang="scss">
|
|
|
.chat {
|
|
|
margin: 6px 0 12px;
|
|
|
}
|
|
|
|
|
|
.msg {
|
|
|
/* margin: 10px 0; */
|
|
|
display: flex;
|
|
|
margin-bottom: 10px;
|
|
|
padding-bottom: 10px;
|
|
|
flex-wrap: wrap;
|
|
|
}
|
|
|
|
|
|
.msg.user {
|
|
|
justify-content: flex-end;
|
|
|
}
|
|
|
|
|
|
.bubble {
|
|
|
max-width: 80%;
|
|
|
padding: 10px 12px;
|
|
|
border-radius: 14px;
|
|
|
font-size: 14px;
|
|
|
line-height: 1.5;
|
|
|
}
|
|
|
|
|
|
.user-bubble {
|
|
|
background: #4e7bff;
|
|
|
color: #fff;
|
|
|
border-bottom-right-radius: 4px;
|
|
|
margin-right: 6px;
|
|
|
}
|
|
|
|
|
|
.ai-bubble {
|
|
|
background: #fff;
|
|
|
color: #333;
|
|
|
border-bottom-left-radius: 4px;
|
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
|
|
|
}
|
|
|
|
|
|
.continue-create {
|
|
|
width: 100%;
|
|
|
|
|
|
.text {
|
|
|
font-size: 12px;
|
|
|
border: 1px solid #ddd;
|
|
|
border-radius: 20px;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
width: 90px;
|
|
|
padding: 5px 0;
|
|
|
margin-top: 8px;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.tool-box {
|
|
|
width: 100%;
|
|
|
margin-top: 15px;
|
|
|
padding-left: 5px;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
|
|
|
.tool-image {
|
|
|
width: 14px;
|
|
|
margin-right: 15px;
|
|
|
}
|
|
|
|
|
|
.rote {
|
|
|
transform: rotate(180deg);
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.listen-btn {
|
|
|
margin-left: 8px;
|
|
|
color: #6b7280;
|
|
|
font-size: 14px;
|
|
|
}
|
|
|
|
|
|
.ai-card-title {
|
|
|
color: #5f6fff;
|
|
|
font-weight: 600;
|
|
|
margin-bottom: 6px;
|
|
|
}
|
|
|
|
|
|
.ai-card-body {
|
|
|
color: #666;
|
|
|
}
|
|
|
|
|
|
/* loading animation */
|
|
|
.ai-loading {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
gap: 6px;
|
|
|
padding: 4px 0;
|
|
|
}
|
|
|
|
|
|
.loading-dot {
|
|
|
width: 8px;
|
|
|
height: 8px;
|
|
|
border-radius: 50%;
|
|
|
background: #9ca3af;
|
|
|
animation: loading-bounce 1.5s ease-in-out infinite both;
|
|
|
}
|
|
|
|
|
|
.loading-dot:nth-child(1) {
|
|
|
animation-delay: -0.32s;
|
|
|
}
|
|
|
|
|
|
.loading-dot:nth-child(2) {
|
|
|
animation-delay: -0.16s;
|
|
|
}
|
|
|
|
|
|
@keyframes loading-bounce {
|
|
|
|
|
|
0%,
|
|
|
80%,
|
|
|
100% {
|
|
|
transform: scale(0.8);
|
|
|
opacity: 0.5;
|
|
|
}
|
|
|
|
|
|
40% {
|
|
|
transform: scale(1.2);
|
|
|
opacity: 1;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.text-voice {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
}
|
|
|
|
|
|
.voice-play {
|
|
|
width: 20px;
|
|
|
margin-left: 5px;
|
|
|
}
|
|
|
|
|
|
.popup {
|
|
|
z-index: 99999;
|
|
|
}
|
|
|
|
|
|
.feedback {
|
|
|
background-color: #fff;
|
|
|
padding: 0 20px;
|
|
|
border-radius: 10px 10px 0 0;
|
|
|
padding-bottom: 20px;
|
|
|
.top {
|
|
|
position: relative;
|
|
|
text-align: center;
|
|
|
padding: 10px 0;
|
|
|
|
|
|
.title {
|
|
|
font-weight: bold;
|
|
|
}
|
|
|
|
|
|
.close {
|
|
|
background-color: #ddd;
|
|
|
width: 24px;
|
|
|
height: 24px;
|
|
|
border-radius: 50%;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
position: absolute;
|
|
|
right: 0;
|
|
|
top: 50%;
|
|
|
transform: translateY(-50%);
|
|
|
font-size: 18px;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.quick-ask{
|
|
|
display: flex;
|
|
|
.ask{
|
|
|
padding: 5px 15px;
|
|
|
border: 1px solid #ddd;
|
|
|
border-radius: 10px;
|
|
|
margin-right: 10px;
|
|
|
font-size: 14px;
|
|
|
}
|
|
|
|
|
|
.active{
|
|
|
background-color: #007AFF;
|
|
|
color: #fff;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.textarea {
|
|
|
width: 100%;
|
|
|
background-color: rgba(45, 44, 46, .05);
|
|
|
// min-height: 60px;
|
|
|
padding: 10px 12px;
|
|
|
box-sizing: border-box;
|
|
|
margin-bottom: 20px;
|
|
|
margin-top: 10px;
|
|
|
border-radius: 10px;
|
|
|
font-size: 14px;
|
|
|
}
|
|
|
}
|
|
|
</style> |