Add stop button

This commit is contained in:
dwrz
2026-06-09 01:32:49 +00:00
parent ad58cd78ff
commit 6c8c04c804
5 changed files with 127 additions and 17 deletions

View File

@@ -108,6 +108,26 @@ body {
margin-top: var(--s0);
}
.chat-loading {
display: flex;
align-items: center;
justify-content: center;
padding: var(--s1) 0;
}
.chat-loading[hidden] {
display: none;
}
.chat-loading__spinner {
width: 1rem;
height: 1rem;
border: 2px solid var(--color-gray2);
border-top-color: var(--color-primary);
border-radius: 50%;
animation: spin 0.8s linear infinite;
}
/* ==================== */
/* Collapsible */
/* ==================== */
@@ -259,21 +279,34 @@ body {
animation: pulse 1s ease-in-out infinite;
}
.compose__action-btn--send.loading {
position: relative;
color: transparent;
pointer-events: none;
.compose__action-btn--send .compose__icon--stop {
display: none;
}
.compose__action-btn--send.loading::after {
content: "";
position: absolute;
width: 0.75rem;
height: 0.75rem;
border: 2px solid var(--color-gray2);
border-top-color: var(--color-primary);
border-radius: 50%;
animation: spin 0.8s linear infinite;
.compose__action-btn--send.loading {
pointer-events: auto;
cursor: pointer;
}
/* Hide the send icon, show the stop icon during loading */
.compose__action-btn--send.loading .compose__icon--send {
display: none;
}
.compose__action-btn--send.loading .compose__icon--stop {
display: block;
}
/* Pending stop: yellow background, click again to confirm */
.compose__action-btn--send.loading.pending {
background: var(--color-yellow);
color: var(--color-black);
}
@media (hover: hover) {
.compose__action-btn--send.loading.pending:hover {
background: var(--color-yellow);
}
}
.compose__actions {