chatbot nuevo

resources/views/livewire/chat/show-configuracion-chat.blade.php

@@ -0,0 +1,82 @@
+<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>