feat: Настройки › ИИ-ассистент - each model and the web search folded to a line (name, kind and model), opened when wanted; a new model opens, its line follows its fields

This commit is contained in:
redtea committed 2026-10-18 11:16:08 +03:00
1 parent fcf032042b
commit dcbc602d88
3 files changed
+31 -8

No files matched your search

+9 -2
View File
@@ -1126,8 +1126,15 @@ body.no-motion *, body.no-motion *::before, body.no-motion *::after, body.no-mot
.ai-form .ai-sub { margin:10px 0 0; font-size:15px; }
/* Настройки: the models, a card each. */
.ai-models { display:grid; gap:10px; }
.ai-model { display:grid; gap:10px; min-width:0; margin:0; padding:12px; border:1px solid var(--border); border-radius:10px; }
.ai-model-head { display:flex; align-items:flex-end; gap:8px; margin:12px 0 4px; }
.ai-model, .ai-search { min-width:0; margin:0; border:1px solid var(--border); border-radius:10px; }
/* Folded to a line: its name, and its kind and model quieter. */
.ai-model > summary.ai-model-sum, .ai-search > summary.ai-model-sum { min-width:0; padding:11px 12px; border-radius:10px; }
.ai-model > summary.ai-model-sum:hover, .ai-search > summary.ai-model-sum:hover { background:#151a21; }
.ai-model-title { flex:none; color:var(--text); font-size:14px; font-weight:550; }
.ai-model-sub { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--muted); font-size:12.5px; }
.ai-model-sub:not(:empty)::before { content:'· '; }
.ai-model-body { display:grid; gap:10px; min-width:0; padding:0 12px 12px; }
.ai-model-head { display:flex; align-items:flex-end; gap:8px; margin:2px 0 4px; }
.ai-model-head .ai-model-name { flex:1; min-width:0; margin:0; }
.ai-model-head .ai-model-short { flex:none; width:96px; margin:0; }
.ai-model-del { flex:none; height:38px; }
+13
View File
@@ -36,6 +36,19 @@
const del = ev.target.closest('.ai-model-del');
if (del && list.children.length > 1) del.closest('.ai-model').remove();
});
// A folded card's line follows its fields: the name, the kind and model.
list.addEventListener('input', ev => {
const card = ev.target.closest('.ai-model');
if (!card) return;
const v = n => card.querySelector('[name=' + n + ']').value.trim();
card.querySelector('.ai-model-title').textContent = v('m_name') || 'Модель';
card.querySelector('.ai-model-sub').textContent = v('m_type') + (v('m_model') ? ' · ' + v('m_model') : '');
});
// A field to fix in a folded card: the card opens to show it.
list.closest('form').addEventListener('invalid', ev => {
const d = ev.target.closest('details');
if (d) d.open = true;
}, true);
}
}
});
+9 -6
View File
@@ -154,7 +154,8 @@
<input type="hidden" name="csrf" value="{{.CSRF}}">
<p class="muted" style="margin:0">Моделей может быть несколько - в чате появится выбор; первая - по умолчанию.</p>
<div class="ai-models">
{{range .AIModels}} <fieldset class="ai-model">
{{range .AIModels}} <details class="ai-model"><summary class="ai-model-sum"><span class="ai-model-title">{{if .Name}}{{.Name}}{{else}}Модель{{end}}</span><span class="ai-model-sub">{{.Type}}{{if .Model}} · {{.Model}}{{end}}</span></summary>
<div class="ai-model-body">
<input type="hidden" name="m_id" value="{{.ID}}">
<div class="ai-model-head"><label class="ai-model-name">Название в чате<input type="text" name="m_name" value="{{.Name}}" placeholder="например, Claude"></label>
<label class="ai-model-short">Коротко<input type="text" name="m_short" value="{{.Short}}" maxlength="12" placeholder="до 12" title="Название на кнопке модели в чате, до 12 символов"></label>
@@ -168,10 +169,11 @@
<label>Модель<input type="text" name="m_model" value="{{.Model}}" placeholder="для OpenAI и Anthropic"></label>
<label>Ключ<span class="keybox"><input type="password" name="m_key" value="{{.Key}}" placeholder="не задан" autocomplete="off" spellcheck="false">
<button type="button" class="btn ghost small icon sq" title="Показать" aria-label="Показать ключ" onclick="var i=this.previousElementSibling;i.type=i.type==='password'?'text':'password'"><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12z"/><circle cx="12" cy="12" r="3"/></svg></button></span></label>
</fieldset>
</div></details>
{{end}} </div>
<template class="ai-model-new">
<fieldset class="ai-model">
<details class="ai-model" open><summary class="ai-model-sum"><span class="ai-model-title">Новая модель</span><span class="ai-model-sub"></span></summary>
<div class="ai-model-body">
<input type="hidden" name="m_id" value="">
<div class="ai-model-head"><label class="ai-model-name">Название в чате<input type="text" name="m_name" value="" placeholder="например, Claude"></label>
<label class="ai-model-short">Коротко<input type="text" name="m_short" value="" maxlength="12" placeholder="до 12" title="Название на кнопке модели в чате, до 12 символов"></label>
@@ -185,11 +187,11 @@
<label>Модель<input type="text" name="m_model" value="" placeholder="для OpenAI и Anthropic"></label>
<label>Ключ<span class="keybox"><input type="password" name="m_key" value="" placeholder="не задан" autocomplete="off" spellcheck="false">
<button type="button" class="btn ghost small icon sq" title="Показать" aria-label="Показать ключ" onclick="var i=this.previousElementSibling;i.type=i.type==='password'?'text':'password'"><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12z"/><circle cx="12" cy="12" r="3"/></svg></button></span></label>
</fieldset>
</div></details>
</template>
<div><button type="button" class="btn ghost small ai-model-add">+ Добавить модель</button></div>
<h3 class="ai-sub">Поиск в интернете</h3>
<p class="muted" style="margin:0">Запасной - DuckDuckGo.</p>
<details class="ai-search"><summary class="ai-model-sum"><span class="ai-model-title">Поиск в интернете</span><span class="ai-model-sub">Запасной - DuckDuckGo</span></summary>
<div class="ai-model-body">
<label>Поисковик<select name="ai_search" onchange="this.form.dataset.search = this.value">
<option value=""{{if eq .Search.Engine ""}} selected{{end}}>DuckDuckGo - бесплатно, без настройки</option>
<option value="searxng"{{if eq .Search.Engine "searxng"}} selected{{end}}>SearXNG - свой сервер</option>
@@ -199,6 +201,7 @@
<label class="s-url">Адрес SearXNG<input type="url" name="ai_search_url" value="{{.Search.URL}}" placeholder="http://127.0.0.1:8888 (в settings.yml: search.formats - json)"></label>
<label class="s-key">Ключ поисковика<span class="keybox"><input type="password" name="ai_search_key" value="{{.Search.Key}}" placeholder="не задан" autocomplete="off" spellcheck="false">
<button type="button" class="btn ghost small icon sq" title="Показать" aria-label="Показать ключ" onclick="var i=this.previousElementSibling;i.type=i.type==='password'?'text':'password'"><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12z"/><circle cx="12" cy="12" r="3"/></svg></button></span></label>
</div></details>
<div><button type="submit">Сохранить</button></div>
</form>
</div>