From 31c49ff88864606ef0c32d408f58f7c527aa85b6 Mon Sep 17 00:00:00 2001
From: heimoshuiyu <heimoshuiyu@gmail.com>
Date: Tue, 15 Oct 2024 17:52:32 +0800
Subject: [PATCH] refac: components/WhisperButton.tsx

---
 src/components/WhisperButton.tsx | 132 +++++++++++++++++++++++++++++++
 src/pages/chatbox.tsx            | 128 ++----------------------------
 2 files changed, 140 insertions(+), 120 deletions(-)
 create mode 100644 src/components/WhisperButton.tsx

diff --git a/src/components/WhisperButton.tsx b/src/components/WhisperButton.tsx
new file mode 100644
index 0000000..d1570fb
--- /dev/null
+++ b/src/components/WhisperButton.tsx
@@ -0,0 +1,132 @@
+import { createRef } from "preact";
+
+import { ChatStore } from "@/types/chatstore";
+import { StateUpdater, useEffect, useState, Dispatch } from "preact/hooks";
+
+const WhisperButton = (props: {
+  chatStore: ChatStore;
+  inputMsg: string;
+  setInputMsg: Dispatch<StateUpdater<string>>;
+}) => {
+  const { chatStore, inputMsg, setInputMsg } = props;
+  const mediaRef = createRef();
+  const [isRecording, setIsRecording] = useState("Mic");
+  return (
+    <button
+      className={`btn disabled:line-through disabled:btn-neutral disabled:text-white m-1 p-1 ${
+        isRecording === "Recording" ? "btn-error" : "btn-success"
+      } ${isRecording !== "Mic" ? "animate-pulse" : ""}`}
+      disabled={isRecording === "Transcribing"}
+      ref={mediaRef}
+      onClick={async () => {
+        if (isRecording === "Recording") {
+          // @ts-ignore
+          window.mediaRecorder.stop();
+          setIsRecording("Transcribing");
+          return;
+        }
+
+        // build prompt
+        const prompt = [chatStore.systemMessageContent]
+          .concat(
+            chatStore.history
+              .filter(({ hide }) => !hide)
+              .slice(chatStore.postBeginIndex)
+              .map(({ content }) => {
+                if (typeof content === "string") {
+                  return content;
+                } else {
+                  return content.map((c) => c?.text).join(" ");
+                }
+              }),
+          )
+          .concat([inputMsg])
+          .join(" ");
+        console.log({ prompt });
+
+        setIsRecording("Recording");
+        console.log("start recording");
+
+        try {
+          const mediaRecorder = new MediaRecorder(
+            await navigator.mediaDevices.getUserMedia({
+              audio: true,
+            }),
+            { audioBitsPerSecond: 64 * 1000 },
+          );
+
+          // mount mediaRecorder to ref
+          // @ts-ignore
+          window.mediaRecorder = mediaRecorder;
+
+          mediaRecorder.start();
+          const audioChunks: Blob[] = [];
+          mediaRecorder.addEventListener("dataavailable", (event) => {
+            audioChunks.push(event.data);
+          });
+          mediaRecorder.addEventListener("stop", async () => {
+            // Stop the MediaRecorder
+            mediaRecorder.stop();
+            // Stop the media stream
+            mediaRecorder.stream.getTracks()[0].stop();
+
+            setIsRecording("Transcribing");
+            const audioBlob = new Blob(audioChunks);
+            const audioUrl = URL.createObjectURL(audioBlob);
+            console.log({ audioUrl });
+            const audio = new Audio(audioUrl);
+            // audio.play();
+            const reader = new FileReader();
+            reader.readAsDataURL(audioBlob);
+
+            // file-like object with mimetype
+            const blob = new Blob([audioBlob], {
+              type: "application/octet-stream",
+            });
+
+            reader.onloadend = async () => {
+              try {
+                const base64data = reader.result;
+
+                // post to openai whisper api
+                const formData = new FormData();
+                // append file
+                formData.append("file", blob, "audio.ogg");
+                formData.append("model", "whisper-1");
+                formData.append("response_format", "text");
+                formData.append("prompt", prompt);
+
+                const response = await fetch(chatStore.whisper_api, {
+                  method: "POST",
+                  headers: {
+                    Authorization: `Bearer ${
+                      chatStore.whisper_key || chatStore.apiKey
+                    }`,
+                  },
+                  body: formData,
+                });
+
+                const text = await response.text();
+
+                setInputMsg(inputMsg ? inputMsg + " " + text : text);
+              } catch (error) {
+                alert(error);
+                console.log(error);
+              } finally {
+                setIsRecording("Mic");
+              }
+            };
+          });
+        } catch (error) {
+          alert(error);
+          console.log(error);
+          setIsRecording("Mic");
+        }
+      }}
+    >
+      {isRecording}
+    </button>
+  );
+};
+
+export default WhisperButton;
diff --git a/src/pages/chatbox.tsx b/src/pages/chatbox.tsx
index 9950c57..851c98c 100644
--- a/src/pages/chatbox.tsx
+++ b/src/pages/chatbox.tsx
@@ -37,6 +37,7 @@ import Search from "@/search";
 import Templates from "@/components/Templates";
 import VersionHint from "@/components/VersionHint";
 import StatusBar from "@/components/StatusBar";
+import WhisperButton from "@/components/WhisperButton";
 
 export default function ChatBOX(props: {
   db: Promise<IDBPDatabase<ChatStore>>;
@@ -54,7 +55,6 @@ export default function ChatBOX(props: {
   const [showGenerating, setShowGenerating] = useState(false);
   const [generatingMessage, setGeneratingMessage] = useState("");
   const [showRetry, setShowRetry] = useState(false);
-  const [isRecording, setIsRecording] = useState("Mic");
   const [showAddToolMsg, setShowAddToolMsg] = useState(false);
   const [newToolCallID, setNewToolCallID] = useState("");
   const [newToolContent, setNewToolContent] = useState("");
@@ -64,7 +64,6 @@ export default function ChatBOX(props: {
     default_follow = "true";
   }
   const [follow, _setFollow] = useState(default_follow === "true");
-  const mediaRef = createRef();
 
   const setFollow = (follow: boolean) => {
     console.log("set follow", follow);
@@ -750,124 +749,13 @@ export default function ChatBOX(props: {
         >
           {Tr("Send")}
         </button>
-        {chatStore.whisper_api &&
-          chatStore.whisper_key &&
-          (chatStore.whisper_key || chatStore.apiKey) && (
-            <button
-              className={`btn disabled:line-through disabled:btn-neutral disabled:text-white m-1 p-1 ${
-                isRecording === "Recording" ? "btn-error" : "btn-success"
-              } ${isRecording !== "Mic" ? "animate-pulse" : ""}`}
-              disabled={isRecording === "Transcribing"}
-              ref={mediaRef}
-              onClick={async () => {
-                if (isRecording === "Recording") {
-                  // @ts-ignore
-                  window.mediaRecorder.stop();
-                  setIsRecording("Transcribing");
-                  return;
-                }
-
-                // build prompt
-                const prompt = [chatStore.systemMessageContent]
-                  .concat(
-                    chatStore.history
-                      .filter(({ hide }) => !hide)
-                      .slice(chatStore.postBeginIndex)
-                      .map(({ content }) => {
-                        if (typeof content === "string") {
-                          return content;
-                        } else {
-                          return content.map((c) => c?.text).join(" ");
-                        }
-                      }),
-                  )
-                  .concat([inputMsg])
-                  .join(" ");
-                console.log({ prompt });
-
-                setIsRecording("Recording");
-                console.log("start recording");
-
-                try {
-                  const mediaRecorder = new MediaRecorder(
-                    await navigator.mediaDevices.getUserMedia({
-                      audio: true,
-                    }),
-                    { audioBitsPerSecond: 64 * 1000 },
-                  );
-
-                  // mount mediaRecorder to ref
-                  // @ts-ignore
-                  window.mediaRecorder = mediaRecorder;
-
-                  mediaRecorder.start();
-                  const audioChunks: Blob[] = [];
-                  mediaRecorder.addEventListener("dataavailable", (event) => {
-                    audioChunks.push(event.data);
-                  });
-                  mediaRecorder.addEventListener("stop", async () => {
-                    // Stop the MediaRecorder
-                    mediaRecorder.stop();
-                    // Stop the media stream
-                    mediaRecorder.stream.getTracks()[0].stop();
-
-                    setIsRecording("Transcribing");
-                    const audioBlob = new Blob(audioChunks);
-                    const audioUrl = URL.createObjectURL(audioBlob);
-                    console.log({ audioUrl });
-                    const audio = new Audio(audioUrl);
-                    // audio.play();
-                    const reader = new FileReader();
-                    reader.readAsDataURL(audioBlob);
-
-                    // file-like object with mimetype
-                    const blob = new Blob([audioBlob], {
-                      type: "application/octet-stream",
-                    });
-
-                    reader.onloadend = async () => {
-                      try {
-                        const base64data = reader.result;
-
-                        // post to openai whisper api
-                        const formData = new FormData();
-                        // append file
-                        formData.append("file", blob, "audio.ogg");
-                        formData.append("model", "whisper-1");
-                        formData.append("response_format", "text");
-                        formData.append("prompt", prompt);
-
-                        const response = await fetch(chatStore.whisper_api, {
-                          method: "POST",
-                          headers: {
-                            Authorization: `Bearer ${
-                              chatStore.whisper_key || chatStore.apiKey
-                            }`,
-                          },
-                          body: formData,
-                        });
-
-                        const text = await response.text();
-
-                        setInputMsg(inputMsg ? inputMsg + " " + text : text);
-                      } catch (error) {
-                        alert(error);
-                        console.log(error);
-                      } finally {
-                        setIsRecording("Mic");
-                      }
-                    };
-                  });
-                } catch (error) {
-                  alert(error);
-                  console.log(error);
-                  setIsRecording("Mic");
-                }
-              }}
-            >
-              {isRecording}
-            </button>
-          )}
+        {chatStore.whisper_api && chatStore.whisper_key && (
+          <WhisperButton
+            chatStore={chatStore}
+            inputMsg={inputMsg}
+            setInputMsg={setInputMsg}
+          />
+        )}
         {chatStore.develop_mode && (
           <button
             className="btn disabled:line-through disabled:btn-neutral disabled:text-white m-1 p-1"