Skip to content

Commit ed02749

Browse files
Copilotphrocker
Copilot
and
phrocker
committed
Modernize chat window with improved styling and animations
Co-authored-by: phrocker <[email protected]>
1 parent 5c381f0 commit ed02749

File tree

3 files changed

+363
-110
lines changed

3 files changed

+363
-110
lines changed

‎api/src/main/resources/static/js/chat.js‎

Lines changed: 43 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -271,8 +271,12 @@ export function switchToAgent(agentName,agentId, sessionId, agentHost) {
271271
appendToChatWindow(msg.sender, msg.message);
272272
});
273273

274-
container.classList.remove("hidden");
275-
container.style.display = "block";
274+
// Show container with animation
275+
container.style.display = "flex";
276+
setTimeout(() => {
277+
container.classList.remove("hidden");
278+
}, 10);
279+
276280
console.log("Chat container displayed");
277281
}
278282

@@ -307,14 +311,49 @@ export function appendToChatWindow(sender, message) {
307311
const chatBox = document.getElementById("chat-messages");
308312
const div = document.createElement("div");
309313
div.classList.add("chat-message");
310-
div.innerHTML = `<strong>${sender}:</strong> ${message}`;
314+
315+
// Determine if message is from user or agent
316+
const isUser = sender === "You" || sender === "user";
317+
div.classList.add(isUser ? "user" : "agent");
318+
319+
// Create message content with modern styling
320+
const messageContent = document.createElement("div");
321+
messageContent.classList.add("chat-message-content");
322+
messageContent.textContent = message;
323+
324+
// Add sender name (smaller, less prominent)
325+
const senderElement = document.createElement("strong");
326+
senderElement.textContent = sender;
327+
328+
div.appendChild(senderElement);
329+
div.appendChild(messageContent);
330+
311331
chatBox.appendChild(div);
312332
chatBox.scrollTop = chatBox.scrollHeight;
313333
}
314334

315335
export function toggleChat() {
316336
const container = document.getElementById("chat-container");
317-
container.classList.toggle("hidden");
337+
338+
if (container.classList.contains("hidden")) {
339+
container.style.display = "flex";
340+
// Small delay to ensure display change is processed
341+
setTimeout(() => {
342+
container.classList.remove("hidden");
343+
}, 10);
344+
345+
// Focus input when opening
346+
setTimeout(() => {
347+
const input = document.getElementById("chat-input");
348+
if (input) input.focus();
349+
}, 300);
350+
} else {
351+
container.classList.add("hidden");
352+
// Hide after animation completes
353+
setTimeout(() => {
354+
container.style.display = "none";
355+
}, 300);
356+
}
318357
}
319358

320359
// =========================

‎api/src/main/resources/templates/fragments/chat.html‎

Lines changed: 158 additions & 77 deletions
Original file line numberDiff line numberDiff line change
@@ -6,83 +6,164 @@
66
let chatFocus = false;
77
let chatConnection = null;
88

9-
function toggleChat() {
10-
let chatContainer = document.getElementById("chat-container");
11-
if (chatContainer.style.display === "none" || chatContainer.style.display === "") {
12-
chatContainer.style.display = "flex";
13-
document.getElementById("chat-input").focus();
14-
termFocus = false;
15-
chatFocus = true;
16-
enableSessionChat();
17-
} else {
18-
chatContainer.style.display = (chatContainer.style.display === "none" || chatContainer.style.display === "") ? "flex" : "none";
19-
}
20-
//
9+
function toggleChat() {
10+
let chatContainer = document.getElementById("chat-container");
11+
12+
if (chatContainer.style.display === "none" || chatContainer.style.display === "") {
13+
chatContainer.style.display = "flex";
14+
// Small delay to ensure display change is processed
15+
setTimeout(() => {
16+
chatContainer.classList.remove("hidden");
17+
}, 10);
18+
19+
// Focus input when opening
20+
setTimeout(() => {
21+
const input = document.getElementById("chat-input");
22+
if (input) input.focus();
23+
}, 300);
24+
25+
termFocus = false;
26+
chatFocus = true;
27+
enableSessionChat();
28+
} else {
29+
chatContainer.classList.add("hidden");
30+
// Hide after animation completes
31+
setTimeout(() => {
32+
chatContainer.style.display = "none";
33+
}, 300);
34+
}
2135
}
2236
</script>
23-
<style>
24-
/* Chat Button */
25-
#chat-button {
26-
position: fixed;
27-
bottom: 20px;
28-
right: 20px;
29-
background: #007bff;
30-
color: white;
31-
padding: 10px 15px;
32-
border-radius: 20px;
33-
cursor: pointer;
34-
font-size: 14px;
35-
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
36-
}
37-
38-
/* Chat Container */
39-
#chat-container {
40-
position: fixed;
41-
bottom: 10px;
42-
right: 20px;
43-
width: 300px;
44-
height: 350px;
45-
background: #222;
46-
color: white;
47-
border-radius: 10px;
48-
display: none;
49-
flex-direction: column;
50-
box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3);
51-
}
52-
53-
/* Chat Header */
54-
#chat-header {
55-
background: #444;
56-
padding: 10px;
57-
cursor: pointer;
58-
text-align: center;
59-
font-weight: bold;
60-
position: relative;
61-
}
62-
63-
#close-chat {
64-
position: absolute;
65-
right: 10px;
66-
cursor: pointer;
67-
}
68-
69-
/* Chat Messages */
70-
#chat-messages {
71-
flex: 1;
72-
padding: 10px;
73-
overflow-y: auto;
74-
max-height: 250px;
75-
font-size: 14px;
76-
}
77-
78-
/* Chat Input */
79-
#chat-input {
80-
width: 100%;
81-
padding: 8px;
82-
border: none;
83-
background: #333;
84-
color: white;
85-
font-size: 14px;
86-
border-top: 1px solid #666;
87-
}
37+
<style>
38+
/* Modern Chat Button */
39+
#chat-button {
40+
position: fixed;
41+
bottom: 20px;
42+
right: 20px;
43+
background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
44+
color: white;
45+
padding: 12px 18px;
46+
border-radius: 24px;
47+
cursor: pointer;
48+
font-size: 14px;
49+
font-weight: 500;
50+
box-shadow: 0 4px 12px rgba(0, 123, 255, 0.3), 0 2px 4px rgba(0, 0, 0, 0.2);
51+
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
52+
border: none;
53+
outline: none;
54+
user-select: none;
55+
}
56+
57+
#chat-button:hover {
58+
background: linear-gradient(135deg, #0056b3 0%, #004085 100%);
59+
transform: translateY(-2px);
60+
box-shadow: 0 6px 16px rgba(0, 123, 255, 0.4), 0 4px 8px rgba(0, 0, 0, 0.3);
61+
}
62+
63+
#chat-button:active {
64+
transform: translateY(0);
65+
}
66+
67+
/* Modern Chat Container */
68+
#chat-container {
69+
position: fixed;
70+
bottom: 10px;
71+
right: 20px;
72+
width: 360px;
73+
height: 500px;
74+
background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
75+
color: white;
76+
border-radius: 16px;
77+
display: none;
78+
flex-direction: column;
79+
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5), 0 4px 16px rgba(0, 0, 0, 0.3);
80+
backdrop-filter: blur(10px);
81+
border: 1px solid #404040;
82+
overflow: hidden;
83+
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
84+
}
85+
86+
/* Modern Chat Header */
87+
#chat-header {
88+
background: linear-gradient(135deg, #2a2a2a 0%, #3a3a3a 100%);
89+
padding: 16px 20px;
90+
cursor: pointer;
91+
text-align: center;
92+
font-weight: 600;
93+
position: relative;
94+
border-bottom: 1px solid #404040;
95+
font-size: 15px;
96+
letter-spacing: 0.5px;
97+
}
98+
99+
#chat-header:hover {
100+
background: linear-gradient(135deg, #2f2f2f 0%, #3f3f3f 100%);
101+
}
102+
103+
#close-chat {
104+
position: absolute;
105+
right: 16px;
106+
top: 50%;
107+
transform: translateY(-50%);
108+
cursor: pointer;
109+
color: #888;
110+
font-size: 18px;
111+
transition: color 0.2s ease;
112+
padding: 4px;
113+
}
114+
115+
#close-chat:hover {
116+
color: #ff4757;
117+
}
118+
119+
/* Modern Chat Messages */
120+
#chat-messages {
121+
flex: 1;
122+
padding: 16px;
123+
overflow-y: auto;
124+
background: linear-gradient(135deg, #1a1a1a 0%, #252525 100%);
125+
font-size: 14px;
126+
line-height: 1.5;
127+
}
128+
129+
#chat-messages::-webkit-scrollbar {
130+
width: 6px;
131+
}
132+
133+
#chat-messages::-webkit-scrollbar-track {
134+
background: rgba(255, 255, 255, 0.1);
135+
border-radius: 10px;
136+
}
137+
138+
#chat-messages::-webkit-scrollbar-thumb {
139+
background: rgba(255, 255, 255, 0.3);
140+
border-radius: 10px;
141+
}
142+
143+
#chat-messages::-webkit-scrollbar-thumb:hover {
144+
background: rgba(255, 255, 255, 0.5);
145+
}
146+
147+
/* Modern Chat Input */
148+
#chat-input {
149+
width: 100%;
150+
padding: 16px 20px;
151+
border: none;
152+
background: linear-gradient(135deg, #2a2a2a 0%, #3a3a3a 100%);
153+
color: white;
154+
font-size: 14px;
155+
border-top: 1px solid #404040;
156+
outline: none;
157+
font-family: inherit;
158+
transition: all 0.2s ease;
159+
}
160+
161+
#chat-input::placeholder {
162+
color: #888;
163+
}
164+
165+
#chat-input:focus {
166+
background: linear-gradient(135deg, #2f2f2f 0%, #3f3f3f 100%);
167+
box-shadow: inset 0 0 0 1px #007bff;
168+
}
88169
</style>

0 commit comments

Comments
 (0)