diff --git a/internal/chat/agent.go b/internal/chat/agent.go index d60f901..58df61c 100644 --- a/internal/chat/agent.go +++ b/internal/chat/agent.go @@ -33,12 +33,14 @@ You answer questions about the CV owner's experience, projects, skills, educatio 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. +- 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. - Answer in the SAME LANGUAGE the user writes in. If they ask in Spanish, answer in Spanish. -- Be concise and direct — visitors want quick answers, not essays. +- 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. -- You may reference sections of the CV (e.g., "See the Projects section") to guide the visitor. +- 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. - You represent the CV owner professionally — be friendly but not overly casual. diff --git a/static/css/04-interactive/_chat.css b/static/css/04-interactive/_chat.css index 45cb762..2bee29c 100644 --- a/static/css/04-interactive/_chat.css +++ b/static/css/04-interactive/_chat.css @@ -1,22 +1,24 @@ /* ============================================================================ CHAT WIDGET — CV Assistant Mascot - Floating AI chat panel for CV questions + Uses CV design tokens from _variables.css + Position: right side, just above back-to-top button (right: 2rem) ============================================================================ */ /* ========================================================================== - Toggle Button — left side, in the fixed button column + Toggle Button — right side, above back-to-top (bottom: 6rem) + Matches existing fixed button style: dark bg, 50px, subtle opacity ========================================================================== */ .chat-toggle-btn { position: fixed; - bottom: 14rem; - left: 2rem; + bottom: 6rem; + right: 2rem; z-index: 1000; width: 50px; height: 50px; border-radius: 50%; - background: var(--accent-color, #2563eb); - color: #fff; + background: var(--black-bar, #2b2b2b); + color: white; border: none; cursor: pointer; display: flex; @@ -25,14 +27,14 @@ font-size: 1.4rem; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); transition: all 0.3s ease; - opacity: 0.6; + opacity: 0.4; } .chat-toggle-btn:hover { opacity: 1; transform: translateY(-3px); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4); - background: var(--accent-color-hover, #1d4ed8); + background: var(--accent-blue, #0066cc); } /* Icon swap: show mascot by default, close when active */ @@ -42,7 +44,7 @@ .chat-toggle-btn.mascot-active { opacity: 1; - background: var(--accent-color, #2563eb); + background: var(--accent-blue, #0066cc); } .chat-toggle-btn.mascot-active .chat-icon-open { @@ -54,23 +56,24 @@ } /* ========================================================================== - Panel — anchored from the left, above the button + Panel — right side, above the button ========================================================================== */ .chat-panel { position: fixed; - bottom: 18.5rem; - left: 2rem; - width: 380px; - max-height: 520px; - background: var(--bg-primary, #fff); - border: 1px solid var(--border-color, #e2e8f0); - border-radius: 12px; - box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15); + bottom: 10.5rem; + right: 2rem; + width: 360px; + max-height: 500px; + background: var(--paper-bg, #ffffff); + border: 1px solid var(--border-light, #e0e0e0); + border-radius: 8px; + box-shadow: var(--shadow-lg, 2px 2px 9px rgba(0, 0, 0, 0.5)); display: none; flex-direction: column; z-index: 999; overflow: hidden; + font-family: 'Source Sans Pro', 'Segoe UI', sans-serif; } .chat-panel.chat-open { @@ -78,57 +81,40 @@ } /* ========================================================================== - Header + Header — uses black-bar like action bar ========================================================================== */ .chat-header { display: flex; align-items: center; gap: 8px; - padding: 12px 16px; - background: var(--accent-color, #2563eb); - color: #fff; - font-size: 0.9rem; + padding: 10px 14px; + background: var(--black-bar, #2b2b2b); + color: var(--action-bar-text, #ffffff); + font-family: 'Quicksand', sans-serif; + font-size: 0.85rem; font-weight: 600; } .chat-header iconify-icon { - font-size: 1.2rem; + font-size: 1.1rem; } .chat-help-btn { margin-left: auto; background: none; border: none; - color: #fff; + color: var(--action-bar-text-muted, rgba(255, 255, 255, 0.85)); cursor: pointer; - font-size: 1.1rem; - opacity: 0.7; - transition: opacity 0.2s; + font-size: 1rem; + transition: color 0.2s; display: flex; align-items: center; padding: 0; } .chat-help-btn:hover { - opacity: 1; -} - -.chat-close-btn { - background: none; - border: none; color: #fff; - cursor: pointer; - font-size: 1.1rem; - opacity: 0.8; - transition: opacity 0.2s; - display: flex; - align-items: center; - padding: 0; -} - -.chat-close-btn:hover { - opacity: 1; } /* ========================================================================== @@ -139,14 +125,14 @@ display: none; flex-direction: column; align-items: center; - gap: 10px; - padding: 16px 20px; - margin: 12px; - background: var(--bg-secondary, #f1f5f9); - border: 1px solid var(--border-color, #e2e8f0); - border-radius: 10px; + 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.25s ease; + animation: helpFadeIn 0.2s ease; } .chat-help-card.visible { @@ -154,37 +140,38 @@ } @keyframes helpFadeIn { - from { opacity: 0; transform: translateY(-6px); } + from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } } .chat-help-icon { - font-size: 2rem; - color: var(--accent-color, #2563eb); + font-size: 1.6rem; + color: var(--accent-blue, #0066cc); line-height: 1; } .chat-help-text { - font-size: 0.8rem; + font-size: 0.78rem; line-height: 1.5; - color: var(--text-secondary, #475569); + color: var(--text-muted, #666666); margin: 0; } .chat-help-dismiss { - background: var(--accent-color, #2563eb); + background: var(--black-bar, #2b2b2b); color: #fff; border: none; - border-radius: 6px; - padding: 5px 16px; - font-size: 0.75rem; + 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-color-hover, #1d4ed8); + background: var(--accent-blue, #0066cc); } /* ========================================================================== @@ -194,19 +181,19 @@ .chat-messages { flex: 1; overflow-y: auto; - padding: 16px; + padding: 12px; display: flex; flex-direction: column; - gap: 12px; + gap: 10px; max-height: 260px; - min-height: 80px; + min-height: 60px; } /* Message Bubbles */ .chat-message { - padding: 10px 14px; - border-radius: 12px; - font-size: 0.85rem; + padding: 8px 12px; + border-radius: 8px; + font-size: 0.8rem; line-height: 1.5; max-width: 90%; word-wrap: break-word; @@ -222,7 +209,7 @@ .chat-message ul { margin: 4px 0; - padding-left: 18px; + padding-left: 16px; } .chat-message li { @@ -230,17 +217,17 @@ } .chat-agent { - background: var(--bg-secondary, #f1f5f9); - color: var(--text-primary, #1e293b); + background: var(--paper-secondary-bg, #f5f5f5); + color: var(--text-secondary, #333333); align-self: flex-start; - border-bottom-left-radius: 4px; + border-bottom-left-radius: 2px; } .chat-user { - background: var(--accent-color, #2563eb); + background: var(--black-bar, #2b2b2b); color: #fff; align-self: flex-end; - border-bottom-right-radius: 4px; + border-bottom-right-radius: 2px; } .chat-error { @@ -249,6 +236,7 @@ align-self: center; font-style: italic; border: 1px solid #fecaca; + font-size: 0.75rem; } /* ========================================================================== @@ -259,19 +247,18 @@ display: none; align-items: center; gap: 4px; - padding: 8px 16px; + padding: 6px 14px; } -/* Show when HTMX request is in-flight */ .chat-typing.htmx-request { display: flex; } .chat-typing-dot { - width: 6px; - height: 6px; + width: 5px; + height: 5px; border-radius: 50%; - background: var(--text-secondary, #94a3b8); + background: var(--text-light, #999999); animation: typingBounce 1.4s infinite ease-in-out both; } @@ -280,14 +267,8 @@ .chat-typing-dot:nth-child(3) { animation-delay: 0.32s; } @keyframes typingBounce { - 0%, 80%, 100% { - transform: scale(0.6); - opacity: 0.4; - } - 40% { - transform: scale(1); - opacity: 1; - } + 0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; } + 40% { transform: scale(1); opacity: 1; } } /* ========================================================================== @@ -296,25 +277,22 @@ .chat-suggestions { display: flex; - gap: 6px; - padding: 8px 12px; + gap: 5px; + padding: 6px 10px; overflow-x: auto; - border-top: 1px solid var(--border-color, #e2e8f0); - scrollbar-width: none; /* Firefox */ -} - -.chat-suggestions::-webkit-scrollbar { - display: none; /* Chrome/Safari */ + flex-wrap: wrap; + border-top: 1px solid var(--border-light, #e0e0e0); } .chat-chip { flex-shrink: 0; - background: var(--bg-secondary, #f1f5f9); - color: var(--text-primary, #1e293b); - border: 1px solid var(--border-color, #e2e8f0); - border-radius: 16px; - padding: 4px 12px; - font-size: 0.72rem; + background: transparent; + color: var(--text-muted, #666666); + border: 1px solid var(--border-light, #e0e0e0); + border-radius: 14px; + padding: 3px 10px; + font-size: 0.68rem; + font-family: 'Source Sans Pro', sans-serif; cursor: pointer; transition: all 0.2s ease; white-space: nowrap; @@ -322,9 +300,9 @@ } .chat-chip:hover { - background: var(--accent-color, #2563eb); + background: var(--black-bar, #2b2b2b); color: #fff; - border-color: var(--accent-color, #2563eb); + border-color: var(--black-bar, #2b2b2b); } /* ========================================================================== @@ -334,46 +312,47 @@ .chat-input-area { display: flex; align-items: center; - gap: 8px; - padding: 10px 12px; - border-top: 1px solid var(--border-color, #e2e8f0); - background: var(--bg-primary, #fff); + gap: 6px; + padding: 8px 10px; + border-top: 1px solid var(--border-light, #e0e0e0); + background: var(--paper-bg, #ffffff); } .chat-input { flex: 1; - padding: 8px 12px; - border: 1px solid var(--border-color, #e2e8f0); - border-radius: 20px; - font-size: 0.85rem; + padding: 7px 12px; + border: 1px solid var(--border-light, #e0e0e0); + border-radius: 16px; + font-size: 0.8rem; + font-family: 'Source Sans Pro', sans-serif; outline: none; - background: var(--bg-primary, #fff); - color: var(--text-primary, #1e293b); + background: var(--paper-bg, #ffffff); + color: var(--text-primary, #1a1a1a); transition: border-color 0.2s; } .chat-input:focus { - border-color: var(--accent-color, #2563eb); + border-color: var(--accent-blue, #0066cc); } .chat-send-btn { - background: var(--accent-color, #2563eb); + background: var(--black-bar, #2b2b2b); color: #fff; border: none; border-radius: 50%; - width: 36px; - height: 36px; + width: 32px; + height: 32px; cursor: pointer; display: flex; align-items: center; justify-content: center; - font-size: 1.1rem; + font-size: 1rem; transition: background 0.2s; flex-shrink: 0; } .chat-send-btn:hover { - background: var(--accent-color-hover, #1d4ed8); + background: var(--accent-blue, #0066cc); } /* ========================================================================== @@ -387,12 +366,12 @@ right: 0; width: 100%; max-height: 70vh; - border-radius: 12px 12px 0 0; + border-radius: 8px 8px 0 0; } .chat-toggle-btn { - bottom: 12rem; - left: 1rem; + bottom: 5rem; + right: 1rem; } .chat-messages { @@ -401,61 +380,69 @@ } /* ========================================================================== - Dark Theme Support (theme-clean) + Dark Theme (theme-clean) ========================================================================== */ .theme-clean .chat-panel { - background: #1e293b; - border-color: #334155; + background: #1a1a1a; + border-color: #333333; +} + +.theme-clean .chat-header { + background: #111111; } .theme-clean .chat-agent { - background: #334155; - color: #e2e8f0; + background: #2a2a2a; + color: #d0d0d0; +} + +.theme-clean .chat-user { + background: #333333; } .theme-clean .chat-error { - background: #450a0a; + background: #3a1010; color: #fca5a5; - border-color: #7f1d1d; + border-color: #5a1a1a; } .theme-clean .chat-input-area { - border-top-color: #334155; - background: #1e293b; + border-top-color: #333333; + background: #1a1a1a; } .theme-clean .chat-input { - background: #0f172a; - border-color: #334155; - color: #e2e8f0; + background: #111111; + border-color: #333333; + color: #d0d0d0; } .theme-clean .chat-help-card { - background: #334155; - border-color: #475569; + background: #2a2a2a; + border-color: #333333; } .theme-clean .chat-help-text { - color: #cbd5e1; + color: #999999; } .theme-clean .chat-suggestions { - border-top-color: #334155; + border-top-color: #333333; } .theme-clean .chat-chip { - background: #334155; - color: #e2e8f0; - border-color: #475569; + background: transparent; + color: #999999; + border-color: #333333; } .theme-clean .chat-chip:hover { - background: var(--accent-color, #2563eb); + background: #333333; color: #fff; - border-color: var(--accent-color, #2563eb); + border-color: #333333; } .theme-clean .chat-typing-dot { - background: #64748b; + background: #555555; } diff --git a/templates/partials/widgets/chat-widget.html b/templates/partials/widgets/chat-widget.html index aba8032..3bc8672 100644 --- a/templates/partials/widgets/chat-widget.html +++ b/templates/partials/widgets/chat-widget.html @@ -3,7 +3,7 @@