HERZLOSE TRÄNEN · SI-INTERFACE
SI
Synthetische Intelligenz · Archiv-Analyse
BEREIT
✦
Archiv geladen. SI wartet.
Füge Dokumente hinzu. Aktiviere sie für SI.
Dann frage — und SI antwortet mit dem Material.
Dann frage — und SI antwortet mit dem Material.
${doc.name}
`;
item.addEventListener('click', (e) => {
if (!e.target.classList.contains('doc-remove')) {
toggleDocumentActive(doc.id);
}
});
docList.appendChild(item);
});
}
function updateActiveCount() {
const count = state.activeDocuments.size;
document.getElementById('activeCount').textContent = count;
document.getElementById('activeDocsHeader').textContent = `${count} Dokument${count !== 1 ? 'e' : ''} aktiv`;
document.getElementById('docCountBadge').textContent = `${count} aktiv`;
}
function updateTokenBar() {
let totalChars = 0;
state.activeDocuments.forEach(docId => {
const doc = state.documents.find(d => d.id === docId);
if (doc) totalChars += doc.content.length;
});
state.tokenUsage = totalChars;
const maxTokens = 80000;
const percentage = Math.min((totalChars / maxTokens) * 100, 100);
document.getElementById('tokenFill').style.width = percentage + '%';
document.getElementById('tokenInfo').textContent = `${totalChars.toLocaleString('de-DE')} / ~${maxTokens.toLocaleString('de-DE')} Zeichen`;
}
function updateInputMeta() {
const contextLabel = document.querySelector('.pill.active').textContent;
document.getElementById('activeCtxLabel').textContent = contextLabel;
}
// ════════════════════════════════════════════════════════════════════
// CHAT & MESSAGES
// ════════════════════════════════════════════════════════════════════
function handleKeydown(event) {
if (event.key === 'Enter' && !event.shiftKey) {
event.preventDefault();
sendMessage();
}
}
function autoResize(textarea) {
textarea.style.height = 'auto';
textarea.style.height = Math.min(textarea.scrollHeight, 120) + 'px';
document.getElementById('sendBtn').disabled = !textarea.value.trim();
}
function sendMessage() {
const input = document.getElementById('inputField');
const text = input.value.trim();
if (!text) return;
// Add user message
state.messages.push({
id: Date.now().toString(),
role: 'user',
content: text,
timestamp: new Date().toLocaleTimeString('de-DE', { hour: '2-digit', minute: '2-digit' })
});
// Remove empty state
document.getElementById('emptyState').style.display = 'none';
// Render message
renderMessages();
input.value = '';
input.style.height = 'auto';
document.getElementById('sendBtn').disabled = true;
// Simulate SI response
setTimeout(() => {
const activeDocsText = Array.from(state.activeDocuments)
.map(id => {
const doc = state.documents.find(d => d.id === id);
return doc ? `\n\n**${doc.name}** (${doc.element})\n${doc.content.substring(0, 200)}…` : '';
})
.join('');
const response = `SI-Analyse:\n\nDeine Frage: "${text}"\n\nAktive Dokumente (${state.activeDocuments.size}):\n${activeDocsText || 'Keine Dokumente aktiviert'}\n\nZeichen gesamt: ${state.tokenUsage}`;
state.messages.push({
id: Date.now().toString(),
role: 'assistant',
content: response,
timestamp: new Date().toLocaleTimeString('de-DE', { hour: '2-digit', minute: '2-digit' })
});
renderMessages();
saveState();
}, 500);
}
function renderMessages() {
const messagesContainer = document.getElementById('messages');
messagesContainer.innerHTML = '';
state.messages.forEach(msg => {
const div = document.createElement('div');
div.className = `message ${msg.role}`;
div.innerHTML = `
`;
messagesContainer.appendChild(div);
});
// Auto-scroll to bottom
const bottom = document.getElementById('bottom');
bottom.scrollIntoView({ behavior: 'smooth' });
}
function sendSuggestion(btn) {
document.getElementById('inputField').value = btn.textContent;
autoResize(document.getElementById('inputField'));
sendMessage();
}
function clearChat() {
if (confirm('Gespräch wirklich löschen?')) {
state.messages = [];
saveState();
document.getElementById('emptyState').style.display = 'flex';
document.getElementById('messages').innerHTML = '';
}
}
// ════════════════════════════════════════════════════════════════════
// FTP (Placeholder)
// ════════════════════════════════════════════════════════════════════
function ftpConnect() {
const proxy = document.getElementById('ftpProxy').value;
const token = document.getElementById('ftpToken').value;
if (!proxy || !token) {
showFtpError('Proxy-URL und Token erforderlich');
return;
}
state.ftpConnected = true;
document.getElementById('ftpStatusDot').classList.add('connected');
document.getElementById('ftpConnectForm').classList.add('hidden');
document.getElementById('ftpBrowser').classList.add('connected');
document.getElementById('ftpError').classList.remove('show');
// Simulate file list
ftpListFiles();
}
function ftpDisconnect() {
state.ftpConnected = false;
document.getElementById('ftpStatusDot').classList.remove('connected');
document.getElementById('ftpConnectForm').classList.remove('hidden');
document.getElementById('ftpBrowser').classList.remove('connected');
state.ftpPath = '/';
}
function ftpListFiles() {
const fileList = document.getElementById('ftpFileList');
fileList.innerHTML = `
api/
html/
si_ftp_proxy.php
index.html
`;
}
function ftpNavigateUp() {
if (state.ftpPath !== '/') {
state.ftpPath = '/';
ftpListFiles();
document.getElementById('ftpPathText').textContent = '/';
}
}
function ftpImportReadable() {
alert('Dateien würden hier importiert (Placeholder)');
}
function showFtpError(message) {
const errorDiv = document.getElementById('ftpError');
errorDiv.textContent = message;
errorDiv.classList.add('show');
}
// ════════════════════════════════════════════════════════════════════
// INIT
// ════════════════════════════════════════════════════════════════════
loadState();
</script>
</body>
</html>
Add a touch of style
Vivamus et ipsum at erat pharetra pulvinar. Fusce id est ante. Morbi eget est ut purus pellentesque sagittis. Curabitur faucibus lorem purus. Etiam est nisl, scelerisque vel vestibulum in, ultricies non ante. In justo dolor, pulvinar lobortis eros eu, eleifend aliquam lacus. Sed nec elementum neque, quis commodo nisi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec nec ante mollis, condimentum erat ut, hendrerit quam.
Nullam eget mollis libero. Morbi erat odio, fringilla nec ex eget, vehicula laoreet quam. Aliquam elementum nibh quis orci rhoncus vulputate. Donec dictum mi sapien, at bibendum lacus posuere laoreet. Nulla facilisi. Integer fermentum a purus et ultrices. Proin id sem interdum ipsum gravida mattis. Proin ultricies, elit et laoreet venenatis, magna risus dapibus felis, id viverra risus nisi in odio. Morbi tempor a lectus eget sodales. Nullam sollicitudin, nisl lobortis pretium vehicula, nisi enim blandit magna, at posuere magna elit sed nisl. Donec a dolor vitae lorem porta interdum non ac sapien. Aliquam pharetra leo sit amet ligula facilisis, quis placerat justo imperdiet.