@samitouri / QOSami_Agents_Zero-1
Code Commits Issues Pulls Sessions CI/CD
main
main
html 161 lines 4.23 KB
Raw
1 <html>
2 <body>
3 <div class="model-preset-widget">
4 <label class="model-preset-picker">
5 <span>
6 <span class="field-title">Model preset</span>
7 <span class="field-description" x-text="presetDescription || 'Choose the models Agent Zero should use.'"></span>
8 </span>
9 <select :value="selectedPresetName"
10 @change="selectPreset($el.value)"
11 :disabled="loading">
12 <template x-for="preset in presets" :key="preset.name">
13 <option :value="preset.name" x-text="preset.name"></option>
14 </template>
15 </select>
16 </label>
17
18 <div class="model-preset-rows" aria-live="polite">
19 <template x-for="model in modelRows" :key="model.title">
20 <div class="model-preset-row"
21 :class="{ 'model-preset-row-nested': model.title === 'Vision' }">
22 <template x-if="model.title !== 'Vision'">
23 <x-icon class="model-preset-icon" :name="model.icon"></x-icon>
24 </template>
25 <template x-if="model.title !== 'Vision'">
26 <span class="model-preset-role" x-text="model.title"></span>
27 </template>
28 <span class="model-preset-identity"
29 :class="{ 'model-preset-identity-vision': model.title === 'Vision' }">
30 <template x-if="model.title === 'Vision'">
31 <span>
32 <span class="model-preset-role">Vision override</span>
33 <span class="model-preset-separator">/</span>
34 </span>
35 </template>
36 <span class="model-preset-provider" x-text="model.provider"></span>
37 <span class="model-preset-separator">/</span>
38 <span x-text="model.name"></span>
39 </span>
40 </div>
41 </template>
42 </div>
43
44 <div class="model-preset-actions">
45 <button type="button" class="button" @click="editPresets()">
46 <x-icon class="icon" name="tune"></x-icon>
47 Edit Presets
48 </button>
49 <button type="button" class="button" @click="apiKeys()">
50 <x-icon class="icon" name="key"></x-icon>
51 API Keys
52 </button>
53 <button type="button" class="button" x-show="showScopedSettings" @click="scopedSettings()">
54 <x-icon class="icon" name="account_tree"></x-icon>
55 Per-project / agent
56 </button>
57 </div>
58 </div>
59
60 <style>
61 .model-preset-widget {
62 display: flex;
63 flex-direction: column;
64 gap: 0.85rem;
65 }
66
67 .model-preset-picker {
68 display: grid;
69 grid-template-columns: minmax(0, 1fr) minmax(13rem, 18rem);
70 align-items: center;
71 gap: 1rem;
72 margin: 0;
73 }
74
75 .model-preset-picker select {
76 width: 100%;
77 min-width: 0;
78 }
79
80 .model-preset-rows {
81 overflow: hidden;
82 border: 1px solid var(--color-border);
83 border-radius: 8px;
84 background: var(--color-input);
85 }
86
87 .model-preset-row {
88 display: grid;
89 grid-template-columns: 1.25rem 5.5rem minmax(0, 1fr);
90 align-items: center;
91 gap: 0.5rem;
92 min-width: 0;
93 padding: 0.65rem 0.8rem;
94 font-size: 0.82rem;
95 }
96
97 .model-preset-row + .model-preset-row {
98 border-top: 1px solid var(--color-border);
99 }
100
101 .model-preset-row-nested {
102 border-top: 0 !important;
103 padding-top: var(--spacing-xs);
104 font-size: 0.76rem;
105 }
106
107 .model-preset-identity-vision {
108 grid-column: 3;
109 }
110
111 .model-preset-icon,
112 .model-preset-provider,
113 .model-preset-separator {
114 opacity: 0.5;
115 }
116
117 .model-preset-icon {
118 font-size: 1rem;
119 }
120
121 .model-preset-role {
122 font-weight: 600;
123 opacity: 0.75;
124 }
125
126 .model-preset-identity {
127 min-width: 0;
128 overflow: hidden;
129 text-overflow: ellipsis;
130 white-space: nowrap;
131 }
132
133 .model-preset-separator {
134 margin: 0 0.25rem;
135 }
136
137 .model-preset-actions {
138 display: flex;
139 flex-wrap: wrap;
140 gap: 0.5rem;
141 }
142
143 @media (max-width: 640px) {
144 .model-preset-picker {
145 grid-template-columns: 1fr;
146 gap: 0.5rem;
147 }
148
149 .model-preset-row {
150 grid-template-columns: 1.25rem 4.5rem minmax(0, 1fr);
151 padding: 0.6rem;
152 }
153
154 .model-preset-actions .button {
155 flex: 1 1 auto;
156 justify-content: center;
157 }
158 }
159 </style>
160 </body>
161 </html>