feat: Teams-style chat UX overhaul

Bubbles:
- Teams-style layout: bot avatar (green circle) on left, message beside it
- User messages right-aligned, no avatar (clean, like Teams)
- Rounded bubbles (border-radius: 16px) instead of square
- Distinct corner radii for conversation flow

Navigation:
- Links no longer close the chat — panel stays open for continued navigation
- Added #certifications anchor (alias to courses section)
- Fixed agent instruction to use #courses for certifications references

Theme:
- All colors use CSS variables from _themes.css
- Automatically adapts to light/dark without explicit .theme-clean overrides
- Panel uses --paper-bg (white in light, dark in dark theme)

Size modes:
- 3 discrete toggle buttons: compact, half-screen, fullscreen
- Active state highlighted, direct selection (no confusing cycling)
- Removed chat-half-left (simplified to compact/half/full)

Intelligence:
- React query now returns results (verified: 4 companies + 2 projects + skills)
This commit is contained in:
juanatsap
2026-04-08 17:51:14 +01:00
parent be5fdd03c4
commit d5c90248cc
5 changed files with 95 additions and 216 deletions
+3 -3
View File
@@ -222,14 +222,14 @@ func (h *Handler) HandleChat(w http.ResponseWriter, r *http.Request) {
return
}
// User message bubble with avatar
_, _ = fmt.Fprintf(w, `<div class="chat-bubble chat-user"><div class="chat-avatar chat-avatar-user"><iconify-icon icon="mdi:account"></iconify-icon></div><div class="chat-message">%s</div></div>`, html.EscapeString(message))
// User message bubble (no avatar, right-aligned)
_, _ = fmt.Fprintf(w, `<div class="chat-row chat-row-user"><div class="chat-msg">%s</div></div>`, html.EscapeString(message))
// Agent response bubble with avatar
if response == "" {
response = "I couldn't find an answer to that. Try asking about experience, projects, skills, or education."
}
_, _ = fmt.Fprintf(w, `<div class="chat-bubble chat-bot"><div class="chat-avatar chat-avatar-bot"><iconify-icon icon="mdi:robot-happy-outline"></iconify-icon></div><div class="chat-message">%s</div></div>`, formatResponse(response))
_, _ = fmt.Fprintf(w, `<div class="chat-row chat-row-bot"><div class="chat-avatar"><iconify-icon icon="mdi:robot-happy-outline"></iconify-icon></div><div class="chat-msg">%s</div></div>`, formatResponse(response))
// Session ID via OOB swap
_, _ = fmt.Fprintf(w, `<input type="hidden" id="chat-session-id" name="session_id" value="%s" form="chat-form" hx-swap-oob="true"/>`, sessionID)