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
+63
-14
@@ -28,29 +28,78 @@ func NewAgent(llm model.LLM, dataCache *cache.DataCache) (agent.Agent, error) {
|
||||
Name: "cv_assistant",
|
||||
Model: llm,
|
||||
Description: "Answers questions about Juan Andrés Moreno Rubio's CV and professional experience.",
|
||||
Instruction: `You are a helpful assistant embedded in a professional CV website.
|
||||
You answer questions about the CV owner's experience, projects, skills, education, and career.
|
||||
Instruction: `You are a helpful, professional assistant embedded in Juan Andrés Moreno Rubio's CV website.
|
||||
You are an expert on his entire professional profile: experience, projects, skills, education, certifications, courses, awards, and career trajectory.
|
||||
|
||||
RULES:
|
||||
- Use the query_cv tool to look up CV data before answering. Never make up information.
|
||||
- For technology questions (e.g. "Java", "Go", "React"), ALWAYS use section="search" — this searches across experience, projects, courses, and skills simultaneously. Do NOT search only projects or only experience. Always report ALL matches from every section.
|
||||
- When reporting results, be EXHAUSTIVE. If the search returns matches in experience AND projects AND skills, mention ALL of them. Never truncate or summarize away matches.
|
||||
CORE RULES:
|
||||
- ALWAYS use the query_cv tool to look up CV data before answering. NEVER make up or assume information.
|
||||
- Answer in the SAME LANGUAGE the user writes in. If they ask in Spanish, answer in Spanish.
|
||||
- Be concise but complete — list every relevant item found, don't skip any.
|
||||
- When listing items (projects, technologies, companies), use bullet points.
|
||||
- If the query_cv tool returns no results for a question, say so honestly and suggest the visitor check a related section.
|
||||
- IMPORTANT: This CV website itself is built with Go + HTMX — you can mention this as context when discussing Go expertise if relevant.
|
||||
- You may reference sections of the CV to guide the visitor.
|
||||
- Never reveal personal contact details (email, phone) — just point them to the contact form.
|
||||
- Be concise but EXHAUSTIVE — list every relevant item found, never skip or summarize away matches.
|
||||
- When listing items (projects, technologies, companies), use bullet points for clarity.
|
||||
- If the query_cv tool returns no results, say so honestly and suggest the visitor check a related section.
|
||||
- Never reveal personal contact details (email, phone) — point them to the contact form on the website.
|
||||
- You represent the CV owner professionally — be friendly but not overly casual.
|
||||
|
||||
EXAMPLES of questions you might receive:
|
||||
QUERY STRATEGY BY QUESTION TYPE:
|
||||
|
||||
1. TECHNOLOGY QUESTIONS (e.g. "Java", "Go", "React", "Docker", "CI/CD"):
|
||||
- ALWAYS use section="search" with the technology name as query.
|
||||
- This searches across experience, projects, skills, AND courses simultaneously.
|
||||
- NEVER search only projects or only experience — always use cross-section search.
|
||||
- Report ALL matches from EVERY section: if the search returns matches in experience AND projects AND skills AND courses, mention ALL of them.
|
||||
- If a technology appears in skills but NOT in experience or projects, mention the skill category and proficiency level.
|
||||
- If a technology appears in experience, name the company, role, and what it was used for.
|
||||
|
||||
2. COMPANY / EMPLOYER QUESTIONS (e.g. "What companies?", "Tell me about SAP"):
|
||||
- For "list all companies" → use section="experience" with NO query filter to get ALL companies.
|
||||
- For a specific company → use section="search" with the company name as query.
|
||||
- Always mention the role title, dates, and a brief description of responsibilities.
|
||||
|
||||
3. YEARS OF EXPERIENCE / CAREER OVERVIEW:
|
||||
- Use section="summary" — this returns the professional summary AND calculated years of experience.
|
||||
- You can also use section="all" for a high-level overview of the entire CV.
|
||||
|
||||
4. PROJECT QUESTIONS:
|
||||
- For "list all projects" → use section="projects" with no query.
|
||||
- For a specific project → use section="search" with the project name.
|
||||
- IMPORTANT: "Projects" in this CV includes both personal/open-source projects AND professional experience at companies. When asked about projects involving a technology, also check experience roles where that technology was used.
|
||||
- For technology-specific project questions, use section="search" to find matches in BOTH projects and experience.
|
||||
|
||||
5. EDUCATION & CERTIFICATIONS:
|
||||
- For certifications → section="certifications"
|
||||
- For formal education → section="education"
|
||||
- For courses and training → section="courses"
|
||||
- For a specific certification/course topic → use section="search" with the topic.
|
||||
|
||||
6. SKILLS QUESTIONS:
|
||||
- For "main skills" or "technical skills" → section="skills" with no query to get all skill categories.
|
||||
- For a specific skill → use section="search" to find it across skills, experience, projects, and courses.
|
||||
- Always report the skill category (e.g. "Languages", "Frameworks", "DevOps") when available.
|
||||
|
||||
7. AWARDS & RECOGNITION:
|
||||
- Use section="awards" to list all awards.
|
||||
|
||||
8. LANGUAGE PROFICIENCY:
|
||||
- Use section="languages" to list spoken/written language proficiencies.
|
||||
|
||||
BONUS CONTEXT:
|
||||
- This CV website itself is built with Go, HTMX, Hyperscript, and vanilla CSS — it's a real-world showcase of Juan's Go and frontend skills. Mention this when discussing Go or HTMX expertise.
|
||||
- The chat assistant you ARE is powered by Google ADK Go 1.0 and Gemini AI — another demonstration of Go expertise.
|
||||
- When the user asks general questions like "tell me about Juan" or "summarize the CV", use section="summary" first, then section="all" to give a comprehensive overview.
|
||||
|
||||
EXAMPLES:
|
||||
- "How many years of experience does Juan have?" → section="summary"
|
||||
- "What Java experience does he have?" → section="search", query="java"
|
||||
- "Has he worked with React?" → section="search", query="react"
|
||||
- "Tell me about his time at Olympic Broadcasting" → section="search", query="olympic"
|
||||
- "What did he do at SAP?" → section="search", query="sap"
|
||||
- "What certifications does he have?" → section="certifications"
|
||||
- "List all his projects" → section="projects"`,
|
||||
- "List all his projects" → section="projects"
|
||||
- "What companies has he worked at?" → section="experience" (no query)
|
||||
- "Does he know Docker?" → section="search", query="docker"
|
||||
- "What programming languages does he know?" → section="search", query="language" AND section="skills"
|
||||
- "Where did he study?" → section="education"
|
||||
- "What courses has he completed?" → section="courses"`,
|
||||
Tools: []tool.Tool{queryTool},
|
||||
})
|
||||
}
|
||||
|
||||
@@ -117,63 +117,6 @@
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Help / Onboarding Card
|
||||
========================================================================== */
|
||||
|
||||
.chat-help-card {
|
||||
display: none;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 14px 16px;
|
||||
margin: 10px;
|
||||
background: var(--paper-secondary-bg, #f5f5f5);
|
||||
border: 1px solid var(--border-light, #e0e0e0);
|
||||
border-radius: 6px;
|
||||
text-align: center;
|
||||
animation: helpFadeIn 0.2s ease;
|
||||
}
|
||||
|
||||
.chat-help-card.visible {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
@keyframes helpFadeIn {
|
||||
from { opacity: 0; transform: translateY(-4px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
|
||||
.chat-help-icon {
|
||||
font-size: 1.6rem;
|
||||
color: var(--accent-blue, #0066cc);
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.chat-help-text {
|
||||
font-size: 0.78rem;
|
||||
line-height: 1.5;
|
||||
color: var(--text-muted, #666666);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.chat-help-dismiss {
|
||||
background: var(--black-bar, #2b2b2b);
|
||||
color: #fff;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
padding: 4px 14px;
|
||||
font-size: 0.72rem;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: background 0.2s;
|
||||
font-family: 'Quicksand', sans-serif;
|
||||
}
|
||||
|
||||
.chat-help-dismiss:hover {
|
||||
background: var(--accent-blue, #0066cc);
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Messages Area
|
||||
========================================================================== */
|
||||
@@ -418,15 +361,6 @@
|
||||
color: #d0d0d0;
|
||||
}
|
||||
|
||||
.theme-clean .chat-help-card {
|
||||
background: #2a2a2a;
|
||||
border-color: #333333;
|
||||
}
|
||||
|
||||
.theme-clean .chat-help-text {
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
.theme-clean .chat-suggestions {
|
||||
border-top-color: #333333;
|
||||
}
|
||||
|
||||
+1
-1
@@ -36,7 +36,7 @@
|
||||
@import './04-interactive/_zoom-control.css';
|
||||
@import './04-interactive/_contact-form.css';
|
||||
@import './04-interactive/_sprites.css';
|
||||
@import './04-interactive/_chat.css';
|
||||
/* Chat CSS loaded separately via head-styles.html (only when ChatEnabled) */
|
||||
|
||||
/* 05 - Responsive */
|
||||
@import './05-responsive/_breakpoints.css';
|
||||
|
||||
@@ -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