juanatsap
16dd150758
- Restore has-tooltip tooltip-left on toggle button - Use --accent-blue (#0066cc) as secondary color: header, user bubbles, send button, chip hover, input focus — breaks the all-black monotony - Dark theme uses deeper blue (#003d7a header, #004d99 interactions) - Fix chip click: replace Hyperscript htmx.trigger() call with direct onclick using JS htmx.trigger() — Hyperscript couldn't resolve the HTMX global properly - Remove _chat.css @import from main.css (loaded separately already)
95 lines
4.8 KiB
HTML
95 lines
4.8 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"
|
|
onclick="document.getElementById('chat-input').value='¿Qué proyectos en Go ha hecho?'; htmx.trigger('#chat-form', 'submit');">¿Proyectos en Go?</button>
|
|
<button type="button" class="chat-chip"
|
|
onclick="document.getElementById('chat-input').value='¿Cuántos años de experiencia tiene?'; htmx.trigger('#chat-form', 'submit');">¿Años de experiencia?</button>
|
|
<button type="button" class="chat-chip"
|
|
onclick="document.getElementById('chat-input').value='¿En qué empresas ha trabajado?'; htmx.trigger('#chat-form', 'submit');">¿Empresas?</button>
|
|
<button type="button" class="chat-chip"
|
|
onclick="document.getElementById('chat-input').value='¿Conoce React?'; htmx.trigger('#chat-form', 'submit');">¿Conoce React?</button>
|
|
<button type="button" class="chat-chip"
|
|
onclick="document.getElementById('chat-input').value='¿Qué certificaciones tiene?'; htmx.trigger('#chat-form', 'submit');">¿Certificaciones?</button>
|
|
{{else}}
|
|
<button type="button" class="chat-chip"
|
|
onclick="document.getElementById('chat-input').value='What Go projects has he built?'; htmx.trigger('#chat-form', 'submit');">Go projects?</button>
|
|
<button type="button" class="chat-chip"
|
|
onclick="document.getElementById('chat-input').value='How many years of experience?'; htmx.trigger('#chat-form', 'submit');">Years of experience?</button>
|
|
<button type="button" class="chat-chip"
|
|
onclick="document.getElementById('chat-input').value='What companies has he worked at?'; htmx.trigger('#chat-form', 'submit');">Companies?</button>
|
|
<button type="button" class="chat-chip"
|
|
onclick="document.getElementById('chat-input').value='Does he know React?'; htmx.trigger('#chat-form', 'submit');">Knows React?</button>
|
|
<button type="button" class="chat-chip"
|
|
onclick="document.getElementById('chat-input').value='What certifications?'; htmx.trigger('#chat-form', 'submit');">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}}
|