Integració amb millores funcionals i estètiques del FrontEnd

// ── FUNCIONALITATS COMPLETES DEL WIDGET ────────────── const API_URL = "https://TU_URL_NGROK.ngrok.io/ask"; let conversationHistory = []; // memòria de la conversa // ── 1. VALIDACIÓ D'ENTRADA ──────────────────────────── function validateInput(text) { if (!text || text.trim().length === 0) return false; if (text.trim().length > 500) return false; // màxim 500 caràcters const invalidChars = /[<>&"']/g; // caràcters perillosos return !invalidChars.test(text); } // ── 2. ENVIAMENT AMB ESTATS DE CÀRREGA ─────────────── async function sendMessage() { const input = document.getElementById('tariks-chat-input'); const btn = document.getElementById('tariks-send-btn'); const message = input.value.trim(); if (!validateInput(message)) { showStatus('⚠️ Escriu un missatge vàlid', 'warning'); return; } addMessage(message, 'user'); conversationHistory.push({role: 'user', content: message}); input.value = ''; btn.disabled = true; const loadingId = showLoadingBubble('🤔 Pensant...'); showStatus('⏳ Carregant resposta...', 'loading'); try { const controller = new AbortController(); setTimeout(() => controller.abort(), 30000); const res = await fetch(API_URL, { method: 'POST', headers: {'Content-Type': 'application/json'}, body: JSON.stringify({ message, history: conversationHistory }), signal: controller.signal }); if (!res.ok) throw new Error(`HTTP ${res.status}`); const data = await res.json(); removeBubble(loadingId); conversationHistory.push({role: 'assistant', content: data.message}); addMessage(data.message, 'bot'); showStatus('✅ Resposta rebuda', 'success'); } catch(err) { removeBubble(loadingId); const msg = err.name === 'AbortError' ? '⏰ El servidor no respon. Torna-ho a provar.' : '❌ Error de connexió. Comprova la teva connexió.'; addMessage(msg, 'error'); showStatus('❌ Error en la connexió', 'error'); } btn.disabled = false; input.focus(); } // ── 3. REINICI COMPLET DE CONVERSA ─────────────────── async function resetConversation() { // Neteja FrontEnd document.getElementById('tariks-chat-messages').innerHTML = ''; conversationHistory = []; // Notifica el BackEnd per esborrar la memòria del model try { await fetch(API_URL.replace('/ask', '/reset'), {method: 'POST'}); } catch(e) { /* silent fail — reset local ja fet */ } addMessage('Conversa reiniciada. Hola de nou! 👋', 'bot'); showStatus('🔄 Conversa reiniciada', 'info'); } // ── 4. DETECCIÓ ENTER ──────────────────────────────── document.getElementById('tariks-chat-input').addEventListener('keydown', (e) => { if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); sendMessage(); } // Shift+Enter: salt de línia sense enviar }); // ── 5. HELPERS ──────────────────────────────────────── function showLoadingBubble(text) { const id = 'load-' + Date.now(); const box = document.getElementById('tariks-chat-messages'); const div = document.createElement('div'); div.id = id; div.className = 'tariks-message-loading'; div.textContent = text; box.appendChild(div); box.scrollTop = box.scrollHeight; return id; } function removeBubble(id) { const el = document.getElementById(id); if (el) el.remove(); } function showStatus(text, type) { const bar = document.getElementById('tariks-status-bar'); if (!bar) return; bar.textContent = text; bar.className = `tariks-status tariks-status-${type}`; setTimeout(() => { bar.textContent = ''; }, 3000); }

<style> /* ── VARIABLES CSS CORPORATIVES ─────────────────── */ :root { --xatbot-primary: #2563eb; /* blau — usuari */ --xatbot-dark: #1e293b; /* fosc — header */ --xatbot-light: #f8fafc; /* clar — fons */ --xatbot-bot-bg: #e2e8f0; /* gris — bot */ --xatbot-error: #fee2e2; /* vermell — error */ --xatbot-loading: #ede9fe; /* lila — càrrega */ } /* ── BOMBOLLES DIFERENCIADES ─────────────────────── */ .tariks-message-user { background: var(--xatbot-primary); color: white; padding: 10px 15px; border-radius: 18px; border-bottom-right-radius: 4px; /* cua a la dreta */ max-width: 80%; align-self: flex-end; /* alineat a la dreta */ font-size: 14px; line-height: 1.5; } .tariks-message-bot { background: var(--xatbot-bot-bg); color: var(--xatbot-dark); padding: 10px 15px; border-radius: 18px; border-bottom-left-radius: 4px; /* cua a l'esquerra */ max-width: 80%; align-self: flex-start; /* alineat a l'esquerra */ } .tariks-message-loading { background: var(--xatbot-loading); color: #5b21b6; padding: 10px 15px; border-radius: 18px; border-bottom-left-radius: 4px; font-style: italic; align-self: flex-start; } .tariks-message-error { background: var(--xatbot-error); color: #991b1b; padding: 10px 15px; border-radius: 18px; align-self: flex-start; } /* ── RESPONSIVE ──────────────────────────────────── */ .tariks-chatbot { position: fixed; bottom: 20px; right: 20px; width: 360px; height: 520px; z-index: 9999; } @media (max-width: 768px) { .tariks-chatbot { width: 100%; height: 100%; bottom: 0; right: 0; border-radius: 0; /* pantalla completa a mòbil */ } } @media (min-width: 769px) and (max-width: 1024px) { .tariks-chatbot { width: 300px; height: 450px; /* tablet: mida intermèdia */ } } </style>

# ── ENDPOINT /reset AL BACKEND (Flask) ─────────────── # Permet reiniciar la memòria del model des del FrontEnd conversation_history = [] # memòria global de la sessió @app.route('/reset', methods=['POST']) def reset(): global conversation_history conversation_history = [] return jsonify({ "success": True, "message": "Conversa reiniciada al backend" }) @app.route('/ask', methods=['POST']) def ask(): global conversation_history try: data = request.get_json() message = data.get('message', '').strip() history = data.get('history', []) # Actualitzar historial conversation_history = history # Generar resposta amb context complet chat = model.start_chat(history=[ {'role': h['role'], 'parts': [h['content']]} for h in conversation_history[:-1] # tots menys l'últim ]) response = chat.send_message(message) return jsonify({ "success": True, "message": response.text, "timestamp": time.strftime("%Y-%m-%d %H:%M:%S") }) except Exception as e: return jsonify({"success": False, "error": "Error intern"}), 500