122 lines
8.1 KiB
HTML
122 lines
8.1 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="fr">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width,initial-scale=1">
|
|
<title>WEVAL Claw Code Chat</title>
|
|
<style>
|
|
*{margin:0;padding:0;box-sizing:border-box}
|
|
:root{--bg:#0a0f1a;--card:#111827;--border:#1e293b;--text:#e2e8f0;--muted:#64748b;--accent:#22d3ee;--green:#22c55e;--user:#1e40af;--bot:#1e293b}
|
|
body{background:var(--bg);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;height:100vh;display:flex;flex-direction:column}
|
|
.hdr{background:var(--card);border-bottom:1px solid var(--border);padding:10px 16px;display:flex;align-items:center;gap:10px}
|
|
.hdr h1{font-size:15px;font-weight:700;background:linear-gradient(90deg,var(--accent),#a78bfa);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
|
|
.hdr .b{font-size:9px;padding:2px 7px;border-radius:6px;font-weight:600}
|
|
.hdr .live{background:#22c55e20;color:var(--green)}.hdr .ct{background:#a78bfa20;color:#a78bfa}
|
|
.hdr .right{margin-left:auto;font-size:10px;color:var(--muted)}
|
|
.chips{display:flex;gap:5px;flex-wrap:wrap;padding:6px 16px;background:#0d1117;border-bottom:1px solid var(--border)}
|
|
.chip{font-size:10px;padding:3px 9px;border-radius:12px;border:1px solid var(--border);color:var(--muted);cursor:pointer;transition:.2s;white-space:nowrap}
|
|
.chip:hover{border-color:var(--accent);color:var(--accent);background:#22d3ee10}
|
|
.chip.cat-infra{border-color:#f59e0b30}.chip.cat-ai{border-color:#a78bfa30}.chip.cat-sec{border-color:#ef444430}.chip.cat-data{border-color:#22c55e30}
|
|
.msgs{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:10px}
|
|
.msg{max-width:85%;padding:10px 14px;border-radius:14px;font-size:13px;line-height:1.65;animation:fadeIn .3s}
|
|
@keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
|
|
.msg.u{background:var(--user);color:#fff;align-self:flex-end;border-bottom-right-radius:4px}
|
|
.msg.b{background:var(--bot);align-self:flex-start;border-bottom-left-radius:4px}
|
|
.msg .prov{font-size:9px;color:var(--accent);margin-bottom:3px;font-weight:600;letter-spacing:.5px;text-transform:uppercase}
|
|
.msg pre{background:#080c14;padding:8px 10px;border-radius:8px;overflow-x:auto;margin:6px 0;font-size:11px;font-family:'JetBrains Mono',monospace;border:1px solid #1e293b}
|
|
.msg code{font-family:'JetBrains Mono',monospace;font-size:11px;background:#1e293b;padding:1px 4px;border-radius:3px}
|
|
.msg pre code{background:none;padding:0}
|
|
.msg strong{color:var(--accent)}
|
|
.msg ul,.msg ol{margin:4px 0 4px 18px}
|
|
.msg li{margin:2px 0}
|
|
.input-area{background:var(--card);border-top:1px solid var(--border);padding:10px 16px;display:flex;gap:8px;align-items:end}
|
|
.input-area textarea{flex:1;background:var(--bg);border:1px solid var(--border);color:var(--text);border-radius:12px;padding:10px 14px;font-size:13px;resize:none;outline:none;min-height:42px;max-height:140px;font-family:inherit;transition:.2s}
|
|
.input-area textarea:focus{border-color:var(--accent);box-shadow:0 0 0 2px #22d3ee20}
|
|
.input-area textarea::placeholder{color:var(--muted)}
|
|
.btn{background:var(--accent);color:var(--bg);border:none;border-radius:10px;padding:10px 16px;font-weight:700;cursor:pointer;font-size:13px;transition:.2s;min-width:42px;display:flex;align-items:center;justify-content:center}
|
|
.btn:hover{background:#06b6d4;transform:scale(1.02)}.btn:disabled{opacity:.4;cursor:not-allowed;transform:none}
|
|
.btn svg{width:18px;height:18px;fill:currentColor}
|
|
.welcome{text-align:center;color:var(--muted);margin:auto;max-width:440px}
|
|
.welcome h2{color:var(--accent);font-size:18px;margin-bottom:6px}
|
|
.welcome p{font-size:12px;line-height:1.6}
|
|
.typing{color:var(--accent);font-size:11px;padding:6px 14px;display:flex;align-items:center;gap:6px}
|
|
.typing .dot{width:6px;height:6px;border-radius:50%;background:var(--accent);animation:pulse .8s infinite alternate}
|
|
.typing .dot:nth-child(2){animation-delay:.2s}.typing .dot:nth-child(3){animation-delay:.4s}
|
|
@keyframes pulse{from{opacity:.3}to{opacity:1}}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="hdr">
|
|
<h1>WEVAL Claw Code</h1>
|
|
<span class="b live">97 skills</span>
|
|
<span class="b ct">6 produits</span>
|
|
<span class="right">Groq · Cerebras · Gemini · Ollama</span>
|
|
</div>
|
|
<div class="chips" id="chips">
|
|
<span class="chip cat-infra" onclick="q('Diagnostic complet WEDROID S204 et S95')">WEDROID</span>
|
|
<span class="chip cat-ai" onclick="q('Blade IA agent loop et Sentinel')">BLADE</span>
|
|
<span class="chip cat-ai" onclick="q('WEVIA PUBLIC Centre Commande 71 modules')">WEVIA</span>
|
|
<span class="chip cat-ai" onclick="q('WEVAL Manager consensus multi-provider')">MANAGER</span>
|
|
<span class="chip cat-ai" onclick="q('WEVCODE assistant code souverain 4 modes')">WEVCODE</span>
|
|
<span class="chip cat-data" onclick="q('WEVIA Life sync documents et RAG')">LIFE</span>
|
|
<span class="chip cat-data" onclick="q('Ethica HCP Maghreb stats enrichissement')">ETHICA</span>
|
|
<span class="chip cat-sec" onclick="q('NonReg 153 tests status complet')">NONREG</span>
|
|
<span class="chip cat-infra" onclick="q('Infra Docker S204 disk containers')">INFRA</span>
|
|
<span class="chip cat-ai" onclick="q('DeerFlow skills recherche web')">DEERFLOW</span>
|
|
<span class="chip cat-sec" onclick="q('Nuclei scan vulnerabilites securite')">NUCLEI</span>
|
|
<span class="chip cat-ai" onclick="q('Paperclip 150 agents orchestration')">PAPERCLIP</span>
|
|
<span class="chip cat-ai" onclick="q('OpenClaw Ollama modeles souverains')">OPENCLAW</span>
|
|
<span class="chip cat-data" onclick="q('B2B leads scraping LinkedIn prospects')">B2B</span>
|
|
<span class="chip cat-infra" onclick="q('Email MTA PMTA KumoMTA delivrabilite')">EMAIL</span>
|
|
<span class="chip cat-sec" onclick="q('L99 tests securite layers complet')">L99</span>
|
|
<span class="chip cat-data" onclick="q('Qdrant RAG embeddings knowledge base')">QDRANT</span>
|
|
<span class="chip cat-infra" onclick="q('Providers IA chaine Groq Cerebras Gemini')">PROVIDERS</span>
|
|
</div>
|
|
<div class="msgs" id="msgs">
|
|
<div class="welcome">
|
|
<h2>Claw Code Chat</h2>
|
|
<p>97 skills souverains · 6 produits WEVAL<br>Tape ta question — le routeur intelligent choisit le bon agent.</p>
|
|
</div>
|
|
</div>
|
|
<div class="input-area">
|
|
<textarea id="in" placeholder="Pose ta question ici..." rows="1" autofocus></textarea>
|
|
<button class="btn" id="btn" onclick="go()"><svg viewBox="0 0 24 24"><path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z"/></svg></button>
|
|
</div>
|
|
<script>
|
|
const API='/api/wevia-json-api.php',M=document.getElementById('msgs'),I=document.getElementById('in'),B=document.getElementById('btn');
|
|
I.addEventListener('keydown',e=>{if(e.key==='Enter'&&!e.shiftKey){e.preventDefault();go()}});
|
|
I.addEventListener('input',()=>{I.style.height='auto';I.style.height=Math.min(I.scrollHeight,140)+'px'});
|
|
function q(t){I.value=t;go()}
|
|
async function go(){
|
|
const t=I.value.trim();if(!t||B.disabled)return;
|
|
I.value='';I.style.height='auto';
|
|
const w=M.querySelector('.welcome');if(w)w.remove();
|
|
M.innerHTML+=`<div class="msg u">${esc(t)}</div>`;
|
|
M.innerHTML+=`<div class="typing" id="ty"><div class="dot"></div><div class="dot"></div><div class="dot"></div><span style="margin-left:4px">Routage intelligent...</span></div>`;
|
|
M.scrollTop=1e6;B.disabled=true;
|
|
try{
|
|
const r=await fetch(API,{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({message:t,mode:'fast'})});
|
|
const d=await r.json();
|
|
document.getElementById('ty')?.remove();
|
|
M.innerHTML+=`<div class="msg b"><div class="prov">${esc(d.provider||'WEVIA')}</div>${fmt(d.response||d.error||'...')}</div>`;
|
|
}catch(e){
|
|
document.getElementById('ty')?.remove();
|
|
M.innerHTML+=`<div class="msg b" style="border-left:2px solid #ef4444"><div class="prov">ERREUR</div>${esc(e.message)}</div>`;
|
|
}
|
|
B.disabled=false;M.scrollTop=1e6;I.focus();
|
|
}
|
|
function esc(s){return s.replace(/&/g,'&').replace(/</g,'<').replace(/>/g,'>')}
|
|
function fmt(s){
|
|
s=esc(s);
|
|
s=s.replace(/```(\w*)\n([\s\S]*?)```/g,'<pre><code>$2</code></pre>');
|
|
s=s.replace(/`([^`]+)`/g,'<code>$1</code>');
|
|
s=s.replace(/\*\*([^*]+)\*\*/g,'<strong>$1</strong>');
|
|
s=s.replace(/^- (.+)/gm,'<li>$1</li>');
|
|
s=s.replace(/(<li>.*<\/li>)/gs,'<ul>$1</ul>');
|
|
s=s.replace(/\n/g,'<br>');
|
|
return s;
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|