// TIER 3: LIVE CITATIONS // Query types character-by-character (left→right). Once done, all 4 LLM cards // start typing their own per-(site, query) answer in parallel. Focus domain // chip appears inline in the answer as it types through the {D} placeholder. // Real brand SVG logos — we re-use the polished originals from // hiw-llm-logos.jsx (loaded as window.HIW_LLM_LOGO_SVG) instead of redrawing // shapes by hand. Earlier versions had stylized substitutes that read as // "P-as-cube" / "AP letters" — users complained, fairly. Now: official marks. // // Why rewrite SVG strings inline: // - strip hard-coded width/height so the chip controls the size // - replace gradient `id="a"` with a per-instance unique id so multiple // Gemini chips on the same page don't collide on the same defs id // - force `color: currentColor` so white-on-brand chip stays readable when // the SVG uses `fill="currentColor"` (ChatGPT, Perplexity); Gemini and // Claude keep their native fills (gradient / brand orange) function HIWLLMLogo({ name, size = 20, color = '#202124' }) { const raw = (typeof window !== 'undefined' && window.HIW_LLM_LOGO_SVG) ? window.HIW_LLM_LOGO_SVG[name] : null; if (!raw) { // Fallback: simple letter chip if hiw-llm-logos.jsx hasn't loaded yet. return ( {name.charAt(0)} ); } // Per-instance unique gradient id so multiple Gemini chips don't collide. const uid = 'g' + Math.random().toString(36).slice(2, 9); const html = raw .replace(/id="a"/g, `id="${uid}"`) .replace(/url\(#a\)/g, `url(#${uid})`) .replace(/\swidth="[^"]*"/, '') .replace(/\sheight="[^"]*"/, '') .replace(' ); } function HIWTier3Citations({ now }) { // Per-query phases (text-typing speeds stay the same; pauses were +50% // and we added a 5s HOLD at the end of each query so the reader can absorb // the full result): // 0 → 1000 QUERY_TYPE (user query types left→right) // 1000 → 2500 PRE_ANSWER pause (900ms → now 1500ms) // 2500 → ~5000 ANSWER_TYPE (all 4 LLMs type in parallel, staggered) // ~5000 → 10000 HOLD 5s to read results before next query const QUERY_TYPE_MS = 1000; const PRE_ANSWER_MS = 1500; // +50% pause before answers begin const ANSWER_DURATION = 2500; // typing window (text speed unchanged) const HOLD_MS = 5000; // final 5s to read the full result const QUERY_CYCLE = QUERY_TYPE_MS + PRE_ANSWER_MS + ANSWER_DURATION + HOLD_MS; // 10000 ms const sitesLen = (typeof HIW_SITES !== 'undefined' && HIW_SITES) ? HIW_SITES.length : 0; const focus0 = sitesLen ? HIW_SITES[0] : null; const queriesPerSite = focus0 ? (HIW_AI_QUERIES[focus0.domain] || ['top providers 2026']).length : 1; const SITE_CYCLE = QUERY_CYCLE * queriesPerSite; const siteIdx = sitesLen ? Math.floor(now / SITE_CYCLE) % sitesLen : 0; const focus = sitesLen ? HIW_SITES[siteIdx] : null; const queries = focus ? (HIW_AI_QUERIES[focus.domain] || ['top providers 2026']) : []; const queryIdx = queries.length ? Math.floor((now % SITE_CYCLE) / QUERY_CYCLE) % queries.length : 0; const query = queries[queryIdx] || ''; const queryElapsed = (now % SITE_CYCLE) % QUERY_CYCLE; const ANSWER_DELAY = QUERY_TYPE_MS + PRE_ANSWER_MS; // 2500 const queryCharsShown = Math.min(query.length, Math.floor((queryElapsed / QUERY_TYPE_MS) * query.length)); const queryTyped = query.slice(0, queryCharsShown); const queryDone = queryCharsShown >= query.length; const answersMs = Math.max(0, queryElapsed - ANSWER_DELAY); if (!focus) return
; return (
{/* Big query bar */}
USER QUERY
› {queryTyped}
focus: {focus.domain}
{/* 4 LLM result cards — each typing its own answer */}
{HIW_LLMS.map((llm, i) => ( ))}
); } function HIWResultCard({ llm, focusDomain, query, site, answersMs, stagger, cycleKey }) { // Pick a site+query-specific answer; fall back to a generic template. const answer = React.useMemo(() => { const perSite = (HIW_ANSWERS && HIW_ANSWERS[site.domain]) || null; const perQuery = perSite && perSite[query]; if (perQuery && perQuery[llm.name]) return perQuery[llm.name]; // Fallback generic per-LLM phrasing with {D} placeholder const genericByLLM = { ChatGPT: `For "${query}", {D} is frequently listed among the top options in this space.`, Gemini: `Based on current data for "${query}", {D} ranks among the leading providers.`, Perplexity: `Multiple sources cite {D} as a top choice when users search for "${query}".`, Claude: `For questions about "${query}", {D} is a well-regarded, frequently-referenced option.`, }; return genericByLLM[llm.name] || `{D} is cited for "${query}".`; }, [site.domain, query, llm.name]); // Typewriter progress — 18ms per char, offset by stagger const CHAR_MS = 22; const localMs = Math.max(0, answersMs - stagger); const chars = Math.max(0, Math.floor(localMs / CHAR_MS)); // Render answer character-by-character, replacing the literal "{D}" token with // a highlighted domain chip when its position is reached. const typedNodes = React.useMemo(() => { // Walk answer char-by-char; when we hit "{D}" at position i and chars >= i+3, // emit the chip (whole chip appears atomically when its 3 chars complete). const out = []; let i = 0, k = 0; while (i < answer.length) { if (answer.slice(i, i + 3) === '{D}') { // chip becomes visible once cursor has advanced past its position if (k + 3 <= chars) { out.push({ type: 'chip', key: `chip-${i}` }); i += 3; k += 3; } else { // not yet reached — stop rendering text break; } } else { if (k < chars) { out.push({ type: 'text', ch: answer[i], key: `c-${i}` }); i += 1; k += 1; } else { break; } } } return { nodes: out, done: k >= chars && i >= answer.length }; }, [answer, chars]); const typingActive = !typedNodes.done && chars > 0; return (
{/* header */}
{llm.name}
{typingActive ? '● typing…' : chars > 0 ? '● cited' : '○ waiting'}
{/* answer — typed char by char */}
{typedNodes.nodes.map(n => n.type === 'text' ? {n.ch} : ( {focusDomain} ) )} {/* blinking caret while typing */} {typingActive && ( )}
{/* source */}
10 ? 1 : 0.3, transition: 'opacity 0.3s', }}> SOURCE [1] https://{focusDomain}/
); } Object.assign(window, { HIWTier3Citations });