widget/rmi-chat.html

#!/usr/bin/env python3
"""Build RMI Chat Widget — embeddable on rugmunch.io. Talks to Dify API."""
WIDGET_HTML = r'''<div id="rmi-chat-widget" style="position:fixed;bottom:20px;right:20px;z-index:9999;font-family:-apple-system,BlinkMacSystemFont,sans-serif">
  <button id="rmi-chat-toggle" onclick="document.getElementById('rmi-chat-body').classList.toggle('rmi-hidden')" style="width:56px;height:56px;border-radius:50%;background:linear-gradient(135deg,#7c3aed,#a855f7);border:none;color:#fff;font-size:24px;cursor:pointer;box-shadow:0 4px 12px rgba(124,58,237,0.4)">🛡</button>
  <div id="rmi-chat-body" class="rmi-hidden" style="position:absolute;bottom:70px;right:0;width:380px;height:520px;background:#0f0f1a;border-radius:16px;border:1px solid #1e1e3a;box-shadow:0 8px 32px rgba(0,0,0,0.5);display:flex;flex-direction:column;overflow:hidden">
    <div style="background:linear-gradient(135deg,#7c3aed,#4c1d95);padding:12px 16px;color:#fff;font-weight:600;font-size:14px">RMI Crypto Expert <span style="font-size:10px;opacity:0.7;float:right">AI-Powered</span></div>
    <div id="rmi-chat-messages" style="flex:1;overflow-y:auto;padding:12px;color:#e2e8f0;font-size:13px;line-height:1.5"></div>
    <div style="padding:8px;border-top:1px solid #1e1e3a;display:flex;gap:6px">
      <input id="rmi-chat-input" onkeydown="if(event.key==='Enter')rmiSend()" placeholder="Ask about any token..." style="flex:1;padding:10px 12px;border-radius:8px;border:1px solid #2d2d5e;background:#1a1a2e;color:#e2e8f0;font-size:13px;outline:none">
      <button onclick="rmiSend()" style="padding:10px 16px;border-radius:8px;border:none;background:#7c3aed;color:#fff;font-size:13px;cursor:pointer;font-weight:600">Send</button>
    </div>
    <div style="padding:4px 12px 8px;font-size:10px;color:#64748b;text-align:center">Not financial advice. DYOR.</div>
  </div>
  <style>.rmi-hidden{display:none!important}</style>
</div>
<script>
const RMI_API="https://rugmunch.io/api/v1/dify-tools";
let rmiConvId=null;
async function rmiSend(){
  const input=document.getElementById("rmi-chat-input");
  const msg=input.value.trim();
  if(!msg)return;
  rmiAddMsg("user",msg);
  input.value="";
  rmiAddMsg("assistant","<i>Analyzing...</i>");
  try{
    const r=await fetch("http://152.53.80.39:8899/v1/chat-messages",{
      method:"POST",
      headers:{"Authorization":"Bearer app-YOUR_DIFY_KEY","Content-Type":"application/json"},
      body:JSON.stringify({inputs:{},query:msg,response_mode:"blocking",user:"web-widget",conversation_id:rmiConvId})
    });
    const d=await r.json();
    rmiConvId=d.conversation_id;
    document.querySelectorAll(".rmi-msg.assistant").forEach(e=>e.remove());
    rmiAddMsg("assistant",d.answer||"No response");
  }catch(e){rmiAddMsg("assistant","Error connecting. Try again.")}
}
function rmiAddMsg(role,text){
  const div=document.createElement("div");
  div.className="rmi-msg "+role;
  div.innerHTML=`<div style="margin-bottom:8px;padding:8px 12px;border-radius:8px;font-size:13px;${role==='user'?'background:#1e1e3a;margin-left:20px':'background:#0f0f1a;border:1px solid #2d2d5e;margin-right:20px'}">${text}</div>`;
  document.getElementById("rmi-chat-messages").appendChild(div);
  div.scrollIntoView({behavior:"smooth"})
}
rmiAddMsg("assistant","Hi! I&apos;m the RMI Crypto Expert. Ask me about any token, market trends, or security scans. 🛡");
</script>'''
print(WIDGET_HTML)