admin/36282-vm
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Auto commit: 2025-11-25T16:20:11.899Z

Browse Source
This commit is contained in:
Flatlogic Bot 2025-11-25 16:20:11 +00:00
parent 0187c43d11
commit 20a786eae4
5 changed files with 90 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
assets/pasted-20251125-161909-096e4e24.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.9 MiB

27
static/css/custom.css
View File

@ -181,3 +181,30 @@ body {
.song-artist { .song-artist {
color: #B3B3B3; 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);
}
}

18
static/js/chat.js
View File

@ -16,6 +16,7 @@ document.addEventListener('DOMContentLoaded', function() {
// Add user message to chat box // Add user message to chat box
appendMessage(userMessage, 'user-message'); appendMessage(userMessage, 'user-message');
chatInput.value = ''; chatInput.value = '';
showTypingIndicator();
fetch(window.location.href, { fetch(window.location.href, {
method: 'POST', method: 'POST',
@ -30,6 +31,7 @@ document.addEventListener('DOMContentLoaded', function() {
}) })
.then(response => response.json()) .then(response => response.json())
.then(data => { .then(data => {
removeTypingIndicator();
// Add AI message to chat box // Add AI message to chat box
appendMessage(data.ai_message, 'ai-message'); appendMessage(data.ai_message, 'ai-message');
@ -40,6 +42,7 @@ document.addEventListener('DOMContentLoaded', function() {
}) })
.catch(error => { .catch(error => {
console.error('Error:', error); console.error('Error:', error);
removeTypingIndicator();
appendMessage('Sorry, something went wrong.', 'ai-message'); appendMessage('Sorry, something went wrong.', 'ai-message');
}); });
}); });
@ -54,6 +57,21 @@ document.addEventListener('DOMContentLoaded', function() {
chatBox.scrollTop = chatBox.scrollHeight; // Scroll to bottom 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) { function displayPlaylist(playlist) {
let playlistContainer = document.querySelector('.playlist-container'); let playlistContainer = document.querySelector('.playlist-container');
if (!playlistContainer) { if (!playlistContainer) {

27
staticfiles/css/custom.css
View File

@ -181,3 +181,30 @@ body {
.song-artist { .song-artist {
color: #B3B3B3; 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);
}
}

18
staticfiles/js/chat.js
View File

@ -16,6 +16,7 @@ document.addEventListener('DOMContentLoaded', function() {
// Add user message to chat box // Add user message to chat box
appendMessage(userMessage, 'user-message'); appendMessage(userMessage, 'user-message');
chatInput.value = ''; chatInput.value = '';
showTypingIndicator();
fetch(window.location.href, { fetch(window.location.href, {
method: 'POST', method: 'POST',
@ -30,6 +31,7 @@ document.addEventListener('DOMContentLoaded', function() {
}) })
.then(response => response.json()) .then(response => response.json())
.then(data => { .then(data => {
removeTypingIndicator();
// Add AI message to chat box // Add AI message to chat box
appendMessage(data.ai_message, 'ai-message'); appendMessage(data.ai_message, 'ai-message');
@ -40,6 +42,7 @@ document.addEventListener('DOMContentLoaded', function() {
}) })
.catch(error => { .catch(error => {
console.error('Error:', error); console.error('Error:', error);
removeTypingIndicator();
appendMessage('Sorry, something went wrong.', 'ai-message'); appendMessage('Sorry, something went wrong.', 'ai-message');
}); });
}); });
@ -54,6 +57,21 @@ document.addEventListener('DOMContentLoaded', function() {
chatBox.scrollTop = chatBox.scrollHeight; // Scroll to bottom 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) { function displayPlaylist(playlist) {
let playlistContainer = document.querySelector('.playlist-container'); let playlistContainer = document.querySelector('.playlist-container');
if (!playlistContainer) { if (!playlistContainer) {