feat: help modal, comprehensive intelligence, fix right-side position
Position fix: - Remove _chat.css @import from main.css (was overriding with old left:2rem cached version). Chat CSS now loaded only via head-styles. - Button confirmed at right:2rem, bottom:6rem (above back-to-top) Help modal: - New chat-help-modal.html using same <dialog> pattern as shortcuts - 6 organized categories: Experience, Technologies, Projects, Education, Skills, How it works - Bilingual EN/ES with example questions per category - ? button in header opens modal via commandfor/show-modal - Removed inline help card (modal replaces it) Intelligence: - Comprehensive query strategy for 8 question types - Technology queries always use cross-section search - Company queries use experience without filter for full listing - Agent knows CV site is built with Go/HTMX (bonus context) - Skills report proficiency levels when technology found
This commit is contained in:
juanatsap
@@ -57,6 +57,7 @@
|
||||
<!-- ============================================ -->
|
||||
{{template "info-modal" .}}
|
||||
{{template "shortcuts-modal" .}}
|
||||
{{template "chat-help-modal" .}}
|
||||
{{template "pdf-modal" .}}
|
||||
{{template "contact-modal" .}}
|
||||
{{template "zoom-control" .}}
|
||||
|
||||
@@ -0,0 +1,143 @@
|
||||
{{define "chat-help-modal"}}
|
||||
<!-- Chat Help Modal - Native Dialog -->
|
||||
<dialog id="chat-help-modal" class="info-modal 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 assistant{{end}}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="info-modal-body">
|
||||
<p class="info-modal-description">
|
||||
{{if eq .Lang "es"}}Un asistente con inteligencia artificial que puede responder preguntas sobre este CV. Consulta experiencia profesional, proyectos, habilidades, formación y más — todo basado en datos reales del CV.{{else}}An AI-powered assistant that can answer questions about this CV. Query professional experience, projects, skills, education, and more — all based on actual CV data.{{end}}
|
||||
</p>
|
||||
|
||||
<!-- About Experience -->
|
||||
<div class="shortcuts-section">
|
||||
<h3 class="shortcuts-section-title">
|
||||
<iconify-icon icon="mdi:briefcase-outline" width="20" height="20"></iconify-icon>
|
||||
{{if eq .Lang "es"}}Sobre Experiencia{{else}}About Experience{{end}}
|
||||
</h3>
|
||||
<div class="shortcuts-list">
|
||||
<div class="shortcut-item">
|
||||
<span class="shortcut-desc">{{if eq .Lang "es"}}¿Cuántos años de experiencia tiene Juan?{{else}}How many years of experience does Juan have?{{end}}</span>
|
||||
</div>
|
||||
<div class="shortcut-item">
|
||||
<span class="shortcut-desc">{{if eq .Lang "es"}}¿En qué empresas ha trabajado?{{else}}What companies has he worked at?{{end}}</span>
|
||||
</div>
|
||||
<div class="shortcut-item">
|
||||
<span class="shortcut-desc">{{if eq .Lang "es"}}Cuéntame sobre su paso por Olympic Broadcasting{{else}}Tell me about his time at Olympic Broadcasting{{end}}</span>
|
||||
</div>
|
||||
<div class="shortcut-item">
|
||||
<span class="shortcut-desc">{{if eq .Lang "es"}}¿Qué hacía en SAP?{{else}}What did he do at SAP?{{end}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- About Technologies -->
|
||||
<div class="shortcuts-section">
|
||||
<h3 class="shortcuts-section-title">
|
||||
<iconify-icon icon="mdi:code-tags" width="20" height="20"></iconify-icon>
|
||||
{{if eq .Lang "es"}}Sobre Tecnologías{{else}}About Technologies{{end}}
|
||||
</h3>
|
||||
<div class="shortcuts-list">
|
||||
<div class="shortcut-item">
|
||||
<span class="shortcut-desc">{{if eq .Lang "es"}}¿Qué lenguajes de programación conoce?{{else}}What programming languages does he know?{{end}}</span>
|
||||
</div>
|
||||
<div class="shortcut-item">
|
||||
<span class="shortcut-desc">{{if eq .Lang "es"}}¿Ha trabajado con React? ¿Dónde?{{else}}Has he worked with React? Where?{{end}}</span>
|
||||
</div>
|
||||
<div class="shortcut-item">
|
||||
<span class="shortcut-desc">{{if eq .Lang "es"}}¿Cuál es su experiencia con Go?{{else}}What's his Go experience?{{end}}</span>
|
||||
</div>
|
||||
<div class="shortcut-item">
|
||||
<span class="shortcut-desc">{{if eq .Lang "es"}}¿Conoce Node.js?{{else}}Does he know Node.js?{{end}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- About Projects -->
|
||||
<div class="shortcuts-section">
|
||||
<h3 class="shortcuts-section-title">
|
||||
<iconify-icon icon="mdi:rocket-launch-outline" width="20" height="20"></iconify-icon>
|
||||
{{if eq .Lang "es"}}Sobre Proyectos{{else}}About Projects{{end}}
|
||||
</h3>
|
||||
<div class="shortcuts-list">
|
||||
<div class="shortcut-item">
|
||||
<span class="shortcut-desc">{{if eq .Lang "es"}}¿Qué proyectos personales ha creado?{{else}}What personal projects has he built?{{end}}</span>
|
||||
</div>
|
||||
<div class="shortcut-item">
|
||||
<span class="shortcut-desc">{{if eq .Lang "es"}}Cuéntame sobre Immich Photo Manager{{else}}Tell me about the Immich Photo Manager{{end}}</span>
|
||||
</div>
|
||||
<div class="shortcut-item">
|
||||
<span class="shortcut-desc">{{if eq .Lang "es"}}¿Qué proyectos open-source mantiene?{{else}}What open-source projects does he maintain?{{end}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- About Education & Certifications -->
|
||||
<div class="shortcuts-section">
|
||||
<h3 class="shortcuts-section-title">
|
||||
<iconify-icon icon="mdi:school-outline" width="20" height="20"></iconify-icon>
|
||||
{{if eq .Lang "es"}}Formación y Certificaciones{{else}}Education & Certifications{{end}}
|
||||
</h3>
|
||||
<div class="shortcuts-list">
|
||||
<div class="shortcut-item">
|
||||
<span class="shortcut-desc">{{if eq .Lang "es"}}¿Qué certificaciones tiene?{{else}}What certifications does he have?{{end}}</span>
|
||||
</div>
|
||||
<div class="shortcut-item">
|
||||
<span class="shortcut-desc">{{if eq .Lang "es"}}¿Dónde estudió?{{else}}Where did he study?{{end}}</span>
|
||||
</div>
|
||||
<div class="shortcut-item">
|
||||
<span class="shortcut-desc">{{if eq .Lang "es"}}¿Qué cursos ha completado?{{else}}What courses has he completed?{{end}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- About Skills -->
|
||||
<div class="shortcuts-section">
|
||||
<h3 class="shortcuts-section-title">
|
||||
<iconify-icon icon="mdi:star-outline" width="20" height="20"></iconify-icon>
|
||||
{{if eq .Lang "es"}}Sobre Habilidades{{else}}About Skills{{end}}
|
||||
</h3>
|
||||
<div class="shortcuts-list">
|
||||
<div class="shortcut-item">
|
||||
<span class="shortcut-desc">{{if eq .Lang "es"}}¿Cuáles son sus principales habilidades técnicas?{{else}}What are his main technical skills?{{end}}</span>
|
||||
</div>
|
||||
<div class="shortcut-item">
|
||||
<span class="shortcut-desc">{{if eq .Lang "es"}}¿Tiene experiencia con Docker?{{else}}Does he have experience with Docker?{{end}}</span>
|
||||
</div>
|
||||
<div class="shortcut-item">
|
||||
<span class="shortcut-desc">{{if eq .Lang "es"}}¿Qué hay de CI/CD?{{else}}What about CI/CD?{{end}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- How it works -->
|
||||
<div class="shortcuts-section">
|
||||
<h3 class="shortcuts-section-title">
|
||||
<iconify-icon icon="mdi:information-outline" width="20" height="20"></iconify-icon>
|
||||
{{if eq .Lang "es"}}Cómo funciona{{else}}How it works{{end}}
|
||||
</h3>
|
||||
<div class="shortcuts-list">
|
||||
<div class="shortcut-item">
|
||||
<span class="shortcut-desc">
|
||||
{{if eq .Lang "es"}}Impulsado por Google ADK Go 1.0 y Gemini AI. Las preguntas se responden consultando los datos reales del CV — sin alucinaciones, siempre preciso.{{else}}Powered by Google ADK Go 1.0 and Gemini AI. Questions are answered by querying the actual CV data — no hallucination, always accurate.{{end}}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</dialog>
|
||||
{{end}}
|
||||
@@ -24,25 +24,12 @@
|
||||
<span>{{if eq .Lang "es"}}Asistente del CV{{else}}CV Assistant{{end}}</span>
|
||||
<button class="chat-help-btn"
|
||||
aria-label="{{if eq .Lang "es"}}Ayuda{{else}}Help{{end}}"
|
||||
_="on click toggle .visible on #chat-help-card">
|
||||
commandfor="chat-help-modal"
|
||||
command="show-modal">
|
||||
<iconify-icon icon="mdi:help-circle-outline"></iconify-icon>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Help / Onboarding Card -->
|
||||
<div id="chat-help-card" class="chat-help-card visible">
|
||||
<div class="chat-help-icon">
|
||||
<iconify-icon icon="mdi:robot-happy-outline"></iconify-icon>
|
||||
</div>
|
||||
<p class="chat-help-text">
|
||||
{{if eq .Lang "es"}}¡Soy el Asistente del CV! Puedo responder preguntas sobre la experiencia profesional, proyectos, habilidades y formación de Juan. Prueba a hacer clic en una sugerencia o escribe tu propia pregunta.{{else}}I'm the CV Assistant! I can answer questions about Juan's professional experience, projects, skills, and education. Try clicking a suggestion or type your own question.{{end}}
|
||||
</p>
|
||||
<button class="chat-help-dismiss"
|
||||
_="on click remove .visible from #chat-help-card">
|
||||
{{if eq .Lang "es"}}Entendido{{else}}Got it{{end}}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div id="chat-messages" class="chat-messages">
|
||||
<div class="chat-message chat-agent">
|
||||
{{if eq .Lang "es"}}¡Hola! Pregúntame lo que quieras sobre este CV.{{else}}Hi! Ask me anything about this CV.{{end}}
|
||||
|
||||
Reference in New Issue
Block a user