More UI Updates

AmakrushAI · Mar 11, 2024 · d70fa25 · d70fa25
1 parent ac01574
commit d70fa25
Show file tree

Hide file tree

Showing 8 changed files with 25 additions and 15 deletions.
diff --git a/apps/amakrushi/lang/en.json b/apps/amakrushi/lang/en.json
@@ -40,8 +40,9 @@
     "label.eleg_disclaimer": "If not eligible, please apply for a grievance via KALIA Portal",
     "label.disbursal_disclaimer": "If the payment status is failed, please link your bank account with Aadhaar.",
     "label.kalia_status": "KALIA Status",
-    "label.plant_protection":"Plant Protection",
-    "label.weather_advisory":"Weather Advisory",
+    "label.plant_protection": "Plant Protection",
+    "label.weather_advisory": "Weather Advisory",
+    "label.enter_aadhaar_number": "Enter your Aadhaar Number",
     "table.personalDetails": "Personal Details",
     "table.header_date": "Date",
     "table.header_temp_max": "Temp Max",
@@ -101,6 +102,7 @@
     "message.recorder_wait": "Please wait while we process your request...",
     "message.recorder_error": "Your question was not recognised. Pls try speaking more clearly.",
     "message.dialer_popup": "You may speak to an Ama Krushi expert to get a satisfactory response",
+    "message.return_to_home_screen": "Return to Ama Krushi AI Chatbot",
     "message.cannot_share": "Your system doesn't support sharing this file.",
     "error.fail_to_submit": "Failed to submit rating.",
     "error.fail_to_submit_review": "Failed to submit review.",

diff --git a/apps/amakrushi/lang/or.json b/apps/amakrushi/lang/or.json
@@ -42,6 +42,7 @@
     "label.kalia_status": "କାଳିଆ ସ୍ଥିତି",
     "label.plant_protection":"ଉଦ୍ଭିଦ ସୁରକ୍ଷା",
     "label.weather_advisory":"ପାଣିପାଗ ପରାମର୍ଶଦାତା",
+    "label.enter_aadhaar_number":"ଆପଣଙ୍କ ଆଧାର ନମ୍ବର ପ୍ରବେଶ କରନ୍ତୁ",
     "table.header_date": "ତାରିଖ",
     "table.header_temp_max":"ସର୍ବାଧିକ ତାପମାତ୍ରା",
     "table.header_temp_min": "ସାର୍ବନିମ୍ନ ତାପମାତ୍ରା ",
@@ -68,7 +69,7 @@
     "message.not_register_yet":"ଏପର୍ଯ୍ୟନ୍ତ ପଞ୍ଜୀକୃତ ହୋଇନାହିଁ | ?",
     "message.register_at_krushak":"କୃଷକ ଓଡିଶାରେ ପଞ୍ଜୀକରଣ କରନ୍ତୁ |",
     "message.otp_verification":"OTP ଯାଞ୍ଚ |",
-    "message.ask_ur_question":"ତୁମର ପ୍ରଶ୍ନ ପଚାର |",
+    "message.ask_ur_question":"ଆପଣଙ୍କ ପ୍ରଶ୍ନ ପଚାରନ୍ତୁ",
     "message.otp_message":"ଏହା ଉପରେ ଆମେ ଆପଣଙ୍କୁ ଗୋଟିଏ ଥର ପାସୱାର୍ଡ ପଠାଇବୁ |",
     "message.invalid_mobile":"ଏକ 10 ଅଙ୍କ ସଂଖ୍ୟା ପରବଶ କରନତ!",
     "message.cannot_answer_again": "ପୁନର୍ବାର ଉତ୍ତର ଦେଇପାରିବ ନାହିଁ",
@@ -103,6 +104,7 @@
     "message.recorder_error": "ଆପଣଙ୍କ ପ୍ରଶ୍ନ ଚିହ୍ନଟ ହୋଇନାହିଁ। ଦୟାକରି ଅଧିକ ସ୍ପଷ୍ଟ ଭାବରେ କହିବାକୁ ଚେଷ୍ଟା କରନ୍ତୁ।",
     "message.dialer_popup":"ଏକ ସନ୍ତୋଷଜନକ ପ୍ରତିକ୍ରିୟା ପାଇବା ପାଇଁ ଆପଣ ଆମା କ୍ରୁଶି ବିଶେଷଜ୍ଞଙ୍କ ସହିତ କଥା ହେଇପାରିବେ |",
     "message.cannot_share": "ଆପଣଙ୍କ ସିଷ୍ଟମ୍ ଏହି ଫାଇଲ୍ ଅଂଶୀଦାର କରିବାକୁ ସମର୍ଥନ କରେ ନାହିଁ।",
+    "message.return_to_home_screen": "ଆମ କୃଷି ଏ ଆଇ କୁ ଫେରନ୍ତୁ",
     "error.fail_to_submit":"ମୂଲ୍ୟାୟନ ଦାଖଲ କରିବାରେ ବିଫଳ |",
     "error.fail_to_submit_review": "ସମୀକ୍ଷା ଦାଖଲ କରିବାରେ ବିଫଳ |",
     "error.sending_otp":"ଗୋଟିଏ ଥର ପାସୱାର୍ଡ ପଠାଇବାରେ ତ୍ରୁଟି |",

diff --git a/apps/amakrushi/src/assets/icons/startIconDisable.png b/apps/amakrushi/src/assets/icons/startIconDisable.png
diff --git a/apps/amakrushi/src/components/ChatWindow/ChatUiWindow.tsx b/apps/amakrushi/src/components/ChatWindow/ChatUiWindow.tsx
@@ -149,7 +149,7 @@ const ChatUiWindow: React.FC = () => {
 
   console.log('debug:', { msgToRender });
 
-  const placeholder = useMemo(() => t('message.ask_ur_question'), [t]);
+  const placeholder = useMemo(() => context?.kaliaClicked ? t('message.return_to_home_screen') : t('message.ask_ur_question'), [t]);
 
   const downloadShareHandler = async (type: string) => {
     try {

diff --git a/apps/amakrushi/src/components/HomePage/index.tsx b/apps/amakrushi/src/components/HomePage/index.tsx
@@ -363,7 +363,7 @@ const HomePage: NextPage = () => {
             <Image
               src={kaliaStatusImg}
               width={180}
-              height={120}
+              height={180}
               alt="kaliastatus"
             />
           </div> : <><div className={styles.title}>{t('label.ask_me')}</div>
@@ -380,7 +380,7 @@ const HomePage: NextPage = () => {
                   <Image
                     src={kaliaStatusImg}
                     width={80}
-                    height={57}
+                    height={80}
                     alt="kaliastatus"
                   />
                 </div>
@@ -466,7 +466,7 @@ const HomePage: NextPage = () => {
               rows={1}
               value={inputMsg}
               onChange={handleInputChange}
-              placeholder={!context?.kaliaClicked ? placeholder : 'Enter you Aadhaar number'}
+              placeholder={!context?.kaliaClicked ? placeholder : t('label.enter_aadhaar_number')}
             />
             <button type="submit" className={styles.sendButton}>
               <Image

diff --git a/apps/amakrushi/src/components/chat-message-item/index.module.css b/apps/amakrushi/src/components/chat-message-item/index.module.css
@@ -251,7 +251,7 @@
 }
 
 .tableDataCell {
-  border-bottom: 1px solid grey;
+  border: 1px solid grey;
   width: 100%;
   height: 3rem;
   text-align: center;
@@ -264,4 +264,6 @@
   padding: 0rem 0.5rem;
   word-wrap: break-word;
   white-space: break-spaces;
+  border: 1px solid var(--secondarygreen);
+
 }
diff --git a/apps/amakrushi/src/components/chat-message-item/index.tsx b/apps/amakrushi/src/components/chat-message-item/index.tsx
@@ -931,7 +931,7 @@ const ChatMessageItem: FC<ChatMessageItemPropType> = ({ message, onSend }) => {
           <Bubble type="text">
             <div className={styles.tableContainer}>
               <div className={styles.tableHeader}
-                style={{ fontSize: '13px', width: '30%', wordWrap: 'break-word', wordBreak: 'break-word', display: 'flex' }}
+                style={{ fontSize: '13px', width: '30%', wordWrap: 'break-word', wordBreak: 'break-word', display: 'flex', gap: '0rem' }}
               >
                 <p className={styles.tableDataCellHeader}>Name of<br></br> Bank</p>
                 <p className={styles.tableDataCellHeader}>IFSC Code</p>
@@ -940,15 +940,15 @@ const ChatMessageItem: FC<ChatMessageItemPropType> = ({ message, onSend }) => {
                 <p className={styles.tableDataCellHeader}>Payment <br></br>Status </p>
                 <p className={styles.tableDataCellHeader}>UTR No</p>
               </div>
-              <div className={styles.tableData}>
+              <div className={styles.tableData} >
                 {data?.map(
                   (el: any, idx: any) => (
                     <div
                       key={el?.['Name of Bank'] + idx}
                       className={styles.tableDataCol}
-                      style={{ fontSize: '13px', padding: '0rem' }}
+                      style={{ fontSize: '13px', padding: '0rem', gap: '0rem', minWidth: '7rem', wordWrap: 'break-word', wordBreak: 'break-word' }}
                     >
-                      <div className={styles.tableDataCell}>{el['Name of Bank']}</div>
+                      <div className={styles.tableDataCell} style={{ wordWrap: 'break-word', wordBreak: 'break-word', whiteSpace: 'break-spaces' }}>{el['Name of Bank']}</div>
                       <div className={styles.tableDataCell}>{el['IFSC Code']} </div>
                       <div className={styles.tableDataCell}>{el['Payment processed Date']}</div>
                       <div className={styles.tableDataCell}>{el['Saving Bank Account No.']}</div>

diff --git a/apps/amakrushi/src/components/recorder/RenderVoiceRecorder.jsx b/apps/amakrushi/src/components/recorder/RenderVoiceRecorder.jsx
@@ -1,19 +1,22 @@
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useContext } from 'react';
 import Image from 'next/image';
 import stop from '../../assets/icons/stop.gif';
 import processing from '../../assets/icons/process.gif';
 import error from '../../assets/icons/error.gif';
 import start from '../../assets/icons/startIcon.png';
+import disabledStart from '../../assets/icons/startIconDisable.png';
 import styles from './styles.module.css';
 import toast from 'react-hot-toast';
 import { useLocalization } from '../../hooks';
 import { useFlags } from 'flagsmith/react';
+import { AppContext } from '../../context';
 
 const RenderVoiceRecorder = ({ setInputMsg, tapToSpeak, includeDiv = false }) => {
   const t = useLocalization();
   const [mediaRecorder, setMediaRecorder] = useState(null);
   const [apiCallStatus, setApiCallStatus] = useState('idle');
   const [userClickedError, setUserClickedError] = useState(false);
+  const context = useContext(AppContext);
 
   const flags = useFlags(['delay_between_dialog']);
   let VOICE_MIN_DECIBELS = -35;
@@ -272,13 +275,14 @@ const RenderVoiceRecorder = ({ setInputMsg, tapToSpeak, includeDiv = false }) =>
                 </div>
                   : <Image
                     priority
-                    src={start}
+                    src={context?.kaliaClicked ? disabledStart : start}
                     alt="startIcon"
                     onClick={() => {
+                      if (context?.kaliaClicked) return;
                       setUserClickedError(true);
                       startRecording();
                     }}
-                    style={{ cursor: 'pointer' }}
+                    style={{ cursor: context?.kaliaClicked ? 'not-allowed' : 'pointer' }}
                     height={'10px !important'}
                     width={'10px !important'}
                     layout="responsive"