@decido/shell 1.0.0 → 4.0.2

package/src/components/playground/demos/KiaAcademyNode.tsx

@@ -1,250 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import { BaseNode } from '@decido/macia-core';
-import {
-    GraduationCap, Trophy, Star, CheckCircle2, XCircle, Users,
-    Flame, Award, ArrowRight, RotateCcw, BookOpen, Target,
-    TrendingUp, Zap, Medal, Clock
-} from 'lucide-react';
-
-/* ═══════════════════════════════════════════════════════════════
-   KIA ACADEMY NODE — Sales Academy · Grecco Motors
-   Capacitación gamificada con quizzes, certificaciones, leaderboard
-   ═══════════════════════════════════════════════════════════════ */
-
-const LEADERBOARD = [
-    { name: 'Johan S. Blanco', role: 'Asesor Premium', xp: 6820, streak: 22, avatar: '👨‍💼', cert: 'EV Specialist', convRate: '66.8%' },
-    { name: 'Camila Torres', role: 'Asesora Senior', xp: 5450, streak: 15, avatar: '👩‍💼', cert: 'ADAS Expert', convRate: '58.2%' },
-    { name: 'Alejandra Ríos', role: 'Asesora Comercial', xp: 4200, streak: 8, avatar: '👩‍🦰', cert: 'Finance Pro', convRate: '52.1%' },
-    { name: 'Miguel Sánchez', role: 'Asesor Junior', xp: 3100, streak: 5, avatar: '👨‍🦱', cert: null, convRate: '41.3%' },
-    { name: 'Pedro Gómez', role: 'Asesor Trainee', xp: 1780, streak: 3, avatar: '🧑', cert: null, convRate: '28.7%' },
-];
-
-const QUIZ_QUESTIONS = [
-    { q: '¿Cuál es la autonomía real del Kia EV6 GT con batería de 77.4 kWh?', options: ['320 km', '424 km', '510 km', '385 km'], correct: 1, fact: 'El EV6 GT ofrece hasta 424 km en ciclo WLTP combinado. Carga 10-80% en 18 min.' },
-    { q: '¿Qué tecnología de carga rápida usa la plataforma E-GMP?', options: ['CCS Combo 800V', 'CHAdeMO', 'Tesla Supercharger', 'Type 1'], correct: 0, fact: 'CCS Combo con arquitectura 800V permite carga ultra-rápida hasta 350kW.' },
-    { q: '¿Cuántos airbags tiene el Sportage 2024 full?', options: ['4', '6', '7', '8'], correct: 2, fact: '7 airbags: frontales, laterales, cortina y rodilla conductor. NCAP 5 estrellas.' },
-    { q: '¿Qué significa el score "S" en Partner Program?', options: ['Standard', 'Superior', 'Supreme', 'Satisfactorio'], correct: 2, fact: '"S" = Supreme. Máximo nivel del Partner Program de KIA Corporation.' },
-    { q: '¿Cuál es el market share actual de Grecco Motors?', options: ['8.7%', '11.2%', '13.3%', '15.1%'], correct: 2, fact: '13.3% — #1 en la región. 2.1pp por encima del segundo competidor.' },
-];
-
-const CERTIFICATIONS = [
-    { name: 'EV Specialist', icon: '⚡', status: 'completed', progress: 100, xpReward: 500 },
-    { name: 'ADAS Expert', icon: '🛡️', status: 'completed', progress: 100, xpReward: 400 },
-    { name: 'Finance Pro', icon: '💰', status: 'in-progress', progress: 72, xpReward: 450 },
-    { name: 'Posventa Master', icon: '🔧', status: 'locked', progress: 0, xpReward: 350 },
-    { name: 'Digital Sales', icon: '📱', status: 'locked', progress: 0, xpReward: 600 },
-];
-
-const MODULES = [
-    { name: 'Portafolio EV', progress: 100, icon: '⚡', lessons: 12 },
-    { name: 'Técnicas de Cierre Grecco', progress: 85, icon: '🎯', lessons: 8 },
-    { name: 'Financiación & Seguros', progress: 72, icon: '💰', lessons: 10 },
-    { name: 'ADAS & Seguridad', progress: 100, icon: '🛡️', lessons: 6 },
-    { name: 'Posventa Predictiva', progress: 35, icon: '🔧', lessons: 9 },
-    { name: 'Digital Sales & CRM', progress: 15, icon: '📱', lessons: 7 },
-];
-
-export const KiaAcademyNode = (props: any) => {
-    const [view, setView] = useState<'dashboard' | 'quiz' | 'certs'>('dashboard');
-    const [currentQ, setCurrentQ] = useState(0);
-    const [score, setScore] = useState(0);
-    const [answered, setAnswered] = useState<number | null>(null);
-    const [quizDone, setQuizDone] = useState(false);
-    const [tick, setTick] = useState(0);
-
-    useEffect(() => {
-        const iv = setInterval(() => setTick(t => t + 1), 8000);
-        return () => clearInterval(iv);
-    }, []);
-
-    const question = QUIZ_QUESTIONS[currentQ];
-    const totalProgress = Math.round(MODULES.reduce((s, m) => s + m.progress, 0) / MODULES.length);
-
-    const handleAnswer = (idx: number) => {
-        if (answered !== null) return;
-        setAnswered(idx);
-        if (idx === question.correct) setScore(s => s + 100);
-        setTimeout(() => {
-            if (currentQ < QUIZ_QUESTIONS.length - 1) {
-                setCurrentQ(c => c + 1);
-                setAnswered(null);
-            } else {
-                setQuizDone(true);
-            }
-        }, 1500);
-    };
-
-    const resetQuiz = () => { setCurrentQ(0); setScore(0); setAnswered(null); setQuizDone(false); };
-
-    return (
-        <BaseNode {...props} title="Kia Sales Academy" width={460} height={640}>
-            <div className="flex flex-col h-full bg-slate-950 text-white overflow-hidden">
-
-                {/* Header */}
-                <div className="flex items-center gap-3 p-3 bg-slate-900 border-b border-slate-800">
-                    <div className="w-9 h-9 rounded-full bg-red-600/20 flex items-center justify-center border border-red-500/30">
-                        <span className="text-red-500 font-bold text-[7px] tracking-widest">KIA</span>
-                    </div>
-                    <div className="flex-1">
-                        <div className="text-xs font-bold tracking-wide">SALES ACADEMY</div>
-                        <div className="text-[10px] text-slate-400">Grecco Motors · Capacitación Gamificada</div>
-                    </div>
-                    <div className="flex gap-1">
-                        {(['dashboard', 'quiz', 'certs'] as const).map(v => (
-                            <button key={v} onClick={() => { setView(v); if (v === 'quiz') resetQuiz(); }}
-                                className={`px-2 py-1 text-[9px] rounded font-semibold transition-colors ${view === v ? 'bg-white text-black' : 'bg-slate-700 text-slate-300'}`}>
-                                {v === 'dashboard' ? '📊' : v === 'quiz' ? '🧠' : '🏅'} {v.charAt(0).toUpperCase() + v.slice(1)}
-                            </button>
-                        ))}
-                    </div>
-                </div>
-
-                {view === 'dashboard' && (
-                    <div className="flex-1 overflow-y-auto p-3 space-y-3">
-
-                        {/* Progress Ring + Stats */}
-                        <div className="flex items-center gap-4 bg-slate-900 rounded-xl p-3 border border-slate-800">
-                            <div className="relative w-16 h-16 shrink-0">
-                                <svg className="w-16 h-16 -rotate-90" viewBox="0 0 36 36">
-                                    <path d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831" fill="none" stroke="#1e293b" strokeWidth="3" />
-                                    <path d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831" fill="none" stroke="#ef4444" strokeWidth="3" strokeDasharray={`${totalProgress}, 100`} strokeLinecap="round" />
-                                </svg>
-                                <div className="absolute inset-0 flex items-center justify-center text-sm font-bold">{totalProgress}%</div>
-                            </div>
-                            <div className="flex-1">
-                                <div className="text-sm font-bold">Progreso General</div>
-                                <div className="text-[10px] text-slate-400">{MODULES.filter(m => m.progress === 100).length} de {MODULES.length} módulos completados</div>
-                                <div className="flex items-center gap-3 mt-1">
-                                    <span className="flex items-center gap-1 text-[10px] text-orange-400"><Flame size={10} /> Racha: 8 días</span>
-                                    <span className="flex items-center gap-1 text-[10px] text-yellow-400"><Star size={10} /> 4,200 XP</span>
-                                </div>
-                            </div>
-                        </div>
-
-                        {/* Modules */}
-                        <div>
-                            <div className="text-[9px] text-slate-500 font-bold uppercase mb-2 flex items-center gap-1"><BookOpen size={10} /> Módulos ({MODULES.length})</div>
-                            <div className="space-y-1">
-                                {MODULES.map(m => (
-                                    <div key={m.name} className="flex items-center gap-2 bg-slate-900 rounded-lg p-2 border border-slate-800">
-                                        <span className="text-sm">{m.icon}</span>
-                                        <div className="flex-1 min-w-0">
-                                            <div className="text-[10px] font-semibold">{m.name}</div>
-                                            <div className="w-full bg-slate-800 rounded-full h-1 mt-0.5">
-                                                <div className={`h-full rounded-full transition-all ${m.progress === 100 ? 'bg-green-500' : 'bg-red-500'}`} style={{ width: `${m.progress}%` }} />
-                                            </div>
-                                        </div>
-                                        <div className="text-right shrink-0">
-                                            <span className="text-[10px] text-slate-400 font-mono">{m.progress}%</span>
-                                            <div className="text-[8px] text-slate-600">{m.lessons} lecciones</div>
-                                        </div>
-                                    </div>
-                                ))}
-                            </div>
-                        </div>
-
-                        {/* Leaderboard */}
-                        <div>
-                            <div className="text-[9px] text-slate-500 font-bold uppercase mb-2 flex items-center gap-1"><Trophy size={10} /> Top Asesores Grecco</div>
-                            <div className="space-y-1">
-                                {LEADERBOARD.map((u, i) => (
-                                    <div key={u.name} className={`flex items-center gap-2 p-2 rounded-lg border ${i === 0 ? 'bg-yellow-500/5 border-yellow-500/20' : 'bg-slate-900 border-slate-800'}`}>
-                                        <span className={`text-[10px] font-bold w-4 ${i === 0 ? 'text-yellow-400' : i === 1 ? 'text-slate-300' : i === 2 ? 'text-orange-400' : 'text-slate-500'}`}>{i + 1}</span>
-                                        <span className="text-sm">{u.avatar}</span>
-                                        <div className="flex-1 min-w-0">
-                                            <div className="text-[10px] font-semibold flex items-center gap-1">
-                                                {u.name}
-                                                {u.cert && <span className="text-[7px] bg-green-500/20 text-green-400 px-1 rounded">{u.cert}</span>}
-                                            </div>
-                                            <div className="text-[9px] text-slate-500">{u.role} · Conv: {u.convRate}</div>
-                                        </div>
-                                        <div className="text-right shrink-0">
-                                            <div className="text-[10px] font-bold text-yellow-400 flex items-center gap-0.5"><Star size={8} /> {u.xp.toLocaleString()}</div>
-                                            <div className="text-[8px] text-slate-500 flex items-center gap-0.5"><Flame size={7} /> {u.streak}d</div>
-                                        </div>
-                                    </div>
-                                ))}
-                            </div>
-                        </div>
-                    </div>
-                )}
-
-                {view === 'certs' && (
-                    <div className="flex-1 overflow-y-auto p-3 space-y-2">
-                        <div className="text-[9px] text-slate-500 font-bold uppercase mb-2 flex items-center gap-1"><Medal size={10} /> Certificaciones KIA</div>
-                        {CERTIFICATIONS.map(c => (
-                            <div key={c.name} className={`bg-slate-900 rounded-lg p-3 border ${c.status === 'completed' ? 'border-green-500/30' : c.status === 'in-progress' ? 'border-yellow-500/30' : 'border-slate-800 opacity-60'}`}>
-                                <div className="flex items-center gap-2">
-                                    <span className="text-xl">{c.icon}</span>
-                                    <div className="flex-1">
-                                        <div className="text-xs font-bold flex items-center gap-1.5">
-                                            {c.name}
-                                            {c.status === 'completed' && <CheckCircle2 size={12} className="text-green-400" />}
-                                        </div>
-                                        <div className="text-[9px] text-slate-500">Recompensa: {c.xpReward} XP</div>
-                                        {c.status !== 'locked' && (
-                                            <div className="w-full bg-slate-800 rounded-full h-1.5 mt-1.5">
-                                                <div className={`h-full rounded-full ${c.status === 'completed' ? 'bg-green-500' : 'bg-yellow-500'}`} style={{ width: `${c.progress}%` }} />
-                                            </div>
-                                        )}
-                                    </div>
-                                    <span className={`text-[9px] font-bold px-2 py-0.5 rounded ${c.status === 'completed' ? 'bg-green-500/10 text-green-400' : c.status === 'in-progress' ? 'bg-yellow-500/10 text-yellow-400' : 'bg-slate-800 text-slate-500'}`}>
-                                        {c.status === 'completed' ? '✅ Obtenida' : c.status === 'in-progress' ? `${c.progress}%` : '🔒 Bloqueada'}
-                                    </span>
-                                </div>
-                            </div>
-                        ))}
-                    </div>
-                )}
-
-                {view === 'quiz' && !quizDone && (
-                    <div className="flex-1 flex flex-col p-4">
-                        <div className="flex items-center justify-between mb-2">
-                            <div className="text-[10px] text-slate-400">Pregunta {currentQ + 1}/{QUIZ_QUESTIONS.length}</div>
-                            <div className="text-[10px] text-yellow-400 font-bold flex items-center gap-1"><Star size={10} /> {score} XP</div>
-                        </div>
-                        <div className="w-full bg-slate-800 rounded-full h-1 mb-4">
-                            <div className="h-full bg-red-500 rounded-full transition-all" style={{ width: `${((currentQ + 1) / QUIZ_QUESTIONS.length) * 100}%` }} />
-                        </div>
-                        <div className="text-sm font-semibold mb-4 leading-relaxed">{question.q}</div>
-                        <div className="space-y-2 flex-1">
-                            {question.options.map((opt, i) => {
-                                let bg = 'bg-slate-900 border-slate-700 hover:border-slate-600';
-                                if (answered !== null) {
-                                    if (i === question.correct) bg = 'bg-green-500/10 border-green-500/40';
-                                    else if (i === answered) bg = 'bg-red-500/10 border-red-500/40';
-                                }
-                                return (
-                                    <button key={i} onClick={() => handleAnswer(i)}
-                                        className={`w-full text-left p-3 rounded-lg border text-xs transition-all flex items-center gap-2 ${bg}`}>
-                                        <span className="w-5 h-5 rounded-full bg-slate-800 flex items-center justify-center text-[10px] font-bold text-slate-400">{String.fromCharCode(65 + i)}</span>
-                                        {opt}
-                                        {answered !== null && i === question.correct && <CheckCircle2 size={14} className="ml-auto text-green-400" />}
-                                        {answered !== null && i === answered && i !== question.correct && <XCircle size={14} className="ml-auto text-red-400" />}
-                                    </button>
-                                );
-                            })}
-                        </div>
-                        {answered !== null && (
-                            <div className="mt-3 bg-blue-500/10 border border-blue-500/20 rounded-lg p-2 text-[10px] text-blue-200">💡 {question.fact}</div>
-                        )}
-                    </div>
-                )}
-
-                {view === 'quiz' && quizDone && (
-                    <div className="flex-1 flex flex-col items-center justify-center p-6 text-center">
-                        <Award className="text-yellow-400 mb-4" size={48} />
-                        <h3 className="text-xl font-bold mb-1">¡Quiz Completado!</h3>
-                        <div className="text-slate-400 mb-4">Puntaje: <strong className="text-yellow-400">{score} XP</strong> de {QUIZ_QUESTIONS.length * 100}</div>
-                        <div className={`text-sm font-semibold mb-6 ${score >= 400 ? 'text-green-400' : score >= 200 ? 'text-yellow-400' : 'text-red-400'}`}>
-                            {score >= 400 ? '🏆 ¡Excelente! Nivel Expert.' : score >= 200 ? '📚 Buen intento. ¡Sigue practicando!' : '🔄 Necesitas repasar los módulos.'}
-                        </div>
-                        <button onClick={resetQuiz} className="flex items-center gap-2 px-4 py-2 bg-red-600 hover:bg-red-500 rounded-lg text-xs font-bold transition-all">
-                            <RotateCcw size={14} /> Intentar de Nuevo
-                        </button>
-                    </div>
-                )}
-            </div>
-        </BaseNode>
-    );
-};

package/src/components/playground/demos/KiaBotNode.tsx

@@ -1,207 +0,0 @@
-import React, { useState, useEffect, useRef, useCallback } from 'react';
-import { BaseNode } from '@decido/macia-core';
-import {
-    Send, User, Bot, MoreVertical, Phone, Video,
-    CheckCheck, Sparkles, ThumbsUp, AlertCircle, Zap
-} from 'lucide-react';
-
-/* ═══════════════════════════════════════════════════════════════
-   KIA BOT NODE — Agente IA WhatsApp con Lead Qualification
-   Simula conversación inteligente + scoring automático
-   ═══════════════════════════════════════════════════════════════ */
-
-type LeadScore = { score: number; label: string; color: string };
-
-/** Simulated AI response engine */
-const getAIResponse = (input: string, context: string[]): { text: string; qualifier?: LeadScore } => {
-    const lower = input.toLowerCase();
-
-    if (lower.includes('precio') || lower.includes('costo') || lower.includes('cuánto') || lower.includes('cuanto')) {
-        return {
-            text: '💰 El precio de lanzamiento desde $78.990.000. Tenemos planes de financiación hasta 72 meses con tasa desde 0.99%. ¿Te gustaría agendar un Test Drive?',
-            qualifier: { score: 85, label: 'Alta Intención', color: '#22c55e' }
-        };
-    }
-    if (lower.includes('agendar') || lower.includes('cita') || lower.includes('visitar') || lower.includes('test drive')) {
-        return {
-            text: '🚗 ¡Perfecto! He notificado al equipo comercial. Johan Blanco, nuestro mejor asesor, te contactará en menos de 5 min. ¿Prefieres en la mañana o en la tarde?',
-            qualifier: { score: 95, label: 'Lead Caliente 🔥', color: '#ef4444' }
-        };
-    }
-    if (lower.includes('sedan') || lower.includes('cross') || lower.includes('sportage') || lower.includes('seltos') || lower.includes('ev')) {
-        return {
-            text: '✨ Excelente gusto. Ese modelo tiene motor turbo, ADAS nivel 2, y pantalla de 12.3". Viene con 7 años de garantía. ¿Deseas comparar con otro modelo?',
-            qualifier: { score: 72, label: 'Interés Técnico', color: '#3b82f6' }
-        };
-    }
-    if (lower.includes('financ') || lower.includes('crédito') || lower.includes('credito') || lower.includes('cuotas')) {
-        return {
-            text: '🏦 Tenemos alianza con 5 bancos. Pre-aprobación IA en 30 segundos. Solo necesito tu cédula y comprobante de ingresos. ¿Te interesa?',
-            qualifier: { score: 80, label: 'Intención Financiera', color: '#f59e0b' }
-        };
-    }
-    if (lower.includes('hola') || lower.includes('buenas') || lower.includes('hi')) {
-        return { text: '¡Hola! 👋 Soy Kia AI, tu asistente virtual 24/7. ¿En qué puedo ayudarte? Puedo informarte sobre modelos, precios, financiación o agendar una cita.' };
-    }
-    if (lower.includes('gracias') || lower.includes('ok') || lower.includes('listo')) {
-        return { text: '✅ ¡Con gusto! Si necesitas algo más, estoy disponible 24/7. Tu referencia de conversación es KIA-' + Math.floor(Math.random() * 10000) + '. ¡Que tengas un excelente día!' };
-    }
-
-    // Default
-    if (context.length > 4) {
-        return {
-            text: '📋 He analizado tu perfil y creo que el modelo ideal para ti es el Seltos. ¿Te gustaría conocerlo en persona? Puedo agendar una cita ahora mismo.',
-            qualifier: { score: 60, label: 'Nutrición', color: '#a855f7' }
-        };
-    }
-    return { text: 'Entiendo. ¿Te interesa conocer nuestros modelos, ver opciones de financiación, o agendar una visita al showroom?' };
-};
-
-export const KiaBotNode = (props: any) => {
-    const [messages, setMessages] = useState([
-        { id: 1, text: 'Hola, estoy interesado en el nuevo Kia EV6.', sender: 'user', time: '10:30 AM' },
-        { id: 2, text: '¡Hola! 👋 Bienvenido a Kia Grecco Motors. Soy tu asistente IA. El EV6 es nuestro vehículo eléctrico premium. ¿Te interesa la versión GT o Standard?', sender: 'bot', time: '10:30 AM' },
-    ]);
-    const [input, setInput] = useState('');
-    const [isTyping, setIsTyping] = useState(false);
-    const [leadScore, setLeadScore] = useState<LeadScore | null>(null);
-    const [qualifiedLeads, setQualifiedLeads] = useState(23);
-    const messagesEndRef = useRef<HTMLDivElement>(null);
-
-    const scrollToBottom = useCallback(() => {
-        messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
-    }, []);
-
-    useEffect(scrollToBottom, [messages, scrollToBottom]);
-
-    const handleSend = useCallback(() => {
-        if (!input.trim()) return;
-
-        const time = new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
-        const newMsg = { id: Date.now(), text: input, sender: 'user', time };
-        setMessages(prev => [...prev, newMsg]);
-        const currentInput = input;
-        setInput('');
-        setIsTyping(true);
-
-        // Simulate AI processing with realistic delay
-        const delay = 1200 + Math.random() * 1500;
-        setTimeout(() => {
-            const context = messages.map(m => m.text);
-            const { text, qualifier } = getAIResponse(currentInput, context);
-
-            setMessages(prev => [...prev, {
-                id: Date.now() + 1, text, sender: 'bot',
-                time: new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })
-            }]);
-            setIsTyping(false);
-
-            if (qualifier) {
-                setLeadScore(qualifier);
-                if (qualifier.score >= 80) setQualifiedLeads(q => q + 1);
-            }
-        }, delay);
-    }, [input, messages]);
-
-    return (
-        <BaseNode {...props} title="Kia AI Concierge" width={400} height={640}>
-            <div className="flex flex-col h-full bg-[#0b141a] overflow-hidden">
-
-                {/* WhatsApp Header */}
-                <div className="bg-[#202c33] p-3 flex items-center gap-3 text-white shadow-md z-10">
-                    <div className="w-10 h-10 rounded-full bg-white flex items-center justify-center overflow-hidden border border-white/20">
-                        <span className="text-[#008069] font-bold text-[8px] tracking-widest">KIA</span>
-                    </div>
-                    <div className="flex-1">
-                        <h3 className="font-semibold text-sm">Kia AI · Grecco Motors</h3>
-                        <div className="flex items-center gap-2">
-                            <span className="text-[10px] text-green-400">● En línea 24/7</span>
-                            <span className="text-[10px] text-slate-400">|</span>
-                            <span className="text-[10px] text-slate-400 flex items-center gap-1">
-                                <Sparkles size={8} /> IA Activa
-                            </span>
-                        </div>
-                    </div>
-                    <div className="flex gap-3 text-white/60">
-                        <Video size={18} />
-                        <Phone size={18} />
-                        <MoreVertical size={18} />
-                    </div>
-                </div>
-
-                {/* Lead Score Banner */}
-                {leadScore && (
-                    <div
-                        className="px-3 py-1.5 flex items-center justify-between text-xs transition-all duration-500"
-                        style={{ background: `${leadScore.color}22`, borderBottom: `1px solid ${leadScore.color}44` }}
-                    >
-                        <div className="flex items-center gap-2">
-                            <Zap size={12} style={{ color: leadScore.color }} />
-                            <span style={{ color: leadScore.color }} className="font-bold">{leadScore.label}</span>
-                        </div>
-                        <div className="flex items-center gap-2">
-                            <div className="h-1.5 w-20 bg-slate-800 rounded-full overflow-hidden">
-                                <div className="h-full rounded-full transition-all duration-700" style={{ width: `${leadScore.score}%`, background: leadScore.color }} />
-                            </div>
-                            <span className="font-mono text-[10px]" style={{ color: leadScore.color }}>{leadScore.score}</span>
-                        </div>
-                    </div>
-                )}
-
-                {/* Chat Area */}
-                <div className="flex-1 overflow-y-auto p-3 space-y-2">
-                    {messages.map((msg) => (
-                        <div key={msg.id} className={`flex ${msg.sender === 'user' ? 'justify-end' : 'justify-start'}`}>
-                            <div className={`max-w-[80%] rounded-lg px-3 py-1.5 shadow-sm text-sm relative ${msg.sender === 'user'
-                                ? 'bg-[#005c4b] text-white rounded-tr-none'
-                                : 'bg-[#202c33] text-white rounded-tl-none'
-                                }`}>
-                                <p className="leading-relaxed">{msg.text}</p>
-                                <span className="text-[10px] text-gray-400 flex items-center justify-end gap-1 mt-0.5">
-                                    {msg.time}
-                                    {msg.sender === 'user' && <CheckCheck size={12} className="text-blue-400" />}
-                                    {msg.sender === 'bot' && <Sparkles size={8} className="text-purple-400" />}
-                                </span>
-                            </div>
-                        </div>
-                    ))}
-                    {isTyping && (
-                        <div className="flex justify-start">
-                            <div className="bg-[#202c33] rounded-lg px-4 py-2 shadow-sm rounded-tl-none">
-                                <span className="flex gap-1">
-                                    <span className="w-1.5 h-1.5 bg-gray-400 rounded-full animate-bounce" style={{ animationDelay: '0ms' }} />
-                                    <span className="w-1.5 h-1.5 bg-gray-400 rounded-full animate-bounce" style={{ animationDelay: '150ms' }} />
-                                    <span className="w-1.5 h-1.5 bg-gray-400 rounded-full animate-bounce" style={{ animationDelay: '300ms' }} />
-                                </span>
-                            </div>
-                        </div>
-                    )}
-                    <div ref={messagesEndRef} />
-                </div>
-
-                {/* Stats Footer */}
-                <div className="bg-[#202c33] px-3 py-1 flex items-center justify-between text-[10px] text-slate-500 border-t border-slate-800">
-                    <span>Hoy: <span className="text-green-400 font-bold">{qualifiedLeads}</span> leads calificados</span>
-                    <span>Tasa Respuesta: <span className="text-blue-400 font-bold">98.2%</span></span>
-                </div>
-
-                {/* Input Area */}
-                <div className="bg-[#202c33] p-2 flex items-center gap-2">
-                    <input
-                        className="flex-1 bg-[#2a3942] rounded-lg px-4 py-2 text-sm focus:outline-none text-white placeholder-slate-500"
-                        placeholder="Escribe un mensaje..."
-                        value={input}
-                        onChange={(e) => setInput(e.target.value)}
-                        onKeyDown={(e) => e.key === 'Enter' && handleSend()}
-                    />
-                    <button
-                        onClick={handleSend}
-                        className="p-2 bg-[#008069] rounded-full text-white hover:bg-[#006d59] transition-colors"
-                    >
-                        <Send size={18} />
-                    </button>
-                </div>
-            </div>
-        </BaseNode>
-    );
-};