Removed tts for prod (#193)

* Style: fixed odia title (#104) * style: ui scroll bug on faq page * style: fixed odia title * Feat chat history (#106) fix: token authentication * Delete .env.production * UI changes (#112) * style: minor ui changes * fix: delete history page fix and flagsmith self hoasted added --------- Co-authored-by: Prateek Jakhar <[email protected]> * fix: conversation id (#115) * fix: conversation id * Added down time page (#117) * Update ContextProvider.tsx (#118) * Feat dialer popup (#120) * added down time page * Update chat.tsx * Added Auth header (#122) * added down time page * added dialer popup * added auth in headers * Update chat.tsx * chore: msgId display for testing (#127) * chore: msgId display for testing * Feat dsply msg (#128) * fix: history not loading on refresh * chore: fixed userID bug (#130) * Feat fcm (#133) * feat: added fcm --------- Co-authored-by: Saiyan Abhishek <[email protected]> * fix: update in conversation api (#135) * fix: added firebase event for msg delay (#136) * fix: flagsmith init inside useeffect (#140) * fix: flagsmith init inside useeffect * added flagsmith cloud --------- Co-authored-by: Prateek Jakhar <[email protected]> * Added query log and splash screen log (#143) * Feat trans (#134) * feat: mic button working * feat: audio to speech added * chore: ui changes * chore: ui changes * feat: speech to text added to chat ui * added flagsmith for model ids * feat: transliteration added * style: changed translate to transliterate * style: changed translate text to transliterate * feat: added eng dictionary * feat: added eng dictionary * added flagsmith cloud * added conv. api change * chore: removed dictionary, now transliterating every msg * fix: transliteration added in or only * fix: added transliteration only on or lang * minor ui changes * minor ui changes --------- Co-authored-by: Saiyan Abhishek <[email protected]> * Fix: fcm logic updated (#146) * fix: flagsmith init inside useeffect * changed fcmToken update logic * changed fcm token logic * fix: updated fcm logic --------- Co-authored-by: Saiyan Abhishek <[email protected]> * Feat: Added example questions to flagsmith (#147) * Feat: Feature Pop Up (#148) * fix: flagsmith init inside useeffect * changed fcmToken update logic * changed fcm token logic * fix: updated fcm logic * feat: added link property to notifications * feat: added link and image to fcm * fix: link in notification * feat: added popup for features * feat: added notify feature popup * style: added support for notification icon --------- Co-authored-by: Saiyan Abhishek <[email protected]> * fix: empty feature details bug (#152) * fix: flagsmith init inside useeffect * changed fcmToken update logic * changed fcm token logic * fix: updated fcm logic * feat: added link property to notifications * feat: added link and image to fcm * fix: link in notification * fix: link in notification * fix: link in notification * feat: added popup for features * feat: added notify feature popup * feat: added notify feature popup * feat: added notify feature popup * style: notification toast ui changed * style: added support for notification icon * style: added support for notification icon * style: added support for notification icon * fix: empty feature details bug --------- Co-authored-by: Saiyan Abhishek <[email protected]> * fix: handled new history api (#157) * fix: no internet error for otp verify in offline (#158) * fix: no internet error for otp verify in offline * feat:Speech to text added (#114) * feat: mic button working * feat: audio to speech added * chore: ui changes * chore: ui changes * feat: speech to text added to chat ui * added flagsmith for model ids * feat: changed audio models * added flagsmith cloud * feat: added new api for odia audio * feat: added new api for odia audio * feat: added voice button to chat screen * added ai tools odia stt * yarn issues resolved * Style/new UI (#159) * history share and download * minor ui bug * removed yarn lock file * bug fix * bug fix * bug fix * download share added to history page * added asr id and sharing toasts * added toasts in sharing * Added error handling for no audio * modified recorder * audio working on mobile * Fix socket (#160) * set up socket-package * new socket working * audio working * socket connection first time issue fixed * new audio package used (#161) * toast log * audio playing added * audio playing added * new package used * new audio package * removed audio playback * Used web audio APIs directly (#162) * toast log * audio playing added * audio playing added * new package used * new audio package * removed audio playback * added audio playback * used web audio apis directly * removed useless toasts * added one toast * Style new UI (#164) * new ui * audio working * minor ui changes * minor ui changes * example msgs ui changed * changed inputBox UI * minor ui changes * chat page icons modified * downtime page added to home, offline retry message coming * updated translations * fetching is down on chat page * added translations * added translations * downtime state fixed * stop gif size reduced * recorder error msg changed * added timer1 back * refresh odia translation added * increased fallback values for timer1 timer2 * removed transliteration * title changed * changed odia title spelling --------- Co-authored-by: Prateek Jakhar <[email protected]> * Fix chat history (#166) * added pagination for conversation history * modified label.ask_me in or (#167) * Minor UI fix (#168) * modified label.ask_me in or * fixed history api call and example question font size * Minor UI fix (#169) * modified label.ask_me in or * fixed history api call and example question font size * changed history sort key * fixed am to pm issue * Fix odia translations (#171) * updated some odia translations * removed FAQs and updated user manual * welcome text centered (#173) * chat history pdf api updated * pdf opening * pdfurl defined two times fixed * added target in anchor * added object url back * added pdfUrl back * added toast message if no pdf link * minor fixes * fixed manual link * added android handshake for sharing * android handshake function added * android handshake function added * android handshake added * added android handshake function * minor ui fix * updated chat history url * downloaded pdf opening in new tab * added firebase logs for download, share clicks * added error handling if shareUrl not implemented in android * Updated shareUrl error message in both langs * sending phoneNumber in asr API * ui enhancements * tts working * removed tts --------- Co-authored-by: Saiyan Abhishek <[email protected]>
AmakrushAI · Oct 9, 2023 · 68c1efa · 68c1efa · vercel · Oct 9, 2023
1 parent 9dea454
commit 68c1efa
Show file tree

Hide file tree

Showing 15 changed files with 123 additions and 18 deletions.
diff --git a/apps/amakrushi/src/assets/icons/speaker.svg b/apps/amakrushi/src/assets/icons/speaker.svg
diff --git a/apps/amakrushi/src/components/HomePage/index.module.css b/apps/amakrushi/src/components/HomePage/index.module.css
@@ -66,6 +66,7 @@
   text-align: left;
   font-size: 14px;
   font-weight: bold;
+  margin-top: 2px;
 }
 
 .keyboard{

diff --git a/apps/amakrushi/src/components/HomePage/index.tsx b/apps/amakrushi/src/components/HomePage/index.tsx
@@ -4,6 +4,7 @@ import React, {
   useContext,
   useEffect,
   useMemo,
+  useRef,
   useState,
 } from 'react';
 import { NextPage } from 'next';
@@ -46,6 +47,9 @@ const HomePage: NextPage = () => {
   const [inputMsg, setInputMsg] = useState('');
   const [showExampleMessages, setShowExampleMessages] = useState(false);
   const [showChatBox, setShowChatBox] = useState(false);
+  const voiceRecorderRef = useRef(null);
+  const exampleMessagesRef = useRef(null);
+  const chatBoxButton = useRef(null);
 
   // Show chatbox when audio recorder sends input message
   useEffect(() => {
@@ -97,14 +101,39 @@ const HomePage: NextPage = () => {
     setShowExampleMessages(inputValue.length === 0);
   };
 
+  const handleDocumentClick = useCallback((event: any) => {
+    const target = event.target;
+
+    // Check if clicked outside voiceRecorder and exampleMessages
+    if (
+      //@ts-ignore
+      !voiceRecorderRef.current?.contains(target) &&
+      //@ts-ignore
+      !chatBoxButton.current?.contains(target) &&
+      //@ts-ignore
+      !exampleMessagesRef.current?.contains(target)
+    ) {
+      setShowExampleMessages(false);
+      // setShowChatBox(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    document.addEventListener('click', handleDocumentClick);
+
+    return () => {
+      document.removeEventListener('click', handleDocumentClick);
+    };
+  }, [handleDocumentClick]);
+
   if (context?.isDown) {
     return <DownTimePage />;
   } else
     return (
       <>
-        <div className={styles.main}>
+        <div className={styles.main} onClick={handleDocumentClick}>
           <div className={styles.title}>{t('label.ask_me')}</div>
-          <div className={styles.voiceRecorder}>
+          <div className={styles.voiceRecorder} ref={voiceRecorderRef}>
             <RenderVoiceRecorder setInputMsg={setInputMsg} />
           </div>
           <div
@@ -113,14 +142,15 @@ const HomePage: NextPage = () => {
               (showExampleMessages
                 ? ` ${styles.visible}`
                 : ` ${styles.invisible}`)
-            }>
+            }
+            ref={exampleMessagesRef}>
             {messages?.[0]?.payload?.buttonChoices?.map((choice: any) => {
               return (
                 <button
-                  onClick={() => {
-                    sendMessage(choice.text);
-                    console.log('clicked');
-                  }}
+                  // onClick={() => {
+                  //   sendMessage(choice.text);
+                  //   console.log('clicked');
+                  // }}
                   className={styles.buttonChoice}
                   key={choice.key}>
                   <Image
@@ -131,16 +161,17 @@ const HomePage: NextPage = () => {
                     style={{ marginRight: '2px' }}
                   />
                   {choice.text}
-                  <div className={styles.rightIcon}>
+                  {/* <div className={styles.rightIcon}>
                     <RightIcon width="35px" color="var(--secondarygreen)" />
-                  </div>
+                  </div> */}
                 </button>
               );
             })}
           </div>
 
           <form onSubmit={(event) => event?.preventDefault()}>
             <div
+              ref={chatBoxButton}
               className={`${
                 showChatBox
                   ? `${styles.inputBox} ${styles.inputBoxOpen}`

diff --git a/apps/amakrushi/src/components/LoginPage/LoginPage.tsx b/apps/amakrushi/src/components/LoginPage/LoginPage.tsx
@@ -64,7 +64,7 @@ const LoginPage: React.FC = () => {
       <div className={styles.title}>{t("label.title")}</div>
 
       <div className={styles.body}>
-        <h1>{t("label.welcome")}</h1>
+        {/* <h1>{t("label.welcome")}</h1> */}
 
         {/* <RadioGroup onChange={setValue} value={value}>
           <Radio value="1">{t("label.farmer")}</Radio>

diff --git a/apps/amakrushi/src/components/NavBar/index.tsx b/apps/amakrushi/src/components/NavBar/index.tsx
@@ -122,6 +122,7 @@ function NavBar() {
     }
     const newConversationId = uuidv4();
     sessionStorage.setItem('conversationId', newConversationId);
+    if(context?.audioElement) context?.audioElement.pause();
     context?.setConversationId(newConversationId);
     context?.setMessages([]);
     context?.setIsMsgReceiving(false);

diff --git a/apps/amakrushi/src/components/PhoneView/ChatWindow/ChatUiWindow.tsx b/apps/amakrushi/src/components/PhoneView/ChatWindow/ChatUiWindow.tsx
@@ -69,7 +69,7 @@ const ChatUiWindow: React.FC = () => {
   }, [context?.setMessages, context?.fetchIsDown, context?.isDown]);
 
   const normalizedChat = (chats: any): any => {
-    console.log('in normalized');
+    console.log('in normalized', chats);
     const conversationId = sessionStorage.getItem('conversationId');
     const history = chats
       .filter(
@@ -91,6 +91,7 @@ const ChatUiWindow: React.FC = () => {
             reaction: item.reaction,
             msgId: item.id,
             messageId: item.id,
+            audio_url: item.audioURL
           },
         ].filter(Boolean)
       );

diff --git a/apps/amakrushi/src/components/chat-message-item/index.module.css b/apps/amakrushi/src/components/chat-message-item/index.module.css
@@ -39,7 +39,7 @@
 
 .msgFeedback {
   display: flex;
-  align-items: center;
+  align-items: flex-end;
   width: fit-content;
 }
 
@@ -109,3 +109,17 @@
   margin: 1px 5px;
   padding: 2px 8px;
 }
+
+.msgSpeaker{
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+  background-color: white;
+  height: 26px;
+  width: 40px;
+  border: 1px solid var(--secondarygreen);
+  border-radius: 30px;
+  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
+  margin-left: auto;
+  margin-right: 3rem;
+}
diff --git a/apps/amakrushi/src/components/chat-message-item/index.tsx b/apps/amakrushi/src/components/chat-message-item/index.tsx
@@ -25,7 +25,7 @@ import styles from './index.module.css';
 import { analytics } from '../../utils/firebase';
 import { logEvent } from 'firebase/analytics';
 import RightIcon from '../../assets/icons/right.jsx';
-import CopyText from '../../assets/icons/copy-text.svg';
+import SpeakerIcon from '../../assets/icons/speaker.svg';
 import MsgThumbsUp from '../../assets/icons/msg-thumbs-up.jsx';
 import MsgThumbsDown from '../../assets/icons/msg-thumbs-down.jsx';
 import { AppContext } from '../../context';
@@ -155,6 +155,15 @@ const ChatMessageItem: FC<ChatMessageItemPropType> = ({
     [context, t]
   );
 
+  const handleAudio = (url: any) => {
+    // console.log(url)
+    if(url === ''){
+      toast.error('No audio');
+      return;
+    }
+    context?.playAudio(url);
+  }
+
   const { content, type } = message;
   // console.log('#-debug:', content);
   switch (type) {
@@ -189,10 +198,7 @@ const ChatMessageItem: FC<ChatMessageItemPropType> = ({
             <div
               style={{
                 display: 'flex',
-                justifyContent:
-                  content?.data?.position === 'left'
-                    ? 'space-between'
-                    : 'flex-end',
+                justifyContent: 'flex-end',
               }}>
               {content?.data?.position === 'left' &&
                 flags?.show_msg_id?.enabled && (
@@ -241,6 +247,7 @@ const ChatMessageItem: FC<ChatMessageItemPropType> = ({
             </div>
           ) : (
             content?.data?.position === 'left' && (
+              <div style={{display: 'flex', position: 'relative', top: "-10px"}}>
               <div className={styles.msgFeedback}>
                 <div className={styles.msgFeedbackIcons}>
                   <div
@@ -273,6 +280,10 @@ const ChatMessageItem: FC<ChatMessageItemPropType> = ({
                 &nbsp;
                 <p>{t('message.helpful')}</p>
               </div>
+              {/* <div className={styles.msgSpeaker} onClick={() => handleAudio(content?.data?.audio_url || '')}>
+                  <Image src={SpeakerIcon} width={15} height={15} alt=""/>
+              </div> */}
+              </div>
             )
           )}
         </div>

diff --git a/apps/amakrushi/src/components/menu/index.tsx b/apps/amakrushi/src/components/menu/index.tsx
@@ -17,6 +17,7 @@ const Menu: FC = () => {
   const router = useRouter();
 
   const urlChanger = (link: string) => {
+    if(context?.audioElement) context?.audioElement.pause();
     if (cookies['access_token'] !== undefined) {
       if(link === '/history' && context?.loading){   
         toast.error(`${t("error.wait_new_chat")}`);

diff --git a/apps/amakrushi/src/components/recorder/RenderVoiceRecorder.jsx b/apps/amakrushi/src/components/recorder/RenderVoiceRecorder.jsx
@@ -64,6 +64,7 @@ const RenderVoiceRecorder = ({ setInputMsg }) => {
 
       // Append the WAV file to the FormData object
       formData.append('file', blob, 'audio.wav');
+      formData.append('phoneNumber', localStorage.getItem('phoneNumber'));
 
       // Send the WAV data to the API
       const resp = await fetch(apiEndpoint + '/aitools/asr', {

diff --git a/apps/amakrushi/src/context/ContextProvider.tsx b/apps/amakrushi/src/context/ContextProvider.tsx
@@ -60,6 +60,31 @@ const ContextProvider: FC<{
   // const [isConnected, setIsConnected] = useState(newSocket?.connected || false);
   const [cookie, setCookie, removeCookie] = useCookies();
   const [isOnline, setIsOnline] = useState(navigator.onLine);
+  const [audioElement, setAudioElement] = useState(null);
+
+  const playAudio = useMemo(() => {
+    return (url: string) => {
+        if (!url) {
+          console.error('Audio URL not provided.');
+          return;
+        }
+
+        if(audioElement){
+          //@ts-ignore
+          audioElement.pause();
+        }
+        const audio = new Audio(url);
+        audio.play().then(() => {
+          console.log('Audio played:', url);
+        }).catch((error) => {
+          console.error('Error playing audio:', error);
+        });
+
+        // Update the current audio to the new audio element
+        //@ts-ignore
+        setAudioElement(audio);
+  };
+  }, [audioElement]);
 
   useEffect(() => {
     console.log("online")
@@ -132,6 +157,7 @@ const ContextProvider: FC<{
           choices: any;
           conversationId: any;
           btns?: boolean;
+          audio_url: string;
         };
         messageId: string;
       };
@@ -150,6 +176,7 @@ const ContextProvider: FC<{
           conversationId: msg?.content?.conversationId,
           sentTimestamp: Date.now(),
           btns: msg.content.btns,
+          audio_url: msg.content.audio_url,
           ...media,
         };
 
@@ -380,6 +407,8 @@ const ContextProvider: FC<{
       fetchIsDown,
       showDialerPopup,
       setShowDialerPopup,
+      playAudio,
+      audioElement
     }),
     [
       locale,
@@ -400,6 +429,8 @@ const ContextProvider: FC<{
       fetchIsDown,
       showDialerPopup,
       setShowDialerPopup,
+      playAudio,
+      audioElement
     ]
   );
 

diff --git a/apps/amakrushi/src/styles/globals.css b/apps/amakrushi/src/styles/globals.css
@@ -2,6 +2,7 @@
   margin: 0;
   padding: 0;
   box-sizing: border-box;
+  -webkit-tap-highlight-color: transparent;
 }
 
 body{

diff --git a/packages/chat-ui/dist/index.css b/packages/chat-ui/dist/index.css
diff --git a/packages/chat-ui/es/components/Bubble/style.less b/packages/chat-ui/es/components/Bubble/style.less
@@ -4,6 +4,7 @@
   min-width: 1px; // for IE bug
   background: @bubble-left-bg;
   border-radius: @bubble-left-border-radius;
+  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
 
   &.text,
   &.typing {

diff --git a/packages/chat-ui/src/components/Bubble/style.less b/packages/chat-ui/src/components/Bubble/style.less
@@ -4,6 +4,7 @@
   min-width: 1px; // for IE bug
   background: @bubble-left-bg;
   border-radius: @bubble-left-border-radius;
+  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
 
   &.text,
   &.typing {