128 lines
7.6 KiB
PHP
Executable File
128 lines
7.6 KiB
PHP
Executable File
<?php require_once __DIR__ . '/hamid-providers-config.php'; ?>
|
|
<?php
|
|
header('Content-Type: text/html; charset=UTF-8');
|
|
$baseUrl = 'http://' . $_SERVER['HTTP_HOST'];
|
|
?>
|
|
<!DOCTYPE html>
|
|
<html lang="fr">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>WEVAL MIND Widget</title>
|
|
<style>
|
|
/* THINKING BOX STYLE CLAUDE */
|
|
.hw-think{background:linear-gradient(135deg,rgba(180,140,255,0.08),rgba(140,180,255,0.04));border:1px solid rgba(180,140,255,0.25);border-radius:12px;padding:0;margin-bottom:12px;overflow:hidden;transition:all 0.3s ease}
|
|
.hw-think-head{display:flex;align-items:center;gap:10px;padding:12px 16px;cursor:pointer;color:#a78bfa;font-size:13px;font-weight:500}
|
|
.hw-think-head:hover{background:rgba(180,140,255,0.08)}
|
|
.hw-think-head .sparkle{font-size:16px;animation:sparkle-rotate 2s linear infinite}
|
|
.hw-think-head .chevron{margin-left:auto;transition:transform 0.3s;font-size:12px}
|
|
.hw-think.exp .chevron{transform:rotate(180deg)}
|
|
@keyframes sparkle-rotate{0%{transform:rotate(0deg);opacity:0.7}50%{opacity:1}100%{transform:rotate(360deg);opacity:0.7}}
|
|
.hw-think-content{max-height:0;overflow:hidden;transition:max-height 0.4s ease;font-size:12px;color:#64748b;line-height:1.6;background:rgba(0,0,0,0.02)}
|
|
.hw-think.exp .hw-think-content{max-height:300px;padding:12px 16px;border-top:1px solid rgba(180,140,255,0.15);overflow-y:auto}
|
|
.hw-think.done .sparkle{animation:none;opacity:0.5}
|
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
|
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%); min-height: 100vh; display: flex; justify-content: center; align-items: center; }
|
|
.widget-container { width: 400px; height: 600px; background: #fff; border-radius: 20px; box-shadow: 0 25px 50px rgba(0,0,0,0.3); display: flex; flex-direction: column; overflow: hidden; }
|
|
.widget-header { background: linear-gradient(135deg, #00d4ff, #0099cc); color: white; padding: 20px; display: flex; align-items: center; gap: 15px; }
|
|
.widget-header .avatar { width: 50px; height: 50px; background: rgba(255,255,255,0.2); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 24px; }
|
|
.widget-header .info h2 { font-size: 18px; margin-bottom: 3px; }
|
|
.widget-header .info span { font-size: 12px; opacity: 0.9; }
|
|
.widget-header select { margin-left: auto; padding: 5px 10px; border-radius: 8px; border: none; font-size: 11px; background: rgba(255,255,255,0.2); color: white; cursor: pointer; max-width: 120px; }
|
|
.widget-header select option { color: #333; background: white; }
|
|
.widget-header select optgroup { color: #333; font-weight: bold; }
|
|
.chat-area { flex: 1; overflow-y: auto; padding: 20px; background: #f8f9fa; }
|
|
.message { margin-bottom: 15px; display: flex; flex-direction: column; }
|
|
.message.user { align-items: flex-end; }
|
|
.message.bot { align-items: flex-start; }
|
|
.message .bubble { max-width: 85%; padding: 12px 16px; border-radius: 18px; font-size: 14px; line-height: 1.5; }
|
|
.message.user .bubble { background: linear-gradient(135deg, #00d4ff, #0099cc); color: white; border-bottom-right-radius: 4px; }
|
|
.message.bot .bubble { background: white; color: #333; border-bottom-left-radius: 4px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); }
|
|
.message .meta { font-size: 10px; color: #999; margin-top: 4px; }
|
|
.input-area { padding: 15px; background: white; border-top: 1px solid #eee; display: flex; gap: 10px; }
|
|
.input-area input { flex: 1; padding: 12px 16px; border: 2px solid #e0e0e0; border-radius: 25px; font-size: 14px; outline: none; transition: border-color 0.3s; }
|
|
.input-area input:focus { border-color: #00d4ff; }
|
|
.input-area button { width: 45px; height: 45px; border-radius: 50%; border: none; background: linear-gradient(135deg, #00d4ff, #0099cc); color: white; cursor: pointer; font-size: 18px; transition: transform 0.2s; }
|
|
.input-area button:hover { transform: scale(1.1); }
|
|
.typing { display: flex; gap: 4px; padding: 10px; }
|
|
.typing span { width: 8px; height: 8px; background: #00d4ff; border-radius: 50%; animation: bounce 1.4s infinite ease-in-out; }
|
|
.typing span:nth-child(2) { animation-delay: 0.2s; }
|
|
.typing span:nth-child(3) { animation-delay: 0.4s; }
|
|
@keyframes bounce { 0%, 80%, 100% { transform: scale(0); } 40% { transform: scale(1); } }
|
|
</style>
|
|
|
|
</head>
|
|
<body>
|
|
<div class="widget-container">
|
|
<div class="widget-header">
|
|
<div class="avatar">🤖</div>
|
|
<div class="info">
|
|
<h2>WEVAL MIND</h2>
|
|
<span>Assistant Intelligent</span>
|
|
</div>
|
|
<?php echo hamid_providers_dropdown("cerebras", "provider", ""); ?>
|
|
</div>
|
|
<div class="chat-area" id="chat">
|
|
<div class="message bot">
|
|
<div class="bubble">👋 Bonjour ! Je suis WEVAL MIND, votre assistant IA. Comment puis-je vous aider ?</div>
|
|
</div>
|
|
</div>
|
|
<div class="input-area">
|
|
<input type="text" id="input" placeholder="Tapez votre message..." autocomplete="off">
|
|
<button onclick="send()">➤</button>
|
|
</div>
|
|
</div>
|
|
<script>
|
|
const chat = document.getElementById('chat');
|
|
const input = document.getElementById('input');
|
|
let sessionId = 'widget_' + Date.now();
|
|
|
|
input.addEventListener('keypress', e => { if (e.key === 'Enter') send(); });
|
|
|
|
function send() {
|
|
const msg = input.value.trim();
|
|
if (!msg) return;
|
|
|
|
addMessage(msg, 'user');
|
|
input.value = '';
|
|
|
|
const typing = document.createElement('div');
|
|
typing.className = 'message bot';
|
|
typing.innerHTML = '<div class="typing"><span></span><span></span><span></span></div>';
|
|
chat.appendChild(typing);
|
|
chat.scrollTop = chat.scrollHeight;
|
|
|
|
fetch('/hamid-api.php', {
|
|
method: 'POST',
|
|
headers: {'Content-Type': 'application/json'},
|
|
body: JSON.stringify({
|
|
message: msg,
|
|
provider: document.getElementById('provider').value,
|
|
session_id: sessionId
|
|
})
|
|
})
|
|
.then(r => r.json())
|
|
.then(data => {
|
|
typing.remove();
|
|
let thinkHtml='';if(data.thinking){thinkHtml='<div class="hw-think exp" onclick="this.classList.toggle('exp')"><div class="hw-think-head"><span class="sparkle">✨</span> Réflexion de WEVAL MIND<span class="chevron">▼</span></div><div class="hw-think-content">'+data.thinking.replace(/\n/g,'<br>')+'</div></div>';}addMessage(thinkHtml+(data.response||data.error),'bot',data.provider,data.duration);
|
|
})
|
|
.catch(e => {
|
|
typing.remove();
|
|
addMessage('Erreur: ' + e.message, 'bot');
|
|
});
|
|
}
|
|
|
|
function addMessage(text, type, provider, duration) {
|
|
const div = document.createElement('div');
|
|
div.className = 'message ' + type;
|
|
let meta = '';
|
|
if (provider) meta = `<div class="meta">${provider}${duration ? ' - ' + duration + 'ms' : ''}</div>`;
|
|
div.innerHTML = `<div class="bubble">${text.replace(/\n/g, '<br>')}</div>${meta}`;
|
|
chat.appendChild(div);
|
|
chat.scrollTop = chat.scrollHeight;
|
|
}
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|