diff --git a/internal/server/web/static/ai.js b/internal/server/web/static/ai.js index 3484502..f836d02 100644 --- a/internal/server/web/static/ai.js +++ b/internal/server/web/static/ai.js @@ -792,6 +792,7 @@ function sendState() { const on = !!ac || !!input.value.trim() || attachments.length > 0; send.classList.toggle('show', on); + send.classList.toggle('stop', !!ac); send.tabIndex = on ? 0 : -1; } input.addEventListener('input', sendState); @@ -807,7 +808,15 @@ grow(); sendState(); } // The field grows with the text, up to a few lines. - function grow() { input.style.height = '40px'; input.style.height = Math.min(140, input.scrollHeight + 2) + 'px'; } + // Measured with no scrollbar: one showing in the squeezed field would take + // its width and wrap the last word a character too early. + function grow() { + input.style.overflowY = 'hidden'; + input.style.height = '40px'; + const h = input.scrollHeight + 2; + input.style.height = Math.min(140, h) + 'px'; + input.style.overflowY = h > 140 ? 'auto' : 'hidden'; + } input.addEventListener('input', grow); input.addEventListener('keydown', ev => { if (ev.key === 'Enter' && !ev.shiftKey && !ev.isComposing) { ev.preventDefault(); q('.ai-form-in').requestSubmit(); } diff --git a/internal/server/web/static/app.css b/internal/server/web/static/app.css index 5f651a1..2dcb325 100644 --- a/internal/server/web/static/app.css +++ b/internal/server/web/static/app.css @@ -917,6 +917,9 @@ body.touch.term-active .ai-fab { bottom:104px; } .ai-send.show { width:36px; margin:0 3px 2px 0; opacity:1; transform:none; pointer-events:auto; } .ai-send:hover { color:#7ab6ff; background:#1b222c; } .ai-send:active { transform:scale(.9); } +/* While the answer runs: stop, red. */ +.ai-send.stop { color:var(--danger); } +.ai-send.stop:hover { color:#ff7b7b; background:#2a1a1d; } .ai-send:focus-visible { outline:none; box-shadow:0 0 0 2px rgba(79,157,255,.45); } .ai-send .ai-plane { display:block; flex:none; transform:translateX(1px); } .ai-attachments { display:flex; flex-wrap:wrap; gap:5px; padding:2px 3px 6px; }