Dashboard Masticationpedia

 <button id="btn-open-mpai" style="padding:.5rem .9rem;border:1px solid #ccc;border-radius:8px;cursor:pointer">
   🤖 Masticationpedia AI
 </button>

🤖 Masticationpedia AI — test minimo

     <button id="mpai-close" class="mpai-btn">Chiudi</button>
     <button id="mpai-clear" class="mpai-btn danger">Pulisci</button>

Pannello aperto ✔️. Scrivi sotto e premi Invia (risponde con un “echo” locale).

   <textarea id="mpai-input" rows="3" placeholder="Scrivi qui la tua domanda..."></textarea>
   <button id="mpai-send" class="mpai-btn primary">Invia</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 = ;
   // Risposta finta (solo per test UI, niente server)
   setTimeout(function(){
     append('assistant', 'Echo: ' + t);
   }, 300);
 }

 // Espongo solo per test da console
 window.sendPrompt = sendEcho;

 // 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();
   }
 });

})(); </script>