added transliteration for instruction driven chat page

AI4Bharat · Mar 15, 2024 · 05aed77 · 05aed77
1 parent 4614c70
commit 05aed77
Show file tree

Hide file tree

Showing 2 changed files with 72 additions and 48 deletions.
diff --git a/src/app/ui/pages/chat/InstructionDrivenChatPage.js b/src/app/ui/pages/chat/InstructionDrivenChatPage.js
@@ -50,6 +50,7 @@ const InstructionDrivenChatPage = () => {
   const taskList = useSelector(
     (state) => state.GetTasksByProjectId?.data?.result,
   );
+  const language = useSelector((state) => state.getProjectDetails?.data?.tgt_language) || "english";
 
   const handleOpen = () => {
     setOpen(true);
@@ -352,6 +353,7 @@ const InstructionDrivenChatPage = () => {
           <Textarea
             handleButtonClick={handleButtonClick}
             handleOnchange={handleOnchange}
+            language={language}
           />
         </Grid>
       </Grid>

diff --git a/src/components/Chat/TextArea.jsx b/src/components/Chat/TextArea.jsx
@@ -1,14 +1,36 @@
-import {useState} from 'react';
+import {useEffect, useState} from 'react';
 
 import SendRoundedIcon from '@mui/icons-material/SendRounded';
 import {Grid} from '@mui/material';
-import {
-  TextareaAutosize as BaseTextareaAutosize,
-} from '@mui/base/TextareaAutosize';
+// import {
+//   TextareaAutosize as BaseTextareaAutosize,
+// } from '@mui/base/TextareaAutosize';
 import IconButton from '@mui/material/IconButton';
-import {styled} from '@mui/system';
+// import {styled} from '@mui/system';
+import { IndicTransliterate } from '@ai4bharat/indic-transliterate';
+import LanguageCode from '@/utils/LanguageCode';
+
+export default function Textarea({handleButtonClick, handleOnchange, language}) {
+  const [text, setText] = useState("");
+  const [targetLang, setTargetLang] = useState("en");
+
+  useEffect(() => {
+    if(text != ""){
+      handleOnchange(text);
+    }
+  }, [text])
+
+  useEffect(() => {
+    const langs = LanguageCode.languages;
+    if (language) {
+      const filtereddata = langs.filter(
+        (el) => el.label === language
+      ); 
+      setTargetLang(filtereddata[0]?.code);
+      console.log(filtereddata[0]?.code);
+    }
+  }, [language]);
 
-export default function Textarea({handleButtonClick, handleOnchange}) {
   const orange = {
     200: 'pink',
     400: '#EE6633', //hover-border
@@ -22,35 +44,6 @@ export default function Textarea({handleButtonClick, handleOnchange}) {
     900: '#1C2025',
   };
 
-  const Textarea = styled (BaseTextareaAutosize) (
-    ({theme}) => `
-    resize: none;
-    margin-right: 5px;
-    font-size: 1rem;
-    width: 60%;
-    font-weight: 400;
-    line-height: 1.5;
-    padding: 12px;
-    border-radius: 12px 12px 0 12px;
-    color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]};
-    background: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'};
-    border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
-    box-shadow: 0px 2px 2px ${theme.palette.mode === 'dark' ? grey[900] : grey[50]};
-    &:hover {
-      border-color: ${orange[400]};
-    }
-    &:focus {
-      outline: 0;
-      border-color: ${orange[400]};
-      box-shadow: 0 0 0 3px ${theme.palette.mode === 'dark' ? orange[600] : orange[200]};
-    }
-    // firefox
-    &:focus-visible {
-      outline: 0;
-    }
-  `
-  );
-
   return (
     <Grid
       item
@@ -64,20 +57,49 @@ export default function Textarea({handleButtonClick, handleOnchange}) {
       width={'80.6em'}
       borderTop={'1px solid #C6C6C6'}
     >
-      <Textarea
-        xs={12}
-        maxRows={10}
-        aria-label="empty textarea"
-        placeholder="Chat with Anudesh"
-        onChange={e => {
-          handleOnchange (e.target.value);
-        }}
-        onKeyDown={e => {
-          if (e.key === 'Enter' && e.ctrlKey) {
-            handleButtonClick ();
-          }
+      <IndicTransliterate
+        renderComponent={(props) => 
+        <textarea
+          xs={12}
+          maxRows={10}
+          aria-label="empty textarea"
+          placeholder="Chat with Anudesh"
+          onMouseEnter={() => {
+            this.style.borderColor = orange[400];
+          }}
+          onMouseLeave={() => {
+            this.style.borderColor = grey[200];
+          }}
+          onFocus={() => {
+            this.style.outline = '0';
+            this.style.borderColor = orange[400];
+            this.style.boxShadow = `0 0 0 3px ${orange[200]}`;
+          }}
+          onBlur={() => {
+            this.style.boxShadow = `0px 2px 2px ${grey[50]}`;
+          }}
+          {...props} />
+        }
+        value={text}
+        onChangeText={(text) => {
+          setText(text);
         }}
-      />
+        lang={targetLang}
+        style={{resize: 'none',
+        fontSize: '1rem',
+        height: '50%',
+        width: "800px",
+        height: "50px",
+        fontWeight: '400',
+        lineHeight: '1.5',
+        padding: '12px',
+        borderRadius: '12px 12px 0 12px',
+        color: grey[900],
+        background:"#ffffff",
+        border: `1px solid ${grey[200]}`,
+        boxShadow: `0px 2px 2px ${grey[50]}`
+      }}  
+    />
       <IconButton size="large" onClick={handleButtonClick}>
         <SendRoundedIcon style={{color: '#EE6633', height: '4rem'}} />
       </IconButton>