<button id="btn-open-mpai" style="padding:.5rem .9rem;border:1px solid #ccc;border-radius:8px;cursor:pointer"> 🤖 Masticationpedia AI </button>
<style>
#mpAI { font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; color:#111827; background:#fff; border:1px solid #e5e7eb; border-radius:12px; padding:12px; }
.mpai-header{display:flex;align-items:center;justify-content:space-between;margin:6px 0 10px}
.mpai-title{font-size:18px;font-weight:700}
.mpai-actions{display:flex;gap:8px}
.mpai-btn{border:1px solid #e5e7eb;background:#fff;padding:.45rem .8rem;border-radius:8px;cursor:pointer}
.mpai-btn:hover{background:#f7f7f7}
.mpai-btn.primary{background:#0a7cff;border-color:#0a7cff;color:#fff}
.mpai-btn.danger{background:#e74c3c;border-color:#e74c3c;color:#fff}
.mpai-chat{display:flex;flex-direction:column;gap:10px;max-height:40vh;overflow:auto;border:1px solid #e5e7eb;border-radius:12px;padding:10px;background:#fff;margin-bottom:10px}
.mpai-msg{border:1px solid #e5e7eb;border-radius:12px;padding:10px;background:#fff}
.mpai-msg.user{border-color:#bee3f8;background:#eff6ff}
.mpai-msg.assistant{border-color:#d1fae5;background:#f0fdf4}
.mpai-msg .role{font-weight:600;margin-bottom:4px}
.mpai-hint{border-style:dashed;color:#6b7280}
.mpai-composer{display:flex;gap:8px;align-items:flex-end}
.mpai-composer textarea{flex:1 1 auto;min-height:80px;border:1px solid #e5e7eb;border-radius:12px;padding:10px}
</style>
<script> (function(){
var panel = document.getElementById('mpAI');
var chatEl = document.getElementById('mpai-chat');
var inputEl = document.getElementById('mpai-input');
function append(role, text){
var d = document.createElement('div');
d.className = 'mpai-msg ' + (role === 'user' ? 'user' : 'assistant');
d.innerHTML = '
' + (role === 'user' ? 'Tu' : 'Assistente') + '
' + '
' + text + '
';
chatEl.appendChild(d); chatEl.scrollTop = chatEl.scrollHeight; }
function sendEcho(){
var t = (inputEl.value || ).trim();
if(!t){ inputEl.focus(); return; }
append('user', t);
inputEl.value = ;
setTimeout(function(){ append('assistant', 'Echo: ' + t); }, 300);
}
// Bind
document.getElementById('btn-open-mpai').addEventListener('click', function(){
panel.style.display = 'block';
});
document.getElementById('mpai-close').addEventListener('click', function(){
panel.style.display = 'none';
});
document.getElementById('mpai-clear').addEventListener('click', function(){
chatEl.innerHTML = '
Conversazione pulita.
';
});
document.getElementById('mpai-send').addEventListener('click', sendEcho);
document.addEventListener('keydown', function(e){
if ((e.metaKey || e.ctrlKey) && e.key === 'Enter' && document.activeElement === inputEl){
e.preventDefault(); sendEcho();
}
});
// espongo per test console window.sendPrompt = sendEcho;
})(); </script>