From 5d573f8f0ca007f5cc3c33689c3bcf86ea6825af Mon Sep 17 00:00:00 2001
From: weaigc <879821485@qq.com>
Date: Mon, 24 Jul 2023 16:24:27 +0800
Subject: [PATCH] feat: support continous voice chatting

---
 README.md                          |  3 +-
 package.json                       |  3 ++
 src/app/globals.scss               |  3 ++
 src/assets/images/speech.svg       | 18 +++++++++++
 src/assets/images/voice.svg        |  3 ++
 src/components/chat-panel.tsx      |  8 +++--
 src/components/chat.tsx            |  2 +-
 src/components/ui/voice/index.scss | 38 ++++++++++++++++++++++
 src/components/ui/voice/index.tsx  |  9 ++++++
 src/components/voice.tsx           | 52 ++++++++++++++++++++++++++++++
 src/pages/api/create.ts            |  2 --
 src/state/index.ts                 |  3 ++
 12 files changed, 138 insertions(+), 6 deletions(-)
 create mode 100644 src/assets/images/speech.svg
 create mode 100644 src/assets/images/voice.svg
 create mode 100644 src/components/ui/voice/index.scss
 create mode 100644 src/components/ui/voice/index.tsx
 create mode 100644 src/components/voice.tsx

diff --git a/README.md b/README.md
index 4ac0e9a2..2c3c69e4 100644
--- a/README.md
+++ b/README.md
@@ -32,6 +32,7 @@ https://bing.github1s.tk
 - 完全基于 Next.js 重写，高度还原 New Bing Web 版 UI，使用体验和 Bing AI 基本一致。
 - 支持 Docker 构建，方便快捷地部署和访问。
 - Cookie 可全局配置，全局共享。
+- 支持持续语音对话
 
 ## RoadMap
 
@@ -39,9 +40,9 @@ https://bing.github1s.tk
  - [x] 支持一键部署
  - [x] 优化移动端展示
  - [x] 支持画图
+ - [x] 支持语音输入(支持语音指令)
  - [ ] 适配深色模式
  - [ ] 支持内置提示词
- - [ ] 支持语音输入
  - [ ] 支持图片输入
  - [ ] 支持离线访问
  - [ ] 国际化翻译
diff --git a/package.json b/package.json
index 0f8e9c04..8b881cf8 100644
--- a/package.json
+++ b/package.json
@@ -46,6 +46,8 @@
     "react-hot-toast": "^2.4.1",
     "react-intersection-observer": "^9.5.2",
     "react-markdown": "^8.0.7",
+    "react-speech-recognition": "^3.10.0",
+    "regenerator-runtime": "^0.13.11",
     "react-syntax-highlighter": "^15.5.0",
     "react-textarea-autosize": "^8.5.0",
     "react-viewport-list": "^7.1.1",
@@ -76,6 +78,7 @@
     "@types/react-copy-to-clipboard": "^5.0.4",
     "@types/react-dom": "18.2.7",
     "@types/react-scroll-to-bottom": "^4.2.0",
+    "@types/react-speech-recognition": "^3.9.2",
     "@types/react-syntax-highlighter": "^15.5.6",
     "@types/ws": "^8.5.5",
     "@typescript-eslint/eslint-plugin": "^5.60.1",
diff --git a/src/app/globals.scss b/src/app/globals.scss
index a3d2c702..57a098e7 100644
--- a/src/app/globals.scss
+++ b/src/app/globals.scss
@@ -941,6 +941,9 @@ p {
     gap: 16px;
     justify-content: space-between;
     align-items: flex-start;
+    &>*:nth-child(n+5) {
+      display: none;
+    }
   }
 
   .message-input {
diff --git a/src/assets/images/speech.svg b/src/assets/images/speech.svg
new file mode 100644
index 00000000..acfc7393
--- /dev/null
+++ b/src/assets/images/speech.svg
@@ -0,0 +1,18 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" fill="#75306c" width="50" height="50"
+  preserveAspectRatio="xMidYMid meet"
+  style="width: 100%; height: 100%; transform: translate3d(0px, 0px, 0px);">
+  <defs>
+    <clipPath id="__lottie_element_2">
+      <rect width="50" height="50" x="0" y="0"></rect>
+    </clipPath>
+  </defs>
+  <g clip-path="url(#__lottie_element_2)">
+    <g transform="matrix(1,0,0,1,0,0)" opacity="1" style="display: block;">
+      <g opacity="1" transform="matrix(1,0,0,1,0,0)">
+        <path stroke-linecap="round" stroke-linejoin="miter" fill-opacity="0" stroke-miterlimit="10"
+          stroke="rgb(0,0,0)" stroke-opacity="1" stroke-width="2"
+          d=" M25,21.31846809387207 C25,21.31846809387207 25,28.673080444335938 25,28.673080444335938 M31,15.628485679626465 C31,15.628485679626465 31,34.36306381225586 31,34.36306381225586 M37,8.363062858581543 C37,8.363062858581543 37,41.62848663330078 37,41.62848663330078 M43,16.792348861694336 C43,16.792348861694336 43,33.173709869384766 43,33.173709869384766 M7,14.764792442321777 C7,14.764792442321777 7,35.22675704956055 7,35.22675704956055 M13,8.363062858581543 C13,8.363062858581543 13,41.62848663330078 13,41.62848663330078 M19,17.673080444335938 C19,17.673080444335938 19,32.31001663208008 19,32.31001663208008 M49,21.31846809387207 C49,21.31846809387207 49,28.673080444335938 49,28.673080444335938 M1,21.31846809387207 C1,21.31846809387207 1.0085872411727905,28.673080444335938 1.0085872411727905,28.673080444335938"></path>
+      </g>
+    </g>
+  </g>
+</svg>
diff --git a/src/assets/images/voice.svg b/src/assets/images/voice.svg
new file mode 100644
index 00000000..e647b0eb
--- /dev/null
+++ b/src/assets/images/voice.svg
@@ -0,0 +1,3 @@
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="#75306c">
+  <path d="M18.25 11C18.6297 11 18.9435 11.2822 18.9932 11.6482L19 11.75V12.25C19 15.8094 16.245 18.7254 12.751 18.9817L12.75 21.25C12.75 21.6642 12.4142 22 12 22C11.6203 22 11.3065 21.7178 11.2568 21.3518L11.25 21.25L11.25 18.9818C7.83323 18.7316 5.12283 15.938 5.00406 12.4863L5 12.25V11.75C5 11.3358 5.33579 11 5.75 11C6.1297 11 6.44349 11.2822 6.49315 11.6482L6.5 11.75V12.25C6.5 15.077 8.73445 17.3821 11.5336 17.4956L11.75 17.5H12.25C15.077 17.5 17.3821 15.2656 17.4956 12.4664L17.5 12.25V11.75C17.5 11.3358 17.8358 11 18.25 11ZM12 2C14.2091 2 16 3.79086 16 6V12C16 14.2091 14.2091 16 12 16C9.79086 16 8 14.2091 8 12V6C8 3.79086 9.79086 2 12 2ZM12 3.5C10.6193 3.5 9.5 4.61929 9.5 6V12C9.5 13.3807 10.6193 14.5 12 14.5C13.3807 14.5 14.5 13.3807 14.5 12V6C14.5 4.61929 13.3807 3.5 12 3.5Z"></path>
+</svg>
diff --git a/src/components/chat-panel.tsx b/src/components/chat-panel.tsx
index d6b3cfd1..e40cacb5 100644
--- a/src/components/chat-panel.tsx
+++ b/src/components/chat-panel.tsx
@@ -3,6 +3,7 @@
 import * as React from 'react'
 import Image from 'next/image'
 import Textarea from 'react-textarea-autosize'
+import { useAtomValue } from 'jotai'
 import { useEnterSubmit } from '@/lib/hooks/use-enter-submit'
 import { cn } from '@/lib/utils'
 
@@ -14,6 +15,8 @@ import PinIcon from '@/assets/images/pin.svg'
 import PinFillIcon from '@/assets/images/pin-fill.svg'
 
 import { useBing } from '@/lib/hooks/use-bing'
+import { voiceListenAtom } from '@/state'
+import Voice from './voice'
 
 export interface ChatPanelProps
   extends Pick<
@@ -42,6 +45,7 @@ export function ChatPanel({
   const [active, setActive] = React.useState(false)
   const [pin, setPin] = React.useState(false)
   const [tid, setTid] = React.useState<any>()
+  const voiceListening = useAtomValue(voiceListenAtom)
 
   const setBlur = React.useCallback(() => {
     clearTimeout(tid)
@@ -110,11 +114,12 @@ export function ChatPanel({
                 rows={1}
                 value={input}
                 onChange={e => setInput(e.target.value.slice(0, 4000))}
-                placeholder="Shift + Enter 换行"
+                placeholder={voiceListening ? '持续对话中...对话完成说“发送”即可' : 'Shift + Enter 换行'}
                 spellCheck={false}
                 className="message-input min-h-[24px] -mx-1 w-full text-base resize-none bg-transparent focus-within:outline-none"
               />
               <Image alt="visual-search" src={VisualSearchIcon} width={20} />
+              <Voice setInput={setInput} sendMessage={sendMessage} />
               <button type="submit">
                 <Image alt="send" src={SendIcon} width={20} style={{ marginTop: '2px' }} />
               </button>
@@ -122,7 +127,6 @@ export function ChatPanel({
             <div className="body-1 bottom-bar">
               <div className="letter-counter"><span>{input.length}</span>/4000</div>
               <button onClick={() => {
-                console.log('onclick')
                 setPin(!pin)
               }} className="pr-2">
                <Image alt="pin" src={pin ? PinFillIcon : PinIcon} width={20} />
diff --git a/src/components/chat.tsx b/src/components/chat.tsx
index 2bd07145..f888a718 100644
--- a/src/components/chat.tsx
+++ b/src/components/chat.tsx
@@ -24,7 +24,7 @@ export type ChatProps = React.ComponentProps<'div'> & { initialMessages?: ChatMe
 export default function Chat({ className }: ChatProps) {
   const [bingStyle, setBingStyle] = useAtom(bingConversationStyleAtom)
 
-  const { messages, sendMessage, resetConversation, stopGenerating, setInput, bot, input, generating } = useBing()
+  const { messages, sendMessage, resetConversation, stopGenerating, setInput, bot,input, generating } = useBing()
 
   useEffect(() => {
     window.scrollTo({
diff --git a/src/components/ui/voice/index.scss b/src/components/ui/voice/index.scss
new file mode 100644
index 00000000..ee0ce8ab
--- /dev/null
+++ b/src/components/ui/voice/index.scss
@@ -0,0 +1,38 @@
+$duration-list: 474 433 407 458 400 427;
+
+.voice-button {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+  > div {
+    background: #52467b;
+    bottom: 1px;
+    height: 3px;
+    width: 1px;
+    margin: 0px 1px;
+    border-radius: 5px;
+    animation: sound 0ms -600ms linear infinite alternate;
+    @for $i from 1 through length($duration-list) {
+      $duration: nth($duration-list, $i);
+      &:nth-child(n + #{$i}) {
+        left: $i * 10px;
+        animation-duration: #{$duration}ms;
+      }
+    }
+  }
+}
+
+
+@keyframes sound {
+  0% {
+     opacity: .35;
+     height: 3px;
+  }
+  100% {
+      opacity: 1;
+      height: 20px;
+  }
+}
+
+
diff --git a/src/components/ui/voice/index.tsx b/src/components/ui/voice/index.tsx
new file mode 100644
index 00000000..4c589594
--- /dev/null
+++ b/src/components/ui/voice/index.tsx
@@ -0,0 +1,9 @@
+import './index.scss'
+
+export default function Voice(props: React.ComponentProps<'div'>) {
+  return (
+    <div className="voice-button" {...props}>
+      {Array.from({ length: 6 }).map(() => <div />)}
+    </div>
+  )
+}
diff --git a/src/components/voice.tsx b/src/components/voice.tsx
new file mode 100644
index 00000000..901d425d
--- /dev/null
+++ b/src/components/voice.tsx
@@ -0,0 +1,52 @@
+import React, { useEffect } from 'react'
+import 'regenerator-runtime/runtime'
+import { useSetAtom } from 'jotai'
+import SpeechRecognition, { useSpeechRecognition } from 'react-speech-recognition'
+import { useBing } from '@/lib/hooks/use-bing'
+import Image from 'next/image'
+import VoiceIcon from '@/assets/images/voice.svg'
+import VoiceButton from './ui/voice'
+import { voiceListenAtom } from '@/state'
+
+const Voice = ({ setInput, sendMessage }: Pick<ReturnType<typeof useBing>, 'setInput' | 'sendMessage'>) => {
+  const {
+    transcript,
+    listening,
+    resetTranscript,
+    browserSupportsSpeechRecognition
+  } = useSpeechRecognition()
+
+  if (!browserSupportsSpeechRecognition) {
+    return null
+  }
+
+  const setListen = useSetAtom(voiceListenAtom)
+
+  useEffect(() => {
+    if (/[ 。](发送|撤回|退出)。?$/.test(transcript)) {
+      const command = RegExp.$1
+      if (command === '退出') {
+        SpeechRecognition.stopListening()
+      } else if (command === '发送') {
+        sendMessage(transcript.slice(0, -3))
+      }
+
+      resetTranscript()
+      return () => {
+        SpeechRecognition.stopListening()
+      }
+    }
+    setInput(transcript)
+  }, [transcript])
+
+  useEffect(() => {
+    setListen(listening)
+  }, [listening])
+
+  return listening ? (
+    <VoiceButton onClick={SpeechRecognition.stopListening} />
+  ) : (
+    <Image alt="start voice" src={VoiceIcon} width={24} className="-mt-0.5" onClick={() => SpeechRecognition.startListening({ continuous: true, language: 'zh-CN' })} />
+  )
+};
+export default Voice;
diff --git a/src/pages/api/create.ts b/src/pages/api/create.ts
index e1ddbd89..e522096e 100644
--- a/src/pages/api/create.ts
+++ b/src/pages/api/create.ts
@@ -12,10 +12,8 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
     const headers = createHeaders(req.cookies)
 
     debug('headers', headers)
-
     const response = await fetch(API_ENDPOINT, { method: 'GET', headers, redirect: 'error', mode: 'cors', credentials: 'include' })
       .then((res) => res.text())
-    const maxAge = 86400 * 30
     res.writeHead(200, {
       'Content-Type': 'application/json',
     })
diff --git a/src/state/index.ts b/src/state/index.ts
index e3fa8671..e092e8c0 100644
--- a/src/state/index.ts
+++ b/src/state/index.ts
@@ -1,6 +1,7 @@
 import { BingWebBot } from '@/lib/bots/bing'
 import { BingConversationStyle, ChatMessageModel, BotId } from '@/lib/bots/bing/types'
 import { nanoid } from '@/lib/utils'
+import { atom } from 'jotai'
 import { atomWithImmer } from 'jotai-immer'
 import { atomWithStorage } from 'jotai/utils'
 import { atomFamily } from 'jotai/utils'
@@ -113,3 +114,5 @@ export const chatFamily = atomFamily(
 export const hashAtom = atomWithHash('dialog', '')
 
 export const locationAtom = atomWithLocation()
+
+export const voiceListenAtom = atom(false)