KI-Feinschliff, Volltextsuche über E-Mails, Prompt für die Antwort-Mail
Drei Erweiterungen, die sich server.js und lib/documents.js teilen und deshalb zusammen liegen: Jobsuche: Der Feinschliff (Zusatzbegriffe/Ausschluesse) laesst sich per KI aus den eigenen Basis-Unterlagen vorschlagen. Der Rollen-Prompt ist wie die uebrigen unter Vorlagen editierbar; gespeichert wird erst auf Klick. Suche: Startseite und KI-Chat durchsuchen jetzt per SQLite-FTS5 auch die E-Mail-Korrespondenz (Absender, Betreff, Text), Notizen und Stellenbeschreibung - ein Name aus einer Mail findet die Bewerbung. Ranking per bm25, Fundstellen mit Snippet, Feldfilter (firma:, von:), Phrasen, Ausschluesse, Umlaut-Varianten (mueller/muller/mueller). Der Index wird von SQL-Triggern gepflegt, weil Bewerbungen und Mails aus UI, REST-API, IMAP und KI-Import geschrieben werden. E-Mail: Vor dem Generieren laesst sich vorgeben, was in der Antwort stehen soll; die Vorgabe geht als verbindliche Anweisung in den Prompt. Steht schon ein Entwurf im Feld, ueberarbeitet die KI ihn, statt neu anzufangen. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
Claude Opus 4.8
+244
-38
@@ -13,8 +13,15 @@
|
||||
<svg class="absolute left-4 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-400 dark:text-gray-500 pointer-events-none" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
|
||||
</svg>
|
||||
<input id="firmaSearch" type="text" placeholder="Firma suchen …" autocomplete="off"
|
||||
class="w-full pl-12 pr-10 py-3 rounded-full border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-800 dark:text-white shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition">
|
||||
<input id="firmaSearch" type="search" role="searchbox" autocomplete="off" spellcheck="false"
|
||||
placeholder="Suchen: Firma, Stelle, Notizen, E-Mails …"
|
||||
aria-label="Bewerbungen und E-Mails durchsuchen"
|
||||
aria-controls="searchResults" aria-expanded="false"
|
||||
class="w-full pl-12 pr-20 py-3 rounded-full border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-800 dark:text-white shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition">
|
||||
<kbd id="firmaSearchHint"
|
||||
class="absolute right-3 top-1/2 -translate-y-1/2 hidden sm:inline-block px-1.5 py-0.5 rounded border border-gray-300 dark:border-gray-600 text-[11px] font-sans text-gray-400 dark:text-gray-500 pointer-events-none">/</kbd>
|
||||
<span id="firmaSearchSpinner"
|
||||
class="hidden absolute right-10 top-1/2 -translate-y-1/2 w-4 h-4 rounded-full border-2 border-gray-300 dark:border-gray-600 border-t-blue-500 animate-spin"></span>
|
||||
<button id="firmaSearchClear" type="button" aria-label="Suche zurücksetzen"
|
||||
class="hidden absolute right-3 top-1/2 -translate-y-1/2 p-1 rounded-full text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors">
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path></svg>
|
||||
@@ -43,9 +50,26 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Suchergebnisse (Volltext über Bewerbungen + E-Mails, /api/suche) -->
|
||||
<div id="searchPanel" class="hidden bg-white dark:bg-gray-800 rounded-lg shadow-md mb-8">
|
||||
<div class="flex flex-wrap items-baseline justify-between gap-x-4 gap-y-1 px-6 py-3 border-b border-gray-200 dark:border-gray-700">
|
||||
<p id="searchSummary" class="text-sm text-gray-600 dark:text-gray-300"></p>
|
||||
<p class="text-xs text-gray-400 dark:text-gray-500">
|
||||
Durchsucht Firma, Stelle, Notizen, Stellenbeschreibung und die E-Mail-Korrespondenz.
|
||||
<span class="hidden sm:inline">Verfeinern: <code>firma:bosch</code>, <code>von:müller</code>, <code>"genauer wortlaut"</code>, <code>-zeitarbeit</code></span>
|
||||
</p>
|
||||
</div>
|
||||
<ul id="searchResults" role="listbox" aria-label="Suchergebnisse" class="divide-y divide-gray-100 dark:divide-gray-700/60"></ul>
|
||||
<div id="searchEmpty" class="hidden px-6 py-12 text-center text-gray-500 dark:text-gray-400">
|
||||
<p>Nichts gefunden für „<span id="searchEmptyTerm"></span>".</p>
|
||||
<p class="mt-2 text-sm">Gesucht wird auch in E-Mails – prüfe die Schreibweise oder suche nach einem Teilwort.</p>
|
||||
</div>
|
||||
<div id="searchError" class="hidden px-6 py-8 text-center text-sm text-red-600 dark:text-red-400"></div>
|
||||
</div>
|
||||
|
||||
<!-- Upcoming appointments (from the application calendar) -->
|
||||
<% if (typeof kommendeTermine !== 'undefined' && kommendeTermine && kommendeTermine.length) { %>
|
||||
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 mb-8">
|
||||
<div id="termineCard" class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 mb-8">
|
||||
<div class="flex items-center gap-2 mb-4">
|
||||
<svg class="w-5 h-5 text-blue-600 dark:text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path></svg>
|
||||
<h2 class="text-lg font-semibold text-gray-800 dark:text-white">Anstehende Termine</h2>
|
||||
@@ -106,7 +130,7 @@
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
</style>
|
||||
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-x-auto">
|
||||
<div id="listCard" class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-x-auto">
|
||||
<div class="md:min-w-[760px]">
|
||||
<!-- Column labels (desktop only — on phones the rows become stacked cards) -->
|
||||
<div class="app-head app-grid px-6 py-3 bg-gray-50 dark:bg-gray-700 text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">
|
||||
@@ -170,7 +194,7 @@
|
||||
const hatVerlauf = app.verlauf && app.verlauf.length > 0;
|
||||
const hatDetails = hatNotizen || hatInterne || hatVerlauf;
|
||||
%>
|
||||
<div class="app-row border-t border-gray-100 dark:border-gray-700/60 <%= hatDetails ? 'has-details' : '' %>" data-search="<%= ((app.firma || '') + ' ' + (app.stelle || '')).toLowerCase().replace(/"/g, '') %>">
|
||||
<div class="app-row border-t border-gray-100 dark:border-gray-700/60 <%= hatDetails ? 'has-details' : '' %>">
|
||||
<!-- Eine Zeile pro Bewerbung -->
|
||||
<div class="app-line app-grid px-6 py-3 text-sm transition-colors <%= hatDetails ? 'cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-700/50' : '' %>">
|
||||
<span class="flex items-center justify-center">
|
||||
@@ -280,9 +304,6 @@
|
||||
</section>
|
||||
<% }); %>
|
||||
</div>
|
||||
<div id="searchNoResults" class="px-6 py-12 text-center text-gray-500 dark:text-gray-400 border-t border-gray-200 dark:border-gray-700" style="display:none">
|
||||
<p>Keine Firma gefunden für „<span id="searchNoResultsTerm"></span>".</p>
|
||||
</div>
|
||||
<% } else { %>
|
||||
<div class="px-6 py-12 text-center text-gray-500 dark:text-gray-400 border-t border-gray-200 dark:border-gray-700">
|
||||
<p>Keine Bewerbungen gefunden.</p>
|
||||
@@ -325,51 +346,236 @@
|
||||
});
|
||||
});
|
||||
|
||||
// ---- Live-Firmensuche: filtert die Bewerbungsliste nach Firma/Stelle ----
|
||||
// ---- Volltextsuche (/api/suche): Bewerbungen + E-Mail-Korrespondenz ----
|
||||
// Die Liste unten bleibt der Normalzustand; sobald gesucht wird, tritt an
|
||||
// ihre Stelle die gerankte Trefferliste mit Fundstellen.
|
||||
var input = document.getElementById('firmaSearch');
|
||||
if (!input) return;
|
||||
var clear = document.getElementById('firmaSearchClear');
|
||||
var sections = qsa('.status-group');
|
||||
var noResults = document.getElementById('searchNoResults');
|
||||
var noResultsTerm = document.getElementById('searchNoResultsTerm');
|
||||
var hint = document.getElementById('firmaSearchHint');
|
||||
var spinner = document.getElementById('firmaSearchSpinner');
|
||||
var panel = document.getElementById('searchPanel');
|
||||
var results = document.getElementById('searchResults');
|
||||
var summary = document.getElementById('searchSummary');
|
||||
var empty = document.getElementById('searchEmpty');
|
||||
var emptyTerm = document.getElementById('searchEmptyTerm');
|
||||
var fehler = document.getElementById('searchError');
|
||||
var listCard = document.getElementById('listCard');
|
||||
var termineCard = document.getElementById('termineCard');
|
||||
|
||||
function filter() {
|
||||
var q = input.value.trim().toLowerCase();
|
||||
if (clear) clear.classList.toggle('hidden', !q);
|
||||
var anyVisible = false;
|
||||
var MIN = 2; // kürzere Eingaben liefern nur Rauschen
|
||||
var MARK_START = '\u0002'; // Fundstellen-Marker aus lib/suche.js
|
||||
var MARK_END = '\u0003';
|
||||
var timer = null;
|
||||
var laufend = null; // AbortController der offenen Anfrage
|
||||
var aktiv = -1; // per Tastatur ausgewählter Treffer
|
||||
|
||||
sections.forEach(function (sec) {
|
||||
var rows = qsa('.app-row', sec);
|
||||
var visible = 0;
|
||||
rows.forEach(function (row) {
|
||||
var match = !q || (row.dataset.search || '').indexOf(q) !== -1;
|
||||
row.style.display = match ? '' : 'none';
|
||||
if (match) visible++;
|
||||
});
|
||||
if (visible) anyVisible = true;
|
||||
function escapeHtml(s) {
|
||||
return String(s == null ? '' : s)
|
||||
.replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>')
|
||||
.replace(/"/g, '"').replace(/'/g, ''');
|
||||
}
|
||||
|
||||
var countEl = sec.querySelector('[data-group-count]');
|
||||
if (countEl) countEl.textContent = visible;
|
||||
sec.style.display = (visible === 0 && q) ? 'none' : '';
|
||||
// Snippet -> HTML: erst escapen (Mailtext ist Fremdinhalt), dann die
|
||||
// Marker durch <mark> ersetzen. Andersherum wäre es eine XSS-Lücke.
|
||||
function snippetHtml(s) {
|
||||
return escapeHtml(s)
|
||||
.split(escapeHtml(MARK_START)).join('<mark class="bg-yellow-200 dark:bg-yellow-500/40 dark:text-white rounded-sm px-0.5">')
|
||||
.split(escapeHtml(MARK_END)).join('</mark>');
|
||||
}
|
||||
|
||||
// Während der Suche passende Gruppen aufklappen, nach dem Löschen alles wieder zu.
|
||||
var body = sec.querySelector('.group-body');
|
||||
var chev = sec.querySelector('.group-toggle .chevron');
|
||||
setOpen(body, chev, !!q && visible > 0);
|
||||
function datumDe(iso) {
|
||||
if (!iso) return '';
|
||||
var d = new Date(iso);
|
||||
return isNaN(d) ? '' : d.toLocaleDateString('de-DE');
|
||||
}
|
||||
|
||||
// "Frau Müller <m.mueller@bosch.de>" -> "Frau Müller"
|
||||
function absender(v) {
|
||||
var s = String(v || '').trim();
|
||||
var m = s.match(/^\s*"?([^"<]+?)"?\s*<[^>]+>\s*$/);
|
||||
return (m ? m[1].trim() : s) || '';
|
||||
}
|
||||
|
||||
// Woher der Treffer stammt — die Herkunft ist bei einer Mailsuche die
|
||||
// eigentliche Information ("steht in der Mail von Frau Müller").
|
||||
function herkunft(f) {
|
||||
if (f.quelle !== 'email' || !f.email) return f.feld_label || 'Bewerbung';
|
||||
var von = absender(f.email.richtung === 'out' ? f.email.an : f.email.von);
|
||||
var d = datumDe(f.email.datum);
|
||||
return 'E-Mail' + (von ? (f.email.richtung === 'out' ? ' an ' : ' von ') + von : '') + (d ? ', ' + d : '');
|
||||
}
|
||||
|
||||
function trefferZeile(t, i) {
|
||||
var b = t.bewerbung || {};
|
||||
var li = document.createElement('li');
|
||||
li.setAttribute('role', 'option');
|
||||
li.dataset.index = String(i);
|
||||
|
||||
var a = document.createElement('a');
|
||||
a.href = t.typ === 'email' && !t.bewerbung_id ? '/postfach' : '/bewerbung/' + t.bewerbung_id;
|
||||
a.className = 'block px-6 py-4 hover:bg-gray-50 dark:hover:bg-gray-700/50 transition-colors focus:outline-none focus:bg-gray-50 dark:focus:bg-gray-700/50';
|
||||
|
||||
var kopf = document.createElement('div');
|
||||
kopf.className = 'flex flex-wrap items-baseline gap-x-2 gap-y-1';
|
||||
var titel = document.createElement('span');
|
||||
titel.className = 'font-medium text-gray-900 dark:text-white';
|
||||
titel.textContent = t.bewerbung_id ? (b.firma || '(ohne Firma)') : 'E-Mail im Postfach';
|
||||
kopf.appendChild(titel);
|
||||
if (b.stelle) {
|
||||
var stelle = document.createElement('span');
|
||||
stelle.className = 'text-sm text-gray-600 dark:text-gray-300';
|
||||
stelle.textContent = '· ' + b.stelle;
|
||||
kopf.appendChild(stelle);
|
||||
}
|
||||
if (b.status) {
|
||||
var st = document.createElement('span');
|
||||
st.className = 'px-2 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-700 dark:bg-gray-700 dark:text-gray-200';
|
||||
st.textContent = b.status;
|
||||
kopf.appendChild(st);
|
||||
}
|
||||
if (b.datum) {
|
||||
var dt = document.createElement('span');
|
||||
dt.className = 'ml-auto text-xs text-gray-400 dark:text-gray-500 whitespace-nowrap';
|
||||
dt.textContent = datumDe(b.datum);
|
||||
kopf.appendChild(dt);
|
||||
}
|
||||
a.appendChild(kopf);
|
||||
|
||||
(t.fundstellen || []).forEach(function (f) {
|
||||
var zeile = document.createElement('p');
|
||||
zeile.className = 'mt-1.5 text-sm text-gray-600 dark:text-gray-300 flex flex-wrap items-baseline gap-x-2';
|
||||
var wo = document.createElement('span');
|
||||
wo.className = 'shrink-0 text-xs uppercase tracking-wide ' +
|
||||
(f.quelle === 'email' ? 'text-indigo-600 dark:text-indigo-400' : 'text-gray-400 dark:text-gray-500');
|
||||
wo.textContent = herkunft(f);
|
||||
var text = document.createElement('span');
|
||||
text.className = 'min-w-0 break-words';
|
||||
text.innerHTML = snippetHtml(f.snippet); // vorher escaped, siehe snippetHtml
|
||||
zeile.appendChild(wo);
|
||||
zeile.appendChild(text);
|
||||
a.appendChild(zeile);
|
||||
});
|
||||
|
||||
if (noResults) {
|
||||
noResults.style.display = (!anyVisible && q) ? '' : 'none';
|
||||
if (noResultsTerm) noResultsTerm.textContent = input.value.trim();
|
||||
li.appendChild(a);
|
||||
return li;
|
||||
}
|
||||
|
||||
function markiere(i) {
|
||||
var zeilen = qsa('li', results);
|
||||
if (!zeilen.length) return;
|
||||
aktiv = (i + zeilen.length) % zeilen.length;
|
||||
zeilen.forEach(function (li, n) {
|
||||
li.classList.toggle('bg-blue-50', n === aktiv);
|
||||
li.classList.toggle('dark:bg-gray-700/60', n === aktiv);
|
||||
li.setAttribute('aria-selected', n === aktiv ? 'true' : 'false');
|
||||
});
|
||||
zeilen[aktiv].scrollIntoView({ block: 'nearest' });
|
||||
}
|
||||
|
||||
function zeigeListe() {
|
||||
panel.classList.add('hidden');
|
||||
if (listCard) listCard.classList.remove('hidden');
|
||||
if (termineCard) termineCard.classList.remove('hidden');
|
||||
input.setAttribute('aria-expanded', 'false');
|
||||
aktiv = -1;
|
||||
}
|
||||
|
||||
function zeigeTreffer(daten) {
|
||||
var treffer = daten.treffer || [];
|
||||
results.innerHTML = '';
|
||||
treffer.forEach(function (t, i) { results.appendChild(trefferZeile(t, i)); });
|
||||
|
||||
summary.textContent = treffer.length
|
||||
? treffer.length + (treffer.length === 1 ? ' Treffer' : ' Treffer') + ' für „' + daten.q.trim() + '"'
|
||||
: 'Keine Treffer';
|
||||
empty.classList.toggle('hidden', treffer.length > 0);
|
||||
if (emptyTerm) emptyTerm.textContent = daten.q.trim();
|
||||
fehler.classList.add('hidden');
|
||||
|
||||
panel.classList.remove('hidden');
|
||||
if (listCard) listCard.classList.add('hidden');
|
||||
if (termineCard) termineCard.classList.add('hidden');
|
||||
input.setAttribute('aria-expanded', 'true');
|
||||
aktiv = -1;
|
||||
}
|
||||
|
||||
function zeigeFehler(msg) {
|
||||
results.innerHTML = '';
|
||||
summary.textContent = '';
|
||||
empty.classList.add('hidden');
|
||||
fehler.textContent = msg;
|
||||
fehler.classList.remove('hidden');
|
||||
panel.classList.remove('hidden');
|
||||
if (listCard) listCard.classList.add('hidden');
|
||||
if (termineCard) termineCard.classList.add('hidden');
|
||||
}
|
||||
|
||||
async function suchen(q) {
|
||||
if (laufend) laufend.abort(); // veraltete Antwort darf die neue nicht überholen
|
||||
laufend = new AbortController();
|
||||
spinner.classList.remove('hidden');
|
||||
try {
|
||||
var res = await fetch('/api/suche?q=' + encodeURIComponent(q), {
|
||||
headers: { Accept: 'application/json' }, signal: laufend.signal,
|
||||
});
|
||||
if (!res.ok) throw new Error('Die Suche ist fehlgeschlagen (' + res.status + ').');
|
||||
zeigeTreffer(await res.json());
|
||||
} catch (e) {
|
||||
if (e.name === 'AbortError') return; // durch den nächsten Tastendruck ersetzt
|
||||
zeigeFehler(e.message || 'Die Suche ist fehlgeschlagen.');
|
||||
} finally {
|
||||
spinner.classList.add('hidden');
|
||||
}
|
||||
}
|
||||
|
||||
input.addEventListener('input', filter);
|
||||
if (clear) clear.addEventListener('click', function () {
|
||||
function getippt() {
|
||||
var q = input.value.trim();
|
||||
clear.classList.toggle('hidden', !q);
|
||||
if (hint) hint.classList.toggle('hidden', !!q);
|
||||
clearTimeout(timer);
|
||||
if (laufend) { laufend.abort(); laufend = null; }
|
||||
spinner.classList.add('hidden');
|
||||
if (q.length < MIN) { zeigeListe(); return; }
|
||||
// Entprellt: erst tippen lassen, dann eine Anfrage stellen.
|
||||
timer = setTimeout(function () { suchen(q); }, 180);
|
||||
}
|
||||
|
||||
input.addEventListener('input', getippt);
|
||||
|
||||
input.addEventListener('keydown', function (e) {
|
||||
if (e.key === 'Escape') {
|
||||
input.value = '';
|
||||
getippt();
|
||||
input.blur();
|
||||
return;
|
||||
}
|
||||
if (panel.classList.contains('hidden')) return;
|
||||
if (e.key === 'ArrowDown') { e.preventDefault(); markiere(aktiv + 1); }
|
||||
else if (e.key === 'ArrowUp') { e.preventDefault(); markiere(aktiv - 1); }
|
||||
else if (e.key === 'Enter') {
|
||||
var zeilen = qsa('li', results);
|
||||
var ziel = zeilen[aktiv >= 0 ? aktiv : 0];
|
||||
var link = ziel && ziel.querySelector('a');
|
||||
if (link) { e.preventDefault(); link.click(); }
|
||||
}
|
||||
});
|
||||
|
||||
clear.addEventListener('click', function () {
|
||||
input.value = '';
|
||||
filter();
|
||||
getippt();
|
||||
input.focus();
|
||||
});
|
||||
|
||||
// "/" springt ins Suchfeld — solange man nicht ohnehin schon tippt.
|
||||
document.addEventListener('keydown', function (e) {
|
||||
if (e.key !== '/' || e.metaKey || e.ctrlKey || e.altKey) return;
|
||||
var t = e.target;
|
||||
if (t && (t.tagName === 'INPUT' || t.tagName === 'TEXTAREA' || t.tagName === 'SELECT' || t.isContentEditable)) return;
|
||||
e.preventDefault();
|
||||
input.focus();
|
||||
input.select();
|
||||
});
|
||||
})();
|
||||
</script>
|
||||
</main>
|
||||
|
||||
Reference in New Issue
Block a user