buttons coming under weather table

AmakrushAI · Feb 27, 2024 · 0fd4879 · 0fd4879
1 parent e838475
commit 0fd4879
Show file tree

Hide file tree

Showing 4 changed files with 54 additions and 22 deletions.
diff --git a/apps/amakrushi/src/components/ChatWindow/ChatUiWindow.tsx b/apps/amakrushi/src/components/ChatWindow/ChatUiWindow.tsx
@@ -100,6 +100,7 @@ const ChatUiWindow: React.FC = () => {
             messageId: item.id,
             audio_url: item.audioURL,
             isEnd: true,
+            optionClicked: true
           },
         ].filter(Boolean)
       );

diff --git a/apps/amakrushi/src/components/chat-message-item/index.module.css b/apps/amakrushi/src/components/chat-message-item/index.module.css
@@ -66,6 +66,7 @@
 }
 
 .list {
+  margin-top: 15px;
   background: none !important;
 }
 
@@ -81,20 +82,21 @@
 }
 
 .optionsText {
-  font-size: 1.5rem;
-  color: var(--secondarygreen);
   font-weight: bold;
-  margin: auto;
+  /* color: var(--secondarygreen); */
+  background-color: white;
+  height: fit-content !important;
 }
 
 .listItem {
   border: 2px solid var(--lightgrey) !important;
   border-radius: 0px 25px;
-  margin-bottom: 25px;
+  margin-bottom: 10px;
   background-color: white;
-  height: 10vh;
-  width: 85vw;
+  height: fit-content;
+  width: 100%;
   box-shadow: 0px 4px 10px 5px rgba(0, 0, 0, 0.25);
+  padding: 0 10px !important;
 }
 
 .offlineBtns {

diff --git a/apps/amakrushi/src/components/chat-message-item/index.tsx b/apps/amakrushi/src/components/chat-message-item/index.tsx
@@ -132,34 +132,36 @@ const ChatMessageItem: FC<ChatMessageItemPropType> = ({
     },
     [onLikeDislike, reaction]
   );
-
+const [optionDisabled, setOptionDisabled] = useState(message?.content?.data?.optionClicked || false);
   const getLists = useCallback(
-    ({ choices, isDisabled }: { choices: any; isDisabled: boolean }) => {
-      console.log('qwer12:', { choices, isDisabled });
+    ({ choices }: { choices: any }) => {
+      console.log('qwer12:', { choices, optionDisabled });
       return (
         <List className={`${styles.list}`}>
           {choices?.map((choice: any, index: string) => (
             // {_.map(choices ?? [], (choice, index) => (
             <ListItem
               key={`${index}_${choice?.key}`}
               className={`${styles.onHover} ${styles.listItem}`}
+              style={optionDisabled ? {background: 'var(--grey)'} : null}
               onClick={(e: any): void => {
                 e.preventDefault();
-                console.log('qwer12 trig', { key: choice.key, isDisabled });
-                if (isDisabled) {
+                if (optionDisabled) {
                   toast.error(`${t('message.cannot_answer_again')}`);
                 } else {
                   if (context?.messages?.[0]?.exampleOptions) {
                     console.log('clearing chat');
                     context?.setMessages([]);
                   }
-                  context?.sendMessage(choice.text);
+                  context?.sendMessage(choice);
+                  setOptionDisabled(true);
                 }
               }}>
-              <div className="onHover" style={{ display: 'flex' }}>
-                <div>{choice.text}</div>
+              <div className="onHover" style={{ display: 'flex', alignItems: 'center', color:
+                  content?.data?.position === 'right' ? 'white' : 'var(--font)' }}>
+                <div>{choice}</div>
                 <div style={{ marginLeft: 'auto' }}>
-                  <RightIcon width="45px" color="var(--secondarygreen)" />
+                  <RightIcon width="40px" color="var(--font)" />
                 </div>
               </div>
             </ListItem>
@@ -183,7 +185,7 @@ const ChatMessageItem: FC<ChatMessageItemPropType> = ({
   };
 
   const { content, type } = message;
-  // console.log('#-debug:', content);
+  console.log('#-debug:', content);
 
   const handleAudio = useCallback(
     (url: any) => {
@@ -596,8 +598,7 @@ const ChatMessageItem: FC<ChatMessageItemPropType> = ({
             </div>
             {getLists({
               choices:
-                content?.data?.payload?.buttonChoices ?? content?.data?.choices,
-              isDisabled: false,
+                content?.data?.payload?.buttonChoices ?? content?.data?.choices
             })}
           </Bubble>
         </>
@@ -606,7 +607,20 @@ const ChatMessageItem: FC<ChatMessageItemPropType> = ({
 
     case 'table': {
       return (
-        <>
+        <div
+          style={{
+            display: 'flex',
+            flexDirection: 'column',
+            position: 'relative',
+            maxWidth: '90vw',
+          }}>
+          <div
+            className={
+              content?.data?.position === 'right'
+                ? styles.messageTriangleRight
+                : styles.messageTriangleLeft
+            }></div>
+        <Bubble type="text"> 
           <div className={styles.tableContainer}>
             <div className={styles.tableHeader}>
               <div>
@@ -623,7 +637,7 @@ const ChatMessageItem: FC<ChatMessageItemPropType> = ({
               <div>{t('table.header_conditions')}</div>
             </div>
             <div className={styles.tableData}>
-              {JSON.parse(content?.text)?.map((el: any, idx: any) => (
+              {JSON.parse(content?.text)?.weatherData?.map((el: any, idx: any) => (
                 <div key={el.datetime + idx} className={styles.tableDataCol}>
                   <div>
                     <b> {getFormattedDate(el.datetime)}</b>
@@ -641,7 +655,22 @@ const ChatMessageItem: FC<ChatMessageItemPropType> = ({
               ))}
             </div>
           </div>
-        </>
+          <span
+              className="onHover"
+              style={{
+                fontWeight: 600,
+                fontSize: '1rem',
+                color:
+                  content?.data?.position === 'right' ? 'white' : 'var(--font)',
+              }}>
+              {`\n` + JSON.parse(content?.text)?.generalAdvice}{' '}
+              {getLists({
+              choices: JSON.parse(content?.text)?.crops
+            })}
+            </span>
+
+        </Bubble>
+        </div>
       );
     }
     default:

diff --git a/apps/amakrushi/src/utils/getMsgType.ts b/apps/amakrushi/src/utils/getMsgType.ts
@@ -1,6 +1,6 @@
 export const getMsgType = (msg: any): string => {
 	if (isJsonString(msg?.text)) {
-		if (Array.isArray(JSON.parse(msg?.text))) return 'table';
+		if (Array.isArray(JSON.parse(msg?.text)?.weatherData)) return 'table';
 	}
 	if (msg?.payload?.buttonChoices?.length || msg?.choices?.length) return 'options';
 	if (msg?.imageUrl) return 'image';