fix(chat): only allow speech recognition if supported (#229)

frontend/app/chat/helpers.ts

@@ -0,0 +1,9 @@
+export function isSpeechRecognitionSupported() {
+  if (
+    typeof window !== undefined &&
+    ("SpeechRecognition" in window || "webkitSpeechRecognition" in window)
+  ) {
+    return true;
+  }
+  return false;
+}

frontend/app/chat/page.tsx

@@ -9,6 +9,7 @@ import Modal from "../components/ui/Modal";
 import PageHeading from "../components/ui/PageHeading";
 import { useSupabase } from "../supabase-provider";
 import ChatMessages from "./ChatMessages";
+import { isSpeechRecognitionSupported } from "./helpers";
 
 export default function ChatPage() {
   const [question, setQuestion] = useState("");
@@ -24,7 +25,7 @@ export default function ChatPage() {
   }
 
   useEffect(() => {
-    if (typeof window !== "undefined") {
+    if (isSpeechRecognitionSupported()) {
       const SpeechRecognition =
         window.SpeechRecognition || window.webkitSpeechRecognition;
 
@@ -128,6 +129,7 @@ export default function ChatPage() {
                 variant={"tertiary"}
                 type="button"
                 onClick={handleListen}
+                disabled={!isSpeechRecognitionSupported()}
               >
                 {isListening ? (
                   <MdMicOff className="text-2xl" />

frontend/app/components/ui/Button.tsx

@@ -10,7 +10,8 @@ const ButtonVariants = cva(
       variant: {
         primary:
           "bg-black border border-black dark:border-white disabled:bg-gray-500 disabled:hover:bg-gray-500 text-white dark:bg-white dark:text-black hover:bg-gray-700 dark:hover:bg-gray-200 transition-colors",
-        tertiary: "text-black dark:text-white bg-transparent py-2 px-4",
+        tertiary:
+          "text-black dark:text-white bg-transparent py-2 px-4 disabled:opacity-25",
         secondary:
           "border border-black dark:border-white bg-white dark:bg-black text-black dark:text-white focus:bg-black dark:focus:bg-white hover:bg-black dark:hover:bg-white hover:text-white dark:hover:text-black focus:text-white dark:focus:text-black transition-colors py-2 px-4 shadow-none",
         danger: