Merge remote-tracking branch 'github/master'

src/settings.tsx

@@ -266,8 +266,6 @@ export default (props: {
   const [totalCost, setTotalCost] = useState(getTotalCost());
   // @ts-ignore
   const { langCode, setLangCode } = useContext(langCodeContext);
-  // type is MediaDeviceInfo
-  const [devices, setDevices] = useState([] as MediaDeviceInfo[]);
 
   useEffect(() => {
     const handleKeyPress = (event: any) => {

src/tts.tsx

@@ -1,3 +1,4 @@
+import { useState } from "preact/hooks";
 import { ChatStore, addTotalCost } from "./app";
 
 interface TTSProps {
@@ -6,6 +7,7 @@ interface TTSProps {
   text: string;
 }
 export default function TTSButton(props: TTSProps) {
+  const [generating, setGenerating] = useState(false);
   return (
     <button
       onClick={() => {
@@ -13,7 +15,7 @@ export default function TTSButton(props: TTSProps) {
         const api_key = props.chatStore.tts_key;
         const model = "tts-1";
         const input = props.text;
-        const voice = "alloy";
+        const voice = props.chatStore.tts_voice;
 
         const body: Record<string, any> = {
           model,
@@ -25,6 +27,8 @@ export default function TTSButton(props: TTSProps) {
           body["speed"] = props.chatStore.tts_speed;
         }
 
+        setGenerating(true);
+
         fetch(api, {
           method: "POST",
           headers: {
@@ -44,10 +48,13 @@ export default function TTSButton(props: TTSProps) {
             const url = URL.createObjectURL(blob);
             const audio = new Audio(url);
             audio.play();
+          })
+          .finally(() => {
+            setGenerating(false);
           });
       }}
     >
-      🔈
+      {generating ? "🤔" : "🔈"}
     </button>
   );
 }