Adds support for disabling TTS Autoplay (#169)

* Adds support for disabling TTS Autoplay

* Add `use client` for chatblock

* force run iOS check on client

* i hope this works; thank you nextjs

src/components/chatblock.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import React, { useEffect, useState } from "react";
 import { ChatFeedback, ChatMessage, ChatMessageType } from "@/types/chat";
 import { ReactMarkdown } from "react-markdown/lib/react-markdown";
@@ -13,6 +15,7 @@ import { useMutation, useQueryClient } from "@tanstack/react-query";
 import { API } from "@/utils/api";
 import { useParams } from "next/navigation";
 import { DocumentType } from "@/types/project";
+import useIsIOS from "@/utils/hooks/useIsIOS";
 
 type AudioStatus = "unloaded" | "loading" | "playing" | "paused" | "stopped";
 
@@ -32,6 +35,11 @@ export default function ChatBlock(props: {
   const [audio, setAudio] = useState<HTMLAudioElement | null>(null);
   const [audioStatus, setAudioStatus] = useState<AudioStatus>("unloaded");
   const [percentagePlayed, setPercentagePlayed] = useState(0);
+  const isIOS = useIsIOS();
+
+  const shouldAutoplay = isIOS
+    ? false
+    : autoplay && (storage.tts_autoplay ?? true);
 
   const isCompleteLetter = (str: string) => {
     const regex = /^\p{L}$/u;
@@ -117,8 +125,8 @@ export default function ChatBlock(props: {
   };
 
   useEffect(() => {
-    if (autoplay) togglePlay();
-  }, []);
+    if (shouldAutoplay) togglePlay();
+  }, [shouldAutoplay]);
 
   return (
     <div

src/components/sidebar/chatSidebar.tsx

@@ -14,8 +14,10 @@ import Slider from "../ui/slider";
 import InfiniteScroll from "react-infinite-scroller";
 import { useInfiQuery } from "@/utils/hooks/useInfiQuery";
 import { useDebounce } from "@/utils/hooks/useDebounce";
+import useIsIOS from "@/utils/hooks/useIsIOS";
 
 export default function ChatSideBar(props: { project_id?: string }) {
+  const isIOS = useIsIOS();
   const { project_id } = props;
   const [searchQuery, setSearchQuery] = useState("");
   const debouncedSearchQuery = useDebounce(searchQuery, 1000);
@@ -291,6 +293,19 @@ export default function ChatSideBar(props: { project_id?: string }) {
             }
           />
           <br />
+          <CheckBox
+            disabled={isIOS}
+            label="Autoplay responses text to speech"
+            type="checkbox"
+            checked={isIOS ? false : storage?.tts_autoplay}
+            onChange={(e) =>
+              setStorage({
+                ...storage,
+                tts_autoplay: e.target.checked,
+              })
+            }
+          />
+          <br />
           <CheckBox
             label="Show Original English Responses"
             type="checkbox"

src/types/storage.ts

@@ -11,4 +11,5 @@ export type Storage = {
   temperature?: number;
   top_k?: number;
   chatbot_token?: string;
+  tts_autoplay?: boolean;
 };

src/utils/hooks/useIsIOS.tsx

@@ -0,0 +1,11 @@
+import { useEffect, useState } from "react";
+
+export default function useIsIOS() {
+  const [isIOS, setIsIOS] = useState<boolean>();
+
+  useEffect(() => {
+    setIsIOS(/iPad|iPhone|iPod/.test(navigator.userAgent));
+  }, []);
+
+  return isIOS;
+}