From 6e3d47035d0b913cd56a9fe8a502fcfb74d49231 Mon Sep 17 00:00:00 2001
From: Hk-Gosuto <yominogosuto@gmail.com>
Date: Thu, 13 Mar 2025 15:43:04 +0800
Subject: [PATCH] feat: stt style optimize

---
 app/components/button.module.scss |  9 +++++++++
 app/components/button.tsx         |  2 +-
 app/components/chat.module.scss   | 14 +++++++++++++-
 app/components/chat.tsx           | 19 +++++++++++++++++--
 app/icons/voice-close.svg         |  1 +
 app/icons/voice-open.svg          |  1 +
 app/locales/cn.ts                 |  2 ++
 app/locales/en.ts                 |  2 ++
 8 files changed, 46 insertions(+), 4 deletions(-)
 create mode 100644 app/icons/voice-close.svg
 create mode 100644 app/icons/voice-open.svg

diff --git a/app/components/button.module.scss b/app/components/button.module.scss
index 1ce62c627..0d83f0b7e 100644
--- a/app/components/button.module.scss
+++ b/app/components/button.module.scss
@@ -28,6 +28,15 @@
     }
   }
 
+  &.secondary {
+    background-color: var(--second);
+    color: var(--primary);
+
+    path {
+      fill: var(--primary) !important;
+    }
+  }
+
   &.danger {
     color: rgba($color: red, $alpha: 0.8);
     border-color: rgba($color: red, $alpha: 0.5);
diff --git a/app/components/button.tsx b/app/components/button.tsx
index 32d110ece..84fe11578 100644
--- a/app/components/button.tsx
+++ b/app/components/button.tsx
@@ -3,7 +3,7 @@ import * as React from "react";
 import styles from "./button.module.scss";
 import { CSSProperties } from "react";
 
-export type ButtonType = "primary" | "danger" | null;
+export type ButtonType = "primary" | "secondary" | "danger" | null;
 
 import LoadingIcon from "../icons/three-dots-white.svg";
 
diff --git a/app/components/chat.module.scss b/app/components/chat.module.scss
index f272d1d2a..96dac786a 100644
--- a/app/components/chat.module.scss
+++ b/app/components/chat.module.scss
@@ -722,6 +722,15 @@
 .chat-input:focus {
 }
 
+.chat-input-stt {
+  background-color: var(--primary);
+  color: white;
+
+  position: absolute;
+  right: 70px;
+  bottom: 32px;
+}
+
 .chat-input-send {
   background-color: var(--primary);
   color: white;
@@ -736,8 +745,11 @@
     font-size: 16px;
   }
 
-  .chat-input-send {
+  .chat-input-send,
+  .chat-input-stt {
     bottom: 30px;
+    width: 30px;
+    height: 30px;
   }
 }
 
diff --git a/app/components/chat.tsx b/app/components/chat.tsx
index 79502c504..4e1e4a9e3 100644
--- a/app/components/chat.tsx
+++ b/app/components/chat.tsx
@@ -10,7 +10,8 @@ import React, {
 } from "react";
 
 import SendWhiteIcon from "../icons/send-white.svg";
-import VoiceWhiteIcon from "../icons/voice-white.svg";
+import VoiceOpenIcon from "../icons/voice-open.svg";
+import VoiceCloseIcon from "../icons/voice-close.svg";
 import BrainIcon from "../icons/brain.svg";
 import RenameIcon from "../icons/rename.svg";
 import ExportIcon from "../icons/share.svg";
@@ -1210,6 +1211,7 @@ function _Chat() {
 
   const startListening = async () => {
     if (speechApi) {
+      showToast(Locale.Settings.STT.StartListening);
       await speechApi.start();
       setIsListening(true);
     }
@@ -1219,6 +1221,7 @@ function _Chat() {
     if (speechApi) {
       if (config.sttConfig.engine !== DEFAULT_STT_ENGINE)
         setIsTranscription(true);
+      showToast(Locale.Settings.STT.StopListening);
       await speechApi.stop();
       setIsListening(false);
     }
@@ -2328,9 +2331,21 @@ function _Chat() {
                     })}
                   </div>
                 )}
+                {config.sttConfig.enable && (
+                  <IconButton
+                    icon={isListening ? <VoiceCloseIcon /> : <VoiceOpenIcon />}
+                    className={styles["chat-input-stt"]}
+                    type="secondary"
+                    onClick={async () =>
+                      isListening
+                        ? await stopListening()
+                        : await startListening()
+                    }
+                    loding={isTranscription}
+                  />
+                )}
                 <IconButton
                   icon={<SendWhiteIcon />}
-                  text={Locale.Chat.Send}
                   className={styles["chat-input-send"]}
                   type="primary"
                   onClick={() => doSubmit(userInput)}
diff --git a/app/icons/voice-close.svg b/app/icons/voice-close.svg
new file mode 100644
index 000000000..bcfeca3b9
--- /dev/null
+++ b/app/icons/voice-close.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path d="m3 3 18 18M9 5a3 3 0 0 1 6 0v5a3 3 0 0 1-.13.874m-2 2A3 3 0 0 1 9 10.002v-1"></path><path d="M5 10a7 7 0 0 0 10.846 5.85m2-2A6.97 6.97 0 0 0 18.998 10M8 21h8m-4-4v4"></path></g></svg>
\ No newline at end of file
diff --git a/app/icons/voice-open.svg b/app/icons/voice-open.svg
new file mode 100644
index 000000000..8fb7c8dc1
--- /dev/null
+++ b/app/icons/voice-open.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><path fill="currentColor" d="M19 9a1 1 0 0 1 1 1 8 8 0 0 1-6.999 7.938L13 20h3a1 1 0 0 1 0 2H8a1 1 0 0 1 0-2h3v-2.062A8 8 0 0 1 4 10a1 1 0 1 1 2 0 6 6 0 0 0 12 0 1 1 0 0 1 1-1m-7-8a4 4 0 0 1 4 4v5a4 4 0 1 1-8 0V5a4 4 0 0 1 4-4"></path></svg>
\ No newline at end of file
diff --git a/app/locales/cn.ts b/app/locales/cn.ts
index 0777d8d31..19f39585d 100644
--- a/app/locales/cn.ts
+++ b/app/locales/cn.ts
@@ -598,6 +598,8 @@ const cn = {
       },
     },
     STT: {
+      StartListening: "开始听写",
+      StopListening: "结束听写",
       Enable: {
         Title: "启用语音转文本",
         SubTitle: "启用语音转文本",
diff --git a/app/locales/en.ts b/app/locales/en.ts
index ece4dc2de..0769486ab 100644
--- a/app/locales/en.ts
+++ b/app/locales/en.ts
@@ -606,6 +606,8 @@ const en: LocaleType = {
       Engine: "TTS Engine",
     },
     STT: {
+      StartListening: "Start Listening",
+      StopListening: "Stop Listening",
       Enable: {
         Title: "Enable STT",
         SubTitle: "Enable Speech-to-Text",