"use client"; function MainComponent() { const { useState, useEffect, useCallback, useRef } = React; const [userId, setUserId] = useState(null); const [config, setConfig] = useState(null); const [loadingConfig, setLoadingConfig] = useState(true); const [fetchError, setFetchError] = useState(null); const [messages, setMessages] = useState([]); const [streamingMessage, setStreamingMessage] = useState(""); const [userInput, setUserInput] = useState(""); const [isSending, setIsSending] = useState(false); const [chatError, setChatError] = useState(null); const [showQuickButtons, setShowQuickButtons] = useState(true); const [isQuickButtonsCollapsed, setIsQuickButtonsCollapsed] = useState(false); const [quickButtonsTimerId, setQuickButtonsTimerId] = useState(null); const [limitReached, setLimitReached] = useState(false); const chatContainerRef = useRef(null); const toggleQuickButtons = ()=>{ setIsQuickButtonsCollapsed(!isQuickButtonsCollapsed); }; // Función para determinar si un color es claro u oscuro const isLightColor = (color)=>{ if (!color) return true; // Convertir color a RGB let r, g, b; if (color.startsWith("#")) { const hex = color.slice(1); r = parseInt(hex.slice(0, 2), 16); g = parseInt(hex.slice(2, 4), 16); b = parseInt(hex.slice(4, 6), 16); } else if (color.startsWith("rgb")) { const match = color.match(/\d+/g); r = parseInt(match[0]); g = parseInt(match[1]); b = parseInt(match[2]); } else { return true; // Default para colores desconocidos } // Calcular luminosidad usando la fórmula estándar const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255; return luminance > 0.5; }; useEffect(()=>{ const queryParams = new URLSearchParams(window.location.search); const userIdParam = queryParams.get("user_id"); setUserId(userIdParam); }, []); const fetchConfig = useCallback(async ()=>{ if (!userId) return; setLoadingConfig(true); setFetchError(null); try { const response = await fetch("/api/getchatconfig", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ user_id: userId }) }); if (!response.ok) { throw new Error(`Failed to fetch config: [${response.status}] ${response.statusText}`); } const data = await response.json(); if (!data) throw new Error("No chat configuration found in DB"); setConfig(data); const initialMessages = []; if (data.bubble1) initialMessages.push({ role: "assistant", content: data.bubble1 }); if (data.bubble2) setTimeout(()=>setMessages((prev)=>[ ...prev, { role: "assistant", content: data.bubble2 } ]), 800); if (data.bubble3) setTimeout(()=>{ let c = data.bubble3.trim(); if (c.match(/\.(jpg|jpeg|png|gif|webp)(\?.*)?$/i)) c = ` Imagen

`; setMessages((prev)=>[ ...prev, { role: "assistant", content: c, isHtml: true } ]); }, 1600); if (data.bubble4 && data.bubble4.trim()) setTimeout(()=>{ let c = data.bubble4.trim(); const yt = c.match(/(?:https?:\/\/)?(?:www\.)?(?:youtube\.com\/watch\?v=|youtu\.be\/)([\w-]+)/i); if (yt) { c = `

`; setMessages((prev)=>[ ...prev, { role: "assistant", content: c, isHtml: true } ]); } else { setMessages((prev)=>[ ...prev, { role: "assistant", content: c } ]); } }, 2400); setMessages(initialMessages); } catch (err) { console.error(err); setFetchError("No se pudo cargar la configuración del chat. Inténtalo de nuevo más tarde."); } finally{ setLoadingConfig(false); } }, [ userId ]); useEffect(()=>{ fetchConfig(); }, [ fetchConfig ]); const handleFinishStreaming = useCallback((full)=>{ setMessages((prev)=>[ ...prev, { role: "assistant", content: full } ]); setStreamingMessage(""); setIsSending(false); setShowQuickButtons(true); setIsQuickButtonsCollapsed(false); if (quickButtonsTimerId) clearTimeout(quickButtonsTimerId); const timerId = setTimeout(()=>setIsQuickButtonsCollapsed(true), 1500); setQuickButtonsTimerId(timerId); }, [ quickButtonsTimerId ]); const useHandleStreamResponse = ({ onChunk, onFinish })=>{ return useCallback(async (response)=>{ if (!response.ok) { throw new Error(`HTTP error! status: ${response.status}`); } if (!response.body) { throw new Error("ReadableStream not supported in this browser."); } const reader = response.body.getReader(); const decoder = new TextDecoder("utf-8"); let buffer = ""; try { while(true){ const { done, value } = await reader.read(); if (done) { if (buffer.trim() && onFinish) { onFinish(buffer); } break; } const chunk = decoder.decode(value, { stream: true }); buffer += chunk; if (onChunk) { onChunk(buffer); } } } catch (error) { console.error("Error reading stream:", error); throw error; } }, [ onChunk, onFinish ]); }; const handleStreamResponse = useHandleStreamResponse({ onChunk: setStreamingMessage, onFinish: handleFinishStreaming }); const sendMessage = useCallback(async (messageText)=>{ if (!messageText.trim() || isSending || !config) return; const newUserMessage = { role: "user", content: messageText }; setMessages((prev)=>[ ...prev, newUserMessage ]); setUserInput(""); setIsSending(true); setChatError(null); // Registrar la interacción y verificar límites try { const recordResponse = await fetch("/api/recordinteraction", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ user_message: messageText, config_id: config.id || 1, user_id: userId }) }); const recordData = await recordResponse.json(); // Verificar si se alcanzó el límite mensual if (recordData.limit_reached) { setLimitReached(true); setMessages((prev)=>[ ...prev, { role: "assistant", content: recordData.error || "Límite mensual alcanzado. Favor comunicarse con el administrador para continuar utilizando el servicio.", isError: true } ]); setIsSending(false); return; } } catch (error) { console.error("Error al registrar interacción:", error); } // Separar system prompt e instrucciones HTML const systemPrompt = config.system_prompt || "Eres un asistente útil."; const htmlInstructions = ` INSTRUCCIONES DE FORMATO HTML: Debes formatear tus respuestas usando HTML para hacerlas visualmente atractivas. Usa estos elementos: ELEMENTOS BÁSICOS: - texto para negrita - texto para cursiva -

Título

para títulos grandes -

Subtítulo

para subtítulos -

Elemento

para listas - texto para enlaces COMPONENTES AVANZADOS: - - - -

Información

Éxito

Advertencia

Error

- Etiqueta -

Título

Contenido

ENLACES DE REDES SOCIALES: Si necesitas incluir enlaces a redes sociales o cualquier otro sitio web, simplemente incluye la URL completa en tu respuesta. El sistema convertirá automáticamente todas las URLs en enlaces clicables. IMPORTANTE: Usa estos elementos HTML para hacer tus respuestas visualmente atractivas. NO uses markdown ni formato de texto plano. Asegúrate de que tus respuestas incluyan elementos visuales como botones, alertas, tarjetas, etc. cuando sea apropiado para el contenido. `; const apiMessages = [ { role: "system", content: systemPrompt + htmlInstructions }, ...messages.slice(-10), newUserMessage ]; try { // Determinar qué fuentes usar según la configuración const responseSource = config.response_source || "chatgpt"; // 🔍 LOGS DE DIAGNÓSTICO console.log("🔍 DIAGNÓSTICO CHATBOT:"); console.log("- Config completa:", config); console.log("- Response source detectado:", responseSource); console.log("- User ID:", userId); console.log("- Config ID:", config.id); if (responseSource === "chatgpt") { console.log("✅ Ejecutando SOLO ChatGPT (OpenAI directo)"); // Mostrar indicador de "escribiendo" mientras se espera OpenAI setStreamingMessage("Escribiendo..."); try { const openAIResponse = await fetch("/api/callopenai", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ messages: apiMessages, stream: false, model: "gpt-4.1-mini" }) }); if (openAIResponse.ok) { const responseData = await openAIResponse.json(); if (responseData.success && responseData.message) { // Limpiar el indicador de "escribiendo" setStreamingMessage(""); // Pequeña pausa antes de empezar el efecto de escritura await new Promise((resolve)=>setTimeout(resolve, 200)); // Simular efecto de escritura para respuesta de OpenAI const fullResponse = responseData.message; const words = fullResponse.split(" "); let currentText = ""; // Mostrar palabras progresivamente for(let i = 0; i < words.length; i++){ currentText += (i > 0 ? " " : "") + words[i]; setStreamingMessage(currentText); // Pausa entre palabras (más rápido que escritura real) await new Promise((resolve)=>setTimeout(resolve, 50)); } // Finalizar con la respuesta completa handleFinishStreaming(fullResponse); } else { throw new Error(responseData.error || "Error en respuesta de OpenAI"); } } else { throw new Error(`OpenAI API Error: [${openAIResponse.status}] ${openAIResponse.statusText}`); } } catch (openAIError) { console.error("Error OpenAI:", openAIError); throw new Error("OpenAI API no disponible"); } } else if (responseSource === "create") { console.log("✅ Ejecutando SOLO Create"); try { // INTENTAR CON STREAMING REAL PRIMERO const createResponse = await fetch("/integrations/chat-gpt/conversationgpt4", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ messages: apiMessages, stream: true }) }); if (createResponse.ok) { // Usar streaming real con el handler existente console.log("🚀 Create streaming activado"); await handleStreamResponse(createResponse); } else { throw new Error(`Create streaming failed: [${createResponse.status}] ${createResponse.statusText}`); } } catch (streamError) { console.warn("⚠️ Create streaming falló, usando fallback sin streaming:", streamError); // FALLBACK: Sin streaming (simulación de escritura) try { // Mostrar indicador de "escribiendo" mientras se espera Create setStreamingMessage("Escribiendo..."); const createFallback = await fetch("/integrations/chat-gpt/conversationgpt4", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ messages: apiMessages, stream: false }) }); if (createFallback.ok) { const responseData = await createFallback.json(); if (responseData.choices && responseData.choices[0] && responseData.choices[0].message) { // Limpiar el indicador de "escribiendo" setStreamingMessage(""); // Pequeña pausa antes de empezar el efecto de escritura await new Promise((resolve)=>setTimeout(resolve, 200)); // Simular efecto de escritura para respuesta de Create const fullResponse = responseData.choices[0].message.content; const words = fullResponse.split(" "); let currentText = ""; // Mostrar palabras progresivamente for(let i = 0; i < words.length; i++){ currentText += (i > 0 ? " " : "") + words[i]; setStreamingMessage(currentText); // Pausa entre palabras (más rápido que escritura real) await new Promise((resolve)=>setTimeout(resolve, 50)); } // Finalizar con la respuesta completa handleFinishStreaming(fullResponse); } else { throw new Error(responseData.error || "Error en respuesta de Create fallback"); } } else { throw new Error(`Create Fallback API Error: [${createFallback.status}] ${createFallback.statusText}`); } } catch (fallbackError) { console.error("❌ Create fallback también falló:", fallbackError); throw new Error("Create API completamente no disponible"); } } } else if (responseSource === "make") { console.log("✅ Ejecutando SOLO Make"); // Mostrar indicador de "escribiendo" mientras se espera Make setStreamingMessage("Escribiendo..."); // Solo Make webhook const makeResponse = await fetch("/api/sendtomake", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ user_message: messageText, user_id: userId, config_id: config.id || 1, timestamp: new Date().toISOString(), context: messages.slice(-3), system_prompt: systemPrompt, html_instructions: htmlInstructions }) }); console.log("📡 Make response status:", makeResponse.status); if (makeResponse.ok) { const makeData = await makeResponse.json(); console.log("📡 Make response data:", makeData); if (makeData.success && makeData.make_response) { // Limpiar el indicador de "escribiendo" setStreamingMessage(""); // Pequeña pausa antes de empezar el efecto de escritura await new Promise((resolve)=>setTimeout(resolve, 200)); // Simular efecto de escritura para respuesta de Make const fullResponse = makeData.make_response; const words = fullResponse.split(" "); let currentText = ""; // Mostrar palabras progresivamente for(let i = 0; i < words.length; i++){ currentText += (i > 0 ? " " : "") + words[i]; setStreamingMessage(currentText); // Pausa entre palabras (más rápido que escritura real) await new Promise((resolve)=>setTimeout(resolve, 50)); } // Finalizar con la respuesta completa handleFinishStreaming(fullResponse); } else { throw new Error(makeData.error || "Error en respuesta de Make"); } } else { throw new Error(`Make API Error: [${makeResponse.status}] ${makeResponse.statusText}`); } } else if (responseSource === "both") { console.log("✅ Ejecutando ChatGPT + Make"); // Llamadas paralelas: ChatGPT y Make webhook const [chatGPTResponse, makeResponse] = await Promise.allSettled([ // Llamada a ChatGPT fetch("/integrations/chat-gpt/conversationgpt4", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ messages: apiMessages, stream: true }) }), // Llamada paralela al webhook de Make a través del backend fetch("/api/sendtomake", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ user_message: messageText, user_id: userId, config_id: config.id || 1, timestamp: new Date().toISOString(), context: messages.slice(-3), system_prompt: systemPrompt, html_instructions: htmlInstructions }) }) ]); // Procesar respuesta de Make primero (sin indicador especial) if (makeResponse.status === "fulfilled" && makeResponse.value?.ok) { try { const makeData = await makeResponse.value.json(); console.log("📡 Make response data (both mode):", makeData); if (makeData.success && makeData.make_response) { // Mostrar respuesta de Make como mensaje normal del asistente setMessages((prev)=>[ ...prev, { role: "assistant", content: makeData.make_response } ]); } } catch (makeError) { console.warn("Error processing Make response:", makeError); } } else { console.warn("Make webhook failed (non-critical)"); } // Procesar respuesta de ChatGPT con streaming if (chatGPTResponse.status === "fulfilled" && chatGPTResponse.value.ok) { await handleStreamResponse(chatGPTResponse.value); } else { // Fallback para ChatGPT sin streaming try { const chatGPTFallback = await fetch("/integrations/chat-gpt/conversationgpt4", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ messages: apiMessages, stream: false }) }); if (chatGPTFallback.ok) { const data = await chatGPTFallback.json(); const content = data.choices?.[0]?.message?.content || ""; handleFinishStreaming(content); } else { throw new Error(`ChatGPT Fallback Error: [${chatGPTFallback.status}] ${chatGPTFallback.statusText}`); } } catch (fallbackErr) { console.error("ChatGPT fallback también falló:", fallbackErr); throw new Error("Ambas fuentes de respuesta fallaron"); } } } else { // Valor no reconocido, usar ChatGPT por defecto console.warn("⚠️ Response source no reconocido:", responseSource, "- Usando ChatGPT por defecto"); const chatGPTResponse = await fetch("/integrations/chat-gpt/conversationgpt4", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ messages: apiMessages, stream: true }) }); if (chatGPTResponse.ok) { await handleStreamResponse(chatGPTResponse); } else { throw new Error(`ChatGPT API Error: [${chatGPTResponse.status}] ${chatGPTResponse.statusText}`); } } } catch (error) { console.error("Error en sendMessage:", error); setChatError("Lo siento, hubo un problema al contactar al asistente. Inténtalo de nuevo."); setMessages((prev)=>[ ...prev, { role: "assistant", content: "Error: No se pudo obtener respuesta.", isError: true } ]); setIsSending(false); } }, [ isSending, messages, config, userId, handleStreamResponse, handleFinishStreaming ]); const handleSubmit = useCallback(async (e)=>{ e.preventDefault(); await sendMessage(userInput); }, [ userInput, sendMessage ]); useEffect(()=>{ if (chatContainerRef.current) chatContainerRef.current.scrollTop = chatContainerRef.current.scrollHeight; }, [ messages, streamingMessage ]); const handleButtonClick = (text)=>{ setUserInput(text); setTimeout(()=>{ sendMessage(text); }, 100); }; const processMessageContent = (content)=>{ if (!content) return ""; let processedContent = content; const youtubeRegex = /(https?:\/\/(?:www\.)?(?:youtube\.com\/watch\?v=|youtu\.be\/|youtube\.com\/embed\/)([a-zA-Z0-9_-]+)(?:[?&\w=-]*)?)/gi; processedContent = processedContent.replace(youtubeRegex, (match, url, videoId)=>{ if (isInsideHtmlTag(processedContent, match)) { return match; } return `

Ver video en YouTube

`; }); const mapRegex = /(?:https?:\/\/(?!.*\.(?:jpg|jpeg|png|gif|webp)$)(?!.*(?:youtube\.com\/(?:watch|embed)|youtu\.be)\/)(?!.*(?:goo\.gl\/maps|google\.com\/maps|maps\.google\.com)\/)(?!.*waze\.com\/)\S+)/gi; processedContent = processedContent.replace(mapRegex, (match)=>{ if (isInsideHtmlTag(processedContent, match)) { return match; } return `Ver en Google Maps`; }); const wazeRegex = /https?:\/\/(www\.)?waze\.com\/\S+/gi; processedContent = processedContent.replace(wazeRegex, (match)=>{ if (isInsideHtmlTag(processedContent, match)) { return match; } return `Ver en Waze`; }); const imageRegex = /https?:\/\/\S+\.(jpg|jpeg|png|gif|webp)(\?\S*)?/gi; processedContent = processedContent.replace(imageRegex, (match)=>{ if (isInsideHtmlTag(processedContent, match)) { return match; } return ` Imagen

`; }); const genericLinkRegex = /(?{ if (isInsideHtmlTag(processedContent, match)) { return match; } return `${match}`; }); if (!processedContent.match(/"); } return processedContent; }; const headerStyle = config?.header_bg_color ? { backgroundColor: config.header_bg_color, borderBottom: "none" } : {}; const titleStyle = config?.header_bg_color ? { textShadow: "2px 2px 4px rgba(0, 0, 0, 0.5)", color: "#FFFFFF" } : {}; const subtitleStyle = config?.header_bg_color ? { textShadow: "1px 1px 3px rgba(0, 0, 0, 0.5)", color: "#FFFFFF" } : {}; if (!userId) { return /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 font-inter", __source: { fileName: "", lineNumber: 747, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-center p-8 bg-white dark:bg-gray-800 rounded-lg shadow-md", __source: { fileName: "", lineNumber: 748, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-spinner fa-spin text-blue-500 text-4xl mb-4", __source: { fileName: "", lineNumber: 749, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("p", { className: "text-xl font-semibold text-gray-900 dark:text-white mb-2", __source: { fileName: "", lineNumber: 750, columnNumber: 11 }, __self: this }, "Cargando..."), /*#__PURE__*/ React.createElement("p", { className: "text-md text-gray-700 dark:text-gray-300 mb-6", __source: { fileName: "", lineNumber: 753, columnNumber: 11 }, __self: this }, "Se requiere un ID de usuario para cargar el chatbot. Por favor, asegúrate de incluir el parámetro user_id en la URL."), /*#__PURE__*/ React.createElement("p", { className: "text-sm text-gray-500 dark:text-gray-400", __source: { fileName: "", lineNumber: 757, columnNumber: 11 }, __self: this }, "Ejemplo: /chatbot?user_id=123"))); } if (loadingConfig) { return /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 font-inter", __source: { fileName: "", lineNumber: 767, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-center p-8", __source: { fileName: "", lineNumber: 768, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-blue-500 mx-auto mb-4", __source: { fileName: "", lineNumber: 769, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("p", { className: "text-gray-700 dark:text-gray-300", __source: { fileName: "", lineNumber: 770, columnNumber: 11 }, __self: this }, "Cargando configuración..."))); } if (fetchError) { return /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 font-inter", __source: { fileName: "", lineNumber: 780, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-center p-8 bg-white dark:bg-gray-800 rounded-lg shadow-md", __source: { fileName: "", lineNumber: 781, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-exclamation-triangle text-red-500 text-4xl mb-4", __source: { fileName: "", lineNumber: 782, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("p", { className: "text-xl font-semibold text-gray-900 dark:text-white mb-2", __source: { fileName: "", lineNumber: 783, columnNumber: 11 }, __self: this }, "Error al Cargar"), /*#__PURE__*/ React.createElement("p", { className: "text-md text-gray-700 dark:text-gray-300 mb-6", __source: { fileName: "", lineNumber: 786, columnNumber: 11 }, __self: this }, fetchError), /*#__PURE__*/ React.createElement("button", { onClick: fetchConfig, className: "py-2 px-4 rounded-md font-inter text-sm bg-blue-600 text-white hover:bg-blue-500 focus:outline-none focus:ring-2 dark:focus:ring-offset-gray-900 focus:ring-blue-500", __source: { fileName: "", lineNumber: 789, columnNumber: 11 }, __self: this }, "Intentar de Nuevo"))); } return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col h-screen bg-gray-50 dark:bg-gray-900 font-inter", __source: { fileName: "", lineNumber: 801, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "bg-white dark:bg-gray-800 shadow-sm p-4 text-center border-b border-gray-200 dark:border-gray-700", style: headerStyle, __source: { fileName: "", lineNumber: 802, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-6xl mx-auto", __source: { fileName: "", lineNumber: 806, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl md:text-3xl font-bold text-gray-900 dark:text-white animate-fade-in-slow", style: titleStyle, __source: { fileName: "", lineNumber: 807, columnNumber: 11 }, __self: this }, config?.title || "Chat Inteligente"), config?.subtitle && /*#__PURE__*/ React.createElement("p", { className: "text-sm md:text-md text-gray-600 dark:text-gray-400 mt-1 animate-fade-in-delay", style: subtitleStyle, __source: { fileName: "", lineNumber: 814, columnNumber: 13 }, __self: this }, config.subtitle))), /*#__PURE__*/ React.createElement("div", { ref: chatContainerRef, className: "flex-1 overflow-y-auto p-4 md:p-6 space-y-4 scroll-smooth", __source: { fileName: "", lineNumber: 824, columnNumber: 7 }, __self: this }, messages.map((msg, index)=>{ // Determinar si el fondo del mensaje es claro u oscuro const msgBgColor = msg.role === "user" ? config?.user_msg_bg_color || "#3b82f6" : msg.isError ? "#fee2e2" : config?.assistant_msg_bg_color || "#dcfce7"; // Usar mismo color para Make y ChatGPT const isLight = isLightColor(msgBgColor); const adaptiveClass = isLight ? "message-light" : "message-dark"; return /*#__PURE__*/ React.createElement("div", { key: index, className: `flex ${msg.role === "user" ? "justify-end" : "justify-start"}`, __source: { fileName: "", lineNumber: 841, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: `max-w-xs md:max-w-md lg:max-w-lg px-4 py-2 rounded-xl shadow ${adaptiveClass}`, style: { backgroundColor: msgBgColor, color: msg.role === "user" ? "#FFFFFF" : msg.isError ? "#b91c1c" : "#111827" }, __source: { fileName: "", lineNumber: 847, columnNumber: 15 }, __self: this }, msg.isExternal && /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-2 mb-2 text-xs font-medium opacity-800", __source: { fileName: "", lineNumber: 861, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-2 h-2 bg-purple-500 rounded-full animate-pulse", __source: { fileName: "", lineNumber: 862, columnNumber: 21 }, __self: this }), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 863, columnNumber: 21 }, __self: this }, "Respuesta Externa (Make)")), /*#__PURE__*/ React.createElement("div", { dangerouslySetInnerHTML: { __html: msg.role === "assistant" ? msg.isHtml ? msg.content : processMessageContent(msg.content) : msg.content.replace(/\n/g, "
") }, className: "chat-message-content", __source: { fileName: "", lineNumber: 866, columnNumber: 17 }, __self: this }))); }), streamingMessage && /*#__PURE__*/ React.createElement("div", { className: "flex justify-start", __source: { fileName: "", lineNumber: 882, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: `max-w-xs md:max-w-md lg:max-w-lg px-4 py-2 rounded-xl shadow animate-pulse ${isLightColor(config?.assistant_msg_bg_color || "#dcfce7") ? "message-light" : "message-dark"}`, style: { backgroundColor: config?.assistant_msg_bg_color || "#dcfce7", color: "#111827" }, __source: { fileName: "", lineNumber: 883, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { dangerouslySetInnerHTML: { __html: processMessageContent(streamingMessage) }, className: "chat-message-content", __source: { fileName: "", lineNumber: 894, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "inline-block w-2 h-4 bg-gray-500 dark:bg-gray-400 animate-blink ml-1", __source: { fileName: "", lineNumber: 900, columnNumber: 15 }, __self: this }))), chatError && /*#__PURE__*/ React.createElement("div", { className: "flex justify-start", __source: { fileName: "", lineNumber: 905, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-xs md:max-w-md lg:max-w-lg px-4 py-2 rounded-xl shadow bg-red-100 dark:bg-red-900 text-red-700 dark:text-red-200 border border-red-300 dark:border-red-700", __source: { fileName: "", lineNumber: 906, columnNumber: 13 }, __self: this }, chatError)), limitReached && /*#__PURE__*/ React.createElement("div", { className: "flex justify-center my-4", __source: { fileName: "", lineNumber: 913, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-md px-4 py-3 rounded-xl shadow bg-yellow-100 dark:bg-yellow-900 text-yellow-800 dark:text-yellow-200 border border-yellow-300 dark:border-yellow-700 text-center", __source: { fileName: "", lineNumber: 914, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-exclamation-triangle text-yellow-600 dark:text-yellow-400 mr-2", __source: { fileName: "", lineNumber: 915, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 916, columnNumber: 15 }, __self: this }, "Límite mensual alcanzado. Favor comunicarse con el administrador para continuar utilizando el servicio.")))), /*#__PURE__*/ React.createElement("footer", { className: "bg-white dark:bg-gray-800 p-4 border-t border-gray-200 dark:border-gray-700", __source: { fileName: "", lineNumber: 925, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-3xl mx-auto", __source: { fileName: "", lineNumber: 926, columnNumber: 9 }, __self: this }, config?.buttons && config.buttons.length > 0 && showQuickButtons && !limitReached && /*#__PURE__*/ React.createElement("div", { className: "relative mb-3", __source: { fileName: "", lineNumber: 931, columnNumber: 15 }, __self: this }, isQuickButtonsCollapsed ? /*#__PURE__*/ React.createElement("div", { className: "flex justify-center", __source: { fileName: "", lineNumber: 933, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: toggleQuickButtons, className: "p-2 rounded-full bg-gray-200 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600 transition-all", title: "Mostrar opciones rápidas", __source: { fileName: "", lineNumber: 934, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", strokeWidth: 1.5, stroke: "currentColor", className: "w-5 h-5", __source: { fileName: "", lineNumber: 939, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5", __source: { fileName: "", lineNumber: 947, columnNumber: 25 }, __self: this })))) : /*#__PURE__*/ React.createElement("div", { className: "animate-fade-in-fast", __source: { fileName: "", lineNumber: 956, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-end mb-1", __source: { fileName: "", lineNumber: 957, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: toggleQuickButtons, className: "p-1 rounded-full bg-gray-200 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600 transition-all text-xs", title: "Ocultar opciones rápidas", __source: { fileName: "", lineNumber: 958, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", strokeWidth: 1.5, stroke: "currentColor", className: "w-4 h-4", __source: { fileName: "", lineNumber: 963, columnNumber: 25 }, __self: this }, /*#__PURE__*/ React.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M6 18L18 6M6 6l12 12", __source: { fileName: "", lineNumber: 971, columnNumber: 27 }, __self: this })))), /*#__PURE__*/ React.createElement("div", { className: "flex flex-wrap gap-2 justify-center", __source: { fileName: "", lineNumber: 979, columnNumber: 21 }, __self: this }, config.buttons.map((btnText, i)=>/*#__PURE__*/ React.createElement("button", { key: i, onClick: ()=>handleButtonClick(btnText), disabled: isSending, className: "py-1 px-3 rounded-full bg-blue-200 dark:bg-blue-700 text-black dark:text-black text-sm hover:bg-blue-300 dark:hover:bg-blue-600 disabled:opacity-50 transition", style: { backgroundColor: config.quick_buttons_bg_color || "#dbeafe", color: config.quick_buttons_text_color || "#000000" }, __source: { fileName: "", lineNumber: 981, columnNumber: 25 }, __self: this }, btnText))))), /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, className: "flex items-center gap-2", __source: { fileName: "", lineNumber: 1000, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", value: userInput, onChange: (e)=>setUserInput(e.target.value), onFocus: ()=>{ setTimeout(()=>{ document.querySelector('input[type="text"]')?.scrollIntoView({ behavior: "smooth", block: "center" }); }, 300); }, placeholder: limitReached ? "Límite mensual alcanzado" : "Escribe tu mensaje aquí...", disabled: isSending || limitReached, className: "flex-1 block w-full rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 p-2.5 text-gray-900 dark:text-white text-sm focus:outline-none focus:ring-2 dark:focus:ring-blue-400 disabled:opacity-50", __source: { fileName: "", lineNumber: 1001, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", disabled: isSending || !userInput.trim() || limitReached, className: "p-2.5 rounded-lg bg-blue-600 text-white hover:bg-blue-500 focus:outline-none focus:ring-2 dark:focus:ring-offset-gray-800 focus:ring-blue-500 disabled:opacity-50 disabled:cursor-not-allowed transition", __source: { fileName: "", lineNumber: 1021, columnNumber: 13 }, __self: this }, isSending ? /*#__PURE__*/ React.createElement("svg", { className: "animate-spin h-5 w-5 text-white", xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", __source: { fileName: "", lineNumber: 1027, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4", __source: { fileName: "", lineNumber: 1033, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("path", { className: "opacity-75", fill: "currentColor", d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z", __source: { fileName: "", lineNumber: 1041, columnNumber: 19 }, __self: this })) : /*#__PURE__*/ React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", strokeWidth: 1.5, stroke: "currentColor", className: "w-5 h-5", __source: { fileName: "", lineNumber: 1048, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M6 12L3.269 3.125A59.769 59.769 0 0121.485 12 59.768 59.768 0 013.27 20.875L5.999 12Zm0 0h7.5", __source: { fileName: "", lineNumber: 1056, columnNumber: 19 }, __self: this })))), /*#__PURE__*/ React.createElement("div", { className: "mt-4 pt-2 border-t border-gray-200 dark:border-gray-700 text-center text-xs text-gray-500 dark:text-gray-400", __source: { fileName: "", lineNumber: 1065, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 1066, columnNumber: 13 }, __self: this }, "© ", new Date().getFullYear(), " iApersonalizada.com LandingBot .", " ", /*#__PURE__*/ React.createElement("a", { href: "https://iapersonalizada.com", target: "_blank", rel: "noopener noreferrer", className: "text-blue-500 hover:underline", __source: { fileName: "", lineNumber: 1068, columnNumber: 15 }, __self: this }, "LandingBot"))))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 1081, columnNumber: 7 }, __self: this }, ` @keyframes fadeIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } } @keyframes fadeInFast { from { opacity: 0; } to { opacity: 1; } } @keyframes blink { 50% { opacity: 0; } } @keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.05); } 100% { transform: scale(1); } } @keyframes slideIn { from { transform: translateX(-20px); opacity: 0; } to { transform: translateX(0); opacity: 1; } } @keyframes tiktokPulse { 0% { box-shadow: 0 0 0 0 rgba(238, 29, 82, 0.7); } 70% { box-shadow: 0 0 0 10px rgba(238, 29, 82, 0); } 100% { box-shadow: 0 0 0 0 rgba(238, 29, 82, 0); } } .animate-fade-in-slow { animation: fadeIn 0.8s ease-out forwards; } .animate-fade-in-delay { animation: fadeIn 0.8s ease-out 0.3s forwards; opacity: 0; } .animate-fade-in-fast { animation: fadeInFast 0.3s ease-out forwards; } .animate-blink { animation: blink 1s step-end infinite; } .animate-pulse-slow { animation: pulse 2s ease-in-out infinite; } .animate-slide-in { animation: slideIn 0.5s ease-out forwards; } .chat-message-content { word-break: break-word; } .chat-message-content a { color: #3b82f6; text-decoration: none; } .chat-message-content a:hover { text-decoration: underline; } .chat-message-content img { border-radius: 0.5rem; margin: 0.5rem 0; max-width: 100%; } /* ========== CSS ADAPTATIVO MEJORADO PARA FONDOS CLAROS Y OSCUROS ========== */ /* ENLACES - Fondo claro */ .message-light .chat-message-content a { color: #1e40af !important; text-decoration: underline; font-weight: 500; } .message-light .chat-message-content a:hover { color: #1e3a8a !important; text-decoration: underline; } /* ENLACES - Fondo oscuro */ .message-dark .chat-message-content a { color: #ffffff !important; text-decoration: underline; font-weight: 500; } .message-dark .chat-message-content a:hover { color: #f3f4f6 !important; text-decoration: underline; } /* BOTONES - Fondo claro */ .message-light .chat-message-content button { background-color: rgba(0, 0, 0, 0.1) !important; color: #111827 !important; border: 1px solid rgba(0, 0, 0, 0.2) !important; } .message-light .chat-message-content button:hover { background-color: rgba(0, 0, 0, 0.15) !important; color: #111827 !important; } /* BOTONES - Fondo oscuro */ .message-dark .chat-message-content button { background-color: rgba(255, 255, 255, 0.2) !important; color: #ffffff !important; border: 1px solid rgba(255, 255, 255, 0.3) !important; } .message-dark .chat-message-content button:hover { background-color: rgba(255, 255, 255, 0.3) !important; color: #ffffff !important; } /* BOTONES ESPECIALIZADOS - Fondo claro */ .message-light .chat-message-content button.success { background-color: rgba(34, 197, 94, 0.8) !important; color: #ffffff !important; border: 1px solid rgba(34, 197, 94, 0.5) !important; } .message-light .chat-message-content button.warning { background-color: rgba(245, 158, 11, 0.8) !important; color: #ffffff !important; border: 1px solid rgba(245, 158, 11, 0.5) !important; } .message-light .chat-message-content button.danger { background-color: rgba(239, 68, 68, 0.8) !important; color: #ffffff !important; border: 1px solid rgba(239, 68, 68, 0.5) !important; } .message-light .chat-message-content button.primary { background-color: rgba(59, 130, 246, 0.8) !important; color: #ffffff !important; border: 1px solid rgba(59, 130, 246, 0.5) !important; } .message-light .chat-message-content button.info { background-color: rgba(14, 165, 233, 0.8) !important; color: #ffffff !important; border: 1px solid rgba(14, 165, 233, 0.5) !important; } /* BOTONES ESPECIALIZADOS - Fondo oscuro */ .message-dark .chat-message-content button.success { background-color: rgba(34, 197, 94, 0.3) !important; color: #ffffff !important; border: 1px solid rgba(34, 197, 94, 0.5) !important; } .message-dark .chat-message-content button.warning { background-color: rgba(245, 158, 11, 0.3) !important; color: #ffffff !important; border: 1px solid rgba(245, 158, 11, 0.5) !important; } .message-dark .chat-message-content button.danger { background-color: rgba(239, 68, 68, 0.3) !important; color: #ffffff !important; border: 1px solid rgba(239, 68, 68, 0.5) !important; } .message-dark .chat-message-content button.primary { background-color: rgba(59, 130, 246, 0.3) !important; color: #ffffff !important; border: 1px solid rgba(59, 130, 246, 0.5) !important; } .message-dark .chat-message-content button.info { background-color: rgba(14, 165, 233, 0.3) !important; color: #ffffff !important; border: 1px solid rgba(14, 165, 233, 0.5) !important; } /* BOTONES SOCIALES - Fondo claro */ .message-light .chat-message-content button.social-whatsapp { background-color: rgba(37, 211, 102, 0.8) !important; color: #ffffff !important; border: 1px solid rgba(37, 211, 102, 0.5) !important; } .message-light .chat-message-content button.social-facebook { background-color: rgba(24, 119, 242, 0.8) !important; color: #ffffff !important; border: 1px solid rgba(24, 119, 242, 0.5) !important; } .message-light .chat-message-content button.social-instagram { background: linear-gradient(45deg, rgba(240, 148, 51, 0.8), rgba(230, 104, 60, 0.8)) !important; color: #ffffff !important; border: 1px solid rgba(240, 148, 51, 0.5) !important; } .message-light .chat-message-content button.whatsapp-button { background-color: rgba(37, 211, 102, 0.8) !important; color: #ffffff !important; border: 1px solid rgba(37, 211, 102, 0.5) !important; } .message-light .chat-message-content button.cta-button { background: linear-gradient(45deg, rgba(59, 130, 246, 0.8), rgba(29, 78, 216, 0.8)) !important; color: #ffffff !important; border: 1px solid rgba(59, 130, 246, 0.5) !important; } /* BOTONES SOCIALES - Fondo oscuro */ .message-dark .chat-message-content button.social-whatsapp { background-color: rgba(37, 211, 102, 0.3) !important; color: #ffffff !important; border: 1px solid rgba(37, 211, 102, 0.5) !important; } .message-dark .chat-message-content button.social-facebook { background-color: rgba(24, 119, 242, 0.3) !important; color: #ffffff !important; border: 1px solid rgba(24, 119, 242, 0.5) !important; } .message-dark .chat-message-content button.social-instagram { background: linear-gradient(45deg, rgba(240, 148, 51, 0.3), rgba(230, 104, 60, 0.3)) !important; color: #ffffff !important; border: 1px solid rgba(240, 148, 51, 0.5) !important; } .message-dark .chat-message-content button.whatsapp-button { background-color: rgba(37, 211, 102, 0.3) !important; color: #ffffff !important; border: 1px solid rgba(37, 211, 102, 0.5) !important; } .message-dark .chat-message-content button.cta-button { background: linear-gradient(45deg, rgba(59, 130, 246, 0.3), rgba(29, 78, 216, 0.3)) !important; color: #ffffff !important; border: 1px solid rgba(59, 130, 246, 0.5) !important; } /* TEXTO GENERAL - Fondo claro */ .message-light .chat-message-content { color: #111827 !important; } .message-light .chat-message-content b, .message-light .chat-message-content strong { color: #111827 !important; } .message-light .chat-message-content p { color: #111827 !important; } .message-light .chat-message-content span { color: #111827 !important; } /* TEXTO GENERAL - Fondo oscuro */ .message-dark .chat-message-content { color: #ffffff !important; } .message-dark .chat-message-content b, .message-dark .chat-message-content strong { color: #ffffff !important; } .message-dark .chat-message-content p { color: #ffffff !important; } .message-dark .chat-message-content span { color: #ffffff !important; } /* TARJETAS - Fondo claro */ .message-light .chat-message-content .card { background-color: rgba(0, 0, 0, 0.05) !important; border: 1px solid rgba(0, 0, 0, 0.1) !important; color: #111827 !important; } .message-light .chat-message-content .card-title { background-color: rgba(0, 0, 0, 0.08) !important; border-bottom: 1px solid rgba(0, 0, 0, 0.1) !important; color: #111827 !important; } .message-light .chat-message-content .card-body { color: #111827 !important; } .message-light .chat-message-content .service-card { background-color: rgba(0, 0, 0, 0.03) !important; border: 1px solid rgba(0, 0, 0, 0.1) !important; color: #111827 !important; } .message-light .chat-message-content .contact-card { background: linear-gradient(135deg, rgba(102, 126, 234, 0.8), rgba(118, 75, 162, 0.8)) !important; color: #ffffff !important; } .message-light .chat-message-content .price-box { background-color: rgba(59, 130, 246, 0.05) !important; border: 2px solid rgba(59, 130, 246, 0.3) !important; color: #111827 !important; } .message-light .chat-message-content .highlight-box { background: linear-gradient(45deg, rgba(251, 191, 36, 0.15), rgba(251, 191, 36, 0.25)) !important; border: 2px solid rgba(251, 191, 36, 0.4) !important; color: #111827 !important; } /* TARJETAS - Fondo oscuro */ .message-dark .chat-message-content .card { background-color: rgba(255, 255, 255, 0.1) !important; border: 1px solid rgba(255, 255, 255, 0.2) !important; color: #ffffff !important; } .message-dark .chat-message-content .card-title { background-color: rgba(255, 255, 255, 0.15) !important; border-bottom: 1px solid rgba(255, 255, 255, 0.2) !important; color: #ffffff !important; } .message-dark .chat-message-content .card-body { color: #ffffff !important; } .message-dark .chat-message-content .service-card { background-color: rgba(255, 255, 255, 0.08) !important; border: 1px solid rgba(255, 255, 255, 0.2) !important; color: #ffffff !important; } .message-dark .chat-message-content .contact-card { background: linear-gradient(135deg, rgba(102, 126, 234, 0.8), rgba(118, 75, 162, 0.8)) !important; color: #ffffff !important; } .message-dark .chat-message-content .price-box { background-color: rgba(59, 130, 246, 0.15) !important; border: 2px solid rgba(59, 130, 246, 0.5) !important; color: #ffffff !important; } .message-dark .chat-message-content .highlight-box { background: linear-gradient(45deg, rgba(251, 191, 36, 0.2), rgba(251, 191, 36, 0.3)) !important; border: 2px solid rgba(251, 191, 36, 0.6) !important; color: #ffffff !important; } /* ALERTAS - Fondo claro */ .message-light .chat-message-content .alert { color: #111827 !important; } .message-light .chat-message-content .alert-info { background-color: rgba(59, 130, 246, 0.1) !important; border: 1px solid rgba(59, 130, 246, 0.3) !important; color: #1e40af !important; } .message-light .chat-message-content .alert-success { background-color: rgba(34, 197, 94, 0.1) !important; border: 1px solid rgba(34, 197, 94, 0.3) !important; color: #166534 !important; } .message-light .chat-message-content .alert-warning { background-color: rgba(245, 158, 11, 0.1) !important; border: 1px solid rgba(245, 158, 11, 0.3) !important; color: #92400e !important; } .message-light .chat-message-content .alert-danger { background-color: rgba(239, 68, 68, 0.1) !important; border: 1px solid rgba(239, 68, 68, 0.3) !important; color: #991b1b !important; } .message-light .chat-message-content .alert-tip { background-color: rgba(14, 165, 233, 0.08) !important; border: 1px solid rgba(14, 165, 233, 0.3) !important; color: #0c4a6e !important; } .message-light .chat-message-content .alert-note { background-color: rgba(245, 158, 11, 0.08) !important; border: 1px solid rgba(245, 158, 11, 0.3) !important; color: #a16207 !important; } /* ALERTAS - Fondo oscuro */ .message-dark .chat-message-content .alert { color: #ffffff !important; } .message-dark .chat-message-content .alert-info { background-color: rgba(59, 130, 246, 0.2) !important; border: 1px solid rgba(59, 130, 246, 0.5) !important; color: #93c5fd !important; } .message-dark .chat-message-content .alert-success { background-color: rgba(34, 197, 94, 0.2) !important; border: 1px solid rgba(34, 197, 94, 0.5) !important; color: #86efac !important; } .message-dark .chat-message-content .alert-warning { background-color: rgba(245, 158, 11, 0.2) !important; border: 1px solid rgba(245, 158, 11, 0.5) !important; color: #fcd34d !important; } .message-dark .chat-message-content .alert-danger { background-color: rgba(239, 68, 68, 0.2) !important; border: 1px solid rgba(239, 68, 68, 0.5) !important; color: #fca5a5 !important; } .message-dark .chat-message-content .alert-tip { background-color: rgba(14, 165, 233, 0.2) !important; border: 1px solid rgba(14, 165, 233, 0.5) !important; color: #7dd3fc !important; } .message-dark .chat-message-content .alert-note { background-color: rgba(245, 158, 11, 0.2) !important; border: 1px solid rgba(245, 158, 11, 0.5) !important; color: #fde047 !important; } /* BADGES - Fondo claro */ .message-light .chat-message-content .badge { color: #111827 !important; } .message-light .chat-message-content .badge-blue { background-color: rgba(59, 130, 246, 0.15) !important; color: #1e40af !important; } .message-light .chat-message-content .badge-green { background-color: rgba(34, 197, 94, 0.15) !important; color: #166534 !important; } .message-light .chat-message-content .badge-red { background-color: rgba(239, 68, 68, 0.15) !important; color: #991b1b !important; } .message-light .chat-message-content .badge-yellow { background-color: rgba(245, 158, 11, 0.15) !important; color: #92400e !important; } /* BADGES - Fondo oscuro */ .message-dark .chat-message-content .badge { color: #ffffff !important; } .message-dark .chat-message-content .badge-blue { background-color: rgba(59, 130, 246, 0.3) !important; color: #93c5fd !important; } .message-dark .chat-message-content .badge-green { background-color: rgba(34, 197, 94, 0.3) !important; color: #86efac !important; } .message-dark .chat-message-content .badge-red { background-color: rgba(239, 68, 68, 0.3) !important; color: #fca5a5 !important; } .message-dark .chat-message-content .badge-yellow { background-color: rgba(245, 158, 11, 0.3) !important; color: #fcd34d !important; } /* ESTRUCTURA FLEXIBLE - Fondo claro */ .message-light .chat-message-content .flex-item { background-color: rgba(0, 0, 0, 0.03) !important; border: 1px solid rgba(0, 0, 0, 0.1) !important; color: #111827 !important; } /* ESTRUCTURA FLEXIBLE - Fondo oscuro */ .message-dark .chat-message-content .flex-item { background-color: rgba(255, 255, 255, 0.08) !important; border: 1px solid rgba(255, 255, 255, 0.2) !important; color: #ffffff !important; } /* TÍTULOS ADAPTATIVOS */ .message-light .chat-message-content h1, .message-light .chat-message-content h2, .message-light .chat-message-content h3, .message-light .chat-message-content h4, .message-light .chat-message-content h5, .message-light .chat-message-content h6 { color: #111827 !important; } .message-dark .chat-message-content h1, .message-dark .chat-message-content h2, .message-dark .chat-message-content h3, .message-dark .chat-message-content h4, .message-dark .chat-message-content h5, .message-dark .chat-message-content h6 { color: #ffffff !important; } /* LISTAS ADAPTATIVAS */ .message-light .chat-message-content ul li, .message-light .chat-message-content ol li { color: #111827 !important; } .message-dark .chat-message-content ul li, .message-dark .chat-message-content ol li { color: #ffffff !important; } /* SEPARADORES ADAPTATIVOS */ .message-light .chat-message-content .divider, .message-light .chat-message-content hr { background: linear-gradient(to right, transparent, rgba(0, 0, 0, 0.2), transparent) !important; } .message-dark .chat-message-content .divider, .message-dark .chat-message-content hr { background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.3), transparent) !important; } /* ========== ESTILOS EXISTENTES (sin cambios) ========== */ /* BOTONES - Básicos existentes */ .chat-message-content button { padding: 0.5rem 1rem; border-radius: 0.375rem; font-weight: 500; transition: all 0.2s; cursor: pointer; border: none; margin: 0.25rem; display: inline-block; } .chat-message-content button.success { background-color: #22c55e; color: white; } .chat-message-content button.success:hover { background-color: #16a34a; } .chat-message-content button.warning { background-color: #eab308; color: white; } .chat-message-content button.warning:hover { background-color: #ca8a04; } .chat-message-content button.danger { background-color: #ef4444; color: white; } .chat-message-content button.danger:hover { background-color: #dc2626; } /* BOTONES - Nuevos */ .chat-message-content button.primary { background-color: #3b82f6; color: white; } .chat-message-content button.primary:hover { background-color: #2563eb; } .chat-message-content button.secondary { background-color: #6b7280; color: white; } .chat-message-content button.secondary:hover { background-color: #4b5563; } .chat-message-content button.info { background-color: #0ea5e9; color: white; } .chat-message-content button.info:hover { background-color: #0284c7; } .chat-message-content button.cta-button { background: linear-gradient(45deg, #3b82f6, #1d4ed8); color: white; padding: 0.75rem 1.5rem; font-size: 1rem; font-weight: 600; border-radius: 0.5rem; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); transform: translateY(0); } .chat-message-content button.cta-button:hover { background: linear-gradient(45deg, #2563eb, #1e40af); transform: translateY(-2px); box-shadow: 0 8px 12px -2px rgba(0, 0, 0, 0.2); } /* BOTONES SOCIALES */ .chat-message-content button.social-whatsapp { background-color: #25d366; color: white; padding: 0.75rem 1rem; border-radius: 0.5rem; } .chat-message-content button.social-whatsapp:hover { background-color: #20b956; } .chat-message-content button.social-facebook { background-color: #1877f2; color: white; padding: 0.75rem 1rem; border-radius: 0.5rem; } .chat-message-content button.social-facebook:hover { background-color: #166fe5; } .chat-message-content button.social-instagram { background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888); color: white; padding: 0.75rem 1rem; border-radius: 0.5rem; } .chat-message-content button.social-instagram:hover { background: linear-gradient(45deg, #e6683c, #dc2743, #cc2366, #bc1888, #a91a7a); } .chat-message-content button.whatsapp-button { background-color: #25d366; color: white; padding: 0.75rem 1rem; border-radius: 25px; font-weight: 600; display: inline-flex; align-items: center; gap: 0.5rem; } .chat-message-content button.whatsapp-button:hover { background-color: #20b956; } .chat-message-content button.whatsapp-button:before { content: "📱"; font-size: 1.2em; } /* ALERTAS - Básicas (fallback para casos sin clase adaptativa) */ .chat-message-content .alert { padding: 1rem; border-radius: 0.5rem; margin: 0.5rem 0; } .chat-message-content .alert-info { background-color: #dbeafe; border: 1px solid #93c5fd; color: #1e40af; } .chat-message-content .alert-success { background-color: #dcfce7; border: 1px solid #86efac; color: #166534; } .chat-message-content .alert-warning { background-color: #fef3c7; border: 1px solid #fcd34d; color: #92400e; } .chat-message-content .alert-danger { background-color: #fee2e2; border: 1px solid #fca5a5; color: #991b1b; } .chat-message-content .alert-tip { background-color: #f0f9ff; border: 1px solid #7dd3fc; color: #0c4a6e; position: relative; padding-left: 3rem; } .chat-message-content .alert-tip:before { content: "💡"; position: absolute; left: 1rem; top: 1rem; font-size: 1.2em; } .chat-message-content .alert-note { background-color: #fef7cd; border: 1px solid #fde047; color: #a16207; position: relative; padding-left: 3rem; } .chat-message-content .alert-note:before { content: "📝"; position: absolute; left: 1rem; top: 1rem; font-size: 1.2em; } /* TARJETAS - Básicas */ .chat-message-content .card { background-color: white; border-radius: 0.5rem; box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06); margin: 0.5rem 0; overflow: hidden; } .chat-message-content .card-title { padding: 1rem; background-color: #f3f4f6; font-weight: 600; border-bottom: 1px solid #e5e7eb; } .chat-message-content .card-body { padding: 1rem; } /* TARJETAS ESPECIALIZADAS */ .chat-message-content .service-card { background-color: white; border-radius: 0.75rem; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); padding: 1.5rem; margin: 1rem 0; border: 1px solid #e5e7eb; transition: all 0.3s; } .chat-message-content .service-card:hover { box-shadow: 0 8px 12px -2px rgba(0, 0, 0, 0.15); transform: translateY(-2px); } .chat-message-content .contact-card { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; border-radius: 1rem; padding: 1.5rem; margin: 1rem 0; text-align: center; } .chat-message-content .price-box { background-color: #f8fafc; border: 2px solid #3b82f6; border-radius: 0.75rem; padding: 1.5rem; margin: 1rem 0; text-align: center; position: relative; } .chat-message-content .price-box:before { content: "💰"; position: absolute; top: -10px; left: 50%; transform: translateX(-50%); background-color: #3b82f6; color: white; padding: 0.5rem; border-radius: 50%; font-size: 1.2em; } .chat-message-content .highlight-box { background: linear-gradient(45deg, #fef3c7, #fde047); border: 2px solid #eab308; border-radius: 0.5rem; padding: 1rem; margin: 1rem 0; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); } /* LISTAS CON ICONOS */ .chat-message-content .icon-list { list-style: none; margin-left: 0; padding-left: 0; } .chat-message-content .icon-list li { position: relative; padding-left: 2rem; margin: 0.5rem 0; } .chat-message-content .icon-list li:before { content: "✓"; position: absolute; left: 0; color: #22c55e; font-weight: bold; font-size: 1.2em; } /* ESTRUCTURAS FLEXIBLES */ .chat-message-content .flex-container { display: flex; gap: 1rem; flex-wrap: wrap; margin: 1rem 0; } .chat-message-content .flex-item { flex: 1; min-width: 200px; padding: 1rem; background-color: #f8fafc; border-radius: 0.5rem; border: 1px solid #e2e8f0; } /* SEPARADORES */ .chat-message-content .divider { border: none; height: 1px; background: linear-gradient(to right, transparent, #d1d5db, transparent); margin: 1.5rem 0; } /* ELEMENTOS BÁSICOS */ .chat-message-content h2 { font-size: 1.5rem; font-weight: 600; margin: 1rem 0 0.5rem 0; color: #111827; } .chat-message-content h3 { font-size: 1.25rem; font-weight: 600; margin: 0.75rem 0 0.5rem 0; color: #1f2937; } .chat-message-content ul { list-style-type: disc; margin-left: 1.5rem; margin-top: 0.5rem; margin-bottom: 0.5rem; } .chat-message-content li { margin: 0.25rem 0; } .chat-message-content b { font-weight: 600; } .chat-message-content i { font-style: italic; } /* MODO OSCURO GLOBAL (fallback para casos sin clase adaptativa) */ .dark .chat-message-content .card, .dark .chat-message-content .service-card, .dark .chat-message-content .price-box { background-color: #1f2937; border-color: #4b5563; } .dark .chat-message-content .card-title { background-color: #374151; border-bottom-color: #4b5563; } .dark .chat-message-content .flex-item { background-color: #1f2937; border-color: #4b5563; } .dark .chat-message-content h2, .dark .chat-message-content h3 { color: #f3f4f6; } .dark .chat-message-content .alert-info { background-color: rgba(219, 234, 254, 0.1); border-color: #3b82f6; color: #93c5fd; } .dark .chat-message-content .alert-success { background-color: rgba(220, 252, 231, 0.1); border-color: #22c55e; color: #86efac; } .dark .chat-message-content .alert-warning { background-color: rgba(254, 243, 199, 0.1); border-color: #eab308; color: #fcd34d; } .dark .chat-message-content .alert-danger { background-color: rgba(254, 226, 226, 0.1); border-color: #ef4444; color: #fca5a5; } .dark .chat-message-content .alert-tip { background-color: rgba(240, 249, 255, 0.1); border-color: #0ea5e9; color: #7dd3fc; } .dark .chat-message-content .alert-note { background-color: rgba(254, 247, 205, 0.1); border-color: #eab308; color: #fde047; } .dark .chat-message-content .badge-blue { background-color: rgba(219, 234, 254, 0.1); color: #93c5fd; } .dark .chat-message-content .badge-green { background-color: rgba(220, 252, 231, 0.1); color: #86efac; } .dark .chat-message-content .badge-red { background-color: rgba(254, 226, 226, 0.1); color: #fca5a5; } .dark .chat-message-content .badge-yellow { background-color: rgba(254, 243, 199, 0.1); color: #fcd34d; } .dark .chat-message-content .highlight-box { background: linear-gradient(45deg, rgba(254, 243, 199, 0.2), rgba(253, 224, 71, 0.2)); border-color: #eab308; } `)); } const isInsideHtmlTag = (fullText, text)=>{ const textIndex = fullText.indexOf(text); if (textIndex === -1) return false; const lastOpenTagIndex = fullText.lastIndexOf("<", textIndex); if (lastOpenTagIndex === -1) return false; const nextCloseTagIndex = fullText.indexOf(">", lastOpenTagIndex); if (nextCloseTagIndex === -1 || nextCloseTagIndex > textIndex) return true; const tagContent = fullText.substring(lastOpenTagIndex, nextCloseTagIndex); return tagContent.includes('href="') || tagContent.includes('src="') || tagContent.includes("href='") || tagContent.includes("src='"); };