128 lines
3.8 KiB
HTML
128 lines
3.8 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="de">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>Gott - Debug Console</title>
|
|
<link rel="stylesheet" href="css/theme.css">
|
|
<link rel="stylesheet" href="css/base.css">
|
|
<link rel="stylesheet" href="css/prototype.css">
|
|
</head>
|
|
<body>
|
|
|
|
<aside id="sidebar">
|
|
<div class="sidebar-header">
|
|
<h2>Sessions</h2>
|
|
<button id="newSessionBtn" title="Neue Session">+</button>
|
|
</div>
|
|
<div id="sessionList"></div>
|
|
</aside>
|
|
|
|
<main>
|
|
<header>
|
|
<h1>// gott</h1>
|
|
<select id="model">
|
|
<option value="sonnet">Sonnet 4.6</option>
|
|
<option value="opus">Opus 4.6</option>
|
|
</select>
|
|
<button class="clear-btn" id="clearBtn">Archivieren</button>
|
|
<div class="toggle">
|
|
<input type="checkbox" id="showSystem">
|
|
<label for="showSystem">System Prompt</label>
|
|
</div>
|
|
</header>
|
|
|
|
<textarea id="systemPrompt" placeholder="System Prompt (SOUL.md Inhalt etc.)"></textarea>
|
|
<div class="meta-bar" id="meta"></div>
|
|
<div id="chat"></div>
|
|
|
|
<div class="input-area">
|
|
<textarea id="input" placeholder="Nachricht eingeben... (Ctrl+Enter)" rows="2"></textarea>
|
|
<button id="send">Senden</button>
|
|
</div>
|
|
</main>
|
|
|
|
<script src="js/ui.js"></script>
|
|
<script src="js/api.js"></script>
|
|
<script src="js/session.js"></script>
|
|
<script src="js/chat.js"></script>
|
|
<script src="js/history.js"></script>
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', async () => {
|
|
// Session aus localStorage oder neue erstellen
|
|
const stored = localStorage.getItem('sessionId');
|
|
if (stored) {
|
|
currentSessionId = stored;
|
|
} else {
|
|
const session = await apiCreateSession();
|
|
currentSessionId = session.sessionId;
|
|
localStorage.setItem('sessionId', currentSessionId);
|
|
}
|
|
|
|
$('#showSystem').addEventListener('change', () => {
|
|
$('#systemPrompt').classList.toggle('visible', $('#showSystem').checked);
|
|
});
|
|
|
|
$('#send').addEventListener('click', sendMessage);
|
|
$('#clearBtn').addEventListener('click', clearChat);
|
|
$('#newSessionBtn').addEventListener('click', async () => {
|
|
const session = await apiCreateSession();
|
|
currentSessionId = session.sessionId;
|
|
localStorage.setItem('sessionId', currentSessionId);
|
|
messages.length = 0;
|
|
chatEl().innerHTML = '';
|
|
lastKnownMessageId = 0;
|
|
loadedArchiveCount = 0;
|
|
setMeta('');
|
|
await refreshSessionList();
|
|
await loadHistory();
|
|
});
|
|
|
|
$('#input').addEventListener('keydown', (e) => {
|
|
if (e.ctrlKey && e.key === 'Enter') sendMessage();
|
|
});
|
|
|
|
$('#input').addEventListener('input', function () {
|
|
this.style.height = 'auto';
|
|
this.style.height = Math.min(this.scrollHeight, 150) + 'px';
|
|
});
|
|
|
|
await refreshSessionList();
|
|
await loadHistory();
|
|
});
|
|
|
|
async function refreshSessionList() {
|
|
const sessions = await apiGetSessions();
|
|
const list = $('#sessionList');
|
|
list.innerHTML = '';
|
|
for (const s of sessions) {
|
|
const div = document.createElement('div');
|
|
div.className = 'session-item' + (s.sessionId === currentSessionId ? ' active' : '');
|
|
const name = document.createElement('span');
|
|
name.className = 'session-name';
|
|
name.textContent = s.name || 'Unbenannt';
|
|
const date = document.createElement('span');
|
|
date.className = 'session-date';
|
|
date.textContent = new Date(s.updatedAt).toLocaleString('de-AT', {
|
|
day: '2-digit', month: '2-digit', hour: '2-digit', minute: '2-digit'
|
|
});
|
|
div.appendChild(name);
|
|
div.appendChild(date);
|
|
div.addEventListener('click', async () => {
|
|
currentSessionId = s.sessionId;
|
|
localStorage.setItem('sessionId', currentSessionId);
|
|
messages.length = 0;
|
|
chatEl().innerHTML = '';
|
|
lastKnownMessageId = 0;
|
|
loadedArchiveCount = 0;
|
|
setMeta('');
|
|
await refreshSessionList();
|
|
await loadHistory();
|
|
});
|
|
list.appendChild(div);
|
|
}
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|