diff --git a/gui/css/styles.css b/gui/css/styles.css index c74054a..dc75856 100644 --- a/gui/css/styles.css +++ b/gui/css/styles.css @@ -18,6 +18,24 @@ body { border: 1px solid #34495e; border-radius: 5px; } +#sendButton { + padding: 10px 20px; + font-size: 1rem; + color: white; + background-color: #007BFF; + border: none; + border-radius: 5px; + cursor: pointer; + transition: background-color 0.2s; +} +#sendButton:hover { + background-color: #0056b3; +} + +#sendButton:disabled { + background-color: #6c757d; + cursor: not-allowed; +} .message { font-size: 0.9em; padding: 5px 10px; diff --git a/gui/index.html b/gui/index.html index 7686a8e..27a4941 100644 --- a/gui/index.html +++ b/gui/index.html @@ -15,7 +15,7 @@ diff --git a/gui/renderer.js b/gui/renderer.js index f0bbbc9..2c72dac 100644 --- a/gui/renderer.js +++ b/gui/renderer.js @@ -17,6 +17,7 @@ function displayMessage(message, sender) { document.addEventListener('DOMContentLoaded', () => { const chatForm = document.getElementById('chatForm'); const promptInput = document.getElementById('promptInput'); + const sendButton = document.getElementById('sendButton'); if (chatForm && promptInput) { chatForm.addEventListener('submit', async (event) => { @@ -24,6 +25,9 @@ document.addEventListener('DOMContentLoaded', () => { const userInput = promptInput.value; promptInput.value = ''; + sendButton.disabled = true; + promptInput.disabled = true; + displayMessage(userInput, 'user'); try { @@ -33,9 +37,13 @@ document.addEventListener('DOMContentLoaded', () => { } catch (error) { console.error(`Error sending prompt: ${error.message}`); displayMessage(`Error: ${error.message}`, 'assistant'); + } finally { + sendButton.disabled = false; + promptInput.disabled = false; + promptInput.focus(); } }); } else { console.error('chatForm or promptInput elements not found!'); } -}); +}); \ No newline at end of file