Skip to content

Commit dbc4fec

Browse files
SameerIssaSameerIssa
authored
Merge pull request #85 from UNLV-CS472-672/chat
2nd PR: basic responsive chatbox UI
2 parents 4c7ae9b + 3c6217d commit dbc4fec

File tree

6 files changed

+308
-317
lines changed

6 files changed

+308
-317
lines changed

‎frontend/src/App.jsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ import Support from "./Components/Support.jsx";
1414
import FindTutor from "./Components/FindTutor.jsx";
1515
import Pomodoro from "./Components/Podomoro.jsx";
1616
import Schedule from "./Components/Schedule.jsx";
17+
import Chat from "./Components/Chat.jsx";
1718
import Footer from "./Components/Footer.jsx";
1819
import Booking from "./Components/Booking.jsx";
1920

@@ -42,7 +43,7 @@ function App() {
4243
<Route path="/schedule" element={<Schedule />} />
4344
<Route path="/pomodoro" element={<Pomodoro />} />
4445
<Route path="/booking" element={<Booking />} />
45-
46+
<Route path="/chat" element={<Chat />} />
4647
</Routes>
4748
{(location.pathname !== "/login" && location.pathname !== "/dateofbirth" && location.pathname !== "/SignUp") && <Footer />}
4849
</div>

‎frontend/src/Components/Chat.jsx‎

Lines changed: 94 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,94 @@
1+
import {useState} from "react";
2+
import "../Styles/Chat.css";
3+
import userIcon from "/assets/images/UNLV_pic.png"; // Placeholder user icon
4+
import botIcon from "/assets/images/UNLV_pic.png"; // Placeholder bot icon
5+
6+
const Chat = () => {
7+
const [messages, setMessages] = useState([]);
8+
const [input, setInput] = useState("");
9+
const [buttonClicked, setButtonClicked] = useState("");
10+
11+
const sendMessage = () => {
12+
if (input.trim() === "") return; // Prevent sending empty messages
13+
14+
const newMessages = [...messages, { text: input, sender: "user" }];
15+
setMessages(newMessages);
16+
setInput(""); // Clear input after sending
17+
18+
// Simulate a bot response after a short delay
19+
// Should be coming from other side, future fix
20+
setTimeout(() => {
21+
setMessages([...newMessages, { text: "This is an automated response." , sender: "bot" }]);
22+
}, 250);
23+
};
24+
// Allows to press Enter key to send message
25+
const handleKeyPress = (e) => {
26+
if (e.key === "Enter") {
27+
e.preventDefault(); // Prevents new line in input
28+
sendMessage();
29+
}
30+
};
31+
const handleButtonClick = (buttonType) => {
32+
setButtonClicked(buttonType);
33+
console.log(`Button clicked: ${buttonType}`);
34+
// You can add more functionality here if needed
35+
};
36+
37+
return (
38+
<>
39+
<div className="chat-page-layout">
40+
<div className="chat-layout">
41+
{/* Side Panel */}
42+
<div className="side-panel">
43+
<h2>Menu</h2>
44+
<ul>
45+
<li><a href="/">Home</a></li>
46+
<li><a href="/profile">Profile</a></li>
47+
<li><a href="/settings">Settings</a></li>
48+
<li><a href="/Whiteboard">Whiteboard</a></li>
49+
</ul>
50+
</div>
51+
52+
{/* Chat Section */}
53+
<div className="chat-container">
54+
<div className="button-bar">
55+
<button onClick={() => handleButtonClick("Help")}>Button 1</button>
56+
<button onClick={() => handleButtonClick("Help")}>Button 2</button>
57+
<button onClick={() => handleButtonClick("Help")}>Button 3</button>
58+
<button onClick={() => handleButtonClick("Help")}>Button 4</button>
59+
</div>
60+
<div className="chat-box">
61+
<div className="chat-header">
62+
<img src={botIcon} alt="Bot Icon" className="user-icon" />
63+
<span className="user-name">Tutor</span>
64+
</div>
65+
<div className="chat-messages">
66+
{messages.map((msg, index) => (
67+
<div key={index} className={`message-container ${msg.sender === "bot" ? "bot-message" : "user-message"}`}>
68+
{msg.sender === "bot" && <img src={botIcon} alt="Bot Icon" className="message-icon" />}
69+
<div className={`chat-bubble ${msg.sender === "bot" ? "bot-bubble" : "user-bubble"}`}>
70+
{msg.text}
71+
</div>
72+
{msg.sender === "user" && <img src={userIcon} alt="User Icon" className="message-icon" />}
73+
</div>
74+
))}
75+
</div>
76+
<div className="chat-input">
77+
<input
78+
type="text"
79+
className="input-field"
80+
placeholder="Type a message..."
81+
value={input}
82+
onChange={(e) => setInput(e.target.value)}
83+
onKeyDown={handleKeyPress}
84+
/>
85+
<button className="send-button" onClick={sendMessage}>Send</button>
86+
</div>
87+
</div>
88+
</div>
89+
</div>
90+
</div>
91+
</>
92+
);
93+
}
94+
export default Chat;

‎frontend/src/Components/Services.jsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -56,6 +56,8 @@ export default function Services() {
5656
<h5 className="card-title">Pomodoro</h5>
5757
<ul className="list-unstyled">
5858
<li><a href="#link">Pomodoro Timer</a></li>
59+
<p>Temporary links Below</p>
60+
<li><a href="/chat">Chat UI</a></li>
5961
</ul>
6062
</div>
6163
</div>

‎frontend/src/Styles/Chat.css‎

Lines changed: 209 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,209 @@
1+
/* Main container layout */
2+
.chat-page-layout .chat-layout {
3+
display: flex;
4+
height: 95vh;
5+
padding-top: 75px;
6+
background-color: #f5f5f5;
7+
justify-content: center;
8+
align-items: center;
9+
position: relative;
10+
}
11+
/* Side Panel */
12+
.chat-page-layout .side-panel {
13+
width: 175px;
14+
background-color: #212529;
15+
color: white;
16+
padding: 20px;
17+
position: absolute;
18+
right: 0;
19+
top: 50px;
20+
bottom: 0;
21+
overflow-y: auto;
22+
box-shadow: -2px 0 5px rgba(0, 0, 0, 0.2);
23+
display: flex;
24+
flex-direction: column;
25+
}
26+
@media (max-width: 1560px) {
27+
.chat-page-layout .side-panel {
28+
display: none;
29+
}
30+
}
31+
.chat-page-layout .side-panel h2 {
32+
font-size: 18px;
33+
margin-bottom: 15px;
34+
text-align: center;
35+
padding-top: 30px;
36+
}
37+
.chat-page-layout .side-panel ul {
38+
list-style: none;
39+
padding: 0;
40+
}
41+
.chat-page-layout .side-panel li {
42+
margin: 10px 0;
43+
text-align: center;
44+
}
45+
.chat-page-layout .side-panel a {
46+
color: white;
47+
text-decoration: none;
48+
font-size: 16px;
49+
display: block;
50+
padding: 10px;
51+
border-radius: 5px;
52+
transition: background 0.3s;
53+
}
54+
.chat-page-layout .side-panel a:hover {
55+
background-color: rgba(255, 255, 255, 0.2);
56+
}
57+
.chat-page-layout .chat-container {
58+
flex: 1;
59+
display: flex;
60+
flex-direction: column;
61+
justify-content: flex-start;
62+
align-items: center;
63+
margin-right: 0;
64+
width: 100%;
65+
padding-bottom: 0px;
66+
padding-top: 20px;
67+
}
68+
/* Chat box styling */
69+
.chat-page-layout .chat-box {
70+
width: 90%;
71+
max-width: 1200px;
72+
height: 75vh;
73+
display: flex;
74+
flex-direction: column;
75+
background: white;
76+
border-radius: 10px;
77+
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
78+
overflow: hidden;
79+
padding: 15px;
80+
}
81+
/* Button bar styling */
82+
.chat-page-layout .button-bar {
83+
display: flex;
84+
justify-content: center;
85+
gap: 20px;
86+
padding: 10px;
87+
background-color: #212529;
88+
border-bottom: 2px solid #ddd;
89+
width: 90%;
90+
max-width: 1200px;
91+
box-sizing: border-box;
92+
}
93+
.chat-page-layout .button-bar button {
94+
padding: 10px;
95+
background-color: #d9534f;
96+
color: white;
97+
border: none;
98+
border-radius: 5px;
99+
cursor: pointer;
100+
font-size: 16px;
101+
}
102+
.chat-page-layout .button-bar button:hover {
103+
background-color: #b52b27;
104+
}
105+
/* Chat messages container */
106+
.chat-page-layout .chat-messages {
107+
flex: 1;
108+
padding: 10px;
109+
overflow-y: auto;
110+
display: flex;
111+
flex-direction: column;
112+
width: 100%;
113+
}
114+
.chat-page-layout .chat-bubble {
115+
max-width: 70%;
116+
padding: 8px 12px;
117+
margin: 5px 0;
118+
border-radius: 15px;
119+
word-wrap: break-word;
120+
background-color: #d9534f;
121+
color: white;
122+
display: flex;
123+
align-items: center;
124+
justify-content: flex-end;
125+
align-self: flex-end;
126+
position: relative;
127+
font-size: 1rem;
128+
}
129+
.chat-page-layout .chat-input {
130+
display: flex;
131+
padding: 10px;
132+
border-top: 1px solid #ddd;
133+
background: white;
134+
width: 100%;
135+
}
136+
.chat-page-layout .input-field {
137+
flex: 1;
138+
padding: 10px;
139+
border: 1px solid #ccc;
140+
border-radius: 5px;
141+
font-size: 16px;
142+
}
143+
/* Send button */
144+
.chat-page-layout .send-button {
145+
margin-left: 10px;
146+
padding: 10px 15px;
147+
background-color: #d9534f;
148+
color: white;
149+
border: none;
150+
border-radius: 5px;
151+
cursor: pointer;
152+
font-size: 16px;
153+
}
154+
.chat-page-layout .send-button:hover {
155+
background-color: #b52b27;
156+
}
157+
.chat-page-layout .chat-header {
158+
display: flex;
159+
align-items: center;
160+
padding: 15px;
161+
background-color: white;
162+
width: 100%;
163+
border-top-left-radius: 10px;
164+
border-top-right-radius: 10px;
165+
border-bottom: 3px solid black;
166+
}
167+
.chat-page-layout .user-icon {
168+
width: 40px;
169+
height: 40px;
170+
border-radius: 50%;
171+
margin-right: 10px;
172+
}
173+
.chat-page-layout .user-name {
174+
font-weight: bold;
175+
font-size: 18px;
176+
color: #333;
177+
}
178+
.chat-page-layout .message-container {
179+
display: flex;
180+
align-items: center;
181+
justify-content: flex-end;
182+
}
183+
.chat-page-layout .message-icon {
184+
width: 40px;
185+
height: 40px;
186+
border-radius: 50%;
187+
margin-left: 10px;
188+
}
189+
/* User messages */
190+
.chat-page-layout .user-message {
191+
justify-content: flex-end;
192+
}
193+
194+
.chat-page-layout .user-bubble {
195+
background-color: #d9534f;
196+
color: white;
197+
align-self: flex-end;
198+
}
199+
200+
/* Bot messages */
201+
.chat-page-layout .bot-message {
202+
justify-content: flex-start;
203+
}
204+
205+
.chat-page-layout .bot-bubble {
206+
background-color: #212529;
207+
color: white;
208+
align-self: flex-start;
209+
}

0 commit comments

Comments
 (0)