(function(){ 'use strict'; if (document.getElementById('npdbot-open')) { console.log('[Newark Chatbot] Already loaded'); return; } console.log('[Newark Chatbot] Initializing...'); const CONFIG = { endpoint: 'https://newark-pd.vercel.app/api/chat', formSelector: '#email-form-2', primaryColor: '#003B5C', accentColor: '#002847', logoUrl: 'https://images.squarespace-cdn.com/content/v1/64403555565a54fba4e2cc60/dd6698b9-2ff5-400e-aacc-fc78e98ca32a/Newark+PD+Logo.png', deptName: 'Newark PD', launcherText: '💬 Ask Newark PD', welcomeMessage: 'Hi! Ask me anything about joining the Newark Police Department.', storagePrefix: 'npdbot-' }; const STORAGE_KEY = CONFIG.storagePrefix + 'history-v1'; const THREAD_KEY = CONFIG.storagePrefix + 'thread-v1'; const QUICK_HIDE_KEY = CONFIG.storagePrefix + 'quick-hidden'; const style = document.createElement('style'); style.id = 'npdbot-styles'; style.textContent = ` .npdbot-launcher{position:fixed;right:20px;bottom:20px;border:0;border-radius:999px;padding:16px 20px;font:600 15px/1.2 system-ui;box-shadow:0 8px 24px rgba(0,0,0,.2);cursor:pointer;z-index:9998;background:${CONFIG.primaryColor};color:#fff;transition:transform .2s,box-shadow .2s;-webkit-tap-highlight-color:transparent;touch-action:manipulation;min-height:48px;display:flex;align-items:center;justify-content:center;will-change:transform} .npdbot-launcher:hover{transform:scale(1.05);box-shadow:0 12px 32px rgba(0,0,0,.25)} .npdbot-launcher:active{transform:scale(0.98)} .npdbot-panel{position:fixed;right:20px;bottom:90px;width:420px;height:680px;max-height:calc(100vh - 120px);background:#fff;border-radius:16px;box-shadow:0 12px 40px rgba(0,0,0,.2);display:none;flex-direction:column;overflow:hidden;z-index:9999;border:1px solid #e8e8e8;will-change:opacity} .npdbot-header{display:flex;align-items:center;gap:12px;padding:16px;border-bottom:1px solid #eee;background:${CONFIG.primaryColor};color:#fff;flex-shrink:0} .npdbot-logo{width:36px;height:36px;border-radius:8px;object-fit:cover;flex-shrink:0} .npdbot-title{flex:1;font:600 16px system-ui;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .npdbot-clear{border:0;background:rgba(255,255,255,.15);color:#fff;font:600 13px system-ui;padding:8px 12px;border-radius:8px;cursor:pointer;transition:background .2s;-webkit-tap-highlight-color:transparent;min-height:40px;flex-shrink:0} .npdbot-clear:hover{background:rgba(255,255,255,.25)} .npdbot-clear:active{background:rgba(255,255,255,.3)} .npdbot-quickwrap{padding:12px 16px 10px;background:#f6f8fb;border-bottom:1px solid #eef0f3;flex-shrink:0} .npdbot-quickbar{display:grid;grid-template-columns:1fr 1fr;gap:10px} .npdbot-quick{display:flex;align-items:center;gap:8px;justify-content:center;border:2px solid #e5e8ee;border-radius:10px;background:#fff;padding:10px 8px;font:600 13px/1.2 system-ui;color:${CONFIG.primaryColor};cursor:pointer;box-shadow:0 2px 4px rgba(0,0,0,.05);transition:all .2s;-webkit-tap-highlight-color:transparent;min-height:42px} .npdbot-quick:hover{box-shadow:0 4px 8px rgba(0,0,0,.1);transform:translateY(-2px);border-color:${CONFIG.primaryColor}} .npdbot-quick:active{box-shadow:0 1px 2px rgba(0,0,0,.08);transform:scale(0.97)} .npdbot-quick .i{font-size:18px;line-height:1;flex-shrink:0} .npdbot-quickwrap.hidden{display:none} .npdbot-messages{padding:16px;overflow-y:auto;-webkit-overflow-scrolling:touch;flex:1;background:#f8f9fa;display:flex;flex-direction:column;gap:16px;contain:layout style paint} .npdbot-bubble{max-width:85%;padding:12px 16px;border-radius:16px;font:15px/1.5 system-ui;white-space:pre-wrap;word-wrap:break-word} .npdbot-bubble-assistant{align-self:flex-start;background:#1e293b;color:#fff;border-radius:16px;border-bottom-left-radius:4px;box-shadow:0 2px 4px rgba(0,0,0,.1)} .npdbot-bubble-user{align-self:flex-end;background:#fff;color:#1f2937;border:1px solid #e5e7eb;border-radius:16px;border-bottom-right-radius:4px;box-shadow:0 2px 4px rgba(0,0,0,.05)} .npdbot-timestamp{font:12px system-ui;color:#9ca3af;margin-top:6px;padding:0 4px} .npdbot-thinking{align-self:flex-start;background:#1e293b;color:#fff;border-radius:16px;border-bottom-left-radius:4px;padding:12px 16px;display:flex;gap:5px;align-items:center} .npdbot-thinking-dot{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.6);animation:npdbot-bounce 1.4s infinite ease-in-out both} .npdbot-thinking-dot:nth-child(1){animation-delay:-0.32s} .npdbot-thinking-dot:nth-child(2){animation-delay:-0.16s} @keyframes npdbot-bounce{0%,80%,100%{transform:scale(0)}40%{transform:scale(1)}} .npdbot-input{display:flex;gap:10px;border-top:1px solid #eee;padding:14px 16px;background:#fff;flex-shrink:0} .npdbot-input input{flex:1;padding:14px 16px;border:1px solid #d1d5db;border-radius:12px;font:16px system-ui;outline:none;-webkit-appearance:none;min-height:48px} .npdbot-input input:focus{border-color:${CONFIG.primaryColor}} .npdbot-input button{padding:14px 20px;border:0;border-radius:12px;background:${CONFIG.primaryColor};color:#fff;font:600 15px system-ui;cursor:pointer;transition:background .2s,transform .1s;-webkit-tap-highlight-color:transparent;min-height:48px;min-width:80px;flex-shrink:0} .npdbot-input button:hover:not(:disabled){background:${CONFIG.accentColor}} .npdbot-input button:active:not(:disabled){background:${CONFIG.accentColor};transform:scale(0.97)} .npdbot-input button:disabled{background:#94a3b8;cursor:not-allowed} .npdbot-footer{padding:12px 16px;background:#2c3e50;border-top:1px solid #34495e;text-align:center;font:12px system-ui;color:#ecf0f1;flex-shrink:0} .npdbot-footer a{color:#f39c12;text-decoration:none;font-weight:600;transition:color .2s} .npdbot-footer a:hover{color:#e67e22;text-decoration:underline} .npdbot-footer a:active{color:#e67e22} @media (max-width:767px){ .npdbot-panel{inset:0;width:100%;height:100%;max-height:100%;border-radius:0;right:0;bottom:0;border:none;padding-bottom:env(safe-area-inset-bottom)} .npdbot-launcher{right:16px;bottom:16px} .npdbot-header{padding-top:calc(16px + env(safe-area-inset-top))} .npdbot-input{padding-bottom:calc(14px + env(safe-area-inset-bottom))} } @media (max-width:374px){ .npdbot-quickbar{grid-template-columns:1fr} .npdbot-quick{font-size:13px;padding:10px 8px} .npdbot-bubble{font:14px/1.5 system-ui} } `; document.head.appendChild(style); const launcher = document.createElement('button'); launcher.id = 'npdbot-open'; launcher.className = 'npdbot-launcher'; launcher.textContent = CONFIG.launcherText; launcher.setAttribute('aria-label', 'Open ' + CONFIG.deptName + ' Chat'); const panel = document.createElement('div'); panel.id = 'npdbot'; panel.className = 'npdbot-panel'; panel.setAttribute('role', 'dialog'); panel.setAttribute('aria-label', CONFIG.deptName + ' Chat'); panel.innerHTML = ` <div class="npdbot-header"> <img class="npdbot-logo" alt="${CONFIG.deptName}" src="${CONFIG.logoUrl}" onerror="this.style.display='none'"> <div class="npdbot-title">${CONFIG.deptName} Recruiting</div> <button id="npdbot-clear" class="npdbot-clear" type="button" aria-label="Clear conversation">Clear</button> </div> <div id="npdbot-quickwrap" class="npdbot-quickwrap"> <div class="npdbot-quickbar" id="npdbot-quickbar"></div> </div> <div id="npdbot-log" class="npdbot-messages" role="log" aria-live="polite"></div> <div class="npdbot-input"> <input id="npdbot-text" placeholder="Type your message..." aria-label="Message ${CONFIG.deptName}" autocomplete="off" autocorrect="off" autocapitalize="sentences" /> <button id="npdbot-send" type="button" aria-label="Send message">Send</button> </div> <div class="npdbot-footer"> Powered by <a href="https://www.allstartalent.us" target="_blank" rel="noopener">All-Star Talent</a> </div> `; document.body.appendChild(launcher); document.body.appendChild(panel); const log = panel.querySelector('#npdbot-log'); const input = panel.querySelector('#npdbot-text'); const send = panel.querySelector('#npdbot-send'); const clear = panel.querySelector('#npdbot-clear'); const quickWrap = panel.querySelector('#npdbot-quickwrap'); const quickBar = panel.querySelector('#npdbot-quickbar'); const QUICK = [ { label: 'Salary', prompt: 'What is the starting salary?', emoji: '💰' }, { label: 'Academy', prompt: 'Tell me about the police academy', emoji: '🎓' }, { label: 'Apply', prompt: 'How do I apply to ' + CONFIG.deptName + '?', emoji: '📝' }, { label: 'Benefits', prompt: 'What benefits does ' + CONFIG.deptName + ' offer?', emoji: '🏥' }, ]; function loadHist(){ try{return JSON.parse(localStorage.getItem(STORAGE_KEY))||[]}catch(_){return[]} } function saveHist(h){ try{localStorage.setItem(STORAGE_KEY, JSON.stringify(h.slice(-30)))}catch(_){ } } function loadThread(){ try{return localStorage.getItem(THREAD_KEY)||null}catch(_){return null} } function saveThread(t){ try{localStorage.setItem(THREAD_KEY, t)}catch(_){ } } function clearAll(){ try{ localStorage.removeItem(STORAGE_KEY); localStorage.removeItem(THREAD_KEY); localStorage.removeItem(QUICK_HIDE_KEY); }catch(_){ } } function now(){ const d=new Date(); let h=d.getHours(), m=d.getMinutes(), am=h>=12?'PM':'AM'; h=h%12||12; return `${h}:${String(m).padStart(2,'0')} ${am}`; } function showThinking(){ const wrap=document.createElement('div'); wrap.id='npdbot-thinking-indicator'; wrap.className='npdbot-thinking'; wrap.innerHTML='<div class="npdbot-thinking-dot"></div><div class="npdbot-thinking-dot"></div><div class="npdbot-thinking-dot"></div>'; log.appendChild(wrap); log.scrollTop = log.scrollHeight; return wrap; } function hideThinking(){ const el=document.getElementById('npdbot-thinking-indicator'); if(el) el.remove(); } function bubble(role,text,silent){ const wrap=document.createElement('div'); const b=document.createElement('div'); b.className = role==='user' ? 'npdbot-bubble npdbot-bubble-user' : 'npdbot-bubble npdbot-bubble-assistant'; b.textContent=text; const t=document.createElement('div'); t.className='npdbot-timestamp'; t.textContent=now(); if(role==='user') t.style.textAlign='right'; wrap.appendChild(b); wrap.appendChild(t); log.appendChild(wrap); if(!silent){ const h=loadHist(); h.push({role,content:text}); saveHist(h); } requestAnimationFrame(()=>{ log.scrollTop = log.scrollHeight; }); } function render(){ const h=loadHist(); log.innerHTML=''; if(h.length===0) { bubble('assistant', CONFIG.welcomeMessage, true); } else { const frag = document.createDocumentFragment(); h.slice(-12).forEach(m=>{ const wrap=document.createElement('div'); const b=document.createElement('div'); b.className = m.role==='user' ? 'npdbot-bubble npdbot-bubble-user' : 'npdbot-bubble npdbot-bubble-assistant'; b.textContent=m.content; const t=document.createElement('div'); t.className='npdbot-timestamp'; t.textContent=''; if(m.role==='user') t.style.textAlign='right'; wrap.appendChild(b); wrap.appendChild(t); frag.appendChild(wrap); }); log.appendChild(frag); requestAnimationFrame(()=>{ log.scrollTop = log.scrollHeight; }); } } function nudgeForm(){ const el=document.querySelector(CONFIG.formSelector); if(!el) return; el.scrollIntoView({behavior:'smooth', block:'start'}); const orig=el.style.boxShadow; el.style.boxShadow='0 0 0 3px rgba(0,59,92,.35)'; setTimeout(()=>{ el.style.boxShadow=orig; }, 1800); } function renderQuick(){ quickBar.innerHTML = ''; QUICK.forEach(q=>{ const btn = document.createElement('button'); btn.type='button'; btn.className='npdbot-quick'; btn.setAttribute('aria-label', q.label); btn.innerHTML = `<span class="i" aria-hidden="true">${q.emoji}</span><span>${q.label}</span>`; btn.onclick = ()=>{ input.value = q.prompt; sendMsg(); }; quickBar.appendChild(btn); }); if (localStorage.getItem(QUICK_HIDE_KEY)==='1') quickWrap.classList.add('hidden'); else quickWrap.classList.remove('hidden'); } function toggleBodyScroll(disable){ if(window.innerWidth < 768){ document.body.style.overflow = disable ? 'hidden' : ''; } } launcher.onclick = ()=>{ const open = panel.style.display==='flex'; panel.style.display = open ? 'none' : 'flex'; toggleBodyScroll(!open); if(!open){ setTimeout(()=>{ input.focus(); }, 100); render(); renderQuick(); } }; clear.onclick = ()=>{ if(confirm('Clear this conversation? This will start a new chat.')){ clearAll(); log.innerHTML = ''; bubble('assistant', CONFIG.welcomeMessage, true); renderQuick(); } }; async function sendMsg(){ const q=input.value.trim(); if(!q) return; bubble('user', q); input.value=''; send.disabled=true; input.disabled=true; const h=loadHist(); h.push({role:'user',content:q}); saveHist(h); quickWrap.classList.add('hidden'); localStorage.setItem(QUICK_HIDE_KEY, '1'); const thinkingEl = showThinking(); const threadId = loadThread(); try{ console.log('[Newark Bot] Sending message to:', CONFIG.endpoint); const controller = new AbortController(); const timeoutId = setTimeout(() => controller.abort(), 30000); const r=await fetch(CONFIG.endpoint,{ method:'POST', headers:{'Content-Type':'application/json'}, body:JSON.stringify({message:q, threadId: threadId}), signal: controller.signal }); clearTimeout(timeoutId); hideThinking(); console.log('[Newark Bot] Response status:', r.status); if(!r.ok){ console.error('[Newark Bot] API error:', r.status, r.statusText); bubble('assistant','Sorry—server error ('+r.status+'). Please try again or contact recruiting at 302-366-7100 x 3499.'); return; } const data=await r.json(); console.log('[Newark Bot] Response data:', data); if(data.success && data.reply){ bubble('assistant', data.reply); if(data.threadId) saveThread(data.threadId); if(data.scrollToForm) setTimeout(nudgeForm,150); } else { console.error('[Newark Bot] Invalid response:', data); bubble('assistant','Sorry—I encountered an error. Please contact recruiting at policerecruiting@newark.de.us or 302-366-7100 x 3499.'); } }catch(e){ hideThinking(); console.error('[Newark Bot] Fetch error:', e); if(e.name === 'AbortError'){ bubble('assistant','Request timed out. Please try again or contact recruiting at 302-366-7100 x 3499.'); } else { bubble('assistant','Sorry—network error. Please check your connection or contact recruiting at policerecruiting@newark.de.us.'); } } finally { send.disabled=false; input.disabled=false; input.focus(); } } send.onclick = sendMsg; input.addEventListener('keydown', e=>{ if(e.key==='Enter' && !send.disabled) sendMsg(); }); document.addEventListener('keydown', e=>{ if(e.key==='Escape' && panel.style.display==='flex'){ panel.style.display='none'; toggleBodyScroll(false); } }); console.log('[Newark Chatbot] ✅ Loaded successfully'); })();