From 35f75727be88985b8a0f68e6f0c834428f45ebed Mon Sep 17 00:00:00 2001
From: CaptainB <bin@fit2cloud.com>
Date: Fri, 20 Sep 2024 17:18:08 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E5=AF=B9=E8=AF=9D?=
 =?UTF-8?q?=E6=97=A5=E5=BF=97=E9=87=8C=E7=9A=84=E8=AF=AD=E9=9F=B3=E4=B8=8D?=
 =?UTF-8?q?=E8=83=BD=E6=92=AD=E6=94=BE=E7=9A=84=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

--bug=1046835 --user=刘瑞斌 【应用】应用对话日志中，点击播放按钮没有反应 https://www.tapd.cn/57709429/s/1582747
---
 .../components/ai-chat/LogOperationButton.vue | 40 ++++++++++++++++---
 ui/src/components/ai-chat/index.vue           |  1 +
 2 files changed, 36 insertions(+), 5 deletions(-)

diff --git a/ui/src/components/ai-chat/LogOperationButton.vue b/ui/src/components/ai-chat/LogOperationButton.vue
index 4e3296c3c..d715f1c91 100644
--- a/ui/src/components/ai-chat/LogOperationButton.vue
+++ b/ui/src/components/ai-chat/LogOperationButton.vue
@@ -8,9 +8,12 @@
     <!-- 语音播放 -->
     <span v-if="tts">
       <el-tooltip effect="dark" content="语音播放" placement="top">
-        <el-button text @click="playAnswerText(data?.answer_text)">
+        <el-button v-if="!audioPlayerStatus" text @click="playAnswerText(data?.answer_text)">
           <AppIcon iconName="app-video-play"></AppIcon>
         </el-button>
+        <el-button v-else text @click="pausePlayAnswerText()">
+          <el-icon ><VideoPause /></el-icon>
+        </el-button>
       </el-tooltip>
       <el-divider direction="vertical" />
     </span>
@@ -58,6 +61,13 @@ import EditContentDialog from '@/views/log/component/EditContentDialog.vue'
 import EditMarkDialog from '@/views/log/component/EditMarkDialog.vue'
 import { datetimeFormat } from '@/utils/time'
 import applicationApi from '@/api/application'
+import { useRoute } from 'vue-router'
+
+const route = useRoute()
+const {
+  params: { id },
+} = route as any
+
 
 const props = defineProps({
   data: {
@@ -68,7 +78,8 @@ const props = defineProps({
     type: String,
     default: ''
   },
-  tts: Boolean
+  tts: Boolean,
+  tts_type: String
 })
 
 const emit = defineEmits(['update:data'])
@@ -89,16 +100,25 @@ function editMark(data: any) {
   EditMarkDialogRef.value.open(data)
 }
 
+const audioPlayerStatus = ref(false)
+
 const playAnswerText = (text: string) => {
-  if (props.data.tts_type === 'BROWSER') {
+  console.log(props.data)
+  if (props.tts_type === 'BROWSER') {
     // 创建一个新的 SpeechSynthesisUtterance 实例
     const utterance = new SpeechSynthesisUtterance(text)
     // 调用浏览器的朗读功能
     window.speechSynthesis.speak(utterance)
   }
-  if (props.data.tts_type === 'TTS') {
+  if (props.tts_type === 'TTS') {
+    audioPlayerStatus.value = true
+    // 恢复上次暂停的播放
+    if (audioPlayer.value?.src) {
+      audioPlayer.value?.play()
+      return
+    }
     applicationApi
-      .postTextToSpeech(props.data.id as string, { text: text }, loading)
+      .postTextToSpeech(id || props.applicationId as string, { text: text }, loading)
       .then((res: any) => {
         // 假设我们有一个 MP3 文件的字节数组
         // 创建 Blob 对象
@@ -117,6 +137,9 @@ const playAnswerText = (text: string) => {
         if (audioPlayer.value instanceof HTMLAudioElement) {
           audioPlayer.value.src = url
           audioPlayer.value.play() // 自动播放音频
+          audioPlayer.value.onended = () => {
+            audioPlayerStatus.value = false
+          }
         } else {
           console.error('audioPlayer.value is not an instance of HTMLAudioElement')
         }
@@ -127,6 +150,13 @@ const playAnswerText = (text: string) => {
   }
 }
 
+const pausePlayAnswerText = () => {
+  if (props.tts_type === 'TTS') {
+    audioPlayerStatus.value = false
+    audioPlayer.value?.pause()
+  }
+}
+
 function refreshMark() {
   buttonData.value.improve_paragraph_id_list = []
   emit('update:data', buttonData.value)
diff --git a/ui/src/components/ai-chat/index.vue b/ui/src/components/ai-chat/index.vue
index 7d2d1a1af..e1de4f41f 100644
--- a/ui/src/components/ai-chat/index.vue
+++ b/ui/src/components/ai-chat/index.vue
@@ -131,6 +131,7 @@
                   v-model:data="chatList[index]"
                   :applicationId="appId"
                   :tts="props.data.tts_model_enable"
+                  :tts_type="props.data.tts_type"
                 />
               </div>