Adding transliteration to production (#145)

* 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]> --------- Co-authored-by: Saiyan Abhishek <[email protected]>
AmakrushAI · Jun 5, 2023 · 2c4c7a6 · 2c4c7a6 · vercel · Jun 5, 2023
1 parent b382692
commit 2c4c7a6
Show file tree

Hide file tree

Showing 18 changed files with 865 additions and 115 deletions.
diff --git a/apps/amakrushi/package.json b/apps/amakrushi/package.json
@@ -16,6 +16,7 @@
     "@emotion/react": "^11.7.1",
     "@emotion/styled": "^11.6.0",
     "@magicbell/magicbell-react": "^8.5.3",
+    "@material-ui/core": "^4.12.4",
     "@next/bundle-analyzer": "^13.3.0",
     "@storybook/react": "^6.5.9",
     "@testing-library/jest-dom": "^5.16.2",

diff --git a/apps/amakrushi/src/components/HomePage/index.module.css b/apps/amakrushi/src/components/HomePage/index.module.css
@@ -79,3 +79,4 @@
   border-radius: 40px !important;
   background-color: var(--secondarygreen) !important;
 }
+
diff --git a/apps/amakrushi/src/components/HomePage/index.tsx b/apps/amakrushi/src/components/HomePage/index.tsx
@@ -1,68 +1,111 @@
-import styles from './index.module.css';
+import styles from "./index.module.css";
 import React, {
   useCallback,
   useContext,
   useEffect,
   useMemo,
   useState,
-} from 'react';
-import { NextPage } from 'next';
-
+} from "react";
+import { NextPage } from "next";
+import axios from "axios";
 //@ts-ignore
-import { analytics } from '../../utils/firebase';
-import { logEvent } from 'firebase/analytics';
-import Menu from '../menu';
-import { getInitialMsgs } from '../../utils/textUtility';
-import { AppContext } from '../../context';
-import RightIcon from '../../assets/icons/right';
-import sunIcon from '../../assets/icons/sun.svg';
-import reloadIcon from '../../assets/icons/reload.svg';
-import { useLocalization } from '../../hooks';
-import router from 'next/router';
-import Image from 'next/image';
-import { Button } from '@chakra-ui/react';
-import toast from 'react-hot-toast';
-import { v4 as uuidv4 } from 'uuid';
+import { analytics } from "../../utils/firebase";
+import { logEvent } from "firebase/analytics";
+import Menu from "../menu";
+import { getInitialMsgs } from "../../utils/textUtility";
+import { AppContext } from "../../context";
+
+import RightIcon from "../../assets/icons/right";
+import sunIcon from "../../assets/icons/sun.svg";
+import reloadIcon from "../../assets/icons/reload.svg";
+import { useLocalization } from "../../hooks";
+import router from "next/router";
+import Image from "next/image";
+import { Button } from "@chakra-ui/react";
+import toast from "react-hot-toast";
+import { v4 as uuidv4 } from "uuid";
 
 const HomePage: NextPage = () => {
   const context = useContext(AppContext);
   const t = useLocalization();
-  const placeholder = useMemo(() => t('message.ask_ur_question'), [t]);
+  const placeholder = useMemo(() => t("message.ask_ur_question"), [t]);
   const [messages, setMessages] = useState<Array<any>>([getInitialMsgs(t)]);
-  const [inputMsg, setInputMsg] = useState('');
+  const [inputMsg, setInputMsg] = useState("");
 
   useEffect(() => {
     setMessages([getInitialMsgs(t)]);
   }, [context.locale, t]);
 
   useEffect(() => {
     //@ts-ignore
-    logEvent(analytics, 'Home_page');
+    logEvent(analytics, "Home_page");
 
     context?.fetchIsDown(); // check if server is down
 
-   if(!sessionStorage.getItem('conversationId')){
-    const newConversationId = uuidv4();
-    sessionStorage.setItem('conversationId', newConversationId);
-    context?.setConversationId(newConversationId);
-   }
-  // eslint-disable-next-line react-hooks/exhaustive-deps
+    if (!sessionStorage.getItem("conversationId")) {
+      const newConversationId = uuidv4();
+      sessionStorage.setItem("conversationId", newConversationId);
+      context?.setConversationId(newConversationId);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   const sendMessage = useCallback(
-    (msg: string) => {
+    async (msg: string) => {
       if (msg.length === 0) {
-        toast.error(t('error.empty_msg'));
+        toast.error(t("error.empty_msg"));
         return;
       }
-      if (context?.socketSession && context?.newSocket?.connected) {
-        console.log('clearing mssgs');
-        context?.setMessages([]);
-        router.push('/chat');
-        context?.sendMessage(msg);
-      } else {
-        toast.error(t('error.disconnected'));
-        return;
+      try {
+        if (!(localStorage.getItem("locale") === "en")) {
+          const words = msg.split(" ");
+          // Call transliteration API
+          const input = words.map((word) => ({
+            source: word,
+          }));
+
+          const response = await axios.post(
+            "https://meity-auth.ulcacontrib.org/ulca/apis/v0/model/compute",
+            {
+              modelId: process.env.NEXT_PUBLIC_TRANSLITERATION_MODELID,
+              task: "transliteration",
+              input: input,
+            },
+            {
+              headers: {
+                "Content-Type": "application/json",
+              },
+            }
+          );
+          console.log("transliterated msg: ", response.data.output);
+          const transliteratedArray = [];
+          for (const element of response.data.output) {
+            transliteratedArray.push(element?.target?.[0]);
+          }
+
+          if (context?.socketSession && context?.newSocket?.connected) {
+            console.log("clearing mssgs");
+            context?.setMessages([]);
+            router.push("/chat");
+            context?.sendMessage(transliteratedArray.join(" "));
+          } else {
+            toast.error(t("error.disconnected"));
+            return;
+          }
+        } else {
+          if (context?.socketSession && context?.newSocket?.connected) {
+            console.log("clearing mssgs");
+            context?.setMessages([]);
+            router.push("/chat");
+            context?.sendMessage(msg);
+          } else {
+            toast.error(t("error.disconnected"));
+            return;
+          }
+
+        }
+      } catch (error) {
+        console.error(error);
       }
     },
     [context, t]
@@ -112,7 +155,7 @@ const HomePage: NextPage = () => {
               type="submit"
               onClick={() => sendMessage(inputMsg)}
               className={styles.sendButton}>
-              {t('label.send')}
+              {t("label.send")}
             </button>
           </div>
         </form>

diff --git a/apps/amakrushi/src/components/PhoneView/ChatWindow/ChatUiWindow.tsx b/apps/amakrushi/src/components/PhoneView/ChatWindow/ChatUiWindow.tsx
@@ -1,53 +1,55 @@
-import axios from 'axios';
+import axios from "axios";
 //@ts-ignore
-import Chat from 'chatui';
+import Chat from "chatui";
 import React, {
   ReactElement,
   useCallback,
   useContext,
   useEffect,
   useMemo,
   useState,
-} from 'react';
-import { analytics } from '../../../utils/firebase';
-import { logEvent } from 'firebase/analytics';
-import { AppContext } from '../../../context';
-import { useLocalization } from '../../../hooks';
-import { getMsgType } from '../../../utils/getMsgType';
-import ChatMessageItem from '../../chat-message-item';
-import { v4 as uuidv4 } from 'uuid';
-import DownTimePage from '../../down-time-page';
+} from "react";
+import { analytics } from "../../../utils/firebase";
+import { logEvent } from "firebase/analytics";
+import { AppContext } from "../../../context";
+import { useLocalization } from "../../../hooks";
+import { getMsgType } from "../../../utils/getMsgType";
+import ChatMessageItem from "../../chat-message-item";
+import { v4 as uuidv4 } from "uuid";
+import toast from "react-hot-toast";
+import DownTimePage from "../../down-time-page";
 
 const ChatUiWindow: React.FC = () => {
   const t = useLocalization();
-  const context = useContext(AppContext);  
+  const context = useContext(AppContext);
 
   useEffect(() => {
     const fetchData = async () => {
       try {
         await context?.fetchIsDown();
         if(!context?.isDown){
-
           const chatHistory = await axios.get(
             `${
               process.env.NEXT_PUBLIC_BASE_URL
-            }/user/chathistory/${sessionStorage.getItem('conversationId')}`,
+            }/user/chathistory/${sessionStorage.getItem("conversationId")}`,
             {
               headers: {
-                authorization: `Bearer ${localStorage.getItem('auth')}`,
+                authorization: `Bearer ${localStorage.getItem("auth")}`,
               },
             }
           );
+
           console.log("ghji:",chatHistory)
           console.log('history:', chatHistory.data);
+
           const normalizedChats = normalizedChat(chatHistory.data);
           if (normalizedChats.length > 0) {
             context?.setMessages(normalizedChats);
           }
         }
-      } catch (error:any) {
+      } catch (error: any) {
         //@ts-ignore
-        logEvent(analytics, 'console_error', {
+        logEvent(analytics, "console_error", {
           error_message: error.message,
         });
       }
@@ -61,76 +63,119 @@ const ChatUiWindow: React.FC = () => {
 
 
   const normalizedChat = (chats: any): any => {
-    console.log('in normalized');
-    const conversationId = sessionStorage.getItem('conversationId');
+    console.log("in normalized");
+    const conversationId = sessionStorage.getItem("conversationId");
     const history = chats
       .filter(
         (item: any) =>
-          conversationId === 'null' || item.conversationId === conversationId
+          conversationId === "null" || item.conversationId === conversationId
       )
       .flatMap((item: any) => [
         {
           text: item.query,
-          position: 'right',
+          position: "right",
           repliedTimestamp: item.createdAt,
           messageId: uuidv4(),
         },
         {
           text: item.response,
-          position: 'left',
+          position: "left",
           sentTimestamp: item.createdAt,
           reaction: item.reaction,
           msgId: item.id,
           messageId: item.id,
         },
       ]);
 
-    console.log('historyyy', history);
-    console.log('history length:', history.length);
+    console.log("historyyy", history);
+    console.log("history length:", history.length);
 
     return history;
   };
 
   const handleSend = useCallback(
-    (type: string, val: any) => {
-      console.log('mssgs:', context?.messages);
-      if (type === 'text' && val.trim()) {
-        context?.sendMessage(val.trim());
+    async (type: string, msg: any) => {
+      if (msg.length === 0) {
+        toast.error(t("error.empty_msg"));
+        return;
+      }
+      console.log("mssgs:", context?.messages);
+      try {
+        if (!(localStorage.getItem("locale") === "en")) {
+          const words = msg.split(" ");
+          // Call transliteration API
+          const input = words.map((word: string) => ({
+            source: word,
+          }));
+
+          const response = await axios.post(
+            "https://meity-auth.ulcacontrib.org/ulca/apis/v0/model/compute",
+            {
+              modelId: process.env.NEXT_PUBLIC_TRANSLITERATION_MODELID,
+              task: "transliteration",
+              input: input,
+            },
+            {
+              headers: {
+                "Content-Type": "application/json",
+              },
+            }
+          );
+          console.log("transliterated msg: ", response.data.output);
+          const transliteratedArray = [];
+          for (const element of response.data.output) {
+            transliteratedArray.push(element?.target?.[0]);
+          }
+
+          if (context?.socketSession && context?.newSocket?.connected) {
+            context?.sendMessage(transliteratedArray.join(" "));
+          } else {
+            toast.error(t("error.disconnected"));
+            return;
+          }
+        } else {
+          if (type === "text" && msg.trim()) {
+            context?.sendMessage(msg.trim());
+          }
+        }
+      } catch (error) {
+        console.error(error);
       }
     },
-    [context]
+    [context, t]
   );
   const normalizeMsgs = useMemo(
     () =>
       context?.messages?.map((msg: any) => ({
         type: getMsgType(msg),
         content: { text: msg?.text, data: { ...msg } },
-        position: msg?.position ?? 'right',
+        position: msg?.position ?? "right",
       })),
     [context?.messages]
   );
-
+  console.log("fghj:", { messages: context?.messages });
   const msgToRender = useMemo(() => {
     return context?.isMsgReceiving
       ? [
           ...normalizeMsgs,
           {
-            type: 'loader',
-            position: 'left',
-            botUuid: '1',
+            type: "loader",
+            position: "left",
+            botUuid: "1",
           },
         ]
       : normalizeMsgs;
   }, [context?.isMsgReceiving, normalizeMsgs]);
 
-  console.log('debug:', { msgToRender });
+  console.log("debug:", { msgToRender });
+
+  const placeholder = useMemo(() => t("message.ask_ur_question"), [t]);
 
-  const placeholder = useMemo(() => t('message.ask_ur_question'), [t]);
   if (context?.isDown) {
     return <DownTimePage />;
   } else
     return (
-      <div style={{ height: '100%', width: '100%' }}>
+      <div style={{ height: "100%", width: "100%" }}>
         <Chat
           btnColor="var(--secondarygreen)"
           background="var(--bg-color)"
@@ -154,4 +199,4 @@ const ChatUiWindow: React.FC = () => {
     );
 };
 
-export default ChatUiWindow;
+export default ChatUiWindow;
diff --git a/apps/amakrushi/src/components/down-time-page/index.tsx b/apps/amakrushi/src/components/down-time-page/index.tsx
@@ -27,4 +27,5 @@ function DownTimePage() {
   );
 }
 
-export default DownTimePage;
+export default DownTimePage;
+
Original file line number	Diff line number	Diff line change
Expand Up		@@ -79,3 +79,4 @@
		border-radius: 40px !important;
		background-color: var(--secondarygreen) !important;
		}
-Original file line number
+Diff line change
@@ Expand Up / @@ -27,4 +27,5 @@ function DownTimePage() { @@
       );
     }
-    export default DownTimePage;
+    export default DownTimePage;