add speech recognition

module.d.ts

@@ -0,0 +1 @@
+declare module "react-speech-recognition";

package-lock.json

@@ -22,6 +22,7 @@
         "react-dom": "^19.0.0",
         "react-icons": "^5.5.0",
         "react-markdown": "^10.1.0",
+        "react-speech-recognition": "^4.0.0",
         "react-toastify": "^11.0.5",
         "react-use": "^17.6.0",
         "tailwindcss": "^4.0.15"
@@ -31,6 +32,7 @@
         "@types/express": "^5.0.1",
         "@types/react": "^19.0.10",
         "@types/react-dom": "^19.0.4",
+        "@types/react-speech-recognition": "^3.9.6",
         "@vitejs/plugin-react": "^4.3.4",
         "eslint": "^9.21.0",
         "eslint-plugin-react-hooks": "^5.1.0",
@@ -1608,6 +1610,12 @@
         "@types/ms": "*"
       }
     },
+    "node_modules/@types/dom-speech-recognition": {
+      "version": "0.0.6",
+      "resolved": "https://registry.npmjs.org/@types/dom-speech-recognition/-/dom-speech-recognition-0.0.6.tgz",
+      "integrity": "sha512-o7pAVq9UQPJL5RDjO1f/fcpfFHdgiMnR4PoIU2N/ZQrYOS3C5rzdOJMsrpqeBCbii2EE9mERXgqspQqPDdPahw==",
+      "dev": true
+    },
     "node_modules/@types/estree": {
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.6.tgz",
@@ -1730,6 +1738,15 @@
         "@types/react": "^19.0.0"
       }
     },
+    "node_modules/@types/react-speech-recognition": {
+      "version": "3.9.6",
+      "resolved": "https://registry.npmjs.org/@types/react-speech-recognition/-/react-speech-recognition-3.9.6.tgz",
+      "integrity": "sha512-cdzwXIZXWyp8zfM2XI7APDW1rZf4Nz73T4SIS2y+cC7zHnZluCdumYKH6HacxgxJH+zemAq2oXbHWXcyW0eT3A==",
+      "dev": true,
+      "dependencies": {
+        "@types/dom-speech-recognition": "*"
+      }
+    },
     "node_modules/@types/send": {
       "version": "0.17.4",
       "resolved": "https://registry.npmjs.org/@types/send/-/send-0.17.4.tgz",
@@ -5370,6 +5387,14 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-speech-recognition": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/react-speech-recognition/-/react-speech-recognition-4.0.0.tgz",
+      "integrity": "sha512-hz1OsRhjAW70rOMVXN84PR+1L2I1j8xS1TXpwpd4vlDaRY9i/LbAaxEklqscgObECTTuyxNeGBdVdcq/pX3bqQ==",
+      "peerDependencies": {
+        "react": ">=16.8.0"
+      }
+    },
     "node_modules/react-toastify": {
       "version": "11.0.5",
       "resolved": "https://registry.npmjs.org/react-toastify/-/react-toastify-11.0.5.tgz",

package.json

@@ -25,6 +25,7 @@
     "react-dom": "^19.0.0",
     "react-icons": "^5.5.0",
     "react-markdown": "^10.1.0",
+    "react-speech-recognition": "^4.0.0",
     "react-toastify": "^11.0.5",
     "react-use": "^17.6.0",
     "tailwindcss": "^4.0.15"
@@ -34,6 +35,7 @@
     "@types/express": "^5.0.1",
     "@types/react": "^19.0.10",
     "@types/react-dom": "^19.0.4",
+    "@types/react-speech-recognition": "^3.9.6",
     "@vitejs/plugin-react": "^4.3.4",
     "eslint": "^9.21.0",
     "eslint-plugin-react-hooks": "^5.1.0",

src/components/App.tsx

@@ -23,8 +23,6 @@ function App() {
   const [htmlStorage, , removeHtmlStorage] = useLocalStorage("html_content");
   const remix = useSearchParam("remix");
 
-  console.log("REMIX => ", remix);
-
   const preview = useRef<HTMLDivElement>(null);
   const editor = useRef<HTMLDivElement>(null);
   const resizer = useRef<HTMLDivElement>(null);

src/components/ask-ai/ask-ai.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 import { useState } from "react";
 import { RiSparkling2Fill } from "react-icons/ri";
 import { GrSend } from "react-icons/gr";
@@ -10,6 +11,7 @@ import Login from "../login/login";
 import { defaultHTML } from "./../../../utils/consts";
 import SuccessSound from "./../../assets/success.mp3";
 import Settings from "../settings/settings";
+import SpeechPrompt from "../speech-prompt/speech-prompt";
 
 function AskAI({
   html,
@@ -166,6 +168,7 @@ function AskAI({
           }}
         />
         <div className="flex items-center justify-end gap-2">
+          <SpeechPrompt setPrompt={setPrompt} />
           <Settings
             provider={provider as string}
             onChange={setProvider}

src/components/speech-prompt/speech-prompt.tsx

@@ -0,0 +1,46 @@
+import classNames from "classnames";
+import { FaMicrophone } from "react-icons/fa";
+import SpeechRecognition, {
+  useSpeechRecognition,
+} from "react-speech-recognition";
+import { useUpdateEffect } from "react-use";
+
+function SpeechPrompt({
+  setPrompt,
+}: {
+  setPrompt: React.Dispatch<React.SetStateAction<string>>;
+}) {
+  const { transcript, listening, browserSupportsSpeechRecognition } =
+    useSpeechRecognition();
+
+  const startListening = () =>
+    SpeechRecognition.startListening({ continuous: true });
+
+  if (!browserSupportsSpeechRecognition) {
+    return null;
+  }
+
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  useUpdateEffect(() => {
+    if (transcript) setPrompt(transcript);
+  }, [transcript]);
+
+  return (
+    <button
+      className={classNames(
+        "flex cursor-pointer flex-none items-center justify-center rounded-full text-sm font-semibold size-8 text-center bg-gray-800 hover:bg-gray-700 text-white shadow-sm dark:shadow-highlight/20 disabled:bg-gray-300 disabled:text-gray-500 disabled:cursor-not-allowed disabled:hover:bg-gray-300",
+        {
+          "animate-pulse !bg-orange-500": listening,
+        }
+      )}
+      onTouchStart={startListening}
+      onMouseDown={startListening}
+      onTouchEnd={SpeechRecognition.stopListening}
+      onMouseUp={SpeechRecognition.stopListening}
+    >
+      <FaMicrophone className="text-base" />
+    </button>
+  );
+}
+
+export default SpeechPrompt;