feat: send button morphs into a red stop while the assistant works (Open WebUI style); cancel-search button removed

This commit is contained in:
Daniel 2026-09-09 03:13:39 +02:00
parent 8a03fbb689
commit e52fa86ad7
3 changed files with 14 additions and 11 deletions

View file

@ -64,7 +64,6 @@
<input type="file" id="assistant-attach-input" accept="image/png,image/jpeg,image/webp" multiple hidden>
<button id="btn-assistant-voice" class="assistant-voice-btn" type="button" title="Voice conversation"><i class="fas fa-headset"></i></button>
<button id="btn-assistant-mic" class="assistant-mic" type="button" title="Dictate your question"><i class="fas fa-microphone"></i></button>
<button id="btn-assistant-cancel" class="btn-sm btn-ghost" type="button" hidden><i class="fas fa-stop"></i> Cancel search</button>
<button id="btn-assistant-send" class="btn-send" type="submit"><i class="fas fa-arrow-up"></i></button>
</div>
</form>

View file

@ -306,3 +306,5 @@ body.assistant-workspace .assistant-learning-view { min-height: 0; height: 100vh
.assistant-model-pill[hidden] { display:none; }
.assistant-model-control { border:1px solid var(--g200); background:white; border-radius:999px; padding:3px 10px; font-size:11px; color:var(--g600); cursor:pointer; max-width:220px; }
.assistant-model-pick { display:block; }
/* Send button becomes a red stop while the assistant works */
.btn-send.busy { background:var(--danger,#dc2626); }

View file

@ -126,7 +126,7 @@ import {
function bindEvents() {
var form = document.getElementById('assistant-form');
var clearBtn = document.getElementById('btn-assistant-clear');
var cancelBtn = document.getElementById('btn-assistant-cancel');
var exportBtn = document.getElementById('btn-assistant-export-pdf');
var attachInput = document.getElementById('assistant-attach-input');
var input = document.getElementById('assistant-input');
@ -144,6 +144,11 @@ import {
});
if (form) form.addEventListener('submit', onAsk);
var sendBtn = document.getElementById('btn-assistant-send');
if (sendBtn) sendBtn.addEventListener('click', function(e) {
// Open WebUI behavior: the send button becomes Stop while working.
if (assistantBusy) { e.preventDefault(); cancelAssistantSearch(); }
});
if (clearBtn) clearBtn.addEventListener('click', clearConversation);
document.getElementById('btn-assistant-download-chat').addEventListener('click', downloadTranscript);
if (goBackBtn) goBackBtn.addEventListener('click', goBackToMainMenu);
@ -151,7 +156,7 @@ import {
input.addEventListener('input', updateConversationBudget);
input.addEventListener('input', resizeAssistantInput);
}
if (cancelBtn) cancelBtn.addEventListener('click', cancelAssistantSearch);
if (exportBtn) exportBtn.addEventListener('click', exportAnswerPdf);
var takehomeBtn = document.getElementById('btn-assistant-takehome');
if (takehomeBtn) takehomeBtn.addEventListener('click', openPatientTakehome);
@ -1053,6 +1058,11 @@ import {
resizeAssistantInput();
if (status) status.textContent = 'Asking…';
var send = document.getElementById('btn-assistant-send');
if (send) {
send.classList.toggle('busy', !!isBusy);
var sendIcon = send.querySelector('i');
if (sendIcon) sendIcon.className = isBusy ? 'fas fa-stop' : 'fas fa-arrow-up';
}
if (send) send.click();
}
@ -2001,7 +2011,6 @@ import {
var status = document.getElementById('assistant-status');
var label = document.getElementById('assistant-status-text');
var send = document.getElementById('btn-assistant-send');
var cancel = document.getElementById('btn-assistant-cancel');
var input = document.getElementById('assistant-input');
var attachInput = document.getElementById('assistant-attach-input');
if (status) {
@ -2013,13 +2022,6 @@ import {
send.disabled = !!isBusy;
send.innerHTML = isBusy ? '<i class="fas fa-spinner fa-spin"></i> Searching' : '<i class="fas fa-paper-plane"></i> Ask';
}
if (cancel) {
var canCancel = !!isBusy && !!activeAssistantRequest;
if (canCancel) cancel.removeAttribute('hidden');
else cancel.setAttribute('hidden', '');
cancel.disabled = !canCancel;
cancel.style.display = canCancel ? 'inline-flex' : 'none';
}
if (input) input.disabled = !!isBusy;
if (attachInput) attachInput.disabled = !!isBusy;
}