{"id":1131,"date":"2025-06-04T21:19:33","date_gmt":"2025-06-05T02:19:33","guid":{"rendered":"https:\/\/innovationlab.zalva.net\/?page_id=1131"},"modified":"2025-11-23T17:50:18","modified_gmt":"2025-11-23T22:50:18","slug":"zolvera-docs-ia","status":"publish","type":"page","link":"https:\/\/innovationlab.zalva.net\/index.php\/zolvera-docs-ia\/","title":{"rendered":"Zolvera Docs IA"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"1131\" class=\"elementor elementor-1131\">\n\t\t\t\t<div class=\"elementor-element elementor-element-d73e8e2 e-flex e-con-boxed e-con e-parent\" data-id=\"d73e8e2\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-c5bd454 elementor-widget elementor-widget-html\" data-id=\"c5bd454\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!-- MARCADO Y ESTILOS -->\r\n<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/marked\/marked.min.js\"><\/script>\r\n<style>\r\n.chat-container {\r\n    display: flex;\r\n    flex-direction: column;\r\n    background-color: #f5f5f5;\r\n    width: 100%;\r\n    padding: 20px;\r\n    border-radius: 10px;\r\n    height: 650px;\r\n    max-height: 85vh;\r\n    overflow: hidden;\r\n    box-shadow: 0 0 8px rgba(0,0,0,0.1);\r\n}\r\n\r\n.chat-header {\r\n    background-color: #120e4c;\r\n    color: #ffffff;\r\n    padding: 10px 15px;\r\n    text-align: center;\r\n    font-size: 1.2rem;\r\n    display: flex;\r\n    justify-content: center;\r\n    align-items: center;\r\n    border-radius: 6px;\r\n    flex-shrink: 0;\r\n}\r\n\r\n.chat-header img {\r\n    max-height: 30px;\r\n    max-width: 100%;\r\n}\r\n\r\n.chat-messages {\r\n    flex: 1;\r\n    overflow-y: auto;\r\n    padding: 20px;\r\n    margin: 15px 0;\r\n    background: #fff;\r\n    border-radius: 6px;\r\n    display: flex;\r\n    flex-direction: column;\r\n}\r\n\r\n.chat-input-container {\r\n    display: flex;\r\n    gap: 10px;\r\n    flex-shrink: 0;\r\n}\r\n\r\n#message-input {\r\n    flex: 1;\r\n    padding: 10px;\r\n    border: 1px solid #ccc;\r\n    border-radius: 6px;\r\n    font-size: 1rem;\r\n}\r\n\r\n#send-button {\r\n    padding: 10px 20px;\r\n    background-color: #00d084;\r\n    color: white;\r\n    border: none;\r\n    border-radius: 6px;\r\n    cursor: pointer;\r\n    font-weight: bold;\r\n    transition: background-color 0.3s;\r\n}\r\n\r\n#send-button:hover {\r\n    background-color: #00b872;\r\n}\r\n\r\n#send-button:disabled {\r\n    background-color: #ccc;\r\n    cursor: not-allowed;\r\n}\r\n\r\n.message {\r\n    margin-bottom: 10px;\r\n    padding: 8px 12px;\r\n    border-radius: 10px;\r\n    word-wrap: break-word;\r\n    max-width: 75%;\r\n    line-height: 1.3;\r\n}\r\n\r\n.message-user {\r\n    background-color: #120e4c;\r\n    color: white;\r\n    align-self: flex-end;\r\n    margin-left: auto;\r\n}\r\n\r\n.message-bot {\r\n    background-color: #e0e0e0;\r\n    color: #000;\r\n    align-self: flex-start;\r\n    margin-right: auto;\r\n}\r\n\r\n.message-label {\r\n    font-size: 0.75rem;\r\n    font-weight: bold;\r\n    margin-bottom: 4px;\r\n}\r\n\r\n.message-user .message-label {\r\n    color: #ffffff;\r\n}\r\n\r\n.message-bot .message-label {\r\n    color: #120e4c;\r\n}\r\n\r\n.message-content {\r\n    font-size: 0.95rem;\r\n    line-height: 1.4;\r\n}\r\n\r\n.message-content h1,\r\n.message-content h2,\r\n.message-content h3,\r\n.message-content h4,\r\n.message-content h5,\r\n.message-content h6 {\r\n    font-size: 0.95rem !important;\r\n    font-weight: bold !important;\r\n    color: inherit !important;\r\n    margin: 4px 0 !important;\r\n    background: none !important;\r\n    background-color: transparent !important;\r\n    padding: 0 !important;\r\n    border: none !important;\r\n}\r\n\r\n.message-content p {\r\n    margin: 4px 0;\r\n}\r\n\r\n\/* Eliminar cualquier fondo de color que venga del servidor *\/\r\n.message-content * {\r\n    background-image: none !important;\r\n}\r\n\r\n.message-bot .message-content * {\r\n    background-color: transparent !important;\r\n}\r\n\r\n.message-bot .message-content h1,\r\n.message-bot .message-content h2,\r\n.message-bot .message-content h3,\r\n.message-bot .message-content h4,\r\n.message-bot .message-content h5,\r\n.message-bot .message-content h6,\r\n.message-bot .message-content div,\r\n.message-bot .message-content span {\r\n    background: none !important;\r\n    background-color: transparent !important;\r\n    color: #000 !important;\r\n}\r\n\r\n.timestamp {\r\n    font-size: 0.7rem;\r\n    opacity: 0.7;\r\n    margin-top: 5px;\r\n    display: block;\r\n}\r\n\r\n.typing-indicator {\r\n    background-color: #e0e0e0;\r\n    padding: 8px 15px;\r\n    border-radius: 12px;\r\n    margin-bottom: 12px;\r\n    max-width: 60px;\r\n    display: flex;\r\n    gap: 5px;\r\n    align-self: flex-start;\r\n}\r\n\r\n.typing-indicator span {\r\n    height: 8px;\r\n    width: 8px;\r\n    background-color: #9e9ea1;\r\n    display: block;\r\n    border-radius: 50%;\r\n    opacity: 0.4;\r\n    animation: typing 1s infinite;\r\n}\r\n\r\n.typing-indicator span:nth-of-type(2) {\r\n    animation-delay: 0.2s;\r\n}\r\n\r\n.typing-indicator span:nth-of-type(3) {\r\n    animation-delay: 0.4s;\r\n}\r\n\r\n@keyframes typing {\r\n    0%, 100% { opacity: 0.4; }\r\n    50% { opacity: 1; }\r\n}\r\n<\/style>\r\n\r\n<!-- ESTRUCTURA -->\r\n<div class=\"chat-container\">\r\n    <div class=\"chat-header\">\r\n        <img decoding=\"async\" src=\"https:\/\/innovationlab.zalva.net\/wp-content\/uploads\/2025\/05\/Zolvera-Horizontal@4x-1-scaled.png\" alt=\"Zolvera Logo\">\r\n    <\/div>\r\n    <div class=\"chat-messages\" id=\"chat-messages\"><\/div>\r\n    <div class=\"chat-input-container\">\r\n        <input type=\"text\" id=\"message-input\" placeholder=\"Escribe un mensaje...\" autocomplete=\"off\">\r\n        <button id=\"send-button\">Enviar<\/button>\r\n    <\/div>\r\n<\/div>\r\n\r\n<!-- SCRIPT -->\r\n<script>\r\ndocument.addEventListener('DOMContentLoaded', function() {\r\n    const chatMessages = document.getElementById('chat-messages');\r\n    const messageInput = document.getElementById('message-input');\r\n    const sendButton = document.getElementById('send-button');\r\n    const apiUrl = 'https:\/\/bachue.zalva.net\/webhook\/eefcc9a0-0ad3-49aa-a650-1f3c7f56d8db';\r\n\r\n    let sessionId = ([1e7]+-1e3+-4e3+-8e3+-1e11).replace(\/[018]\/g, c =>\r\n        (c ^ crypto.getRandomValues(new Uint8Array(1))[0] & 15 >> c \/ 4).toString(16)\r\n    );\r\n\r\n    let typingIndicator = null;\r\n\r\n    function showTypingIndicator() {\r\n        if (typingIndicator) return;\r\n        typingIndicator = document.createElement('div');\r\n        typingIndicator.className = 'typing-indicator';\r\n        for (let i = 0; i < 3; i++) {\r\n            const dot = document.createElement('span');\r\n            typingIndicator.appendChild(dot);\r\n        }\r\n        chatMessages.appendChild(typingIndicator);\r\n        chatMessages.scrollTop = chatMessages.scrollHeight;\r\n    }\r\n\r\n    function hideTypingIndicator() {\r\n        if (typingIndicator && typingIndicator.parentNode) {\r\n            typingIndicator.parentNode.removeChild(typingIndicator);\r\n            typingIndicator = null;\r\n        }\r\n    }\r\n\r\n    function simulateTyping(message, delay = 1500) {\r\n        return new Promise(resolve => {\r\n            showTypingIndicator();\r\n            const typingTime = Math.min(1000 + message.length * 30, delay);\r\n            setTimeout(() => {\r\n                hideTypingIndicator();\r\n                resolve();\r\n            }, typingTime);\r\n        });\r\n    }\r\n\r\n    function addMessage(content, isUser = false) {\r\n        const messageDiv = document.createElement('div');\r\n        messageDiv.className = 'message ' + (isUser ? 'message-user' : 'message-bot');\r\n        \r\n        const labelDiv = document.createElement('div');\r\n        labelDiv.className = 'message-label';\r\n        labelDiv.textContent = isUser ? 'Yo' : 'Zolvera-IA';\r\n        messageDiv.appendChild(labelDiv);\r\n\r\n        const contentDiv = document.createElement('div');\r\n        contentDiv.className = 'message-content';\r\n        contentDiv.innerHTML = marked.parse(content);\r\n        messageDiv.appendChild(contentDiv);\r\n\r\n        const timestamp = document.createElement('span');\r\n        timestamp.className = 'timestamp';\r\n        timestamp.textContent = new Date().toLocaleTimeString();\r\n        messageDiv.appendChild(timestamp);\r\n\r\n        chatMessages.appendChild(messageDiv);\r\n        chatMessages.scrollTop = chatMessages.scrollHeight;\r\n    }\r\n\r\n    async function sendMessage() {\r\n        const message = messageInput.value.trim();\r\n        if (!message) return;\r\n        addMessage(message, true);\r\n        messageInput.value = '';\r\n        sendButton.disabled = true;\r\n        try {\r\n            const payload = {\r\n                action: \"sendMessage\",\r\n                chatInput: message,\r\n                metadata: { userId: \"\" },\r\n                route: \"general\",\r\n                sessionId\r\n            };\r\n            showTypingIndicator();\r\n            const response = await fetch(apiUrl, {\r\n                method: 'POST',\r\n                headers: {\r\n                    'Content-Type': 'application\/json'\r\n                },\r\n                body: JSON.stringify(payload)\r\n            });\r\n            const data = await response.json();\r\n            hideTypingIndicator();\r\n            if (data.output) {\r\n                await simulateTyping(data.output);\r\n                addMessage(data.output);\r\n            } else {\r\n                addMessage('No se pudo interpretar la respuesta del servidor.');\r\n            }\r\n        } catch (error) {\r\n            hideTypingIndicator();\r\n            addMessage(`Error al comunicarse con el servidor: ${error.message}`);\r\n        } finally {\r\n            sendButton.disabled = false;\r\n            messageInput.focus();\r\n        }\r\n    }\r\n\r\n    sendButton.addEventListener('click', sendMessage);\r\n    messageInput.addEventListener('keypress', function(e) {\r\n        if (e.key === 'Enter') sendMessage();\r\n    });\r\n\r\n    addMessage(\"Te damos la bienvenida al espacio de interacci\u00f3n de Zolvera IA Group. \ud83e\udd16 Aqu\u00ed podr\u00e1s interactuar con una de nuestras herramientas IA para que explores todo su potencial. Para empezar, escribe \\\"Hola\\\".\");\r\n    messageInput.focus();\r\n});\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Enviar<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-1131","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/innovationlab.zalva.net\/index.php\/wp-json\/wp\/v2\/pages\/1131","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/innovationlab.zalva.net\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/innovationlab.zalva.net\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/innovationlab.zalva.net\/index.php\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/innovationlab.zalva.net\/index.php\/wp-json\/wp\/v2\/comments?post=1131"}],"version-history":[{"count":124,"href":"https:\/\/innovationlab.zalva.net\/index.php\/wp-json\/wp\/v2\/pages\/1131\/revisions"}],"predecessor-version":[{"id":1899,"href":"https:\/\/innovationlab.zalva.net\/index.php\/wp-json\/wp\/v2\/pages\/1131\/revisions\/1899"}],"wp:attachment":[{"href":"https:\/\/innovationlab.zalva.net\/index.php\/wp-json\/wp\/v2\/media?parent=1131"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}