juanatsap
4f558ac842
The Hyperscript trigger/call commands couldn't reliably trigger HTMX form submissions or call global JS functions. Moved all chat interactions to plain JavaScript: - toggleChatPanel(): open/close panel + icon swap - sendChatQuestion(q): set input + htmx.trigger(form, 'submit') - closeChatHelpAndAsk(q): close modal + open chat + send question - htmx:afterRequest listener clears input after submit Hyperscript kept only for site-wide patterns (closeOnBackdrop) that work reliably. Also: better error message for rate-limited API responses (429).
124 lines
9.4 KiB
HTML
124 lines
9.4 KiB
HTML
{{define "chat-help-modal"}}
|
|
<!-- Chat Help Modal - Native Dialog with Accordion -->
|
|
<dialog id="chat-help-modal" class="info-modal chat-help-fullscreen no-print"
|
|
_="on click call closeOnBackdrop(me, event)">
|
|
<div class="info-modal-content">
|
|
<button class="info-modal-close" commandfor="chat-help-modal" command="close" aria-label="{{if eq .Lang "es"}}Cerrar{{else}}Close{{end}}">
|
|
<iconify-icon icon="mdi:close" width="24" height="24"></iconify-icon>
|
|
</button>
|
|
|
|
<div class="info-modal-header">
|
|
<h2>{{if eq .Lang "es"}}Asistente del CV{{else}}CV Assistant{{end}}</h2>
|
|
<div class="info-modal-cv-title">
|
|
<span class="keyboard-icon-wrapper">
|
|
<iconify-icon icon="mdi:robot-happy-outline" width="32" height="32"></iconify-icon>
|
|
</span>
|
|
{{if eq .Lang "es"}}Asistente inteligente con IA{{else}}AI-powered intelligent assistant{{end}}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="info-modal-body">
|
|
<p class="chat-help-intro">
|
|
{{if eq .Lang "es"}}Pregunta lo que quieras sobre este CV. Haz clic en cualquier pregunta para enviarla directamente al asistente.{{else}}Ask anything about this CV. Click any question to send it directly to the assistant.{{end}}
|
|
</p>
|
|
|
|
<div class="chat-help-accordion">
|
|
|
|
<!-- Experience -->
|
|
<details class="chat-help-group" open>
|
|
<summary>
|
|
<iconify-icon icon="mdi:briefcase-outline"></iconify-icon>
|
|
{{if eq .Lang "es"}}Experiencia{{else}}Experience{{end}}
|
|
</summary>
|
|
<div class="chat-help-questions">
|
|
<button class="chat-help-q" onclick="closeChatHelpAndAsk('{{if eq .Lang "es"}}¿Cuántos años de experiencia tiene Juan?{{else}}How many years of experience does Juan have?{{end}}')">{{if eq .Lang "es"}}¿Cuántos años de experiencia tiene?{{else}}How many years of experience?{{end}}</button>
|
|
<button class="chat-help-q" onclick="closeChatHelpAndAsk('{{if eq .Lang "es"}}¿En qué empresas ha trabajado?{{else}}What companies has he worked at?{{end}}')">{{if eq .Lang "es"}}¿En qué empresas ha trabajado?{{else}}What companies has he worked at?{{end}}</button>
|
|
<button class="chat-help-q" onclick="closeChatHelpAndAsk('{{if eq .Lang "es"}}Cuéntame sobre Olympic Broadcasting{{else}}Tell me about Olympic Broadcasting{{end}}')">{{if eq .Lang "es"}}Cuéntame sobre Olympic Broadcasting{{else}}Tell me about Olympic Broadcasting{{end}}</button>
|
|
<button class="chat-help-q" onclick="closeChatHelpAndAsk('{{if eq .Lang "es"}}¿Qué hacía en SAP?{{else}}What did he do at SAP?{{end}}')">{{if eq .Lang "es"}}¿Qué hacía en SAP?{{else}}What did he do at SAP?{{end}}</button>
|
|
</div>
|
|
</details>
|
|
|
|
<!-- Technologies -->
|
|
<details class="chat-help-group">
|
|
<summary>
|
|
<iconify-icon icon="mdi:code-tags"></iconify-icon>
|
|
{{if eq .Lang "es"}}Tecnologías{{else}}Technologies{{end}}
|
|
</summary>
|
|
<div class="chat-help-questions">
|
|
<button class="chat-help-q" onclick="closeChatHelpAndAsk('{{if eq .Lang "es"}}¿Qué lenguajes de programación conoce?{{else}}What programming languages does he know?{{end}}')">{{if eq .Lang "es"}}¿Qué lenguajes conoce?{{else}}What languages does he know?{{end}}</button>
|
|
<button class="chat-help-q" onclick="closeChatHelpAndAsk('{{if eq .Lang "es"}}¿Ha trabajado con React? ¿Dónde?{{else}}Has he worked with React? Where?{{end}}')">{{if eq .Lang "es"}}¿Ha trabajado con React?{{else}}Has he worked with React?{{end}}</button>
|
|
<button class="chat-help-q" onclick="closeChatHelpAndAsk('{{if eq .Lang "es"}}¿Cuál es su experiencia con Go?{{else}}What is his Go experience?{{end}}')">{{if eq .Lang "es"}}¿Experiencia con Go?{{else}}Go experience?{{end}}</button>
|
|
<button class="chat-help-q" onclick="closeChatHelpAndAsk('{{if eq .Lang "es"}}¿Conoce Node.js?{{else}}Does he know Node.js?{{end}}')">{{if eq .Lang "es"}}¿Conoce Node.js?{{else}}Does he know Node.js?{{end}}</button>
|
|
<button class="chat-help-q" onclick="closeChatHelpAndAsk('{{if eq .Lang "es"}}¿Tiene experiencia con Docker?{{else}}Does he have Docker experience?{{end}}')">{{if eq .Lang "es"}}¿Experiencia con Docker?{{else}}Docker experience?{{end}}</button>
|
|
</div>
|
|
</details>
|
|
|
|
<!-- Projects -->
|
|
<details class="chat-help-group">
|
|
<summary>
|
|
<iconify-icon icon="mdi:rocket-launch-outline"></iconify-icon>
|
|
{{if eq .Lang "es"}}Proyectos{{else}}Projects{{end}}
|
|
</summary>
|
|
<div class="chat-help-questions">
|
|
<button class="chat-help-q" onclick="closeChatHelpAndAsk('{{if eq .Lang "es"}}¿Qué proyectos personales ha creado?{{else}}What personal projects has he built?{{end}}')">{{if eq .Lang "es"}}¿Qué proyectos ha creado?{{else}}What projects has he built?{{end}}</button>
|
|
<button class="chat-help-q" onclick="closeChatHelpAndAsk('{{if eq .Lang "es"}}Cuéntame sobre Immich Photo Manager{{else}}Tell me about Immich Photo Manager{{end}}')">{{if eq .Lang "es"}}Sobre Immich Photo Manager{{else}}About Immich Photo Manager{{end}}</button>
|
|
<button class="chat-help-q" onclick="closeChatHelpAndAsk('{{if eq .Lang "es"}}¿Qué proyectos open-source mantiene?{{else}}What open-source projects does he maintain?{{end}}')">{{if eq .Lang "es"}}¿Proyectos open-source?{{else}}Open-source projects?{{end}}</button>
|
|
</div>
|
|
</details>
|
|
|
|
<!-- Education -->
|
|
<details class="chat-help-group">
|
|
<summary>
|
|
<iconify-icon icon="mdi:school-outline"></iconify-icon>
|
|
{{if eq .Lang "es"}}Formación{{else}}Education{{end}}
|
|
</summary>
|
|
<div class="chat-help-questions">
|
|
<button class="chat-help-q" onclick="closeChatHelpAndAsk('{{if eq .Lang "es"}}¿Qué certificaciones tiene?{{else}}What certifications does he have?{{end}}')">{{if eq .Lang "es"}}¿Certificaciones?{{else}}Certifications?{{end}}</button>
|
|
<button class="chat-help-q" onclick="closeChatHelpAndAsk('{{if eq .Lang "es"}}¿Dónde estudió?{{else}}Where did he study?{{end}}')">{{if eq .Lang "es"}}¿Dónde estudió?{{else}}Where did he study?{{end}}</button>
|
|
<button class="chat-help-q" onclick="closeChatHelpAndAsk('{{if eq .Lang "es"}}¿Qué cursos ha completado?{{else}}What courses has he completed?{{end}}')">{{if eq .Lang "es"}}¿Cursos completados?{{else}}Courses completed?{{end}}</button>
|
|
</div>
|
|
</details>
|
|
|
|
<!-- Skills -->
|
|
<details class="chat-help-group">
|
|
<summary>
|
|
<iconify-icon icon="mdi:star-outline"></iconify-icon>
|
|
{{if eq .Lang "es"}}Habilidades{{else}}Skills{{end}}
|
|
</summary>
|
|
<div class="chat-help-questions">
|
|
<button class="chat-help-q" onclick="closeChatHelpAndAsk('{{if eq .Lang "es"}}¿Cuáles son sus principales habilidades técnicas?{{else}}What are his main technical skills?{{end}}')">{{if eq .Lang "es"}}¿Habilidades técnicas principales?{{else}}Main technical skills?{{end}}</button>
|
|
<button class="chat-help-q" onclick="closeChatHelpAndAsk('{{if eq .Lang "es"}}¿Qué hay de CI/CD?{{else}}What about CI/CD?{{end}}')">{{if eq .Lang "es"}}¿Experiencia con CI/CD?{{else}}CI/CD experience?{{end}}</button>
|
|
<button class="chat-help-q" onclick="closeChatHelpAndAsk('{{if eq .Lang "es"}}¿Qué idiomas habla?{{else}}What languages does he speak?{{end}}')">{{if eq .Lang "es"}}¿Qué idiomas habla?{{else}}Languages spoken?{{end}}</button>
|
|
</div>
|
|
</details>
|
|
|
|
</div>
|
|
|
|
<!-- How it works footer -->
|
|
<div class="chat-help-footer">
|
|
<iconify-icon icon="mdi:information-outline"></iconify-icon>
|
|
<span>{{if eq .Lang "es"}}Impulsado por Google ADK Go 1.0 y Gemini AI. Las respuestas provienen de los datos reales del CV.{{else}}Powered by Google ADK Go 1.0 and Gemini AI. Answers come from actual CV data.{{end}}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</dialog>
|
|
|
|
<!-- Helper function: close modal, open chat, send question -->
|
|
<script>
|
|
function closeChatHelpAndAsk(question) {
|
|
// Close the modal
|
|
document.getElementById('chat-help-modal').close();
|
|
// Open chat panel if not open
|
|
var panel = document.getElementById('chat-panel');
|
|
var btn = document.getElementById('chat-toggle-btn');
|
|
if (!panel.classList.contains('chat-open')) {
|
|
panel.classList.add('chat-open');
|
|
btn.classList.add('mascot-active');
|
|
}
|
|
// Set the question and submit
|
|
document.getElementById('chat-input').value = question;
|
|
htmx.trigger(document.getElementById('chat-form'), 'submit');
|
|
}
|
|
</script>
|
|
{{end}}
|