135 lines
6.0 KiB
HTML
135 lines
6.0 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="fr">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Agent IA - Gemini</title>
|
|
<style>
|
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
|
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background: #0f0f23; color: #eee; height: 100vh; display: flex; flex-direction: column; }
|
|
|
|
header { background: linear-gradient(90deg, #1a1a2e, #0f3460); padding: 15px 20px; text-align: center; border-bottom: 2px solid #00d9ff; }
|
|
header h1 { font-size: 22px; background: linear-gradient(90deg, #00d9ff, #e94560); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
|
|
header p { color: #888; font-size: 12px; margin-top: 3px; }
|
|
|
|
#chat { flex: 1; overflow-y: auto; padding: 20px; display: flex; flex-direction: column; gap: 12px; }
|
|
|
|
.msg { max-width: 75%; padding: 12px 16px; border-radius: 12px; line-height: 1.5; font-size: 14px; white-space: pre-wrap; word-wrap: break-word; }
|
|
.msg.user { align-self: flex-end; background: #0f3460; border: 1px solid #00d9ff; border-bottom-right-radius: 4px; }
|
|
.msg.ai { align-self: flex-start; background: #161b22; border: 1px solid #30363d; border-bottom-left-radius: 4px; }
|
|
.msg.error { align-self: center; background: rgba(210,50,50,0.2); border: 1px solid #d23232; color: #f88; }
|
|
|
|
.typing { align-self: flex-start; color: #666; font-style: italic; font-size: 13px; padding: 8px 16px; }
|
|
|
|
#input-area { display: flex; gap: 10px; padding: 15px 20px; background: #161b22; border-top: 1px solid #30363d; }
|
|
#input-area textarea { flex: 1; background: #0d1117; border: 1px solid #30363d; border-radius: 8px; color: #eee; padding: 12px; font-size: 14px; resize: none; font-family: inherit; min-height: 48px; max-height: 120px; outline: none; }
|
|
#input-area textarea:focus { border-color: #00d9ff; }
|
|
#send-btn { background: #00d9ff; color: #0f0f23; border: none; border-radius: 8px; padding: 0 20px; font-size: 16px; font-weight: bold; cursor: pointer; transition: background 0.2s; }
|
|
#send-btn:hover { background: #00b8d9; }
|
|
#send-btn:disabled { background: #30363d; color: #666; cursor: not-allowed; }
|
|
|
|
@media (max-width: 600px) {
|
|
.msg { max-width: 90%; }
|
|
#input-area { padding: 10px; }
|
|
}
|
|
|
|
.home-btn{position:fixed;top:10px;left:10px;z-index:9999;background:linear-gradient(135deg,#00d9ff,#7b2cbf);color:#fff;border:none;border-radius:8px;padding:10px 15px;font-size:14px;cursor:pointer;text-decoration:none;display:flex;align-items:center;gap:8px;box-shadow:0 2px 10px rgba(0,217,255,0.3);transition:all 0.3s;font-family:-apple-system,BlinkMacSystemFont,sans-serif}.home-btn:hover{transform:translateY(-2px);box-shadow:0 4px 15px rgba(0,217,255,0.5)}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<a href="https://portal-kolifee.duckdns.org/" class="home-btn" title="Retour au portail"><span style="font-size:18px">🏠</span><span>Accueil</span></a>
|
|
<header>
|
|
<h1>Agent IA - Google Gemini</h1>
|
|
<p>Propulsé par n8n</p>
|
|
</header>
|
|
|
|
<div id="chat"></div>
|
|
|
|
<div id="input-area">
|
|
<textarea id="user-input" placeholder="Tapez votre message..." rows="1"></textarea>
|
|
<button id="send-btn">Envoyer</button>
|
|
</div>
|
|
|
|
<script>
|
|
const chat = document.getElementById('chat');
|
|
const input = document.getElementById('user-input');
|
|
const sendBtn = document.getElementById('send-btn');
|
|
const WEBHOOK_URL = '/webhook/gemini-agent';
|
|
const sessionId = 'session-' + Math.random().toString(36).substr(2, 9);
|
|
|
|
function addMessage(text, type) {
|
|
const div = document.createElement('div');
|
|
div.className = 'msg ' + type;
|
|
div.textContent = text;
|
|
chat.appendChild(div);
|
|
chat.scrollTop = chat.scrollHeight;
|
|
}
|
|
|
|
function addTyping() {
|
|
const div = document.createElement('div');
|
|
div.className = 'typing';
|
|
div.id = 'typing-indicator';
|
|
div.textContent = 'Gemini r\u00e9fl\u00e9chit...';
|
|
chat.appendChild(div);
|
|
chat.scrollTop = chat.scrollHeight;
|
|
}
|
|
|
|
function removeTyping() {
|
|
const el = document.getElementById('typing-indicator');
|
|
if (el) el.remove();
|
|
}
|
|
|
|
async function sendMessage() {
|
|
const text = input.value.trim();
|
|
if (!text) return;
|
|
|
|
addMessage(text, 'user');
|
|
input.value = '';
|
|
input.style.height = 'auto';
|
|
sendBtn.disabled = true;
|
|
addTyping();
|
|
|
|
try {
|
|
const resp = await fetch(WEBHOOK_URL, {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json', 'X-Session-ID': sessionId },
|
|
body: JSON.stringify({ message: text })
|
|
});
|
|
|
|
removeTyping();
|
|
|
|
if (!resp.ok) {
|
|
const err = await resp.json().catch(() => ({ message: 'Erreur serveur' }));
|
|
addMessage('Erreur: ' + (err.message || resp.statusText), 'error');
|
|
return;
|
|
}
|
|
|
|
const data = await resp.text();
|
|
addMessage(data, 'ai');
|
|
} catch (e) {
|
|
removeTyping();
|
|
addMessage('Erreur de connexion: ' + e.message, 'error');
|
|
} finally {
|
|
sendBtn.disabled = false;
|
|
input.focus();
|
|
}
|
|
}
|
|
|
|
sendBtn.addEventListener('click', sendMessage);
|
|
input.addEventListener('keydown', (e) => {
|
|
if (e.key === 'Enter' && !e.shiftKey) {
|
|
e.preventDefault();
|
|
sendMessage();
|
|
}
|
|
});
|
|
|
|
input.addEventListener('input', () => {
|
|
input.style.height = 'auto';
|
|
input.style.height = Math.min(input.scrollHeight, 120) + 'px';
|
|
});
|
|
|
|
input.focus();
|
|
</script>
|
|
</body>
|
|
</html>
|