From 9673f41195ece28c528c0147bda0534e98274d04 Mon Sep 17 00:00:00 2001
From: "Rodrigo Rodriguez (Pragmatismo)" <me@rodrigorodriguez.com>
Date: Sun, 2 Nov 2025 11:01:36 -0300
Subject: [PATCH] feat: add styled suggestion buttons and move them from
 messages to footer

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.
---
 web/html/index.html | 59 ++++++++++++++++++++++-----------------------
 1 file changed, 29 insertions(+), 30 deletions(-)

diff --git a/web/html/index.html b/web/html/index.html
index f435c80d..e9a29ac8 100644
--- a/web/html/index.html
+++ b/web/html/index.html
@@ -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