[feat][ai聊天][自动滚动到底部]

src/views/xjc-integratedmachine/common/ai/chat.vue

@@ -132,7 +132,7 @@
         aiChatRecordList(queryForm).then(resp =>{
             chatRecordList.value = resp.rows;
             loadingHistoryRecord.value = false
-            setInterval(()=>{
+            setTimeout(()=>{
                 scrollToBottom();
             }, 100);
             if(resp.total == 0){
@@ -268,22 +268,22 @@
 
     /* 语音识别 ↓*/
     // 控制录音弹窗
-    let voiceOpen = false
+    let iatVoiceOpen = false
     // 是否开始录音
-    let startVoiceStatus = false
+    let iatStartVoiceStatus = false
     // 识别中状态
-    let identifyStatus = false
+    let iatIdentifyStatus = false
     // 录音对象
-    let recorder = null
-    let transcription = ''
-    let btnStatus = ''
-    let resultText = ''
-    let resultTextTemp = ''
-    let countdownInterval = null
+    let iatRecorder = null
+    let iatTranscription = ''
+    let iatBtnStatus = ''
+    let iatResultText = ''
+    let iatResultTextTemp = ''
+    let iatCountdownInterval = null
     let iatWS = null
-    let recognition = null
-    let buttonDisabled = true
-    let loading = false
+    let iatRecognition = null
+    let iatButtonDisabled = true
+    let iatLoading = false
     let xfIatKeys = {
         APPID: '5a2643f4',
         APISecret: 'MTg4MWIzY2VmYTg2YTEwMjliMDY1N2Iz',
@@ -292,12 +292,12 @@
     // 初始化语音识别
     function initSpeechRecognition(){
         // 初始化录音
-        recorder = new window.RecorderManager('/ai/iat/dist');
+        iatRecorder = new window.RecorderManager('/ai/iat/dist');
         // 开始录音
-        recorder.onStart = () => {
+        iatRecorder.onStart = () => {
             changeBtnStatus('OPEN');
         };
-        recorder.onFrameRecorded = ({ isLastFrame, frameBuffer }) => {
+        iatRecorder.onFrameRecorded = ({ isLastFrame, frameBuffer }) => {
             if (iatWS.readyState === iatWS.OPEN) {
                 iatWS.send(
                     JSON.stringify({
@@ -314,40 +314,40 @@
                 }
             }
         };
-        recorder.onStop = () => {
+        iatRecorder.onStop = () => {
             console.log('录音结束，停止定时器');
-            clearInterval(countdownInterval);
-            startVoiceStatus = false;
+            clearInterval(iatCountdownInterval);
+            iatStartVoiceStatus = false;
         };
 
     }
 
     async function startVoice() {
-        if (loading) {
+        if (iatLoading) {
             return;
         }
-        voiceOpen = true;
+        iatVoiceOpen = true;
         await playIatVoice();
     }
 
     async function playIatVoice() {
-        if (loading) {
+        if (iatLoading) {
             return;
         }
-        startVoiceStatus = !startVoiceStatus;
+        iatStartVoiceStatus = !iatStartVoiceStatus;
         // 浏览器自带的识别
-        if (recognition) {
-            if (startVoiceStatus) {
-                recognition.start();
+        if (iatRecognition) {
+            if (iatStartVoiceStatus) {
+                iatRecognition.start();
             } else {
-                recognition.stop();
+                iatRecognition.stop();
             }
             return;
         }
-        if (startVoiceStatus) {
+        if (iatStartVoiceStatus) {
             connectWebSocket();
         } else {
-            recorder.stop();
+            iatRecorder.stop();
         }
     }
 
@@ -355,15 +355,15 @@
      * 关闭录音弹窗
      */
     function closeVoiceOpen() {
-        voiceOpen = false;
-        startVoiceStatus = false;
-        if (recorder) {
-            recorder.stop();
+        iatVoiceOpen = false;
+        iatStartVoiceStatus = false;
+        if (iatRecorder) {
+            iatRecorder.stop();
         }
-        if (recognition) {
-            recognition.stop();
+        if (iatRecognition) {
+            iatRecognition.stop();
         }
-        transcription = '';
+        iatTranscription = '';
     }
 
     function renderResult(resultData) {
@@ -381,15 +381,14 @@
             if (data.pgs) {
                 if (data.pgs === 'apd') {
                     // 将resultTextTemp同步给resultText
-                    resultText = resultTextTemp;
+                    iatResultText = iatResultTextTemp;
                 }
                 // 将结果存储在resultTextTemp中
-                resultTextTemp = resultText + str;
+                iatResultTextTemp = iatResultText + str;
             } else {
-                resultText += str;
+                iatResultText += str;
             }
-            inputMessage.value = resultTextTemp || resultText || '';
-            console.log("识别："+inputMessage.value);
+            inputMessage.value = iatResultTextTemp || iatResultText || '';
         }
         if (jsonData.code === 0 && jsonData.data.status === 2) {
             iatWS.close();
@@ -414,7 +413,7 @@
         iatWS.onopen = e => {
             console.log('iatWS.onopen', e);
             // 开始录音
-            recorder.start({
+            iatRecorder.start({
                 sampleRate: 16000,
                 frameSize: 1280,
             });
@@ -444,12 +443,12 @@
         };
         iatWS.onerror = e => {
             console.error(e);
-            recorder.stop();
+            iatRecorder.stop();
             changeBtnStatus('CLOSED');
         };
         iatWS.onclose = e => {
             console.log(e);
-            recorder.stop();
+            iatRecorder.stop();
             changeBtnStatus('CLOSED');
         };
     }
@@ -480,11 +479,11 @@
     function countdown() {
         let seconds = 60;
         console.log(`录音中（${seconds}s）`);
-        countdownInterval = setInterval(() => {
+        iatCountdownInterval = setInterval(() => {
             seconds -= 1;
             if (seconds <= 0) {
-                clearInterval(countdownInterval);
-                recorder.stop();
+                clearInterval(iatCountdownInterval);
+                iatRecorder.stop();
             } else {
                 console.log(`录音中（${seconds}s）`);
             }
@@ -492,13 +491,13 @@
     }
 
     function changeBtnStatus(status) {
-        btnStatus = status;
+        iatBtnStatus = status;
         if (status === 'CONNECTING') {
             console.log('建立连接中');
-            resultText = '';
-            resultTextTemp = '';
+            iatResultText = '';
+            iatResultTextTemp = '';
         } else if (status === 'OPEN') {
-            if (recorder) {
+            if (iatRecorder) {
                 countdown();
             }
         } else if (status === 'CLOSING') {
@@ -536,7 +535,9 @@
 
     let chatContainerRef = ref(null)
     function scrollToBottom(){
-        chatContainerRef.value.scrollTop = chatContainerRef.value.scrollHeight+20;
+        if(chatContainerRef.value.scrollHeight){
+            chatContainerRef.value.scrollTop = chatContainerRef.value.scrollHeight+20;
+        }
     }
 
     onMounted(()=>{