feat: 优化加载页速度

src/components/SoundAi/Ui/Dialog/index.jsx

@@ -4,18 +4,30 @@ import { Tooltip, Typography } from 'antd'
 import { Fragment, useCallback, useContext, useEffect, useRef, useState } from 'react'
 import { event } from '@wisdom-utils/utils'
 import moment from 'moment'
-import { Directive , AllDirectiveTypes} from '../../core'
+import { Directive, AllDirectiveTypes } from '../../core'
 import context from '../../config'
 import SparkDirective from '../../core/directive/SparkDirective'
 
 const Dialog = props => {
-    const {globalConfig , setGlobalConfig} = useContext(context)
-    const { pandaRecordWebSocketRef , close} = props
+    const { globalConfig, setGlobalConfig } = useContext(context)
+    const { pandaRecordWebSocketRef, close } = props
     const ulRef = useRef(null)
     const directiveRef = useRef(null)
     const toolTipRef = useRef(null)
     const timeRef = useRef(null)
-    const [data, setData] = useState([])
+
+    const templateData = [
+        "打开模型搭建功能菜单",
+        "打开场景搭建菜单组",
+        "回到首页",
+        "关闭当前菜单",
+        "熊猫智慧水务解决方案"
+    ]
+    const [data, setData] = useState(() => [{
+        role: "system",
+        content: `嗨，您好！猜测您可能问以下的问题\n ${templateData.map((i, index) => `${index + 1}.${i}。`).join("\n")}`,
+        time: new moment().format("HH:mm:ss"),
+    }])
 
 
     useEffect(() => {
@@ -30,10 +42,10 @@ const Dialog = props => {
     useEffect(() => {
         directiveRef.current = new Directive({
             params: {
-                sparkModelConfig : globalConfig.getIn(['key']).shortSound
+                sparkModelConfig: globalConfig.getIn(['key']).shortSound
             }
         })
-        if(globalConfig.get('key').isOpenSparkModel) {
+        if (globalConfig.get('key').isOpenSparkModel) {
             directiveRef.current.directiveTypes.push(SparkDirective)
         }
         event.on("aiSound:finish", finish)
@@ -47,7 +59,7 @@ const Dialog = props => {
     }, [])
 
     const finish = useCallback(async ({ resultText }) => {
-        if(!resultText) return
+        if (!resultText) return
         pandaRecordWebSocketRef.current.setStatus("pause")
         const directive = directiveRef.current.parse({
             text: resultText
@@ -59,10 +71,10 @@ const Dialog = props => {
             })
             let resultMsg = ""
             await directive.excute({
-                sendMsg : msg => {
+                sendMsg: msg => {
                     resultMsg += msg
                     updateLastData({
-                        content : resultMsg
+                        content: resultMsg
                     })
                 }
             })
@@ -78,7 +90,7 @@ const Dialog = props => {
 
     const frame = useCallback((data) => {
         const { resultText, resultTextTemp } = data
-        if(!resultTextTemp) return
+        if (!resultTextTemp) return
         setData(data => {
             const length = data.length
             const lastData = data.at(-1)
@@ -105,15 +117,6 @@ const Dialog = props => {
         })
     }, [])
 
-    const sendContent = ({ role = "system", content, ...params }) => {
-        setData(i => i.concat([{
-            role,
-            time: new moment().format("HH:mm:ss"),
-            content,
-            ...params
-        }]))
-    }
-
     const updateLastData = ({ content, ...params }) => {
         setData(data => data.map((item, index) => {
             if (index < data.length - 1) {
@@ -130,6 +133,15 @@ const Dialog = props => {
         }))
     }
 
+    const sendContent = ({ role = "system", content, ...params }) => {
+        setData(i => i.concat([{
+            role,
+            time: new moment().format("HH:mm:ss"),
+            content,
+            ...params
+        }]))
+    }
+
     const startTime = () => {
         destroyTime()
         timeRef.current = setTimeout(() => {
@@ -138,7 +150,7 @@ const Dialog = props => {
     }
 
     const destroyTime = () => {
-        if(timeRef.current) {
+        if (timeRef.current) {
             clearTimeout(timeRef.current)
             timeRef.current = null
         }
@@ -152,22 +164,22 @@ const Dialog = props => {
                 <div className={style.help}>
                     <Tooltip
                         placement="bottomRight"
-                        title = {
+                        title={
                             <div className={style.toolTipContent}>
                                 <p className={style.toolTipTitle}>支持以下语音指令集</p>
                                 <div className={style.toolTipWrapper}>
                                     <ul>
                                         {
-                                            AllDirectiveTypes.filter(item => !!item.name).map((item , index) => <li key={index}>{index + 1}.{item.name}</li>)
+                                            AllDirectiveTypes.filter(item => !!item.name).map((item, index) => <li key={index}>{index + 1}.{item.name}</li>)
                                         }
                                     </ul>
                                 </div>
                             </div>
                         }
-                        getPopupContainer = {() => toolTipRef.current}
-                        arrowPointAtCenter = {true}
+                        getPopupContainer={() => toolTipRef.current}
+                        arrowPointAtCenter={true}
                     >
-                        <span className={style.helpIcon} ref = {toolTipRef}></span>
+                        <span className={style.helpIcon} ref={toolTipRef}></span>
                     </Tooltip>
                 </div>
             </div>

src/components/SoundAi/Ui/PandaTip/index.jsx

@@ -14,16 +14,32 @@ const PandaTip = props => {
     const [initOpen, setInitOpen] = useState(false)
     const [showTip, setShowTip] = useState(true)
     const timeRef = useRef(null)
-    const finish = useCallback(({ resultText }) => {
+    // const finish = useCallback(({ resultText }) => {
+    //     console.log("说完")
+    //     const directive = directiveRef.current.parse({
+    //         text: resultText
+    //     })
+    //     if (!directive) return null
+        // if (directive instanceof AwakenDirective && status == "close") {
+        //     setStatus("open")
+        // } else if (directive instanceof ByeDirective && status == "open") {
+        //     // setStatus("close")
+        //     close()
+        // }
+    // }, [status])
+
+    const frame = useCallback(({ resultTextTemp }) => {
         const directive = directiveRef.current.parse({
-            text: resultText
+            text: resultTextTemp
         })
-        if (!directive) return null
+        console.log(resultTextTemp)
+        if(!directive) return null
         if (directive instanceof AwakenDirective && status == "close") {
             setStatus("open")
+            pandaRecordWebSocketRef.current.wsClose()
         } else if (directive instanceof ByeDirective && status == "open") {
-            // setStatus("close")
             close()
+            pandaRecordWebSocketRef.current.wsClose()
         }
     }, [status])
 
@@ -34,7 +50,8 @@ const PandaTip = props => {
     }, [])
 
     useEffect(() => {
-        event.on("aiSound:finish", finish)
+        // event.on("aiSound:finish", finish)
+        event.on("aiSound:frame", frame)
         if (status == "open") {
             destroyTime()
         } else if (status == "close") {
@@ -46,7 +63,8 @@ const PandaTip = props => {
             }
         }
         return () => {
-            event.off("aiSound:finish", finish)
+            // event.off("aiSound:finish", finish)
+            event.off("aiSound:frame", frame)
         }
     }, [status , initOpen])
 

src/components/SoundAi/core/core/sockets/PandaRecordWebSocket.js

@@ -142,8 +142,13 @@ class PandaRecordWebSocket extends PandaWebSocket {
       this.resultTextTemp = ""
       this.createWs()
     }
-    if (this.ws && [this.ws.CONNECTING, this.ws.OPEN].includes(this.ws.readyState)) {
+    if(this.ws) {
+      if([this.ws.CONNECTING, this.ws.OPEN].includes(this.ws.readyState)) {
         this.frameBuffers.push(frameBuffer)
+      } else if(this.ws.CLOSED == this.ws.readyState){
+        this.frameBuffers.push(frameBuffer)
+        this.ws = null
+      }
     }
   }