// v5/concierge.jsx — work cards + the concierge. Visitors type into an inline
// bar; the conversation only opens (as a movable, resizable window) after the
// first submit. Brain, intents, panels and case data are shared with v3.
(() => {
const { useState, useEffect, useRef } = React;
// card thumbnail: mirrors the case-study hero, or its own upload. Shape,
// fit and focal point come from the owner's media editor (default landscape).
function Thumb({ p, owner, children, noShape }) {
const TK = 'dv3.thumb.' + p.id;
const [mode, setMode] = useState(() => localStorage.getItem(TK) || 'hero');
const hero = useMedia('r-' + p.id + '-hero'), own = useMedia('case-' + p.id);
const m = mode === 'hero' ? (hero && hero.src ? hero : own) : (own && own.src ? own : hero);
const key = 'thumb-' + p.id, f = getFx(key);
const fig = [mode === 'hero' ? hero : own, mode === 'hero' ? own : hero].find(x => x && !x.src && x.link && isFigma(x.link));
const edit = e => { e.stopPropagation(); e.preventDefault(); openEd(mode); };
const openEd = mode => {
const src = mode === 'hero' ? 'r-' + p.id + '-hero' : 'case-' + p.id;
window.__editMedia && __editMedia({ title: p.client + ' — thumbnail', shapes: true, link: true, ctx: 'thumb', render: () => ,
items: [{ id: src, key, label: mode === 'hero' ? 'Using case-study hero' : 'Using own upload' }],
extra: Image source{[['hero', 'Case-study hero'], ['own', 'Own thumbnail upload']].map(([v, l]) =>
)}
Switching source reopens the editor on that image.
});
};
return (
{m && m.src ?
: (p.thumb || p.hero) ? 
: fig ?
: owner ?
: {p.client}}
{children}
{owner && e.key === 'Enter' && edit(e)}>Edit image}
);
}
// hover / focus reveals the work's headline stat over the image
function WorkCard({ p, i, onOpen, owner, sm, tall }) {
return (
);
}
// 1-up row: image and text side by side, alternating sides down the list
const teaser = t => { const x = String(t || '').replace(/\*\*/g, '').replace(/\s+/g, ' ').trim(); const m = x.match(/^(.{40,220}?[.!?])(\s|$)/); return m ? m[1] : x.slice(0, 200); };
function WorkRow({ p, i, onOpen, owner }) {
return (
);
}
const Spark = () => ;
const Arrow = () => ;
// the inline bar — a real input; nothing opens until they submit
function AskBar({ onAsk, placeholder = 'Ask my concierge anything about my work…', id, small }) {
const [v, setV] = useState('');
const submit = e => { e.preventDefault(); const q = v.trim(); if (!q) return; setV(''); onAsk({ q }); };
return (
);
}
const WK = 'dv5.win';
const defBox = () => {
const w = Math.min(560, innerWidth - 32), h = Math.min(640, innerHeight - 96);
return { x: innerWidth - w - 24, y: innerHeight - h - 24, w, h };
};
const clampBox = b => {
const w = Math.max(320, Math.min(b.w, innerWidth - 16)), h = Math.max(260, Math.min(b.h, innerHeight - 16));
return { w, h, x: Math.max(8, Math.min(b.x, innerWidth - w - 8)), y: Math.max(8, Math.min(b.y, innerHeight - h - 8)) };
};
const BIG = ['resume', 'summary', 'bio', 'quest'];
function Concierge({ ask, min, setMin, onClose, onRead, onGo, onPanel, owner }) {
const [msgs, setMsgs] = useState([]);
const [busy, setBusy] = useState(false);
const [v, setV] = useState('');
const [max, setMax] = useState(false);
const [box, setBox] = useState(() => { try { return clampBox(JSON.parse(localStorage.getItem(WK)) || defBox()); } catch (e) { return clampBox(defBox()); } });
const body = useRef(null); const inp = useRef(null); const msgsRef = useRef(msgs); const winRef = useRef(null);
msgsRef.current = msgs;
const I = () => window.INTENTS || [];
const byId = id => I().find(x => x.id === id);
useEffect(() => { localStorage.setItem(WK, JSON.stringify(box)); }, [box]);
useEffect(() => { const r = () => setBox(b => clampBox(b)); addEventListener('resize', r); return () => removeEventListener('resize', r); }, []);
useEffect(() => { const b = body.current; if (b) b.scrollTo({ top: b.scrollHeight, behavior: 'smooth' }); }, [msgs, busy]);
useEffect(() => {
if (!ask) return;
if (ask.intent) { const it = byId(ask.intent); if (it) answer(it, it.q); }
else if (ask.q) send(ask.q);
setTimeout(() => inp.current && inp.current.focus({ preventScroll: true }), 60);
}, [ask && ask.n]);
useEffect(() => { if (!min) setTimeout(() => inp.current && inp.current.focus({ preventScroll: true }), 60); }, [min]);
// drag (title bar) + resize (corner) with pointer events
const drag = (e, kind) => {
if (max || e.button !== 0 || e.target.closest('button')) return;
e.preventDefault();
const sx = e.clientX, sy = e.clientY, b0 = box;
const mv = ev => {
const dx = ev.clientX - sx, dy = ev.clientY - sy;
if (kind === 'move') { setBox(clampBox({ ...b0, x: b0.x + dx, y: b0.y + dy })); return; }
let { x, y, w, h } = b0;
if (kind.includes('e')) w = b0.w + dx;
if (kind.includes('s')) h = b0.h + dy;
if (kind.includes('w')) { w = Math.max(320, b0.w - dx); x = b0.x + b0.w - w; }
if (kind.includes('n')) { h = Math.max(260, b0.h - dy); y = b0.y + b0.h - h; }
setBox(clampBox({ x, y, w, h }));
};
const up = () => { removeEventListener('pointermove', mv); removeEventListener('pointerup', up); document.body.classList.remove('x-dragging'); };
addEventListener('pointermove', mv); addEventListener('pointerup', up); document.body.classList.add('x-dragging');
};
// keyboard: arrows move, shift+arrows resize
const keys = e => {
const d = { ArrowLeft: [-24, 0], ArrowRight: [24, 0], ArrowUp: [0, -24], ArrowDown: [0, 24] }[e.key];
if (!d || max) return; e.preventDefault();
setBox(b => clampBox(e.shiftKey ? { ...b, w: b.w + d[0], h: b.h + d[1] } : { ...b, x: b.x + d[0], y: b.y + d[1] }));
};
const push = m => setMsgs(x => [...x, m]);
const big = it => it && it.kind === 'panel' && BIG.includes(it.panel);
const reply = it => { push({ say: it.say, intent: it }); if (big(it)) setTimeout(() => onPanel(it.panel), 350); };
const answer = (it, q) => { push({ me: q }); setBusy(true); setTimeout(() => { setBusy(false); reply(it); }, 650); };
// password-protected cases: ask for the password in a follow-up before answering
const [pend, setPend] = useState(null); const pendRef = useRef(null); pendRef.current = pend;
const lockedFor = q => { const L = window.DV_LOCK; return L && !owner && !L.isOpen() && L.mentions(q); };
const send = async (q, quiet) => {
const L = window.DV_LOCK, waiting = pendRef.current;
if (waiting && L && !quiet) {
if (/\s/.test(q.trim())) setPend(null); // a full sentence, not a password: drop the request and answer normally
else {
push({ me: '•'.repeat(Math.min(12, q.length)) }); setBusy(true);
const ok = await L.unlock(q); await new Promise(res => setTimeout(res, 450)); setBusy(false);
if (!ok) { push({ say: 'That password didn’t work. Try again, or ask me about something else.' }); return; }
setPend(null); push({ say: 'Thanks, you’re in. Both protected case studies are unlocked for this visit.' });
return send(waiting, true);
}
}
if (!quiet) push({ me: q });
if (lockedFor(q)) {
setBusy(true); await new Promise(res => setTimeout(res, 450)); setBusy(false);
setPend(q); push({ say: 'That’s one of Dan’s password-protected case studies. What’s the password? If you don’t have it, reach out through the contact form and Dan will share it.' });
setTimeout(() => inp.current && inp.current.focus({ preventScroll: true }), 60);
return;
}
setBusy(true);
const low = q.toLowerCase();
const named = PROJECTS.find(p => low.includes(p.client.toLowerCase()) || low.includes(p.id));
if (named && /\b(show|open|read|see|launch|view|walk|tell|case|play)\b/i.test(q)) {
await new Promise(res => setTimeout(res, 500)); setBusy(false);
push({ say: `Opening ${named.client} — ${named.headline.v}, ${named.headline.l}.`, intent: { kind: 'cases', only: [named.id] } });
setTimeout(() => onRead(named.id), 900); return;
}
const matchIntent = s => {
const own = I().find(i => typeof i.keys === 'string' && i.keys.split(',').some(k => k.trim() && s.toLowerCase().includes(k.trim().toLowerCase())));
const hit = own ? [null, own.id] : (window.MATCH || []).find(([re]) => re.test(s));
if (!hit) return null;
const it = byId(hit[1]);
return it ? { ...it, strong: /^(show|see|open|view|give|read|play)\b/i.test(s.trim()) || s.trim().split(/\s+/).length <= 4 } : null;
};
let r;
try { r = await window.think(q, msgsRef.current.filter(m => m.me || m.say).map(m => ({ role: m.me ? 'me' : 'ai', text: m.me || m.say })), matchIntent); }
catch (e) { r = { type: 'talk', say: 'Something went sideways on my end — try again, or tap a shortcut.' }; }
await new Promise(res => setTimeout(res, 400));
setBusy(false);
if (r.type === 'route' && r.topic) { const it = byId(r.topic) || I()[0]; push({ say: r.say || it.say, intent: it }); if (big(it)) setTimeout(() => onPanel(it.panel), 350); }
else if (r.type === 'confirm') push({ say: r.say, confirm: { caseId: r.caseId, topic: r.topic, ask: r.ask } });
else push({ say: r.say, chat: true });
};
const submit = e => { e.preventDefault(); const q = v.trim(); if (!q || busy) return; setV(''); send(q); };
const accept = c => {
if (c.caseId) { const p = PROJECTS.find(x => x.id === c.caseId); push({ me: 'Yes, open it' });
if (p && p.locked && lockedFor(p.client)) { setPend('Tell me about ' + p.client); push({ say: 'That case study is password-protected. What’s the password?' }); return; } if (p) { push({ say: `Opening ${p.client}.`, intent: { kind: 'cases', only: [p.id] } }); setTimeout(() => onRead(p.id), 450); } }
else { const it = byId(c.topic || 'all') || I()[0]; answer(it, 'Yes — ' + it.q.toLowerCase()); }
};
const work = p => !p.personal && !p.hackathon;
const casesFor = it => it.only ? PROJECTS.filter(p => it.only.includes(p.id))
: it.cat ? PROJECTS.filter(p => (p.cats || []).includes(it.cat)) : PROJECTS.filter(work);
const chips = ids => ids.map(id => byId(id)).filter(Boolean).map(it => );
const primary = I().filter(i => i.primary).map(i => i.id);
const result = (m, last) => {
const it = m.intent; if (!it) return null;
if (it.kind === 'cases') {
const list = casesFor(it);
return <>
{list.map(p => )}
{last && !it.only && }
;
}
if (it.kind === 'panel' && BIG.includes(it.panel)) return ;
if (it.kind === 'panel' && window.PANELS && PANELS[it.panel]) return {React.createElement(PANELS[it.panel])}
;
if (it.kind === 'play') return <>
{(window.PLAY || []).map(p => (
))}
{PROJECTS.filter(p => p.personal || p.hackathon).map(p => )}
{last && }
;
return null;
};
const style = max ? { left: 'calc(var(--xr) + 12px)', top: 12, width: 'calc(100vw - var(--xr) - 24px)', height: 'calc(100vh - 24px)' }
: { left: box.x, top: box.y, width: box.w, height: box.h };
return (
drag(e, 'move')} onDoubleClick={() => setMax(m => !m)} tabIndex={0} onKeyDown={keys}
aria-label="Concierge window. Drag, or use arrow keys to move and shift plus arrow keys to resize." >
concierge~/dan-tieu
{msgs.length > 0 && }
{msgs.map((m, i) => m.me ?
You: {m.me}
: (
Concierge: {m.say}
{m.confirm && <>
{m.confirm.ask &&
{m.confirm.ask}
}
}
{result(m, i === msgs.length - 1)}
{i === msgs.length - 1 && !busy && (m.chat || m.intent) && (() => {
const k = m.intent ? (m.intent.kind === 'panel' ? m.intent.panel : m.intent.kind) : null;
const nx = k && window.NEXT && NEXT[k];
return
{chips(nx ? nx.ids : (m.chat ? ['all', 'resume', 'hiring'] : primary))}
;
})()}
))}
{busy &&
}
{!max && ['nw', 'ne', 'sw', 'se'].map(d =>
drag(e, d)} aria-hidden="true" />)}
);
}
Object.assign(window, { Thumb, WorkCard, WorkRow, AskBar, Concierge, Spark });
})();