Asger Geel Weirsøe
490835e6ae
Build & Deploy / deploy (push) Successful in 2m48s
Every hand-written card, button, input, the profiler's filter buttons, the upload area, the chat bubbles, the nav links and the shortcut key now use Weircon-wind components. The theme is imported into Tailwind's components layer so utilities on the same element still apply. Claude-Session: https://claude.ai/code/session_012LCTmU2ewo8tnM1dByYAoG
84 lines
4.1 KiB
Plaintext
84 lines
4.1 KiB
Plaintext
---
|
|
// Selve chatten til "Spørg mit CV" (/chat og /en/chat). Teksterne følger sidens sprog;
|
|
// svarene kommer fra Claude via chat-proxyen bag /api/chat.
|
|
const { lang = 'da' } = Astro.props as { lang?: 'da' | 'en' };
|
|
const t = lang === 'en' ? {
|
|
placeholder: 'Ask about experience, incident response, Peppol…',
|
|
disclaimer: 'Answers are written by Claude (Anthropic) from my public CV.. check important details with me directly.',
|
|
thinking: '…thinking', offline: 'The chat is offline right now.. try again later.',
|
|
unreachable: 'Could not reach the chat.. try again in a moment.',
|
|
} : {
|
|
placeholder: 'Spørg om erfaring, Peppol, homelab…',
|
|
disclaimer: 'Svarene skrives af Claude (Anthropic) ud fra mit offentlige CV.. tjek vigtige detaljer med mig direkte.',
|
|
thinking: '…tænker', offline: 'Chatten er offline lige nu.. prøv senere.',
|
|
unreachable: 'Kunne ikke nå chatten.. prøv igen om lidt.',
|
|
};
|
|
---
|
|
<div id="chat-log" class="mt-8 space-y-3" aria-live="polite"></div>
|
|
|
|
<form id="chat-form" class="mt-6 flex gap-3" data-thinking={t.thinking} data-offline={t.offline} data-unreachable={t.unreachable}>
|
|
<input id="chat-input" type="text" required maxlength="500" autocomplete="off"
|
|
placeholder={t.placeholder}
|
|
class="flex-1 wt-input wt-input--lg" />
|
|
<button type="submit" class="wt-btn wt-btn--primary wt-btn--lg">Send</button>
|
|
</form>
|
|
<p class="mt-3 text-xs text-muted/80">{t.disclaimer}</p>
|
|
|
|
<script is:inline>
|
|
(function () {
|
|
var form = document.getElementById('chat-form');
|
|
if (!form || form.__wired) return; form.__wired = true;
|
|
var history = [];
|
|
function esc(s) {
|
|
return s.replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>');
|
|
}
|
|
// Escape FØRST, linkificér så: rene URL'er og e-mails bliver klikbare, intet HTML slipper igennem.
|
|
function linkify(text) {
|
|
var html = esc(text);
|
|
html = html.replace(/\b(https?:\/\/[^\s<]+[^\s<.,!?:;)])/g,
|
|
'<a href="$1" target="_blank" rel="noopener" class="text-accent underline">$1</a>');
|
|
html = html.replace(/\b([A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,})\b/g,
|
|
'<a href="mailto:$1" class="text-accent underline">$1</a>');
|
|
return html;
|
|
}
|
|
// Track spørgsmålet i Matomo FRA browseren, så det knyttes til den besøgendes
|
|
// egen visitor-profil (cookie/visitor-ID, IP, browser) i stedet for en server-IP.
|
|
function track(action, q) {
|
|
try { (window._paq = window._paq || []).push(['trackEvent', 'Chat', action, q]); } catch (_) {}
|
|
}
|
|
function bubble(role, text) {
|
|
var log = document.getElementById('chat-log');
|
|
var d = document.createElement('div');
|
|
d.className = 'wt-card text-sm whitespace-pre-wrap ' + (role === 'user' ? 'wt-card--alt ml-8' : 'mr-8');
|
|
if (role === 'user') d.textContent = text; else d.innerHTML = linkify(text);
|
|
log.appendChild(d);
|
|
d.scrollIntoView({ behavior: 'smooth', block: 'end' });
|
|
return d;
|
|
}
|
|
form.addEventListener('submit', async function (e) {
|
|
e.preventDefault();
|
|
var input = document.getElementById('chat-input');
|
|
var q = input.value.trim(); if (!q) return;
|
|
input.value = '';
|
|
bubble('user', q);
|
|
history.push({ role: 'user', content: q });
|
|
var wait = bubble('assistant', form.dataset.thinking);
|
|
var btn = form.querySelector('button'); btn.disabled = true;
|
|
try {
|
|
var r = await fetch('/api/chat', {
|
|
method: 'POST', headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ messages: history.slice(-10) }),
|
|
});
|
|
var data = await r.json();
|
|
if (!r.ok) { wait.textContent = data.error || form.dataset.offline; track('afvist', q); return; }
|
|
wait.innerHTML = linkify(data.reply);
|
|
history.push({ role: 'assistant', content: data.reply });
|
|
track('besvaret', q);
|
|
} catch (_) {
|
|
wait.textContent = form.dataset.unreachable;
|
|
track('fejl', q);
|
|
} finally { btn.disabled = false; input.focus(); }
|
|
});
|
|
})();
|
|
</script>
|