Update index.html

index.html

@@ -122,6 +122,38 @@ footer{padding:10px 16px;font-size:11px;color:var(--muted);border-top:1px solid
   display:flex;gap:8px 16px;flex-wrap:wrap;justify-content:center;text-align:center}
 footer a{color:var(--accent);text-decoration:none}
 
+
+/* --- Editor interactivo de agente --- */
+.contact{cursor:pointer}
+#agent-modal{display:none;position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:10;
+  align-items:center;justify-content:center;padding:16px}
+#agent-modal.open{display:flex}
+#agent-modal .card{width:100%;max-width:420px;max-height:90vh;overflow-y:auto;background:var(--surface);
+  border:1px solid var(--border);border-radius:12px;padding:16px;box-shadow:0 8px 24px rgba(0,0,0,.4)}
+#agent-modal h3{margin:0 0 4px;font-size:16px;color:var(--text)}
+#agent-modal .hint{font-size:12px;color:var(--muted);margin-bottom:4px}
+#agent-modal label{display:block;font-size:12px;color:var(--muted);margin:10px 0 4px}
+#agent-modal input,#agent-modal textarea{width:100%;background:var(--input);color:var(--text);
+  border:1px solid var(--border);border-radius:8px;padding:9px 12px;font-size:14px;font-family:inherit;outline:none}
+#agent-modal input:focus,#agent-modal textarea:focus{border-color:var(--accent)}
+#agent-modal textarea{min-height:110px;resize:vertical}
+#agent-modal .row{display:flex;gap:10px}
+#agent-modal .row>div{flex:1;min-width:0}
+#agent-emoji{text-align:center}
+#agent-color{padding:4px;height:41px;cursor:pointer}
+#agent-modal .btns{display:flex;gap:10px;margin-top:14px;justify-content:flex-end}
+#agent-save{background:var(--accent);border:none;color:#fff;border-radius:999px;padding:10px 18px;cursor:pointer;font-weight:600}
+#agent-cancel{background:transparent;border:1px solid var(--border);color:var(--muted);border-radius:999px;
+  padding:10px 18px;cursor:pointer;font-weight:600}
+
+
+.add-av{background:transparent !important;border:2px dashed var(--border);color:var(--muted);
+  font-size:22px;font-weight:400;box-shadow:none !important}
+.add-contact:hover .add-av{border-color:var(--accent);color:var(--accent)}
+.add-contact:hover .c-name{color:var(--accent)}
+#agent-delete{background:transparent;border:1px solid #ea0038;color:#ea0038;border-radius:999px;
+  padding:10px 18px;cursor:pointer;font-weight:600;margin-right:auto}
+
 @media (max-width:760px){
   #app{flex-direction:column;max-width:none}
   #sidebar{width:100%;flex:none;border-right:none;border-bottom:1px solid var(--border)}
@@ -191,6 +223,25 @@ footer a{color:var(--accent);text-decoration:none}
   </div>
 </div>
 
+
+<div id="agent-modal">
+  <div class="card">
+    <h3 id="agent-modal-title">Editar agente</h3>
+    <div class="hint">Cambia su nombre y sus cualidades; se aplica al instante en esta sesión, igual que los Ajustes.</div>
+    <div class="row">
+      <div style="flex:2"><label>Nombre</label><input id="agent-name"></div>
+      <div><label>Avatar (emoji)</label><input id="agent-emoji" maxlength="4"></div>
+      <div><label>Color</label><input id="agent-color" type="color"></div>
+    </div>
+    <label>Cualidades (personalidad e instrucciones)</label>
+    <textarea id="agent-system" spellcheck="false" placeholder="Ej.: Eres Dora, la optimista del grupo. Ves oportunidades en cada idea y animas al grupo a probar."></textarea>
+    <div class="btns">
+      <button id="agent-cancel">Cancelar</button>
+      <button id="agent-save">Guardar</button>
+    </div>
+  </div>
+</div>
+
 <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
 <script type="module">
 import { Wllama } from 'https://cdn.jsdelivr.net/npm/@wllama/wllama@3.5.1/esm/index.js';
@@ -261,10 +312,12 @@ function roleOf(agent) {
 }
 function renderContacts() {
   contactsEl.innerHTML = '';
-  agents.forEach(a => {
+  agents.forEach((a, i) => {
     const c = document.createElement('div');
     c.className = 'contact';
     c.dataset.name = a.name;
+    c.title = 'Editar agente';
+    c.addEventListener('click', () => openAgentEditor(i));
     const av = document.createElement('div');
     av.className = 'c-avatar';
     av.style.background = avatarBg(a.color);
@@ -282,6 +335,13 @@ function renderContacts() {
     c.appendChild(av); c.appendChild(info); c.appendChild(dot);
     contactsEl.appendChild(c);
   });
+  const add = document.createElement('div');
+  add.className = 'contact add-contact';
+  add.title = 'A\u00f1adir agente';
+  add.innerHTML = '<div class="c-avatar add-av">+</div><div class="c-info">' +
+    '<div class="c-name">A\u00f1adir agente</div><div class="c-role">Nuevo participante</div></div>';
+  add.addEventListener('click', () => openAgentEditor(-1));
+  contactsEl.appendChild(add);
   document.getElementById('side-count').textContent = `(${agents.length})`;
   subtitleEl.textContent = agents.map(a => a.name).join(', ') + ', T\u00fa';
 }
@@ -294,6 +354,49 @@ function markActive(name) {
     else if (rl.dataset.orig) { rl.textContent = rl.dataset.orig; delete rl.dataset.orig; }
   });
 }
+
+// --- Editor interactivo de agentes (editar, a\u00f1adir, quitar) ---
+const agentModal = document.getElementById('agent-modal');
+const deleteBtn = document.getElementById('agent-delete');
+let editingAgent = -1;
+function openAgentEditor(i) {
+  editingAgent = i;
+  const a = agents[i] || {};
+  document.getElementById('agent-modal-title').textContent = i >= 0 ? 'Editar agente' : 'A\u00f1adir agente';
+  deleteBtn.style.display = i >= 0 ? 'inline-block' : 'none';
+  document.getElementById('agent-name').value = a.name || '';
+  document.getElementById('agent-emoji').value = a.emoji || '\u{1F916}';
+  document.getElementById('agent-color').value = /^#[0-9a-fA-F]{6}$/.test(a.color || '') ? a.color : '#bf5af2';
+  document.getElementById('agent-system').value = a.system || '';
+  agentModal.classList.add('open');
+  document.getElementById('agent-name').focus();
+}
+document.getElementById('agent-cancel').addEventListener('click', () => agentModal.classList.remove('open'));
+agentModal.addEventListener('click', e => { if (e.target === agentModal) agentModal.classList.remove('open'); });
+deleteBtn.addEventListener('click', () => {
+  const a = agents[editingAgent];
+  if (!a) return;
+  if (agents.length <= 2) { alert('Se necesitan al menos 2 agentes.'); return; }
+  if (!confirm(`\u00bfEliminar a ${a.name} del debate?`)) return;
+  agents.splice(editingAgent, 1);
+  renderContacts();
+  agentModal.classList.remove('open');
+  setStatus(`Agente eliminado: ${a.name}. Quedan ${agents.length}.`);
+});
+document.getElementById('agent-save').addEventListener('click', () => {
+  const name = document.getElementById('agent-name').value.trim();
+  if (!name) { alert('El nombre no puede estar vac\u00edo.'); return; }
+  const emoji = document.getElementById('agent-emoji').value.trim() || '\u{1F916}';
+  const color = document.getElementById('agent-color').value;
+  const system = document.getElementById('agent-system').value.trim();
+  if (!system) { alert('Describe las cualidades del agente.'); return; }
+  if (editingAgent >= 0) agents[editingAgent] = { name, emoji, color, system };
+  else agents.push({ name, emoji, color, system });
+  renderContacts();
+  agentModal.classList.remove('open');
+  setStatus(editingAgent >= 0 ? `Agente actualizado: ${name}.` : `Agente a\u00f1adido: ${name}. Ya son ${agents.length}.`);
+});
+
 renderContacts();
 
 function addMsg(agent, isUser = false) {