Skip to content

Update the UIs #33

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
ImashaNawodi merged 4 commits into from
Aug 18, 2025
Merged

Update the UIs #33

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
166a039
link the register and login pages to home page
SupuniJayasinghe Aug 18, 2025
25c328f
new voice chat interface
SupuniJayasinghe Aug 18, 2025
b9922ae
startchat button logic in home page
SupuniJayasinghe Aug 18, 2025
289e1b2
change the face recognition UI
SupuniJayasinghe Aug 18, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion blissme-app/src/app/chatBox/VoiceChat.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import bg from "../../assets/images/chatbg.png"
import { useNavigate } from "react-router-dom";
import logo from "../../assets/images/logo.png";
import { getLocalStoragedata } from "../../helpers/Storage";
import VoiceChatInterface from "../../components/chat/VoiceChatInterface";

const VoiceChat = () => {
const navigate = useNavigate();
Expand Down Expand Up @@ -34,7 +35,7 @@ const VoiceChat = () => {
</div>

{/* Chat Interface fills remaining space */}
<ChatInterface />
<VoiceChatInterface />
</div>
);
};
Expand Down
19 changes: 15 additions & 4 deletions blissme-app/src/app/signIn/Login.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,8 @@ import { getUserPreferences } from "../../redux/actions/userActions";
import { useDispatch } from "react-redux";
import { AppDispatch } from "../../redux/store";
import { assets } from "../../assets/assets";
import logo from "../../assets/images/logo.png";

const { Text } = Typography;

const Login = () => {
Expand All @@ -24,6 +26,7 @@ const Login = () => {
const { setToken } = useContext(AuthContext);
const { openNotification } = useNotification();
const dispatch = useDispatch<AppDispatch>();
const handleLogoClick = () => navigate('/home');

const onFinish = async (values: any) => {
try {
Expand Down Expand Up @@ -77,8 +80,16 @@ const Login = () => {
className="relative z-0 min-h-screen w-full overflow-hidden bg-cover bg-center"
style={{ backgroundImage: `url(${bg7})` }}
>
<div className="min-h-screen w-full flex items-center justify-center relative z-10">
<div className="flex flex-col items-center gap-2 w-full md:w-1/2 max-w-[500px] py-8 bg-white rounded-xl shadow-lg">
<div className="fixed top-4 left-4 z-20">
<img
onClick={handleLogoClick}
src={logo}
alt="Logo"
className="h-10 w-auto cursor-pointer"
/>
</div>
<div className="fixed inset-0 z-10 flex items-center justify-center">
<div className="flex flex-col items-center gap-2 w-full md:w-1/2 max-w-[500px] py-1 bg-white rounded-xl shadow-lg">
{/* Message Bubble on top */}
<MessageBubble />

Expand Down Expand Up @@ -151,7 +162,7 @@ const Login = () => {
/>
</Form.Item>

<div className="flex justify-between items-center mb-8">
<div className="flex justify-between items-center mb-4">
<Form.Item name="rememberme" valuePropName="checked" noStyle>
<Checkbox>Remember me</Checkbox>
</Form.Item>
Expand Down Expand Up @@ -213,7 +224,7 @@ const Login = () => {
</div>
</Form.Item>

<Text className="block text-center text-sm md:text-base text-textColorOne">
<Text className="block text-center text-sm md:text-base text-textColorOne mb-2">
Don’t have an account?{" "}
<span
className="text-textColorTwo cursor-pointer"
Expand Down
222 changes: 118 additions & 104 deletions blissme-app/src/app/signUp/Register.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@ import "../../index.css";
import MessageBubble from "../../components/Background/MessageBubble";
import bg6 from "../../assets/images/b6.jpeg";
import { useNotification } from "../context/notificationContext";
import logo from "../../assets/images/logo.png";

const { Text } = Typography;

Expand All @@ -40,6 +41,9 @@ const Register = () => {
}
};

const handleLogoClick = () => navigate('/home');


interface RegisterFormValues {
email: string;
password: string;
Expand Down Expand Up @@ -107,7 +111,17 @@ const Register = () => {
className="relative z-0 min-h-screen w-full overflow-hidden bg-cover bg-center"
style={{ backgroundImage: `url(${bg6})` }}
>
<div className="min-h-screen w-full flex items-center justify-center relative z-10">
<div className="fixed top-4 left-4 z-20">
<img
onClick={handleLogoClick}
src={logo}
alt="Logo"
className="h-10 w-auto cursor-pointer"
/>
</div>


<div className="fixed inset-0 z-10 flex items-center justify-center">
<div className="flex flex-col items-center gap-2 w-full md:w-1/2 max-w-[500px] py-8 bg-white rounded-xl shadow-lg">
<MessageBubble />

Expand Down Expand Up @@ -255,112 +269,112 @@ const Register = () => {

{/* Terms Modal */}
<Modal
title="Terms & Conditions and Privacy Policy"
visible={modalVisible}
onCancel={() => setModalVisible(false)}
onOk={() => setModalVisible(false)}
okButtonProps={{ disabled: !scrolledToBottom }}
bodyStyle={{ padding: 0 }} // remove default padding
>
<div
ref={contentRef}
onScroll={handleScroll}
className="
title="Terms & Conditions and Privacy Policy"
visible={modalVisible}
onCancel={() => setModalVisible(false)}
onOk={() => setModalVisible(false)}
okButtonProps={{ disabled: !scrolledToBottom }}
bodyStyle={{ padding: 0 }} // remove default padding
>
<div
ref={contentRef}
onScroll={handleScroll}
className="
max-h-[360px] overflow-y-auto px-8 py-6 border-t-4 border-[#3FBFA8]
bg-gray-50 font-roboto text-sm leading-relaxed text-gray-800 select-text
"
>
<h2 className="text-[#2CA58D] mb-4 font-extrabold text-xl">
Consent and Privacy Policy
</h2>
<p className="mb-5">
Welcome to <strong>Bliss Me</strong>. Please read this carefully before using our services. By clicking “I Agree”, you consent to the following:
</p>
<ol className="list-decimal list-inside mb-5 space-y-5">
<li>
<strong className="text-[#207F6A] text-lg font-semibold">
Purpose of the Application
</strong>
<p>Bliss Me uses Artificial Intelligence to detect depression severity through your text and voice inputs.</p>
<ul className="list-disc list-inside ml-5 space-y-1 mt-2">
<li>For mild to moderate depression, the app provides non-clinical therapeutic support such as Cognitive Behavioral Therapy (CBT)-based exercises and mindfulness techniques.</li>
<li>For severe depression, the app will not provide therapy. Instead, you will be given options to contact a mental health consultant or emergency services for professional assistance.</li>
</ul>
</li>

<li>
<strong className="text-[#207F6A] text-lg font-semibold">
Information We Collect
</strong>
<p>To assess your emotional state and depression level, we collect:</p>
<ul className="list-disc list-inside ml-5 space-y-1 mt-2">
<li>Text and voice inputs</li>
<li>Responses to the Patient Health Questionnaire-9 (PHQ-9)</li>
<li>Your interaction history within the app</li>
</ul>
</li>

<li>
<strong className="text-[#207F6A] text-lg font-semibold">
How We Use Your Data
</strong>
<ul className="list-disc list-inside ml-5 space-y-1 mt-2">
<li>To detect depression levels and provide personalized support (for mild to moderate cases)</li>
<li>To recommend professional consultation in severe cases</li>
<li>To improve our AI model using anonymized data only</li>
</ul>
</li>

<li>
<strong className="text-[#207F6A] text-lg font-semibold">
Data Privacy and Security
</strong>
<ul className="list-disc list-inside ml-5 space-y-1 mt-2">
<li>Your identity and personal information will never be shared with third parties.</li>
<li>All interaction data is securely stored and encrypted.</li>
<li>We comply with data protection laws to keep your information safe.</li>
</ul>
</li>

<li>
<strong className="text-[#207F6A] text-lg font-semibold">
Emergency and Severe Case Protocol
</strong>
<p>If a severe depression level or self-harm risk is detected:</p>
<ul className="list-disc list-inside ml-5 space-y-1 mt-2">
<li>The app will not attempt therapy</li>
<li>You will be given immediate options to contact a licensed consultant or emergency helpline for professional help</li>
</ul>
</li>

<li>
<strong className="text-[#207F6A] text-lg font-semibold">
Your Rights
</strong>
<ul className="list-disc list-inside ml-5 space-y-1 mt-2">
<li>You may request deletion of your data at any time</li>
<li>You may withdraw consent and stop using the app anytime</li>
<li>You may review how your data is processed and stored</li>
</ul>
</li>

<li>
<strong className="text-[#207F6A] text-lg font-semibold">
Consent
</strong>
<p>By clicking “I Agree”, you confirm that:</p>
<ul className="list-disc list-inside ml-5 space-y-1 mt-2">
<li>You understand Bliss Me provides non-clinical support only</li>
<li>You voluntarily provide your data for depression detection and guidance</li>
<li>You are at least 18 years old or using the app with parental/guardian consent</li>
</ul>
</li>
</ol>
<p className="italic text-gray-600 text-center mt-3">
Scroll to the bottom to enable acceptance.
</p>
</div>
</Modal>
>
<h2 className="text-[#2CA58D] mb-4 font-extrabold text-xl">
Consent and Privacy Policy
</h2>
<p className="mb-5">
Welcome to <strong>Bliss Me</strong>. Please read this carefully before using our services. By clicking “I Agree”, you consent to the following:
</p>
<ol className="list-decimal list-inside mb-5 space-y-5">
<li>
<strong className="text-[#207F6A] text-lg font-semibold">
Purpose of the Application
</strong>
<p>Bliss Me uses Artificial Intelligence to detect depression severity through your text and voice inputs.</p>
<ul className="list-disc list-inside ml-5 space-y-1 mt-2">
<li>For mild to moderate depression, the app provides non-clinical therapeutic support such as Cognitive Behavioral Therapy (CBT)-based exercises and mindfulness techniques.</li>
<li>For severe depression, the app will not provide therapy. Instead, you will be given options to contact a mental health consultant or emergency services for professional assistance.</li>
</ul>
</li>

<li>
<strong className="text-[#207F6A] text-lg font-semibold">
Information We Collect
</strong>
<p>To assess your emotional state and depression level, we collect:</p>
<ul className="list-disc list-inside ml-5 space-y-1 mt-2">
<li>Text and voice inputs</li>
<li>Responses to the Patient Health Questionnaire-9 (PHQ-9)</li>
<li>Your interaction history within the app</li>
</ul>
</li>

<li>
<strong className="text-[#207F6A] text-lg font-semibold">
How We Use Your Data
</strong>
<ul className="list-disc list-inside ml-5 space-y-1 mt-2">
<li>To detect depression levels and provide personalized support (for mild to moderate cases)</li>
<li>To recommend professional consultation in severe cases</li>
<li>To improve our AI model using anonymized data only</li>
</ul>
</li>

<li>
<strong className="text-[#207F6A] text-lg font-semibold">
Data Privacy and Security
</strong>
<ul className="list-disc list-inside ml-5 space-y-1 mt-2">
<li>Your identity and personal information will never be shared with third parties.</li>
<li>All interaction data is securely stored and encrypted.</li>
<li>We comply with data protection laws to keep your information safe.</li>
</ul>
</li>

<li>
<strong className="text-[#207F6A] text-lg font-semibold">
Emergency and Severe Case Protocol
</strong>
<p>If a severe depression level or self-harm risk is detected:</p>
<ul className="list-disc list-inside ml-5 space-y-1 mt-2">
<li>The app will not attempt therapy</li>
<li>You will be given immediate options to contact a licensed consultant or emergency helpline for professional help</li>
</ul>
</li>

<li>
<strong className="text-[#207F6A] text-lg font-semibold">
Your Rights
</strong>
<ul className="list-disc list-inside ml-5 space-y-1 mt-2">
<li>You may request deletion of your data at any time</li>
<li>You may withdraw consent and stop using the app anytime</li>
<li>You may review how your data is processed and stored</li>
</ul>
</li>

<li>
<strong className="text-[#207F6A] text-lg font-semibold">
Consent
</strong>
<p>By clicking “I Agree”, you confirm that:</p>
<ul className="list-disc list-inside ml-5 space-y-1 mt-2">
<li>You understand Bliss Me provides non-clinical support only</li>
<li>You voluntarily provide your data for depression detection and guidance</li>
<li>You are at least 18 years old or using the app with parental/guardian consent</li>
</ul>
</li>
</ol>
<p className="italic text-gray-600 text-center mt-3">
Scroll to the bottom to enable acceptance.
</p>
</div>
</Modal>

</div>
);
Expand Down
30 changes: 27 additions & 3 deletions blissme-app/src/app/start/Home.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import home2 from '../../assets/images/home2.png';
import home3 from '../../assets/images/home3.png';
import logo from '../../assets/images/logo.png';
import { useNavigate } from 'react-router-dom';
import { getLocalStoragedata } from '../../helpers/Storage';

const images = [home, home2, home3];

Expand All @@ -22,6 +23,21 @@ const Home = () => {
const handleLogin = () => navigate('/sign-in');
const handleLogoClick = () => navigate('/home');

const storedUser = JSON.parse(getLocalStoragedata("reduxState") || "{}");
const selectedMode = storedUser?.user?.inputMode;
console.log(selectedMode);

const handleStartChat = () => {
if (selectedMode === 'Text') {
navigate('/chat-new/text');
} else if (selectedMode === 'Voice') {
navigate('/chat-new/voice');
} else {
navigate('/sign-in');
}
};


return (
<div className="relative min-h-screen overflow-hidden">
{/* Hero Section */}
Expand All @@ -37,9 +53,13 @@ const Home = () => {
</p>

<div className='flex flex-row justify-start gap-4 mt-6'>
<button className="bg-green-600 text-white px-4 py-2 rounded-lg hover:bg-green-700 transition">
<button
onClick={handleStartChat}
className="bg-green-600 text-white px-4 py-2 rounded-lg hover:bg-green-700 transition"
>
Start Chat
</button>

<button onClick={handleLogin}
className="border border-green-600 text-green-700 px-4 py-2 rounded-lg hover:bg-green-100 transition bg-white">
Sign In
Expand Down Expand Up @@ -96,7 +116,7 @@ const Home = () => {

<div className="hidden md:flex space-x-6">
<a href="#about" className="text-gray-700 hover:text-green-700 font-medium">
{/*About */}
{/*About */}
</a>
</div>

Expand All @@ -113,9 +133,13 @@ const Home = () => {
>
Sign Up
</button>
<button className="bg-green-600 text-white px-4 py-2 rounded-lg hover:bg-green-700 transition">
<button
onClick={handleStartChat}
className="bg-green-600 text-white px-4 py-2 rounded-lg hover:bg-green-700 transition"
>
Start Chat
</button>

</div>
</nav>
</div>
Expand Down
Loading
Loading