GeneralBots/botserver
2
1
Fork 0
Code Issues Pull requests Projects Releases 323 Packages Wiki Activity Actions

feat: add styled suggestion buttons and move them from messages to footer

Browse source 
Added new CSS classes for suggestion buttons and container, moving them from message content to footer. Removed inline styles in favor of CSS classes for better maintainability. The suggestions now appear at the top of the footer with consistent styling and hover effects.
This commit is contained in:
Rodrigo Rodriguez (Pragmatismo) 2025-11-02 11:01:36 -03:00
parent 9010396a87
commit 9673f41195
1 changed files with 29 additions and 30 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

59
web/html/index.html
View file

@ -351,6 +351,32 @@
border-top: 1px solid rgba(255, 215, 0, 0.3);
padding: 20px 40px;
box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.3);
position: relative;
}
.suggestions-container {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 10px;
justify-content: center;
}
.suggestion-button {
margin: 0 5px;
padding: 6px 10px;
background-color: #ffd700;
color: #0a0e27;
border: none;
border-radius: 6px;
cursor: pointer;
font-size: 12px;
transition: all 0.2s ease;
}
.suggestion-button:hover {
transform: scale(1.05);
box-shadow: 0 0 8px rgba(255, 215, 0, 0.6);
}
.input-container {
@ -880,23 +906,13 @@
</div>
<script>
function handleSuggestions(suggestions) {
// Find all assistant message content divs (including empty state)
const messageContents = document.querySelectorAll('.assistant-message-content, #emptyState');
if (messageContents.length === 0) return;
const footer = document.querySelector('footer');
let container = footer.querySelector('.suggestions-container');
const lastContent = messageContents[messageContents.length - 1];
let container = lastContent.querySelector('.suggestions-container');
// Create container if it doesn't exist
if (!container) {
container = document.createElement('div');
container.className = 'suggestions-container';
container.style.display = 'flex';
container.style.flexWrap = 'wrap';
container.style.gap = '8px';
container.style.marginTop = '10px';
container.style.justifyContent = 'flex-start';
lastContent.appendChild(container);
footer.insertBefore(container, footer.firstChild);
}
container.innerHTML = '';
@ -904,23 +920,6 @@
const btn = document.createElement('button');
btn.textContent = s.text;
btn.className = 'suggestion-button';
btn.style.margin = '5px';
btn.style.padding = '8px 12px';
btn.style.backgroundColor = '#ffd700';
btn.style.color = '#0a0e27';
btn.style.border = 'none';
btn.style.borderRadius = '6px';
btn.style.cursor = 'pointer';
btn.style.fontSize = '14px';
btn.style.transition = 'all 0.2s ease';
btn.onmouseenter = () => {
btn.style.transform = 'scale(1.05)';
btn.style.boxShadow = '0 0 8px rgba(255, 215, 0, 0.6)';
};
btn.onmouseleave = () => {
btn.style.transform = 'scale(1)';
btn.style.boxShadow = 'none';
};
btn.onclick = () => {
setContext(s.context);
input.value = ''; // Clear input after clicking