force prevent auto playing audio/video messages

GooeyAI · Nov 26, 2024 · 6da1961 · 6da1961
1 parent cb827c6
commit 6da1961
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 7 deletions.
diff --git a/src/contexts/MessagesContext.tsx b/src/contexts/MessagesContext.tsx
@@ -332,16 +332,21 @@ const MessagesContextProvider = (props: any) => {
       // Load the latest conversation from DB
       setActiveConversation(conversations[0]);
     else setMessagesLoading(false);
-    setTimeout(() => {
-      setPreventAutoplay(false);
-    }, 3000);
+    avoidAutoplay();
   }, [
     config,
     conversations,
     layoutController?.showNewConversationButton,
     setActiveConversation,
   ]);
 
+  const avoidAutoplay = () => {
+    setPreventAutoplay(true);
+    setTimeout(() => {
+      setPreventAutoplay(false);
+    }, 3000);
+  };
+
   const valueMessages = {
     sendPrompt,
     messages,
@@ -358,6 +363,7 @@ const MessagesContextProvider = (props: any) => {
     currentConversationId: currentConversation.current?.id || null,
     isMessagesLoading,
     preventAutoplay,
+    avoidAutoplay,
   };
 
   return (

diff --git a/src/widgets/copilot/components/Messages/index.tsx b/src/widgets/copilot/components/Messages/index.tsx
@@ -4,7 +4,7 @@ import IncomingMsg from "./IncomingMsg";
 import OutgoingMsg from "./OutgoingMsg";
 import PlaceholderMessage from "./PlaceholderMessage";
 import { useMessagesContext, useSystemContext } from "src/contexts/hooks";
-import { useMemo } from "react";
+import { useEffect, useMemo } from "react";
 import SpinLoader from "src/components/shared/SpinLoader";
 
 const Responses = (props: any) => {
@@ -44,8 +44,19 @@ const Responses = (props: any) => {
 };
 
 const Messages = () => {
-  const { messages, isSending, scrollContainerRef, isMessagesLoading }: any =
-    useMessagesContext();
+  const {
+    messages,
+    isSending,
+    scrollContainerRef,
+    isMessagesLoading,
+    avoidAutoplay,
+  }: any = useMessagesContext();
+
+  useEffect(() => {
+    // avoid autoplay on mount
+    avoidAutoplay();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
 
   if (isMessagesLoading) {
     return (
@@ -61,7 +72,7 @@ const Messages = () => {
       ref={scrollContainerRef}
       className={clsx(
         "flex-1 bg-white gpt-16 gpb-16 gpr-16 gpb-16 d-flex flex-col",
-        isEmpty ? "justify-end" : "justify-start"
+        isEmpty ? "justify-end" : "justify-start",
       )}
       style={{ overflowY: "auto" }}
     >