KI-Chat: interaktiver Bewerbungs-Assistent (Ollama-Streaming)
Eigenes Chat-Interface mit SSE-Streaming gegen das hinterlegte Ollama-Modell, gegroundet in den Bewerbungs-/E-Mail-/Termindaten des Nutzers. - lib/chat.js: streamChat (Ollama stream:true, NDJSON-Token) + buildContextPrompt - chat_threads/chat_messages Tabellen (CASCADE, Index) - Routen: GET /chat, Thread-CRUD, POST /messages (SSE, AbortController) - views/chat.ejs + public/js/chat.js + Floating-Button im Footer - hasApiKey-Gating (503 ohne OLLAMA_API_KEY) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Claude
+114
@@ -0,0 +1,114 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<%- include('partials/head') %>
|
||||
<style>
|
||||
.chat-msg { white-space: pre-wrap; word-break: break-word; }
|
||||
#chatLog::-webkit-scrollbar { width: 8px; }
|
||||
#chatLog::-webkit-scrollbar-thumb { background: rgba(120,120,120,.4); border-radius: 4px; }
|
||||
.typing-dot { width: 6px; height: 6px; border-radius: 9999px; background: currentColor; display: inline-block; }
|
||||
</style>
|
||||
</head>
|
||||
<body class="min-h-screen flex flex-col transition-colors duration-300 bg-gray-50 dark:bg-gray-900 text-gray-900 dark:text-gray-100" id="body">
|
||||
<%- include('partials/header', { hideSettings: true }) %>
|
||||
|
||||
<main class="container mx-auto px-4 py-6">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<h2 class="text-2xl font-bold text-gray-800 dark:text-white">KI-Bewerbungs-Assistent</h2>
|
||||
<button id="newThreadBtn"
|
||||
class="px-3 py-1.5 rounded-md bg-blue-600 hover:bg-blue-700 text-white text-sm font-medium">
|
||||
+ Neuer Chat
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-[260px_1fr] gap-4 h-[calc(100vh-220px)] min-h-[420px]">
|
||||
<!-- Thread sidebar -->
|
||||
<aside class="rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 overflow-hidden flex flex-col">
|
||||
<div class="px-3 py-2 text-xs font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400 border-b border-gray-200 dark:border-gray-700">Verläufe</div>
|
||||
<ul id="threadList" class="overflow-y-auto flex-1 divide-y divide-gray-100 dark:divide-gray-700">
|
||||
<% threads.forEach(function(t) { %>
|
||||
<li>
|
||||
<a href="/chat?thread=<%= t.id %>"
|
||||
data-thread="<%= t.id %>"
|
||||
class="threadLink block px-3 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-700/40 <%= (t.id === activeId) ? 'bg-blue-50 dark:bg-gray-700' : '' %>">
|
||||
<div class="truncate font-medium"><%= t.titel || '(ohne Titel)' %></div>
|
||||
<div class="text-[11px] text-gray-400"><%= new Date(t.updated_at).toLocaleDateString('de-DE') %></div>
|
||||
</a>
|
||||
</li>
|
||||
<% }); %>
|
||||
<% if (!threads.length) { %>
|
||||
<li class="px-3 py-4 text-sm text-gray-400 text-center">Noch keine Verläufe.</li>
|
||||
<% } %>
|
||||
</ul>
|
||||
</aside>
|
||||
|
||||
<!-- Message area -->
|
||||
<section class="rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 flex flex-col overflow-hidden">
|
||||
<div id="chatLog" class="flex-1 overflow-y-auto p-4 space-y-3 text-gray-800 dark:text-gray-100">
|
||||
<% if (!activeId) { %>
|
||||
<div class="h-full flex items-center justify-center text-gray-400 text-sm text-center px-6">
|
||||
Starte einen neuen Chat, um deinen Bewerbungs-Assistenten zu fragen.
|
||||
</div>
|
||||
<% } else if (!messages.length) { %>
|
||||
<div class="h-full flex items-center justify-center text-gray-400 text-sm text-center px-6">
|
||||
Stelle die erste Frage zu deinen Bewerbungen.
|
||||
</div>
|
||||
<% } else { %>
|
||||
<% messages.forEach(function(m) { %>
|
||||
<div class="flex <%= m.role === 'user' ? 'justify-end' : 'justify-start' %>">
|
||||
<div class="max-w-[80%] rounded-lg px-3 py-2 text-sm chat-msg
|
||||
<%= m.role === 'user'
|
||||
? 'bg-blue-600 text-white'
|
||||
: 'bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-100' %>">
|
||||
<%= m.content %>
|
||||
</div>
|
||||
</div>
|
||||
<% }); %>
|
||||
<% } %>
|
||||
</div>
|
||||
|
||||
<form id="chatForm" class="border-t border-gray-200 dark:border-gray-700 p-3 flex gap-2"
|
||||
<%= activeId ? '' : 'data-needs-thread="1"' %>>
|
||||
<textarea id="chatInput" rows="1" autocomplete="off"
|
||||
class="flex-1 resize-none rounded-md border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-900 px-3 py-2 text-sm text-gray-800 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
placeholder="Frage stellen … (Enter zum Senden, Shift+Enter = Zeilenumbruch)"
|
||||
<%= activeId ? '' : 'disabled' %>></textarea>
|
||||
<button type="submit"
|
||||
class="px-4 py-2 rounded-md bg-blue-600 hover:bg-blue-700 text-white text-sm font-medium disabled:opacity-50"
|
||||
id="sendBtn" <%= activeId ? '' : 'disabled' %>>Senden</button>
|
||||
</form>
|
||||
</section>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<input type="hidden" id="activeThread" value="<%= activeId || '' %>">
|
||||
|
||||
<script>
|
||||
// Minimal dark-mode toggle: main.js is not loaded on the chat page, so
|
||||
// wire the header's toggle + sync the sun/moon icon visibility here.
|
||||
(function () {
|
||||
var sun = document.getElementById('sunIcon');
|
||||
var moon = document.getElementById('moonIcon');
|
||||
var isDark = document.documentElement.classList.contains('dark');
|
||||
function sync() {
|
||||
sun && sun.classList.toggle('hidden', isDark);
|
||||
moon && moon.classList.toggle('hidden', !isDark);
|
||||
}
|
||||
sync();
|
||||
var btn = document.getElementById('darkModeToggle');
|
||||
if (btn) btn.addEventListener('click', function () {
|
||||
isDark = !document.documentElement.classList.toggle('dark');
|
||||
// toggle returns whether class is present AFTER toggle; recompute.
|
||||
isDark = document.documentElement.classList.contains('dark');
|
||||
localStorage.setItem('darkMode', isDark ? 'enabled' : 'disabled');
|
||||
sync();
|
||||
});
|
||||
})();
|
||||
window.__CHAT_BOOT__ = {
|
||||
activeId: <%= activeId ? JSON.stringify(activeId) : 'null' %>,
|
||||
needsThread: <%= activeId ? 'false' : 'true' %>
|
||||
};
|
||||
</script>
|
||||
<script src="/js/chat.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -6,3 +6,13 @@
|
||||
</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<!-- Floating button: open the KI chat assistant -->
|
||||
<a href="/chat"
|
||||
class="fixed bottom-5 right-5 z-40 flex items-center gap-2 rounded-full bg-blue-600 hover:bg-blue-700 text-white shadow-lg px-4 py-3 text-sm font-medium transition-colors"
|
||||
title="KI-Bewerbungs-Assistent öffnen">
|
||||
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 10h8M8 14h5m4 7a8 8 0 100-16 8 8 0 000 16z"></path>
|
||||
</svg>
|
||||
<span class="hidden sm:inline">KI-Chat</span>
|
||||
</a>
|
||||
|
||||
Reference in New Issue
Block a user