feat: chat UX overhaul — GLM local model, icons, layout modes, instant bubbles
- Add GLM-4.7-Flash as default Ollama model (replaces Mistral) - Fix WRITE_TIMEOUT (15s→120s) and HTMX timeout (5s→120s) for local LLM - Auto-warmup model on startup in development mode - Add /api/chat/status endpoint for model readiness polling - Show "Initializing AI model..." indicator while model loads - Add user avatar (mdi:account) on chat messages - Inject company/project/course sprite icons inline in chat responses - Replace cramped header icons with 4 icon buttons + tooltips (Compact, Side panel, Floating, Full screen) - Add floating/draggable chat mode with smooth drag support - Chip questions show user bubble instantly and clear input - Help modal prefills input instead of auto-sending - User bubble rendered client-side for immediate feedback
This commit is contained in:
juanatsap
@@ -15,23 +15,27 @@
|
||||
<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>
|
||||
<div class="chat-size-controls">
|
||||
<button class="chat-size-opt active" onclick="setChatSize('')" title="{{if eq .Lang "es"}}Compacto{{else}}Compact{{end}}">
|
||||
<iconify-icon icon="mdi:dock-window"></iconify-icon>
|
||||
<div class="chat-header-actions">
|
||||
<button class="chat-mode-btn active" data-mode="" title="{{if eq .Lang "es"}}Compacto{{else}}Compact{{end}}" onclick="setChatSize('')">
|
||||
<iconify-icon icon="mdi:message-outline"></iconify-icon>
|
||||
</button>
|
||||
<button class="chat-size-opt" onclick="setChatSize('chat-half')" title="{{if eq .Lang "es"}}Media pantalla{{else}}Half screen{{end}}">
|
||||
<iconify-icon icon="mdi:dock-right"></iconify-icon>
|
||||
<button class="chat-mode-btn" data-mode="chat-half" title="{{if eq .Lang "es"}}Panel lateral{{else}}Side panel{{end}}" onclick="setChatSize('chat-half')">
|
||||
<iconify-icon icon="mdi:page-layout-sidebar-right"></iconify-icon>
|
||||
</button>
|
||||
<button class="chat-size-opt" onclick="setChatSize('chat-full')" title="{{if eq .Lang "es"}}Pantalla completa{{else}}Full screen{{end}}">
|
||||
<iconify-icon icon="mdi:fullscreen"></iconify-icon>
|
||||
<button class="chat-mode-btn" data-mode="chat-float" title="{{if eq .Lang "es"}}Flotante — arrastra para mover{{else}}Floating — drag to move{{end}}" onclick="setChatSize('chat-float')">
|
||||
<iconify-icon icon="mdi:cursor-move"></iconify-icon>
|
||||
</button>
|
||||
<button class="chat-mode-btn" data-mode="chat-full" title="{{if eq .Lang "es"}}Pantalla completa{{else}}Full screen{{end}}" onclick="setChatSize('chat-full')">
|
||||
<iconify-icon icon="mdi:arrow-expand-all"></iconify-icon>
|
||||
</button>
|
||||
<span class="chat-header-divider"></span>
|
||||
<button class="chat-mode-btn"
|
||||
title="{{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>
|
||||
<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">
|
||||
@@ -41,11 +45,14 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Typing Indicator -->
|
||||
<!-- Typing / Status 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>
|
||||
<span id="chat-status-text" class="chat-status-text" style="display:none"></span>
|
||||
<span class="chat-typing-dots">
|
||||
<span class="chat-typing-dot"></span>
|
||||
<span class="chat-typing-dot"></span>
|
||||
<span class="chat-typing-dot"></span>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<!-- Suggested Questions -->
|
||||
@@ -69,7 +76,8 @@
|
||||
hx-post="/api/chat"
|
||||
hx-target="#chat-messages"
|
||||
hx-swap="beforeend scroll:#chat-messages:bottom"
|
||||
hx-indicator="#chat-typing">
|
||||
hx-indicator="#chat-typing"
|
||||
hx-request='{"timeout":120000}'>
|
||||
<input type="hidden" id="chat-session-id" name="session_id" value="">
|
||||
<input type="hidden" name="lang" value="{{.Lang}}">
|
||||
<input
|
||||
@@ -87,8 +95,33 @@
|
||||
|
||||
<!-- Chat JavaScript — all interactions in plain JS, no Hyperscript -->
|
||||
<script>
|
||||
// Toggle chat panel open/close
|
||||
// Chat model readiness state
|
||||
var chatModelReady = false;
|
||||
var chatWarmedUp = false;
|
||||
|
||||
// Poll model status until ready
|
||||
function pollChatStatus() {
|
||||
fetch('/api/chat/status').then(function(r) { return r.json(); }).then(function(data) {
|
||||
if (data.ready) {
|
||||
chatModelReady = true;
|
||||
var statusEl = document.getElementById('chat-status-text');
|
||||
if (statusEl) statusEl.style.display = 'none';
|
||||
} else if (data.warming) {
|
||||
setTimeout(pollChatStatus, 2000);
|
||||
}
|
||||
}).catch(function() {});
|
||||
}
|
||||
|
||||
// Trigger warmup on page load and start polling
|
||||
(function() {
|
||||
if (!chatWarmedUp) {
|
||||
chatWarmedUp = true;
|
||||
fetch('/api/chat/warmup', { method: 'POST' }).catch(function() {});
|
||||
pollChatStatus();
|
||||
}
|
||||
})();
|
||||
|
||||
// Toggle chat panel open/close
|
||||
function toggleChatPanel() {
|
||||
var panel = document.getElementById('chat-panel');
|
||||
var btn = document.getElementById('chat-toggle-btn');
|
||||
@@ -96,23 +129,33 @@ function toggleChatPanel() {
|
||||
btn.classList.toggle('mascot-active');
|
||||
if (panel.classList.contains('chat-open')) {
|
||||
document.getElementById('chat-input').focus();
|
||||
// Warm up the model on first open (silent background ping)
|
||||
if (!chatWarmedUp) {
|
||||
chatWarmedUp = true;
|
||||
fetch('/api/chat/warmup', { method: 'POST' }).catch(function() {});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Send a question (from chip or help modal)
|
||||
// Show user message bubble immediately in chat
|
||||
var chatBubblePending = false;
|
||||
function appendUserBubble(text) {
|
||||
var messages = document.getElementById('chat-messages');
|
||||
var row = document.createElement('div');
|
||||
row.className = 'chat-row chat-row-user';
|
||||
row.innerHTML = '<div class="chat-msg">' + text.replace(/</g, '<').replace(/>/g, '>') + '</div>'
|
||||
+ '<div class="chat-avatar chat-avatar-user"><iconify-icon icon="mdi:account"></iconify-icon></div>';
|
||||
messages.appendChild(row);
|
||||
messages.scrollTop = messages.scrollHeight;
|
||||
chatBubblePending = true;
|
||||
}
|
||||
|
||||
// Send a question immediately (from chip click) — show bubble, clear input, send
|
||||
function sendChatQuestion(question) {
|
||||
appendUserBubble(question);
|
||||
var input = document.getElementById('chat-input');
|
||||
var form = document.getElementById('chat-form');
|
||||
input.value = question;
|
||||
htmx.trigger(form, 'submit');
|
||||
input.value = '';
|
||||
}
|
||||
|
||||
// Close help modal, open chat, and send question
|
||||
// Prefill input from help modal (user must click Send)
|
||||
function closeChatHelpAndAsk(question) {
|
||||
document.getElementById('chat-help-modal').close();
|
||||
var panel = document.getElementById('chat-panel');
|
||||
@@ -121,19 +164,141 @@ function closeChatHelpAndAsk(question) {
|
||||
panel.classList.add('chat-open');
|
||||
btn.classList.add('mascot-active');
|
||||
}
|
||||
sendChatQuestion(question);
|
||||
var input = document.getElementById('chat-input');
|
||||
input.value = question;
|
||||
input.focus();
|
||||
}
|
||||
|
||||
// Set chat panel size: '' (compact), 'chat-half', 'chat-full'
|
||||
// Form submit — show user bubble for manual typing, clear input
|
||||
document.addEventListener('htmx:beforeRequest', function(event) {
|
||||
if (event.detail.elt && event.detail.elt.id === 'chat-form') {
|
||||
var input = document.getElementById('chat-input');
|
||||
var msg = input.value.trim();
|
||||
// Chips already added their bubble; manual typing needs one
|
||||
if (msg && !chatBubblePending) {
|
||||
appendUserBubble(msg);
|
||||
}
|
||||
chatBubblePending = false;
|
||||
input.value = '';
|
||||
// Show initializing or typing indicator
|
||||
var statusEl = document.getElementById('chat-status-text');
|
||||
var dotsEl = document.querySelector('.chat-typing-dots');
|
||||
if (!chatModelReady && statusEl && dotsEl) {
|
||||
statusEl.textContent = '{{if eq .Lang "es"}}Inicializando modelo IA…{{else}}Initializing AI model…{{end}}';
|
||||
statusEl.style.display = 'inline';
|
||||
dotsEl.style.display = 'none';
|
||||
} else if (statusEl && dotsEl) {
|
||||
statusEl.style.display = 'none';
|
||||
dotsEl.style.display = 'inline-flex';
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// Reset indicator after HTMX request completes
|
||||
document.addEventListener('htmx:afterRequest', function(event) {
|
||||
if (event.detail.elt && event.detail.elt.id === 'chat-form') {
|
||||
document.getElementById('chat-input').value = '';
|
||||
chatModelReady = true;
|
||||
var statusEl = document.getElementById('chat-status-text');
|
||||
if (statusEl) statusEl.style.display = 'none';
|
||||
var dotsEl = document.querySelector('.chat-typing-dots');
|
||||
if (dotsEl) dotsEl.style.display = 'inline-flex';
|
||||
}
|
||||
});
|
||||
|
||||
// Set chat panel size
|
||||
function setChatSize(size) {
|
||||
var panel = document.getElementById('chat-panel');
|
||||
panel.classList.remove('chat-half', 'chat-full');
|
||||
panel.classList.remove('chat-half', 'chat-full', 'chat-float');
|
||||
panel.style.top = '';
|
||||
panel.style.left = '';
|
||||
panel.style.right = '';
|
||||
panel.style.bottom = '';
|
||||
if (size) panel.classList.add(size);
|
||||
// Highlight active button
|
||||
document.querySelectorAll('.chat-size-opt').forEach(function(btn) {
|
||||
btn.classList.remove('active');
|
||||
// Update active button
|
||||
document.querySelectorAll('.chat-mode-btn[data-mode]').forEach(function(btn) {
|
||||
btn.classList.toggle('active', btn.getAttribute('data-mode') === size);
|
||||
});
|
||||
event.currentTarget.classList.add('active');
|
||||
// Enable/disable drag
|
||||
if (size === 'chat-float') {
|
||||
enableChatDrag(panel);
|
||||
} else {
|
||||
disableChatDrag(panel);
|
||||
}
|
||||
}
|
||||
|
||||
// Drag support for floating mode
|
||||
var chatDragState = { dragging: false, offsetX: 0, offsetY: 0 };
|
||||
|
||||
function enableChatDrag(panel) {
|
||||
var header = panel.querySelector('.chat-header');
|
||||
header.style.cursor = 'grab';
|
||||
header.addEventListener('mousedown', chatDragStart);
|
||||
header.addEventListener('touchstart', chatDragTouchStart, { passive: false });
|
||||
}
|
||||
|
||||
function disableChatDrag(panel) {
|
||||
var header = panel.querySelector('.chat-header');
|
||||
header.style.cursor = '';
|
||||
header.removeEventListener('mousedown', chatDragStart);
|
||||
header.removeEventListener('touchstart', chatDragTouchStart);
|
||||
}
|
||||
|
||||
function chatDragStart(e) {
|
||||
if (e.target.closest('button')) return;
|
||||
var panel = document.getElementById('chat-panel');
|
||||
chatDragState.dragging = true;
|
||||
chatDragState.offsetX = e.clientX - panel.getBoundingClientRect().left;
|
||||
chatDragState.offsetY = e.clientY - panel.getBoundingClientRect().top;
|
||||
panel.classList.add('chat-dragging');
|
||||
document.addEventListener('mousemove', chatDragMove);
|
||||
document.addEventListener('mouseup', chatDragEnd);
|
||||
panel.querySelector('.chat-header').style.cursor = 'grabbing';
|
||||
e.preventDefault();
|
||||
}
|
||||
|
||||
function chatDragTouchStart(e) {
|
||||
if (e.target.closest('button')) return;
|
||||
var panel = document.getElementById('chat-panel');
|
||||
var touch = e.touches[0];
|
||||
chatDragState.dragging = true;
|
||||
chatDragState.offsetX = touch.clientX - panel.getBoundingClientRect().left;
|
||||
chatDragState.offsetY = touch.clientY - panel.getBoundingClientRect().top;
|
||||
panel.classList.add('chat-dragging');
|
||||
document.addEventListener('touchmove', chatDragTouchMove, { passive: false });
|
||||
document.addEventListener('touchend', chatDragEnd);
|
||||
e.preventDefault();
|
||||
}
|
||||
|
||||
function chatDragMove(e) {
|
||||
if (!chatDragState.dragging) return;
|
||||
var panel = document.getElementById('chat-panel');
|
||||
panel.style.left = (e.clientX - chatDragState.offsetX) + 'px';
|
||||
panel.style.top = (e.clientY - chatDragState.offsetY) + 'px';
|
||||
panel.style.right = 'auto';
|
||||
panel.style.bottom = 'auto';
|
||||
}
|
||||
|
||||
function chatDragTouchMove(e) {
|
||||
if (!chatDragState.dragging) return;
|
||||
var touch = e.touches[0];
|
||||
var panel = document.getElementById('chat-panel');
|
||||
panel.style.left = (touch.clientX - chatDragState.offsetX) + 'px';
|
||||
panel.style.top = (touch.clientY - chatDragState.offsetY) + 'px';
|
||||
panel.style.right = 'auto';
|
||||
panel.style.bottom = 'auto';
|
||||
e.preventDefault();
|
||||
}
|
||||
|
||||
function chatDragEnd() {
|
||||
chatDragState.dragging = false;
|
||||
var panel = document.getElementById('chat-panel');
|
||||
panel.classList.remove('chat-dragging');
|
||||
panel.querySelector('.chat-header').style.cursor = 'grab';
|
||||
document.removeEventListener('mousemove', chatDragMove);
|
||||
document.removeEventListener('mouseup', chatDragEnd);
|
||||
document.removeEventListener('touchmove', chatDragTouchMove);
|
||||
document.removeEventListener('touchend', chatDragEnd);
|
||||
}
|
||||
|
||||
// Navigate from chat link to CV section, then highlight
|
||||
@@ -147,13 +312,6 @@ function scrollToCV(link) {
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
// Clear input after HTMX request completes
|
||||
document.addEventListener('htmx:afterRequest', function(event) {
|
||||
if (event.detail.elt && event.detail.elt.id === 'chat-form') {
|
||||
document.getElementById('chat-input').value = '';
|
||||
}
|
||||
});
|
||||
</script>
|
||||
{{end}}
|
||||
{{end}}
|
||||
|
||||
Reference in New Issue
Block a user