Skip to content

Modernize chat window with improved styling and animations #80

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
phrocker merged 3 commits into from
Jul 7, 2025
Merged

Modernize chat window with improved styling and animations #80

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
5c381f0
Initial plan
Copilot Jul 7, 2025
ed02749
Modernize chat window with improved styling and animations
Copilot Jul 7, 2025
35d3f03
Ensure toggleChat works
phrocker Jul 7, 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
50 changes: 45 additions & 5 deletions api/src/main/resources/static/js/chat.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -271,8 +271,12 @@ export function switchToAgent(agentName,agentId, sessionId, agentHost) {
appendToChatWindow(msg.sender, msg.message);
});

container.classList.remove("hidden");
container.style.display = "block";
// Show container with animation
container.style.display = "flex";
setTimeout(() => {
container.classList.remove("hidden");
}, 10);

console.log("Chat container displayed");
}

Expand Down Expand Up @@ -307,14 +311,49 @@ export function appendToChatWindow(sender, message) {
const chatBox = document.getElementById("chat-messages");
const div = document.createElement("div");
div.classList.add("chat-message");
div.innerHTML = `<strong>${sender}:</strong> ${message}`;

// Determine if message is from user or agent
const isUser = sender === "You" || sender === "user";
div.classList.add(isUser ? "user" : "agent");

// Create message content with modern styling
const messageContent = document.createElement("div");
messageContent.classList.add("chat-message-content");
messageContent.textContent = message;

// Add sender name (smaller, less prominent)
const senderElement = document.createElement("strong");
senderElement.textContent = sender;

div.appendChild(senderElement);
div.appendChild(messageContent);

chatBox.appendChild(div);
chatBox.scrollTop = chatBox.scrollHeight;
}

export function toggleChat() {
const container = document.getElementById("chat-container");
container.classList.toggle("hidden");

if (container.classList.contains("hidden")) {
container.style.display = "flex";
// Small delay to ensure display change is processed
setTimeout(() => {
container.classList.remove("hidden");
}, 10);

// Focus input when opening
setTimeout(() => {
const input = document.getElementById("chat-input");
if (input) input.focus();
}, 300);
} else {
container.classList.add("hidden");
// Hide after animation completes
setTimeout(() => {
container.style.display = "none";
}, 300);
}
}

// =========================
Expand Down Expand Up @@ -344,4 +383,5 @@ export async function fetchAvailableAgents() {
}
}

window.sendMessage = sendMessage;
window.sendMessage = sendMessage;
window.toggleChat = toggleChat;
235 changes: 158 additions & 77 deletions api/src/main/resources/templates/fragments/chat.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,83 +6,164 @@
let chatFocus = false;
let chatConnection = null;

function toggleChat() {
let chatContainer = document.getElementById("chat-container");
if (chatContainer.style.display === "none" || chatContainer.style.display === "") {
chatContainer.style.display = "flex";
document.getElementById("chat-input").focus();
termFocus = false;
chatFocus = true;
enableSessionChat();
} else {
chatContainer.style.display = (chatContainer.style.display === "none" || chatContainer.style.display === "") ? "flex" : "none";
}
//
function toggleChat() {
let chatContainer = document.getElementById("chat-container");

if (chatContainer.style.display === "none" || chatContainer.style.display === "") {
chatContainer.style.display = "flex";
// Small delay to ensure display change is processed
setTimeout(() => {
chatContainer.classList.remove("hidden");
}, 10);

// Focus input when opening
setTimeout(() => {
const input = document.getElementById("chat-input");
if (input) input.focus();
}, 300);

termFocus = false;
chatFocus = true;
enableSessionChat();
} else {
chatContainer.classList.add("hidden");
// Hide after animation completes
setTimeout(() => {
chatContainer.style.display = "none";
}, 300);
}
}
</script>
<style>
/* Chat Button */
#chat-button {
position: fixed;
bottom: 20px;
right: 20px;
background: #007bff;
color: white;
padding: 10px 15px;
border-radius: 20px;
cursor: pointer;
font-size: 14px;
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
}

/* Chat Container */
#chat-container {
position: fixed;
bottom: 10px;
right: 20px;
width: 300px;
height: 350px;
background: #222;
color: white;
border-radius: 10px;
display: none;
flex-direction: column;
box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3);
}

/* Chat Header */
#chat-header {
background: #444;
padding: 10px;
cursor: pointer;
text-align: center;
font-weight: bold;
position: relative;
}

#close-chat {
position: absolute;
right: 10px;
cursor: pointer;
}

/* Chat Messages */
#chat-messages {
flex: 1;
padding: 10px;
overflow-y: auto;
max-height: 250px;
font-size: 14px;
}

/* Chat Input */
#chat-input {
width: 100%;
padding: 8px;
border: none;
background: #333;
color: white;
font-size: 14px;
border-top: 1px solid #666;
}
<style>
/* Modern Chat Button */
#chat-button {
position: fixed;
bottom: 20px;
right: 20px;
background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
color: white;
padding: 12px 18px;
border-radius: 24px;
cursor: pointer;
font-size: 14px;
font-weight: 500;
box-shadow: 0 4px 12px rgba(0, 123, 255, 0.3), 0 2px 4px rgba(0, 0, 0, 0.2);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
border: none;
outline: none;
user-select: none;
}

#chat-button:hover {
background: linear-gradient(135deg, #0056b3 0%, #004085 100%);
transform: translateY(-2px);
box-shadow: 0 6px 16px rgba(0, 123, 255, 0.4), 0 4px 8px rgba(0, 0, 0, 0.3);
}

#chat-button:active {
transform: translateY(0);
}

/* Modern Chat Container */
#chat-container {
position: fixed;
bottom: 10px;
right: 20px;
width: 360px;
height: 500px;
background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
color: white;
border-radius: 16px;
display: none;
flex-direction: column;
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5), 0 4px 16px rgba(0, 0, 0, 0.3);
backdrop-filter: blur(10px);
border: 1px solid #404040;
overflow: hidden;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Modern Chat Header */
#chat-header {
background: linear-gradient(135deg, #2a2a2a 0%, #3a3a3a 100%);
padding: 16px 20px;
cursor: pointer;
text-align: center;
font-weight: 600;
position: relative;
border-bottom: 1px solid #404040;
font-size: 15px;
letter-spacing: 0.5px;
}

#chat-header:hover {
background: linear-gradient(135deg, #2f2f2f 0%, #3f3f3f 100%);
}

#close-chat {
position: absolute;
right: 16px;
top: 50%;
transform: translateY(-50%);
cursor: pointer;
color: #888;
font-size: 18px;
transition: color 0.2s ease;
padding: 4px;
}

#close-chat:hover {
color: #ff4757;
}

/* Modern Chat Messages */
#chat-messages {
flex: 1;
padding: 16px;
overflow-y: auto;
background: linear-gradient(135deg, #1a1a1a 0%, #252525 100%);
font-size: 14px;
line-height: 1.5;
}

#chat-messages::-webkit-scrollbar {
width: 6px;
}

#chat-messages::-webkit-scrollbar-track {
background: rgba(255, 255, 255, 0.1);
border-radius: 10px;
}

#chat-messages::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.3);
border-radius: 10px;
}

#chat-messages::-webkit-scrollbar-thumb:hover {
background: rgba(255, 255, 255, 0.5);
}

/* Modern Chat Input */
#chat-input {
width: 100%;
padding: 16px 20px;
border: none;
background: linear-gradient(135deg, #2a2a2a 0%, #3a3a3a 100%);
color: white;
font-size: 14px;
border-top: 1px solid #404040;
outline: none;
font-family: inherit;
transition: all 0.2s ease;
}

#chat-input::placeholder {
color: #888;
}

#chat-input:focus {
background: linear-gradient(135deg, #2f2f2f 0%, #3f3f3f 100%);
box-shadow: inset 0 0 0 1px #007bff;
}
</style>
Loading