From 2f531075814b044d4dbd3d45bd964b4a8e389a23 Mon Sep 17 00:00:00 2001
From: Fred <fred@nextchat.dev>
Date: Mon, 4 Mar 2024 20:04:19 +0800
Subject: [PATCH] feat: init voice support

---
 app/components/chat.tsx | 35 +++++++++++++++++++++++++++++++++++
 1 file changed, 35 insertions(+)

diff --git a/app/components/chat.tsx b/app/components/chat.tsx
index 9144f9a5f..f67c838c3 100644
--- a/app/components/chat.tsx
+++ b/app/components/chat.tsx
@@ -422,6 +422,7 @@ export function ChatActions(props: {
   showPromptModal: () => void;
   scrollToBottom: () => void;
   showPromptHints: () => void;
+  setUserInput: (text: string) => void;
   hitBottom: boolean;
   uploading: boolean;
 }) {
@@ -453,6 +454,15 @@ export function ChatActions(props: {
   const [showModelSelector, setShowModelSelector] = useState(false);
   const [showUploadImage, setShowUploadImage] = useState(false);
 
+  const [speechRecognition, setSpeechRecognition] = useState(null);
+  const [isRecording, setIsRecording] = useState(false);
+  useEffect(() => {
+    if ("SpeechRecognition" in window) {
+      setSpeechRecognition(new window.SpeechRecognition());
+    } else if ("webkitSpeechRecognition" in window) {
+      setSpeechRecognition(new window.webkitSpeechRecognition());
+    }
+  }, []);
   useEffect(() => {
     const show = isVisionModel(currentModel);
     setShowUploadImage(show);
@@ -475,6 +485,30 @@ export function ChatActions(props: {
 
   return (
     <div className={styles["chat-input-actions"]}>
+      {speechRecognition && (
+        <ChatAction
+          onClick={() => {
+            if (!isRecording) {
+              speechRecognition.continuous = true; // 连续识别
+              speechRecognition.lang = "zh-CN"; // 设置识别的语言为中文
+              speechRecognition.interimResults = true; // 返回临时结果
+              speechRecognition.start();
+              speechRecognition.onresult = function (event) {
+                console.log(event);
+                var transcript = event.results[0][0].transcript; // 获取识别结果
+                console.log(transcript);
+                props.setUserInput(transcript);
+              };
+              setIsRecording(true);
+            } else {
+              speechRecognition.stop();
+              setIsRecording(false);
+            }
+          }}
+          text="Speech"
+          icon={<BrainIcon />}
+        ></ChatAction>
+      )}
       {couldStop && (
         <ChatAction
           onClick={stopAll}
@@ -1419,6 +1453,7 @@ function _Chat() {
           scrollToBottom={scrollToBottom}
           hitBottom={hitBottom}
           uploading={uploading}
+          setUserInput={setUserInput}
           showPromptHints={() => {
             // Click again to close
             if (promptHints.length > 0) {