juanatsap
e21418b80e
Chips: - Replace broken onclick with Hyperscript: `on click set #chat-input.value to '...' then trigger submit on #chat-form` — Hyperscript dispatches a native DOM submit event that HTMX intercepts correctly Documentation (doc/28-AI-CHAT-AGENT.md — complete rewrite, ~544 lines): - 18 sections covering full mascot feature reference - Architecture diagram with end-to-end flow (11 steps) - All 4 component files documented with code patterns - query_cv tool: 11 section types in tables with examples - Cross-section search mechanics explained - Agent intelligence: 8 question-type strategies - Suggested questions: chip-to-question mapping for both languages - Design system: CV color tokens, typography, dark theme comparison - Session management: OOB swap lifecycle - Security: input/output sanitization, privacy rules - Testing: 46 Playwright assertions across 25 test groups - Configuration, dependencies, ADK Go concepts table
95 lines
4.6 KiB
HTML
95 lines
4.6 KiB
HTML
{{define "chat-widget"}}
|
|
{{if .ChatEnabled}}
|
|
<!-- AI Chat Widget — CV Assistant Mascot -->
|
|
<button
|
|
id="chat-toggle-btn"
|
|
class="chat-toggle-btn no-print has-tooltip tooltip-left"
|
|
aria-label="{{if eq .Lang "es"}}Asistente del CV{{else}}CV Assistant{{end}}"
|
|
data-tooltip="{{if eq .Lang "es"}}Asistente del CV{{else}}CV Assistant{{end}}"
|
|
_="on click toggle .chat-open on #chat-panel
|
|
then if #chat-panel matches .chat-open
|
|
then add .mascot-active to me
|
|
then set #chat-input.focus to true
|
|
then call #chat-input.focus()
|
|
else
|
|
remove .mascot-active from me
|
|
end">
|
|
<iconify-icon icon="mdi:robot-happy-outline" class="chat-icon-open"></iconify-icon>
|
|
<iconify-icon icon="mdi:close" class="chat-icon-close"></iconify-icon>
|
|
</button>
|
|
|
|
<div id="chat-panel" class="chat-panel no-print">
|
|
<div class="chat-header">
|
|
<iconify-icon icon="mdi:robot-happy-outline"></iconify-icon>
|
|
<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}}"
|
|
commandfor="chat-help-modal"
|
|
command="show-modal">
|
|
<iconify-icon icon="mdi:help-circle-outline"></iconify-icon>
|
|
</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}}
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Typing Indicator -->
|
|
<div id="chat-typing" class="chat-typing">
|
|
<span class="chat-typing-dot"></span>
|
|
<span class="chat-typing-dot"></span>
|
|
<span class="chat-typing-dot"></span>
|
|
</div>
|
|
|
|
<!-- Suggested Questions -->
|
|
<div class="chat-suggestions">
|
|
{{if eq .Lang "es"}}
|
|
<button type="button" class="chat-chip"
|
|
_="on click set #chat-input.value to '¿Qué proyectos en Go ha hecho?' then trigger submit on #chat-form">¿Proyectos en Go?</button>
|
|
<button type="button" class="chat-chip"
|
|
_="on click set #chat-input.value to '¿Cuántos años de experiencia tiene?' then trigger submit on #chat-form">¿Años de experiencia?</button>
|
|
<button type="button" class="chat-chip"
|
|
_="on click set #chat-input.value to '¿En qué empresas ha trabajado?' then trigger submit on #chat-form">¿Empresas?</button>
|
|
<button type="button" class="chat-chip"
|
|
_="on click set #chat-input.value to '¿Conoce React?' then trigger submit on #chat-form">¿Conoce React?</button>
|
|
<button type="button" class="chat-chip"
|
|
_="on click set #chat-input.value to '¿Qué certificaciones tiene?' then trigger submit on #chat-form">¿Certificaciones?</button>
|
|
{{else}}
|
|
<button type="button" class="chat-chip"
|
|
_="on click set #chat-input.value to 'What Go projects has he built?' then trigger submit on #chat-form">Go projects?</button>
|
|
<button type="button" class="chat-chip"
|
|
_="on click set #chat-input.value to 'How many years of experience?' then trigger submit on #chat-form">Years of experience?</button>
|
|
<button type="button" class="chat-chip"
|
|
_="on click set #chat-input.value to 'What companies has he worked at?' then trigger submit on #chat-form">Companies?</button>
|
|
<button type="button" class="chat-chip"
|
|
_="on click set #chat-input.value to 'Does he know React?' then trigger submit on #chat-form">Knows React?</button>
|
|
<button type="button" class="chat-chip"
|
|
_="on click set #chat-input.value to 'What certifications?' then trigger submit on #chat-form">Certifications?</button>
|
|
{{end}}
|
|
</div>
|
|
|
|
<form id="chat-form" class="chat-input-area"
|
|
hx-post="/api/chat"
|
|
hx-target="#chat-messages"
|
|
hx-swap="beforeend scroll:#chat-messages:bottom"
|
|
hx-indicator="#chat-typing"
|
|
_="on htmx:afterRequest set #chat-input.value to ''">
|
|
<input type="hidden" id="chat-session-id" name="session_id" value="">
|
|
<input type="hidden" name="lang" value="{{.Lang}}">
|
|
<input
|
|
type="text"
|
|
id="chat-input"
|
|
name="message"
|
|
class="chat-input"
|
|
placeholder="{{if eq .Lang "es"}}Pregunta algo sobre el CV...{{else}}Ask something about the CV...{{end}}"
|
|
autocomplete="off">
|
|
<button type="submit" class="chat-send-btn" aria-label="Send">
|
|
<iconify-icon icon="mdi:send"></iconify-icon>
|
|
</button>
|
|
</form>
|
|
</div>
|
|
{{end}}
|
|
{{end}}
|