CoolFace
Apppublic

FLASHback1/bingo

sourceHugging Facemitupdated 3y agoView on Hugging Face
0likes
voice.tsx53 linesDownload Raw Back to components
1import React, { useEffect } from 'react'2import { useSetAtom } from 'jotai'3import { useBing } from '@/lib/hooks/use-bing'4import Image from 'next/image'5import VoiceIcon from '@/assets/images/voice.svg'6import VoiceButton from './ui/voice'7import { SR } from '@/lib/bots/bing/sr'8import { voiceListenAtom } from '@/state'9 10const sr = new SR(['发送', '清空', '退出'])11 12const Voice = ({ setInput, input, sendMessage, isSpeaking }: Pick<ReturnType<typeof useBing>, 'setInput' | 'sendMessage' | 'input' | 'isSpeaking'>) => {13  const setListen = useSetAtom(voiceListenAtom)14  useEffect(() => {15    if (sr.listening) return16    sr.transcript = !isSpeaking17  }, [isSpeaking])18 19  useEffect(() => {20    sr.onchange = (msg: string, command?: string) => {21      switch (command) {22        case '退出':23          sr.stop()24          break;25        case '发送':26          sendMessage(input)27        case '清空':28          setInput('')29          break;30        default:31          setInput(input + msg)32      }33    }34  }, [input])35 36  const switchSR = (enable: boolean = false) => {37    setListen(enable)38    if (enable) {39      sr.start()40    } else {41      sr.stop()42    }43  }44 45  return sr.listening ? (46    <VoiceButton onClick={() => switchSR(false)} />47  ) : (48    <Image alt="start voice" src={VoiceIcon} width={24} className="-mt-0.5" onClick={() => switchSR(true)} />49  )50};51 52export default Voice;53