main
xushilin 3 months ago
parent 761d4718a6
commit fb857996ca

@ -9,7 +9,7 @@
</view> </view>
</view> </view>
<view v-if="m.role !== 'user' && m.type !== 'card' && !m.loading " class="ai-voice" style="width: 100%;"> <view v-if="m.role !== 'user' && m.type !== 'card' && !m.loading && m.src " class="ai-voice" style="width: 100%;">
<view class="ai-voice-play" @tap="clickAiVocie(m.src)"> <view class="ai-voice-play" @tap="clickAiVocie(m.src)">
<image class="voice-play" :src="leftVoiceImgList[current].image" mode="widthFix" <image class="voice-play" :src="leftVoiceImgList[current].image" mode="widthFix"
v-if="playSrc === m.src"> v-if="playSrc === m.src">
@ -336,7 +336,7 @@
} }
.ai-bubble { .ai-bubble {
background: #fff; background: #F3F7F9;
color: #333; color: #333;
border-bottom-left-radius: 4px; border-bottom-left-radius: 4px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);

@ -2,7 +2,7 @@
<view> <view>
<!-- greeting card --> <!-- greeting card -->
<view class="greet-card"> <view class="greet-card">
<image src="@/static/ai.webp" mode="widthFix" style="width: 60px; margin-right: 10px"></image> <image class="ai-image" src="@/static/ai.webp" mode="widthFix" style="width: 60px; margin-right: 10px"></image>
<view class="greet-text"> <view class="greet-text">
<view class="hi">HI{{ timeOfDayText }}</view> <view class="hi">HI{{ timeOfDayText }}</view>
<view class="sub">我是萃星科技智能体</view> <view class="sub">我是萃星科技智能体</view>
@ -43,7 +43,8 @@
id: 3, id: 3,
label: "今日生产数据", label: "今日生产数据",
}, },
] ],
aiLogoMsg : null
} }
}, },
computed: { computed: {
@ -55,10 +56,20 @@
return "晚上好"; return "晚上好";
}, },
}, },
mounted(){
let self = this;
uni.createSelectorQuery().select(".ai-image").boundingClientRect((rect) => {
self.aiLogoMsg = rect
}).exec();
},
methods: { methods: {
onSuggestionTap(text) { onSuggestionTap(text) {
this.$emit('onSuggestionTap', text) this.$emit('onSuggestionTap', text)
},
getAiLogoMsg() {
return this.aiLogoMsg;
} }
} }
} }
</script> </script>
@ -67,7 +78,7 @@
.greet-card { .greet-card {
display: flex; display: flex;
align-items: center; align-items: center;
background: #fff; background-image: linear-gradient(to right, #EFF6FF, #EEF2FF);
border-radius: 14px; border-radius: 14px;
padding: 12px; padding: 12px;
margin-bottom: 10px; margin-bottom: 10px;
@ -88,14 +99,15 @@
.welcome { .welcome {
font-size: 13px; font-size: 13px;
color: #333; color: #333;
background: #fff; background: #F3F7F9;
border-radius: 12px; border-radius: 12px;
padding: 10px 12px; padding: 10px 12px;
margin: 12px 0; margin: 12px 0;
max-width: 80%;
} }
.guess-panel { .guess-panel {
background: #fff; background-image: linear-gradient(to right, #EFF6FF, #EEF2FF);
border-radius: 14px; border-radius: 14px;
padding: 10px; padding: 10px;
margin-bottom: 16px; margin-bottom: 16px;
@ -113,7 +125,7 @@
} }
.guess-item { .guess-item {
background: #f7f8fc; background: #FFFFFF ;
border-radius: 10px; border-radius: 10px;
padding: 12px; padding: 12px;
display: flex; display: flex;

@ -2,8 +2,8 @@
<view class="ai-page"> <view class="ai-page">
<page-meta :page-style="'overflow:' + (show ? 'hidden' : 'visible')"></page-meta> <page-meta :page-style="'overflow:' + (show ? 'hidden' : 'visible')"></page-meta>
<top @clickLeft="openDrawer" @resetMessage="resetMessage"></top> <top @clickLeft="openDrawer" @resetMessage="resetMessage"></top>
<scroll-view class="content" :scroll-y="true" show-scrollbar="false" scroll-with-animation ref="scrollView"> <scroll-view class="content" :scroll-y="true" show-scrollbar="false" scroll-with-animation>
<front @onSuggestionTap="onQuickAsk" /> <front @onSuggestionTap="onQuickAsk" ref="front" />
<chat :messages="messages" @continueCreate="continueCreate" :isReplying="isReplying" @refresh="refresh" <chat :messages="messages" @continueCreate="continueCreate" :isReplying="isReplying" @refresh="refresh"
@changeShow="changeShow" @changeInputText="changeInputText" @handleVoice="handleVoice" @changeShow="changeShow" @changeInputText="changeInputText" @handleVoice="handleVoice"
:isPlayingVoice="isPlayingVoice" :playSrc="playSrc" /> :isPlayingVoice="isPlayingVoice" :playSrc="playSrc" />
@ -15,8 +15,11 @@
<search ref="searchRef" :inputText="inputText" @onSend="onSend" @onQuickAsk="onQuickAsk" <search ref="searchRef" :inputText="inputText" @onSend="onSend" @onQuickAsk="onQuickAsk"
@changeInputText="changeInputText" :isReplying="isReplying" @handleBreak="handleBreak" @changeInputText="changeInputText" :isReplying="isReplying" @handleBreak="handleBreak"
@changeShow="changeShow" @startRecord="startRecord"/> @changeShow="changeShow" @startRecord="startRecord" />
<!-- <view class="ai-logo" v-if="isShowRightLogo">
<image src="../../static/ai.webp" mode="widthFix" style="width: 100%;"></image>
</view> -->
</view> </view>
</template> </template>
@ -61,9 +64,24 @@
playSrc: '', playSrc: '',
breakRequestList: [], breakRequestList: [],
speechIdList: [], speechIdList: [],
textToVoiceLoading: false textToVoiceLoading: false,
isGetAiLogoMsg: false,
aiLogoRect: null,
isShowRightLogo: false
}; };
}, },
// onPageScroll(e) {
// if (!this.getAiLogoMsg) {
// this.aiLogoRect = this.$refs.front.getAiLogoMsg();
// this.getAiLogoMsg = true
// }
// if (!this.aiLogoRect) return;
// if (e.scrollTop > (this.aiLogoRect.top + 12)) {
// this.isShowRightLogo = true;
// } else {
// this.isShowRightLogo = false;
// }
// },
async mounted() { async mounted() {
this.loadChatHistory(); this.loadChatHistory();
uni.onKeyboardHeightChange((res) => { uni.onKeyboardHeightChange((res) => {
@ -75,10 +93,10 @@
}); });
// #ifdef APP-PLUS // #ifdef APP-PLUS
this.$nextTick(() => { this.$nextTick(() => {
this.marginBottom = this.$refs.searchRef.getHeight() || 103; this.marginBottom = this.$refs.searchRef.getHeight() || 112;
}); });
// #endif // #endif
this.marginBottom = 103; this.marginBottom = 112;
this.initAudio(); this.initAudio();
}, },
@ -87,14 +105,15 @@
}, },
methods: { methods: {
// //
startRecord(){ startRecord() {
if(this.isPlayingVoice && this.audioContext.src){ if (this.isPlayingVoice && this.audioContext.src) {
this.audioContext.stop(); this.audioContext.stop();
this.isPlayingVoice = false; this.isPlayingVoice = false;
} }
}, },
// //
handleVoice(src) { handleVoice(src) {
if (!src) return;
if (this.audioContext.src === src && this.isPlayingVoice) { if (this.audioContext.src === src && this.isPlayingVoice) {
this.isPlayingVoice = false; this.isPlayingVoice = false;
this.audioContext.stop(); this.audioContext.stop();
@ -125,9 +144,9 @@
}); });
this.audioContext.onEnded(res => { this.audioContext.onEnded(res => {
this.isPlayingVoice = false this.isPlayingVoice = false
// const platform = uni.getSystemInfoSync().uniPlatform; const platform = uni.getSystemInfoSync().uniPlatform;
// if(platform === 'web') return; if(platform === 'web') return;
// removeFile(this.audioContext.src) removeFile(this.audioContext.src)
}) })
}, },
// arraybuff // arraybuff
@ -157,7 +176,7 @@
const base64WithPrefix = `data:audio/mp3;base64,${base64Audio}`; const base64WithPrefix = `data:audio/mp3;base64,${base64Audio}`;
const fileName = `_doc/${Date.now()}_numberPerson.mp3`; const fileName = `_doc/${Date.now()}_numberPerson.mp3`;
base64ToFile(base64WithPrefix, fileName, (path) => { base64ToFile(base64WithPrefix, fileName, (path) => {
this.playSrc = path; self.playSrc = path;
self.textToVoiceLoading = false; self.textToVoiceLoading = false;
self.audioContext.src = path; self.audioContext.src = path;
let endTime2 = Date.now(); let endTime2 = Date.now();
@ -196,6 +215,7 @@
}, },
// //
handleBreak() { handleBreak() {
console.log('handleBreak');
if (this.isLoading) { if (this.isLoading) {
const loadingIdx = this.messages.findIndex((m) => m.id === this.loadingId); const loadingIdx = this.messages.findIndex((m) => m.id === this.loadingId);
if (loadingIdx > -1) this.messages.splice(loadingIdx, 1); if (loadingIdx > -1) this.messages.splice(loadingIdx, 1);
@ -398,11 +418,22 @@
} }
this.replyAction(reply) this.replyAction(reply)
}, },
async replyAction(reply, isCreate) { async replyAction(reply, isContinue) {
if (!this.messages[this.messages.length - 1].src) { let content = ''
//
if (reply.errMsg) {
content = `请求出错: ${reply.errMsg}`
} else {
content = reply;
};
let result
if (this.$store.state.set.replyPattern === '1' && !this.messages[this.messages.length - 1].src && !
reply.errMsg) {
let speechId = Date.now(); let speechId = Date.now();
this.speechId = speechId; this.speechId = speechId;
const result = await this.getSpeech(reply); result = await this.getSpeech(reply);
};
if (result) {
let speechIndex = this.speechIdList.findIndex(item => item.speechId === speechId) let speechIndex = this.speechIdList.findIndex(item => item.speechId === speechId)
if (speechIndex > -1) { if (speechIndex > -1) {
this.speechIdList = this.speechIdList.splice(speechIndex, -1) this.speechIdList = this.speechIdList.splice(speechIndex, -1)
@ -412,28 +443,26 @@
this.isPlayingVoice = true; this.isPlayingVoice = true;
this.audioContext.play(); this.audioContext.play();
}; };
}; }
let content = ''
if (reply.errMsg) {
content = `请求出错: ${reply.errMsg}`
} else {
content = reply
};
// 4. loading // 4. loading
const loadingIdx = this.messages.findIndex((m) => m.id === this.loadingId); const loadingIdx = this.messages.findIndex((m) => m.id === this.loadingId);
if (loadingIdx > -1) this.messages.splice(loadingIdx, 1); if (loadingIdx > -1) this.messages.splice(loadingIdx, 1);
// 5. + // 5. +
const replyId = this.baseId + 1; const replyId = this.baseId + 1;
if (!isCreate) { if (!isContinue) {
this.messages.push({ this.messages.push({
id: replyId, id: replyId,
role: "assistant", role: "assistant",
type: "text", type: "text",
content, content,
displayText: "", displayText: "",
src: JSON.parse(JSON.stringify(this.audioContext.src)), src: (this.audioContext.src && this.$store.state.set.replyPattern === '1') ? JSON
.parse(JSON.stringify(this.audioContext.src)) : null,
duration: null duration: null
}); });
} else {
this.audioContext.play();
this.isPlayingVoice = true;
} }
this.$nextTick(() => this.scrollToBottom()); this.$nextTick(() => this.scrollToBottom());
this.typewriter(replyId, content); this.typewriter(replyId, content);
@ -517,14 +546,22 @@
.ai-page { .ai-page {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
background: #f7f8fc; background: #fff;
} }
.content { .content {
flex: 1; flex: 1;
padding: 16px 12px 0px 12px; padding: 16px 12px 0px 12px;
background-color: #f7f8fc; background-color: #fff;
width: 100%; width: 100%;
box-sizing: border-box; box-sizing: border-box;
} }
.ai-logo {
width: 60px;
position: fixed;
top: 50%;
right: 10px;
z-index: 999999999;
}
</style> </style>

@ -89,9 +89,6 @@
uni.createSelectorQuery().select(".dock").boundingClientRect((rect) => { uni.createSelectorQuery().select(".dock").boundingClientRect((rect) => {
self.searchHeight = Math.ceil(rect.height) self.searchHeight = Math.ceil(rect.height)
}).exec(); }).exec();
uni.createSelectorQuery().select(".record-box").boundingClientRect((rect) => {
console.log('rect',rect);
}).exec();
}, },
beforeDestroy() { beforeDestroy() {
if (this.recordSimTimer) { if (this.recordSimTimer) {
@ -227,8 +224,7 @@
title: "AI正在回复中", title: "AI正在回复中",
icon: "none", icon: "none",
}); });
const appAuthorizeSetting = uni.getAppAuthorizeSetting(); if (uni.getAppAuthorizeSetting().microphoneAuthorized !== 'authorized') {
if (appAuthorizeSetting.microphoneAuthorized !== 'authorized') {
uni.showModal({ uni.showModal({
title: '权限设置', title: '权限设置',
content: '应用缺乏必要的权限,是否前往手动授予该权限?', content: '应用缺乏必要的权限,是否前往手动授予该权限?',
@ -306,6 +302,7 @@
.quick-actions { .quick-actions {
padding: 6px 10px 4px; padding: 6px 10px 4px;
padding-top: 15px;
} }
.quick-actions.horizontal { .quick-actions.horizontal {

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long
Loading…
Cancel
Save