From 2a1a77b226226c3fa71f243686eabac904ddde0e Mon Sep 17 00:00:00 2001 From: amit-s19 Date: Thu, 1 Feb 2024 11:26:28 +0530 Subject: [PATCH 1/3] UI Enhancements --- apps/amakrushi/lang/en.json | 9 +- apps/amakrushi/lang/or.json | 5 + .../components/ChatWindow/ChatUiWindow.tsx | 85 +++++++++++- .../src/components/HomePage/index.tsx | 3 +- .../chat-message-item/index.module.css | 12 +- .../components/chat-message-item/index.tsx | 130 +++++++++++------- apps/amakrushi/src/utils/location.ts | 1 - .../chat-ui/src/components/Chat/index.tsx | 2 +- .../src/components/MessageContainer/index.tsx | 4 +- 9 files changed, 183 insertions(+), 68 deletions(-) diff --git a/apps/amakrushi/lang/en.json b/apps/amakrushi/lang/en.json index aa525599..f3f585f1 100644 --- a/apps/amakrushi/lang/en.json +++ b/apps/amakrushi/lang/en.json @@ -12,6 +12,8 @@ "label.faqs":"FAQs", "label.dial":"Dial", "label.feedback":"Feedback", + "label.share": "Share", + "label.download": "Download", "label.comment":"Comment", "label.logout":"Logout", "label.more":"More", @@ -25,7 +27,9 @@ "label.confirm_delete":"Are you sure you want to delete this conversation?", "label.no_history":"No Chats", "label.call_amakrushi":"Call Ama Krushi", - "label.no_internet":"No Internet", + "label.no_internet":"No Internet", + "label.helpful": "Helpful", + "label.not_helpful": "Not Helpful", "label.refresh": "Refresh", "label.type":"Type", "label.speak":"Speak", @@ -37,10 +41,11 @@ "table.header_temp": "Temp", "table.header_humidity": "Humidity", "table.header_precip": "Precip", - "table.header_precip_prob": "Precip Prob", + "table.header_precip_prob": "Precip Prob", "table.header_windspeed": "Windspeed", "table.header_cloudcover": "Cloudcover", "table.header_conditions": "Conditions", + "message.speaker": "Click to hear", "message.no_signal":"No signal. \nPlease check your internet connection", "message.click_to_type": "Click here to type", "message.downloading": "Downloading...", diff --git a/apps/amakrushi/lang/or.json b/apps/amakrushi/lang/or.json index 39663315..ad3b29c6 100644 --- a/apps/amakrushi/lang/or.json +++ b/apps/amakrushi/lang/or.json @@ -12,6 +12,8 @@ "label.faqs":"ପ୍ରଶ୍ନଗୁଡିକ", "label.dial":"ଡାଏଲ୍ କରନ୍ତୁ", "label.feedback":"ମତାମତ", + "label.share": "ଅଂଶୀଦାର କରନ୍ତୁ", + "label.download": "ଡାଉନଲୋଡ", "label.comment":"ମନ୍ତବ୍ୟ ଦିଅନ୍ତୁ |", "label.logout":"ପ୍ରସ୍ଥାନ କର", "label.more":"ଅଧିକ", @@ -28,6 +30,8 @@ "label.no_internet":"ନା ଇଣ୍ଟରନେଟ୍ ", "label.refresh": "ରିଫ୍ରେସ୍ କରନ୍ତୁ", "label.type":"ଟାଇପ୍", + "label.helpful": "ସହାୟକ", + "label.not_helpful": "ଅସହାୟକ", "label.speak":"କଥା ହୁଅନ୍ତୁ", "label.tap_to_speak": "କହିବାକୁ ଟ୍ୟାପ୍ କରନ୍ତୁ", "label.manual":"ବ୍ୟବହାରକାରୀ ମାନୁଆଲ - VAWs ପାଇଁ", @@ -41,6 +45,7 @@ "table.header_windspeed": "ପବନର ବେଗ", "table.header_cloudcover": "ମେଘ ଆବରଣ", "table.header_conditions": "ସର୍ତ୍ତ", + "message.speaker": "ଶୁଣିବାକୁ କ୍ଲିକ୍ କରନ୍ତୁ", "message.no_signal":"ସିଗ୍ନାଲ ନାହିଁ। \nଦୟାକରି ଆପଣଙ୍କ ଇଣ୍ଟରନେଟ ସଂଯୋଗ କୁ ଚେକ୍ କରନ୍ତ", "message.click_to_type": "ଟାଇପ୍ କରିବାକୁ ଏଠାରେ କ୍ଲିକ୍ କରନ୍ତୁ", "message.downloading": "ଡାଉନଲୋଡ୍ ହେଉଛି ....", diff --git a/apps/amakrushi/src/components/ChatWindow/ChatUiWindow.tsx b/apps/amakrushi/src/components/ChatWindow/ChatUiWindow.tsx index aaf50ed4..4fc7f309 100644 --- a/apps/amakrushi/src/components/ChatWindow/ChatUiWindow.tsx +++ b/apps/amakrushi/src/components/ChatWindow/ChatUiWindow.tsx @@ -22,13 +22,15 @@ import DownTimePage from '../down-time-page'; import shareIcon from '../../assets/icons/share.svg'; import downloadIcon from '../../assets/icons/download.svg'; import Image from 'next/image'; +import Loader from '../loader'; import Draggable from 'react-draggable' import { recordUserLocation } from '../../utils/location'; const ChatUiWindow: React.FC = () => { const t = useLocalization(); const context = useContext(AppContext); - + const [shareLoader, setShareLoader] = useState(false); + const [downloadLoader, setDownloadLoader] = useState(false); useEffect(() => { const fetchData = async () => { try { @@ -154,7 +156,9 @@ const ChatUiWindow: React.FC = () => { }/user/chathistory/generate-pdf/${sessionStorage.getItem( 'conversationId' )}`; - + if (type === 'download') { + setDownloadLoader(true); + } else setShareLoader(true); const response = await axios.post(url, null, { headers: { authorization: `Bearer ${localStorage.getItem('auth')}`, @@ -168,6 +172,7 @@ const ChatUiWindow: React.FC = () => { } if (type === 'download') { + setDownloadLoader(false); //@ts-ignore logEvent(analytics, 'download_chat_clicked'); toast.success(`${t('message.downloading')}`); @@ -179,8 +184,11 @@ const ChatUiWindow: React.FC = () => { link.download = 'Chat.pdf'; link.click(); + setDownloadLoader(false); + context?.downloadChat(pdfUrl); } else if (type === 'share') { + setShareLoader(false); const response = await axios.get(pdfUrl, { responseType: 'arraybuffer', }); @@ -189,6 +197,7 @@ const ChatUiWindow: React.FC = () => { //@ts-ignore logEvent(analytics, 'share_chat_clicked'); + setShareLoader(false); if (!navigator.canShare) { //@ts-ignore @@ -217,13 +226,16 @@ const ChatUiWindow: React.FC = () => { } } else { console.log(response.data); + setDownloadLoader(false); + setShareLoader(false); } } catch (error: any) { //@ts-ignore logEvent(analytics, 'console_error', { error_message: error.message, }); - + setDownloadLoader(false); + setShareLoader(false); if ( error.message === "Cannot read properties of undefined (reading 'shareUrl')" @@ -272,8 +284,69 @@ const ChatUiWindow: React.FC = () => { borderRadius: '5px 0 0 5px', boxShadow: 'rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px' }}> -
downloadShareHandler('share')}> +
downloadShareHandler('share')} style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}> {/* Share */} + {shareLoader ? ( +
+ +
+ ) : ( +
+ {' '} +
+ )} +

+ {t('label.share')} +

+
+
+
downloadShareHandler('download')} style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}> + {/* Download */} + {downloadLoader ? ( +
+ +
+ ) : ( +
+ +
+ )} +

+ {t('label.download')} +

+
+ {/*
downloadShareHandler('share')}> +
{ margin: '5px 0', }}>
downloadShareHandler('download')}> - {/* Download */} + -
+
*/} diff --git a/apps/amakrushi/src/components/HomePage/index.tsx b/apps/amakrushi/src/components/HomePage/index.tsx index 919f39ef..bce50701 100644 --- a/apps/amakrushi/src/components/HomePage/index.tsx +++ b/apps/amakrushi/src/components/HomePage/index.tsx @@ -229,7 +229,7 @@ const HomePage: NextPage = () => { // Store the cursor position const cursorPosition = e.target.selectionStart; setCursorPosition(cursorPosition); - setShowExampleMessages(inputValue.length === 0); + // setShowExampleMessages(inputValue.length === 0); // Adjust textarea height dynamically based on content if (inputRef.current) { //@ts-ignore @@ -412,7 +412,6 @@ const HomePage: NextPage = () => { value={inputMsg} onChange={handleInputChange} placeholder={placeholder} - onClick={() => setShowExampleMessages(true)} />