fix auto-playing audio messages on load

GooeyAI · Aug 29, 2024 · faba527 · faba527
1 parent ecd6f7f
commit faba527
Show file tree

Hide file tree

Showing 6 changed files with 63 additions and 31 deletions.
diff --git a/src/components/shared/Layout/SideNavbar.tsx b/src/components/shared/Layout/SideNavbar.tsx
@@ -61,7 +61,8 @@ const SideNavbar = () => {
       if (lastMessageTimestamp >= today && lastMessageTimestamp <= endToday) {
         subheading = "Today";
       } else if (
-        lastMessageTimestamp >= yesterday && lastMessageTimestamp <= endYesterday
+        lastMessageTimestamp >= yesterday &&
+        lastMessageTimestamp <= endYesterday
       ) {
         subheading = "Yesterday";
       } else if (
@@ -111,7 +112,7 @@ const SideNavbar = () => {
     ].filter((group) => group?.conversations?.length > 0);
   }, [conversations]);
 
-  if (config?.disableConversations) return null;
+  if (!layoutController?.showNewConversationButton) return null;
   return (
     <nav
       id="gooey-side-navbar"

diff --git a/src/contexts/ConversationLayer.tsx b/src/contexts/ConversationLayer.tsx
@@ -2,6 +2,7 @@ import { useState, useEffect } from "react";
 
 export interface Conversation {
   id?: string;
+  bot_id?: string;
   title?: string;
   timestamp?: string;
   user_id?: string;
@@ -58,14 +59,21 @@ const fetchConversation = (db: IDBDatabase, conversationId: string) => {
   });
 };
 
-const fetchAllConversations = (db: IDBDatabase, user_id: string) => {
+const fetchAllConversations = (
+  db: IDBDatabase,
+  user_id: string,
+  bot_id: string
+) => {
   return new Promise<Conversation[]>((resolve, reject) => {
     const transaction = db.transaction(["conversations"], "readonly");
     const objectStore = transaction.objectStore("conversations");
     const request = objectStore.getAll();
 
     request.onsuccess = () => {
       const userConversations = request.result
+        .filter(
+          (c: Conversation) => c.user_id === user_id && c.bot_id === bot_id
+        )
         .map((conversation: Conversation) => {
           const conversationCopy = Object.assign({}, conversation);
           delete conversationCopy.messages; // reduce memory usage
@@ -74,10 +82,8 @@ const fetchAllConversations = (db: IDBDatabase, user_id: string) => {
             return _c.messages || [];
           };
           return conversationCopy;
-        })
-        .filter(
-          (conversation: Conversation) => conversation.user_id === user_id
-        );
+        });
+
       resolve(userConversations);
     };
 
@@ -104,15 +110,17 @@ const addConversation = (db: IDBDatabase, conversation: Conversation) => {
 };
 
 const DB_NAME = "GOOEY_COPILOT_CONVERSATIONS_DB";
-export const useConversations = (
-  user_id: string
-) => {
+export const useConversations = (user_id: string, bot_id: string) => {
   const [conversations, setConversations] = useState<Conversation[]>([]);
 
   useEffect(() => {
     const loadConversations = async () => {
       const db = await initDB(DB_NAME);
-      const userConversations = await fetchAllConversations(db, user_id);
+      const userConversations = await fetchAllConversations(
+        db,
+        user_id,
+        bot_id
+      );
       setConversations(
         userConversations.sort(
           (a: Conversation, b: Conversation) =>
@@ -123,14 +131,14 @@ export const useConversations = (
     };
 
     loadConversations();
-  }, [user_id]);
+  }, [bot_id, user_id]);
 
   const handleAddConversation = async (c: Conversation | null) => {
     if (!c || !c.messages?.length) return;
 
     const db = await initDB(DB_NAME);
     await addConversation(db, c);
-    const updatedConversations = await fetchAllConversations(db, user_id);
+    const updatedConversations = await fetchAllConversations(db, user_id, bot_id);
     setConversations(updatedConversations);
   };
 

diff --git a/src/contexts/MessagesContext.tsx b/src/contexts/MessagesContext.tsx
@@ -36,15 +36,18 @@ export const MessagesContext: any = createContext({});
 const MessagesContextProvider = (props: any) => {
   const currentUserId = localStorage.getItem(USER_ID_LS_KEY) || "";
   const config = useSystemContext()?.config;
-  const { conversations, handleAddConversation } =
-    useConversations(currentUserId);
+  const { conversations, handleAddConversation } = useConversations(
+    currentUserId,
+    config?.integration_id as string
+  );
 
   const [messages, setMessages] = useState(new Map());
   const [isSending, setIsSendingMessage] = useState(false);
   const [isReceiving, setIsReceiving] = useState(false);
   const [isMessagesLoading, setMessagesLoading] = useState(true);
-  const apiSource = useRef(axios.CancelToken.source());
+  const [preventAutoplay, setPreventAutoplay] = useState(true);
 
+  const apiSource = useRef(axios.CancelToken.source());
   const currentStreamRef = useRef<any>(null);
   const scrollContainerRef = useRef<null | HTMLElement>(null);
   const currentConversation = useRef<Conversation | null>(null);
@@ -57,6 +60,7 @@ const MessagesContextProvider = (props: any) => {
   };
 
   const initializeQuery = (payload: any) => {
+    setPreventAutoplay(false);
     // calls the server and updates the state with user message
     const lastResponse: any = Array.from(messages.values()).pop(); // will get the data from last server msg
     const conversationId = lastResponse?.conversation_id;
@@ -139,6 +143,7 @@ const MessagesContextProvider = (props: any) => {
             user_id: prevMessage?.user_id,
             title: payload?.title,
             timestamp: payload?.created_at,
+            bot_id: config?.integration_id,
           };
           updateCurrentConversation(conversationData);
           handleAddConversation(
@@ -171,7 +176,7 @@ const MessagesContextProvider = (props: any) => {
       });
       scrollToMessage();
     },
-    [handleAddConversation, scrollToMessage]
+    [config?.integration_id, handleAddConversation, scrollToMessage]
   );
 
   const sendPrompt = async (payload: IncomingMsg) => {
@@ -300,21 +305,27 @@ const MessagesContextProvider = (props: any) => {
         currentConversation.current?.id === conversation.id
       )
         return setMessagesLoading(false);
+      setPreventAutoplay(true)
       setMessagesLoading(true);
       const messages = await conversation.getMessages();
       preLoadData(messages);
       updateCurrentConversation(conversation);
       setMessagesLoading(false);
+
       return messages;
     },
     []
   );
 
   useEffect(() => {
     // Load the latest conversation from DB
-    if (config?.disableConversations && conversations.length)
+    setPreventAutoplay(true)
+    if (!config?.enableConversations && conversations.length)
       setActiveConversation(conversations[0]);
     else setMessagesLoading(false);
+    setTimeout(() => {
+      setPreventAutoplay(false);
+    }, 3000);
   }, [config, conversations, setActiveConversation]);
 
   const valueMessages = {
@@ -332,6 +343,7 @@ const MessagesContextProvider = (props: any) => {
     setActiveConversation,
     currentConversationId: currentConversation.current?.id || null,
     isMessagesLoading,
+    preventAutoplay,
   };
 
   return (

diff --git a/src/contexts/SystemContext.tsx b/src/contexts/SystemContext.tsx
@@ -49,10 +49,13 @@ const SystemContextProvider = ({
     showCloseButton: !isInline || false,
     showSidebarButton: false,
     showFocusModeButton: !isInline || false,
-    showNewConversationButton: !config?.disableConversations,
+    showNewConversationButton:
+      config?.enableConversations === undefined
+        ? true
+        : config?.enableConversations,
     isMobile: false,
   });
-  const forceHideSidebar = !!config?.disableConversations;
+  const forceHideSidebar = !layoutState?.showNewConversationButton;
   const [isMobile, isMobileWindow] = useDeviceWidth("mobile", [
     layoutState?.isOpen,
   ]);
@@ -95,7 +98,8 @@ const SystemContextProvider = ({
         setLayoutState((prev) => {
           const sideBarElement: HTMLElement | null | undefined =
             gooeyShadowRoot?.querySelector("#gooey-side-navbar");
-          if (!sideBarElement) return { ...prev, isFocusMode: !prev.isFocusMode };
+          if (!sideBarElement)
+            return { ...prev, isFocusMode: !prev.isFocusMode };
           if (!prev?.isFocusMode) {
             // turning on focus mode open sidebar
             if (!prev?.isSidebarOpen) sideBarElement.style.width = "260px";

diff --git a/src/contexts/types.ts b/src/contexts/types.ts
@@ -5,7 +5,7 @@ export interface CopilotConfigType {
   enableAudioMessage: boolean;
   enablePhotoUpload: boolean;
   enableLipsyncVideo: boolean;
-  disableConversations: boolean;
+  enableConversations: boolean;
   autoPlayResponses: boolean;
   showSources: boolean;
   expandedSources: boolean;

diff --git a/src/widgets/copilot/components/Messages/index.tsx b/src/widgets/copilot/components/Messages/index.tsx
@@ -9,7 +9,7 @@ import SpinLoader from "src/components/shared/SpinLoader";
 
 const Responses = (props: any) => {
   const { config } = useSystemContext();
-  const { handleFeedbackClick }: any = useMessagesContext();
+  const { handleFeedbackClick, preventAutoplay }: any = useMessagesContext();
   const que = useMemo(() => props.queue, [props]);
   const msgs = props.data;
 
@@ -20,16 +20,22 @@ const Responses = (props: any) => {
         const responseData = msgs.get(id);
         const role = responseData.role;
         if (role === "user")
-          return <OutgoingMsg data={responseData} key={id} />;
+          return (
+            <OutgoingMsg
+              data={responseData}
+              key={id}
+              preventAutoplay={preventAutoplay}
+            />
+          );
         return (
           <IncomingMsg
             data={responseData}
             key={id}
             id={id}
             showSources={config?.showSources || true}
-            linkColor={config?.branding?.colors?.primary || 'initial'}
+            linkColor={config?.branding?.colors?.primary || "initial"}
             onFeedbackClick={handleFeedbackClick}
-            autoPlay={config?.autoPlayResponses}
+            autoPlay={preventAutoplay ? false : config?.autoPlayResponses}
           />
         );
       })}
@@ -38,16 +44,17 @@ const Responses = (props: any) => {
 };
 
 const Messages = () => {
-  const { messages, isSending, scrollContainerRef, isMessagesLoading }: any = useMessagesContext();
-
-  if(isMessagesLoading){
+  const { messages, isSending, scrollContainerRef, isMessagesLoading }: any =
+    useMessagesContext();
+
+  if (isMessagesLoading) {
     return (
       <div className="d-flex h-100 w-100 align-center justify-center">
         <SpinLoader />
       </div>
-    )
+    );
   }
-  
+
   const isEmpty = !messages?.size && !isSending;
   return (
     <div