vrr/agent-zero
2
0
Fork 0
mirror of https://github.com/agent0ai/agent-zero.git synced 2026-04-29 12:10:57 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 4

feat: allow model selection in compaction modal

Browse source
This commit is contained in:
Nicolas Leão 2026-03-26 16:01:01 -03:00
parent d42301a9b1
commit 32eb5f8fba
5 changed files with 357 additions and 157 deletions
Download patch file Download diff file Expand all files Collapse all files

123
plugins/_chat_compaction/extensions/webui/chat-input-bottom-actions-start/compact-button.html
View file

@ -58,15 +58,35 @@
<span class="cmpct-stat-label">Tokens</span>
<span class="cmpct-stat-value" x-text="$store.compactStore?.stats?.token_count?.toLocaleString()"></span>
</div>
<div class="cmpct-stat">
<span class="cmpct-stat-label">Model</span>
<span class="cmpct-stat-value" x-text="$store.compactStore?.stats?.model_name"></span>
</div>
<!-- Model selection -->
<div class="cmpct-model-section">
<div class="cmpct-model-label">Model</div>
<div class="cmpct-model-controls">
<select class="cmpct-select"
x-model="$store.compactStore.selectedPresetName">
<option value="">Current</option>
<template x-for="preset in $store.compactStore.presets" :key="preset.name">
<option :value="preset.name" x-text="preset.name"></option>
</template>
</select>
<div class="cmpct-toggle">
<button :class="{ active: $store.compactStore.useChatModel }"
@click="$store.compactStore.useChatModel = true">Chat</button>
<button :class="{ active: !$store.compactStore.useChatModel }"
@click="$store.compactStore.useChatModel = false">Utility</button>
</div>
</div>
<div class="cmpct-model-name" x-text="$store.compactStore.selectedModelDisplay"></div>
</div>
<div class="cmpct-warning">
<span class="material-symbols-outlined">warning</span>
<span>This action cannot be undone. The original conversation will be replaced with a summary.</span>
<div class="cmpct-info">
<span class="material-symbols-outlined">check_circle</span>
<span>The context will be replaced with a compacted summary. The original conversation will be backed up.</span>
</div>
</div>
</template>
@ -115,7 +135,7 @@
border-radius: 12px;
box-shadow: 0 4px 23px rgba(0, 0, 0, 0.3);
width: 90%;
max-width: 420px;
max-width: 560px;
overflow: hidden;
}
@ -160,7 +180,7 @@
.cmpct-stats {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-columns: repeat(2, 1fr);
gap: 12px;
margin-bottom: 16px;
}
@ -188,19 +208,96 @@
color: var(--color-text, #e5e5e5);
}
.cmpct-warning {
/* Model selection section */
.cmpct-model-section {
margin-bottom: 16px;
}
.cmpct-model-label {
font-size: 0.7rem;
color: var(--color-text-secondary, #999);
text-transform: uppercase;
letter-spacing: 0.05em;
margin-bottom: 8px;
}
.cmpct-model-controls {
display: flex;
gap: 8px;
margin-bottom: 6px;
}
.cmpct-select {
flex: 1;
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);
font-size: 0.85rem;
cursor: pointer;
}
.cmpct-select:focus {
outline: none;
border-color: var(--color-primary, #3b82f6);
}
.cmpct-toggle {
display: flex;
border-radius: 6px;
border: 1px solid var(--color-border, #333);
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);
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);
}
.cmpct-toggle button.active {
background: var(--color-primary, #3b82f6);
color: white;
}
.cmpct-toggle button:hover:not(.active) {
background: var(--color-background-hover, #444);
}
.cmpct-model-name {
font-size: 0.85rem;
color: var(--color-text, #e5e5e5);
opacity: 0.7;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.cmpct-info {
display: flex;
align-items: flex-start;
gap: 8px;
padding: 10px 12px;
background: rgba(245, 158, 11, 0.1);
border: 1px solid rgba(245, 158, 11, 0.3);
background: rgba(34, 197, 94, 0.1);
border: 1px solid rgba(34, 197, 94, 0.25);
border-radius: 8px;
color: #f59e0b;
color: #4ade80;
font-size: 0.8rem;
}
.cmpct-warning .material-symbols-outlined {
.cmpct-info .material-symbols-outlined {
font-size: 1.1rem;
flex-shrink: 0;
}