feat: tts

app/components/chat.tsx

@@ -10,7 +10,6 @@ import React, {
 } from "react";
 
 import SendWhiteIcon from "../icons/send-white.svg";
-import VoiceWhiteIcon from "../icons/voice-white.svg";
 import BrainIcon from "../icons/brain.svg";
 import RenameIcon from "../icons/rename.svg";
 import ExportIcon from "../icons/share.svg";
@@ -83,7 +82,7 @@ import dynamic from "next/dynamic";
 import { ChatControllerPool } from "../client/controller";
 import { DalleSize, DalleQuality, DalleStyle } from "../typing";
 import { Prompt, usePromptStore } from "../store/prompt";
-import Locale, { getLang, getSTTLang } from "../locales";
+import Locale from "../locales";
 
 import { IconButton } from "./button";
 import styles from "./chat.module.scss";
@@ -100,9 +99,7 @@ import {
 import { useNavigate } from "react-router-dom";
 import {
   CHAT_PAGE_SIZE,
-  DEFAULT_STT_ENGINE,
   DEFAULT_TTS_ENGINE,
-  FIREFOX_DEFAULT_STT_ENGINE,
   ModelProvider,
   LAST_INPUT_KEY,
   Path,
@@ -123,11 +120,6 @@ import { MultimodalContent } from "../client/api";
 const localStorage = safeLocalStorage();
 import { ClientApi } from "../client/api";
 import { createTTSPlayer } from "../utils/audio";
-import {
-  OpenAITranscriptionApi,
-  SpeechApi,
-  WebTranscriptionApi,
-} from "../utils/speech";
 import { MsEdgeTTS, OUTPUT_FORMAT } from "../utils/ms_edge_tts";
 
 const ttsPlayer = createTTSPlayer();
@@ -556,44 +548,6 @@ export function ChatActions(props: {
     }
   }, [chatStore, currentModel, models]);
 
-  const [isListening, setIsListening] = useState(false);
-  const [isTranscription, setIsTranscription] = useState(false);
-  const [speechApi, setSpeechApi] = useState<any>(null);
-
-  useEffect(() => {
-    if (isFirefox()) config.sttConfig.engine = FIREFOX_DEFAULT_STT_ENGINE;
-    setSpeechApi(
-      config.sttConfig.engine === DEFAULT_STT_ENGINE
-        ? new WebTranscriptionApi((transcription) =>
-            onRecognitionEnd(transcription),
-          )
-        : new OpenAITranscriptionApi((transcription) =>
-            onRecognitionEnd(transcription),
-          ),
-    );
-  }, []);
-
-  const startListening = async () => {
-    if (speechApi) {
-      await speechApi.start();
-      setIsListening(true);
-    }
-  };
-  const stopListening = async () => {
-    if (speechApi) {
-      if (config.sttConfig.engine !== DEFAULT_STT_ENGINE)
-        setIsTranscription(true);
-      await speechApi.stop();
-      setIsListening(false);
-    }
-  };
-  const onRecognitionEnd = (finalTranscript: string) => {
-    console.log(finalTranscript);
-    if (finalTranscript) props.setUserInput(finalTranscript);
-    if (config.sttConfig.engine !== DEFAULT_STT_ENGINE)
-      setIsTranscription(false);
-  };
-
   return (
     <div className={styles["chat-input-actions"]}>
       {couldStop && (
@@ -828,16 +782,6 @@ export function ChatActions(props: {
           icon={<ShortcutkeyIcon />}
         />
       )}
-
-      {config.sttConfig.enable && (
-        <ChatAction
-          onClick={async () =>
-            isListening ? await stopListening() : await startListening()
-          }
-          text={isListening ? Locale.Chat.StopSpeak : Locale.Chat.StartSpeak}
-          icon={<VoiceWhiteIcon />}
-        />
-      )}
     </div>
   );
 }

app/components/settings.tsx

@@ -81,7 +81,6 @@ import { nanoid } from "nanoid";
 import { useMaskStore } from "../store/mask";
 import { ProviderType } from "../utils/cloud";
 import { TTSConfigList } from "./tts-config";
-import { STTConfigList } from "./stt-config";
 
 function EditPromptModal(props: { id: string; onClose: () => void }) {
   const promptStore = usePromptStore();
@@ -1659,17 +1658,6 @@ export function Settings() {
           />
         </List>
 
-        <List>
-          <STTConfigList
-            sttConfig={config.sttConfig}
-            updateConfig={(updater) => {
-              const sttConfig = { ...config.sttConfig };
-              updater(sttConfig);
-              config.update((config) => (config.sttConfig = sttConfig));
-            }}
-          />
-        </List>
-
         <DangerItems />
       </div>
     </ErrorBoundary>

app/components/stt-config.tsx

@@ -1,51 +0,0 @@
-import { STTConfig, STTConfigValidator } from "../store";
-
-import Locale from "../locales";
-import { ListItem, Select } from "./ui-lib";
-import { DEFAULT_STT_ENGINES } from "../constant";
-import { isFirefox } from "../utils";
-
-export function STTConfigList(props: {
-  sttConfig: STTConfig;
-  updateConfig: (updater: (config: STTConfig) => void) => void;
-}) {
-  return (
-    <>
-      <ListItem
-        title={Locale.Settings.STT.Enable.Title}
-        subTitle={Locale.Settings.STT.Enable.SubTitle}
-      >
-        <input
-          type="checkbox"
-          checked={props.sttConfig.enable}
-          onChange={(e) =>
-            props.updateConfig(
-              (config) => (config.enable = e.currentTarget.checked),
-            )
-          }
-        ></input>
-      </ListItem>
-      {!isFirefox() && (
-        <ListItem title={Locale.Settings.STT.Engine.Title}>
-          <Select
-            value={props.sttConfig.engine}
-            onChange={(e) => {
-              props.updateConfig(
-                (config) =>
-                  (config.engine = STTConfigValidator.engine(
-                    e.currentTarget.value,
-                  )),
-              );
-            }}
-          >
-            {DEFAULT_STT_ENGINES.map((v, i) => (
-              <option value={v} key={i}>
-                {v}
-              </option>
-            ))}
-          </Select>
-        </ListItem>
-      )}
-    </>
-  );
-}

app/components/stt.module.scss

@@ -1,119 +0,0 @@
-@import "../styles/animation.scss";
-.plugin-page {
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-
-  .plugin-page-body {
-    padding: 20px;
-    overflow-y: auto;
-
-    .plugin-filter {
-      width: 100%;
-      max-width: 100%;
-      margin-bottom: 20px;
-      animation: slide-in ease 0.3s;
-      height: 40px;
-
-      display: flex;
-
-      .search-bar {
-        flex-grow: 1;
-        max-width: 100%;
-        min-width: 0;
-        outline: none;
-      }
-
-      .search-bar:focus {
-        border: 1px solid var(--primary);
-      }
-
-      .plugin-filter-lang {
-        height: 100%;
-        margin-left: 10px;
-      }
-
-      .plugin-create {
-        height: 100%;
-        margin-left: 10px;
-        box-sizing: border-box;
-        min-width: 80px;
-      }
-    }
-
-    .plugin-item {
-      display: flex;
-      justify-content: space-between;
-      padding: 20px;
-      border: var(--border-in-light);
-      animation: slide-in ease 0.3s;
-
-      &:not(:last-child) {
-        border-bottom: 0;
-      }
-
-      &:first-child {
-        border-top-left-radius: 10px;
-        border-top-right-radius: 10px;
-      }
-
-      &:last-child {
-        border-bottom-left-radius: 10px;
-        border-bottom-right-radius: 10px;
-      }
-
-      .plugin-header {
-        display: flex;
-        align-items: center;
-
-        .plugin-icon {
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          margin-right: 10px;
-        }
-
-        .plugin-title {
-          .plugin-name {
-            font-size: 14px;
-            font-weight: bold;
-          }
-          .plugin-info {
-            font-size: 12px;
-          }
-          .plugin-runtime-warning {
-            font-size: 12px;
-            color: #f86c6c;
-          }
-        }
-      }
-
-      .plugin-actions {
-        display: flex;
-        flex-wrap: nowrap;
-        transition: all ease 0.3s;
-        justify-content: center;
-        align-items: center;
-      }
-
-      @media screen and (max-width: 600px) {
-        display: flex;
-        flex-direction: column;
-        padding-bottom: 10px;
-        border-radius: 10px;
-        margin-bottom: 20px;
-        box-shadow: var(--card-shadow);
-
-        &:not(:last-child) {
-          border-bottom: var(--border-in-light);
-        }
-
-        .plugin-actions {
-          width: 100%;
-          justify-content: space-between;
-          padding-top: 10px;
-        }
-      }
-    }
-  }
-}