feat: add PlayIcon and StopPlayIcon to chat component

app/components/chat.tsx

@@ -1227,16 +1227,19 @@ function _Chat() {
         });
       }
       setSpeechStatus(true);
-      ttsPlayer
+      try {
-        .play(audioBuffer, () => {
+        await ttsPlayer.play(audioBuffer, () => {
           setSpeechStatus(false);
-        })
+        });
-        .catch((e) => {
+        const audioFile = new Blob([audioBuffer], { type: "audio/wav" });
+        const url = uploadAudio(audioFile);
+      } catch (e) {
         console.error("[OpenAI Speech]", e);
         showToast(prettyObject(e));
         setSpeechStatus(false);
-        })
+      } finally {
-        .finally(() => setSpeechLoading(false));
+        setSpeechLoading(false);
+      }
     }
   }
 
@@ -1505,6 +1508,53 @@ function _Chat() {
     setAttachImages(images);
   }
 
+  async function uploadAudio(file: Blob) {
+    const audioUrl: string = await uploadImageRemote(file);
+    console.log("audioUrl: ", audioUrl);
+    //const images: string[] = [];
+    //images.push(...attachImages);
+
+    //images.push(
+    //  ...(await new Promise<string[]>((res, rej) => {
+    //    const fileInput = document.createElement("input");
+    //    fileInput.type = "file";
+    //    fileInput.accept =
+    //      "image/png, image/jpeg, image/webp, image/heic, image/heif";
+    //    fileInput.multiple = true;
+    //    fileInput.onchange = (event: any) => {
+    //      setUploading(true);
+    //      const files = event.target.files;
+    //      const imagesData: string[] = [];
+    //      for (let i = 0; i < files.length; i++) {
+    //        const file = event.target.files[i];
+    //        uploadImageRemote(file)
+    //          .then((dataUrl) => {
+    //            imagesData.push(dataUrl);
+    //            if (
+    //              imagesData.length === 3 ||
+    //              imagesData.length === files.length
+    //            ) {
+    //              setUploading(false);
+    //              res(imagesData);
+    //            }
+    //          })
+    //          .catch((e) => {
+    //            setUploading(false);
+    //            rej(e);
+    //          });
+    //      }
+    //    };
+    //    fileInput.click();
+    //  })),
+    //);
+
+    //const imagesLength = images.length;
+    //if (imagesLength > 3) {
+    //  images.splice(3, imagesLength - 3);
+    //}
+    //setAttachImages(images);
+  }
+
   // 快捷键 shortcut keys
   const [showShortcutKeyModal, setShowShortcutKeyModal] = useState(false);
 

app/icons/play.svg

@@ -0,0 +1 @@
+<svg class="svg-icon" style="width: 1em; height: 1em;vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M384 810.666667c-8.533333 0-12.8 0-21.333333-4.266667C349.866667 797.866667 341.333333 785.066667 341.333333 768L341.333333 256c0-17.066667 8.533333-29.866667 21.333333-38.4 12.8-8.533333 29.866667-8.533333 42.666667 0l384 256c12.8 8.533333 17.066667 21.333333 17.066667 34.133333s-8.533333 25.6-17.066667 34.133333l-384 256C401.066667 806.4 392.533333 810.666667 384 810.666667zM426.666667 337.066667l0 354.133333 264.533333-174.933333L426.666667 337.066667z"  /></svg>

app/icons/stop.svg

@@ -0,0 +1 @@
+<svg class="svg-icon" style="width: 1em; height: 1em;vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M256 256l512 0 0 512-512 0 0-512Z"  /></svg>

app/utils.ts

@@ -250,6 +250,19 @@ export function getMessageImages(message: RequestMessage): string[] {
   return urls;
 }
 
+//export function getMessageAudio(message: RequestMessage): string[] {
+//  if (typeof message.content === "string") {
+//    return [];
+//  }
+//  const urls: string[] = [];
+//  for (const c of message.content) {
+//    if (c.type === "image_url") {
+//      urls.push(c.image_url?.url ?? "");
+//    }
+//  }
+//  return urls;
+//}
+
 export function isVisionModel(model: string) {
   // Note: This is a better way using the TypeScript feature instead of `&&` or `||` (ts v5.5.0-dev.20240314 I've been using)