Skip to content

Commit

Permalink
UI Enhancements (#219)
Browse files Browse the repository at this point in the history 
* UI Enhancements

* Small margin fix for svg
  • Loading branch information
@amit-s19
amit-s19 authored Feb 1, 2024
1 parent 3e6885a commit 8a2a522
Show file tree
Hide file tree
Showing 9 changed files with 184 additions and 68 deletions.
9 changes: 7 additions & 2 deletions apps/amakrushi/lang/en.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand All @@ -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",
Expand All @@ -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...",
Expand Down
5 changes: 5 additions & 0 deletions apps/amakrushi/lang/or.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,8 @@
"label.faqs":"ପ୍ରଶ୍ନଗୁଡିକ",
"label.dial":"ଡାଏଲ୍ କରନ୍ତୁ",
"label.feedback":"ମତାମତ",
"label.share": "ଅଂଶୀଦାର କରନ୍ତୁ",
"label.download": "ଡାଉନଲୋଡ",
"label.comment":"ମନ୍ତବ୍ୟ ଦିଅନ୍ତୁ |",
"label.logout":"ପ୍ରସ୍ଥାନ କର",
"label.more":"ଅଧିକ",
Expand All @@ -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 ପାଇଁ",
Expand All @@ -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": "ଡାଉନଲୋଡ୍ ହେଉଛି ....",
Expand Down
85 changes: 79 additions & 6 deletions apps/amakrushi/src/components/ChatWindow/ChatUiWindow.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down Expand Up @@ -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')}`,
Expand All @@ -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')}`);
Expand All @@ -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',
});
Expand All @@ -189,6 +197,7 @@ const ChatUiWindow: React.FC = () => {

//@ts-ignore
logEvent(analytics, 'share_chat_clicked');
setShareLoader(false);

if (!navigator.canShare) {
//@ts-ignore
Expand Down Expand Up @@ -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')"
Expand Down Expand Up @@ -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'
}}>
<div onClick={() => downloadShareHandler('share')}>
<div onClick={() => downloadShareHandler('share')} style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
{/* Share */}
{shareLoader ? (
<div
style={{
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
width: '24px',
height: '24px',
}}>
<Loader />
</div>
) : (
<div
style={{
display: 'flex',
flexDirection: 'column',
justifyContent: 'center',
alignItems: 'center',
}}>
<Image src={shareIcon} alt="" width={22} height={22} />{' '}
</div>
)}
<p style={{ fontSize: '10px', margin: 0, color: 'var(--font)', fontFamily: 'Mulish-bold' }}>
{t('label.share')}
</p>
</div>
<div
style={{
borderBottom: '1px solid var(--font)',
margin: '5px 0',
}}></div>
<div onClick={() => downloadShareHandler('download')} style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
{/* Download */}
{downloadLoader ? (
<div
style={{
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
width: '24px',
height: '24px',
}}>
<Loader />
</div>
) : (
<div
style={{
display: 'flex',
flexDirection: 'column',
justifyContent: 'center',
alignItems: 'center',
}}>
<Image src={downloadIcon} alt="" width={24} height={24} />
</div>
)}
<p style={{ fontSize: '10px', margin: 0, color: 'var(--font)', fontFamily: 'Mulish-bold' }}>
{t('label.download')}
</p>
</div>
{/* <div onClick={() => downloadShareHandler('share')}>
<Image src={shareIcon} alt="" width={24} height={24} />
</div>
<div
Expand All @@ -282,9 +355,9 @@ const ChatUiWindow: React.FC = () => {
margin: '5px 0',
}}></div>
<div onClick={() => downloadShareHandler('download')}>
{/* Download */}
<Image src={downloadIcon} alt="" width={24} height={24} />
</div>
</div> */}
</div>
</Draggable>
</div>
Expand Down
3 changes: 1 addition & 2 deletions apps/amakrushi/src/components/HomePage/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -412,7 +412,6 @@ const HomePage: NextPage = () => {
value={inputMsg}
onChange={handleInputChange}
placeholder={placeholder}
onClick={() => setShowExampleMessages(true)}
/>
<button
type="submit"
Expand Down
12 changes: 7 additions & 5 deletions apps/amakrushi/src/components/chat-message-item/index.module.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,15 +41,15 @@
display: flex;
align-items: flex-end;
width: fit-content;
margin-right: 3rem;
}

.msgFeedbackIcons {
display: flex;
align-items: center;
justify-content: space-evenly;
background-color: white;
height: 26px;
width: 60px;
width: 130px;
border: 1px solid var(--secondarygreen);
border-radius: 30px;
box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
Expand Down Expand Up @@ -113,15 +113,17 @@
.msgSpeaker {
display: flex;
align-items: center;
flex-direction: column;
justify-content: space-evenly;
background-color: white;
height: 26px;
width: 40px;
/* height: 26px;
width: 40px; */
padding: 0 5px;
border: 1px solid var(--secondarygreen);
border-radius: 30px;
box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
margin-left: auto;
margin-right: 3rem;
/* margin-right: 3rem; */
}

.tableContainer {
Expand Down
Loading

0 comments on commit 8a2a522

Please sign in to comment.