function NavigationMenu() { const [isMenuOpen, setIsMenuOpen] = React.useState(false); const [activeLink, setActiveLink] = React.useState(""); const [scrolled, setScrolled] = React.useState(false); React.useEffect(()=>{ const path = window.location.pathname; setActiveLink(path); const handleScroll = ()=>{ if (window.scrollY > 20) { setScrolled(true); } else { setScrolled(false); } }; window.addEventListener("scroll", handleScroll); return ()=>window.removeEventListener("scroll", handleScroll); }, []); const toggleMenu = ()=>{ setIsMenuOpen(!isMenuOpen); }; const getLinkClass = (path)=>{ const baseClass = "transition-colors duration-300 relative px-2 py-1"; const activeClass = activeLink === path ? "text-[#00eb79] font-medium after:content-[''] after:absolute after:bottom-[-2px] after:left-0 after:w-full after:h-[2px] after:bg-[#00eb79]" : "text-white hover:text-[#00eb79]"; return `${baseClass} ${activeClass}`; }; return /*#__PURE__*/ React.createElement("nav", { className: `bg-[#06054e] text-white fixed top-0 left-0 right-0 z-50 transition-all duration-300 ${scrolled ? "shadow-xl py-2" : "shadow-lg py-3"}`, __source: { fileName: "", lineNumber: 34, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-7xl mx-auto px-4 sm:px-6", __source: { fileName: "", lineNumber: 39, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center", __source: { fileName: "", lineNumber: 40, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 41, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "/", className: "flex items-center group", __source: { fileName: "", lineNumber: 42, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "relative overflow-hidden rounded-full mr-2 sm:mr-3", __source: { fileName: "", lineNumber: 43, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "https://ucarecdn.com/490dbf5d-3ef3-41fe-9e7a-903b816cf35c/-/format/auto/", alt: "Botgado Logo", className: `h-8 sm:h-10 md:h-11 transition-transform duration-300 group-hover:scale-110`, __source: { fileName: "", lineNumber: 44, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("span", { className: "font-bold text-lg sm:text-xl hidden sm:block text-white group-hover:text-[#00eb79] transition-colors duration-300", __source: { fileName: "", lineNumber: 50, columnNumber: 15 }, __self: this }, "Botgado"))), /*#__PURE__*/ React.createElement("div", { className: "hidden md:flex items-center space-x-6 lg:space-x-8", __source: { fileName: "", lineNumber: 56, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "/", className: getLinkClass("/"), "aria-label": "Ir a la página de inicio", __source: { fileName: "", lineNumber: 57, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "flex items-center", __source: { fileName: "", lineNumber: 62, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-home mr-2 text-sm", __source: { fileName: "", lineNumber: 63, columnNumber: 17 }, __self: this }), "Inicio")), /*#__PURE__*/ React.createElement("a", { href: "/document-generator", className: getLinkClass("/document-generator"), "aria-label": "Ir al generador de documentos", __source: { fileName: "", lineNumber: 66, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "flex items-center", __source: { fileName: "", lineNumber: 71, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-file-alt mr-2 text-sm", __source: { fileName: "", lineNumber: 72, columnNumber: 17 }, __self: this }), "Generador de Documentos")), /*#__PURE__*/ React.createElement("a", { href: "/terms", className: getLinkClass("/terms"), "aria-label": "Ver políticas", __source: { fileName: "", lineNumber: 76, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "flex items-center", __source: { fileName: "", lineNumber: 81, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-shield-alt mr-2 text-sm", __source: { fileName: "", lineNumber: 82, columnNumber: 17 }, __self: this }), "Políticas")), /*#__PURE__*/ React.createElement("a", { href: "/about", className: getLinkClass("/about"), "aria-label": "Acerca de nosotros", __source: { fileName: "", lineNumber: 85, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "flex items-center", __source: { fileName: "", lineNumber: 90, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-info-circle mr-2 text-sm", __source: { fileName: "", lineNumber: 91, columnNumber: 17 }, __self: this }), "Acerca de"))), /*#__PURE__*/ React.createElement("div", { className: "md:hidden flex items-center", __source: { fileName: "", lineNumber: 96, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: toggleMenu, className: "text-white focus:outline-none p-2 rounded-md hover:bg-[#1a1976] transition-colors", "aria-label": isMenuOpen ? "Cerrar menú" : "Abrir menú", "aria-expanded": isMenuOpen, __source: { fileName: "", lineNumber: 97, columnNumber: 13 }, __self: this }, isMenuOpen ? /*#__PURE__*/ React.createElement("i", { className: "fas fa-times text-xl", __source: { fileName: "", lineNumber: 104, columnNumber: 17 }, __self: this }) : /*#__PURE__*/ React.createElement("i", { className: "fas fa-bars text-xl", __source: { fileName: "", lineNumber: 106, columnNumber: 17 }, __self: this }))))), /*#__PURE__*/ React.createElement("div", { className: `md:hidden bg-[#06054e] border-t border-[#1a1976] overflow-hidden transition-all duration-300 ease-in-out ${isMenuOpen ? "max-h-64 opacity-100" : "max-h-0 opacity-0"}`, __source: { fileName: "", lineNumber: 113, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col space-y-1 px-4 py-3", __source: { fileName: "", lineNumber: 118, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "/", className: `py-3 px-3 rounded-md transition-all duration-200 ${activeLink === "/" ? "bg-[#1a1976] text-[#00eb79]" : "hover:bg-[#1a1976]"}`, onClick: ()=>setIsMenuOpen(false), "aria-label": "Ir a la página de inicio", __source: { fileName: "", lineNumber: 119, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-home mr-3", __source: { fileName: "", lineNumber: 129, columnNumber: 13 }, __self: this }), "Inicio"), /*#__PURE__*/ React.createElement("a", { href: "/document-generator", className: `py-3 px-3 rounded-md transition-all duration-200 ${activeLink === "/document-generator" ? "bg-[#1a1976] text-[#00eb79]" : "hover:bg-[#1a1976]"}`, onClick: ()=>setIsMenuOpen(false), "aria-label": "Ir al generador de documentos", __source: { fileName: "", lineNumber: 131, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-file-alt mr-3", __source: { fileName: "", lineNumber: 141, columnNumber: 13 }, __self: this }), "Generador de Documentos"), /*#__PURE__*/ React.createElement("a", { href: "/terms", className: `py-3 px-3 rounded-md transition-all duration-200 ${activeLink === "/terms" ? "bg-[#1a1976] text-[#00eb79]" : "hover:bg-[#1a1976]"}`, onClick: ()=>setIsMenuOpen(false), "aria-label": "Ver políticas", __source: { fileName: "", lineNumber: 143, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-shield-alt mr-3", __source: { fileName: "", lineNumber: 153, columnNumber: 13 }, __self: this }), "Políticas"), /*#__PURE__*/ React.createElement("a", { href: "/about", className: `py-3 px-3 rounded-md transition-all duration-200 ${activeLink === "/about" ? "bg-[#1a1976] text-[#00eb79]" : "hover:bg-[#1a1976]"}`, onClick: ()=>setIsMenuOpen(false), "aria-label": "Acerca de nosotros", __source: { fileName: "", lineNumber: 155, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-info-circle mr-3", __source: { fileName: "", lineNumber: 165, columnNumber: 13 }, __self: this }), "Acerca de")))); } function Footer() { return /*#__PURE__*/ React.createElement("footer", { className: "bg-[#06054e] text-white py-4 sm:py-6 mt-auto", __source: { fileName: "", lineNumber: 175, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-6xl mx-auto px-4 text-center", __source: { fileName: "", lineNumber: 176, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col sm:flex-row items-center justify-center mb-2", __source: { fileName: "", lineNumber: 177, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-sm sm:text-base mb-2 sm:mb-0 sm:mr-2", __source: { fileName: "", lineNumber: 178, columnNumber: 11 }, __self: this }, "© 2025 Botgado. Todos los derechos reservados. Un desarrollo de"), /*#__PURE__*/ React.createElement("a", { href: "https://www.blacksheepmarketing.co/", target: "_blank", rel: "noopener noreferrer", className: "inline-flex items-center text-[#00eb79] hover:text-[#4aff9e] transition-colors text-sm sm:text-base", __source: { fileName: "", lineNumber: 181, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "font-semibold", __source: { fileName: "", lineNumber: 187, columnNumber: 13 }, __self: this }, "www.blacksheepmarketing.co"))), /*#__PURE__*/ React.createElement("div", { className: "flex justify-center mt-2", __source: { fileName: "", lineNumber: 190, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "https://www.instagram.com/botgado.ai/#", target: "_blank", rel: "noopener noreferrer", className: "text-white hover:text-[#00eb79] transition-colors", "aria-label": "Síguenos en Instagram", __source: { fileName: "", lineNumber: 191, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fab fa-instagram text-xl", __source: { fileName: "", lineNumber: 198, columnNumber: 13 }, __self: this }))))); } function Layout1({ children }) { const [metadataVersion, setMetadataVersion] = React.useState(Date.now()); React.useEffect(()=>{ const addGTMScript = ()=>{ const script = document.createElement("script"); script.innerHTML = ` (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0], j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src= 'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f); })(window,document,'script','dataLayer','GTM-PP7K54V2'); `; document.head.appendChild(script); }; const addFavicons = ()=>{ // Favicon links with version parameter to prevent caching const favicons = [ { rel: "icon", type: "image/x-icon", href: `https://ucarecdn.com/8ba34045-d5ee-4b25-945b-9559e0fbbc3f/-/format/auto/?v=${metadataVersion}` }, { rel: "icon", type: "image/png", sizes: "16x16", href: `https://ucarecdn.com/52eabea7-7872-41b2-9c10-ae6d7fc54ba3/-/format/auto/?v=${metadataVersion}` }, { rel: "icon", type: "image/png", sizes: "32x32", href: `https://ucarecdn.com/07f7e0d2-acd3-445c-a622-73d57873a4f8/-/format/auto/?v=${metadataVersion}` }, { rel: "apple-touch-icon", href: `https://ucarecdn.com/8f16481a-b069-47da-a4e4-71d50a37e7df/-/format/auto/?v=${metadataVersion}` }, { rel: "icon", type: "image/png", sizes: "192x192", href: `https://ucarecdn.com/b32a7103-485e-40f5-ae17-2262152200ff/-/format/auto/?v=${metadataVersion}` }, { rel: "icon", type: "image/png", sizes: "512x512", href: `https://ucarecdn.com/f796a4db-4835-40df-bf7b-00c652725cfc/-/format/auto/?v=${metadataVersion}` } ]; // Remove any existing favicon links to prevent duplicates document.querySelectorAll("link[rel*='icon'], link[rel='apple-touch-icon']").forEach((el)=>el.remove()); favicons.forEach((favicon)=>{ const link = document.createElement("link"); Object.keys(favicon).forEach((key)=>{ link[key] = favicon[key]; }); document.head.appendChild(link); }); }; const addOpenGraphTags = ()=>{ // Remove any existing OG tags to prevent duplicates document.querySelectorAll("meta[property^='og:'], meta[name^='twitter:']").forEach((el)=>el.remove()); // Open Graph meta tags for social sharing with version parameter const metaTags = [ { property: "og:title", content: "Botgado - Asistente Legal con IA para Costa Rica" }, { property: "og:description", content: "Consultas legales gratuitas 24/7 con inteligencia artificial especializada en el marco normativo de Costa Rica." }, { property: "og:image", content: `https://ucarecdn.com/a363fdad-17c8-47c0-93cd-113dd64da37b/-/format/auto/?v=${metadataVersion}` }, { property: "og:url", content: window.location.href }, { property: "og:type", content: "website" }, { property: "og:image:width", content: "1200" }, { property: "og:image:height", content: "630" }, // WhatsApp specific meta tags { property: "og:site_name", content: "Botgado" }, { name: "twitter:card", content: "summary_large_image" }, { name: "twitter:image", content: `https://ucarecdn.com/a363fdad-17c8-47c0-93cd-113dd64da37b/-/format/auto/?v=${metadataVersion}` }, // LinkedIn specific meta tags { property: "linkedin:card", content: "summary_large_image" }, { property: "linkedin:image", content: `https://ucarecdn.com/a363fdad-17c8-47c0-93cd-113dd64da37b/-/format/auto/?v=${metadataVersion}` } ]; metaTags.forEach((tag)=>{ const meta = document.createElement("meta"); Object.keys(tag).forEach((key)=>{ meta.setAttribute(key, tag[key]); }); document.head.appendChild(meta); }); }; if (typeof window !== "undefined") { addGTMScript(); addFavicons(); addOpenGraphTags(); } }, [ metadataVersion ]); return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col min-h-screen font-poppins", __source: { fileName: "", lineNumber: 352, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("noscript", { __source: { fileName: "", lineNumber: 353, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("iframe", { src: "https://www.googletagmanager.com/ns.html?id=GTM-PP7K54V2", height: "0", width: "0", style: { display: "none", visibility: "hidden" }, __source: { fileName: "", lineNumber: 354, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 362, columnNumber: 7 }, __self: this }, ` @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap'); html, body { font-family: 'Poppins', sans-serif; margin: 0; padding: 0; width: 100%; overflow-x: hidden; } * { box-sizing: border-box; } @media (max-width: 768px) { .safe-padding-top { padding-top: env(safe-area-inset-top, 0px); } .safe-padding-bottom { padding-bottom: env(safe-area-inset-bottom, 0px); } } `), /*#__PURE__*/ React.createElement(NavigationMenu, { __source: { fileName: "", lineNumber: 388, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "flex-grow pt-16 sm:pt-20", __source: { fileName: "", lineNumber: 389, columnNumber: 7 }, __self: this }, children), /*#__PURE__*/ React.createElement(Footer, { __source: { fileName: "", lineNumber: 390, columnNumber: 7 }, __self: this })); } function Layout({ children }) { return /*#__PURE__*/ React.createElement(Layout1, { __source: { fileName: "", lineNumber: 396, columnNumber: 10 }, __self: this }, children); } function Layout1Story() { return /*#__PURE__*/ React.createElement(Layout, { __source: { fileName: "", lineNumber: 401, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "p-8 text-center", __source: { fileName: "", lineNumber: 402, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold text-[#06054e]", __source: { fileName: "", lineNumber: 403, columnNumber: 9 }, __self: this }, "Contenido de ejemplo"), /*#__PURE__*/ React.createElement("p", { className: "mt-4 text-gray-600", __source: { fileName: "", lineNumber: 406, columnNumber: 9 }, __self: this }, "Este es un ejemplo de contenido dentro del Layout"))); } function DocumentEditor({ document = null, isLoading = false, onSave = ()=>{}, onDownload = ()=>{}, onEdit = ()=>{} }) { const [editableDocument, setEditableDocument] = React.useState(null); const [editMode, setEditMode] = React.useState(false); const [editingSection, setEditingSection] = React.useState(null); const [editContent, setEditContent] = React.useState(""); React.useEffect(()=>{ if (document) { setEditableDocument(JSON.parse(JSON.stringify(document))); } }, [ document ]); const handleEditSection = (sectionType, sectionIndex, content)=>{ setEditMode(true); setEditingSection({ type: sectionType, index: sectionIndex }); setEditContent(content); }; const handleSaveEdit = ()=>{ if (!editingSection) return; const newDocument = { ...editableDocument }; if (editingSection.type === "clause") { newDocument.content.clauses[editingSection.index].content = editContent; } else if (editingSection.type === "party") { newDocument.content.parties[editingSection.index].name = editContent; } else if (editingSection.type === "title") { newDocument.content.title = editContent; } else if (editingSection.type === "closing") { newDocument.content.closing = editContent; } setEditableDocument(newDocument); setEditMode(false); setEditingSection(null); setEditContent(""); onEdit(newDocument); }; const handleCancelEdit = ()=>{ setEditMode(false); setEditingSection(null); setEditContent(""); }; const formatDate = (dateString)=>{ try { const date = new Date(dateString); return date.toLocaleDateString('es-CR', { year: 'numeric', month: 'long', day: 'numeric' }); } catch (e) { return dateString; } }; if (isLoading) { return /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-lg shadow-lg p-4 sm:p-6 md:p-8 w-full max-w-4xl mx-auto", __source: { fileName: "", lineNumber: 69, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center space-y-4 py-10", __source: { fileName: "", lineNumber: 70, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-16 h-16 border-4 border-[#297fff] border-t-transparent rounded-full animate-spin", __source: { fileName: "", lineNumber: 71, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("p", { className: "text-[#06054e] font-medium text-center", __source: { fileName: "", lineNumber: 72, columnNumber: 11 }, __self: this }, "Generando documento legal..."), /*#__PURE__*/ React.createElement("p", { className: "text-gray-500 text-sm text-center", __source: { fileName: "", lineNumber: 73, columnNumber: 11 }, __self: this }, "Esto puede tomar unos momentos mientras procesamos la información"))); } if (!editableDocument) { return /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-lg shadow-lg p-4 sm:p-6 md:p-8 w-full max-w-4xl mx-auto", __source: { fileName: "", lineNumber: 81, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center space-y-4 py-10", __source: { fileName: "", lineNumber: 82, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-16 h-16 bg-gray-200 rounded-full flex items-center justify-center", __source: { fileName: "", lineNumber: 83, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-file-alt text-gray-400 text-2xl", __source: { fileName: "", lineNumber: 84, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("p", { className: "text-[#06054e] font-medium text-center", __source: { fileName: "", lineNumber: 86, columnNumber: 11 }, __self: this }, "No hay documento para mostrar"), /*#__PURE__*/ React.createElement("p", { className: "text-gray-500 text-sm text-center", __source: { fileName: "", lineNumber: 87, columnNumber: 11 }, __self: this }, "Por favor genera un documento primero"))); } return /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-lg shadow-lg p-4 sm:p-6 md:p-8 w-full max-w-4xl mx-auto", __source: { fileName: "", lineNumber: 94, columnNumber: 5 }, __self: this }, editMode ? /*#__PURE__*/ React.createElement("div", { className: "fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4", __source: { fileName: "", lineNumber: 96, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-lg shadow-xl w-full max-w-lg p-4", __source: { fileName: "", lineNumber: 97, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-bold text-[#06054e] mb-4", __source: { fileName: "", lineNumber: 98, columnNumber: 13 }, __self: this }, "Editar sección"), /*#__PURE__*/ React.createElement("textarea", { value: editContent, onChange: (e)=>setEditContent(e.target.value), className: "w-full h-40 p-3 border border-gray-300 rounded-md focus:ring-2 focus:ring-[#297fff] focus:border-transparent outline-none", __source: { fileName: "", lineNumber: 99, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "flex justify-end space-x-3 mt-4", __source: { fileName: "", lineNumber: 104, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: handleCancelEdit, className: "px-4 py-2 bg-gray-200 text-gray-700 rounded-md hover:bg-gray-300", __source: { fileName: "", lineNumber: 105, columnNumber: 15 }, __self: this }, "Cancelar"), /*#__PURE__*/ React.createElement("button", { onClick: handleSaveEdit, className: "px-4 py-2 bg-[#297fff] text-white rounded-md hover:bg-[#1e63cc]", __source: { fileName: "", lineNumber: 111, columnNumber: 15 }, __self: this }, "Guardar")))) : null, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center mb-4 border-b border-gray-200 pb-3", __source: { fileName: "", lineNumber: 122, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-bold text-[#06054e]", __source: { fileName: "", lineNumber: 123, columnNumber: 9 }, __self: this }, "Vista previa del documento"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>onDownload(editableDocument), className: "bg-[#00eb79] text-white px-4 py-2 rounded-md hover:bg-[#00d26d] transition-colors flex items-center", __source: { fileName: "", lineNumber: 124, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-download mr-2", __source: { fileName: "", lineNumber: 128, columnNumber: 11 }, __self: this }), "Descargar")), /*#__PURE__*/ React.createElement("div", { className: "bg-[#fff8f7] border border-[#ff7457] border-opacity-30 rounded-md p-3 mb-6", __source: { fileName: "", lineNumber: 133, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-start", __source: { fileName: "", lineNumber: 134, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-exclamation-triangle text-[#ff7457] mt-1 mr-2", __source: { fileName: "", lineNumber: 135, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("p", { className: "text-sm text-gray-700", __source: { fileName: "", lineNumber: 136, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "font-bold", __source: { fileName: "", lineNumber: 137, columnNumber: 13 }, __self: this }, "Aviso legal:"), " Este documento es un borrador generado automáticamente y puede requerir revisión por un profesional legal antes de su uso oficial. No constituye asesoría legal."))), /*#__PURE__*/ React.createElement("div", { className: "border border-gray-200 rounded-lg p-4 sm:p-6 mb-6 bg-gray-50", __source: { fileName: "", lineNumber: 142, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center mb-4", __source: { fileName: "", lineNumber: 143, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-xl font-bold text-center text-[#06054e]", __source: { fileName: "", lineNumber: 144, columnNumber: 11 }, __self: this }, editableDocument.content.title), /*#__PURE__*/ React.createElement("button", { onClick: ()=>handleEditSection("title", 0, editableDocument.content.title), className: "text-[#297fff] hover:text-[#1e63cc]", __source: { fileName: "", lineNumber: 147, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-edit", __source: { fileName: "", lineNumber: 151, columnNumber: 13 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 155, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-bold text-[#06054e] mb-2 border-b border-gray-300 pb-1", __source: { fileName: "", lineNumber: 156, columnNumber: 11 }, __self: this }, "PARTES"), editableDocument.content.parties && editableDocument.content.parties.map((party, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "mb-3 flex justify-between items-start", __source: { fileName: "", lineNumber: 158, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 159, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-medium", __source: { fileName: "", lineNumber: 160, columnNumber: 17 }, __self: this }, party.role, ":"), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 161, columnNumber: 17 }, __self: this }, party.name, ", ", party.identification)), /*#__PURE__*/ React.createElement("button", { onClick: ()=>handleEditSection("party", index, party.name), className: "text-[#297fff] hover:text-[#1e63cc] mt-1", __source: { fileName: "", lineNumber: 163, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-edit", __source: { fileName: "", lineNumber: 167, columnNumber: 17 }, __self: this }))))), /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 173, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-bold text-[#06054e] mb-2 border-b border-gray-300 pb-1", __source: { fileName: "", lineNumber: 174, columnNumber: 11 }, __self: this }, "CLÁUSULAS"), editableDocument.content.clauses && editableDocument.content.clauses.map((clause, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "mb-4", __source: { fileName: "", lineNumber: 176, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-start", __source: { fileName: "", lineNumber: 177, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("h4", { className: "font-medium mb-1", __source: { fileName: "", lineNumber: 178, columnNumber: 17 }, __self: this }, clause.title), /*#__PURE__*/ React.createElement("button", { onClick: ()=>handleEditSection("clause", index, clause.content), className: "text-[#297fff] hover:text-[#1e63cc]", __source: { fileName: "", lineNumber: 179, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-edit", __source: { fileName: "", lineNumber: 183, columnNumber: 19 }, __self: this }))), /*#__PURE__*/ React.createElement("p", { className: "text-sm whitespace-pre-line", __source: { fileName: "", lineNumber: 186, columnNumber: 15 }, __self: this }, clause.content)))), /*#__PURE__*/ React.createElement("div", { className: "mb-4 flex justify-between items-start", __source: { fileName: "", lineNumber: 191, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 192, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-bold text-[#06054e] mb-2 border-b border-gray-300 pb-1", __source: { fileName: "", lineNumber: 193, columnNumber: 13 }, __self: this }, "CIERRE"), /*#__PURE__*/ React.createElement("p", { className: "text-sm whitespace-pre-line", __source: { fileName: "", lineNumber: 194, columnNumber: 13 }, __self: this }, editableDocument.content.closing)), /*#__PURE__*/ React.createElement("button", { onClick: ()=>handleEditSection("closing", 0, editableDocument.content.closing), className: "text-[#297fff] hover:text-[#1e63cc] mt-8", __source: { fileName: "", lineNumber: 196, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-edit", __source: { fileName: "", lineNumber: 200, columnNumber: 13 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "mt-6 text-right", __source: { fileName: "", lineNumber: 204, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-sm text-gray-600", __source: { fileName: "", lineNumber: 205, columnNumber: 11 }, __self: this }, "Fecha: ", formatDate(editableDocument.content.date)), /*#__PURE__*/ React.createElement("p", { className: "text-sm text-gray-600 mt-1", __source: { fileName: "", lineNumber: 206, columnNumber: 11 }, __self: this }, "Documento generado el: ", formatDate(editableDocument.generated_at)))), /*#__PURE__*/ React.createElement("div", { className: "flex justify-between", __source: { fileName: "", lineNumber: 210, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>onSave(editableDocument), className: "bg-[#06054e] text-white px-4 py-2 rounded-md hover:bg-[#06054e]/90 transition-colors", __source: { fileName: "", lineNumber: 211, columnNumber: 9 }, __self: this }, "Guardar documento"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>onDownload(editableDocument), className: "bg-[#00eb79] text-white px-4 py-2 rounded-md hover:bg-[#00d26d] transition-colors flex items-center", __source: { fileName: "", lineNumber: 217, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-download mr-2", __source: { fileName: "", lineNumber: 221, columnNumber: 11 }, __self: this }), "Descargar"))); } function DocumentEditorStory() { const [isLoading, setIsLoading] = React.useState(false); const sampleDocument = { type: "contract", title: "CONTRATO DE SERVICIOS PROFESIONALES", content: { title: "CONTRATO DE SERVICIOS PROFESIONALES", parties: [ { name: "Juan Carlos Rodríguez Méndez", identification: "Cédula 1-1234-5678", role: "CONTRATANTE" }, { name: "María Fernanda López Jiménez", identification: "Cédula 2-3456-7890", role: "CONTRATISTA" } ], clauses: [ { title: "PRIMERA: OBJETO DEL CONTRATO", content: "El CONTRATISTA se compromete a prestar sus servicios profesionales de asesoría legal en materia de derecho laboral al CONTRATANTE, de conformidad con su preparación y experiencia profesional." }, { title: "SEGUNDA: HONORARIOS", content: "El CONTRATANTE pagará al CONTRATISTA por concepto de honorarios profesionales la suma de ₡500.000 (quinientos mil colones) mensuales, pagaderos los días 15 de cada mes mediante transferencia bancaria a la cuenta que el CONTRATISTA indique." }, { title: "TERCERA: PLAZO", content: "El presente contrato tendrá una vigencia de 12 meses contados a partir de la fecha de su firma, pudiendo prorrogarse por períodos iguales mediante acuerdo escrito entre las partes." } ], closing: "En fe de lo anterior, firmamos en la ciudad de San José, en dos tantos de igual valor y contenido, conservando cada parte un original.", date: "2025-01-15" }, generated_at: "2025-01-15T14:30:00Z" }; const handleSave = (document)=>{ console.log("Documento guardado:", document); }; const handleDownload = (document)=>{ console.log("Documento descargado:", document); }; const handleEdit = (document)=>{ console.log("Documento editado:", document); }; const toggleLoading = ()=>{ setIsLoading(!isLoading); }; return /*#__PURE__*/ React.createElement("div", { className: "p-4 bg-gray-100 min-h-screen font-poppins", __source: { fileName: "", lineNumber: 286, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold text-center text-[#06054e] mb-6", __source: { fileName: "", lineNumber: 287, columnNumber: 7 }, __self: this }, "Editor de Documentos"), /*#__PURE__*/ React.createElement("div", { className: "mb-6 flex justify-center space-x-4", __source: { fileName: "", lineNumber: 289, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: toggleLoading, className: "bg-[#297fff] text-white px-4 py-2 rounded-md", __source: { fileName: "", lineNumber: 290, columnNumber: 9 }, __self: this }, isLoading ? "Mostrar Documento" : "Mostrar Cargando")), /*#__PURE__*/ React.createElement("div", { className: "mb-8", __source: { fileName: "", lineNumber: 298, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-bold mb-4 text-[#06054e]", __source: { fileName: "", lineNumber: 299, columnNumber: 9 }, __self: this }, "Estado: Documento Cargado"), /*#__PURE__*/ React.createElement(DocumentEditor, { document: sampleDocument, isLoading: isLoading, onSave: handleSave, onDownload: handleDownload, onEdit: handleEdit, __source: { fileName: "", lineNumber: 300, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-8", __source: { fileName: "", lineNumber: 309, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-bold mb-4 text-[#06054e]", __source: { fileName: "", lineNumber: 310, columnNumber: 9 }, __self: this }, "Estado: Sin Documento"), /*#__PURE__*/ React.createElement(DocumentEditor, { document: null, isLoading: false, onSave: handleSave, onDownload: handleDownload, onEdit: handleEdit, __source: { fileName: "", lineNumber: 311, columnNumber: 9 }, __self: this }))); } function MainComponent() { const [messages, setMessages] = React.useState([ { role: "assistant", content: "Hola 👋. \nSoy Botgado 🤖⚖️ tu asistente de información legal con Inteligencia Artificial especializado en el marco normativo de Costa Rica que responde tus dudas o preguntas legales de manera gratuita 24/7." } ]); const [input, setInput] = React.useState(""); const [isLoading, setIsLoading] = React.useState(false); const [streamingMessage, setStreamingMessage] = React.useState(""); const [showContactForm, setShowContactForm] = React.useState(false); const [contactInfo, setContactInfo] = React.useState({ nombre: "", telefono: "", email: "" }); const [showButtons, setShowButtons] = React.useState(false); const [showContactModal, setShowContactModal] = React.useState(false); const [searchResults, setSearchResults] = React.useState(null); const [isSearching, setIsSearching] = React.useState(false); const [scijResults, setScijResults] = React.useState(null); const [scijSearching, setScijSearching] = React.useState(false); // New progress tracking states const [progress, setProgress] = React.useState(0); const [estimatedTime, setEstimatedTime] = React.useState(0); const [currentStep, setCurrentStep] = React.useState(""); const [startTime, setStartTime] = React.useState(null); const [elapsedTime, setElapsedTime] = React.useState(0); const [isRecording, setIsRecording] = React.useState(false); const [audioBlob, setAudioBlob] = React.useState(null); const [isProcessingAudio, setIsProcessingAudio] = React.useState(false); const mediaRecorderRef = React.useRef(null); const audioChunksRef = React.useRef([]); const messagesEndRef = React.useRef(null); React.useEffect(()=>{ window.dataLayer = window.dataLayer || []; window.dataLayer.push({ event: "page_view", page_title: "Botgado Chat", page_path: window.location.pathname }); }, []); const scrollToBottom = ()=>{ messagesEndRef.current?.scrollIntoView({ behavior: "smooth" }); }; React.useEffect(()=>{ scrollToBottom(); }, [ messages, streamingMessage ]); const handleFinish = React.useCallback((message)=>{ setMessages((prev)=>[ ...prev, { role: "assistant", content: message } ]); setStreamingMessage(""); setShowButtons(true); setIsLoading(false); // Complete progress when response is actually finished setProgress(100); setCurrentStep("¡Consulta completada!"); setEstimatedTime(0); }, []); const handleStreamResponse = React.useCallback(async (response)=>{ if (!response.body) { throw new Error("Response body is not available for streaming"); } const reader = response.body.getReader(); const decoder = new TextDecoder(); let buffer = ""; let fullResponse = ""; try { while(true){ const { done, value } = await reader.read(); if (done) { break; } const chunk = decoder.decode(value, { stream: true }); buffer += chunk; const lines = buffer.split("\n"); buffer = lines.pop() || ""; for (const line of lines){ const trimmedLine = line.trim(); if (trimmedLine === "" || !trimmedLine.startsWith("data: ")) { continue; } const data = trimmedLine.slice(6); if (data === "[DONE]") { break; } try { const parsed = JSON.parse(data); let textContent = ""; // Handle Google Gemini 2.5 Pro response format (primary) if (parsed.choices && parsed.choices.length > 0) { const choice = parsed.choices[0]; if (choice.delta && choice.delta.content) { textContent = choice.delta.content; } else if (choice.message && choice.message.content) { textContent = choice.message.content; } } else if (parsed.candidates && parsed.candidates.length > 0) { const candidate = parsed.candidates[0]; if (candidate.content && candidate.content.parts && candidate.content.parts.length > 0) { textContent = candidate.content.parts[0].text || ""; } } if (textContent) { fullResponse += textContent; setStreamingMessage(fullResponse); } } catch (parseError) { console.warn("Failed to parse streaming chunk:", parseError); } } } // Handle final response handleFinish(fullResponse); } catch (streamError) { console.error("Streaming error:", streamError); throw streamError; } finally{ reader.releaseLock(); } }, []); const startRecording = async ()=>{ try { if (window.dataLayer) { window.dataLayer.push({ event: "button_click", button_name: "iniciar-grabacion", button_action: "start-recording", button_category: "chat-interaction" }); } audioChunksRef.current = []; const stream = await navigator.mediaDevices.getUserMedia({ audio: { echoCancellation: true, noiseSuppression: true, autoGainControl: true, sampleRate: 44100 } }); const mediaRecorder = new MediaRecorder(stream, { mimeType: "audio/webm;codecs=opus" }); mediaRecorder.ondataavailable = (event)=>{ if (event.data.size > 0) { audioChunksRef.current.push(event.data); } }; mediaRecorder.onstop = ()=>{ const audioBlob = new Blob(audioChunksRef.current, { type: "audio/webm" }); setAudioBlob(audioBlob); processAudioToText(audioBlob); }; mediaRecorderRef.current = mediaRecorder; mediaRecorder.start(); setIsRecording(true); console.log("Grabación iniciada. Habla claramente para mejores resultados."); } catch (error) { console.error("Error al iniciar la grabación:", error); alert("No se pudo acceder al micrófono. Por favor, verifica los permisos."); } }; const stopRecording = ()=>{ if (mediaRecorderRef.current && isRecording) { if (window.dataLayer) { window.dataLayer.push({ event: "button_click", button_name: "detener-grabacion", button_action: "stop-recording", button_category: "chat-interaction" }); } mediaRecorderRef.current.stop(); setIsRecording(false); mediaRecorderRef.current.stream.getTracks().forEach((track)=>track.stop()); } }; const processAudioToText = async (blob)=>{ setIsProcessingAudio(true); try { const reader = new FileReader(); reader.readAsDataURL(blob); reader.onloadend = async ()=>{ const base64Audio = reader.result.split(",")[1]; const response = await fetch("/api/processAudio", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ audioData: base64Audio }) }); const data = await response.json(); if (data.success && data.text) { setInput(data.text); if (data.text.trim()) { const event = { preventDefault: ()=>{} }; await handleSubmit(event, data.text); } } else { console.error("Error al procesar el audio:", data.error); alert("No se pudo procesar el audio. Por favor, intenta de nuevo."); } setIsProcessingAudio(false); }; } catch (error) { console.error("Error al procesar el audio:", error); alert("Ocurrió un error al procesar el audio. Por favor, intenta de nuevo."); setIsProcessingAudio(false); } }; const handleSubmit = async (e, transcribedText = null)=>{ e.preventDefault(); const textToSubmit = transcribedText || input; if (!textToSubmit.trim()) return; if (window.dataLayer) { window.dataLayer.push({ event: "button_click", button_name: "enviar-consulta", button_action: "submit-question", button_category: "chat-interaction", question_text: textToSubmit.trim() }); } const userMessage = { role: "user", content: textToSubmit }; setMessages((prev)=>[ ...prev, userMessage ]); setInput(""); setIsLoading(true); setShowButtons(false); // Initialize progress tracking with accurate timing const requestStartTime = Date.now(); setStartTime(requestStartTime); setProgress(0); setElapsedTime(0); setEstimatedTime(25); // Initial estimate setCurrentStep("Iniciando consulta..."); // Accurate timer that tracks real elapsed time const timerInterval = setInterval(()=>{ const now = Date.now(); const elapsed = Math.floor((now - requestStartTime) / 1000); setElapsedTime(elapsed); // Update estimated time remaining based on current progress and elapsed time if (elapsed < 5) { setEstimatedTime(25 - elapsed); } else if (elapsed < 15) { setEstimatedTime(30 - elapsed); } else if (elapsed < 25) { setEstimatedTime(35 - elapsed); } else { setEstimatedTime(Math.max(5, 40 - elapsed)); // Always show at least 5s remaining } }, 1000); // Update every second for accurate timing // Progress simulation - slower and more conservative const progressInterval = setInterval(()=>{ setProgress((prev)=>{ if (prev >= 85) return prev; // Stop at 85% until actually done return prev + Math.random() * 2 + 0.5; // Slower increment by 0.5-2.5% }); }, 1200); // Slower interval - every 1.2 seconds setScijSearching(true); setCurrentStep("Consultando el SCIJ..."); setProgress(5); try { const scijResponse = await fetch("/api/searchSCIJ", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ query: textToSubmit }) }); if (!scijResponse.ok) { throw new Error(`Error en la búsqueda SCIJ: ${scijResponse.status}`); } const scijData = await scijResponse.json(); setScijResults(scijData.results); setProgress(25); setCurrentStep("Verificando normativa legal..."); setIsSearching(true); const searchQuery = `${textToSubmit} normativa legal Costa Rica ley código artículo`; const searchResponse = await fetch(`/integrations/google-search/search?q=${encodeURIComponent(searchQuery)}`); if (!searchResponse.ok) { throw new Error(`Error en la búsqueda: ${searchResponse.status}`); } const searchData = await searchResponse.json(); setSearchResults(searchData.items); setProgress(45); setCurrentStep("Analizando información legal..."); const combinedSearchResults = [ ...(scijData.results || []).slice(0, 5), ...(searchData.items || []).slice(0, 3) ]; setProgress(65); setCurrentStep("Generando respuesta especializada..."); // Use Google Gemini 2.5 Pro instead of ChatGPT const response = await fetch("/integrations/google-gemini-2-5-pro/", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ messages: [ { role: "system", content: `Eres un asistente de información legal especializado en el marco normativo de Costa Rica. Tu función es responder siempre a cualquier duda o problema legal que el usuario tenga, proporcionando información clara y fundamentada, pero con un tono ligeramente más conversacional y cercano. INSTRUCCIONES CRÍTICAS SOBRE LA NORMATIVA: 1. SIEMPRE debes proporcionar la normativa específica y el artículo exacto que aplica a la situación consultada 2. Debes verificar EXHAUSTIVAMENTE la normativa aplicable antes de responder 3. Realiza una búsqueda profunda para identificar la ley, código, reglamento o normativa específica 4. Incluye SIEMPRE el número exacto de ley, código o reglamento, y el artículo específico 5. Si la normativa ha sido modificada o derogada, debes mencionarlo y proporcionar la versión vigente 6. Verifica que la información legal que proporcionas sea actual y vigente 7. Si hay interpretaciones jurisprudenciales relevantes, menciónalas 8. Si después de una búsqueda exhaustiva no puedes encontrar una normativa específica, debes indicar la normativa más cercana o relacionada, aclarando que podría no ser exactamente aplicable al caso específico 9. IMPORTANTE: Debes consultar el Sistema Costarricense de Información Jurídica (SCIJ) para verificar la normativa exacta. La URL del SCIJ es: https://pgrweb.go.cr/scij/avanzada_pgr.aspx Aquí tienes los resultados de una búsqueda en el SCIJ sobre la consulta del usuario para ayudarte a proporcionar información precisa: ${JSON.stringify(combinedSearchResults || [])} Utiliza esta información para verificar y citar correctamente la normativa aplicable. DEBES incluir referencias específicas a artículos de ley, códigos o normativas en tu respuesta. Reglas para responder: 1. Responde SIEMPRE a cualquier consulta legal 2. IMPORTANTE: Menciona explícitamente que consultaste el Sistema Costarricense de Información Jurídica (SCIJ) para verificar la normativa exacta 3. IMPORTANTE: Siempre comienza tu respuesta mostrando empatía y comprensión del caso del usuario. Usa un tono amigable y cercano 4. Tus respuestas deben ser explicativas y detalladas, pero evita ser demasiado técnico o formal. Usa un lenguaje más accesible y conversacional 5. IMPORTANTE: Resalta con negrita (**texto**) el tipo de abogado que recomiendas consultar 6. NO incluyas enlaces al SCIJ ni la sección 'Consulta en el SCIJ' 7. Formato obligatorio de la respuesta: [Párrafo inicial mostrando empatía y comprensión del caso, con un tono amigable y cercano] 📌 **Normativa Aplicable:** El tema que mencionas está regulado por [Nombre de la ley o código], específicamente en su artículo [Número]. He consultado el Sistema Costarricense de Información Jurídica (SCIJ) para verificar esta información. (NOTA: Si después de una búsqueda exhaustiva no encuentras la normativa exacta, indica: "Basado en mi análisis del SCIJ, este tema está relacionado con [normativa más cercana], específicamente su artículo [número], aunque podría requerir un análisis más detallado por parte de un profesional para determinar su aplicabilidad exacta a tu caso.) 📝 **Explicación de la Normativa:** [Explicación en lenguaje sencillo y accesible de lo que establece la normativa y cómo se aplica al caso]. El texto legal dice: *"El artículo [Número] establece que [...] (extracto relevante del texto legal)." (NOTA: Si no puedes citar el texto exacto, debes proporcionar una paráfrasis lo más precisa posible del contenido del artículo, indicando: "El artículo [Número] establece esencialmente que [paráfrasis del contenido].") 🔄 **Pasos a Seguir:** 1. **[Título del primer paso]**: [Explicación clara y sencilla del primer paso, usando un tono conversacional] 2. **[Título del segundo paso]**: [Explicación del segundo paso en lenguaje accesible] 3. **[Título del tercer paso]**: [Explicación del tercer paso con ejemplos prácticos si es necesario] 4. **[Título del cuarto paso]**: [Explicación del cuarto paso, mencionando posibles obstáculos y soluciones de manera sencilla] 5. **[Título del quinto paso si aplica]**: [Explicación del quinto paso en lenguaje cotidiano] 👨‍⚖️ **Asesoría Recomendada:** Para este caso, te recomendaría hablar con un **[tipo de abogado especializado]**. Este profesional puede ayudarte a [explicación sencilla de cómo el abogado puede ayudar en este caso específico]. ⚠️ **Aviso Legal:** Esta respuesta es informativa y se basa en la normativa vigente consultada en el SCIJ, pero para una aplicación específica a tu caso, te recomiendo consultar con un profesional legal.` }, ...messages.filter((msg)=>msg.role !== "system"), userMessage ] }) }); if (!response.ok) { throw new Error(`Error en la respuesta de Gemini: ${response.status}`); } setProgress(80); setCurrentStep("Finalizando respuesta..."); // Check if response is streaming const contentType = response.headers.get("content-type"); if (contentType && contentType.includes("text/plain")) { // Handle streaming response await handleStreamResponse(response); } else { // Handle non-streaming response const data = await response.json(); if (data.choices && data.choices.length > 0) { const content = data.choices[0].message.content; handleFinish(content); } else { throw new Error("No response content received"); } } // Don't set progress to 100% here - let handleFinish do it } catch (error) { console.error("Error:", error); setIsLoading(false); setShowButtons(false); setMessages((prev)=>[ ...prev, { role: "assistant", content: "Lo siento, ha ocurrido un error al procesar tu consulta. Por favor, intenta nuevamente." } ]); } finally{ clearInterval(progressInterval); clearInterval(timerInterval); setIsSearching(false); setScijSearching(false); // Reset progress after a longer delay to let users see completion setTimeout(()=>{ setProgress(0); setEstimatedTime(0); setElapsedTime(0); setCurrentStep(""); setStartTime(null); }, 3000); // Increased to 3 seconds } }; const handleContactLawyer = ()=>{ if (window.dataLayer) { window.dataLayer.push({ event: "button_click", button_name: "contactar-abogado", button_action: "request-lawyer-contact", button_category: "conversion" }); } setMessages((prev)=>[ ...prev, { role: "assistant", content: "Muy pronto podrás contactar directamente con abogados especializados a través de Botgado, el primer Marketplace de Abogados de Costa Rica. Preparate para encontrar respuestas claras y el apoyo legal que necesitás, todo en un solo lugar." } ]); setShowButtons(true); setShowContactForm(false); }; const handleNewQuestion = ()=>{ if (window.dataLayer) { window.dataLayer.push({ event: "button_click", button_name: "nueva-consulta", button_action: "reset-conversation", button_category: "chat-interaction" }); } setMessages([ { role: "assistant", content: "Hola 👋. \nSoy Botgado 🤖⚖️ tu asistente de información legal con Inteligencia Artificial especializado en el marco normativo de Costa Rica que responde tus dudas o preguntas legales de manera gratuita 24/7." } ]); setShowButtons(false); setShowContactForm(false); }; const handleContactSubmit = (e)=>{ e.preventDefault(); setMessages((prev)=>[ ...prev, { role: "assistant", content: `Gracias ${contactInfo.nombre}. Hemos recibido tus datos de contacto. Un abogado especializado se pondrá en contacto contigo pronto al número ${contactInfo.telefono} o al correo ${contactInfo.email}.` } ]); setShowContactForm(false); setShowButtons(true); setContactInfo({ nombre: "", telefono: "", email: "" }); }; const handleContactInputChange = (e)=>{ const { name, value } = e.target; setContactInfo((prev)=>({ ...prev, [name]: value })); }; const formatText = (text)=>{ if (!text) return ""; let formattedText = text.replace(/\*\*(.*?)\*\*/g, "$1"); formattedText = formattedText.replace(/\*(.*?)\*/g, "$1"); formattedText = formattedText.replace(/\n/g, "
"); return formattedText; }; const isInitialWelcomeMessage = messages.length === 1 && messages[0].role === "assistant" && messages[0].content.includes("Soy Botgado"); const [typedWelcomeMessage, setTypedWelcomeMessage] = React.useState(""); const welcomeMessage = messages[0]?.content || ""; React.useEffect(()=>{ if (isInitialWelcomeMessage && typedWelcomeMessage.length < welcomeMessage.length) { const timeout = setTimeout(()=>{ setTypedWelcomeMessage(welcomeMessage.slice(0, typedWelcomeMessage.length + 1)); }, 30); return ()=>clearTimeout(timeout); } }, [ typedWelcomeMessage, welcomeMessage, isInitialWelcomeMessage ]); React.useEffect(()=>{ if (isInitialWelcomeMessage) { setTypedWelcomeMessage(""); } }, [ isInitialWelcomeMessage ]); return /*#__PURE__*/ React.createElement(Layout1, { __source: { fileName: "", lineNumber: 592, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 593, columnNumber: 7 }, __self: this }, ` @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap'); .message-bubble { max-height: none !important; overflow-y: visible !important; } .messages-container { -webkit-overflow-scrolling: touch; overflow-y: auto !important; overscroll-behavior-y: contain; height: 100%; width: 100%; padding-bottom: 8px; } .chat-container { touch-action: pan-y; width: 100%; } .mic-button { transition: all 0.3s ease; } .mic-button.recording { background-color: #ff4a4a; animation: pulse 1.5s infinite; } @keyframes pulse { 0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 74, 74, 0.7); } 70% { transform: scale(1.05); box-shadow: 0 0 0 10px rgba(255, 74, 74, 0); } 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 74, 74, 0); } } @media (max-width: 768px) { .chat-container { width: 100%; padding-top: 0; padding-bottom: env(safe-area-inset-bottom, 0px); } .chat-header { flex-shrink: 0; position: relative; z-index: 10; } .messages-container { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding-bottom: env(safe-area-inset-bottom, 0px); } .chat-input-area { flex-shrink: 0; background: white; border-top: 1px solid #d8d8d8; width: 100%; padding-bottom: env(safe-area-inset-bottom, 0px); position: relative; z-index: 10; } } `), /*#__PURE__*/ React.createElement("div", { className: "chat-container w-full", __source: { fileName: "", lineNumber: 673, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "chat-header flex items-center justify-center w-full px-2 sm:px-4 md:px-10", __source: { fileName: "", lineNumber: 674, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-3xl", __source: { fileName: "", lineNumber: 675, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-gradient-to-r from-[#06054e] to-[#297fff] text-white rounded-t-xl shadow-md mt-2 md:mt-4 w-full flex items-center py-3 sm:py-4 md:py-5 px-4 sm:px-5 md:px-7", __source: { fileName: "", lineNumber: 676, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between w-full", __source: { fileName: "", lineNumber: 677, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 678, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "https://ucarecdn.com/490dbf5d-3ef3-41fe-9e7a-903b816cf35c/-/format/auto/", alt: "Botgado Logo", className: "h-8 sm:h-10 md:h-12", __source: { fileName: "", lineNumber: 679, columnNumber: 19 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "text-right", __source: { fileName: "", lineNumber: 685, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-white text-xs sm:text-sm md:text-base font-bold tracking-wide uppercase", __source: { fileName: "", lineNumber: 686, columnNumber: 19 }, __self: this }, "Consultas de información legal", " ", /*#__PURE__*/ React.createElement("span", { className: "text-[#00eb79]", __source: { fileName: "", lineNumber: 688, columnNumber: 21 }, __self: this }, "24/7")), /*#__PURE__*/ React.createElement("p", { className: "text-white text-[10px] sm:text-xs opacity-90 mt-1", __source: { fileName: "", lineNumber: 690, columnNumber: 19 }, __self: this }, "Información legal verificada en el SCIJ")))))), /*#__PURE__*/ React.createElement("div", { className: "px-2 sm:px-4 md:px-10 flex items-center justify-center w-full", __source: { fileName: "", lineNumber: 699, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-3xl bg-white rounded-b-xl shadow-lg overflow-hidden flex flex-col h-[calc(100vh-180px)] sm:h-[calc(100vh-200px)] md:h-[600px]", __source: { fileName: "", lineNumber: 700, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex-grow overflow-y-auto p-3 sm:p-4 bg-[#f8f8f8] messages-container", __source: { fileName: "", lineNumber: 701, columnNumber: 13 }, __self: this }, messages.map((message, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "mb-4", __source: { fileName: "", lineNumber: 703, columnNumber: 17 }, __self: this }, message.role === "assistant" ? /*#__PURE__*/ React.createElement("div", { className: "flex items-start", __source: { fileName: "", lineNumber: 705, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "https://ucarecdn.com/f92fc38b-1b20-47b5-a040-9f27e12313ff/-/format/auto/", alt: "Botgado Icon", className: "w-8 h-8 mr-2 mt-1 flex-shrink-0", __source: { fileName: "", lineNumber: 706, columnNumber: 23 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "bg-white text-gray-800 border border-[#d8d8d8] p-2 sm:p-3 rounded-lg rounded-tl-none shadow-sm max-w-[85%] sm:max-w-[80%] message-bubble", __source: { fileName: "", lineNumber: 711, columnNumber: 23 }, __self: this }, index === 0 && isInitialWelcomeMessage ? /*#__PURE__*/ React.createElement("div", { dangerouslySetInnerHTML: { __html: formatText(typedWelcomeMessage) }, className: "text-xs sm:text-sm break-words", __source: { fileName: "", lineNumber: 713, columnNumber: 27 }, __self: this }) : /*#__PURE__*/ React.createElement("div", { dangerouslySetInnerHTML: { __html: formatText(message.content) }, className: "text-xs sm:text-sm break-words", __source: { fileName: "", lineNumber: 720, columnNumber: 27 }, __self: this }))) : /*#__PURE__*/ React.createElement("div", { className: "flex justify-end", __source: { fileName: "", lineNumber: 730, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-[#06054e] text-white p-2 sm:p-3 rounded-lg rounded-tr-none shadow-sm max-w-[85%] sm:max-w-[80%]", __source: { fileName: "", lineNumber: 731, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-xs sm:text-sm break-words", __source: { fileName: "", lineNumber: 732, columnNumber: 25 }, __self: this }, message.content))))), isLoading && !streamingMessage && /*#__PURE__*/ React.createElement("div", { className: "flex items-start mb-4", __source: { fileName: "", lineNumber: 742, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "https://ucarecdn.com/f92fc38b-1b20-47b5-a040-9f27e12313ff/-/format/auto/", alt: "Botgado Icon", className: "w-8 h-8 mr-2 mt-1 flex-shrink-0", __source: { fileName: "", lineNumber: 743, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "bg-white text-gray-800 border border-[#d8d8d8] p-2 sm:p-3 rounded-lg rounded-tl-none shadow-sm max-w-[85%] sm:max-w-[80%]", __source: { fileName: "", lineNumber: 748, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex space-x-1", __source: { fileName: "", lineNumber: 749, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-2 h-2 bg-[#297fff] rounded-full animate-bounce", __source: { fileName: "", lineNumber: 750, columnNumber: 23 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "w-2 h-2 bg-[#297fff] rounded-full animate-bounce", style: { animationDelay: "0.2s" }, __source: { fileName: "", lineNumber: 751, columnNumber: 23 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "w-2 h-2 bg-[#297fff] rounded-full animate-bounce", style: { animationDelay: "0.4s" }, __source: { fileName: "", lineNumber: 755, columnNumber: 23 }, __self: this })), scijSearching && /*#__PURE__*/ React.createElement("div", { className: "text-xs text-gray-500 mt-1", __source: { fileName: "", lineNumber: 761, columnNumber: 23 }, __self: this }, "Consultando el SCIJ para verificar la normativa exacta..."), isSearching && !scijSearching && /*#__PURE__*/ React.createElement("div", { className: "text-xs text-gray-500 mt-1", __source: { fileName: "", lineNumber: 767, columnNumber: 23 }, __self: this }, "Verificando normativa legal adicional..."))), isProcessingAudio && /*#__PURE__*/ React.createElement("div", { className: "flex items-start mb-4", __source: { fileName: "", lineNumber: 776, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "https://ucarecdn.com/f92fc38b-1b20-47b5-a040-9f27e12313ff/-/format/auto/", alt: "Botgado Icon", className: "w-8 h-8 mr-2 mt-1 flex-shrink-0", __source: { fileName: "", lineNumber: 777, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "bg-white text-gray-800 border border-[#d8d8d8] p-2 sm:p-3 rounded-lg rounded-tl-none shadow-sm max-w-[85%] sm:max-w-[80%]", __source: { fileName: "", lineNumber: 782, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex space-x-1", __source: { fileName: "", lineNumber: 783, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-2 h-2 bg-[#297fff] rounded-full animate-bounce", __source: { fileName: "", lineNumber: 784, columnNumber: 23 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "w-2 h-2 bg-[#297fff] rounded-full animate-bounce", style: { animationDelay: "0.2s" }, __source: { fileName: "", lineNumber: 785, columnNumber: 23 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "w-2 h-2 bg-[#297fff] rounded-full animate-bounce", style: { animationDelay: "0.4s" }, __source: { fileName: "", lineNumber: 789, columnNumber: 23 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "text-xs text-gray-500 mt-1", __source: { fileName: "", lineNumber: 794, columnNumber: 21 }, __self: this }, "Procesando tu mensaje de voz..."))), streamingMessage && /*#__PURE__*/ React.createElement("div", { className: "flex items-start mb-4", __source: { fileName: "", lineNumber: 802, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "https://ucarecdn.com/f92fc38b-1b20-47b5-a040-9f27e12313ff/-/format/auto/", alt: "Botgado Icon", className: "w-8 h-8 mr-2 mt-1 flex-shrink-0", __source: { fileName: "", lineNumber: 803, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "bg-white text-gray-800 border border-[#d8d8d8] p-2 sm:p-3 rounded-lg rounded-tl-none shadow-sm max-w-[85%] sm:max-w-[80%] message-content", __source: { fileName: "", lineNumber: 808, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("div", { dangerouslySetInnerHTML: { __html: formatText(streamingMessage) }, className: "text-xs sm:text-sm break-words", __source: { fileName: "", lineNumber: 809, columnNumber: 21 }, __self: this }))), (isLoading || progress > 0) && !streamingMessage && /*#__PURE__*/ React.createElement("div", { className: "flex items-start mb-4", __source: { fileName: "", lineNumber: 820, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "https://ucarecdn.com/f92fc38b-1b20-47b5-a040-9f27e12313ff/-/format/auto/", alt: "Botgado Icon", className: "w-8 h-8 mr-2 mt-1 flex-shrink-0", __source: { fileName: "", lineNumber: 821, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "bg-white text-gray-800 border border-[#d8d8d8] p-2 sm:p-3 rounded-lg rounded-tl-none shadow-sm max-w-[85%] sm:max-w-[80%]", __source: { fileName: "", lineNumber: 826, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-2", __source: { fileName: "", lineNumber: 827, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center mb-1", __source: { fileName: "", lineNumber: 828, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-xs font-medium text-gray-700", __source: { fileName: "", lineNumber: 829, columnNumber: 25 }, __self: this }, currentStep), estimatedTime > 0 && /*#__PURE__*/ React.createElement("span", { className: "text-xs text-gray-500", __source: { fileName: "", lineNumber: 833, columnNumber: 27 }, __self: this }, "~", estimatedTime, "s")), /*#__PURE__*/ React.createElement("div", { className: "w-full bg-gray-200 rounded-full h-2", __source: { fileName: "", lineNumber: 838, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-gradient-to-r from-[#06054e] to-[#297fff] h-2 rounded-full transition-all duration-500 ease-out", style: { width: `${progress}%` }, __source: { fileName: "", lineNumber: 839, columnNumber: 25 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "text-xs text-gray-500 mt-1 text-center", __source: { fileName: "", lineNumber: 844, columnNumber: 23 }, __self: this }, Math.round(progress), "% completado")), !currentStep && /*#__PURE__*/ React.createElement("div", { className: "flex space-x-1", __source: { fileName: "", lineNumber: 850, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-2 h-2 bg-[#297fff] rounded-full animate-bounce", __source: { fileName: "", lineNumber: 851, columnNumber: 25 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "w-2 h-2 bg-[#297fff] rounded-full animate-bounce", style: { animationDelay: "0.2s" }, __source: { fileName: "", lineNumber: 852, columnNumber: 25 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "w-2 h-2 bg-[#297fff] rounded-full animate-bounce", style: { animationDelay: "0.4s" }, __source: { fileName: "", lineNumber: 856, columnNumber: 25 }, __self: this })))), showButtons && messages.length > 0 && messages[messages.length - 1].role === "assistant" && !isLoading && !isInitialWelcomeMessage && /*#__PURE__*/ React.createElement("div", { className: "flex flex-wrap gap-2 mt-2 mb-4", __source: { fileName: "", lineNumber: 871, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: handleContactLawyer, className: "bg-[#8e2cff] text-white py-1.5 sm:py-2 px-3 sm:px-4 rounded-md text-xs sm:text-sm hover:bg-[#7a25d9] transition-colors", id: "contact-lawyer-btn", __source: { fileName: "", lineNumber: 872, columnNumber: 21 }, __self: this }, "Contactar a un abogado"), /*#__PURE__*/ React.createElement("button", { onClick: handleNewQuestion, className: "bg-[#ff7457] text-white py-1.5 sm:py-2 px-3 sm:px-4 rounded-md text-xs sm:text-sm hover:bg-[#e66a4f] transition-colors", id: "new-question-btn", __source: { fileName: "", lineNumber: 879, columnNumber: 21 }, __self: this }, "Nueva consulta"), /*#__PURE__*/ React.createElement("a", { href: `/document-generator?query=${encodeURIComponent(messages[messages.length - 2]?.content || "")}`, className: "bg-[#297fff] text-white py-1.5 sm:py-2 px-3 sm:px-4 rounded-md text-xs sm:text-sm hover:bg-[#1e6ad7] transition-colors", id: "generate-document-btn", onClick: ()=>{ if (window.dataLayer) { window.dataLayer.push({ event: "button_click", button_name: "generar-documento", button_action: "navigate-to-document-generator", button_category: "chat-interaction", query_text: messages[messages.length - 2]?.content || "" }); } }, __source: { fileName: "", lineNumber: 886, columnNumber: 21 }, __self: this }, "Generar Documento")), showContactForm && /*#__PURE__*/ React.createElement("div", { className: "bg-white border border-[#d8d8d8] rounded-lg p-3 sm:p-4 shadow-sm mb-4 w-full", __source: { fileName: "", lineNumber: 909, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-[#06054e] font-bold mb-2 sm:mb-3 text-sm sm:text-base", __source: { fileName: "", lineNumber: 910, columnNumber: 19 }, __self: this }, "Datos de contacto"), /*#__PURE__*/ React.createElement("form", { onSubmit: handleContactSubmit, className: "space-y-2 sm:space-y-3", __source: { fileName: "", lineNumber: 913, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 917, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-xs sm:text-sm font-medium text-gray-700 mb-1", __source: { fileName: "", lineNumber: 918, columnNumber: 23 }, __self: this }, "Nombre completo"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "nombre", value: contactInfo.nombre, onChange: handleContactInputChange, required: true, className: "w-full p-1.5 sm:p-2 border border-[#d8d8d8] rounded-md focus:ring-2 focus:ring-[#297fff] focus:border-transparent outline-none", __source: { fileName: "", lineNumber: 921, columnNumber: 23 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 930, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-xs sm:text-sm font-medium text-gray-700 mb-1", __source: { fileName: "", lineNumber: 931, columnNumber: 23 }, __self: this }, "Número de teléfono"), /*#__PURE__*/ React.createElement("input", { type: "tel", name: "telefono", value: contactInfo.telefono, onChange: handleContactInputChange, required: true, className: "w-full p-1.5 sm:p-2 border border-[#d8d8d8] rounded-md focus:ring-2 focus:ring-[#297fff] focus:border-transparent outline-none", __source: { fileName: "", lineNumber: 934, columnNumber: 23 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 943, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-xs sm:text-sm font-medium text-gray-700 mb-1", __source: { fileName: "", lineNumber: 944, columnNumber: 23 }, __self: this }, "Correo electrónico"), /*#__PURE__*/ React.createElement("input", { type: "email", name: "email", value: contactInfo.email, onChange: handleContactInputChange, required: true, autoComplete: "off", className: "w-full p-1.5 sm:p-2 border border-[#d8d8d8] rounded-md focus:ring-2 focus:ring-[#297fff] focus:border-transparent outline-none", __source: { fileName: "", lineNumber: 947, columnNumber: 23 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex gap-2", __source: { fileName: "", lineNumber: 957, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("button", { type: "submit", className: "bg-[#00eb79] text-white px-3 sm:px-4 rounded-r-md hover:bg-[#00d26d] transition-colors disabled:bg-gray-400", __source: { fileName: "", lineNumber: 958, columnNumber: 23 }, __self: this }, isLoading ? /*#__PURE__*/ React.createElement("span", { className: "flex items-center justify-center", __source: { fileName: "", lineNumber: 963, columnNumber: 27 }, __self: this }, /*#__PURE__*/ React.createElement("svg", { className: "animate-spin h-4 w-4 sm:h-5 sm:w-5 text-white", xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", __source: { fileName: "", lineNumber: 964, columnNumber: 29 }, __self: this }, /*#__PURE__*/ React.createElement("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4", __source: { fileName: "", lineNumber: 970, columnNumber: 31 }, __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: 978, columnNumber: 31 }, __self: this }))) : /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 986, columnNumber: 27 }, __self: this }, "Enviar")), /*#__PURE__*/ React.createElement("button", { type: "button", onClick: ()=>{ setShowContactForm(false); setShowButtons(true); }, className: "bg-[#d8d8d8] text-gray-800 py-1.5 sm:py-2 px-3 sm:px-4 rounded-md text-xs sm:text-sm hover:bg-gray-300 transition-colors", id: "cancel-contact-form-btn", __source: { fileName: "", lineNumber: 989, columnNumber: 23 }, __self: this }, "Cancelar")))), /*#__PURE__*/ React.createElement("div", { ref: messagesEndRef, __source: { fileName: "", lineNumber: 1005, columnNumber: 15 }, __self: this })), !showContactForm && /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, className: "p-2 sm:p-3 border-t border-[#d8d8d8] bg-white chat-input-area", __source: { fileName: "", lineNumber: 1009, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex", __source: { fileName: "", lineNumber: 1013, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", value: input, onChange: (e)=>setInput(e.target.value), placeholder: "Escribe tu consulta legal aquí...", className: "flex-grow p-1.5 sm:p-2 border border-[#d8d8d8] rounded-l-md focus:ring-2 focus:ring-[#297fff] focus:border-transparent outline-none", disabled: isRecording || isProcessingAudio, __source: { fileName: "", lineNumber: 1014, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", disabled: isLoading || isRecording || isProcessingAudio || !input.trim(), className: "bg-[#00eb79] text-white px-3 sm:px-4 rounded-r-md hover:bg-[#00d26d] transition-colors disabled:bg-gray-400", __source: { fileName: "", lineNumber: 1022, columnNumber: 19 }, __self: this }, isLoading || isProcessingAudio ? /*#__PURE__*/ React.createElement("span", { className: "flex items-center justify-center", __source: { fileName: "", lineNumber: 1033, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("svg", { className: "animate-spin h-4 w-4 sm:h-5 sm:w-5 text-white", xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", __source: { fileName: "", lineNumber: 1034, columnNumber: 25 }, __self: this }, /*#__PURE__*/ React.createElement("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4", __source: { fileName: "", lineNumber: 1040, columnNumber: 27 }, __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: 1048, columnNumber: 27 }, __self: this }))) : /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 1056, columnNumber: 23 }, __self: this }, "Enviar"))), /*#__PURE__*/ React.createElement("p", { className: "text-[10px] sm:text-xs text-gray-500 mt-1 text-center", __source: { fileName: "", lineNumber: 1060, columnNumber: 17 }, __self: this }, isRecording ? /*#__PURE__*/ React.createElement("span", { className: "text-[#ff4a4a] font-medium", __source: { fileName: "", lineNumber: 1062, columnNumber: 21 }, __self: this }, "Grabando mensaje de voz... Haz clic en el botón rojo para detener") : "Tus consultas son confidenciales y están protegidas"))))), showContactModal && /*#__PURE__*/ React.createElement("div", { className: "fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50 overflow-y-auto", __source: { fileName: "", lineNumber: 1077, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-lg shadow-xl w-full max-w-md p-4 sm:p-6 mx-2", __source: { fileName: "", lineNumber: 1078, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center mb-4", __source: { fileName: "", lineNumber: 1079, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-base sm:text-lg font-bold text-[#06054e]", __source: { fileName: "", lineNumber: 1080, columnNumber: 15 }, __self: this }, "Contactar a un abogado"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setShowContactModal(false), className: "text-gray-500 hover:text-gray-700", __source: { fileName: "", lineNumber: 1083, columnNumber: 15 }, __self: this }, "✕")), /*#__PURE__*/ React.createElement("form", { className: "space-y-3 sm:space-y-4", __source: { fileName: "", lineNumber: 1090, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 1091, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-xs sm:text-sm font-medium text-gray-700 mb-1", __source: { fileName: "", lineNumber: 1092, columnNumber: 17 }, __self: this }, "Nombre completo"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "nombre", required: true, className: "w-full p-1.5 sm:p-2 border border-[#d8d8d8] rounded-md focus:ring-2 focus:ring-[#297fff] focus:border-transparent outline-none", __source: { fileName: "", lineNumber: 1095, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 1102, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-xs sm:text-sm font-medium text-gray-700 mb-1", __source: { fileName: "", lineNumber: 1103, columnNumber: 17 }, __self: this }, "Número de teléfono"), /*#__PURE__*/ React.createElement("input", { type: "tel", name: "telefono", required: true, className: "w-full p-1.5 sm:p-2 border border-[#d8d8d8] rounded-md focus:ring-2 focus:ring-[#297fff] focus:border-transparent outline-none", __source: { fileName: "", lineNumber: 1106, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 1113, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-xs sm:text-sm font-medium text-gray-700 mb-1", __source: { fileName: "", lineNumber: 1114, columnNumber: 17 }, __self: this }, "Correo electrónico"), /*#__PURE__*/ React.createElement("input", { type: "email", name: "email", required: true, className: "w-full p-1.5 sm:p-2 border border-[#d8d8d8] rounded-md focus:ring-2 focus:ring-[#297fff] focus:border-transparent outline-none", __source: { fileName: "", lineNumber: 1117, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 1124, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-xs sm:text-sm font-medium text-gray-700 mb-1", __source: { fileName: "", lineNumber: 1125, columnNumber: 17 }, __self: this }, "Describe brevemente tu caso"), /*#__PURE__*/ React.createElement("textarea", { name: "descripcion", rows: "3", className: "w-full p-1.5 sm:p-2 border border-[#d8d8d8] rounded-md focus:ring-2 focus:ring-[#297fff] focus:border-transparent outline-none", __source: { fileName: "", lineNumber: 1128, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex gap-2", __source: { fileName: "", lineNumber: 1134, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("button", { type: "submit", className: "bg-[#8e2cff] text-white py-1.5 sm:py-2 px-3 sm:px-4 rounded-md text-xs sm:text-sm hover:bg-[#7a25d9] transition-colors", __source: { fileName: "", lineNumber: 1135, columnNumber: 17 }, __self: this }, "Enviar"), /*#__PURE__*/ React.createElement("button", { type: "button", onClick: ()=>setShowContactModal(false), className: "bg-[#ff7457] text-white py-1.5 sm:py-2 px-3 sm:px-4 rounded-md text-xs sm:text-sm hover:bg-[#e66a4f] transition-colors", __source: { fileName: "", lineNumber: 1141, columnNumber: 17 }, __self: this }, "Cancelar")))))); }