added kalia flow

AmakrushAI · Mar 5, 2024 · a8d0086 · a8d0086
1 parent 4dde2e3
commit a8d0086
Show file tree

Hide file tree

Showing 7 changed files with 141 additions and 46 deletions.
diff --git a/apps/amakrushi/src/assets/images/kalia_status.png b/apps/amakrushi/src/assets/images/kalia_status.png
diff --git a/apps/amakrushi/src/assets/images/plant_protection.png b/apps/amakrushi/src/assets/images/plant_protection.png
diff --git a/apps/amakrushi/src/assets/images/weather_advisory.png b/apps/amakrushi/src/assets/images/weather_advisory.png
diff --git a/apps/amakrushi/src/components/HomePage/index.module.css b/apps/amakrushi/src/components/HomePage/index.module.css
@@ -19,17 +19,55 @@
   width: 57%;
   margin: auto;
   position: relative;
-  top: 10%;
+  top: 3%;
   text-align: center;
   font-family: 'Mulish-Bold';
   font-size: 3.5vh;
   font-weight: 700;
 }
 
+.imgButtons{
+  position: relative;
+  top: 7%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.imgBtn {
+  background-color: white;
+  box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
+  padding: 10px;
+  border-radius: 12px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  cursor: pointer;
+  width: 110px;
+  height: 110px;
+}
+
+.imgBtn:active{
+  transform: scale(0.9);
+}
+
+.imgBtn img{
+  min-width: 80% !important;
+}
+
+.imgBtn p{
+  color: var(--font);
+  font-family: 'Mulish-bold';
+  text-align: center;
+  line-height: 1;
+  margin-bottom: 5px;
+}
+
 .voiceRecorder {
   position: relative;
   margin: auto;
-  top: 25%;
+  top: 10%;
   text-align: center;
   height: 18vh;
   width: 18vh;
@@ -116,7 +154,7 @@
   position: absolute;
   left: 50%;
   right: 50%;
-  bottom: 1vh;
+  bottom: 0;
   transform: translateX(-50%);
   color: var(--font);
   width: 70%;

diff --git a/apps/amakrushi/src/components/HomePage/index.tsx b/apps/amakrushi/src/components/HomePage/index.tsx
@@ -28,6 +28,9 @@ import RenderVoiceRecorder from '../recorder/RenderVoiceRecorder';
 import { useFlags } from 'flagsmith/react';
 import DownTimePage from '../down-time-page';
 import { recordUserLocation } from '../../utils/location';
+import kaliaStatusImg from '../../assets/images/kalia_status.png';
+import plantProtectionImg from '../../assets/images/plant_protection.png';
+import weatherAdvisoryImg from '../../assets/images/weather_advisory.png';
 
 const HomePage: NextPage = () => {
   const context = useContext(AppContext);
@@ -65,7 +68,7 @@ const HomePage: NextPage = () => {
   };
 
   useEffect(() => {
-    if (inputMsg.length > 0 && !(localStorage.getItem('locale') === 'en')) {
+    if (inputMsg.length > 0 && !(localStorage.getItem('locale') === 'en') && !context?.kaliaClicked) {
       if (suggestionClicked) {
         setSuggestionClicked(false);
         return;
@@ -200,7 +203,6 @@ const HomePage: NextPage = () => {
     }
     recordUserLocation();
 
-
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
@@ -214,7 +216,9 @@ const HomePage: NextPage = () => {
         console.log('clearing mssgs');
         context?.setMessages([]);
         router.push('/chat');
-        context?.sendMessage(msg);
+        if(context?.kaliaClicked){
+          context?.sendMessage("Aadhar number - "+msg);
+        }else context?.sendMessage(msg);
       } else {
         toast.error(t('error.disconnected'));
         return;
@@ -225,8 +229,12 @@ const HomePage: NextPage = () => {
 
   const handleInputChange = (e: any) => {
     const inputValue = e.target.value;
-    setInputMsg(inputValue);
-    // Store the cursor position
+    if(context?.kaliaClicked){
+      if(!/^[0-9]*$/.test(inputValue) || inputValue.length > 12){
+        toast.error('Please enter valid aadhaar number');
+        // setInputMsg(inputValue.slice(0, 12));
+      }else setInputMsg(inputValue);
+    }else setInputMsg(inputValue);
     const cursorPosition = e.target.selectionStart;
     setCursorPosition(cursorPosition);
     // setShowExampleMessages(inputValue.length === 0);
@@ -352,10 +360,52 @@ const HomePage: NextPage = () => {
       <>
         <div className={styles.main} onClick={handleDocumentClick}>
           <div className={styles.title}>{t('label.ask_me')}</div>
+          <div className={styles.imgButtons}>
+            <div
+              style={{
+                display: 'flex',
+                justifyContent: 'space-evenly',
+                width: '100%',
+                maxWidth: '500px',
+              }}>
+              <div className={styles.imgBtn} onClick={() => {context?.setKaliaClicked((props: boolean) => !props);}}>
+                <p>KALIA status</p>
+                <Image
+                  src={kaliaStatusImg}
+                  width={80}
+                  height={57}
+                  alt="kaliastatus"
+                />
+              </div>
+              <div className={styles.imgBtn} onClick={() => {
+                toast('Coming Soon!')
+              }}>
+                <p>Plant Protection</p>
+                <Image
+                  src={plantProtectionImg}
+                  width={60}
+                  height={60}
+                  alt="plantprotection"
+                />
+              </div>
+            </div>
+            <div className={styles.imgBtn} style={{ marginTop: '20px' }} onClick={() => {
+              sendMessage('weather advisory');
+            }}>
+              <p>Weather Advisory</p>
+              <Image
+                src={weatherAdvisoryImg}
+                width={50}
+                height={70}
+                alt="weatheradvisory"
+              />
+            </div>
+          </div>
           <div className={styles.voiceRecorder} ref={voiceRecorderRef}>
             <RenderVoiceRecorder setInputMsg={setInputMsg} tapToSpeak={true} />
           </div>
-          <div
+
+          {/* <div
             className={
               styles.exampleMessages +
               (showExampleMessages
@@ -380,46 +430,48 @@ 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={`${`${styles.inputBox} ${styles.inputBoxOpen}`}`}>
-              <div className={styles.suggestions}>
-                {suggestions.map((elem, index) => {
-                  return (
-                    <div
-                      key={index}
-                      onClick={() => suggestionClickHandler(elem)}
-                      className={`${styles.suggestion} ${activeSuggestion === index ? styles.active : ''
-                        }`}
-                      onMouseEnter={(e) => suggestionHandler(e, index)}>
-                      {elem}
-                    </div>
-                  );
-                })}
-              </div>
-              <textarea
-                ref={inputRef}
-                rows={1}
-                value={inputMsg}
-                onChange={handleInputChange}
-                placeholder={placeholder}
-              />
-              <button
-                type="submit"
-                className={styles.sendButton}>
-                <Image src={SendIcon} width={50} height={50} alt="sendIcon" onClick={() => sendMessage(inputMsg)} />
-              </button>
+          </div> */}
+          <div
+            ref={chatBoxButton}
+            className={`${`${styles.inputBox} ${styles.inputBoxOpen}`}`}>
+            <div className={styles.suggestions}>
+              {suggestions.map((elem, index) => {
+                return (
+                  <div
+                    key={index}
+                    onClick={() => suggestionClickHandler(elem)}
+                    className={`${styles.suggestion} ${
+                      activeSuggestion === index ? styles.active : ''
+                    }`}
+                    onMouseEnter={(e) => suggestionHandler(e, index)}>
+                    {elem}
+                  </div>
+                );
+              })}
             </div>
-          </form>
+            <textarea
+              ref={inputRef}
+              rows={1}
+              value={inputMsg}
+              onChange={handleInputChange}
+              placeholder={!context?.kaliaClicked ? placeholder: 'Enter you Aadhar number'}
+            />
+            <button type="submit" className={styles.sendButton}>
+              <Image
+                src={SendIcon}
+                width={50}
+                height={50}
+                alt="sendIcon"
+                onClick={() => sendMessage(inputMsg)}
+              />
+            </button>
+          </div>
         </div>
       </>
     );

diff --git a/apps/amakrushi/src/components/NavBar/index.module.css b/apps/amakrushi/src/components/NavBar/index.module.css
@@ -2,9 +2,9 @@
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: 10px;
+  padding: 5px;
   background-color: var(--bg-color);
-  height: 100px;
+  height: 85px;
   border-bottom: 1px solid #dbdbdb;
 }
 

diff --git a/apps/amakrushi/src/context/ContextProvider.tsx b/apps/amakrushi/src/context/ContextProvider.tsx
@@ -67,6 +67,7 @@ const ContextProvider: FC<{
   const [startTime, setStartTime] = useState(Date.now());
   const [endTime, setEndTime] = useState(Date.now());
   const [lastMsgId, setLastMsgId] = useState('');
+  const [kaliaClicked, setKaliaClicked] = useState(false);
 
   const downloadChat = useMemo(() => {
     return (e: string) => {
@@ -641,6 +642,8 @@ const ContextProvider: FC<{
       downloadChat,
       audioPlaying,
       setAudioPlaying,
+      kaliaClicked,
+      setKaliaClicked
     }),
     [
       locale,
@@ -667,6 +670,8 @@ const ContextProvider: FC<{
       downloadChat,
       audioPlaying,
       setAudioPlaying,
+      kaliaClicked,
+      setKaliaClicked
     ]
   );