feat: multi-provider AI with per-company override and Claude support
- Global settings: custom AI panel with OpenAI/Gemini/Claude each with API key, model selector, and live test-connection button (no save needed) - Per-company IA tab: same three providers + fallback to global when empty - AiBot: reads per-company config_json first, falls back to env() global - Added callClaude() for Anthropic Messages API - More OpenAI models: gpt-4.1, gpt-4.1-mini - test-ai endpoint: accepts provider/api_key/model from POST for live test Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Lizandro Guarnizo
co-authored by
Claude Sonnet 4.6
Claude Sonnet 4.6
parent
b82fcf6aaa
commit
2b859e3dc0
+187
-44
@@ -2298,17 +2298,38 @@ HTML;
|
||||
['key' => 'whatsapp_default_phone_number_id', 'label' => 'Phone Number ID (default)', 'type' => 'text', 'placeholder' => '384710295638401'],
|
||||
['key' => 'verify_hmac_signature', 'label' => 'Validar firma HMAC de Meta', 'type' => 'checkbox', 'placeholder' => ''],
|
||||
],
|
||||
'Inteligencia Artificial' => [
|
||||
['key' => 'ai_provider', 'label' => 'Proveedor', 'type' => 'select', 'options' => ['mock' => 'Mock (simulado)', 'openai' => 'OpenAI', 'gemini' => 'Google Gemini']],
|
||||
['key' => 'openai_api_key', 'label' => 'OpenAI API Key', 'type' => 'password', 'placeholder' => 'sk-...'],
|
||||
['key' => 'openai_model', 'label' => 'Modelo OpenAI', 'type' => 'select', 'options' => ['gpt-4o-mini' => 'GPT-4o Mini', 'gpt-4o' => 'GPT-4o', 'gpt-3.5-turbo' => 'GPT-3.5 Turbo']],
|
||||
['key' => 'gemini_api_key', 'label' => 'Google Gemini API Key', 'type' => 'password', 'placeholder' => 'AIza...'],
|
||||
['key' => 'gemini_model', 'label' => 'Modelo Gemini', 'type' => 'select', 'options' => ['gemini-2.5-flash' => 'Gemini 2.5 Flash', 'gemini-2.0-flash' => 'Gemini 2.0 Flash', 'gemini-1.5-flash' => 'Gemini 1.5 Flash', 'gemini-1.5-pro' => 'Gemini 1.5 Pro']],
|
||||
['key' => 'ai_max_tokens', 'label' => 'Máximo de tokens', 'type' => 'number', 'placeholder' => '500'],
|
||||
['key' => 'ai_default_prompt', 'label' => 'System Prompt por defecto', 'type' => 'textarea', 'placeholder' => 'Eres un asistente...'],
|
||||
],
|
||||
];
|
||||
|
||||
// ── Valores globales de IA para el panel custom ────────────────────────
|
||||
$gAiProvider = $settings['ai_provider'] ?? 'openai';
|
||||
$gOaiKey = self::h($settings['openai_api_key'] ?? '');
|
||||
$gOaiModel = $settings['openai_model'] ?? 'gpt-4o-mini';
|
||||
$gGemKey = self::h($settings['gemini_api_key'] ?? '');
|
||||
$gGemModel = $settings['gemini_model'] ?? 'gemini-2.5-flash';
|
||||
$gClaKey = self::h($settings['claude_api_key'] ?? '');
|
||||
$gClaModel = $settings['claude_model'] ?? 'claude-haiku-4-5';
|
||||
$gMaxTok = self::h($settings['ai_max_tokens'] ?? '500');
|
||||
$gPrompt = self::h($settings['ai_default_prompt'] ?? '');
|
||||
$gSelOai = $gAiProvider === 'openai' ? ' selected' : '';
|
||||
$gSelGem = $gAiProvider === 'gemini' ? ' selected' : '';
|
||||
$gSelCla = $gAiProvider === 'claude' ? ' selected' : '';
|
||||
$gSelMock = $gAiProvider === 'mock' ? ' selected' : '';
|
||||
$gShowOai = ($gAiProvider === 'openai' || $gAiProvider === '') ? '' : 'display:none';
|
||||
$gShowGem = $gAiProvider === 'gemini' ? '' : 'display:none';
|
||||
$gShowCla = $gAiProvider === 'claude' ? '' : 'display:none';
|
||||
$sOaiMini = $gOaiModel === 'gpt-4o-mini' ? ' selected' : '';
|
||||
$sOai41m = $gOaiModel === 'gpt-4.1-mini' ? ' selected' : '';
|
||||
$sOai4o = $gOaiModel === 'gpt-4o' ? ' selected' : '';
|
||||
$sOai41 = $gOaiModel === 'gpt-4.1' ? ' selected' : '';
|
||||
$sOai35 = $gOaiModel === 'gpt-3.5-turbo' ? ' selected' : '';
|
||||
$sGemF25 = $gGemModel === 'gemini-2.5-flash' ? ' selected' : '';
|
||||
$sGemF20 = $gGemModel === 'gemini-2.0-flash' ? ' selected' : '';
|
||||
$sGemF15 = $gGemModel === 'gemini-1.5-flash' ? ' selected' : '';
|
||||
$sGemP15 = $gGemModel === 'gemini-1.5-pro' ? ' selected' : '';
|
||||
$sClaH = $gClaModel === 'claude-haiku-4-5' ? ' selected' : '';
|
||||
$sClaS = $gClaModel === 'claude-sonnet-5' ? ' selected' : '';
|
||||
$sClaO = $gClaModel === 'claude-opus-4-8' ? ' selected' : '';
|
||||
|
||||
$versionHash = substr(sha1_file(__DIR__ . '/../.env'), 0, 8);
|
||||
|
||||
http_response_code(200);
|
||||
@@ -2369,45 +2390,131 @@ HTML;
|
||||
echo '</div></div></div>';
|
||||
}
|
||||
echo <<<HTML
|
||||
<!-- IA Global custom card (inside form, saves with the rest) -->
|
||||
<div class="card">
|
||||
<div class="card-h">🤖 Inteligencia Artificial (Global)</div>
|
||||
<div class="card-b">
|
||||
<div class="form-grid">
|
||||
<div>
|
||||
<label class="lbl">Proveedor por defecto</label>
|
||||
<select class="inp-sel" name="ai_provider" id="g_ai_provider" onchange="gAiChange(this.value)" style="width:100%">
|
||||
<option value="openai"{$gSelOai}>OpenAI (GPT)</option>
|
||||
<option value="gemini"{$gSelGem}>Google Gemini</option>
|
||||
<option value="claude"{$gSelCla}>Anthropic Claude</option>
|
||||
<option value="mock"{$gSelMock}>Mock (simulado)</option>
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label class="lbl">Máximo de tokens</label>
|
||||
<input class="inp" type="number" name="ai_max_tokens" value="{$gMaxTok}" placeholder="500">
|
||||
</div>
|
||||
<div class="fw">
|
||||
<label class="lbl">System Prompt por defecto</label>
|
||||
<textarea class="inp" name="ai_default_prompt" rows="3" placeholder="Eres un asistente...">{$gPrompt}</textarea>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- OpenAI -->
|
||||
<div id="g_oai" style="margin-top:14px;padding:14px;background:#f8f9fb;border-radius:8px;border:1px solid #e5e7eb;{$gShowOai}">
|
||||
<div style="font-weight:700;font-size:13px;margin-bottom:10px">🔵 OpenAI</div>
|
||||
<div class="form-grid">
|
||||
<div>
|
||||
<label class="lbl">API Key</label>
|
||||
<input class="inp" type="password" name="openai_api_key" id="g_oai_key" value="{$gOaiKey}" placeholder="sk-...">
|
||||
</div>
|
||||
<div>
|
||||
<label class="lbl">Modelo</label>
|
||||
<select class="inp-sel" name="openai_model" id="g_oai_model" style="width:100%">
|
||||
<option value="gpt-4o-mini"{$sOaiMini}>GPT-4o Mini</option>
|
||||
<option value="gpt-4.1-mini"{$sOai41m}>GPT-4.1 Mini</option>
|
||||
<option value="gpt-4o"{$sOai4o}>GPT-4o</option>
|
||||
<option value="gpt-4.1"{$sOai41}>GPT-4.1</option>
|
||||
<option value="gpt-3.5-turbo"{$sOai35}>GPT-3.5 Turbo</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div style="margin-top:10px">
|
||||
<button type="button" class="btn-primary" onclick="testProvider('openai','g_oai_key','g_oai_model','g_oai_res')" style="font-size:12px;padding:6px 14px">Probar conexión</button>
|
||||
<span id="g_oai_res" style="font-size:12px;margin-left:10px"></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Gemini -->
|
||||
<div id="g_gem" style="margin-top:14px;padding:14px;background:#f8f9fb;border-radius:8px;border:1px solid #e5e7eb;{$gShowGem}">
|
||||
<div style="font-weight:700;font-size:13px;margin-bottom:10px">🟢 Google Gemini</div>
|
||||
<div class="form-grid">
|
||||
<div>
|
||||
<label class="lbl">API Key</label>
|
||||
<input class="inp" type="password" name="gemini_api_key" id="g_gem_key" value="{$gGemKey}" placeholder="AIza...">
|
||||
</div>
|
||||
<div>
|
||||
<label class="lbl">Modelo</label>
|
||||
<select class="inp-sel" name="gemini_model" id="g_gem_model" style="width:100%">
|
||||
<option value="gemini-2.5-flash"{$sGemF25}>Gemini 2.5 Flash</option>
|
||||
<option value="gemini-2.0-flash"{$sGemF20}>Gemini 2.0 Flash</option>
|
||||
<option value="gemini-1.5-flash"{$sGemF15}>Gemini 1.5 Flash</option>
|
||||
<option value="gemini-1.5-pro"{$sGemP15}>Gemini 1.5 Pro</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div style="margin-top:10px">
|
||||
<button type="button" class="btn-primary" onclick="testProvider('gemini','g_gem_key','g_gem_model','g_gem_res')" style="font-size:12px;padding:6px 14px">Probar conexión</button>
|
||||
<span id="g_gem_res" style="font-size:12px;margin-left:10px"></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Claude -->
|
||||
<div id="g_cla" style="margin-top:14px;padding:14px;background:#f8f9fb;border-radius:8px;border:1px solid #e5e7eb;{$gShowCla}">
|
||||
<div style="font-weight:700;font-size:13px;margin-bottom:10px">🟣 Anthropic Claude</div>
|
||||
<div class="form-grid">
|
||||
<div>
|
||||
<label class="lbl">API Key</label>
|
||||
<input class="inp" type="password" name="claude_api_key" id="g_cla_key" value="{$gClaKey}" placeholder="sk-ant-...">
|
||||
</div>
|
||||
<div>
|
||||
<label class="lbl">Modelo</label>
|
||||
<select class="inp-sel" name="claude_model" id="g_cla_model" style="width:100%">
|
||||
<option value="claude-haiku-4-5"{$sClaH}>Claude Haiku 4.5 (rápido)</option>
|
||||
<option value="claude-sonnet-5"{$sClaS}>Claude Sonnet 5</option>
|
||||
<option value="claude-opus-4-8"{$sClaO}>Claude Opus 4.8</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div style="margin-top:10px">
|
||||
<button type="button" class="btn-primary" onclick="testProvider('claude','g_cla_key','g_cla_model','g_cla_res')" style="font-size:12px;padding:6px 14px">Probar conexión</button>
|
||||
<span id="g_cla_res" style="font-size:12px;margin-left:10px"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="btn-row">
|
||||
<a href="/admin/dashboard" class="btn-out" style="background:#ddd;color:#333;padding:10px 24px;border-radius:8px;text-decoration:none;font-size:14px">Cancelar</a>
|
||||
<button type="submit" class="btn-primary">Guardar configuración</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<div class="card" style="margin-top:16px">
|
||||
<div class="card-h">Probar conexión IA</div>
|
||||
<div class="card-b">
|
||||
<div style="display:flex;align-items:center;gap:12px;flex-wrap:wrap">
|
||||
<button type="button" class="btn-primary" onclick="testAiConn()" id="btnTestAi">Probar conexión</button>
|
||||
<span id="aiTestResult" style="font-size:13px"></span>
|
||||
</div>
|
||||
<small style="margin-top:8px;color:#888">Guarda primero la configuración, luego prueba la conexión. Se enviará un mensaje de prueba al proveedor activo.</small>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="version-info">Los cambios se aplican inmediatamente. Los valores se almacenan en la base de datos.</div>
|
||||
</div>
|
||||
<script>
|
||||
function testAiConn() {
|
||||
var btn = document.getElementById('btnTestAi');
|
||||
var res = document.getElementById('aiTestResult');
|
||||
btn.disabled = true;
|
||||
res.textContent = 'Probando...';
|
||||
res.style.color = '#666';
|
||||
fetch('/admin/settings/test-ai', {method:'POST', headers:{'Content-Type':'application/x-www-form-urlencoded'}, body:''})
|
||||
function gAiChange(v) {
|
||||
document.getElementById('g_oai').style.display = (v === 'openai' || !v) ? '' : 'none';
|
||||
document.getElementById('g_gem').style.display = v === 'gemini' ? '' : 'none';
|
||||
document.getElementById('g_cla').style.display = v === 'claude' ? '' : 'none';
|
||||
}
|
||||
function testProvider(provider, keyId, modelId, resId) {
|
||||
var key = document.getElementById(keyId)?.value || '';
|
||||
var model = document.getElementById(modelId)?.value || '';
|
||||
var res = document.getElementById(resId);
|
||||
res.textContent = 'Probando...'; res.style.color = '#666';
|
||||
var body = 'provider=' + encodeURIComponent(provider) + '&api_key=' + encodeURIComponent(key) + '&model=' + encodeURIComponent(model);
|
||||
fetch('/admin/settings/test-ai', {method:'POST', headers:{'Content-Type':'application/x-www-form-urlencoded'}, body: body})
|
||||
.then(function(r){return r.json();})
|
||||
.then(function(d){
|
||||
if (d.ok) {
|
||||
res.textContent = 'Conexion exitosa (' + d.provider + '): ' + d.response;
|
||||
res.style.color = '#16a34a';
|
||||
} else {
|
||||
res.textContent = 'Error (' + d.provider + '): ' + d.error;
|
||||
res.style.color = '#dc2626';
|
||||
}
|
||||
if (d.ok) { res.textContent = '✅ OK: ' + d.response; res.style.color = '#16a34a'; }
|
||||
else { res.textContent = '❌ ' + d.error; res.style.color = '#dc2626'; }
|
||||
})
|
||||
.catch(function(e){ res.textContent = 'Error de red'; res.style.color = '#dc2626'; })
|
||||
.finally(function(){ btn.disabled = false; });
|
||||
.catch(function(){ res.textContent = 'Error de red'; res.style.color = '#dc2626'; });
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
@@ -3051,19 +3158,33 @@ HTML;
|
||||
}
|
||||
$aiProviderOpenai = $aiProviderVal === 'openai' ? ' selected' : '';
|
||||
$aiProviderGemini = $aiProviderVal === 'gemini' ? ' selected' : '';
|
||||
$aiProviderClaude = $aiProviderVal === 'claude' ? ' selected' : '';
|
||||
$aiProviderMock = $aiProviderVal === 'mock' ? ' selected' : '';
|
||||
$openaiApiKeyVal = self::h($config['openai_api_key'] ?? '');
|
||||
$aiModelVal = $config['ai_model'] ?? 'gpt-4o-mini';
|
||||
$aiModelMini = $aiModelVal === 'gpt-4o-mini' ? ' selected' : '';
|
||||
$aiModel4o = $aiModelVal === 'gpt-4o' ? ' selected' : '';
|
||||
$aiModel41 = $aiModelVal === 'gpt-4.1' ? ' selected' : '';
|
||||
$aiModel41mini = $aiModelVal === 'gpt-4.1-mini' ? ' selected' : '';
|
||||
$aiModel35 = $aiModelVal === 'gpt-3.5-turbo'? ' selected' : '';
|
||||
$geminiApiKeyVal = self::h($config['gemini_api_key'] ?? '');
|
||||
$geminiModelVal = $config['gemini_model'] ?? 'gemini-2.5-flash';
|
||||
$geminiModelF25 = $geminiModelVal === 'gemini-2.5-flash' ? ' selected' : '';
|
||||
$geminiModelF20 = $geminiModelVal === 'gemini-2.0-flash' ? ' selected' : '';
|
||||
$geminiModelF15 = $geminiModelVal === 'gemini-1.5-flash' ? ' selected' : '';
|
||||
$geminiModelP15 = $geminiModelVal === 'gemini-1.5-pro' ? ' selected' : '';
|
||||
$claudeApiKeyVal = self::h($config['claude_api_key'] ?? '');
|
||||
$claudeModelVal = $config['claude_model'] ?? 'claude-haiku-4-5';
|
||||
$claudeModelH = $claudeModelVal === 'claude-haiku-4-5' ? ' selected' : '';
|
||||
$claudeModelS = $claudeModelVal === 'claude-sonnet-5' ? ' selected' : '';
|
||||
$claudeModelO = $claudeModelVal === 'claude-opus-4-8' ? ' selected' : '';
|
||||
// Determine which provider panel to show initially
|
||||
$showOpenai = ($aiProviderVal === 'openai' || $aiProviderVal === '')
|
||||
? 'display:flex;flex-direction:column;gap:10px' : 'display:none';
|
||||
$showGemini = $aiProviderVal === 'gemini'
|
||||
? 'display:flex;flex-direction:column;gap:10px' : 'display:none';
|
||||
$showClaude = $aiProviderVal === 'claude'
|
||||
? 'display:flex;flex-direction:column;gap:10px' : 'display:none';
|
||||
|
||||
// Per-category config HTML
|
||||
$perTypeConfig = $config['per_type'] ?? [];
|
||||
@@ -3526,6 +3647,7 @@ HTML;
|
||||
<option value="">Usar configuración global</option>
|
||||
<option value="openai"{$aiProviderOpenai}>OpenAI (GPT)</option>
|
||||
<option value="gemini"{$aiProviderGemini}>Google Gemini</option>
|
||||
<option value="claude"{$aiProviderClaude}>Anthropic Claude</option>
|
||||
<option value="mock"{$aiProviderMock}>Mock (simulado)</option>
|
||||
</select>
|
||||
<div style="font-size:11px;color:#7a8291;margin-top:3px">Si no se selecciona, usa el proveedor de Configuración General</div>
|
||||
@@ -3542,7 +3664,9 @@ HTML;
|
||||
<label>Modelo</label>
|
||||
<select name="ai_model">
|
||||
<option value="gpt-4o-mini"{$aiModelMini}>GPT-4o Mini</option>
|
||||
<option value="gpt-4.1-mini"{$aiModel41mini}>GPT-4.1 Mini</option>
|
||||
<option value="gpt-4o"{$aiModel4o}>GPT-4o</option>
|
||||
<option value="gpt-4.1"{$aiModel41}>GPT-4.1</option>
|
||||
<option value="gpt-3.5-turbo"{$aiModel35}>GPT-3.5 Turbo</option>
|
||||
</select>
|
||||
</div>
|
||||
@@ -3568,6 +3692,24 @@ HTML;
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Claude fields -->
|
||||
<div id="ai-claude-fields" style="{$showClaude}">
|
||||
<div class="form-row">
|
||||
<div class="form-group">
|
||||
<label>API Key Anthropic</label>
|
||||
<input type="password" name="claude_api_key" value="{$claudeApiKeyVal}" placeholder="sk-ant-...">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Modelo Claude</label>
|
||||
<select name="claude_model">
|
||||
<option value="claude-haiku-4-5"{$claudeModelH}>Claude Haiku 4.5 (rápido)</option>
|
||||
<option value="claude-sonnet-5"{$claudeModelS}>Claude Sonnet 5</option>
|
||||
<option value="claude-opus-4-8"{$claudeModelO}>Claude Opus 4.8</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-row" style="margin-top:4px">
|
||||
<div class="form-group">
|
||||
<label>Temperatura ({$aiTempVal})</label>
|
||||
@@ -3955,14 +4097,15 @@ function addCapField(containerId) {
|
||||
}
|
||||
|
||||
function aiProviderChange(v) {
|
||||
const oai = document.getElementById('ai-openai-fields');
|
||||
const gem = document.getElementById('ai-gemini-fields');
|
||||
if (oai) oai.style.display = (v === 'openai' || v === '') ? 'flex' : 'none';
|
||||
if (oai) oai.style.flexDirection = 'column';
|
||||
if (oai) oai.style.gap = '10px';
|
||||
if (gem) gem.style.display = v === 'gemini' ? 'flex' : 'none';
|
||||
if (gem) gem.style.flexDirection = 'column';
|
||||
if (gem) gem.style.gap = '10px';
|
||||
const panels = {openai: 'ai-openai-fields', gemini: 'ai-gemini-fields', claude: 'ai-claude-fields'};
|
||||
Object.entries(panels).forEach(([key, id]) => {
|
||||
const el = document.getElementById(id);
|
||||
if (!el) return;
|
||||
const show = (key === 'openai' && (v === 'openai' || v === '')) || v === key;
|
||||
el.style.display = show ? 'flex' : 'none';
|
||||
el.style.flexDirection = 'column';
|
||||
el.style.gap = '10px';
|
||||
});
|
||||
}
|
||||
|
||||
function updatePreview() {
|
||||
|
||||
Reference in New Issue
Block a user