Questa è una vecchia versione del documento!
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chatbot Medico - Atresia Biliare</title>
<script src="https://cdn.tailwindcss.com"></script>
<style>
.message-enter {
animation: messageSlideIn 0.3s ease-out;
}
@keyframes messageSlideIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
.typing-indicator {
animation: pulse 1.5s ease-in-out infinite;
}
@keyframes pulse {
0%, 100% { opacity: 0.4; }
50% { opacity: 1; }
}
</style>
</head> <body class=“bg-gray-50 h-screen flex flex-col”>
<!-- Header -->
<div class="bg-white border-b shadow-sm px-4 py-3 flex-shrink-0">
<div class="flex items-center space-x-3">
<div class="bg-blue-100 p-2 rounded-full">
<svg class="h-6 w-6 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"/>
</svg>
</div>
<div>
<h1 class="text-lg font-semibold text-gray-900">Assistant Medico Specializzato</h1>
<p class="text-sm text-gray-600 flex items-center">
<svg class="h-4 w-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
</svg>
Fonte: "Biliary Atresia: Multidisciplinary Approach" - Columbia University
</p>
</div>
</div>
</div>
<!-- Messages Container -->
<div id="messages-container" class="flex-1 overflow-y-auto p-4 space-y-4">
<!-- Messages will be inserted here -->
</div>
<!-- Quick Questions (shown initially) -->
<div id="quick-questions" class="px-4 pb-2">
<div class="bg-white border rounded-lg p-4">
<h3 class="text-sm font-semibold text-gray-700 mb-2 flex items-center">
<svg class="h-4 w-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
</svg>
Domande rapide:
</h3>
<div class="flex flex-wrap gap-2">
<button onclick="askQuestion('Qual è l\'incidenza dell\'atresia biliare?')" class="quick-btn">Qual è l'incidenza dell'atresia biliare?</button>
<button onclick="askQuestion('Quali sono i sintomi principali?')" class="quick-btn">Quali sono i sintomi principali?</button>
<button onclick="askQuestion('Quando si deve fare la procedura di Kasai?')" class="quick-btn">Quando si deve fare la procedura di Kasai?</button>
<button onclick="askQuestion('Qual è la prognosi a lungo termine?')" class="quick-btn">Qual è la prognosi a lungo termine?</button>
<button onclick="askQuestion('Come si fa la diagnosi?')" class="quick-btn">Come si fa la diagnosi?</button>
<button onclick="askQuestion('Quali sono le complicanze del Kasai?')" class="quick-btn">Quali sono le complicanze del Kasai?</button>
<button onclick="askQuestion('Quando è indicato il trapianto?')" class="quick-btn">Quando è indicato il trapianto?</button>
<button onclick="askQuestion('Cos\'è la sindrome BASM?')" class="quick-btn">Cos'è la sindrome BASM?</button>
</div>
</div>
</div>
<!-- Input Area -->
<div class="bg-white border-t p-4 flex-shrink-0">
<div class="flex space-x-2">
<textarea
id="message-input"
placeholder="Chiedi qualcosa sull'atresia biliare... (es: 'Quali sono i sintomi?' o 'Quando fare il Kasai?')"
class="flex-1 px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent resize-none"
rows="2"
onkeydown="handleKeyPress(event)"
></textarea>
<button
id="send-button"
onclick="sendMessage()"
class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-colors flex items-center"
>
<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8"/>
</svg>
</button>
</div>
<div class="mt-2 text-xs text-gray-500 flex items-center">
<svg class="h-3 w-3 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
</svg>
Le risposte sono basate esclusivamente sul documento fonte fornito
</div>
</div>
<style>
.quick-btn {
@apply text-xs bg-blue-50 hover:bg-blue-100 text-blue-700 px-2 py-1 rounded border transition-colors cursor-pointer;
}
</style>
<script>
// Knowledge Base dal documento
const knowledgeBase = {
'incidenza': {
keywords: ['incidenza', 'epidemiologia', 'frequenza', 'casi', 'nascite'],
response: 'Secondo il documento, l\'incidenza dell\'atresia biliare è di 5-6 casi per 100.000 nascite vive in Europa e USA. Tuttavia, c\'è una significativa variabilità geografica: in Polinesia Francese l\'incidenza raggiunge 32 per 100.000 nascite vive, suggerendo possibili fattori genetici o ambientali specifici.'
},
'definizione': {
keywords: ['cos\'è', 'definizione', 'cosa significa', 'che cos\'è'],
response: 'L\'atresia biliare è una malattia colestatica progressiva che colpisce neonati e lattanti, caratterizzata da infiammazione e ostruzione dei dotti biliari extraepatici. È la principale indicazione per il trapianto di fegato nei bambini piccoli. Se non trattata, è universalmente fatale entro i primi 2 anni di vita.'
},
'prognosi': {
keywords: ['prognosi', 'sopravvivenza', 'esiti', 'outcome', 'mortalità'],
response: 'La prognosi dipende da diversi fattori. Con il fegato nativo, la sopravvivenza a 10 anni è del 30-50%. Tuttavia, considerando anche i trapianti, la sopravvivenza globale supera il 90%. I fattori prognostici favorevoli includono: età al Kasai <60 giorni, clearance dell\'ittero entro 3-6 mesi, assenza di colangite ricorrente, e forma non sindromica.'
},
'classificazione': {
keywords: ['tipi', 'classificazione', 'forme', 'categorie'],
response: 'Il documento descrive due classificazioni principali:\\n\\n1) **Classificazione clinica:**\\n- Forma embrionale/fetale (10-20%): associata a malformazioni multiple (sindrome BASM)\\n- Forma perinatale/postnatale (80-90%): generalmente isolata\\n\\n2) **Classificazione anatomica di Kasai:**\\n- Tipo I (5%): atresia del dotto biliare comune distale\\n- Tipo II (2%): atresia del dotto epatico comune\\n- Tipo III (93%): atresia coinvolgente i dotti epatici destro e sinistro'
},
'sintomi': {
keywords: ['sintomi', 'segni', 'clinica', 'presentazione', 'manifestazioni'],
response: 'I segni clinici tipici dell\'atresia biliare includono:\\n- **Ittero prolungato** che persiste oltre le prime 2-3 settimane di vita\\n- **Feci acoliche o ipocoliche** (chiare, color argilla)\\n- **Urine ipercromiche** (scure)\\n- **Epatomegalia** alla palpazione\\n- **Crescita normale** nelle prime settimane (importante per la diagnosi differenziale)\\n\\nLa combinazione di ittero persistente + feci acoliche è altamente suggestiva.'
},
'diagnosi': {
keywords: ['diagnosi', 'come diagnosticare', 'esami', 'test'],
response: 'La diagnosi si basa su un approccio multimodale:\\n\\n**Laboratorio:** Bilirubina diretta >50% del totale, ALT/AST moderatamente elevate, fosfatasi alcalina e GGT marcatamente elevate.\\n\\n**Imaging:** Ecografia con "triangular cord sign" (specificità alta, sensibilità 57-85%) e cistifellea piccola/contratta.\\n\\n**Istologia:** Biopsia epatica con reazione duttulare marcata, fibrosi portale, tappi biliari intraepatici. Score ≥6/9 altamente suggestivo.\\n\\n**Conferma:** Laparoscopia con colangiografia per visualizzazione diretta dell\'albero biliare.'
},
'kasai': {
keywords: ['kasai', 'portoenterostomia', 'chirurgia', 'intervento', 'operazione'],
response: 'La procedura di Kasai (portoenterostomia) è il trattamento standard:\\n\\n**Timing critico:** Ideale <45 giorni di vita, accettabile 45-60 giorni, limite assoluto 90-120 giorni. Ogni giorno di ritardo peggiora la prognosi.\\n\\n**Tecnica:** Approccio con laparotomia sottocostale, resezione del tessuto fibrotico della porta hepatis, anastomosi Roux-en-Y epatico-digiunale.\\n\\n**Successo:** Definito come clearance dell\'ittero (bilirubina <2 mg/dL) entro 3-6 mesi e ritorno delle feci a colorazione normale.\\n\\n**Fattori prognostici:** Dimensioni dei dotti residui >150-200 μm, assenza di fibrosi completa.'
},
'trapianto': {
keywords: ['trapianto', 'transplant', 'fallimento kasai', 'peld'],
response: 'Il trapianto di fegato è indicato in caso di:\\n- **Fallimento primario** della procedura di Kasai\\n- **Deterioramento della funzione epatica** nonostante successo iniziale del Kasai\\n- **PELD Score >15-20** (pediatric end-stage liver disease)\\n- **Complicanze della cirrosi:** ascite refrattaria, encefalopatia epatica\\n- **Qualità di vita compromessa**\\n\\nL\'atresia biliare rimane la principale indicazione per trapianto epatico nei bambini piccoli. La sopravvivenza post-trapianto è eccellente (>90%) con buona qualità di vita.'
},
'sindrome basm': {
keywords: ['basm', 'sindromica', 'malformazioni', 'situs inversus'],
response: 'La sindrome BASM è presente nel 10-20% dei casi di atresia biliare e include:\\n- **Situs inversus o eterotassia**\\n- **Malformazioni cardiache**\\n- **Anomalie spleniche** (asplenia o polisplenia)\\n- **Malrotazione intestinale**\\n\\nLa presenza della sindrome BASM è associata a una prognosi generalmente peggiore rispetto alla forma isolata di atresia biliare. È importante il riconoscimento precoce per la gestione multidisciplinare.'
}
};
let messages = [];
function findBestResponse(userInput) {
const input = userInput.toLowerCase();
let bestMatch = null;
let bestScore = 0;
Object.entries(knowledgeBase).forEach(([key, data]) => {
let score = 0;
data.keywords.forEach(keyword => {
if (input.includes(keyword)) {
score += keyword.length;
}
});
if (score > bestScore) {
bestScore = score;
bestMatch = data.response;
}
});
if (!bestMatch) {
if (input.includes('età') || input.includes('bambini') || input.includes('neonati')) {
return 'L\'atresia biliare colpisce neonati e lattanti. Il timing è critico: la diagnosi e il trattamento devono avvenire idealmente entro 45 giorni di vita per ottimizzare i risultati. Oltre i 90-120 giorni, i risultati della procedura di Kasai peggiorano significativamente.';
}
if (input.includes('mortalità') || input.includes('morte') || input.includes('fatale')) {
return 'Secondo il documento, se non trattata, l\'atresia biliare è universalmente fatale entro i primi 2 anni di vita. Tuttavia, con il trattamento appropriato (Kasai ± trapianto), la sopravvivenza globale supera il 90%.';
}
return 'Mi dispiace, non ho trovato informazioni specifiche su questo argomento nel documento fonte. Le mie conoscenze si limitano esclusivamente al contenuto del paper "Biliary Atresia: A Multidisciplinary Approach to Diagnosis and Management" della Columbia University. Potresti riformulare la domanda usando termini come: incidenza, sintomi, diagnosi, kasai, trapianto, prognosi, complicanze?';
}
return bestMatch;
}
function addMessage(type, content) {
const timestamp = new Date();
messages.push({ type, content, timestamp });
renderMessages();
scrollToBottom();
}
function renderMessages() {
const container = document.getElementById('messages-container');
container.innerHTML = '';
messages.forEach((message, index) => {
const messageDiv = document.createElement('div');
messageDiv.className = `flex ${message.type === 'user' ? 'justify-end' : 'justify-start'} message-enter`;
messageDiv.innerHTML = `
<div class="flex space-x-2 max-w-4xl ${message.type === 'user' ? 'flex-row-reverse space-x-reverse' : ''}">
<div class="flex-shrink-0 ${message.type === 'user' ? 'bg-blue-100' : 'bg-gray-100'} p-2 rounded-full">
${message.type === 'user' ?
'<svg class="h-4 w-4 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/></svg>' :
'<svg class="h-4 w-4 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"/></svg>'
}
</div>
<div class="px-4 py-2 rounded-lg ${message.type === 'user' ? 'bg-blue-600 text-white' : 'bg-white border shadow-sm text-gray-800'}">
<div class="whitespace-pre-wrap text-sm">${message.content.replace(/\\n/g, '\n')}</div>
<div class="text-xs mt-1 ${message.type === 'user' ? 'text-blue-200' : 'text-gray-500'}">
${message.timestamp.toLocaleTimeString('it-IT', { hour: '2-digit', minute: '2-digit' })}
</div>
</div>
</div>
`;
container.appendChild(messageDiv);
});
}
function scrollToBottom() {
const container = document.getElementById('messages-container');
container.scrollTop = container.scrollHeight;
}
function sendMessage() {
const input = document.getElementById('message-input');
const value = input.value.trim();
if (!value) return;
// Hide quick questions after first message
if (messages.length === 0) {
document.getElementById('quick-questions').style.display = 'none';
}
addMessage('user', value);
input.value = '';
// Show typing indicator
showTypingIndicator();
// Simulate bot response delay
setTimeout(() => {
hideTypingIndicator();
const response = findBestResponse(value);
addMessage('bot', response);
}, 1000 + Math.random() * 1000);
}
function askQuestion(question) {
document.getElementById('message-input').value = question;
sendMessage();
}
function handleKeyPress(event) {
if (event.key === 'Enter' && !event.shiftKey) {
event.preventDefault();
sendMessage();
}
}
function showTypingIndicator() {
const container = document.getElementById('messages-container');
const typingDiv = document.createElement('div');
typingDiv.id = 'typing-indicator';
typingDiv.className = 'flex justify-start';
typingDiv.innerHTML = `
<div class="flex space-x-2 max-w-4xl">
<div class="bg-gray-100 p-2 rounded-full">
<svg class="h-4 w-4 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"/>
</svg>
</div>
<div class="bg-white border shadow-sm px-4 py-2 rounded-lg">
<div class="flex space-x-1">
<div class="w-2 h-2 bg-gray-400 rounded-full typing-indicator" style="animation-delay: 0s"></div>
<div class="w-2 h-2 bg-gray-400 rounded-full typing-indicator" style="animation-delay: 0.1s"></div>
<div class="w-2 h-2 bg-gray-400 rounded-full typing-indicator" style="animation-delay: 0.2s"></div>
</div>
</div>
</div>
`;
container.appendChild(typingDiv);
scrollToBottom();
}
function hideTypingIndicator() {
const indicator = document.getElementById('typing-indicator');
if (indicator) {
indicator.remove();
}
}
// Initialize with welcome message
window.onload = function() {
addMessage('bot', 'Ciao! Sono il tuo assistente specializzato in Atresia Biliare. Le mie risposte si basano esclusivamente sul documento "Biliary Atresia: A Multidisciplinary Approach to Diagnosis and Management" di Columbia University. Cosa vorresti sapere?');
};
</script>
</body> </html>