UI changes (#112)

* style: minor ui changes * fix: delete history page fix and flagsmith self hoasted added --------- Co-authored-by: Prateek Jakhar <[email protected]>
AmakrushAI · May 10, 2023 · 61e535f · 61e535f
1 parent 69137b3
commit 61e535f
Show file tree

Hide file tree

Showing 11 changed files with 163 additions and 60 deletions.
diff --git a/apps/amakrushi/lang/en.json b/apps/amakrushi/lang/en.json
@@ -21,6 +21,8 @@
     "label.click":"Reload",
     "label.new_chat":"New chat",
     "label.confirm_delete":"Are you sure you want to delete this conversation?",
+    "label.no_history":"No Chats",
+    "message.no_history":"Your Chat History with AI will come here",
     "message.socket_disconnect_msg": "to connect again.",
     "message.enter_mobile":"Enter Mobile Number",
     "message.register_message":"If you are already registered then use your mobile number to login.",

diff --git a/apps/amakrushi/lang/or.json b/apps/amakrushi/lang/or.json
@@ -21,6 +21,8 @@
     "label.click":"ସତେଜ କରନ୍ତୁ",
     "label.new_chat":"ନୂଆ ଚାଟ୍",
     "label.confirm_delete":"ଆପଣ ନିଶ୍ଚିତ କି ଆପଣ ଏହି ବାର୍ତ୍ତାଳାପକୁ ବିଲୋପ କରିବାକୁ ଚାହୁଁଛନ୍ତି?",
+    "label.no_history":"କ chat ଣସି ଚାଟ୍ ନାହିଁ |",
+    "message.no_history":"AI ସହିତ ଆପଣଙ୍କର ଚାଟ୍ ଇତିହାସ ଏଠାକୁ ଆସିବ |",
     "message.socket_disconnect_msg": "ପୁନର୍ବାର ସଂଯୋଗ କରିବାକୁ |",
     "message.enter_mobile":"ମୋବାଇଲ୍ ନମ୍ବର ପ୍ରବେଶ କରନ୍ତୁ |",
     "message.register_message":"ଯୋଡି ଆପଣ ପୂର୍ବରୁ ପଞ୍ଜୀକୃତ ହୋଇଛନ୍ତି ତେବେ ଲଗଇନ୍ କରିବା ପାଇଁ ଆପଣଙ୍କର ମୋବାଇଲ ନମ୍ବର ବ୍ୟବହାର କରନ୍ତୁ |",

diff --git a/apps/amakrushi/src/components/HistoryPage/index.module.css b/apps/amakrushi/src/components/HistoryPage/index.module.css
@@ -31,4 +31,28 @@
   font-size: 4.265vh;
   font-weight: 700;
   color: var(--secondarygreen);
+}
+
+.noHistory{
+  height: 35vh;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.noHistory div{
+  margin-top: 4vh;
+  margin-left: 2vh;
+  font-family: 'Mulish-Bold';
+  font-size: 4vh;
+  text-align: center;
+  color: var(--grey);  
+}
+.noHistory p{
+  margin-top: 4vh;
+  margin-left: 2vh;
+  font-family: 'Mulish-Bold';
+  font-size: 1.65vh;
+  text-align: center;
+  color: var(--secondarygreen);  
 }
diff --git a/apps/amakrushi/src/components/HistoryPage/index.tsx b/apps/amakrushi/src/components/HistoryPage/index.tsx
@@ -1,5 +1,5 @@
 import styles from './index.module.css';
-import React, { useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import searchIcon from '../../assets/icons/search.svg';
 import { Input, InputGroup, InputLeftElement } from '@chakra-ui/react';
 import ChatItem from '../chat-item';
@@ -31,13 +31,16 @@ const HistoryPage: NextPage = () => {
         }/user/conversations/${localStorage.getItem('userID')}`
       )
       .then((res) => {
-        const sortedConversations =  _.filter(res?.data,conv=>conv?.conversationId !==null).sort(
+        const sortedConversations = _.filter(
+          res?.data,
+          (conv) => conv?.conversationId !== null
+        ).sort(
           //@ts-ignore
           (a, b) => new Date(b.createdAt) - new Date(a.createdAt)
         );
-          //@ts-ignore
+        //@ts-ignore
         setConversations(sortedConversations);
-        console.log('conversations:', sortedConversations);
+        console.log('hie', sortedConversations);
       })
       .catch((error) => {
         //@ts-ignore
@@ -47,6 +50,16 @@ const HistoryPage: NextPage = () => {
       });
   }, []);
 
+  // Function to delete conversation by conversationId
+  const deleteConversationById = useCallback((conversationIdToDelete: any) => {
+    const filteredConversations = [...conversations].filter(
+      (conversation: any) => conversation.conversationId !== conversationIdToDelete
+    );
+    setConversations(filteredConversations);
+  }, [conversations]);
+
+
+
   if (!flags?.show_chat_history_page?.enabled) {
     return <ComingSoonPage />;
   } else
@@ -61,15 +74,23 @@ const HistoryPage: NextPage = () => {
             <Input type="text" placeholder="Search" />
           </InputGroup> */}
           <div>
-            {conversations.map((conv:any, key) => {
-              return (
-                <ChatItem
-                  key={key}
-                  name={conv.query}
-                  conversationId={conv.conversationId}
-                />
-              );
-            })}
+            {conversations.length > 0
+              ? conversations.map((conv: any) => {
+                  return (
+                    <ChatItem
+                      key={conv.id}
+                      name={conv.query}
+                      conversationId={conv.conversationId}
+                      deleteConversationById={deleteConversationById}
+                    />
+                  );
+                })
+              : (
+                  <div className={styles.noHistory}>
+                    <div>{t('label.no_history')}</div>
+                    <p>{t('message.no_history')}</p>
+                  </div>
+                )}
           </div>
         </div>
         <Menu />

diff --git a/apps/amakrushi/src/components/MorePage/FAQPage/index.tsx b/apps/amakrushi/src/components/MorePage/FAQPage/index.tsx
@@ -158,7 +158,7 @@ const FAQPage: React.FC = () => {
                 <div className={styles.footer}>
                   {t('message.dial_description')}
                 </div>
-                <a href="tel:155333" className={styles.footerTitle}>
+                <a href={`tel:${flags.dialer_number.value}`} className={styles.footerTitle}>
                   <div className={styles.callIconBox}>
                     <Image src={callIcon} alt="callIcon" layout="responsive" />
                   </div>

diff --git a/apps/amakrushi/src/components/chat-item/index.tsx b/apps/amakrushi/src/components/chat-item/index.tsx
@@ -12,7 +12,11 @@ import { v4 as uuidv4 } from 'uuid';
 import { AppContext } from '../../context';
 import { useLocalization } from '../../hooks';
 
-const ChatItem: React.FC<ChatItemPropsType> = ({ name, conversationId }) => {
+const ChatItem: React.FC<ChatItemPropsType> = ({
+  name,
+  conversationId,
+  deleteConversationById,
+}) => {
   const context = useContext(AppContext);
   const t = useLocalization();
   const [isConversationDeleted, setIsConversationDeleted] = useState(false);
@@ -24,34 +28,35 @@ const ChatItem: React.FC<ChatItemPropsType> = ({ name, conversationId }) => {
   }, [context, conversationId]);
 
   const deleteConversation = useCallback(() => {
-    const confirmed = window?.confirm(`${t("label.confirm_delete")}`);
-    if(confirmed){
+    const confirmed = window?.confirm(`${t('label.confirm_delete')}`);
+    if (confirmed) {
       axios
-      .get(
-        `${
-          process.env.NEXT_PUBLIC_BASE_URL
-        }/user/conversations/delete/${localStorage.getItem(
-          'userID'
-        )}/${conversationId}`
-      )
-      .then((res) => {
-        console.log('deleting conversation')
-        if (conversationId === sessionStorage.getItem('conversationId')) {
-          const newConversationId= uuidv4();
-          sessionStorage.setItem('conversationId',newConversationId);
-          context?.setConversationId(newConversationId);
-          context?.setMessages([]);
-        }
-        setIsConversationDeleted(true);
-      })
-      .catch((error) => {
-        //@ts-ignore
-        logEvent(analytics, 'console_error', {
-          error_message: error.message,
+        .get(
+          `${
+            process.env.NEXT_PUBLIC_BASE_URL
+          }/user/conversations/delete/${localStorage.getItem(
+            'userID'
+          )}/${conversationId}`
+        )
+        .then((res) => {
+          console.log('deleting conversation');
+          if (conversationId === sessionStorage.getItem('conversationId')) {
+            const newConversationId = uuidv4();
+            sessionStorage.setItem('conversationId', newConversationId);
+            context?.setConversationId(newConversationId);
+            context?.setMessages([]);
+          }
+          deleteConversationById(conversationId);
+          setIsConversationDeleted(true);
+        })
+        .catch((error) => {
+          //@ts-ignore
+          logEvent(analytics, 'console_error', {
+            error_message: error.message,
+          });
         });
-      });
     }
-  }, [context, conversationId, t]);
+  }, [context, conversationId, deleteConversationById, t]);
 
   return (
     <>

diff --git a/apps/amakrushi/src/components/chat-message-item/index.module.css b/apps/amakrushi/src/components/chat-message-item/index.module.css
@@ -1,3 +1,31 @@
+.messageTriangleRight {
+  content: ' ';
+  margin-right: 1vh;
+	position: absolute;
+	width: 0;
+	height: 0;
+  left: auto;
+	right: -20px;
+  top: 0px;
+	bottom: auto;
+	border: 20px solid;
+	border-color: var(--secondarygreen) transparent transparent transparent;
+}
+
+.messageTriangleLeft {
+  margin-left: 1vh;
+  content: ' ';
+	position: absolute;
+	width: 0;
+	height: 0;
+  left: -20px;
+	right: auto;
+  top: 0px;
+	bottom: auto;
+	border: 22px solid;
+	border-color: white transparent transparent transparent;
+}
+
 .onHover {
   font-weight: bold;
   color: var(--secondarygreen);

diff --git a/apps/amakrushi/src/components/chat-message-item/index.tsx b/apps/amakrushi/src/components/chat-message-item/index.tsx
@@ -32,39 +32,44 @@ import { ChatMessageItemPropType } from '../../types';
 import { getFormatedTime } from '../../utils/getUtcTime';
 import { useLocalization } from '../../hooks/useLocalization';
 import { getReactionUrl } from '../../utils/getUrls';
+import { useFlags } from 'flagsmith/react';
 
-
-const getToastMessage=(t:any,reaction:number):string=>{
-  if(reaction===1)
-  return t('toast.reaction_like');
-  if(reaction===-1)
-  return t('toast.reaction_dislike')
-  return t('toast.reaction_reset')
-}
+const getToastMessage = (t: any, reaction: number): string => {
+  if (reaction === 1) return t('toast.reaction_like');
+  if (reaction === -1) return '';
+  return t('toast.reaction_reset');
+};
 const ChatMessageItem: FC<ChatMessageItemPropType> = ({
   currentUser,
   message,
   onSend,
 }) => {
+  const flags = useFlags(['dialer_number']);
   const t = useLocalization();
   const context = useContext(AppContext);
   const [reaction, setReaction] = useState(message?.content?.data?.reaction);
-  
+
   useEffect(() => {
     setReaction(message?.content?.data?.reaction);
-
-   }, [message?.content?.data?.reaction]);
-
-
+  }, [message?.content?.data?.reaction]);
 
   const onLikeDislike = useCallback(
     ({ value, msgId }: { value: 0 | 1 | -1; msgId: string }) => {
       let url = getReactionUrl({ msgId, reaction: value });
-      
+
       axios
         .get(url)
         .then((res: any) => {
-          toast.success(`${getToastMessage(t,value)}`);
+          if (value === -1) {
+            const dial = window?.confirm(
+              `Please call ${flags.dialer_number.value} to resolve your query with Ama Krushi Call centre`
+            );
+            if (dial) {
+              const anchor = document.createElement('a');
+              anchor.href = `tel:${flags.dialer_number.value}`;
+              anchor.click();
+            }
+          } else toast.success(`${getToastMessage(t, value)}`);
         })
         .catch((error: any) => {
           //@ts-ignore
@@ -73,7 +78,7 @@ const ChatMessageItem: FC<ChatMessageItemPropType> = ({
           });
         });
     },
-    [t]
+    [flags.dialer_number.value, t]
   );
 
   const feedbackHandler = useCallback(
@@ -100,7 +105,7 @@ const ChatMessageItem: FC<ChatMessageItemPropType> = ({
     },
     [onLikeDislike, reaction]
   );
-  
+
   const getLists = useCallback(
     ({ choices, isDisabled }: { choices: any; isDisabled: boolean }) => {
       console.log('qwer12:', { choices, isDisabled });
@@ -118,7 +123,7 @@ const ChatMessageItem: FC<ChatMessageItemPropType> = ({
                   toast.error(`${t('message.cannot_answer_again')}`);
                 } else {
                   if (context?.messages?.[0]?.exampleOptions) {
-                    console.log('clearing chat')
+                    console.log('clearing chat');
                     context?.setMessages([]);
                   }
                   context?.sendMessage(choice.text);
@@ -145,7 +150,18 @@ const ChatMessageItem: FC<ChatMessageItemPropType> = ({
       return <Typing />;
     case 'text':
       return (
-        <div style={{ display: 'flex', flexDirection: 'column' }}>
+        <div
+          style={{
+            display: 'flex',
+            flexDirection: 'column',
+            position: 'relative',
+          }}>
+          <div
+            className={
+              content?.data?.position === 'right'
+                ? styles.messageTriangleRight
+                : styles.messageTriangleLeft
+            }></div>
           <Bubble type="text">
             <span
               className="onHover"

diff --git a/apps/amakrushi/src/pages/_app.tsx b/apps/amakrushi/src/pages/_app.tsx
@@ -33,6 +33,7 @@ const App = ({
   pageProps,
   flagsmithState,
 }: AppProps & { flagsmithState: any }) => {
+  console.log("asdfg:",{flagsmithState})
   const router = useRouter();
   const { isAuthenticated, login } = useLogin();
   const [launch, setLaunch] = useState(true);
@@ -96,7 +97,9 @@ const App = ({
 
 App.getInitialProps = async () => {
   await flagsmith.init({
-    environmentID: process.env.NEXT_PUBLIC_ENVIRONMENT_ID,
+    api:process.env.NEXT_PUBLIC_FLAGSMITH_API,
+    environmentID: process.env.NEXT_PUBLIC_ENVIRONMENT_ID
+
   });
   return { flagsmithState: flagsmith.getState() };
 };

diff --git a/apps/amakrushi/src/types/chat-item/index.d.ts b/apps/amakrushi/src/types/chat-item/index.d.ts
@@ -1,4 +1,5 @@
 export type ChatItemPropsType = {
   name: string;
   conversationId: string | null;
+  deleteConversationById: any;
 };
diff --git a/turbo.json b/turbo.json
@@ -11,6 +11,7 @@
     "NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID",
     "NEXT_PUBLIC_FIREBASE_APP_ID",
     "NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID",
+    "NEXT_PUBLIC_FLAGSMITH_API",
     "ANALYZE",
     "NEXT_PUBLIC_ENVIRONMENT_ID",
     "NEXT_PUBLIC_BASE_URL",