|
|
<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'" @longpress.prevent="loadTool($event,m)">{{ 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-if="m.role !== 'user' && m.type !== 'card' && !m.loading " class="ai-voice" style="width: 100%;">
|
|
|
<view class="ai-voice-play" @tap="clickAiVocie(m.src)">
|
|
|
<image class="voice-play" :src="leftVoiceImgList[current].image" mode="widthFix"
|
|
|
v-if="playSrc === m.src">
|
|
|
</image>
|
|
|
<image class="voice-play" :src="leftVoiceImgList[2].image" mode="widthFix"
|
|
|
v-else>
|
|
|
</image>
|
|
|
<text
|
|
|
style="margin-left: 5px;font-size: 14px;">{{ m.duration ? Math.ceil( m.duration) : 0 }}"</text>
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
<view v-if="m.role !== 'user'" 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>
|
|
|
|
|
|
<view class="text-tool" :class="{'show': showTool}" :style="textToolStyle" v-if="isOpenTextTool">
|
|
|
<view class="tool-item" v-for="(item, index) in textToolList" :key="item.id"
|
|
|
:style="{animationDelay: index * 0.05 + 's'}" @tap="selectTextTool(item.id)">
|
|
|
<image class="img" :src="item.imageUrl" mode="widthFix"></image>
|
|
|
<text class="text">{{item.text}}</text>
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
<view class="mark-layer" v-if="isOpenTextTool" @touchstart="closeTool"></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>
|
|
|
|
|
|
|
|
|
<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>
|
|
|
import {
|
|
|
copyText
|
|
|
} from '@/utils/utils.js'
|
|
|
export default {
|
|
|
props: {
|
|
|
messages: {
|
|
|
type: Array,
|
|
|
default () {
|
|
|
return [];
|
|
|
},
|
|
|
},
|
|
|
isReplying: {
|
|
|
type: Boolean,
|
|
|
default: false,
|
|
|
},
|
|
|
isPalyingVoice: {
|
|
|
type: Boolean,
|
|
|
default: false,
|
|
|
},
|
|
|
playSrc : {
|
|
|
type: String,
|
|
|
default: '',
|
|
|
},
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
upvoteImage: require('@/static/upvote.png'),
|
|
|
upvoteHighLightImage: require('@/static/upvote-highlight.png'),
|
|
|
leftVoiceImgList: [{
|
|
|
image: require('@/static/voice-play-left1.png')
|
|
|
}, {
|
|
|
image: require('@/static/voice-play-left2.png')
|
|
|
}, {
|
|
|
image: require('@/static/voice-play-left3.png')
|
|
|
}],
|
|
|
current: 2,
|
|
|
textToolList: [{
|
|
|
id: 1,
|
|
|
text: '复制',
|
|
|
imageUrl: require('@/static/copy.png')
|
|
|
}, {
|
|
|
id: 2,
|
|
|
text: '修改',
|
|
|
imageUrl: require('@/static/edit.png')
|
|
|
}],
|
|
|
isHighLight: false,
|
|
|
upvoteIndex: null,
|
|
|
quickAskList: [{
|
|
|
id: 1,
|
|
|
label: '数据不准确'
|
|
|
},
|
|
|
{
|
|
|
id: 2,
|
|
|
label: '没有帮助'
|
|
|
},
|
|
|
{
|
|
|
id: 3,
|
|
|
label: '其他'
|
|
|
}
|
|
|
],
|
|
|
askActive: null,
|
|
|
textToolStyle: {},
|
|
|
isOpenTextTool: false,
|
|
|
showTool: false,
|
|
|
screenWidth: 0,
|
|
|
selectText: '',
|
|
|
voiceTimer: null,
|
|
|
}
|
|
|
},
|
|
|
mounted() {
|
|
|
this.screenWidth = uni.getSystemInfoSync().screenWidth;
|
|
|
|
|
|
},
|
|
|
watch: {
|
|
|
isPalyingVoice(val) {
|
|
|
if (val) {
|
|
|
this.voiceTimer = setInterval(() => {
|
|
|
if (this.current === 2) {
|
|
|
this.current = -1;
|
|
|
}
|
|
|
this.current += 1;
|
|
|
}, 500)
|
|
|
}else{
|
|
|
if (this.voiceTimer) {
|
|
|
clearInterval(this.voiceTimer)
|
|
|
};
|
|
|
this.current = 2;
|
|
|
}
|
|
|
},
|
|
|
},
|
|
|
methods: {
|
|
|
clickAiVocie(src) {
|
|
|
this.$emit('handleVoice', src)
|
|
|
},
|
|
|
selectTextTool(id) {
|
|
|
switch (id) {
|
|
|
case 1:
|
|
|
copyText(this.selectText)
|
|
|
break;
|
|
|
case 2:
|
|
|
this.$emit('changeInputText', this.selectText)
|
|
|
default:
|
|
|
break;
|
|
|
}
|
|
|
this.closeTool();
|
|
|
},
|
|
|
closeTool() {
|
|
|
this.showTool = false;
|
|
|
this.isOpenTextTool = false;
|
|
|
this.$emit('changeShow', false)
|
|
|
},
|
|
|
loadTool($event, m) {
|
|
|
this.selectText = m.content;
|
|
|
uni.createSelectorQuery().select(`#msg-${m.id}`).boundingClientRect((rect) => {
|
|
|
let height = rect.height || 0;
|
|
|
if ($event.touches[0].pageX > (this.screenWidth / 2)) {
|
|
|
this.textToolStyle = {
|
|
|
top: $event.target.offsetTop + height - 10 + 'px',
|
|
|
right: this.screenWidth - Math.ceil($event.touches[0].pageX) + 'px'
|
|
|
}
|
|
|
} else {
|
|
|
this.textToolStyle = {
|
|
|
top: $event.target.offsetTop + height - 10 + 'px',
|
|
|
left: Math.ceil($event.touches[0].pageX) + 'px'
|
|
|
}
|
|
|
}
|
|
|
this.isOpenTextTool = true;
|
|
|
this.$emit('changeShow', true);
|
|
|
// 确保DOM更新后再触发动画
|
|
|
this.$nextTick(() => {
|
|
|
this.showTool = true;
|
|
|
});
|
|
|
}).exec();
|
|
|
|
|
|
},
|
|
|
changeShow(e) {
|
|
|
this.$emit('changeShow', e.show)
|
|
|
},
|
|
|
selectAsk(id) {
|
|
|
this.askActive = id;
|
|
|
},
|
|
|
continueCreate() {
|
|
|
this.$emit('continueCreate')
|
|
|
},
|
|
|
refresh() {
|
|
|
this.isHighLight = false;
|
|
|
this.upvoteIndex = null;
|
|
|
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;
|
|
|
position: relative;
|
|
|
}
|
|
|
|
|
|
.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;
|
|
|
}
|
|
|
|
|
|
.text-tool {
|
|
|
position: absolute;
|
|
|
background-color: #fff;
|
|
|
z-index: 10000;
|
|
|
color: #000;
|
|
|
border-radius: 5px;
|
|
|
box-shadow: 0 0 1px 1px #e4e4e4;
|
|
|
opacity: 0;
|
|
|
transform: translateY(-10px) scale(0.9);
|
|
|
transition: opacity 0.3s ease, transform 0.3s ease;
|
|
|
|
|
|
&.show {
|
|
|
opacity: 1;
|
|
|
transform: translateY(0) scale(1);
|
|
|
}
|
|
|
|
|
|
.tool-item {
|
|
|
display: flex;
|
|
|
width: 160px;
|
|
|
padding: 10px;
|
|
|
box-sizing: border-box;
|
|
|
align-items: center;
|
|
|
border-bottom: 1px solid #ddd;
|
|
|
font-size: 14px;
|
|
|
opacity: 0;
|
|
|
transform: translateX(-10px);
|
|
|
animation: slideInItem 0.3s ease forwards;
|
|
|
}
|
|
|
|
|
|
.tool-item:last-child {
|
|
|
border-bottom: 0px;
|
|
|
}
|
|
|
|
|
|
.img {
|
|
|
width: 16px;
|
|
|
margin-right: 10px;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
@keyframes slideInItem {
|
|
|
from {
|
|
|
opacity: 0;
|
|
|
transform: translateX(-10px);
|
|
|
}
|
|
|
|
|
|
to {
|
|
|
opacity: 1;
|
|
|
transform: translateX(0);
|
|
|
}
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.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;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.mark-layer {
|
|
|
position: fixed;
|
|
|
width: 100vw;
|
|
|
height: 100vh;
|
|
|
left: 0;
|
|
|
right: 0;
|
|
|
top: 0;
|
|
|
bottom: 0;
|
|
|
z-index: 9999;
|
|
|
opacity: 0;
|
|
|
}
|
|
|
|
|
|
.ai-voice-play {
|
|
|
width: 60px;
|
|
|
background-color: #fff;
|
|
|
margin-bottom: 10px;
|
|
|
padding: 10px 12px;
|
|
|
border-radius: 14px;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
}
|
|
|
</style> |