Auto commit: 2025-11-25T16:20:11.899Z
This commit is contained in:
parent
0187c43d11
commit
20a786eae4
BIN
assets/pasted-20251125-161909-096e4e24.png
Normal file
BIN
assets/pasted-20251125-161909-096e4e24.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.9 MiB |
@ -181,3 +181,30 @@ body {
|
||||
.song-artist {
|
||||
color: #B3B3B3;
|
||||
}
|
||||
|
||||
.typing-indicator span {
|
||||
display: inline-block;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
background-color: #B3B3B3;
|
||||
margin: 0 2px;
|
||||
animation: typing 1s infinite;
|
||||
}
|
||||
|
||||
.typing-indicator span:nth-child(2) {
|
||||
animation-delay: 0.2s;
|
||||
}
|
||||
|
||||
.typing-indicator span:nth-child(3) {
|
||||
animation-delay: 0.4s;
|
||||
}
|
||||
|
||||
@keyframes typing {
|
||||
0%, 100% {
|
||||
transform: translateY(0);
|
||||
}
|
||||
50% {
|
||||
transform: translateY(-5px);
|
||||
}
|
||||
}
|
||||
|
||||
@ -16,6 +16,7 @@ document.addEventListener('DOMContentLoaded', function() {
|
||||
// Add user message to chat box
|
||||
appendMessage(userMessage, 'user-message');
|
||||
chatInput.value = '';
|
||||
showTypingIndicator();
|
||||
|
||||
fetch(window.location.href, {
|
||||
method: 'POST',
|
||||
@ -30,6 +31,7 @@ document.addEventListener('DOMContentLoaded', function() {
|
||||
})
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
removeTypingIndicator();
|
||||
// Add AI message to chat box
|
||||
appendMessage(data.ai_message, 'ai-message');
|
||||
|
||||
@ -40,6 +42,7 @@ document.addEventListener('DOMContentLoaded', function() {
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Error:', error);
|
||||
removeTypingIndicator();
|
||||
appendMessage('Sorry, something went wrong.', 'ai-message');
|
||||
});
|
||||
});
|
||||
@ -54,6 +57,21 @@ document.addEventListener('DOMContentLoaded', function() {
|
||||
chatBox.scrollTop = chatBox.scrollHeight; // Scroll to bottom
|
||||
}
|
||||
|
||||
function showTypingIndicator() {
|
||||
const typingIndicator = document.createElement('div');
|
||||
typingIndicator.classList.add('chat-message', 'ai-message', 'typing-indicator');
|
||||
typingIndicator.innerHTML = '<p><span>.</span><span>.</span><span>.</span></p>';
|
||||
chatBox.appendChild(typingIndicator);
|
||||
chatBox.scrollTop = chatBox.scrollHeight;
|
||||
}
|
||||
|
||||
function removeTypingIndicator() {
|
||||
const typingIndicator = document.querySelector('.typing-indicator');
|
||||
if (typingIndicator) {
|
||||
typingIndicator.remove();
|
||||
}
|
||||
}
|
||||
|
||||
function displayPlaylist(playlist) {
|
||||
let playlistContainer = document.querySelector('.playlist-container');
|
||||
if (!playlistContainer) {
|
||||
|
||||
@ -181,3 +181,30 @@ body {
|
||||
.song-artist {
|
||||
color: #B3B3B3;
|
||||
}
|
||||
|
||||
.typing-indicator span {
|
||||
display: inline-block;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
background-color: #B3B3B3;
|
||||
margin: 0 2px;
|
||||
animation: typing 1s infinite;
|
||||
}
|
||||
|
||||
.typing-indicator span:nth-child(2) {
|
||||
animation-delay: 0.2s;
|
||||
}
|
||||
|
||||
.typing-indicator span:nth-child(3) {
|
||||
animation-delay: 0.4s;
|
||||
}
|
||||
|
||||
@keyframes typing {
|
||||
0%, 100% {
|
||||
transform: translateY(0);
|
||||
}
|
||||
50% {
|
||||
transform: translateY(-5px);
|
||||
}
|
||||
}
|
||||
|
||||
@ -16,6 +16,7 @@ document.addEventListener('DOMContentLoaded', function() {
|
||||
// Add user message to chat box
|
||||
appendMessage(userMessage, 'user-message');
|
||||
chatInput.value = '';
|
||||
showTypingIndicator();
|
||||
|
||||
fetch(window.location.href, {
|
||||
method: 'POST',
|
||||
@ -30,6 +31,7 @@ document.addEventListener('DOMContentLoaded', function() {
|
||||
})
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
removeTypingIndicator();
|
||||
// Add AI message to chat box
|
||||
appendMessage(data.ai_message, 'ai-message');
|
||||
|
||||
@ -40,6 +42,7 @@ document.addEventListener('DOMContentLoaded', function() {
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Error:', error);
|
||||
removeTypingIndicator();
|
||||
appendMessage('Sorry, something went wrong.', 'ai-message');
|
||||
});
|
||||
});
|
||||
@ -54,6 +57,21 @@ document.addEventListener('DOMContentLoaded', function() {
|
||||
chatBox.scrollTop = chatBox.scrollHeight; // Scroll to bottom
|
||||
}
|
||||
|
||||
function showTypingIndicator() {
|
||||
const typingIndicator = document.createElement('div');
|
||||
typingIndicator.classList.add('chat-message', 'ai-message', 'typing-indicator');
|
||||
typingIndicator.innerHTML = '<p><span>.</span><span>.</span><span>.</span></p>';
|
||||
chatBox.appendChild(typingIndicator);
|
||||
chatBox.scrollTop = chatBox.scrollHeight;
|
||||
}
|
||||
|
||||
function removeTypingIndicator() {
|
||||
const typingIndicator = document.querySelector('.typing-indicator');
|
||||
if (typingIndicator) {
|
||||
typingIndicator.remove();
|
||||
}
|
||||
}
|
||||
|
||||
function displayPlaylist(playlist) {
|
||||
let playlistContainer = document.querySelector('.playlist-container');
|
||||
if (!playlistContainer) {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user