Embed

<a href="javascript:void(0)" onclick="oxiaaiLogout()" 
   style="position:fixed;top:12px;left:12px;z-index:9999;
          font-weight:700;font-size:.9rem;
          background:#ffffff;border:1px solid #e2e8f0;
          border-radius:8px;padding:6px 12px;
          color:#0f172a;text-decoration:none;
          box-shadow:0 2px 6px rgba(0,0,0,.08);">
  Log out
</a>

<script>
  function oxiaaiLogout(){
    localStorage.clear(); // clears all login/payment flags
    alert("You have been logged out.");
    location.reload();    // refresh page to reset UI
  }
</script>

<div id="oxiaai" style="font-family:Inter,system-ui,-apple-system,'Segoe UI',Arial;max-width:980px;margin:0 auto;padding:12px">
  <style>
    :root{--ink:#0f172a;--line:#e5e7eb;--tint:#f7f9fc;--brand:#1f6feb}
    .ox-card{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#fff}
    .ox-head{
      position:sticky; top:0; z-index:2;
      padding:10px 12px;text-align:center;border-bottom:1px solid var(--line);
      background:#fff;
    }
    .ox-head h3{
      margin:0;font-weight:900;color:var(--ink);
      font-size:clamp(15px,3.8vw,18px);line-height:1.15;
      white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
    }
    .ox-body{padding:12px;display:flex;flex-direction:column;gap:12px;min-height:44vh}
    .row{display:flex;gap:8px}
    .row.you{justify-content:flex-end}
    .bubble{
      display:inline-block;
      max-width:min(720px, 92vw);
      border:1px solid var(--line);
      border-radius:12px;
      padding:12px 14px;
      white-space:pre-wrap;
      line-height:1.65;
      overflow-wrap:anywhere; word-break:normal;
      font-size:16px;
    }
    .ai .bubble{background:var(--tint);color:var(--ink)}
    .you .bubble{background:var(--brand);color:#fff;border-color:var(--brand)}
    .meta{font-size:.75rem;color:#64748b;margin-bottom:4px}

    /* Chips: become horizontal scroll on tiny screens */
    .ox-suggestions{
      display:flex;gap:8px;flex-wrap:wrap;padding:10px 12px;border-top:1px dashed var(--line)
    }
    @media (max-width:420px){
      .ox-suggestions{flex-wrap:nowrap;overflow:auto;padding-bottom:6px}
      .ox-suggestions::-webkit-scrollbar{display:none}
    }
    .chip{border:1px solid var(--line);border-radius:999px;padding:.45rem .75rem;background:#fff;cursor:pointer;font-weight:700;flex:0 0 auto}

    /* Composer: sticky + iOS safe area */
    .ox-compose{
      position:sticky; bottom:0; z-index:2;
      display:flex;gap:8px;padding:10px 12px;
      border-top:1px solid var(--line);background:#fff;
      padding-bottom:calc(10px + env(safe-area-inset-bottom,0px));
    }
    .ta{flex:1;border:1px solid var(--line);border-radius:12px;padding:12px;min-height:52px}
    .send{border:1px solid var(--brand);background:var(--brand);color:#fff;border-radius:12px;padding:.9rem 1.1rem;font-weight:900;cursor:pointer;min-width:84px}
    .send[disabled]{opacity:.6;cursor:not-allowed}

    .thinking{display:inline-block;white-space:nowrap;font-style:italic;color:#64748b}

    @media (max-width:600px){
      #oxiaai{padding:8px}
      .ox-body{padding:10px}
      .ox-suggestions{padding:8px 10px}
      .ox-compose{padding:10px}
    }
  </style>

  <div class="ox-card">
    <div class="ox-head">
      <h3>OxiaAI — Your Everyday Coach</h3>
    </div>

    <div id="chat" class="ox-body" aria-live="polite"></div>

    <div class="ox-suggestions">
      <button class="chip" data-t="Mixed signals, I want clarity.">Dating clarity</button>
      <button class="chip" data-t="My boss took credit; how do I respond?">Boss took credit</button>
      <button class="chip" data-t="I panic before presentations. What helps?">Panic before talk</button>
      <button class="chip" data-t="I want a 7-day sleep routine.">Sleep routine</button>
    </div>

    <div class="ox-compose">
      <textarea id="msg" class="ta" placeholder="Message OxiaAI… (Enter = send, Shift+Enter = new line)"></textarea>
      <button id="send" class="send" type="button">Send</button>
    </div>
  </div>
</div>

<script>
(function(){
  const ENDPOINT = "https://white-moon-3555.patient-boat-4128.workers.dev";
  addEventListener('submit', (e)=>{ e.preventDefault(); e.stopPropagation(); }, true);

  const $ = s => document.querySelector(s);
  const chat = $("#chat"), msg = $("#msg"), send = $("#send");

  function scrollDown(){ chat.scrollTop = chat.scrollHeight; }

  function add(role, text){
    const row = document.createElement('div'); row.className = 'row ' + (role==='you'?'you':'ai');
    const wrap = document.createElement('div');
    if(role!=='you'){ const m=document.createElement('div'); m.className='meta'; m.textContent='AI'; wrap.appendChild(m); }
    const b = document.createElement('div'); b.className='bubble'; b.textContent = text;
    wrap.appendChild(b); row.appendChild(wrap); chat.appendChild(row); scrollDown(); return b;
  }

  async function ask(message, domain="auto"){
    try{
      const r = await fetch(ENDPOINT, {
        method:'POST', mode:'cors',
        headers:{'Content-Type':'application/json'},
        body: JSON.stringify({ message, domain })
      });
      const data = await r.json().catch(()=>({}));
      if (r.ok && typeof data.reply === 'string') return data.reply;
    }catch(_){}
    const url = ENDPOINT + '?message=' + encodeURIComponent(message) + '&domain=' + encodeURIComponent(domain);
    const r2 = await fetch(url, { method:'GET', mode:'cors' });
    const data2 = await r2.json().catch(()=>({}));
    if (!r2.ok) throw new Error(data2.detail || ('HTTP '+r2.status));
    return data2.reply || 'Sorry, no reply.';
  }

  function typeThink(el, full){
    const plain = String(full||'');
    el.innerHTML = ''; const caret = document.createElement('span'); caret.textContent=' ▍'; caret.style.opacity=.6;
    let i=0; const timer=setInterval(()=>{
      el.textContent = plain.slice(0, ++i); el.appendChild(caret); scrollDown();
      if(i>=plain.length){ clearInterval(timer); caret.remove(); }
    }, 8);
  }

  let busy = false;
  async function sendNow(){
    if (busy) return;
    const text = (msg.value||'').trim(); if(!text) return;
    busy = true; send.setAttribute('disabled',''); const old = send.textContent; send.textContent='Sending…';

    msg.value=''; add('you', text);
    const thinking = add('ai', 'Thinking…'); thinking.classList.add('thinking');

    try{
      const reply = await ask(text, 'auto');
      thinking.classList.remove('thinking'); thinking.textContent = ''; typeThink(thinking, reply);
    }catch(e){
      thinking.classList.remove('thinking'); thinking.textContent = '⚠️ ' + (e.message||'Network error');
    }finally{
      busy = false; send.removeAttribute('disabled'); send.textContent = old;
      msg.focus();
    }
  }

  send.addEventListener('click', sendNow);
  send.addEventListener('touchstart', e=>{ e.preventDefault(); sendNow(); }, {passive:false});
  msg.addEventListener('keydown', e=>{ if(e.key==='Enter' && !e.shiftKey){ e.preventDefault(); sendNow(); }});
  document.querySelectorAll('#oxiaai .chip[data-t]').forEach(b=> b.addEventListener('click', ()=>{ msg.value=b.getAttribute('data-t'); msg.focus(); }));

  // Welcome
  add('ai', "👋 Welcome! Ask about relationships, work, stress, culture or safety. I’ll reply with a short, actionable plan.");
})();
</script>

<script>
(function(){
  const PRO_FLAG = "OXIAAI_IS_PRO";
  const HOME_URL = "https://oxiaai.com/"; // where to send non-members

  // 1) Not logged in? bounce to home
  if (localStorage.getItem(PRO_FLAG) !== "1") {
    window.location.replace(HOME_URL + "#join");
    return;
  }

  // 2) Optional: show who’s logged in (if you want)
  const em = localStorage.getItem("OXIAAI_PRO_EMAIL");
  if (em) {
    console.log("OxiaAI Pro — logged in as", em);
  }

  // 3) Add a tiny "Log out" (optional)
  window.oxiaaiLogout = function(){
    localStorage.removeItem(PRO_FLAG);
    localStorage.removeItem("OXIAAI_PRO_EMAIL");
    alert("Logged out");
    window.location.replace(HOME_URL);
  };
})();
</script>