gott/wwwroot/js/pages/session-page.js

// ── Session Page ──

registerPage('session', {
  async init(params) {
    const sessionId = params.id;
    if (!sessionId) return navigateTo('dashboard');

    currentSessionId = sessionId;

    // Session laden
    const session = await apiGetSession(sessionId);
    const titleEl = document.getElementById('sessionTitle');
    if (session && titleEl) {
      titleEl.textContent = session.name || 'Unbenannt';
      titleEl.addEventListener('dblclick', () => editTitle(sessionId, titleEl));
    }

    // Agent-Auswahl laden
    const agentSelect = document.getElementById('agentSelect');
    const sendBtn = document.getElementById('send');
    const inputEl = document.getElementById('input');

    if (agentSelect) {
      const agents = await apiGetAgents();
      agentSelect.innerHTML = '<option value="">-- Agent wählen --</option>';
      for (const a of agents) {
        const opt = document.createElement('option');
        opt.value = a.agentId;
        opt.textContent = `${a.name} (${a.model})`;
        agentSelect.appendChild(opt);
      }

      // Gespeicherten Agent setzen
      if (session && session.agentId) {
        agentSelect.value = session.agentId;
      }

      // Agent-Wechsel speichern
      agentSelect.addEventListener('change', async () => {
        const val = agentSelect.value || null;
        await apiUpdateSession(sessionId, { agentId: val });
        updateSendState();
      });
    }

    // Send-Button State
    function updateSendState() {
      const hasAgent = agentSelect && agentSelect.value;
      if (sendBtn) sendBtn.disabled = !hasAgent;
      if (inputEl) inputEl.disabled = !hasAgent;
    }
    updateSendState();

    // System Prompt Toggle
    const showSystem = document.getElementById('showSystem');
    const systemPrompt = document.getElementById('systemPrompt');
    if (showSystem && systemPrompt) {
      showSystem.addEventListener('change', () => {
        systemPrompt.classList.toggle('visible', showSystem.checked);
      });
    }

    // Send
    if (sendBtn) sendBtn.addEventListener('click', sendMessage);

    // Ctrl+Enter
    if (inputEl) {
      inputEl.addEventListener('keydown', (e) => {
        if (e.ctrlKey && e.key === 'Enter') sendMessage();
      });
      inputEl.addEventListener('input', function () {
        this.style.height = 'auto';
        this.style.height = Math.min(this.scrollHeight, 150) + 'px';
      });
    }

    // Archivieren
    const archiveBtn = document.getElementById('archiveBtn');
    if (archiveBtn) archiveBtn.addEventListener('click', clearChat);

    // State zurücksetzen und History laden
    messages.length = 0;
    lastKnownMessageId = 0;
    loadedArchiveCount = 0;
    isStreaming = false;

    await loadHistory();
  },

  destroy() {
    stopHistoryPolling();
    messages.length = 0;
    lastKnownMessageId = 0;
    loadedArchiveCount = 0;
    isStreaming = false;
  }
});

function editTitle(sessionId, titleEl) {
  const input = document.createElement('input');
  input.type = 'text';
  input.className = 'session-rename';
  input.value = titleEl.textContent;

  titleEl.replaceWith(input);
  input.focus();
  input.select();

  const save = async () => {
    const newName = input.value.trim();
    if (newName) {
      await apiUpdateSession(sessionId, { name: newName });
      const newTitle = document.createElement('h1');
      newTitle.id = 'sessionTitle';
      newTitle.className = 'editable-title';
      newTitle.textContent = newName;
      newTitle.addEventListener('dblclick', () => editTitle(sessionId, newTitle));
      input.replaceWith(newTitle);
    } else {
      input.replaceWith(titleEl);
    }
  };

  input.addEventListener('blur', save);
  input.addEventListener('keydown', (e) => {
    if (e.key === 'Enter') input.blur();
    if (e.key === 'Escape') { input.replaceWith(titleEl); }
  });
}