thomas/jobbi-bewerbung
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

E-Mails als HTML anzeigen; Antworten zitieren Vornachricht (auch KI)

Browse Source 
- HTML-Mails werden in einem sandboxed iframe (ohne allow-scripts)
  gerendert statt als Quelltext angezeigt; Höhe an Inhalt angepasst,
  Skripte/Tracking laufen nicht, Layout bleibt isoliert. Reine
  Text-Mails weiterhin als pre-wrap. Gilt für Postfach und Bewerbung.
- Antwortformular ist wie im Mailclient mit der zitierten Vornachricht
  vorbelegt (Attribution + "> "-Zeilen), Cursor darüber.
- KI-Antwort hängt das Zitat unter den generierten Text und erhält den
  bereinigten Klartext (statt HTML) als Eingabe.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
thomas
2026-07-04 23:06:59 +02:00
co-authored by Claude Opus 4.8
parent 7ceff39364
commit b1531663bb
4 changed files with 128 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lib/mailer.js
+1
View File
@@ -175,5 +175,6 @@ module.exports = {
fromField, fromField,
fromAddress, fromAddress,
textToHtml, textToHtml,
htmlToText,
config: cfg, config: cfg,
}; };
server.js
+58 -2
View File
@@ -101,6 +101,58 @@ if (!fs.existsSync(emailAnhaengeDir)) {
fs.mkdirSync(emailAnhaengeDir, { recursive: true }); fs.mkdirSync(emailAnhaengeDir, { recursive: true });
} }
// --- E-mail display + reply helpers --------------------------------------
// A stored message is rendered as HTML when we have an HTML body (or the plain
// body is actually HTML markup — some senders put HTML in the text/plain part).
// Otherwise it is shown as plain text. HTML is displayed inside a sandboxed
// iframe (see the views), so scripts never run.
function looksLikeHtml(s) {
return /<(?:!doctype|html|body|div|table|p|br|span|a|img|ul|ol|h[1-6])\b|<\/[a-z]/i.test(String(s || ''));
}
function emailDisplayHtml(e) {
if (e.body_html && e.body_html.trim()) return e.body_html;
if (e.body_text && looksLikeHtml(e.body_text)) return e.body_text;
return null;
}
// Wrap raw e-mail HTML in a minimal document for the sandboxed iframe: a white
// background, readable defaults, images constrained to the width and links that
// open in a new tab. No scripts are enabled by the iframe sandbox.
function buildEmailSrcdoc(html) {
return '<!doctype html><html><head><meta charset="utf-8">' +
'<meta name="referrer" content="no-referrer"><base target="_blank">' +
'<style>html,body{margin:0;padding:10px;background:#fff;color:#111;' +
'font-family:Arial,Helvetica,sans-serif;font-size:14px;line-height:1.5;' +
'word-break:break-word;overflow-wrap:anywhere}' +
'img{max-width:100%!important;height:auto}table{max-width:100%!important}' +
'a{color:#2563eb}*{max-width:100%}</style></head><body>' +
String(html || '') + '</body></html>';
}
// Plain-text version of a message body, used as the source for reply quoting.
function emailPlainText(e) {
const html = emailDisplayHtml(e);
if (html && (!e.body_text || looksLikeHtml(e.body_text))) return mailer.htmlToText(html);
return String(e.body_text || '');
}
// Build a mail-client style quote of a received message: an attribution line
// followed by the original body with every line prefixed by "> ".
function buildReplyQuote(e) {
const d = e.email_date ? new Date(e.email_date) : null;
const when = d && !isNaN(d.getTime()) ? d.toLocaleString('de-DE') : '';
const who = String(e.from_addr || '').trim();
const src = emailPlainText(e).replace(/\r\n/g, '\n').replace(/\s+$/, '');
const quoted = src.split('\n').map((l) => '> ' + l).join('\n');
const attribution = who ? `Am ${when} schrieb ${who}:` : (when ? `Am ${when}:` : '');
return (attribution ? attribution + '\n\n' : '') + quoted;
}
// Attach display fields (and, for received mail, a reply quote) to each row.
function decorateEmails(emails) {
emails.forEach((e) => {
const html = emailDisplayHtml(e);
e.display_srcdoc = html ? buildEmailSrcdoc(html) : null;
if (e.direction !== 'out') e.reply_quote = buildReplyQuote(e);
});
}
// Directory for static extra attachments (e.g. Zeugnisse) the user uploads once // Directory for static extra attachments (e.g. Zeugnisse) the user uploads once
// and that are sent along with every generated application. // and that are sent along with every generated application.
const basisAnhaengeDir = path.join(dataDir, 'basis_anhaenge'); const basisAnhaengeDir = path.join(dataDir, 'basis_anhaenge');
@@ -1187,6 +1239,8 @@ initializeDatabase().then(() => {
const m = String(e.from_addr || '').match(/<([^>]+)>/); const m = String(e.from_addr || '').match(/<([^>]+)>/);
e.from_addr_clean = m ? m[1] : String(e.from_addr || '').trim(); e.from_addr_clean = m ? m[1] : String(e.from_addr || '').trim();
}); });
// HTML rendering (sandboxed iframe) + a quote of each received message.
decorateEmails(emails);
// Mark received messages as read now that they are shown. // Mark received messages as read now that they are shown.
await dbRun("UPDATE emails SET seen = 1 WHERE bewerbung_id = ? AND direction = 'in' AND seen = 0", [id]); await dbRun("UPDATE emails SET seen = 1 WHERE bewerbung_id = ? AND direction = 'in' AND seen = 0", [id]);
} }
@@ -1334,12 +1388,13 @@ initializeDatabase().then(() => {
const settings = await dbGet('SELECT * FROM settings WHERE id = 1'); const settings = await dbGet('SELECT * FROM settings WHERE id = 1');
const draft = await generateEmailReply({ const draft = await generateEmailReply({
incoming: { from: orig.from_addr, subject: orig.subject, text: orig.body_text }, incoming: { from: orig.from_addr, subject: orig.subject, text: emailPlainText(orig) },
job: { firma: bewerbung.firma, stelle: bewerbung.stelle }, job: { firma: bewerbung.firma, stelle: bewerbung.stelle },
settings, settings,
hinweise: String(req.body.hinweise || ''), hinweise: String(req.body.hinweise || ''),
}); });
res.json(draft); // Include the quoted original so the reply reads like a mail-client thread.
res.json({ ...draft, quote: buildReplyQuote(orig) });
} catch (error) { } catch (error) {
console.error('Error drafting AI reply:', error); console.error('Error drafting AI reply:', error);
res.status(500).json({ error: error.message || 'Serverfehler' }); res.status(500).json({ error: error.message || 'Serverfehler' });
@@ -1390,6 +1445,7 @@ initializeDatabase().then(() => {
const byEmail = {}; const byEmail = {};
atts.forEach((a) => { (byEmail[a.email_id] = byEmail[a.email_id] || []).push(a); }); atts.forEach((a) => { (byEmail[a.email_id] = byEmail[a.email_id] || []).push(a); });
emails.forEach((e) => { e.anhaenge = byEmail[e.id] || []; }); emails.forEach((e) => { e.anhaenge = byEmail[e.id] || []; });
decorateEmails(emails);
} }
// Applications the user can assign an e-mail to (newest first). // Applications the user can assign an e-mail to (newest first).
const bewerbungen = await dbAll( const bewerbungen = await dbAll(
views/bewerbung.ejs
+41 -5
View File
@@ -336,7 +336,13 @@
<span class="text-xs text-gray-500 dark:text-gray-400 shrink-0"><%= e.email_date ? new Date(e.email_date).toLocaleString('de-DE') : '' %></span> <span class="text-xs text-gray-500 dark:text-gray-400 shrink-0"><%= e.email_date ? new Date(e.email_date).toLocaleString('de-DE') : '' %></span>
</div> </div>
<p class="text-sm font-medium text-gray-800 dark:text-gray-100 mb-1"><%= e.subject || '(kein Betreff)' %></p> <p class="text-sm font-medium text-gray-800 dark:text-gray-100 mb-1"><%= e.subject || '(kein Betreff)' %></p>
<p class="whitespace-pre-wrap break-words text-sm leading-relaxed text-gray-700 dark:text-gray-300"><%= e.body_text || '' %></p> <% if (e.display_srcdoc) { %>
<iframe class="email-html-frame w-full border border-gray-200 dark:border-gray-600 rounded bg-white" style="height:6rem"
sandbox="allow-same-origin allow-popups allow-popups-to-escape-sandbox" referrerpolicy="no-referrer"
srcdoc="<%= e.display_srcdoc %>"></iframe>
<% } else { %>
<p class="whitespace-pre-wrap break-words text-sm leading-relaxed text-gray-700 dark:text-gray-300"><%= e.body_text || '' %></p>
<% } %>
<% if (e.anhaenge && e.anhaenge.length) { %> <% if (e.anhaenge && e.anhaenge.length) { %>
<div class="mt-2 flex flex-wrap gap-2"> <div class="mt-2 flex flex-wrap gap-2">
@@ -369,8 +375,8 @@
<span class="ai-reply-label">KI-Antwort generieren</span> <span class="ai-reply-label">KI-Antwort generieren</span>
</button> </button>
</div> </div>
<textarea name="body" rows="8" required <textarea name="body" rows="12" required
class="reply-body w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-700 text-gray-800 dark:text-white text-sm leading-relaxed"></textarea> class="reply-body w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-700 text-gray-800 dark:text-white text-sm leading-relaxed"><%= e.reply_quote ? '\n\n' + e.reply_quote : '' %></textarea>
<div class="flex justify-end mt-2"> <div class="flex justify-end mt-2">
<button type="submit" class="inline-flex items-center gap-1.5 px-4 py-2 text-sm bg-blue-600 hover:bg-blue-700 text-white rounded-md transition-colors">Antwort senden</button> <button type="submit" class="inline-flex items-center gap-1.5 px-4 py-2 text-sm bg-blue-600 hover:bg-blue-700 text-white rounded-md transition-colors">Antwort senden</button>
</div> </div>
@@ -688,11 +694,36 @@
} catch (e) { /* clipboard blocked — ignore */ } } catch (e) { /* clipboard blocked — ignore */ }
}); });
// Size a sandboxed e-mail iframe to its content height. The sandbox
// enables allow-same-origin (but not allow-scripts), so scripts in the
// mail never run, yet we can still measure the rendered document.
function fitFrame(f) {
try {
const doc = f.contentDocument || (f.contentWindow && f.contentWindow.document);
if (!doc || !doc.body) return;
const h = Math.max(doc.body.scrollHeight, doc.documentElement.scrollHeight);
if (h > 0) f.style.height = (h + 6) + 'px';
} catch (e) { /* cross-origin (shouldn't happen) — leave default height */ }
}
document.querySelectorAll('.email-html-frame').forEach((f) => {
f.addEventListener('load', () => fitFrame(f));
fitFrame(f);
// Late reflow once embedded images have loaded.
setTimeout(() => fitFrame(f), 400);
setTimeout(() => fitFrame(f), 1500);
});
// Toggle inline reply forms under received e-mails. // Toggle inline reply forms under received e-mails.
document.querySelectorAll('.reply-toggle').forEach((btn) => { document.querySelectorAll('.reply-toggle').forEach((btn) => {
btn.addEventListener('click', () => { btn.addEventListener('click', () => {
const form = document.getElementById(btn.dataset.target); const form = document.getElementById(btn.dataset.target);
if (form) form.classList.toggle('hidden'); if (!form) return;
form.classList.toggle('hidden');
// On open, put the cursor above the quoted text.
if (!form.classList.contains('hidden')) {
const ta = form.querySelector('.reply-body');
if (ta) { ta.focus(); try { ta.setSelectionRange(0, 0); } catch (e) {} ta.scrollTop = 0; }
}
}); });
}); });
@@ -715,7 +746,12 @@
if (!res.ok) throw new Error(data.error || 'Fehler'); if (!res.ok) throw new Error(data.error || 'Fehler');
const body = form.querySelector('.reply-body'); const body = form.querySelector('.reply-body');
const subject = form.querySelector('.reply-subject'); const subject = form.querySelector('.reply-subject');
if (body && data.text) body.value = data.text; if (body && data.text) {
// Generated reply on top, quoted original beneath — like a mail client.
body.value = data.text + (data.quote ? '\n\n' + data.quote : '');
body.focus();
try { body.setSelectionRange(data.text.length, data.text.length); } catch (e) {}
}
if (subject && data.betreff) subject.value = data.betreff; if (subject && data.betreff) subject.value = data.betreff;
} catch (e) { } catch (e) {
alert('KI-Antwort fehlgeschlagen: ' + e.message); alert('KI-Antwort fehlgeschlagen: ' + e.message);
views/postfach.ejs
+28 -4
View File
@@ -60,10 +60,16 @@
<span class="text-xs text-gray-500 dark:text-gray-400 shrink-0"><%= e.email_date ? new Date(e.email_date).toLocaleString('de-DE') : '' %></span> <span class="text-xs text-gray-500 dark:text-gray-400 shrink-0"><%= e.email_date ? new Date(e.email_date).toLocaleString('de-DE') : '' %></span>
</div> </div>
<p class="text-sm font-medium text-gray-800 dark:text-gray-100 mb-1"><%= e.subject || '(kein Betreff)' %></p> <p class="text-sm font-medium text-gray-800 dark:text-gray-100 mb-1"><%= e.subject || '(kein Betreff)' %></p>
<p class="email-body whitespace-pre-wrap break-words text-sm leading-relaxed text-gray-700 dark:text-gray-300 max-h-40 overflow-hidden"><%= e.body_text || '' %></p> <% if (e.display_srcdoc) { %>
<% if (e.body_text && e.body_text.length > 600) { %> <iframe class="email-html-frame w-full border border-gray-200 dark:border-gray-600 rounded bg-white" style="height:6rem"
<button type="button" class="email-toggle text-xs text-blue-600 hover:text-blue-800 dark:text-blue-400 hover:underline mt-1" sandbox="allow-same-origin allow-popups allow-popups-to-escape-sandbox" referrerpolicy="no-referrer"
data-expanded="false">Vollständig anzeigen</button> srcdoc="<%= e.display_srcdoc %>"></iframe>
<% } else { %>
<p class="email-body whitespace-pre-wrap break-words text-sm leading-relaxed text-gray-700 dark:text-gray-300 max-h-40 overflow-hidden"><%= e.body_text || '' %></p>
<% if (e.body_text && e.body_text.length > 600) { %>
<button type="button" class="email-toggle text-xs text-blue-600 hover:text-blue-800 dark:text-blue-400 hover:underline mt-1"
data-expanded="false">Vollständig anzeigen</button>
<% } %>
<% } %> <% } %>
<% if (e.anhaenge && e.anhaenge.length) { %> <% if (e.anhaenge && e.anhaenge.length) { %>
@@ -146,6 +152,24 @@
const cy = document.getElementById('currentYear'); const cy = document.getElementById('currentYear');
if (cy) cy.textContent = new Date().getFullYear(); if (cy) cy.textContent = new Date().getFullYear();
// Size each sandboxed e-mail iframe to its rendered content. The
// sandbox omits allow-scripts, so mail scripts never run; allow-same-
// origin lets us measure the document height.
function fitFrame(f) {
try {
var doc = f.contentDocument || (f.contentWindow && f.contentWindow.document);
if (!doc || !doc.body) return;
var h = Math.max(doc.body.scrollHeight, doc.documentElement.scrollHeight);
if (h > 0) f.style.height = (h + 6) + 'px';
} catch (e) { /* leave default height */ }
}
document.querySelectorAll('.email-html-frame').forEach(function (f) {
f.addEventListener('load', function () { fitFrame(f); });
fitFrame(f);
setTimeout(function () { fitFrame(f); }, 400);
setTimeout(function () { fitFrame(f); }, 1500);
});
// Expand/collapse the full e-mail body for each card. // Expand/collapse the full e-mail body for each card.
document.querySelectorAll('.email-toggle').forEach(function (btn) { document.querySelectorAll('.email-toggle').forEach(function (btn) {
btn.addEventListener('click', function () { btn.addEventListener('click', function () {