feat(agent): 24 fournisseurs LLM + refonte du panneau Agent & IA
Enregistre OpenAI, Anthropic, Mistral, Cohere, Google Gemini, Groq, DeepSeek, OpenRouter, NVIDIA NIM, Together, Perplexity, xAI, DashScope, MiniMax, Morph, Fireworks, Cerebras, SambaNova, Chutes, Xiaomi, LTX, SEA-LION, SenseNova et MemTensor (URLs de base + presets de modeles + libelles). Settings: panneau Agent & IA repense en maitre/detail (liste rechercheable + volet de configuration) pour tenir avec des dizaines de fournisseurs, en conservant tous les boutons/fonctions.
This commit is contained in:
+129
-50
@@ -99,6 +99,32 @@
|
||||
.prov-card .pw-wrapper .settings-input{padding-right:36px;}
|
||||
.prov-msg{font-size:12px;margin-top:8px;min-height:0;word-break:break-word;}
|
||||
.llm-hint{font-size:12px;color:var(--text-secondary);background:rgba(35,131,226,.07);border:1px solid rgba(35,131,226,.18);border-radius:8px;padding:8px 12px;margin-top:14px;line-height:1.5;}
|
||||
|
||||
/* Agent & IA — provider master/detail (scales to dozens of providers) */
|
||||
.llm-toolbar{display:flex;align-items:center;gap:10px;margin-bottom:12px;flex-wrap:wrap;}
|
||||
.llm-search{position:relative;flex:1;min-width:180px;}
|
||||
.llm-search svg{position:absolute;left:10px;top:50%;transform:translateY(-50%);color:var(--text-dim);pointer-events:none;}
|
||||
.llm-search input{padding-left:32px;box-sizing:border-box;}
|
||||
.llm-count{font-size:11px;color:var(--text-dim);white-space:nowrap;text-transform:uppercase;letter-spacing:.4px;}
|
||||
.llm-layout{display:grid;grid-template-columns:264px 1fr;gap:14px;align-items:start;}
|
||||
.llm-list{border:1px solid var(--border);border-radius:12px;background:var(--bg-secondary);max-height:480px;overflow-y:auto;padding:6px;display:flex;flex-direction:column;gap:2px;}
|
||||
.llm-list-item{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:8px;cursor:pointer;transition:background 100ms;border:1px solid transparent;}
|
||||
.llm-list-item:hover{background:var(--bg-hover);}
|
||||
.llm-list-item.active{background:rgba(35,131,226,.14);border-color:rgba(35,131,226,.3);}
|
||||
.llm-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;background:var(--text-dim);}
|
||||
.llm-dot.ok{background:#2ea043;}
|
||||
.llm-dot.warn{background:#d9730d;}
|
||||
.llm-dot.err{background:#e03e3e;}
|
||||
.llm-list-name{flex:1;min-width:0;font-size:13px;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
|
||||
.llm-list-status{font-size:10px;color:var(--text-dim);text-transform:uppercase;letter-spacing:.4px;white-space:nowrap;}
|
||||
.llm-list-empty{padding:12px;font-size:12px;color:var(--text-dim);text-align:center;}
|
||||
.llm-detail{border:1px solid var(--border);border-radius:12px;background:var(--bg-secondary);padding:16px;min-height:260px;}
|
||||
.llm-detail-head{display:flex;align-items:center;gap:10px;margin-bottom:4px;flex-wrap:wrap;}
|
||||
.llm-detail-name{font-size:15px;font-weight:600;color:var(--text);}
|
||||
.llm-detail-base{font-size:11px;color:var(--text-dim);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;word-break:break-all;margin-bottom:12px;}
|
||||
.llm-detail .prov-field-row{margin-top:12px;}
|
||||
.llm-detail-empty{display:flex;align-items:center;justify-content:center;height:260px;font-size:13px;color:var(--text-dim);text-align:center;padding:0 20px;}
|
||||
@media (max-width:760px){.llm-layout{grid-template-columns:1fr;}.llm-list{max-height:220px;}}
|
||||
</style>
|
||||
|
||||
<div class="settings-overlay" x-data="settingsInit()" @keydown.escape="window.history.back()">
|
||||
@@ -874,61 +900,82 @@
|
||||
<!-- My providers (per-user API keys) -->
|
||||
<div class="setting-group">
|
||||
<h3>Mes fournisseurs</h3>
|
||||
<p style="font-size:12px;color:var(--text-dim);margin:0 0 12px;">Enregistrez vos propres clés : elles sont utilisées quand vous choisissez ce fournisseur dans le panneau Agent, et vous rendent le fournisseur disponible (après test réussi).</p>
|
||||
<div class="prov-grid">
|
||||
<template x-for="p in userProviders()" :key="p.id">
|
||||
<div class="prov-card">
|
||||
<div class="prov-card-head">
|
||||
<span class="prov-card-name" x-text="p.name"></span>
|
||||
<span class="llm-badge" :class="llmBadgeClass(p)" x-text="llmBadge(p)"></span>
|
||||
<p style="font-size:12px;color:var(--text-dim);margin:0 0 12px;">Enregistrez vos propres clés : elles sont utilisées quand vous choisissez ce fournisseur dans le panneau Agent, et vous rendent le fournisseur disponible (après test réussi). Sélectionnez un fournisseur dans la liste pour le configurer.</p>
|
||||
<div class="llm-toolbar">
|
||||
<div class="llm-search">
|
||||
{{ fd_icon("search",14) }}
|
||||
<input type="text" class="settings-input" x-model="llmSearch" placeholder="Rechercher un fournisseur…">
|
||||
</div>
|
||||
<span class="llm-count" x-text="filteredProviders().length + ' fournisseurs'"></span>
|
||||
</div>
|
||||
<div class="llm-layout">
|
||||
<div class="llm-list">
|
||||
<template x-for="p in filteredProviders()" :key="p.id">
|
||||
<div class="llm-list-item" :class="{active: p.id===selectedProviderId}" @click="selectProvider(p.id)">
|
||||
<span class="llm-dot" :class="llmBadgeClass(p)"></span>
|
||||
<span class="llm-list-name" x-text="p.name"></span>
|
||||
<span class="llm-list-status" x-text="llmShortStatus(p)"></span>
|
||||
</div>
|
||||
<div class="prov-card-sub" x-show="keyForm(p.id).last_error" style="color:var(--danger);" x-text="'Dernier test : ' + keyForm(p.id).last_error"></div>
|
||||
<div class="prov-field-row">
|
||||
<div class="prov-field-label">Clé API <span class="muted" x-text="keyForm(p.id).has_key ? '(enregistrée — laisser vide pour conserver)' : ''"></span></div>
|
||||
<div class="pw-wrapper" style="max-width:100%;">
|
||||
<input :type="keyForm(p.id).keyVisible ? 'text' : 'password'" class="settings-input"
|
||||
x-model="keyForm(p.id).api_key" placeholder="sk-…" style="padding-right:36px;box-sizing:border-box;">
|
||||
<button type="button" class="pw-toggle" @click="keyForm(p.id).keyVisible=!keyForm(p.id).keyVisible" style="top:50%;">
|
||||
<span x-show="keyForm(p.id).keyVisible" x-cloak>{{ fd_icon('eye-off',14) }}</span>
|
||||
<span x-show="!keyForm(p.id).keyVisible" x-cloak>{{ fd_icon('eye',14) }}</span>
|
||||
</template>
|
||||
<div class="llm-list-empty" x-show="!filteredProviders().length">Aucun fournisseur</div>
|
||||
</div>
|
||||
<div class="llm-detail">
|
||||
<template x-if="selectedProvider()">
|
||||
<div>
|
||||
<div class="llm-detail-head">
|
||||
<span class="llm-detail-name" x-text="selectedProvider().name"></span>
|
||||
<span class="llm-badge" :class="llmBadgeClass(selectedProvider())" x-text="llmBadge(selectedProvider())"></span>
|
||||
</div>
|
||||
<div class="llm-detail-base" x-text="keyForm(selectedProviderId).api_base || selectedProvider().base_url || '—'"></div>
|
||||
<div class="prov-card-sub" x-show="keyForm(selectedProviderId).last_error" style="color:var(--danger);margin-bottom:0;" x-text="'Dernier test : ' + keyForm(selectedProviderId).last_error"></div>
|
||||
<div class="prov-field-row">
|
||||
<div class="prov-field-label">Clé API <span class="muted" x-text="keyForm(selectedProviderId).has_key ? '(enregistrée — laisser vide pour conserver)' : (selectedProvider().requires_key ? '(requise)' : '(optionnelle)')"></span></div>
|
||||
<div class="pw-wrapper" style="max-width:100%;">
|
||||
<input :type="keyForm(selectedProviderId).keyVisible ? 'text' : 'password'" class="settings-input"
|
||||
x-model="keyForm(selectedProviderId).api_key" placeholder="sk-…" style="padding-right:36px;box-sizing:border-box;">
|
||||
<button type="button" class="pw-toggle" @click="keyForm(selectedProviderId).keyVisible=!keyForm(selectedProviderId).keyVisible" style="top:50%;">
|
||||
<span x-show="keyForm(selectedProviderId).keyVisible" x-cloak>{{ fd_icon('eye-off',14) }}</span>
|
||||
<span x-show="!keyForm(selectedProviderId).keyVisible" x-cloak>{{ fd_icon('eye',14) }}</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="prov-field-row">
|
||||
<div class="prov-field-label">URL API <span class="muted">(optionnelle)</span></div>
|
||||
<input type="text" class="settings-input" x-model="keyForm(selectedProviderId).api_base" placeholder="https://…" style="box-sizing:border-box;">
|
||||
</div>
|
||||
<div class="prov-field-row">
|
||||
<div class="prov-field-label">Modèle par défaut</div>
|
||||
<select class="settings-input" x-model="keyForm(selectedProviderId).model" style="box-sizing:border-box;">
|
||||
<template x-for="m in keyModels(selectedProviderId)" :key="m">
|
||||
<option :value="m" x-text="m"></option>
|
||||
</template>
|
||||
</select>
|
||||
</div>
|
||||
<div class="prov-actions">
|
||||
<button class="btn btn-primary" @click="saveUserKey(selectedProviderId)" :disabled="keyForm(selectedProviderId).saving" style="font-size:12px;padding:6px 12px;">
|
||||
<span x-show="!keyForm(selectedProviderId).saving">{{ fd_icon("save",14) }} Enregistrer & tester</span>
|
||||
<span x-show="keyForm(selectedProviderId).saving">Enregistrement…</span>
|
||||
</button>
|
||||
<button class="btn" @click="testUserKey(selectedProviderId)" :disabled="keyForm(selectedProviderId).testing" style="font-size:12px;padding:6px 12px;">
|
||||
<span x-show="!keyForm(selectedProviderId).testing">🔌 Tester</span>
|
||||
<span x-show="keyForm(selectedProviderId).testing">Test…</span>
|
||||
</button>
|
||||
<button class="btn" @click="loadProviderModels(selectedProviderId)" :disabled="keyForm(selectedProviderId).modelLoading" style="font-size:12px;padding:6px 12px;">
|
||||
<span x-show="!keyForm(selectedProviderId).modelLoading">{{ fd_icon("refresh",14) }} Modèles</span>
|
||||
<span x-show="keyForm(selectedProviderId).modelLoading">Chargement…</span>
|
||||
</button>
|
||||
<button class="btn" @click="deleteUserKey(selectedProviderId)" :disabled="keyForm(selectedProviderId).deleting" x-show="keyForm(selectedProviderId).has_key" style="font-size:12px;padding:6px 12px;color:var(--danger);">Supprimer</button>
|
||||
</div>
|
||||
<div class="prov-msg">
|
||||
<span x-show="keyForm(selectedProviderId).msg" x-text="keyForm(selectedProviderId).msg" :style="{color: keyForm(selectedProviderId).ok ? 'var(--toast-success-bg)' : 'var(--danger)'}"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="prov-field-row">
|
||||
<div class="prov-field-label">URL API <span class="muted">(optionnelle)</span></div>
|
||||
<input type="text" class="settings-input" x-model="keyForm(p.id).api_base" placeholder="https://…" style="box-sizing:border-box;">
|
||||
</div>
|
||||
<div class="prov-field-row">
|
||||
<div class="prov-field-label">Modèle par défaut</div>
|
||||
<select class="settings-input" x-model="keyForm(p.id).model" style="box-sizing:border-box;">
|
||||
<template x-for="m in keyModels(p.id)" :key="m">
|
||||
<option :value="m" x-text="m"></option>
|
||||
</template>
|
||||
</select>
|
||||
</div>
|
||||
<div class="prov-actions">
|
||||
<button class="btn btn-primary" @click="saveUserKey(p.id)" :disabled="keyForm(p.id).saving" style="font-size:12px;padding:6px 12px;">
|
||||
<span x-show="!keyForm(p.id).saving">{{ fd_icon("save",14) }} Enregistrer & tester</span>
|
||||
<span x-show="keyForm(p.id).saving">Enregistrement…</span>
|
||||
</button>
|
||||
<button class="btn" @click="testUserKey(p.id)" :disabled="keyForm(p.id).testing" style="font-size:12px;padding:6px 12px;">
|
||||
<span x-show="!keyForm(p.id).testing">🔌 Tester</span>
|
||||
<span x-show="keyForm(p.id).testing">Test…</span>
|
||||
</button>
|
||||
<button class="btn" @click="loadProviderModels(p.id)" :disabled="keyForm(p.id).modelLoading" style="font-size:12px;padding:6px 12px;">
|
||||
<span x-show="!keyForm(p.id).modelLoading">{{ fd_icon("refresh",14) }} Modèles</span>
|
||||
<span x-show="keyForm(p.id).modelLoading">Chargement…</span>
|
||||
</button>
|
||||
<button class="btn" @click="deleteUserKey(p.id)" :disabled="keyForm(p.id).deleting" x-show="keyForm(p.id).has_key" style="font-size:12px;padding:6px 12px;color:var(--danger);">Supprimer</button>
|
||||
</div>
|
||||
<div class="prov-msg">
|
||||
<span x-show="keyForm(p.id).msg" x-text="keyForm(p.id).msg" :style="{color: keyForm(p.id).ok ? 'var(--toast-success-bg)' : 'var(--danger)'}"></span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
<div class="llm-detail-empty" x-show="!selectedProvider()">Sélectionnez un fournisseur pour le configurer.</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="llm-hint">
|
||||
💡 <b>Comment activer un fournisseur ?</b> Enregistrez votre clé puis cliquez « Enregistrer & tester » (ou « Tester ») : dès que la connexion réussit, le fournisseur et ses modèles apparaissent dans le sélecteur du panneau Agent.
|
||||
💡 <b>Comment activer un fournisseur ?</b> Sélectionnez-le, enregistrez votre clé puis cliquez « Enregistrer & tester » (ou « Tester ») : dès que la connexion réussit, le fournisseur et ses modèles apparaissent dans le sélecteur du panneau Agent.
|
||||
Pour Ollama, aucun fournisseur distant : renseignez l'URL locale (ex. <code>http://localhost:11434/v1</code>) puis testez.
|
||||
En mode hors-ligne (aucun fournisseur actif), l'agent reste utilisable mais génère du contenu local, sans appel réseau.
|
||||
</div>
|
||||
@@ -994,6 +1041,8 @@ function settingsInit() {
|
||||
llmSummaryDesc: '',
|
||||
// Per-user provider keys (multi-providers)
|
||||
keyForms: {},
|
||||
llmSearch: '',
|
||||
selectedProviderId: null,
|
||||
|
||||
// Automations (v5.1.0)
|
||||
automations: [],
|
||||
@@ -1218,6 +1267,29 @@ function settingsInit() {
|
||||
userProviders() {
|
||||
return (this.llmProviders || []).filter(x => x.id !== 'offline');
|
||||
},
|
||||
selectedProvider() {
|
||||
return this.providerById(this.selectedProviderId);
|
||||
},
|
||||
filteredProviders() {
|
||||
var q = (this.llmSearch || '').trim().toLowerCase();
|
||||
var list = this.userProviders();
|
||||
if (!q) return list;
|
||||
return list.filter(function(p){
|
||||
return (p.name || '').toLowerCase().indexOf(q) !== -1 ||
|
||||
(p.id || '').toLowerCase().indexOf(q) !== -1;
|
||||
});
|
||||
},
|
||||
selectProvider(id) {
|
||||
this.selectedProviderId = id;
|
||||
this.keyForm(id);
|
||||
},
|
||||
llmShortStatus(p) {
|
||||
if (!p) return '';
|
||||
if (p.id === 'offline') return 'mock';
|
||||
if (p.verified) return 'actif';
|
||||
if (p.configured) return 'à tester';
|
||||
return '—';
|
||||
},
|
||||
// Set the verified/last_error state on the shared provider entry + its keyForm
|
||||
_setProviderState(id, ok, error) {
|
||||
var p = this.providerById(id);
|
||||
@@ -1307,6 +1379,12 @@ function settingsInit() {
|
||||
f.has_key = !!(k && k.has_key);
|
||||
f.last_error = (k && k.last_error) || p.last_error || '';
|
||||
});
|
||||
if (!this.selectedProviderId || !this.providerById(this.selectedProviderId)) {
|
||||
var pool = this.userProviders();
|
||||
var pick = pool.find(x => x.verified) || pool.find(x => x.configured) || pool[0];
|
||||
this.selectedProviderId = pick ? pick.id : null;
|
||||
}
|
||||
if (this.selectedProviderId) this.keyForm(this.selectedProviderId);
|
||||
this.syncLlmStatus();
|
||||
} catch(e) {}
|
||||
},
|
||||
@@ -1402,7 +1480,8 @@ function settingsInit() {
|
||||
finally { f.testing = false; }
|
||||
},
|
||||
async deleteUserKey(id) {
|
||||
var pname = id.charAt(0).toUpperCase() + id.slice(1);
|
||||
var p = this.providerById(id);
|
||||
var pname = (p && p.name) || id;
|
||||
if (!confirm('Supprimer la clé API pour ' + pname + ' ?\nLe fournisseur ne sera plus disponible dans le panneau Agent.')) return;
|
||||
var f = this.keyForm(id);
|
||||
f.deleting = true; f.msg = ''; f.ok = false;
|
||||
|
||||
Reference in New Issue
Block a user