Isaac Aracena
368 lines
13 KiB
TypeScript
368 lines
13 KiB
TypeScript
import React, { useState, useRef, useEffect } from 'react';
|
|
import { motion, AnimatePresence } from 'motion/react';
|
|
import { FileText, Loader2, ShieldCheck, Sparkles, Workflow } from 'lucide-react';
|
|
import { onAuthStateChanged, signInWithPopup, signOut, User } from 'firebase/auth';
|
|
|
|
import { Header } from './components/Header';
|
|
import { InputArea } from './components/InputArea';
|
|
import { MessageBubble } from './components/MessageBubble';
|
|
import { LoginScreen } from './components/LoginScreen';
|
|
|
|
import { auth, googleProvider } from './lib/firebase';
|
|
import { Message, Attachment, AudioRecording } from './types';
|
|
|
|
export default function App() {
|
|
const welcomeText = `### Portal Brief CDC
|
|
|
|
Este portal funciona por pasos y no como un chat libre.
|
|
|
|
**Orden del proceso:**
|
|
|
|
1. **Nota de voz** _(obligatorio)_
|
|
2. **Imágenes de referencia** _(obligatorio)_
|
|
3. **Documentos relacionados** _(opcional)_
|
|
4. **Campaña o elementos gráficos existentes** _(opcional)_
|
|
5. **Enlaces de referencia online** _(opcional)_
|
|
6. **Revisión y envío**
|
|
|
|
**Qué hace el sistema con cada entrada:**
|
|
|
|
- **Nota de voz:** se analiza
|
|
- **Imágenes:** se analizan
|
|
- **Documentos y Campaña:** se guardan en la carpeta del proyecto
|
|
- **Enlaces online:** se listan dentro del brief
|
|
|
|
Cuando completes los pasos obligatorios, podrás enviar la solicitud en el paso final.`;
|
|
|
|
const [messages, setMessages] = useState<Message[]>([
|
|
{
|
|
id: 'welcome',
|
|
sender: 'system',
|
|
text: welcomeText,
|
|
timestamp: new Date(),
|
|
status: 'sent'
|
|
}
|
|
]);
|
|
|
|
const getInitialWebhookUrl = () => {
|
|
if (typeof window === 'undefined') {
|
|
return import.meta.env.VITE_WEBHOOK_URL || '';
|
|
}
|
|
|
|
return (
|
|
window.localStorage.getItem('cdc-brief-webhook-url') ||
|
|
import.meta.env.VITE_WEBHOOK_URL ||
|
|
''
|
|
);
|
|
};
|
|
|
|
const [webhookUrl] = useState(getInitialWebhookUrl);
|
|
const [isProcessing, setIsProcessing] = useState(false);
|
|
const [isConnected, setIsConnected] = useState(true);
|
|
|
|
const [user, setUser] = useState<User | null>(null);
|
|
const [authLoading, setAuthLoading] = useState(true);
|
|
const [loginLoading, setLoginLoading] = useState(false);
|
|
const [authError, setAuthError] = useState('');
|
|
|
|
const messagesEndRef = useRef<HTMLDivElement>(null);
|
|
|
|
const scrollToBottom = () => {
|
|
messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
|
|
};
|
|
|
|
useEffect(() => {
|
|
scrollToBottom();
|
|
}, [messages, isProcessing]);
|
|
|
|
useEffect(() => {
|
|
if (typeof window !== 'undefined' && webhookUrl) {
|
|
window.localStorage.setItem('cdc-brief-webhook-url', webhookUrl);
|
|
}
|
|
}, [webhookUrl]);
|
|
|
|
useEffect(() => {
|
|
const unsubscribe = onAuthStateChanged(auth, (currentUser) => {
|
|
setUser(currentUser);
|
|
setAuthLoading(false);
|
|
});
|
|
|
|
return () => unsubscribe();
|
|
}, []);
|
|
|
|
const handleGoogleLogin = async () => {
|
|
try {
|
|
setLoginLoading(true);
|
|
setAuthError('');
|
|
|
|
const result = await signInWithPopup(auth, googleProvider);
|
|
const email = result.user.email || '';
|
|
|
|
const allowedDomain = '@gomezleemarketing.com';
|
|
|
|
if (!email.toLowerCase().endsWith(allowedDomain.toLowerCase())) {
|
|
await signOut(auth);
|
|
setAuthError('Solo se permite acceso con cuentas corporativas de la empresa.');
|
|
return;
|
|
}
|
|
|
|
setUser(result.user);
|
|
} catch (error) {
|
|
console.error('Google login error:', error);
|
|
setAuthError('No se pudo iniciar sesión con Google.');
|
|
} finally {
|
|
setLoginLoading(false);
|
|
}
|
|
};
|
|
|
|
|
|
const handleLogout = async () => {
|
|
await signOut(auth);
|
|
setUser(null);
|
|
};
|
|
|
|
const handleSendMessage = async (
|
|
text: string,
|
|
attachments: Attachment[],
|
|
audio?: AudioRecording
|
|
) => {
|
|
const userMessageId = Math.random().toString(36).substring(7);
|
|
|
|
const newMessage: Message = {
|
|
id: userMessageId,
|
|
sender: 'user',
|
|
text,
|
|
attachments,
|
|
audio,
|
|
timestamp: new Date(),
|
|
status: 'sending'
|
|
};
|
|
|
|
setMessages((prev) => [...prev, newMessage]);
|
|
setIsProcessing(true);
|
|
|
|
try {
|
|
const formData = new FormData();
|
|
formData.append('text', text);
|
|
formData.append('timestamp', new Date().toISOString());
|
|
|
|
attachments.forEach((att, index) => {
|
|
const key = att.category === 'campaign' ? `campaign_file_${index}` : `file_${index}`;
|
|
formData.append(key, att.file);
|
|
});
|
|
|
|
if (audio) {
|
|
formData.append('audio', audio.blob, 'voice_note.webm');
|
|
}
|
|
|
|
const response = await fetch(webhookUrl, {
|
|
method: 'POST',
|
|
body: formData,
|
|
});
|
|
|
|
if (!response.ok) {
|
|
throw new Error(`HTTP error! status: ${response.status}`);
|
|
}
|
|
|
|
let responseData: unknown;
|
|
const contentType = response.headers.get('content-type');
|
|
|
|
if (contentType && contentType.includes('application/json')) {
|
|
responseData = await response.json();
|
|
} else {
|
|
responseData = await response.text();
|
|
}
|
|
|
|
setMessages((prev) =>
|
|
prev.map((msg) =>
|
|
msg.id === userMessageId ? { ...msg, status: 'sent' } : msg
|
|
)
|
|
);
|
|
|
|
const systemMessage: Message = {
|
|
id: Math.random().toString(36).substring(7),
|
|
sender: 'system',
|
|
text:
|
|
typeof responseData === 'object'
|
|
? JSON.stringify(responseData, null, 2)
|
|
: (responseData as string) || 'Solicitud recibida correctamente.',
|
|
timestamp: new Date(),
|
|
status: 'sent'
|
|
};
|
|
|
|
setMessages((prev) => [...prev, systemMessage]);
|
|
setIsConnected(true);
|
|
} catch (error) {
|
|
console.error('Webhook error:', error);
|
|
setIsConnected(false);
|
|
|
|
setMessages((prev) =>
|
|
prev.map((msg) =>
|
|
msg.id === userMessageId ? { ...msg, status: 'error' } : msg
|
|
)
|
|
);
|
|
|
|
const errorMessage: Message = {
|
|
id: Math.random().toString(36).substring(7),
|
|
sender: 'system',
|
|
text: `**Error de conexión:** No se pudo conectar con el webhook configurado.
|
|
|
|
Verifica que la URL productiva esté correcta en el entorno y que el endpoint esté activo y acepte solicitudes POST con FormData.`,
|
|
timestamp: new Date(),
|
|
status: 'error'
|
|
};
|
|
|
|
setMessages((prev) => [...prev, errorMessage]);
|
|
} finally {
|
|
setIsProcessing(false);
|
|
}
|
|
};
|
|
|
|
if (authLoading) {
|
|
return (
|
|
<div className="flex min-h-screen items-center justify-center bg-[#060816] text-zinc-200">
|
|
Cargando acceso...
|
|
</div>
|
|
);
|
|
}
|
|
|
|
if (!user) {
|
|
return (
|
|
<LoginScreen
|
|
onLogin={handleGoogleLogin}
|
|
isLoading={loginLoading}
|
|
error={authError}
|
|
/>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="relative flex min-h-screen flex-col overflow-x-hidden bg-[#060816] text-zinc-100 font-sans selection:bg-indigo-500/30">
|
|
<div className="pointer-events-none absolute inset-0 overflow-hidden">
|
|
<div className="absolute left-[-10%] top-[-15%] h-[34rem] w-[34rem] rounded-full bg-indigo-600/18 blur-3xl" />
|
|
<div className="absolute right-[-8%] top-[8%] h-[30rem] w-[30rem] rounded-full bg-cyan-400/12 blur-3xl" />
|
|
<div className="absolute bottom-[-18%] left-[20%] h-[28rem] w-[28rem] rounded-full bg-fuchsia-500/10 blur-3xl" />
|
|
<div className="absolute inset-0 bg-[linear-gradient(rgba(255,255,255,0.03)_1px,transparent_1px),linear-gradient(90deg,rgba(255,255,255,0.03)_1px,transparent_1px)] bg-[size:42px_42px] opacity-[0.06]" />
|
|
</div>
|
|
|
|
<Header isConnected={isConnected} onLogout={handleLogout} />
|
|
<main className="relative flex-1">
|
|
<div className="mx-auto flex w-full max-w-7xl flex-col gap-6 px-4 py-6 pb-8 sm:px-6 lg:px-8">
|
|
<section className="overflow-hidden rounded-[32px] border border-white/10 bg-white/5 shadow-[0_30px_80px_rgba(0,0,0,0.35)] backdrop-blur-xl">
|
|
<div className="grid gap-0 lg:grid-cols-[1.5fr_1fr]">
|
|
<div className="relative p-6 sm:p-7 lg:p-8">
|
|
<div className="absolute inset-0 bg-[radial-gradient(circle_at_top_left,rgba(99,102,241,0.22),transparent_38%),radial-gradient(circle_at_bottom_right,rgba(34,211,238,0.14),transparent_36%)]" />
|
|
<div className="relative">
|
|
<div className="mb-4 inline-flex items-center gap-2 rounded-full border border-indigo-400/25 bg-indigo-500/10 px-3 py-1 text-xs font-semibold uppercase tracking-[0.22em] text-indigo-200">
|
|
<Sparkles className="h-3.5 w-3.5" /> Portal inteligente de briefs
|
|
</div>
|
|
|
|
<h2 className="max-w-3xl text-3xl font-semibold tracking-tight text-white sm:text-4xl">
|
|
Carga el brief en un flujo claro, visual y mucho más profesional.
|
|
</h2>
|
|
|
|
<p className="mt-4 max-w-2xl text-sm leading-7 text-zinc-300 sm:text-base">
|
|
La interfaz guía al usuario paso por paso, reduce errores de carga y organiza audio, imágenes, archivos y referencias para construir un brief listo para revisión interna.
|
|
</p>
|
|
|
|
<div className="mt-6 flex flex-wrap gap-3">
|
|
{[
|
|
{ icon: ShieldCheck, label: 'Validaciones obligatorias' },
|
|
{ icon: Workflow, label: 'Proceso guiado por pasos' },
|
|
{ icon: FileText, label: 'Entrega estructurada al flujo' },
|
|
].map(({ icon: Icon, label }) => (
|
|
<div
|
|
key={label}
|
|
className="inline-flex items-center gap-2 rounded-2xl border border-white/10 bg-black/20 px-4 py-3 text-sm text-zinc-200"
|
|
>
|
|
<Icon className="h-4 w-4 text-indigo-300" />
|
|
<span>{label}</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="border-t border-white/10 bg-black/20 p-6 sm:p-7 lg:border-l lg:border-t-0 lg:p-8">
|
|
<div className="rounded-[28px] border border-white/10 bg-black/25 p-5">
|
|
<p className="text-xs font-semibold uppercase tracking-[0.24em] text-zinc-500">
|
|
Resumen del sistema
|
|
</p>
|
|
|
|
<div className="mt-4 space-y-4">
|
|
{[
|
|
'La nota de voz, las imágenes y los PDFs se analizan automáticamente.',
|
|
'Excel, PowerPoint, Word y otros adjuntos se guardan como soporte en la carpeta del proyecto.',
|
|
'Los enlaces online se registran para alimentar el brief final.',
|
|
'El usuario no necesita usar el portal como chat libre: todo queda guiado.',
|
|
].map((item) => (
|
|
<div key={item} className="flex items-start gap-3">
|
|
<div className="mt-1 h-2.5 w-2.5 rounded-full bg-indigo-400 shadow-[0_0_18px_rgba(129,140,248,0.7)]" />
|
|
<p className="text-sm leading-6 text-zinc-300">{item}</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section className="rounded-[30px] border border-white/10 bg-black/20 p-4 shadow-[0_24px_60px_rgba(0,0,0,0.28)] backdrop-blur-xl sm:p-5">
|
|
<div className="mb-4 flex flex-wrap items-center justify-between gap-3">
|
|
<div>
|
|
<p className="text-xs font-semibold uppercase tracking-[0.24em] text-zinc-500">
|
|
Carga guiada
|
|
</p>
|
|
<h3 className="mt-1 text-lg font-semibold text-white sm:text-xl">
|
|
Completa el brief y envía la solicitud
|
|
</h3>
|
|
</div>
|
|
</div>
|
|
|
|
<InputArea
|
|
onSendMessage={handleSendMessage}
|
|
isProcessing={isProcessing}
|
|
/>
|
|
</section>
|
|
|
|
<section className="rounded-[30px] border border-white/10 bg-black/20 p-4 shadow-[0_24px_60px_rgba(0,0,0,0.28)] backdrop-blur-xl sm:p-5">
|
|
<div className="mb-4 flex flex-wrap items-center justify-between gap-3">
|
|
<div>
|
|
<p className="text-xs font-semibold uppercase tracking-[0.24em] text-zinc-500">
|
|
Respuesta del portal
|
|
</p>
|
|
<h3 className="mt-1 text-lg font-semibold text-white sm:text-xl">
|
|
Resultado de la solicitud
|
|
</h3>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="max-h-[65vh] min-h-[360px] overflow-y-auto rounded-[24px] border border-white/10 bg-white/[0.03] p-4 sm:p-5 lg:p-6 scrollbar-thin">
|
|
<AnimatePresence initial={false}>
|
|
{messages.map((message) => (
|
|
<MessageBubble key={message.id} message={message} />
|
|
))}
|
|
</AnimatePresence>
|
|
|
|
{isProcessing && (
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 10 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
exit={{ opacity: 0, scale: 0.9 }}
|
|
className="mb-4 flex w-fit items-center gap-3 rounded-2xl border border-white/10 bg-white/5 px-4 py-3"
|
|
>
|
|
<Loader2 className="h-4 w-4 animate-spin text-indigo-400" />
|
|
<span className="text-sm font-medium text-zinc-300">
|
|
Procesando la solicitud...
|
|
</span>
|
|
</motion.div>
|
|
)}
|
|
|
|
<div ref={messagesEndRef} className="h-2" />
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
);
|
|
} |