Wait for AI response before letting user send another message in GUI

This commit is contained in:
Wizzard 2024-03-09 03:12:19 -05:00
parent 226f4bf409
commit 0ab585943f
3 changed files with 28 additions and 2 deletions

View File

@ -18,6 +18,24 @@ body {
border: 1px solid #34495e; border: 1px solid #34495e;
border-radius: 5px; 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 { .message {
font-size: 0.9em; font-size: 0.9em;
padding: 5px 10px; padding: 5px 10px;

View File

@ -15,7 +15,7 @@
<footer> <footer>
<form id="chatForm" class="chat-form"> <form id="chatForm" class="chat-form">
<input id="promptInput" type="text" placeholder="Enter your prompt" autofocus> <input id="promptInput" type="text" placeholder="Enter your prompt" autofocus>
<button type="submit" id="sendPrompt">Send</button> <button id="sendButton" onclick="sendPrompt()">Send</button>
</form> </form>
</footer> </footer>
</div> </div>

View File

@ -17,6 +17,7 @@ function displayMessage(message, sender) {
document.addEventListener('DOMContentLoaded', () => { document.addEventListener('DOMContentLoaded', () => {
const chatForm = document.getElementById('chatForm'); const chatForm = document.getElementById('chatForm');
const promptInput = document.getElementById('promptInput'); const promptInput = document.getElementById('promptInput');
const sendButton = document.getElementById('sendButton');
if (chatForm && promptInput) { if (chatForm && promptInput) {
chatForm.addEventListener('submit', async (event) => { chatForm.addEventListener('submit', async (event) => {
@ -24,6 +25,9 @@ document.addEventListener('DOMContentLoaded', () => {
const userInput = promptInput.value; const userInput = promptInput.value;
promptInput.value = ''; promptInput.value = '';
sendButton.disabled = true;
promptInput.disabled = true;
displayMessage(userInput, 'user'); displayMessage(userInput, 'user');
try { try {
@ -33,6 +37,10 @@ document.addEventListener('DOMContentLoaded', () => {
} catch (error) { } catch (error) {
console.error(`Error sending prompt: ${error.message}`); console.error(`Error sending prompt: ${error.message}`);
displayMessage(`Error: ${error.message}`, 'assistant'); displayMessage(`Error: ${error.message}`, 'assistant');
} finally {
sendButton.disabled = false;
promptInput.disabled = false;
promptInput.focus();
} }
}); });
} else { } else {