From bcd50b89c860b33bb464a5e35e92ac43ad153721 Mon Sep 17 00:00:00 2001
From: dakai <oudakai@gmail.com>
Date: Mon, 14 Oct 2024 03:25:44 +0800
Subject: [PATCH 1/4] feat: add voice audio preview button in tts-config option

---
 app/components/tts-config.tsx | 96 ++++++++++++++++++++++++++++-------
 1 file changed, 79 insertions(+), 17 deletions(-)

diff --git a/app/components/tts-config.tsx b/app/components/tts-config.tsx
index 39ae85730c2..30c1424d698 100644
--- a/app/components/tts-config.tsx
+++ b/app/components/tts-config.tsx
@@ -1,19 +1,60 @@
 import { TTSConfig, TTSConfigValidator } from "../store";
+import React, { useState } from "react";
 
 import Locale from "../locales";
 import { ListItem, Select } from "./ui-lib";
 import {
+  ModelProvider,
   DEFAULT_TTS_ENGINE,
   DEFAULT_TTS_ENGINES,
   DEFAULT_TTS_MODELS,
   DEFAULT_TTS_VOICES,
 } from "../constant";
 import { InputRange } from "./input-range";
+import { IconButton } from "./button";
+import SpeakIcon from "../icons/speak.svg";
+import SpeakStopIcon from "../icons/speak-stop.svg";
+import { createTTSPlayer } from "../utils/audio";
+import { useAppConfig } from "../store";
+import { ClientApi } from "../client/api";
 
+const ttsPlayer = createTTSPlayer();
 export function TTSConfigList(props: {
   ttsConfig: TTSConfig;
   updateConfig: (updater: (config: TTSConfig) => void) => void;
 }) {
+  const [speechLoading, setSpeechLoading] = useState(false);
+  const [speechStatus, setSpeechStatus] = useState(false);
+
+  async function openaiSpeech(text: string) {
+    if (speechStatus) {
+      ttsPlayer.stop();
+      setSpeechStatus(false);
+    } else {
+      var api: ClientApi;
+      api = new ClientApi(ModelProvider.GPT);
+      const config = useAppConfig.getState();
+      setSpeechLoading(true);
+      ttsPlayer.init();
+      let audioBuffer: ArrayBuffer;
+      audioBuffer = await api.llm.speech({
+        model: config.ttsConfig.model,
+        input: text,
+        voice: config.ttsConfig.voice,
+        speed: config.ttsConfig.speed,
+      });
+      setSpeechStatus(true);
+      ttsPlayer
+        .play(audioBuffer, () => {
+          setSpeechStatus(false);
+        })
+        .catch((e) => {
+          console.error("[OpenAI Speech]", e);
+          setSpeechStatus(false);
+        })
+        .finally(() => setSpeechLoading(false));
+    }
+  }
   return (
     <>
       <ListItem
@@ -88,23 +129,44 @@ export function TTSConfigList(props: {
             title={Locale.Settings.TTS.Voice.Title}
             subTitle={Locale.Settings.TTS.Voice.SubTitle}
           >
-            <Select
-              value={props.ttsConfig.voice}
-              onChange={(e) => {
-                props.updateConfig(
-                  (config) =>
-                    (config.voice = TTSConfigValidator.voice(
-                      e.currentTarget.value,
-                    )),
-                );
-              }}
-            >
-              {DEFAULT_TTS_VOICES.map((v, i) => (
-                <option value={v} key={i}>
-                  {v}
-                </option>
-              ))}
-            </Select>
+            <div style={{ display: "flex", gap: "10px" }}>
+              <IconButton
+                aria={Locale.Chat.Actions.Speech}
+                icon={speechStatus ? <SpeakStopIcon /> : <SpeakIcon />}
+                text={
+                  speechLoading
+                    ? "Loading..."
+                    : speechStatus
+                    ? Locale.Chat.Actions.Stop
+                    : Locale.Chat.Actions.Speech
+                }
+                onClick={() => {
+                  speechStatus
+                    ? (ttsPlayer.stop(), setSpeechStatus(false))
+                    : openaiSpeech(
+                        "NextChat,Unleash your imagination, experience the future of AI conversation.",
+                      );
+                }}
+              />
+
+              <Select
+                value={props.ttsConfig.voice}
+                onChange={(e) => {
+                  props.updateConfig(
+                    (config) =>
+                      (config.voice = TTSConfigValidator.voice(
+                        e.currentTarget.value,
+                      )),
+                  );
+                }}
+              >
+                {DEFAULT_TTS_VOICES.map((v, i) => (
+                  <option value={v} key={i}>
+                    {v}
+                  </option>
+                ))}
+              </Select>
+            </div>
           </ListItem>
           <ListItem
             title={Locale.Settings.TTS.Speed.Title}

From 67192a794604ed98241f319f4ed4a1608758f0e3 Mon Sep 17 00:00:00 2001
From: dakai <oudakai@gmail.com>
Date: Mon, 14 Oct 2024 03:46:51 +0800
Subject: [PATCH 2/4] follow the rabbit to fix potential issues

---
 app/components/tts-config.tsx | 27 ++++++++++++++-------------
 1 file changed, 14 insertions(+), 13 deletions(-)

diff --git a/app/components/tts-config.tsx b/app/components/tts-config.tsx
index 30c1424d698..091f554452b 100644
--- a/app/components/tts-config.tsx
+++ b/app/components/tts-config.tsx
@@ -31,8 +31,7 @@ export function TTSConfigList(props: {
       ttsPlayer.stop();
       setSpeechStatus(false);
     } else {
-      var api: ClientApi;
-      api = new ClientApi(ModelProvider.GPT);
+      const api = new ClientApi(ModelProvider.GPT);
       const config = useAppConfig.getState();
       setSpeechLoading(true);
       ttsPlayer.init();
@@ -141,23 +140,25 @@ export function TTSConfigList(props: {
                     : Locale.Chat.Actions.Speech
                 }
                 onClick={() => {
-                  speechStatus
-                    ? (ttsPlayer.stop(), setSpeechStatus(false))
-                    : openaiSpeech(
-                        "NextChat,Unleash your imagination, experience the future of AI conversation.",
-                      );
+                  if (speechStatus) {
+                    ttsPlayer.stop();
+                    setSpeechStatus(false);
+                  } else {
+                    openaiSpeech(
+                      "NextChat,Unleash your imagination, experience the future of AI conversation.",
+                    );
+                  }
                 }}
               />
 
               <Select
                 value={props.ttsConfig.voice}
                 onChange={(e) => {
-                  props.updateConfig(
-                    (config) =>
-                      (config.voice = TTSConfigValidator.voice(
-                        e.currentTarget.value,
-                      )),
-                  );
+                  props.updateConfig((config) => {
+                    config.voice = TTSConfigValidator.voice(
+                      e.currentTarget.value,
+                    );
+                  });
                 }}
               >
                 {DEFAULT_TTS_VOICES.map((v, i) => (

From ab4bf3ba67f0d3354cbaa3e9d066257235b8ee8e Mon Sep 17 00:00:00 2001
From: dakai <oudakai@gmail.com>
Date: Wed, 16 Oct 2024 11:34:20 +0800
Subject: [PATCH 3/4] remove redundancy code

---
 app/components/tts-config.tsx | 11 +++--------
 1 file changed, 3 insertions(+), 8 deletions(-)

diff --git a/app/components/tts-config.tsx b/app/components/tts-config.tsx
index 091f554452b..0ca82567e18 100644
--- a/app/components/tts-config.tsx
+++ b/app/components/tts-config.tsx
@@ -140,14 +140,9 @@ export function TTSConfigList(props: {
                     : Locale.Chat.Actions.Speech
                 }
                 onClick={() => {
-                  if (speechStatus) {
-                    ttsPlayer.stop();
-                    setSpeechStatus(false);
-                  } else {
-                    openaiSpeech(
-                      "NextChat,Unleash your imagination, experience the future of AI conversation.",
-                    );
-                  }
+                  openaiSpeech(
+                    "NextChat,Unleash your imagination, experience the future of AI conversation.",
+                  );
                 }}
               />
 

From c3b50a9c93edc34c550ed853126607019e57820b Mon Sep 17 00:00:00 2001
From: dakai <oudakai@gmail.com>
Date: Sun, 27 Oct 2024 12:42:16 +0800
Subject: [PATCH 4/4] refactor: optimize playSpeech function in TTSConfigList
 component

---
 app/components/tts-config.tsx | 57 +++++++++++++++++++++++------------
 1 file changed, 37 insertions(+), 20 deletions(-)

diff --git a/app/components/tts-config.tsx b/app/components/tts-config.tsx
index 0ca82567e18..e236064acb4 100644
--- a/app/components/tts-config.tsx
+++ b/app/components/tts-config.tsx
@@ -17,6 +17,7 @@ import SpeakStopIcon from "../icons/speak-stop.svg";
 import { createTTSPlayer } from "../utils/audio";
 import { useAppConfig } from "../store";
 import { ClientApi } from "../client/api";
+import { showToast } from "../components/ui-lib";
 
 const ttsPlayer = createTTSPlayer();
 export function TTSConfigList(props: {
@@ -26,34 +27,50 @@ export function TTSConfigList(props: {
   const [speechLoading, setSpeechLoading] = useState(false);
   const [speechStatus, setSpeechStatus] = useState(false);
 
-  async function openaiSpeech(text: string) {
-    if (speechStatus) {
-      ttsPlayer.stop();
-      setSpeechStatus(false);
-    } else {
+  const config = useAppConfig.getState();
+
+  function stopSpeech() {
+    ttsPlayer.stop();
+    setSpeechStatus(false);
+  }
+
+  async function playSpeech(text: string, ttsConfig: TTSConfig) {
+    try {
       const api = new ClientApi(ModelProvider.GPT);
-      const config = useAppConfig.getState();
       setSpeechLoading(true);
       ttsPlayer.init();
-      let audioBuffer: ArrayBuffer;
-      audioBuffer = await api.llm.speech({
-        model: config.ttsConfig.model,
+
+      const audioBuffer = await api.llm.speech({
+        model: ttsConfig.model,
         input: text,
-        voice: config.ttsConfig.voice,
-        speed: config.ttsConfig.speed,
+        voice: ttsConfig.voice,
+        speed: ttsConfig.speed,
       });
+
       setSpeechStatus(true);
-      ttsPlayer
-        .play(audioBuffer, () => {
-          setSpeechStatus(false);
-        })
-        .catch((e) => {
-          console.error("[OpenAI Speech]", e);
-          setSpeechStatus(false);
-        })
-        .finally(() => setSpeechLoading(false));
+      await ttsPlayer.play(audioBuffer, () => {
+        setSpeechStatus(false);
+      });
+    } catch (error) {
+      console.error("[OpenAI Speech]", error);
+      setSpeechStatus(false);
+      // Implement user-facing error notification here
+      if (typeof (error as Error).message === "string") {
+        showToast((error as Error).message);
+      }
+    } finally {
+      setSpeechLoading(false);
     }
   }
+
+  async function openaiSpeech(text: string) {
+    if (speechStatus) {
+      stopSpeech();
+    } else {
+      await playSpeech(text, config.ttsConfig);
+    }
+  }
+
   return (
     <>
       <ListItem