LizandroandClaude Sonnet 4.6
536377363c
- Chat público en /chat con flujos de compra, recarga y credenciales - Verificación de identidad por código OTP enviado al correo registrado - Botones enriquecidos: cards, links, credenciales, validación de comprobante - Gemini IA para detección de intención en texto libre - Gemini Vision para extraer datos de foto de comprobante - Validador de pagos cruzando IA con correos IMAP (Bancolombia) - MercadoPago como pasarela de pago (reemplaza Wompi en el chat) - Migraciones: payload en chat_messages, user_id en chat_contacts - Config admin: API key Gemini, toggles IA y validación de foto Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
400 lines
28 KiB
PHP
400 lines
28 KiB
PHP
<div id="chat-root"
|
|
class="w-full flex flex-col bg-[#111b21]"
|
|
style="height: 100vh; height: 100dvh; height: -webkit-fill-available; max-width: 480px; margin: 0 auto;">
|
|
|
|
{{-- ══ PASO 1: Formulario de inicio ══ --}}
|
|
@if ($paso === 'telefono')
|
|
<div class="flex flex-col items-center justify-center flex-1 px-5 safe-top safe-bottom safe-left safe-right">
|
|
<div class="w-full bg-[#202c33] rounded-2xl shadow-2xl p-7">
|
|
|
|
<div class="flex flex-col items-center mb-7">
|
|
<div class="w-20 h-20 bg-[#00a884] rounded-full flex items-center justify-center mb-4 shadow-lg">
|
|
<svg class="w-10 h-10 text-white" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M8.625 9.75a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm0 0H8.25m4.125 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm0 0H12m4.125 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm0 0h-.375M21 12c0 4.556-4.03 8.25-9 8.25a9.764 9.764 0 0 1-2.555-.337A5.972 5.972 0 0 1 5.41 20.97a5.969 5.969 0 0 1-.474-.065 4.48 4.48 0 0 0 .978-2.025c.09-.457-.133-.901-.467-1.226C3.93 16.178 3 14.189 3 12c0-4.556 4.03-8.25 9-8.25s9 3.694 9 8.25Z" />
|
|
</svg>
|
|
</div>
|
|
<h1 class="text-white text-2xl font-semibold">Chat en vivo</h1>
|
|
<p class="text-[#8696a0] text-sm mt-1 text-center">Ingresa tu número para comenzar</p>
|
|
</div>
|
|
|
|
<form wire:submit.prevent="iniciar" class="space-y-4">
|
|
<div>
|
|
<label class="block text-[#8696a0] text-xs font-medium mb-1.5 uppercase tracking-wider">Teléfono *</label>
|
|
<input wire:model.defer="telefono" type="tel" inputmode="tel" autocomplete="tel"
|
|
placeholder="Ej: 3001234567"
|
|
class="w-full bg-[#2a3942] text-white rounded-xl px-4 py-3.5 outline-none border border-transparent focus:border-[#00a884] transition placeholder-[#8696a0]"
|
|
style="color-scheme: dark;">
|
|
@error('telefono') <span class="text-red-400 text-xs mt-1 block">{{ $message }}</span> @enderror
|
|
</div>
|
|
<div>
|
|
<label class="block text-[#8696a0] text-xs font-medium mb-1.5 uppercase tracking-wider">Nombre (opcional)</label>
|
|
<input wire:model.defer="nombre" type="text" autocomplete="name"
|
|
placeholder="Tu nombre"
|
|
class="w-full bg-[#2a3942] text-white rounded-xl px-4 py-3.5 outline-none border border-transparent focus:border-[#00a884] transition placeholder-[#8696a0]"
|
|
style="color-scheme: dark;">
|
|
</div>
|
|
<button type="submit"
|
|
class="w-full bg-[#00a884] active:bg-[#06cf9c] text-white font-semibold rounded-xl transition shadow-lg"
|
|
style="min-height: 48px;">
|
|
<span wire:loading.remove wire:target="iniciar">Comenzar chat →</span>
|
|
<span wire:loading wire:target="iniciar">Conectando...</span>
|
|
</button>
|
|
</form>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
{{-- ══ PASO 2: Verificación OTP ══ --}}
|
|
@elseif ($paso === 'verificacion')
|
|
<div class="flex flex-col items-center justify-center flex-1 px-5 safe-top safe-bottom safe-left safe-right">
|
|
<div class="w-full bg-[#202c33] rounded-2xl shadow-2xl p-7">
|
|
|
|
<div class="flex flex-col items-center mb-7">
|
|
<div class="w-20 h-20 bg-[#00a884] rounded-full flex items-center justify-center mb-4 shadow-lg">
|
|
<svg class="w-10 h-10 text-white" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round"
|
|
d="M21.75 6.75v10.5a2.25 2.25 0 0 1-2.25 2.25h-15a2.25 2.25 0 0 1-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0 0 19.5 4.5h-15a2.25 2.25 0 0 0-2.25 2.25m19.5 0v.243a2.25 2.25 0 0 1-1.07 1.916l-7.5 4.615a2.25 2.25 0 0 1-2.36 0L3.32 8.91a2.25 2.25 0 0 1-1.07-1.916V6.75" />
|
|
</svg>
|
|
</div>
|
|
<h1 class="text-white text-xl font-semibold">Verifica tu identidad</h1>
|
|
<p class="text-[#8696a0] text-sm mt-2 text-center leading-relaxed">
|
|
Enviamos un código de 6 dígitos a<br>
|
|
<span class="text-[#00a884] font-semibold">{{ $emailMascarado }}</span>
|
|
</p>
|
|
</div>
|
|
|
|
@if (session('otp_reenviado'))
|
|
<p class="text-[#00a884] text-sm text-center mb-3">{{ session('otp_reenviado') }}</p>
|
|
@endif
|
|
|
|
<form wire:submit.prevent="verificarCodigo" class="space-y-4">
|
|
<div>
|
|
<label class="block text-[#8696a0] text-xs font-medium mb-1.5 uppercase tracking-wider">Código de verificación</label>
|
|
<input wire:model.defer="codigoIngresado" type="text" inputmode="numeric"
|
|
pattern="[0-9]*" maxlength="6" autocomplete="one-time-code"
|
|
placeholder="000000"
|
|
class="w-full bg-[#2a3942] text-white rounded-xl px-4 py-3.5 outline-none border border-transparent focus:border-[#00a884] transition placeholder-[#8696a0] text-center text-2xl font-bold tracking-[0.5em]"
|
|
style="color-scheme: dark;">
|
|
@error('codigoIngresado') <span class="text-red-400 text-xs mt-1 block">{{ $message }}</span> @enderror
|
|
</div>
|
|
|
|
<button type="submit"
|
|
class="w-full bg-[#00a884] active:bg-[#06cf9c] text-white font-semibold rounded-xl transition shadow-lg"
|
|
style="min-height: 48px;">
|
|
<span wire:loading.remove wire:target="verificarCodigo">Verificar →</span>
|
|
<span wire:loading wire:target="verificarCodigo">Verificando...</span>
|
|
</button>
|
|
</form>
|
|
|
|
<div class="mt-5 flex flex-col items-center gap-2">
|
|
<button wire:click="reenviarCodigo" type="button"
|
|
class="text-[#00a884] text-sm hover:underline">
|
|
<span wire:loading.remove wire:target="reenviarCodigo">¿No llegó? Reenviar código</span>
|
|
<span wire:loading wire:target="reenviarCodigo">Enviando...</span>
|
|
</button>
|
|
<button wire:click="$set('paso', 'telefono')" type="button"
|
|
class="text-[#8696a0] text-xs hover:text-white">
|
|
Volver
|
|
</button>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
{{-- ══ PASO 3: Interfaz de chat ══ --}}
|
|
@else
|
|
<div class="flex flex-col h-full bg-[#0b141a]"
|
|
x-data="{ uploading: false }"
|
|
x-on:scroll-chat.window="$nextTick(() => {
|
|
const el = document.getElementById('pub-messages');
|
|
if (el) el.scrollTop = el.scrollHeight;
|
|
})">
|
|
|
|
{{-- Header --}}
|
|
<div class="bg-[#202c33] shadow-md flex-shrink-0 safe-top safe-left safe-right">
|
|
<div class="flex items-center gap-3 px-4 py-3">
|
|
<div class="w-10 h-10 bg-[#00a884] rounded-full flex items-center justify-center flex-shrink-0">
|
|
<svg class="w-5 h-5 text-white" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M8.625 9.75a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm0 0H8.25m4.125 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm0 0H12m4.125 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm0 0h-.375M21 12c0 4.556-4.03 8.25-9 8.25a9.764 9.764 0 0 1-2.555-.337A5.972 5.972 0 0 1 5.41 20.97a5.969 5.969 0 0 1-.474-.065 4.48 4.48 0 0 0 .978-2.025c.09-.457-.133-.901-.467-1.226C3.93 16.178 3 14.189 3 12c0-4.556 4.03-8.25 9-8.25s9 3.694 9 8.25Z" />
|
|
</svg>
|
|
</div>
|
|
<div class="flex-1 min-w-0">
|
|
<p class="text-white font-semibold text-sm truncate">
|
|
{{ $nombreUsuario ?: 'Soporte en línea' }}
|
|
</p>
|
|
<p class="text-[#8696a0] text-xs">
|
|
@if ($estadoConv === 'agente') Atendido por un agente
|
|
@elseif ($estadoConv === 'cerrada') Conversación cerrada
|
|
@else Bot activo @endif
|
|
</p>
|
|
</div>
|
|
{{-- Saldo si hay usuario identificado --}}
|
|
@if ($saldoUsuario !== null)
|
|
<div class="text-right flex-shrink-0">
|
|
<p class="text-[#00a884] text-xs font-semibold">Saldo</p>
|
|
<p class="text-white text-sm font-bold">${{ number_format($saldoUsuario) }}</p>
|
|
</div>
|
|
@endif
|
|
</div>
|
|
</div>
|
|
|
|
{{-- Mensajes --}}
|
|
<div class="flex-1 overflow-y-auto px-3 py-4 space-y-3 ios-scroll"
|
|
id="pub-messages"
|
|
wire:poll.3000ms="cargarMensajes"
|
|
style="overscroll-behavior-y: contain;">
|
|
|
|
@forelse($mensajes as $msg)
|
|
|
|
{{-- ── Mensaje del USUARIO ── --}}
|
|
@if ($msg['tipo'] === 'usuario')
|
|
<div class="flex justify-end">
|
|
@if (($msg['tipo_ui'] ?? 'text') === 'imagen')
|
|
<div class="max-w-[75%] rounded-xl rounded-tr-sm overflow-hidden shadow">
|
|
<img src="{{ $msg['payload']['url'] ?? '' }}" class="w-full object-cover" style="max-height:220px;">
|
|
<div class="bg-[#005c4b] px-3 py-1 text-right">
|
|
<span class="text-[#8696a0] text-[11px]">{{ $msg['created_at'] }}</span>
|
|
</div>
|
|
</div>
|
|
@else
|
|
<div class="max-w-[80%] bg-[#005c4b] text-white rounded-xl rounded-tr-sm px-4 py-2 shadow">
|
|
<p class="whitespace-pre-line break-words leading-relaxed" style="font-size:15px;">{{ $msg['contenido'] }}</p>
|
|
<span class="text-[#8696a0] text-[11px] float-right mt-1 ml-2">{{ $msg['created_at'] }}</span>
|
|
</div>
|
|
@endif
|
|
</div>
|
|
|
|
{{-- ── Mensajes del BOT / AGENTE ── --}}
|
|
@else
|
|
<div class="flex justify-start">
|
|
@php $tipoUi = $msg['tipo_ui'] ?? 'text'; $payload = $msg['payload'] ?? []; @endphp
|
|
|
|
{{-- TEXTO normal --}}
|
|
@if ($tipoUi === 'text')
|
|
<div class="max-w-[80%] bg-[#202c33] text-white rounded-xl rounded-tl-sm px-4 py-2 shadow">
|
|
@if ($msg['tipo'] === 'agente')
|
|
<span class="text-amber-400 text-[11px] font-semibold block mb-0.5">Agente</span>
|
|
@endif
|
|
<p class="whitespace-pre-line break-words leading-relaxed" style="font-size:15px;">{{ $msg['contenido'] }}</p>
|
|
<span class="text-[#8696a0] text-[11px] float-right mt-1 ml-2">{{ $msg['created_at'] }}</span>
|
|
</div>
|
|
|
|
{{-- BUTTONS: texto + fila de botones --}}
|
|
@elseif ($tipoUi === 'buttons')
|
|
<div class="max-w-[88%] space-y-2">
|
|
@if ($msg['contenido'])
|
|
<div class="bg-[#202c33] text-white rounded-xl rounded-tl-sm px-4 py-2 shadow">
|
|
<p class="whitespace-pre-line break-words leading-relaxed" style="font-size:15px;">{{ $msg['contenido'] }}</p>
|
|
<span class="text-[#8696a0] text-[11px] float-right mt-1 ml-2">{{ $msg['created_at'] }}</span>
|
|
</div>
|
|
@endif
|
|
<div class="flex flex-wrap gap-2">
|
|
@foreach ($payload['botones'] ?? [] as $btn)
|
|
@if ($btn['disabled'] ?? false)
|
|
<button disabled
|
|
class="px-3 py-2 rounded-xl text-sm font-medium border border-[#3d4a51] text-[#3d4a51] bg-transparent cursor-not-allowed opacity-50">
|
|
{{ $btn['label'] }}
|
|
</button>
|
|
@else
|
|
<button wire:click="clickBoton('{{ $btn['action'] }}', {{ json_encode($btn['data'] ?? []) }})"
|
|
class="px-3 py-2 rounded-xl text-sm font-medium border border-[#00a884] text-[#00a884] bg-transparent active:bg-[#00a884]/20 transition">
|
|
{{ $btn['label'] }}
|
|
</button>
|
|
@endif
|
|
@endforeach
|
|
</div>
|
|
</div>
|
|
|
|
{{-- CARD: tarjeta de servicio o promo --}}
|
|
@elseif ($tipoUi === 'card')
|
|
<div class="max-w-[85%] bg-[#202c33] rounded-xl rounded-tl-sm shadow overflow-hidden">
|
|
@if (!empty($payload['imagen']))
|
|
<img src="{{ $payload['imagen'] }}" class="w-full object-cover" style="max-height:130px;">
|
|
@endif
|
|
<div class="px-4 py-3">
|
|
<p class="text-white font-semibold text-sm">{{ $payload['titulo'] ?? '' }}</p>
|
|
@if (!empty($payload['descripcion']))
|
|
<p class="text-[#8696a0] text-xs mt-1">{{ $payload['descripcion'] }}</p>
|
|
@endif
|
|
@if (!empty($payload['precio']))
|
|
<p class="text-[#00a884] font-bold text-base mt-2">${{ number_format($payload['precio']) }}</p>
|
|
@endif
|
|
@if (!empty($payload['detalle']))
|
|
<p class="text-[#8696a0] text-xs">{{ $payload['detalle'] }}</p>
|
|
@endif
|
|
@if (!empty($payload['accion']))
|
|
<button wire:click="clickBoton('{{ $payload['accion']['action'] }}', {{ json_encode($payload['accion']['data'] ?? []) }})"
|
|
class="mt-3 w-full bg-[#00a884] text-white text-sm font-semibold rounded-xl py-2 active:bg-[#06cf9c] transition">
|
|
{{ $payload['accion']['label'] }}
|
|
</button>
|
|
@endif
|
|
</div>
|
|
<div class="px-4 pb-2 text-right">
|
|
<span class="text-[#8696a0] text-[11px]">{{ $msg['created_at'] }}</span>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- LINK: botón de pago externo --}}
|
|
@elseif ($tipoUi === 'link')
|
|
<div class="max-w-[85%] bg-[#202c33] rounded-xl rounded-tl-sm px-4 py-3 shadow">
|
|
<p class="text-white text-sm mb-3 whitespace-pre-line">{{ $msg['contenido'] }}</p>
|
|
<a href="{{ $payload['url'] ?? '#' }}" target="_blank"
|
|
class="flex items-center justify-center gap-2 w-full bg-[#00a884] text-white text-sm font-semibold rounded-xl py-2.5 active:bg-[#06cf9c] transition">
|
|
<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="M13.5 6H5.25A2.25 2.25 0 0 0 3 8.25v10.5A2.25 2.25 0 0 0 5.25 21h10.5A2.25 2.25 0 0 0 18 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25" />
|
|
</svg>
|
|
{{ $payload['label'] ?? 'Ir a pagar' }}
|
|
</a>
|
|
@if (!empty($payload['nota']))
|
|
<p class="text-[#8696a0] text-xs mt-2 text-center">{{ $payload['nota'] }}</p>
|
|
@endif
|
|
<div class="mt-2 text-right">
|
|
<span class="text-[#8696a0] text-[11px]">{{ $msg['created_at'] }}</span>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- VALIDACION: resultado de comprobante de pago --}}
|
|
@elseif ($tipoUi === 'validacion')
|
|
<div class="max-w-[88%] bg-[#202c33] rounded-xl rounded-tl-sm shadow overflow-hidden">
|
|
{{-- Header estado --}}
|
|
@php
|
|
$estado = $payload['estado'] ?? 'no_encontrado';
|
|
$esConfirmado = $estado === 'confirmado';
|
|
$esIncorrecto = $estado === 'monto_incorrecto';
|
|
@endphp
|
|
<div class="px-4 py-2 {{ $esConfirmado ? 'bg-green-900/40' : ($esIncorrecto ? 'bg-amber-900/40' : 'bg-red-900/30') }}">
|
|
<p class="text-sm font-semibold {{ $esConfirmado ? 'text-green-400' : ($esIncorrecto ? 'text-amber-400' : 'text-red-400') }}">
|
|
@if ($esConfirmado) ✅ Pago confirmado
|
|
@elseif ($esIncorrecto) ⚠️ Monto no coincide
|
|
@else 🔍 No encontrado en correos
|
|
@endif
|
|
</p>
|
|
</div>
|
|
{{-- Datos extraídos --}}
|
|
<div class="px-4 py-3 space-y-1">
|
|
<p class="text-[#8696a0] text-xs font-semibold uppercase tracking-wider mb-2">Datos del comprobante</p>
|
|
@foreach (['banco' => 'Banco', 'valor' => 'Valor', 'remitente' => 'De', 'referencia' => 'Referencia', 'fecha' => 'Fecha'] as $key => $label)
|
|
@if (!empty($payload['ia_datos'][$key]))
|
|
<div class="flex justify-between text-xs">
|
|
<span class="text-[#8696a0]">{{ $label }}</span>
|
|
<span class="text-white font-medium">{{ $payload['ia_datos'][$key] }}</span>
|
|
</div>
|
|
@endif
|
|
@endforeach
|
|
</div>
|
|
{{-- Botones de acción --}}
|
|
<div class="px-4 pb-3 flex flex-wrap gap-2">
|
|
@foreach ($payload['botones'] ?? [] as $btn)
|
|
<button wire:click="clickBoton('{{ $btn['action'] }}', {{ json_encode($btn['data'] ?? []) }})"
|
|
class="flex-1 px-3 py-2 rounded-xl text-xs font-medium border {{ $esConfirmado ? 'border-green-500 text-green-400' : 'border-[#8696a0] text-[#8696a0]' }} bg-transparent active:bg-white/5 transition">
|
|
{{ $btn['label'] }}
|
|
</button>
|
|
@endforeach
|
|
</div>
|
|
<div class="px-4 pb-2 text-right">
|
|
<span class="text-[#8696a0] text-[11px]">{{ $msg['created_at'] }}</span>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- CREDENCIALES: tarjeta con usuario/contraseña --}}
|
|
@elseif ($tipoUi === 'credenciales')
|
|
<div class="max-w-[85%] bg-[#202c33] rounded-xl rounded-tl-sm shadow overflow-hidden">
|
|
<div class="px-4 py-2 bg-[#00a884]/20">
|
|
<p class="text-[#00a884] text-xs font-semibold uppercase tracking-wider">{{ $payload['servicio'] ?? 'Credenciales' }}</p>
|
|
</div>
|
|
<div class="px-4 py-3 space-y-2">
|
|
@if (!empty($payload['email']))
|
|
<div class="bg-[#0b141a] rounded-lg px-3 py-2">
|
|
<p class="text-[#8696a0] text-[11px] mb-0.5">Usuario / Email</p>
|
|
<p class="text-white text-sm font-mono break-all">{{ $payload['email'] }}</p>
|
|
</div>
|
|
@endif
|
|
@if (!empty($payload['password']))
|
|
<div class="bg-[#0b141a] rounded-lg px-3 py-2">
|
|
<p class="text-[#8696a0] text-[11px] mb-0.5">Contraseña</p>
|
|
<p class="text-white text-sm font-mono">{{ $payload['password'] }}</p>
|
|
</div>
|
|
@endif
|
|
@if (!empty($payload['perfil']))
|
|
<div class="bg-[#0b141a] rounded-lg px-3 py-2">
|
|
<p class="text-[#8696a0] text-[11px] mb-0.5">Perfil</p>
|
|
<p class="text-white text-sm">{{ $payload['perfil'] }}</p>
|
|
</div>
|
|
@endif
|
|
@if (!empty($payload['vence']))
|
|
<p class="text-[#8696a0] text-xs text-center mt-1">Vence: {{ $payload['vence'] }}</p>
|
|
@endif
|
|
</div>
|
|
<div class="px-4 pb-2 text-right">
|
|
<span class="text-[#8696a0] text-[11px]">{{ $msg['created_at'] }}</span>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- fallback --}}
|
|
@else
|
|
<div class="max-w-[80%] bg-[#202c33] text-white rounded-xl rounded-tl-sm px-4 py-2 shadow">
|
|
<p class="whitespace-pre-line break-words leading-relaxed" style="font-size:15px;">{{ $msg['contenido'] }}</p>
|
|
<span class="text-[#8696a0] text-[11px] float-right mt-1 ml-2">{{ $msg['created_at'] }}</span>
|
|
</div>
|
|
@endif
|
|
</div>
|
|
@endif
|
|
|
|
@empty
|
|
<div class="text-center text-[#8696a0] text-sm py-10">Iniciando chat...</div>
|
|
@endforelse
|
|
|
|
<div id="pub-messages-end"></div>
|
|
</div>
|
|
|
|
{{-- Input + upload --}}
|
|
@if ($estadoConv !== 'cerrada')
|
|
<div class="bg-[#202c33] flex-shrink-0 safe-bottom safe-left safe-right">
|
|
{{-- Indicador de procesando imagen --}}
|
|
@if ($procesandoImagen)
|
|
<div class="px-4 pt-2 pb-1">
|
|
<div class="flex items-center gap-2 text-[#8696a0] text-xs">
|
|
<svg class="w-4 h-4 animate-spin text-[#00a884]" fill="none" viewBox="0 0 24 24">
|
|
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
|
|
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v8z"></path>
|
|
</svg>
|
|
Analizando comprobante con IA...
|
|
</div>
|
|
</div>
|
|
@endif
|
|
<div class="flex items-end gap-2 px-3 py-2.5">
|
|
{{-- Botón adjuntar foto --}}
|
|
<label class="flex-shrink-0 cursor-pointer text-[#8696a0] active:text-[#00a884] transition" style="min-width:44px; min-height:44px; display:flex; align-items:center; justify-content:center;">
|
|
<input type="file" wire:model="fotoComprobante" accept="image/*" class="hidden" capture="environment">
|
|
<svg class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="m2.25 15.75 5.159-5.159a2.25 2.25 0 0 1 3.182 0l5.159 5.159m-1.5-1.5 1.409-1.409a2.25 2.25 0 0 1 3.182 0l2.909 2.909m-18 3.75h16.5a1.5 1.5 0 0 0 1.5-1.5V6a1.5 1.5 0 0 0-1.5-1.5H3.75A1.5 1.5 0 0 0 2.25 6v12a1.5 1.5 0 0 0 1.5 1.5Zm10.5-11.25h.008v.008h-.008V8.25Zm.375 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Z" />
|
|
</svg>
|
|
</label>
|
|
<textarea
|
|
wire:model.defer="input"
|
|
wire:keydown.enter.prevent="enviar"
|
|
rows="1"
|
|
placeholder="Escribe o usa los botones..."
|
|
class="flex-1 bg-[#2a3942] text-white rounded-xl px-4 py-3 resize-none outline-none placeholder-[#8696a0]"
|
|
style="font-size:16px; overflow-y:auto; max-height:7rem; line-height:1.4; color-scheme:dark;"
|
|
></textarea>
|
|
<button wire:click="enviar"
|
|
class="bg-[#00a884] active:bg-[#06cf9c] rounded-full flex items-center justify-center transition flex-shrink-0"
|
|
style="width:44px; height:44px; min-width:44px;">
|
|
<svg class="w-5 h-5 text-white" viewBox="0 0 24 24" fill="currentColor">
|
|
<path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z"/>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
@else
|
|
<div class="bg-[#202c33] px-4 py-4 text-center text-[#8696a0] text-sm flex-shrink-0 safe-bottom">
|
|
Esta conversación ha sido cerrada.
|
|
</div>
|
|
@endif
|
|
|
|
</div>
|
|
@endif
|
|
|
|
</div>
|