gengx

src/components/animation/lodingSpin.vue

@@ -1,16 +1,16 @@
 <template>
- <div style="position: relative;">
-	  <div class="spin">
-			<div class="loader">
-				<div class="outer" />
-				<div class="middle" />
-				<div class="inner" />
-			</div>
-		</div>
-		<p class="text">
-				思考中
-		</p>
- </div>
+  <div style="position: relative;">
+    <div class="spin">
+      <div class="loader">
+        <div class="outer" />
+        <div class="middle" />
+        <div class="inner" />
+      </div>
+    </div>
+    <p class="text">
+      AI思考中
+    </p>
+  </div>
 </template>
 
 <style scoped>

src/components/animation/recording.vue

@@ -1,3 +1,25 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+defineProps({
+  text: {
+    type: String,
+    default: '输入中',
+  },
+})
+const recording = ref('输入中')
+let count = 0
+setInterval(() => {
+  count++
+  if (count > 3)
+    count = 1
+  let str = ''
+  for (let i = 0; i < count; i++)
+    str += '.'
+
+  recording.value = `输入中${str}`
+}, 600)
+</script>
+
 <template>
   <div style="position: relative;">
     <div class="div">
@@ -7,7 +29,7 @@
       <span />
     </div>
     <p class="text">
-      输入中
+      {{ text || recording }}
     </p>
   </div>
 </template>

src/views/chat/components/Message/index.vue

@@ -1,5 +1,5 @@
 <script setup lang='ts'>
-import { computed, reactive, ref, watch } from 'vue'
+import { computed, onUpdated, reactive, ref, watch } from 'vue'
 import { NDropdown, useMessage } from 'naive-ui'
 import axios from 'axios'
 import AvatarComponent from './Avatar.vue'
@@ -14,6 +14,7 @@ interface Props {
   dateTime?: string
   text?: string
   tts?: string
+  autoplay?: boolean
   inversion?: boolean
   error?: boolean
   loading?: boolean
@@ -117,11 +118,12 @@ let ttslength = 0
 let ttsLoadFlag = 0
 let lengthFlag = 0
 let tts = props.tts ? JSON.parse(props.tts) : []
+let ttsplay = true
 async function loadTTS() {
   lengthFlag = tts.length
   if (tts.length > ttslength && audioElements.length == ttslength && ttsLoadFlag == 0) {
     for (let i = ttslength; i < lengthFlag; i++) {
-      console.log(`加载了${i}次`, tts[i])
+      console.log(`加载了${i + 1}次`, tts[i])
       ttsLoadFlag = 1
       if (tts[i] == '')
         break
@@ -132,8 +134,10 @@ async function loadTTS() {
           onAudioEnd()
         })
         audioElements.push(a)
-        if (ttslength == 0)
+        if (ttsplay) {
+          ttsplay = false
           playAudio()
+        }
         if (i == tts.length - 1) {
           ttslength = tts.length
           ttsLoadFlag = 0
@@ -147,15 +151,33 @@ async function loadTTS() {
 }
 
 // 监听到文本数据改变
-watch(() => props.tts, async (n: any, o: any) => {
+const watchTTS = watch(() => props.tts, async (n: any, o: any) => {
   if (props.tts == '') {
-    for (let i = 0; i < audioElements.length; i++)
+    for (let i = 0; i < audioElements.length; i++) {
       audioElements[i].pause()
-    audioElements.length = 0
+      if (i + 1 == audioElements.length)
+        audioElements.length = 0
+    }
   }
   tts = props.tts ? JSON.parse(props.tts) : []
   loadTTS()
 }, { immediate: true, deep: true })
+// 停止播放音频
+const stopPlay = () => {
+  console.log('停止播放音频')
+
+  audioElements.forEach((item: any) => {
+    item.pause()
+    item.currentTime = 0
+  })
+}
+
+onUpdated(() => {
+  if (!props.autoplay) {
+    stopPlay()
+    watchTTS()// 取消监听
+  }
+})
 
 console.log('组件渲染 ', props.text, props.tts)
 
@@ -163,7 +185,7 @@ const playStatus = ref('end')
 let playing = 0
 let sok = false
 async function radioPlay() {
-  return console.log('播放', props.tts[0])
+  // return console.log('播放', props.tts[0])
   audioElements.length = 0
   emit('changeNowStatus', 'loding')
   const socket = new WebSocket('wss://chat.lihaink.cn/zhanti/tts')
@@ -227,9 +249,11 @@ async function radioPlay() {
 
 let playFlag = false
 const onAudioEnd = (index: any) => {
-  console.log('ok', playing)
+  console.log('播放完 ', playing)
+
   playing++
   playFlag = false
+
   if (playing < audioElements.length) {
     playFlag = true
     audioElements[playing].play()
@@ -243,15 +267,20 @@ const onAudioEnd = (index: any) => {
 // 播放音频
 const playAudio = (playIndex: any) => {
   // for (let i = 0; i < audioElements.length; i++)
-  audioElements[0].play()
-  emit('changeNowStatus', 'playing')
+  try {
+    audioElements[0]!.play()
+    emit('changeNowStatus', 'playing')
+  }
+  catch (error) {
+    alert('请检查浏览器是否支持音频播放')
+  }
 }
 
 watch(() => audioElements.length, (newVal, oldVal) => {
   if (playStatus.value == 'pause')
     return
   if (newVal > playing && playFlag == false && newVal > 0) {
-    audioElements[playing].play()
+    audioElements[playing]!.play()
     playStatus.value = 'playing'
   }
 })
@@ -271,6 +300,10 @@ const noPauseAudio = () => {
   audioElements[pauseIndex].play()
   pauseIndex = -1
 }
+
+defineExpose({
+  stopPlay,
+})
 </script>
 
 <template>

src/views/chat/index.vue

@@ -35,6 +35,8 @@ import playing from '@/components/animation/playing.vue'
 
 const maxWeight = ref(1200)
 
+const messageRef = ref(null)
+
 // 接收命令
 const connection = new Push({
   url: 'wss://chat.lihaink.cn/zhanti/push', // websocket地址
@@ -54,6 +56,13 @@ console.log(user_channel)
 user_channel.on('message', (data: any) => {
   // data里是消息内容
   console.log('收到命令', data)
+  return null
+  if (messageRef.value?.length > 0)
+    messageRef.value[messageRef.value.length - 1].stopPlay()
+  if (socket?.readyState < 2)
+    socket.close()
+
+  // return
   if (recordFalg.value == 0) {
     RecordXunfei()
     recordFalg.value = 1
@@ -125,14 +134,25 @@ dataSources.value.forEach((item, index) => {
 })
 
 function handleSubmit() {
+  if (recordFalg.value == 1) {
+    RecordXunfei()
+    recordFalg.value = 0
+    nowStatus.value = 'input'
+  }
+  if (messageRef.value?.length > 0)
+    messageRef.value[messageRef.value.length - 1].stopPlay()
+  if (socket?.readyState < 2)
+    socket.close()
   onConversation()
 }
 
+let socket: WebSocket
+
 // 发送消息
 async function onConversation() {
   const message = prompt.value
 
-  const socket = new WebSocket('wss://chat.lihaink.cn/chat')
+  socket = new WebSocket('wss://chat.lihaink.cn/chat')
 
   const promise = () => {
     return new Promise((resolve, reject) => {
@@ -199,6 +219,7 @@ async function onConversation() {
   scrollToBottom()
 
   let infoList = JSON.parse(JSON.stringify(dataSources.value))
+  infoList = infoList.slice(-20)
   infoList = infoList.map((item: any, index: any) => {
     return {
       role: index % 2 == 0 ? 'user' : 'assistant',
@@ -648,7 +669,7 @@ setTimeout(() => {
     <indexBG v-if="!isMobile">
       <transition mode="out-in" name="fade">
         <inputing v-if="nowStatus == 'input'" key="input" />
-        <recording v-else-if="nowStatus == 'record'" key="record" />
+        <recording v-else-if="nowStatus == 'record'" key="record" :text="prompt" />
         <!-- <loding v-else-if="nowStatus=='loding'" key="loding"></loding> -->
         <lodingSpin v-else-if="nowStatus == 'loding'" key="loding" />
         <playing v-else-if="nowStatus == 'playing'" key="playing" />
@@ -696,10 +717,12 @@ setTimeout(() => {
                 <div>
                   <Message
                     v-for="(item, index) of dataSources"
+                    ref="messageRef"
                     :key="index"
                     :date-time="item.dateTime"
                     :text="item.text"
                     :tts="item.tts"
+                    :autoplay="index % 2 === 0 ? false : true"
                     :inversion="item.inversion"
                     :error="item.error"
                     :loading="item.loading"