From e2b15f785a1ea542c444c8f67c3497fba3cd3a9a Mon Sep 17 00:00:00 2001
From: Fred <fred@nextchat.dev>
Date: Mon, 18 Mar 2024 17:52:34 +0800
Subject: [PATCH] feat: update voice input button

---
 app/components/chat.tsx                |  5 +-
 app/components/chat/speechRecorder.tsx | 64 ++++++++++++++++----------
 app/icons/voice.svg                    | 11 +++++
 app/locales/index.ts                   | 29 ++++++++++++
 4 files changed, 83 insertions(+), 26 deletions(-)
 create mode 100644 app/icons/voice.svg

diff --git a/app/components/chat.tsx b/app/components/chat.tsx
index 7ec5f5dec..368144603 100644
--- a/app/components/chat.tsx
+++ b/app/components/chat.tsx
@@ -1477,8 +1477,11 @@ function _Chat() {
               })}
             </div>
           )}
-          <div className="flex gap-2 absolute right-[30px] bottom-[32px]">
+          <div className="flex gap-2 absolute left-[30px] bottom-[32px]">
             <SpeechRecorder textUpdater={setUserInput}></SpeechRecorder>
+          </div>
+
+          <div className="flex gap-2 absolute right-[30px] bottom-[32px]">
             <IconButton
               icon={<SendWhiteIcon />}
               text={Locale.Chat.Send}
diff --git a/app/components/chat/speechRecorder.tsx b/app/components/chat/speechRecorder.tsx
index 9cc810bfd..33801b323 100644
--- a/app/components/chat/speechRecorder.tsx
+++ b/app/components/chat/speechRecorder.tsx
@@ -1,5 +1,6 @@
 import React, { useState, useEffect } from "react";
-
+import VoiceIcon from "@/app/icons/voice.svg";
+import { getLang, formatLang } from "@/app/locales";
 type SpeechRecognitionType =
   | typeof window.SpeechRecognition
   | typeof window.webkitSpeechRecognition;
@@ -22,29 +23,42 @@ export default function SpeechRecorder({
     }
   }, []);
   return (
-    <div>
-      <button
-        onClick={() => {
-          if (!isRecording && speechRecognition) {
-            speechRecognition.continuous = true; // 连续识别
-            speechRecognition.lang = "zh-CN"; // 设置识别的语言为中文
-            speechRecognition.interimResults = true; // 返回临时结果
-            speechRecognition.start();
-            speechRecognition.onresult = function (event: any) {
-              console.log(event);
-              var transcript = event.results[0][0].transcript; // 获取识别结果
-              console.log(transcript);
-              textUpdater(transcript);
-            };
-            setIsRecording(true);
-          } else {
-            speechRecognition.stop();
-            setIsRecording(false);
-          }
-        }}
-      >
-        {isRecording ? "输入中" : "点击说话"}
-      </button>
-    </div>
+    <>
+      {speechRecognition && (
+        <div>
+          <button
+            onClick={() => {
+              if (!isRecording && speechRecognition) {
+                speechRecognition.continuous = true;
+                speechRecognition.lang = formatLang(getLang());
+                console.log(speechRecognition.lang);
+                speechRecognition.interimResults = true;
+                speechRecognition.start();
+                speechRecognition.onresult = function (event: any) {
+                  console.log(event);
+                  var transcript = event.results[0][0].transcript;
+                  console.log(transcript);
+                  textUpdater(transcript);
+                };
+                setIsRecording(true);
+              } else {
+                speechRecognition.stop();
+                setIsRecording(false);
+              }
+            }}
+          >
+            {isRecording ? (
+              <button className="p-2 rounded-full bg-blue-500 hover:bg-blue-600 ring-4 ring-blue-200 transition animate-pulse">
+                <VoiceIcon fill={"white"} />
+              </button>
+            ) : (
+              <button className="p-2 rounded-full bg-zinc-100 hover:bg-zinc-200 transition">
+                <VoiceIcon fill={"#8282A5"} />
+              </button>
+            )}
+          </button>
+        </div>
+      )}
+    </>
   );
 }
diff --git a/app/icons/voice.svg b/app/icons/voice.svg
new file mode 100644
index 000000000..eafcdd907
--- /dev/null
+++ b/app/icons/voice.svg
@@ -0,0 +1,11 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path fill-rule="evenodd" clip-rule="evenodd"
+        d="M5.9375 5.3125C5.9375 3.06884 7.75634 1.25 10 1.25C12.2437 1.25 14.0625 3.06884 14.0625 5.3125V8.75C14.0625 10.9937 12.2437 12.8125 10 12.8125C7.75634 12.8125 5.9375 10.9937 5.9375 8.75V5.3125Z"
+        fill="auto" />
+    <path fill-rule="evenodd" clip-rule="evenodd"
+        d="M3.35938 7.8125C3.79085 7.8125 4.14062 8.16228 4.14062 8.59375V8.75C4.14062 11.986 6.76396 14.6094 10 14.6094C13.236 14.6094 15.8594 11.986 15.8594 8.75V8.59375C15.8594 8.16228 16.2092 7.8125 16.6406 7.8125C17.0721 7.8125 17.4219 8.16228 17.4219 8.59375V8.75C17.4219 12.849 14.099 16.1719 10 16.1719C5.90101 16.1719 2.57812 12.849 2.57812 8.75V8.59375C2.57812 8.16228 2.9279 7.8125 3.35938 7.8125Z"
+        fill="auto" />
+    <path
+        d="M9.21875 15.4688C9.21875 15.0373 9.56853 14.6875 10 14.6875C10.4315 14.6875 10.7812 15.0373 10.7812 15.4688V17.9688C10.7812 18.4002 10.4315 18.75 10 18.75C9.56853 18.75 9.21875 18.4002 9.21875 17.9688V15.4688Z"
+        fill="auto" />
+</svg>
\ No newline at end of file
diff --git a/app/locales/index.ts b/app/locales/index.ts
index 6e8088a98..336c8e66f 100644
--- a/app/locales/index.ts
+++ b/app/locales/index.ts
@@ -70,6 +70,28 @@ export const ALL_LANG_OPTIONS: Record<Lang, string> = {
   sk: "Slovensky",
 };
 
+const LANG_CODE_MAPPING = {
+  cn: "zh-CN",
+  en: "en-US",
+  tw: "zh-TW",
+  pt: "pt-BR",
+  jp: "ja-JP",
+  ko: "ko-KR",
+  id: "id-ID",
+  fr: "fr-FR",
+  es: "es-ES",
+  it: "it-IT",
+  tr: "tr-TR",
+  de: "de-DE",
+  vi: "vi-VN",
+  ru: "ru-RU",
+  cs: "cs-CZ",
+  no: "nb-NO",
+  ar: "ar-SA",
+  bn: "bn-BD",
+  sk: "sk-SK",
+};
+
 const LANG_KEY = "lang";
 const DEFAULT_LANG = "en";
 
@@ -81,6 +103,13 @@ merge(fallbackLang, targetLang);
 
 export default fallbackLang as LocaleType;
 
+export const formatLang = (languageCode: string) => {
+  return (
+    LANG_CODE_MAPPING[languageCode as keyof typeof LANG_CODE_MAPPING] ||
+    languageCode
+  );
+};
+
 function getItem(key: string) {
   try {
     return localStorage.getItem(key);