83 lines
4.8 KiB
PHP
83 lines
4.8 KiB
PHP
<div class="max-w-2xl mx-auto space-y-6">
|
||
|
||
<div>
|
||
<h2 class="text-xl font-bold text-gray-800">Configuración del Chat</h2>
|
||
<p class="text-gray-500 text-sm">Parámetros generales del chatbot y del canal Telegram.</p>
|
||
</div>
|
||
|
||
{{-- Formulario --}}
|
||
<div class="bg-white rounded-2xl shadow border border-gray-100 p-6 space-y-5">
|
||
|
||
{{-- Token Telegram --}}
|
||
<div>
|
||
<label class="block text-sm font-semibold text-gray-700 mb-1">Token del bot de Telegram</label>
|
||
<p class="text-xs text-gray-400 mb-2">Obtenlo hablando con @BotFather en Telegram. Deja vacío si no usas Telegram.</p>
|
||
<input wire:model.defer="telegram_token" type="text"
|
||
placeholder="1234567890:ABCDefGhijKlmNoPqrStUVwxYZ"
|
||
class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:ring-2 focus:ring-emerald-500 outline-none font-mono">
|
||
</div>
|
||
|
||
{{-- Webhook URL (solo lectura) --}}
|
||
<div>
|
||
<label class="block text-sm font-semibold text-gray-700 mb-1">URL del Webhook Telegram</label>
|
||
<p class="text-xs text-gray-400 mb-2">Esta es la URL que Telegram usará para enviarte los mensajes entrantes.</p>
|
||
<div class="flex gap-2">
|
||
<input type="text" readonly value="{{ url('/chat/webhook/telegram') }}"
|
||
class="flex-1 border border-gray-200 rounded-lg px-3 py-2 text-sm bg-gray-50 text-gray-600 font-mono">
|
||
<button wire:click="registrarWebhook"
|
||
class="flex-shrink-0 px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white text-sm font-semibold rounded-lg transition">
|
||
<span wire:loading.remove wire:target="registrarWebhook">Registrar Webhook</span>
|
||
<span wire:loading wire:target="registrarWebhook">Registrando...</span>
|
||
</button>
|
||
</div>
|
||
@if($webhookResult)
|
||
<p class="mt-2 text-sm {{ str_contains($webhookResult, '✅') ? 'text-emerald-600' : 'text-red-600' }}">
|
||
{{ $webhookResult }}
|
||
</p>
|
||
@endif
|
||
</div>
|
||
|
||
<hr class="border-gray-100">
|
||
|
||
{{-- Mensaje de bienvenida --}}
|
||
<div>
|
||
<label class="block text-sm font-semibold text-gray-700 mb-1">Mensaje de bienvenida <span class="text-red-500">*</span></label>
|
||
<p class="text-xs text-gray-400 mb-2">Primer mensaje cuando el bot no tiene menú configurado o cuando el usuario escribe "hola".</p>
|
||
<textarea wire:model.defer="mensaje_bienvenida" rows="3"
|
||
class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:ring-2 focus:ring-emerald-500 outline-none resize-none"></textarea>
|
||
@error('mensaje_bienvenida') <span class="text-red-500 text-xs">{{ $message }}</span> @enderror
|
||
</div>
|
||
|
||
{{-- Mensaje de transferencia --}}
|
||
<div>
|
||
<label class="block text-sm font-semibold text-gray-700 mb-1">Mensaje al transferir a agente <span class="text-red-500">*</span></label>
|
||
<p class="text-xs text-gray-400 mb-2">Se envía al usuario cuando elige la opción de hablar con un agente.</p>
|
||
<textarea wire:model.defer="mensaje_transferencia" rows="3"
|
||
class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:ring-2 focus:ring-emerald-500 outline-none resize-none"></textarea>
|
||
@error('mensaje_transferencia') <span class="text-red-500 text-xs">{{ $message }}</span> @enderror
|
||
</div>
|
||
|
||
{{-- Guardar --}}
|
||
<div class="flex justify-end pt-2">
|
||
<button wire:click="guardar"
|
||
class="flex items-center gap-2 bg-emerald-600 hover:bg-emerald-700 text-white text-sm font-semibold px-6 py-2.5 rounded-lg transition shadow">
|
||
<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
|
||
<path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
|
||
</svg>
|
||
<span wire:loading.remove wire:target="guardar">Guardar configuración</span>
|
||
<span wire:loading wire:target="guardar">Guardando...</span>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
{{-- Info de canales --}}
|
||
<div class="bg-blue-50 border border-blue-100 rounded-2xl p-5">
|
||
<h3 class="font-semibold text-blue-800 text-sm mb-2">ℹ️ Canales disponibles</h3>
|
||
<ul class="text-blue-700 text-sm space-y-1">
|
||
<li><strong>Web:</strong> Los visitantes acceden en <code class="bg-blue-100 px-1 rounded">{{ url('/chat') }}</code></li>
|
||
<li><strong>Telegram:</strong> Configurar el token y registrar el webhook para recibir mensajes de Telegram.</li>
|
||
</ul>
|
||
</div>
|
||
|
||
</div>
|