Wait for AI response before letting user send another message in GUI
This commit is contained in:
parent
226f4bf409
commit
0ab585943f
|
@ -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;
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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 {
|
||||||
|
|
Loading…
Reference in New Issue