feat: Add Edit Presets button and adjust model switcher position
keyboardstaff committed
Mar 17, 2026 at 02:01 UTC
cb18fa9d1d227bdefa005cc4a7d1b096ae69268e
2 files changed
+35
-22
plugins/_model_config/extensions/webui/chat-nav-after/model-switcher.html
renamed
+33
-22
@@ -13,13 +13,13 @@
13
<template x-if="$store.modelConfig.switcherAllowed && !$store.modelConfig.switcherLoading">
14
<div class="model-switcher-container">
15
<div class="model-switcher-anchor">
16
- <button class="model-switcher-btn"
16
+ <button class="btn-icon-action model-switcher-btn"
17
:class="{ 'has-override': !!$store.modelConfig.switcherOverride }"
18
@click="showDropdown = !showDropdown"
19
@click.outside="showDropdown = false">
20
- <span class="material-symbols-outlined" style="font-size: 15px;">swap_horiz</span>
20
+ <span class="material-symbols-outlined">neurology</span>
21
<span class="model-switcher-label" x-text="$store.modelConfig.getSwitcherLabel()"></span>
22
- <span class="material-symbols-outlined" style="font-size: 14px;"
22
+ <span class="material-symbols-outlined" style="font-size: 0.75rem;"
23
x-text="showDropdown ? 'expand_less' : 'expand_more'"></span>
24
</button>
25
@@ -74,6 +74,21 @@
74
</div>
75
</div>
76
</template>
77
+
78
+ <!-- Edit Presets shortcut -->
79
+ <div class="model-switcher-divider" style="opacity:0.2;"></div>
80
+ <div class="model-switcher-item model-switcher-edit" @click="
81
+ (async () => {
82
+ await import('/components/plugins/plugin-settings-store.js');
83
+ const s = Alpine.store('pluginSettingsPrototype');
84
+ if (s && s.open) await s.open('_model_config', { perProjectConfig: true, perAgentConfig: true });
85
+ openModal('components/plugins/plugin-settings.html');
86
+ })();
87
+ showDropdown = false;
88
+ ">
89
+ <span class="material-symbols-outlined" style="font-size: 14px;">settings</span>
90
+ <span>Edit Presets</span>
91
+ </div>
92
</div>
93
</div>
94
</div>
@@ -84,37 +99,26 @@
99
100
<style>
101
.model-switcher-container {
87
- position: absolute;
88
- bottom: calc(100% + 50px);
89
- right: 16px;
102
+ position: relative;
103
z-index: 10;
91
- pointer-events: auto;
104
}
105
.model-switcher-anchor {
106
position: relative;
107
}
108
.model-switcher-btn {
97
- display: inline-flex;
98
- align-items: center;
109
+ width: auto;
110
+ height: auto;
111
gap: 4px;
100
- padding: 3px 10px;
101
- border: 1px solid var(--color-border);
102
- border-radius: 16px;
103
- background: var(--color-panel);
104
- color: var(--color-text-secondary, #999);
112
+ padding: var(--spacing-xs) var(--spacing-sm);
113
+ border: none;
114
font-size: 0.75rem;
106
- cursor: pointer;
107
- transition: all 0.15s ease;
115
white-space: nowrap;
109
- box-shadow: 0 1px 6px rgba(0, 0, 0, 0.25);
116
}
117
.model-switcher-btn:hover {
112
- border-color: var(--color-border);
113
- color: var(--color-text-secondary, #666);
118
+ border: none;
119
}
120
.model-switcher-btn.has-override {
116
- border-color: var(--color-highlight);
117
- color: var(--color-highlight);
121
+ color: var(--color-text);
122
}
123
.model-switcher-label {
124
max-width: 160px;
@@ -132,7 +136,7 @@
136
border: 1px solid var(--color-border);
137
border-radius: 8px;
138
padding: 6px;
135
- box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
139
+ box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
140
z-index: 100;
141
}
142
.model-switcher-item {
@@ -196,4 +200,11 @@
200
text-overflow: ellipsis;
201
white-space: nowrap;
202
}
203
+ .model-switcher-edit {
204
+ display: flex;
205
+ align-items: center;
206
+ gap: 6px;
207
+ opacity: 0.6;
208
+ font-size: 0.75rem;
209
+ }
210
</style>
webui/components/chat/input/progress.html
+2
@@ -31,6 +31,7 @@
31
<span class="material-symbols-outlined">vertical_align_bottom</span>
32
</button>
33
</div>
34
+ <x-extension id="chat-nav-after"></x-extension>
35
</div>
36
<x-extension id="chat-input-progress-end"></x-extension>
37
</div>
@@ -43,6 +44,7 @@
44
#progress-bar-h { color: var(--color-primary); display: flex; align-items: left; justify-content: flex-start; height: 1.2em; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; font-weight: normal; }
45
#progress-bar-i { font-weight: bold; padding-right: 0.5em; color: var(--color-secondary); }
46
#progress-bar-right { display: flex; align-items: center; gap: var(--spacing-sm); flex-shrink: 0; }
47
+ #progress-bar-right > x-extension { display: contents; }
48
#chat-nav-buttons { display: flex; align-items: center; gap: 2px; opacity: 0.85; }
49
#chat-nav-buttons .btn-icon-action { padding: var(--spacing-xs); }
50
#chat-nav-buttons .btn-icon-action {