index.jsx

import style from './style.less'
import { withRouter } from '@wisdom-utils/runtime'
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, CloseSessionDirective , PandaSpeechSynthesisUtterance} 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 ulRef = useRef(null)
  const directiveRef = useRef(null)
  const closeDirectiveRef = useRef(null)
  const toolTipRef = useRef(null)
  const timeRef = useRef(null)
  const isDebug = globalConfig.get("isDebug")
  const currentDirectiveRef = useRef(null)
  const pandaSpeechSynthesisUtteranceRef = useRef(null)
  //是否开启系统语音
  const isOpenSystemSound = globalConfig.getIn(['key', 'isOpenSystemSound'])
  const defaultEmptyMsg = "亲,我暂时还未理解你的意思，请换一种方式表达或者描述更加具体"

  const [data, setData] = useState(() => [{
    role: "system",
    content: `嗨，您好！猜测您可能问以下的问题\n ${globalConfig.get('guideTemplateData').toJS().map((i, index) => `${index + 1}.${i}。`).join("\n")}`,
    time: new moment().format("HH:mm:ss"),
  }])


  useEffect(() => {
    startTime()
    if (!ulRef.current.lastChild) return
    ulRef.current.lastChild.scrollIntoView({
      block: 'end',
      behavior: 'smooth'
    })
  }, [data])

  useEffect(() => {
    directiveRef.current = new Directive({
      params: {
        sparkModelConfig: globalConfig.getIn(['key']).shortSound
      }
    })
    closeDirectiveRef.current = new Directive({
      directiveTypes: [CloseSessionDirective]
    })
    pandaSpeechSynthesisUtteranceRef.current = new PandaSpeechSynthesisUtterance()
    if (globalConfig.get('key').isOpenSparkModel) {
      directiveRef.current.directiveTypes.push(SparkDirective)
      directiveRef.current._directiveTypes.push(SparkDirective)
    }
    event.on("aiSound:finish", finish)
    event.on("aiSound:frame", frame)
    return () => {
      event.off("aiSound:finish", finish)
      event.off("aiSound:frame", frame)
      if(pandaSpeechSynthesisUtteranceRef.current) {
        pandaSpeechSynthesisUtteranceRef.current.clear()
        pandaSpeechSynthesisUtteranceRef.current = null
      }
      destroyTime()
    }
  }, [])

  const finish = useCallback(async ({ resultText }) => {
    if (!resultText) return
    if(currentDirectiveRef.current) {
      return
    }
    pandaSpeechSynthesisUtteranceRef.current?.clear()
    const directive = directiveRef.current.parse({
      text: resultText
    })
    if (directive) {
      currentDirectiveRef.current = directive
      sendContent({
        role: "system",
        content: "系统正在思考中,请稍后..."
      })
      let resultMsg = ""
      await directive.excute({
        sendMsg: msg => {
          isOpenSystemSound && pandaSpeechSynthesisUtteranceRef.current.push(msg)
          resultMsg += msg
          updateLastData({
            content: resultMsg
          })
        }
      })
      if(isOpenSystemSound) {
        destroyTime()
        await pandaSpeechSynthesisUtteranceRef.current.speakEnd()
        startTime()
      }
      currentDirectiveRef.current = null
      return
    }

    sendContent({
      role: "system",
      content: defaultEmptyMsg
    })
    if(isOpenSystemSound) {
      pandaSpeechSynthesisUtteranceRef.current.push(defaultEmptyMsg)
      await pandaSpeechSynthesisUtteranceRef.current.speakEnd()
    }
  }, [])

  const frame = useCallback((data) => {
    const { resultText, resultTextTemp } = data
    if (!resultTextTemp) return
    const hasCloseSessionDirective = closeDirectiveRef.current.parse({
      text: resultTextTemp
    })
    if (hasCloseSessionDirective) {
      closeSession({
        resultText: resultTextTemp
      })
    } else {
      !currentDirectiveRef.current && updateUserData({ resultTextTemp })
    }
  }, [])

  const closeSession = ({ resultText }) => {
    if (currentDirectiveRef.current) {
      currentDirectiveRef.current.closeResponse()
      pandaSpeechSynthesisUtteranceRef.current?.clear()
      closeSessionReocrder()
      currentDirectiveRef.current = null
    } else {
      if (!isDebug) {
        closeSessionReocrder()
        event.emit("aiSound:finish", {
          resultText
        })
      }
    }
  }

  const closeSessionReocrder = () => {
    pandaRecordWebSocketRef.current?.wsClose?.()
  }

  const updateUserData = ({ resultTextTemp }) => {
    setData(data => {
      const length = data.length
      const lastData = data.at(-1)
      if (length == 0 || lastData.role == "system") {
        return data.concat([{
          role: "user",
          time: new moment().format("HH:mm:ss"),
          content: resultTextTemp
        }])
      } else {
        return data.map((data, index) => {
          if (index < length - 1) {
            return {
              ...data
            }
          } else {
            return {
              ...data,
              content: resultTextTemp
            }
          }
        })
      }
    })
  }

  const updateLastData = ({ content, ...params }) => {
    setData(data => data.map((item, index) => {
      if (index < data.length - 1) {
        return {
          ...item
        }
      } else {
        return {
          ...item,
          content,
          ...params,
        }
      }
    }))
  }

  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(() => {
      close && close()
    }, globalConfig.getIn(['closePandaAiTime']))
  }

  const destroyTime = () => {
    if (timeRef.current) {
      clearTimeout(timeRef.current)
      timeRef.current = null
    }
  }

  return (<div className={style.container}>
    <div className={style.pandaIcon}></div>
    <div className={style.main}>
      <div className={style.header}>
        <p>熊猫智能语音库</p>
        <div className={style.help}>
          <Tooltip
            placement="bottomRight"
            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>)
                    }
                  </ul>
                </div>
              </div>
            }
            getPopupContainer={() => toolTipRef.current}
            arrowPointAtCenter={true}
          >
            <span className={style.helpIcon} ref={toolTipRef}></span>
          </Tooltip>
        </div>
      </div>
      <div className={style.content}>
        <div className={style.display}>
          <ul className={style.ul} ref={ulRef}>
            {
              data.map((item, index) => <Fragment key={index}>
                {
                  item.interval ? <li className={style.interval}>{item.time}</li> : null
                }
                <li data-role={item.role} key={index} className={style.list}>
                  <span className={style.avater}></span>
                  <div className={style.aiContent}>
                    <p className={style.aiText}> {item.content}</p>
                  </div>
                </li>
              </Fragment>)
            }
          </ul>
        </div>
      </div>
    </div>
  </div>)
}

export default withRouter(Dialog)