fix(chat): sesión persistente entre recargas + responsive móvil/desktop
- mount(): restaura userId y convId desde sesión Laravel al recargar página - abrirChat(): guarda chat_user_id y chat_conv_id en sesión - cerrarSesion(): limpia la sesión correctamente - Desktop: chat centrado como frame (420px, bordes redondeados, sombra) - Móvil: pantalla completa sin restricción de ancho - teclado virtual: ajuste de altura solo en móvil Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Lizandro
co-authored by
Claude Sonnet 4.6
Claude Sonnet 4.6
parent
4ddfdaeecc
commit
d27bd1c0d7
@@ -54,6 +54,32 @@ class PublicChat extends Component
|
||||
public $fotoComprobante = null;
|
||||
public bool $procesandoImagen = false;
|
||||
|
||||
public function mount(): void
|
||||
{
|
||||
$userId = session('chat_user_id');
|
||||
$convId = session('chat_conv_id');
|
||||
|
||||
if (! $userId || ! $convId) {
|
||||
return;
|
||||
}
|
||||
|
||||
$user = User::with('saldo')->find($userId);
|
||||
$conv = ChatConversation::find($convId);
|
||||
|
||||
if (! $user || ! $conv) {
|
||||
session()->forget(['chat_user_id', 'chat_conv_id']);
|
||||
return;
|
||||
}
|
||||
|
||||
$this->userId = $user->id;
|
||||
$this->nombreUsuario = $user->name;
|
||||
$this->saldoUsuario = $user->saldo?->valor ?? 0;
|
||||
$this->convId = $conv->id;
|
||||
$this->estadoConv = $conv->estado;
|
||||
$this->paso = 'chat';
|
||||
$this->cargarMensajes();
|
||||
}
|
||||
|
||||
protected $rules = [
|
||||
'email' => 'required|email|max:100',
|
||||
'nombreRegistro' => 'required|max:80',
|
||||
@@ -139,6 +165,8 @@ class PublicChat extends Component
|
||||
|
||||
public function cerrarSesion(): void
|
||||
{
|
||||
session()->forget(['chat_user_id', 'chat_conv_id']);
|
||||
|
||||
$this->email = '';
|
||||
$this->nombreRegistro = '';
|
||||
$this->cedulaRegistro = '';
|
||||
@@ -257,6 +285,10 @@ class PublicChat extends Component
|
||||
$this->convId = $conv->id;
|
||||
$this->estadoConv = $conv->estado;
|
||||
$this->paso = 'chat';
|
||||
|
||||
session()->put('chat_user_id', $this->userId);
|
||||
session()->put('chat_conv_id', $conv->id);
|
||||
|
||||
$this->cargarMensajes();
|
||||
$this->mostrarMenuPrincipal($conv->id);
|
||||
}
|
||||
|
||||
@@ -2,11 +2,9 @@
|
||||
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
{{-- viewport-fit=cover expone las safe areas del notch/Dynamic Island --}}
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
|
||||
<meta name="csrf-token" content="{{ csrf_token() }}">
|
||||
<meta name="color-scheme" content="dark">
|
||||
{{-- Apple PWA / standalone --}}
|
||||
<meta name="apple-mobile-web-app-capable" content="yes">
|
||||
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
|
||||
<meta name="apple-mobile-web-app-title" content="Chat">
|
||||
@@ -14,43 +12,71 @@
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<style>
|
||||
/* ── Reset iOS/Safari ───────────────────────────────── */
|
||||
*, *::before, *::after { box-sizing: border-box; }
|
||||
|
||||
html {
|
||||
/* Altura real del viewport incluyendo safe areas */
|
||||
height: -webkit-fill-available;
|
||||
html, body {
|
||||
margin: 0; padding: 0;
|
||||
font-family: 'Inter', sans-serif;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
overscroll-behavior: none;
|
||||
}
|
||||
|
||||
/* Móvil: pantalla completa */
|
||||
body {
|
||||
font-family: 'Inter', sans-serif;
|
||||
background: #111b21;
|
||||
/* Evita el scroll del body — solo scrollea el área de mensajes */
|
||||
overflow: hidden;
|
||||
overscroll-behavior: none;
|
||||
/* Altura: dvh con fallback para Safari < 15.4 */
|
||||
height: 100vh;
|
||||
height: 100dvh;
|
||||
height: -webkit-fill-available;
|
||||
/* Elimina el tap highlight azul en iOS */
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Evita el zoom Safari en inputs < 16px */
|
||||
input, textarea, select {
|
||||
font-size: 16px !important;
|
||||
/* Desktop: fondo con gradiente + chat centrado como frame */
|
||||
@media (min-width: 640px) {
|
||||
body {
|
||||
background: #0d1117;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
/* Scroll suave tipo nativo en iOS */
|
||||
/* El contenedor del chat */
|
||||
#chat-root {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
height: 100dvh;
|
||||
height: -webkit-fill-available;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: #111b21;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
@media (min-width: 640px) {
|
||||
#chat-root {
|
||||
width: 420px;
|
||||
height: 90vh;
|
||||
height: 90dvh;
|
||||
max-height: 820px;
|
||||
border-radius: 20px;
|
||||
box-shadow: 0 24px 64px rgba(0,0,0,.6);
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
/* Evita zoom en inputs iOS */
|
||||
input, textarea, select { font-size: 16px !important; }
|
||||
|
||||
/* Scroll suave nativo */
|
||||
.ios-scroll {
|
||||
-webkit-overflow-scrolling: touch;
|
||||
overscroll-behavior-y: contain;
|
||||
}
|
||||
|
||||
/* Deshabilitar appearance por defecto en iOS */
|
||||
input[type="tel"],
|
||||
input[type="text"],
|
||||
textarea {
|
||||
/* Elimina appearance por defecto iOS */
|
||||
input[type="tel"], input[type="text"],
|
||||
input[type="email"], textarea {
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
border-radius: 12px;
|
||||
@@ -62,7 +88,7 @@
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* Safe area — rellena el notch arriba y el home indicator abajo */
|
||||
/* Safe areas (solo afectan en iOS con viewport-fit=cover) */
|
||||
.safe-top { padding-top: env(safe-area-inset-top, 0px); }
|
||||
.safe-bottom { padding-bottom: env(safe-area-inset-bottom, 0px); }
|
||||
.safe-left { padding-left: env(safe-area-inset-left, 0px); }
|
||||
@@ -78,18 +104,16 @@
|
||||
@livewireScripts
|
||||
|
||||
<script>
|
||||
/**
|
||||
* visualViewport API: cuando el teclado iOS aparece, el viewport se reduce.
|
||||
* Ajustamos la altura del chat dinámicamente para que el input quede visible.
|
||||
*/
|
||||
/* Ajusta altura del chat cuando aparece el teclado en móvil */
|
||||
function initViewportFix() {
|
||||
const root = document.getElementById('chat-root');
|
||||
if (!root || !window.visualViewport) return;
|
||||
|
||||
const isMobile = window.innerWidth < 640;
|
||||
if (!isMobile) return; // En desktop no necesitamos ajustar
|
||||
|
||||
const update = () => {
|
||||
const h = window.visualViewport.height;
|
||||
root.style.height = h + 'px';
|
||||
// Scroll al último mensaje al aparecer teclado
|
||||
root.style.height = window.visualViewport.height + 'px';
|
||||
const msgs = document.getElementById('pub-messages');
|
||||
if (msgs) setTimeout(() => { msgs.scrollTop = msgs.scrollHeight; }, 50);
|
||||
};
|
||||
@@ -100,7 +124,7 @@
|
||||
}
|
||||
|
||||
document.addEventListener('DOMContentLoaded', initViewportFix);
|
||||
document.addEventListener('livewire:load', initViewportFix);
|
||||
document.addEventListener('livewire:load', initViewportFix);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -1,6 +1,4 @@
|
||||
<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;">
|
||||
<div id="chat-root">
|
||||
|
||||
{{-- ══ PASO 1: Ingreso de correo ══ --}}
|
||||
@if ($paso === 'email')
|
||||
|
||||
Reference in New Issue
Block a user