Added TTS

apps/amakrushi/src/components/NavBar/index.tsx

@@ -131,6 +131,7 @@ function NavBar() {
     const newConversationId = uuidv4();
     sessionStorage.setItem('conversationId', newConversationId);
     if(context?.audioElement) context?.audioElement.pause();
+    if(context?.setAudioPlaying) context?.setAudioPlaying(false);
     context?.setConversationId(newConversationId);
     context?.setMessages([]);
     context?.setIsMsgReceiving(false);

apps/amakrushi/src/components/chat-message-item/index.tsx

@@ -26,6 +26,7 @@ import { analytics } from '../../utils/firebase';
 import { logEvent } from 'firebase/analytics';
 import RightIcon from '../../assets/icons/right.jsx';
 import SpeakerIcon from '../../assets/icons/speaker.svg';
+import SpeakerPauseIcon from '../../assets/icons/speakerPause.svg';
 import MsgThumbsUp from '../../assets/icons/msg-thumbs-up.jsx';
 import MsgThumbsDown from '../../assets/icons/msg-thumbs-down.jsx';
 import { AppContext } from '../../context';
@@ -158,11 +159,11 @@ const ChatMessageItem: FC<ChatMessageItemPropType> = ({
 
   const handleAudio = (url: any) => {
     // console.log(url)
-    if(url === ''){
+    if (url === '') {
       toast.error('No audio');
       return;
     }
-    context?.playAudio(url);
+    context?.playAudio(url, content);
   };
 
   const { content, type } = message;
@@ -284,19 +285,26 @@ const ChatMessageItem: FC<ChatMessageItemPropType> = ({
                   &nbsp;
                   <p>{t('message.helpful')}</p>
                 </div>
-                {/* <div
+                <div
                   className={styles.msgSpeaker}
                   onClick={() => handleAudio(content?.data?.audio_url || '')}>
                   {context?.clickedAudioUrl === content?.data?.audio_url ? (
                     context?.ttsLoader ? (
                       <Loader />
                     ) : (
-                      <Image src={SpeakerIcon} width={15} height={15} alt="" />
+                      <Image
+                        src={
+                          !context?.audioPlaying ? SpeakerIcon : SpeakerPauseIcon
+                        }
+                        width={!context?.audioPlaying ? 15 : 40}
+                        height={!context?.audioPlaying ? 15 : 30}
+                        alt=""
+                      />
                     )
                   ) : (
                     <Image src={SpeakerIcon} width={15} height={15} alt="" />
                   )}
-                </div> */}
+                </div>
               </div>
             )
           )}

apps/amakrushi/src/components/menu/index.tsx

@@ -18,6 +18,7 @@ const Menu: FC = () => {
 
   const urlChanger = (link: string) => {
     if(context?.audioElement) context?.audioElement.pause();
+    if(context?.setAudioPlaying) context?.setAudioPlaying(false);
     if (cookies['access_token'] !== undefined) {
       if(link === '/history' && context?.loading){   
         toast.error(`${t("error.wait_new_chat")}`);

apps/amakrushi/src/context/ContextProvider.tsx

@@ -55,97 +55,129 @@ const ContextProvider: FC<{
   );
   const timer1 = flagsmith.getValue('timer1', { fallback: 30000 });
   const timer2 = flagsmith.getValue('timer2', { fallback: 45000 });
-  const audio_playback = flagsmith.getValue('audio_playback', { fallback: 1.5 });
+  const audio_playback = flagsmith.getValue('audio_playback', {
+    fallback: 1.5,
+  });
   const [isDown, setIsDown] = useState(false);
   const [showDialerPopup, setShowDialerPopup] = useState(false);
   // const [isConnected, setIsConnected] = useState(newSocket?.connected || false);
   const [cookie, setCookie, removeCookie] = useCookies();
   const [isOnline, setIsOnline] = useState(navigator.onLine);
   const [audioElement, setAudioElement] = useState(null);
   const [ttsLoader, setTtsLoader] = useState(false);
+  const [audioPlaying, setAudioPlaying] = useState(false);
   const [clickedAudioUrl, setClickedAudioUrl] = useState<string | null>(null);
 
   const downloadChat = useMemo(() => {
     return (e: string) => {
-      try{
+      try {
         //@ts-ignore
         downloadHandler.postMessage(e);
-      }catch(err){
-        console.log(err)
+      } catch (err) {
+        console.log(err);
       }
-    }
+    };
   }, []);
 
   const shareChat = useMemo(() => {
     return (e: string) => {
-      try{
+      try {
         //@ts-ignore
         shareUrl.postMessage(e);
-      }catch(err){
-        console.log(err)
+      } catch (err) {
+        console.log(err);
       }
-    }
+    };
   }, []);
 
   const playAudio = useMemo(() => {
-    return (url: string) => {
-        if (!url) {
-          console.error('Audio URL not provided.');
-          return;
-        }
-        if (audioElement) {
+    return (url: string, content: any) => {
+      if (!url) {
+        console.error('Audio URL not provided.');
+        return;
+      }
+      if (audioElement) {
+        //@ts-ignore
+        if (audioElement.src === url) {
+          // If the same URL is provided and audio is paused, resume playback
           //@ts-ignore
-          if (audioElement.src === url) {
-            // If the same URL is provided and audio is paused, resume playback
-            //@ts-ignore
-            if (audioElement.paused) {
-              setClickedAudioUrl(url);
-              setTtsLoader(true);
+          if (audioElement.paused) {
+            setClickedAudioUrl(url);
+            setTtsLoader(true);
+            audioElement
               //@ts-ignore
-              audioElement.play().then(() => {
+              .play()
+              .then(() => {
                 setTtsLoader(false);
+                setAudioPlaying(true);
                 console.log('Resumed audio:', url);
-                //@ts-ignore
-              }).catch((error) => {
+              })
+              //@ts-ignore
+              .catch((error) => {
+                setAudioPlaying(false);
+                setTtsLoader(false);
+                setAudioElement(null);
+                setClickedAudioUrl(null);
                 console.error('Error resuming audio:', error);
               });
-            } else {
-              // Pause the current audio if it's playing
-              //@ts-ignore
-              audioElement.pause();
-              console.log('Paused audio:', url);
-            }
-            return;
           } else {
-            // Pause the older audio if it's playing
+            // Pause the current audio if it's playing
             //@ts-ignore
             audioElement.pause();
+            setAudioPlaying(false);
+            console.log('Paused audio:', url);
           }
+          return;
+        } else {
+          // Pause the older audio if it's playing
+          //@ts-ignore
+          audioElement.pause();
+          setAudioPlaying(false);
         }
-        setClickedAudioUrl(url);
-        setTtsLoader(true);
-        const audio = new Audio(url);
-        audio.playbackRate = audio_playback;
-        audio.play().then(() => {
+      }
+      setClickedAudioUrl(url);
+      setTtsLoader(true);
+      const audio = new Audio(url);
+      audio.playbackRate = audio_playback;
+      audio.addEventListener('ended', () => {
+        setAudioElement(null);
+        setAudioPlaying(false);
+      });
+      axios
+        .get(
+          `${process.env.NEXT_PUBLIC_BASE_URL}/incrementaudioused/${content?.data?.messageId}`
+        )
+        .then((res) => {})
+        .catch((err) => {
+          console.log(err);
+        });
+      audio
+        .play()
+        .then(() => {
           setTtsLoader(false);
+          setAudioPlaying(true);
           console.log('Audio played:', url);
-        }).catch((error) => {
+          // Update the current audio to the new audio element
+          //@ts-ignore
+          setAudioElement(audio);
+        })
+        .catch((error) => {
+          setAudioPlaying(false);
+          setTtsLoader(false);
+          setAudioElement(null);
+          setClickedAudioUrl(null);
           console.error('Error playing audio:', error);
         });
-
-        // Update the current audio to the new audio element
-        //@ts-ignore
-        setAudioElement(audio);
-  };
-  }, [audioElement]);
+    };
+  }, [audioElement, audio_playback]);
 
   useEffect(() => {
-    console.log("online")
+    console.log('online');
     if (navigator.onLine) {
-      console.log("online")
+      console.log('online');
       setIsOnline(true);
     } else {
-      console.log("online")
+      console.log('online');
       setIsOnline(false);
       onMessageReceived({
         content: {
@@ -159,7 +191,7 @@ const ContextProvider: FC<{
         messageId: uuidv4(),
       });
     }
-  // eslint-disable-next-line react-hooks/exhaustive-deps
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [navigator.onLine]);
 
   useEffect(() => {
@@ -466,7 +498,9 @@ const ContextProvider: FC<{
       setTtsLoader,
       shareChat,
       clickedAudioUrl,
-      downloadChat
+      downloadChat,
+      audioPlaying,
+      setAudioPlaying,
     }),
     [
       locale,
@@ -493,7 +527,9 @@ const ContextProvider: FC<{
       setTtsLoader,
       shareChat,
       clickedAudioUrl,
-      downloadChat
+      downloadChat,
+      audioPlaying,
+      setAudioPlaying,
     ]
   );