feat: stt style optimize

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);

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";
 

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;
   }
 }
 

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)}