📋 Como Integrar no Moodle
Passo 1: Adicionar HTML no Moodle
No editor de texto do Moodle, adicione o seguinte código HTML:
<!-- Código para adicionar no HTML adicional do Moodle -->
<div id="darcy-widget-container" style="width: 100%; height: 600px; border: 1px solid #ddd; border-radius: 8px; overflow: hidden;">
<iframe
id="darcy-iframe"
src="https://seu-projeto.supabase.co/functions/v1/iframe-widget"
width="100%"
height="100%"
frameborder="0"
allow="microphone; camera"
sandbox="allow-scripts allow-same-origin allow-forms allow-popups allow-modals"
title="Darcy - Tutor IA UnB"
onload="console.log('[DARCY DEBUG] Iframe carregado com sucesso');"
onerror="console.error('[DARCY ERROR] Erro ao carregar iframe');">
<p>Seu navegador não suporta iframes. <a href="https://seu-projeto.supabase.co/functions/v1/iframe-widget">Clique aqui para acessar o Darcy</a></p>
</iframe>
</div>
<script>
(function() {
'use strict';
console.log('[DARCY DEBUG] Iniciando sistema de comunicação iframe');
// Função para validar se um elemento é um Node válido
function isValidNode(element) {
return element &&
element.nodeType !== undefined &&
typeof element.addEventListener === 'function';
}
// Função para aguardar elemento estar disponível
function waitForElement(selector, timeout = 10000) {
return new Promise((resolve, reject) => {
const startTime = Date.now();
function checkElement() {
const element = document.querySelector(selector);
if (element && isValidNode(element)) {
console.log('[DARCY DEBUG] Elemento encontrado:', selector);
resolve(element);
return;
}
if (Date.now() - startTime > timeout) {
console.error('[DARCY ERROR] Timeout aguardando elemento:', selector);
reject(new Error('Timeout aguardando elemento: ' + selector));
return;
}
setTimeout(checkElement, 100);
}
checkElement();
});
}
// MutationObserver com validação robusta
function setupMutationObserver() {
try {
console.log('[DARCY DEBUG] Configurando MutationObserver');
// Aguardar o DOM estar pronto
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', setupMutationObserver);
return;
}
const targetNode = document.body || document.documentElement;
if (!isValidNode(targetNode)) {
console.error('[DARCY ERROR] Target node inválido para MutationObserver:', targetNode);
return;
}
const observer = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation) {
if (mutation.type === 'childList') {
mutation.addedNodes.forEach(function(node) {
if (isValidNode(node) && node.id === 'darcy-iframe') {
console.log('[DARCY DEBUG] Iframe Darcy detectado via MutationObserver');
}
});
}
});
});
observer.observe(targetNode, {
childList: true,
subtree: true
});
console.log('[DARCY DEBUG] MutationObserver configurado com sucesso');
} catch (error) {
console.error('[DARCY ERROR] Erro ao configurar MutationObserver:', error);
}
}
// Comunicação com o iframe para ajuste automático de altura
window.addEventListener('message', function(event) {
try {
console.log('[DARCY DEBUG] Mensagem recebida:', event.data);
// Validar origem da mensagem (adicione sua URL do Supabase aqui)
const allowedOrigins = [
'https://seu-projeto.supabase.co',
'http://localhost:54321', // Para desenvolvimento local
window.location.origin // Para testes locais
];
if (!allowedOrigins.includes(event.origin)) {
console.warn('[DARCY WARNING] Mensagem de origem não confiável:', event.origin);
return;
}
if (event.data.type === 'DARCY_READY' || event.data.type === 'DARCY_SIZE_UPDATE') {
waitForElement('#darcy-widget-container iframe')
.then(function(iframe) {
if (event.data.height) {
const newHeight = Math.max(event.data.height, 400) + 'px';
iframe.style.height = newHeight;
console.log('[DARCY DEBUG] Altura do iframe ajustada para:', newHeight);
}
})
.catch(function(error) {
console.error('[DARCY ERROR] Erro ao ajustar altura do iframe:', error);
});
}
} catch (error) {
console.error('[DARCY ERROR] Erro no handler de mensagens:', error);
}
});
// Verificar compatibilidade do navegador
function checkBrowserCompatibility() {
const features = {
'MutationObserver': typeof MutationObserver !== 'undefined',
'postMessage': typeof window.postMessage === 'function',
'addEventListener': typeof window.addEventListener === 'function',
'querySelector': typeof document.querySelector === 'function'
};
console.log('[DARCY DEBUG] Compatibilidade do navegador:', features);
const unsupported = Object.keys(features).filter(key => !features[key]);
if (unsupported.length > 0) {
console.error('[DARCY ERROR] Recursos não suportados:', unsupported);
}
return unsupported.length === 0;
}
// Inicialização
if (checkBrowserCompatibility()) {
setupMutationObserver();
console.log('[DARCY DEBUG] Sistema inicializado com sucesso');
} else {
console.error('[DARCY ERROR] Navegador não compatível');
}
})();
</script>
⚠️ Importante
Substitua seu-projeto.supabase.co pela URL real do seu projeto Supabase.
🛠️ Configurações Avançadas
Personalização via Parâmetros de URL
Você pode personalizar o widget adicionando parâmetros à URL:
<!-- Exemplo com parâmetros personalizados -->
<iframe
src="https://seu-projeto.supabase.co/functions/v1/iframe-widget?theme=dark&university=UnB&course=Matemática"
width="100%"
height="600px"
frameborder="0">
</iframe>
Parâmetros Disponíveis:
theme - Tema do widget (light, dark)university - Nome da universidadecourse - Nome do cursolanguage - Idioma (pt-BR, en-US)