Skip to content

fix: keep chat compaction modal fully visible #1644

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
ruizanthony wants to merge 9 commits into
base: main
Choose a base branch
from
Open

fix: keep chat compaction modal fully visible #1644

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
1a5004f
fix: keep chat compaction modal fully visible
May 16, 2026
a1098a0
fix: use theme colors in chat compaction modal controls
May 17, 2026
59838b9
Improve Telegram branch, control commands and webhook reliability
May 23, 2026
9747192
Fix Telegram topic archive project detection
May 23, 2026
f1b7539
Fix Telegram project picker refresh and topic prefix
May 24, 2026
afbe7ae
Use context id for Telegram project callbacks
May 24, 2026
fc767ef
Add Telegram topic rename diagnostic command
May 24, 2026
eaa8a93
Fix Telegram project topic prefix thread persistence
May 24, 2026
b47d922
Ensure Telegram project callback renames topic
May 24, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
75 changes: 42 additions & 33 deletions ...ins/_chat_compaction/extensions/webui/chat-input-bottom-actions-start/compact-button.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -131,11 +131,14 @@ <h3>Compact Chat History</h3>
}

.cmpct-dialog {
background: var(--color-panel, #1a1a1a);
background: var(--color-panel, var(--color-background));
border-radius: 12px;
box-shadow: 0 4px 23px rgba(0, 0, 0, 0.3);
width: 90%;
max-width: 560px;
max-height: 85dvh;
display: flex;
flex-direction: column;
overflow: hidden;
}

Expand All @@ -144,14 +147,15 @@ <h3>Compact Chat History</h3>
align-items: center;
justify-content: space-between;
padding: 16px 20px;
border-bottom: 1px solid var(--color-border, #333);
border-bottom: 1px solid var(--color-border);
flex-shrink: 0;
}

.cmpct-header h3 {
margin: 0;
font-size: 1.1rem;
font-weight: 600;
color: var(--color-text, #e5e5e5);
color: var(--color-text);
}

.cmpct-close {
Expand All @@ -160,21 +164,24 @@ <h3>Compact Chat History</h3>
cursor: pointer;
padding: 4px;
border-radius: 4px;
color: var(--color-text-secondary, #999);
color: var(--color-text-secondary);
transition: color 0.2s;
}

.cmpct-close:hover {
color: var(--color-text, #e5e5e5);
color: var(--color-text);
}

.cmpct-body {
padding: 20px;
overflow-y: auto;
flex: 1;
min-height: 0;
}

.cmpct-desc {
margin: 0 0 16px 0;
color: var(--color-text-secondary, #999);
color: var(--color-text-secondary);
font-size: 0.9rem;
}

Expand All @@ -190,13 +197,13 @@ <h3>Compact Chat History</h3>
flex-direction: column;
align-items: center;
padding: 12px 8px;
background: var(--color-background-muted, #252525);
background: var(--color-background-muted);
border-radius: 8px;
}

.cmpct-stat-label {
font-size: 0.7rem;
color: var(--color-text-secondary, #999);
color: var(--color-text-secondary);
text-transform: uppercase;
letter-spacing: 0.05em;
margin-bottom: 4px;
Expand All @@ -205,7 +212,7 @@ <h3>Compact Chat History</h3>
.cmpct-stat-value {
font-size: 1.1rem;
font-weight: 600;
color: var(--color-text, #e5e5e5);
color: var(--color-text);
}

/* Model selection section */
Expand All @@ -215,7 +222,7 @@ <h3>Compact Chat History</h3>

.cmpct-model-label {
font-size: 0.7rem;
color: var(--color-text-secondary, #999);
color: var(--color-text-secondary);
text-transform: uppercase;
letter-spacing: 0.05em;
margin-bottom: 8px;
Expand All @@ -232,53 +239,53 @@ <h3>Compact Chat History</h3>
min-width: 0;
padding: 6px 10px;
border-radius: 6px;
border: 1px solid var(--color-border, #333);
background: var(--color-background-muted, #252525);
color: var(--color-text, #e5e5e5);
border: 1px solid var(--color-border);
background: var(--color-background-muted);
color: var(--color-text);
font-size: 0.85rem;
cursor: pointer;
}

.cmpct-select:focus {
outline: none;
border-color: var(--color-primary, #3b82f6);
border-color: var(--color-primary);
}

.cmpct-toggle {
display: flex;
border-radius: 6px;
border: 1px solid var(--color-border, #333);
border: 1px solid var(--color-border);
overflow: hidden;
flex-shrink: 0;
}

.cmpct-toggle button {
padding: 6px 14px;
border: none;
background: var(--color-background-muted, #252525);
color: var(--color-text-secondary, #999);
background: var(--color-background-muted);
color: var(--color-text-secondary);
font-size: 0.8rem;
font-weight: 500;
cursor: pointer;
transition: all 0.15s;
}

.cmpct-toggle button:first-child {
border-right: 1px solid var(--color-border, #333);
border-right: 1px solid var(--color-border);
}

.cmpct-toggle button.active {
background: var(--color-primary, #3b82f6);
color: white;
background: color-mix(in srgb, var(--color-primary) 18%, var(--color-background-muted));
color: var(--color-primary);
}

.cmpct-toggle button:hover:not(.active) {
background: var(--color-background-hover, #444);
background: var(--color-background-hover);
}

.cmpct-model-name {
font-size: 0.85rem;
color: var(--color-text, #e5e5e5);
color: var(--color-text);
opacity: 0.7;
white-space: nowrap;
overflow: hidden;
Expand All @@ -290,10 +297,10 @@ <h3>Compact Chat History</h3>
align-items: flex-start;
gap: 8px;
padding: 10px 12px;
background: rgba(34, 197, 94, 0.1);
border: 1px solid rgba(34, 197, 94, 0.25);
background: color-mix(in srgb, var(--color-primary) 10%, transparent);
border: 1px solid color-mix(in srgb, var(--color-primary) 26%, var(--color-border));
border-radius: 8px;
color: #4ade80;
color: color-mix(in srgb, var(--color-primary) 85%, var(--color-text));
font-size: 0.8rem;
}

Expand All @@ -308,15 +315,16 @@ <h3>Compact Chat History</h3>
justify-content: center;
gap: 8px;
padding: 30px;
color: var(--color-text-secondary, #999);
color: var(--color-text-secondary);
}

.cmpct-footer {
display: flex;
justify-content: flex-end;
gap: 8px;
padding: 12px 20px;
border-top: 1px solid var(--color-border, #333);
border-top: 1px solid var(--color-border);
flex-shrink: 0;
}

.cmpct-btn {
Expand All @@ -338,21 +346,22 @@ <h3>Compact Chat History</h3>
}

.cmpct-btn-cancel {
background: var(--color-background-muted, #333);
color: var(--color-text, #e5e5e5);
background: var(--color-background-muted);
color: var(--color-text);
}

.cmpct-btn-cancel:hover:not(:disabled) {
background: var(--color-background-hover, #444);
background: var(--color-background-hover);
}

.cmpct-btn-danger {
background: #dc2626;
color: white;
background: color-mix(in srgb, var(--color-error, #dc2626) 16%, var(--color-background-muted));
border: 1px solid color-mix(in srgb, var(--color-error, #dc2626) 36%, var(--color-border));
color: var(--color-error, #dc2626);
}

.cmpct-btn-danger:hover:not(:disabled) {
background: #b91c1c;
background: color-mix(in srgb, var(--color-error, #dc2626) 24%, var(--color-background-hover));
}

.cmpct-spinner {
Expand Down
22 changes: 15 additions & 7 deletions plugins/_chat_compaction/webui/compact-modal.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -122,8 +122,9 @@ <h3>Compact Chat History</h3>
box-shadow: var(--shadow-lg);
width: 90%;
max-width: 640px;
max-height: 90vh;
overflow-y: auto;
max-height: 85dvh;
display: flex;
flex-direction: column;
}

.modal-header {
Expand All @@ -132,6 +133,7 @@ <h3>Compact Chat History</h3>
justify-content: space-between;
padding: var(--spacing-md) var(--spacing-lg);
border-bottom: 1px solid var(--color-border);
flex-shrink: 0;
}

.modal-header h3 {
Expand All @@ -156,6 +158,9 @@ <h3>Compact Chat History</h3>

.modal-content {
padding: var(--spacing-lg);
overflow-y: auto;
flex: 1;
min-height: 0;
}

.stats-description {
Expand Down Expand Up @@ -255,8 +260,8 @@ <h3>Compact Chat History</h3>
}

.model-type-toggle button.active {
background: var(--color-primary, #3b82f6);
color: white;
background: color-mix(in srgb, var(--color-primary) 18%, var(--color-background-muted));
color: var(--color-primary);
}

.model-type-toggle button:hover:not(.active) {
Expand Down Expand Up @@ -322,6 +327,7 @@ <h3>Compact Chat History</h3>
gap: var(--spacing-sm);
padding: var(--spacing-md) var(--spacing-lg);
border-top: 1px solid var(--color-border);
flex-shrink: 0;
}

.button {
Expand Down Expand Up @@ -354,19 +360,21 @@ <h3>Compact Chat History</h3>
.button.primary {
background: var(--color-primary);
border: none;
color: white;
color: var(--color-background);
}

.button.primary:hover:not(:disabled) {
background: var(--color-primary-hover);
}

.button.danger {
background: var(--color-danger, #dc2626);
background: color-mix(in srgb, var(--color-error, #dc2626) 16%, var(--color-background-muted));
border: 1px solid color-mix(in srgb, var(--color-error, #dc2626) 36%, var(--color-border));
color: var(--color-error, #dc2626);
}

.button.danger:hover:not(:disabled) {
background: var(--color-danger-hover, #b91c1c);
background: color-mix(in srgb, var(--color-error, #dc2626) 24%, var(--color-background-hover));
}

.loading-spinner {
Expand Down
Loading