chore: update 8 file(s)

2025-12-28 07:59:46 +01:00
parent 19acb7ef15
commit 5805f1e81c
8 changed files with 5 additions and 9 deletions
--- a/www/chatv3.js
+++ b/www/chatv3.js
@@ -0,0 +1,688 @@
+const BACKENDS = {
+	plato: {
+		prod: '/api/plato',
+		dev: 'http://192.168.1.74:8080/v1',
+		name: 'Plato (192.168.1.74)'
+	},
+	stoic: {
+		prod: '/api/stoic',
+		dev: 'http://192.168.1.159:1234/v1',
+		name: 'Stoic (192.168.1.159)'
+	},
+	ollama: {
+		prod: '/api/ollama',
+		dev: 'http://192.168.1.159:8081/v1',
+		name: 'Ollama (192.168.1.159:8081)'
+	}
+}
+const IS_PRODUCTION = window.location.hostname === 'jarvis-lan.appmodel.nl'
+const API_KEY = 'not-needed'
+const MAX_CHAT_HISTORY = 50
+
+let currentBackendModel = null
+let availableBackendModels = []
+let currentStreamController = null
+let isStreaming = false
+let chatHistory = JSON.parse(localStorage.getItem('chatHistory')) || []
+
+// ✅ FIX: Generate unique IDs and validate message structure
+chatHistory = chatHistory.map((message, index) => ({
+	role: message.role || 'user',
+	content: message.content || '',
+	markdown: message.markdown || false,
+	messageId: message.messageId || `msg-${Date.now()}-${index}`
+})).filter(msg => msg.content && typeof msg.content === 'string')
+
+const welcomeMessage = `# Welcome to LM Studio Chat!
+
+I now support **full conversation history**, **real-time streaming responses** and **dark, readable text formatting**.
+
+## Features:
+1. **Full Chat History** - Complete conversation context is now sent to the AI
+2. **Smart History Management** - Automatically keeps the last ${MAX_CHAT_HISTORY} messages
+3. **Streaming Mode** (enabled by default) - Watch responses appear word-by-word
+4. **Markdown Rendering** - Proper formatting for code, lists, tables, and more
+5. **Readable Dark Text** - No more eye strain from light gray text
+
+## Try it out:
+- Ask follow-up questions that reference earlier messages
+- Have a multi-turn conversation with full context
+- Ask "what did I just ask?" to test history retention
+- Watch the streaming response in real-time!
+
+> *Tip: You can toggle streaming and markdown using the checkboxes below.*`
+
+// ✅ NEW: Robust parser for backend:model format
+function splitBackendModel(value) {
+	if (!value || value === ':') {
+		return { backendKey: '', model: '' };
+	}
+
+	const colonIndex = value.indexOf(':');
+	if (colonIndex === -1) {
+		return { backendKey: value, model: '' };
+	}
+
+	return {
+		backendKey: value.substring(0, colonIndex),
+		model: value.substring(colonIndex + 1)
+	};
+}
+
+function getApiUrl() {
+	const { backendKey, model } = splitBackendModel(currentBackendModel);
+	const effectiveBackendKey = backendKey || 'plato';
+	const backend = BACKENDS[effectiveBackendKey];
+
+	if (!backend) {
+		throw new Error(`Invalid backend: '${effectiveBackendKey}'`);
+	}
+
+	return IS_PRODUCTION ? backend.prod : backend.dev;
+}
+
+function updateBackendModelDisplay() {
+	const { backendKey, model } = splitBackendModel(currentBackendModel);
+	const backend = BACKENDS[backendKey];
+	if (!backend) return;
+
+	const displayText = IS_PRODUCTION
+		? `${backend.prod} - ${backend.name}`
+		: backend.dev;
+	const displayElement = document.getElementById('backendDisplay');
+	if (displayElement) {
+		displayElement.textContent = `${displayText} - Model: ${model || 'None'}`;
+	}
+}
+
+async function fetchBackendModels() {
+	const selector = document.getElementById('backendModelSelector');
+	let allModels = [];
+
+	for (const [backendKey, backendConfig] of Object.entries(BACKENDS)) {
+		try {
+			const apiUrl = IS_PRODUCTION ? backendConfig.prod : backendConfig.dev;
+			console.log(`Fetching models from ${backendKey}: ${apiUrl}`);
+
+			const response = await fetch(`${apiUrl}/models`, {
+				signal: AbortSignal.timeout(5000) // 5 second timeout
+			});
+
+			if (response.ok) {
+				const data = await response.json();
+				if (data.data && Array.isArray(data.data)) {
+					const models = data.data.map(model => ({
+						backend: backendKey,
+						model: model.id
+					}));
+					allModels = [...allModels, ...models];
+				}
+			} else {
+				console.error(`Failed to fetch models from ${backendKey}: ${response.status} ${response.statusText}`);
+			}
+		} catch (error) {
+			console.error(`Error fetching models from ${backendKey}:`, error);
+		}
+	}
+
+	availableBackendModels = allModels;
+
+	if (selector) {
+		if (availableBackendModels.length === 0) {
+			selector.innerHTML = '<option value="">No models available (check backends)</option>';
+		} else {
+			populateBackendModelSelector();
+
+			// Auto-select if no valid model is set
+			const hasModel = currentBackendModel && currentBackendModel.includes(':') && currentBackendModel.split(':')[1];
+			if (!hasModel && availableBackendModels.length > 0) {
+				currentBackendModel = `${availableBackendModels[0].backend}:${availableBackendModels[0].model}`;
+				selector.value = currentBackendModel;
+			}
+		}
+	}
+
+	updateBackendModelDisplay();
+}
+
+function populateBackendModelSelector() {
+	const selector = document.getElementById('backendModelSelector');
+	if (!selector) return;
+
+	if (availableBackendModels.length === 0) {
+		selector.innerHTML = '<option value="">No models available</option>';
+		return;
+	}
+
+	selector.innerHTML = availableBackendModels.map(backendModel =>
+		`<option value="${backendModel.backend}:${backendModel.model}">${BACKENDS[backendModel.backend].name} - ${backendModel.model}</option>`
+	).join('');
+
+	if (currentBackendModel && selector.querySelector(`option[value="${currentBackendModel}"]`)) {
+		selector.value = currentBackendModel;
+	} else if (availableBackendModels.length > 0) {
+		// If current selection is invalid, reset to first available
+		currentBackendModel = `${availableBackendModels[0].backend}:${availableBackendModels[0].model}`;
+		selector.value = currentBackendModel;
+	}
+}
+
+function getApiMessages() {
+	return chatHistory.slice(-MAX_CHAT_HISTORY).map(({ role, content }) => ({
+		role,
+		content
+	}));
+}
+
+function trimChatHistory() {
+	if (chatHistory.length > MAX_CHAT_HISTORY) {
+		chatHistory = chatHistory.slice(-MAX_CHAT_HISTORY);
+		localStorage.setItem('chatHistory', JSON.stringify(chatHistory));
+	}
+}
+
+document.addEventListener('DOMContentLoaded', () => {
+	const backendModelSelector = document.getElementById('backendModelSelector');
+
+	if (backendModelSelector) {
+		backendModelSelector.addEventListener('change', (e) => {
+			currentBackendModel = e.target.value;
+			updateBackendModelDisplay();
+			fetchBackendModels();
+		});
+	}
+});
+
+const chatLog = document.getElementById('chatLog');
+const userInput = document.getElementById('userInput');
+const sendBtn = document.getElementById('sendBtn');
+const streamToggle = document.getElementById('streamToggle');
+const markdownToggle = document.getElementById('markdownToggle');
+const modelNameSpan = document.getElementById('modelName');
+
+marked.setOptions({
+	gfm: true,
+	breaks: true,
+	highlight: function(code, lang) {
+		if (window.hljs) {
+			const language = hljs.getLanguage(lang) ? lang : 'plaintext';
+			return hljs.highlight(code, { language }).value;
+		}
+		return code;
+	}
+});
+
+function autoResize(textarea) {
+	textarea.style.height = 'auto';
+	textarea.style.height = Math.min(textarea.scrollHeight, 300) + 'px';
+}
+
+function addMessage(role, content, markdown = false, messageId = null, saveToHistory = true) {
+	const messageDiv = document.createElement('div');
+	messageDiv.className = `message message-${role}`;
+	if (messageId) {
+		messageDiv.id = messageId;
+	}
+
+	const headerDiv = document.createElement('div');
+	headerDiv.className = `message-header ${role}`;
+
+	const avatar = document.createElement('div');
+	avatar.className = `avatar ${role}-avatar`;
+	avatar.textContent = role === 'user' ? '👤' : '🤖';
+
+	const name = document.createElement('span');
+	name.textContent = role === 'user' ? 'You' : 'Assistant';
+
+	headerDiv.appendChild(avatar);
+	headerDiv.appendChild(name);
+
+	const contentDiv = document.createElement('div');
+
+	if (markdown && role === 'assistant' && markdownToggle.checked) {
+		contentDiv.className = 'markdown-content';
+		const processedContent = parseThinkingTags(content);
+		contentDiv.innerHTML = marked.parse(processedContent);
+		if (window.hljs) {
+			setTimeout(() => {
+				contentDiv.querySelectorAll('pre code').forEach((block) => {
+					hljs.highlightElement(block);
+				});
+			}, 0);
+		}
+	} else {
+		const processedContent = parseThinkingTags(content);
+		contentDiv.innerHTML = processedContent;
+		contentDiv.style.whiteSpace = 'pre-wrap';
+		contentDiv.style.padding = '8px 0';
+		contentDiv.style.color = '#e0e0e0';
+	}
+
+	messageDiv.appendChild(headerDiv);
+	messageDiv.appendChild(contentDiv);
+	if (chatLog) {
+		chatLog.appendChild(messageDiv);
+		chatLog.scrollTop = chatLog.scrollHeight;
+	}
+
+	if (saveToHistory) {
+		chatHistory.push({ role, content, markdown, messageId });
+		trimChatHistory();
+		localStorage.setItem('chatHistory', JSON.stringify(chatHistory));
+	}
+
+	return contentDiv;
+}
+
+function parseThinkingTags(content) {
+	let result = content;
+	let thinkingCounter = 0;
+
+	const completeThinkRegex = /\[THINK\]([\s\S]*?)\[\/THINK\]/gi;
+	result = result.replace(completeThinkRegex, (match, thinkContent) => {
+		thinkingCounter++;
+		const id = `thinking-${Date.now()}-${thinkingCounter}`;
+		return `<div class="thinking-block">
+			<div class="thinking-header" onclick="toggleThinking('${id}')">
+				<span class="thinking-toggle" id="${id}-toggle">?</span>
+				<span>? Thinking...</span>
+			</div>
+			<div class="thinking-content" id="${id}">${thinkContent.trim()}</div>
+		</div>`;
+	});
+
+	const incompleteThinkRegex = /\[THINK\]([\s\S]*?)$/gi;
+	result = result.replace(incompleteThinkRegex, (match, thinkContent) => {
+		thinkingCounter++;
+		const id = `thinking-${Date.now()}-${thinkingCounter}`;
+		return `<div class="thinking-block">
+			<div class="thinking-header" onclick="toggleThinking('${id}')">
+				<span class="thinking-toggle" id="${id}-toggle">?</span>
+				<span>? Thinking...</span>
+			</div>
+			<div class="thinking-content" id="${id}">${thinkContent.trim()}</div>
+		</div>`;
+	});
+
+	return result;
+}
+
+window.toggleThinking = function(id) {
+	const content = document.getElementById(id);
+	const toggle = document.getElementById(id + '-toggle');
+
+	if (content && toggle) {
+		content.classList.toggle('hidden');
+		toggle.classList.toggle('collapsed');
+	}
+};
+
+function updateMessageContent(contentDiv, newContent, markdown = false, role) {
+	const processedContent = parseThinkingTags(newContent);
+
+	if (markdown && role === 'assistant' && markdownToggle && markdownToggle.checked) {
+		contentDiv.innerHTML = marked.parse(processedContent);
+		if (window.hljs) {
+			setTimeout(() => {
+				contentDiv.querySelectorAll('pre code').forEach((block) => {
+					hljs.highlightElement(block);
+				});
+			}, 0);
+		}
+	} else {
+		contentDiv.innerHTML = processedContent;
+		contentDiv.style.whiteSpace = 'pre-wrap';
+		contentDiv.style.padding = '8px 0';
+		contentDiv.style.color = '#e0e0e0';
+	}
+	if (chatLog) {
+		chatLog.scrollTop = chatLog.scrollHeight;
+	}
+}
+
+function showTypingIndicator() {
+	const typingDiv = document.createElement('div');
+	typingDiv.id = 'typingIndicator';
+	typingDiv.className = 'message message-assistant';
+
+	const headerDiv = document.createElement('div');
+	headerDiv.className = 'message-header assistant';
+
+	const avatar = document.createElement('div');
+	avatar.className = 'avatar assistant-avatar';
+	avatar.textContent = '🤖';
+
+	const name = document.createElement('span');
+	name.textContent = 'Assistant';
+
+	headerDiv.appendChild(avatar);
+	headerDiv.appendChild(name);
+
+	const dotsDiv = document.createElement('div');
+	dotsDiv.className = 'typing-indicator';
+	dotsDiv.innerHTML = `
+        <div class="typing-dot"></div>
+        <div class="typing-dot"></div>
+        <div class="typing-dot"></div>
+        <span style="margin-left: 8px;">Thinking...</span>
+    `;
+
+	typingDiv.appendChild(headerDiv);
+	typingDiv.appendChild(dotsDiv);
+	if (chatLog) {
+		chatLog.appendChild(typingDiv);
+		chatLog.scrollTop = chatLog.scrollHeight;
+	}
+
+	return typingDiv;
+}
+
+function removeTypingIndicator(typingDiv) {
+	if (typingDiv && typingDiv.parentNode) {
+		typingDiv.parentNode.removeChild(typingDiv);
+	}
+}
+
+async function handleStreamingResponse(userMessage) {
+	const messageId = 'msg-' + Date.now();
+	let accumulatedContent = '';
+	let contentDiv = null;
+
+	const messageDiv = document.createElement('div');
+	messageDiv.className = 'message message-assistant';
+	messageDiv.id = messageId;
+
+	const headerDiv = document.createElement('div');
+	headerDiv.className = 'message-header assistant';
+
+	const avatar = document.createElement('div');
+	avatar.className = 'avatar assistant-avatar';
+	avatar.textContent = '🤖';
+
+	const name = document.createElement('span');
+	name.textContent = 'Assistant';
+
+	headerDiv.appendChild(avatar);
+	headerDiv.appendChild(name);
+
+	contentDiv = document.createElement('div');
+	contentDiv.className = 'markdown-content';
+
+	messageDiv.appendChild(headerDiv);
+	messageDiv.appendChild(contentDiv);
+	if (chatLog) {
+		chatLog.appendChild(messageDiv);
+	}
+
+	const cursorSpan = document.createElement('span');
+	cursorSpan.className = 'streaming-cursor';
+	contentDiv.appendChild(cursorSpan);
+
+	// ✅ FIX: Create AbortController BEFORE fetch
+	currentStreamController = new AbortController();
+	isStreaming = true;
+
+	try {
+		const { backendKey, model } = splitBackendModel(currentBackendModel);
+		const selectedModel = model || availableBackendModels[0]?.model || 'local-model';
+
+		const requestBody = {
+			model: selectedModel,
+			messages: getApiMessages(),
+			stream: true,
+			temperature: 0.7,
+			max_tokens: 2000
+		};
+
+		const response = await fetch(`${getApiUrl()}/chat/completions`, {
+			method: 'POST',
+			headers: {
+				'Content-Type': 'application/json',
+				'Authorization': `Bearer ${API_KEY}`
+			},
+			body: JSON.stringify(requestBody),
+			signal: currentStreamController.signal  // ✅ Now works correctly
+		});
+
+		if (!response.ok) {
+			throw new Error(`API Error: ${response.status} ${response.statusText}`);
+		}
+
+		const reader = response.body.getReader();
+		const decoder = new TextDecoder();
+
+		let updateScheduled = false;
+		let lastUpdate = Date.now();
+		const MIN_UPDATE_INTERVAL = 100;
+
+		function scheduleUpdate() {
+			if (updateScheduled) return;
+
+			const now = Date.now();
+			const timeSinceLastUpdate = now - lastUpdate;
+
+			if (timeSinceLastUpdate >= MIN_UPDATE_INTERVAL) {
+				updateScheduled = true;
+					requestAnimationFrame(() => {
+						updateMessageContent(contentDiv, accumulatedContent, markdownToggle && markdownToggle.checked, 'assistant');
+						if (cursorSpan.parentNode) {
+							contentDiv.appendChild(cursorSpan);
+						}
+						if (chatLog) {
+							chatLog.scrollTop = chatLog.scrollHeight;
+						}
+						lastUpdate = Date.now();
+						updateScheduled = false;
+					});
+			} else {
+				updateScheduled = true;
+				setTimeout(() => {
+					requestAnimationFrame(() => {
+						updateMessageContent(contentDiv, accumulatedContent, markdownToggle && markdownToggle.checked, 'assistant');
+						if (cursorSpan.parentNode) {
+							contentDiv.appendChild(cursorSpan);
+						}
+						if (chatLog) {
+							chatLog.scrollTop = chatLog.scrollHeight;
+						}
+						lastUpdate = Date.now();
+						updateScheduled = false;
+					});
+				}, MIN_UPDATE_INTERVAL - timeSinceLastUpdate);
+			}
+		}
+
+		while (true) {
+			const { done, value } = await reader.read();
+			if (done) break;
+
+			const chunk = decoder.decode(value);
+			const lines = chunk.split('\n').filter(line => line.trim() !== '');
+
+			for (const line of lines) {
+				if (line.startsWith('data: ')) {
+					const data = line.slice(6);
+
+					if (data === '[DONE]') {
+						isStreaming = false;
+						currentStreamController = null;
+						updateMessageContent(contentDiv, accumulatedContent, markdownToggle.checked, 'assistant');
+						if (cursorSpan.parentNode) {
+							cursorSpan.parentNode.removeChild(cursorSpan);
+						}
+						chatLog.scrollTop = chatLog.scrollHeight;
+						return;
+					}
+
+					try {
+						const parsed = JSON.parse(data);
+						if (parsed.choices && parsed.choices[0].delta.content) {
+							accumulatedContent += parsed.choices[0].delta.content;
+							scheduleUpdate();
+						}
+					} catch (e) {
+						console.log('Error parsing stream data:', e);
+					}
+				}
+			}
+		}
+
+		updateMessageContent(contentDiv, accumulatedContent, markdownToggle.checked, 'assistant');
+		chatLog.scrollTop = chatLog.scrollHeight;
+
+	} catch (error) {
+		console.error('Streaming error:', error);
+		if (error.name !== 'AbortError') {
+			updateMessageContent(contentDiv, `Error: ${error.message}`, false, 'assistant');
+		}
+	} finally {
+		isStreaming = false;
+		currentStreamController = null;
+		sendBtn.disabled = false;
+
+		if (cursorSpan && cursorSpan.parentNode) {
+			cursorSpan.parentNode.removeChild(cursorSpan);
+		}
+	}
+}
+
+async function handleNonStreamingResponse(userMessage) {
+	let typingIndicator = null;
+	try {
+		typingIndicator = showTypingIndicator();
+
+		const { backendKey, model } = splitBackendModel(currentBackendModel);
+		const selectedModel = model || availableBackendModels[0]?.model || 'local-model';
+
+		const requestBody = {
+			model: selectedModel,
+			messages: getApiMessages(),
+			stream: false,
+			temperature: 0.7,
+			max_tokens: 2000
+		};
+
+		const response = await fetch(`${getApiUrl()}/chat/completions`, {
+			method: 'POST',
+			headers: {
+				'Content-Type': 'application/json',
+				'Authorization': `Bearer ${API_KEY}`
+			},
+			body: JSON.stringify(requestBody)
+		});
+
+		if (!response.ok) {
+			throw new Error(`API Error: ${response.status} ${response.statusText}`);
+		}
+
+		const data = await response.json();
+		removeTypingIndicator(typingIndicator);
+
+		if (data.choices && data.choices.length > 0) {
+			const assistantReply = data.choices[0].message.content;
+			addMessage('assistant', assistantReply, markdownToggle.checked);
+		} else {
+			addMessage('assistant', 'No response generated.', false);
+		}
+
+	} catch (error) {
+		console.error('Error:', error);
+		if (typingIndicator) {
+			removeTypingIndicator(typingIndicator);
+		}
+		addMessage('assistant', `Error: ${error.message}`, false);
+	} finally {
+		sendBtn.disabled = false;
+		userInput.focus();
+	}
+}
+
+function stopStream() {
+	if (currentStreamController) {
+		currentStreamController.abort();
+		isStreaming = false;
+		currentStreamController = null;
+		sendBtn.disabled = false;
+		sendBtn.textContent = 'Send';
+	}
+}
+
+async function sendMessage() {
+	const userMessage = userInput.value.trim();
+	if (!userMessage || isStreaming) return;
+
+	// ✅ FIX: Validate backend selection
+	if (!currentBackendModel) {
+		addMessage('assistant', 'Please select a backend model first.', false);
+		return;
+	}
+
+	addMessage('user', userMessage, false);
+
+	userInput.value = '';
+	userInput.style.height = 'auto';
+	sendBtn.disabled = true;
+
+	if (streamToggle.checked) {
+		sendBtn.textContent = 'Stop';
+		await handleStreamingResponse(userMessage);
+	} else {
+		await handleNonStreamingResponse(userMessage);
+	}
+
+	sendBtn.textContent = 'Send';
+}
+
+sendBtn.addEventListener('click', () => {
+	if (isStreaming) {
+		stopStream();
+	} else {
+		sendMessage();
+	}
+});
+
+userInput.addEventListener('keydown', (e) => {
+	if (e.key === 'Enter' && !e.shiftKey) {
+		e.preventDefault();
+		if (!isStreaming) {
+			sendMessage();
+		}
+	}
+});
+
+// ✅ Updated window.onload with better initialization
+window.onload = () => {
+	if (userInput) userInput.focus();
+
+	// Set default backend BEFORE fetching
+	if (!currentBackendModel) {
+		currentBackendModel = 'plato';
+	}
+
+	fetchBackendModels().then(() => {
+		// Load chat history after models are fetched
+		if (chatLog) {
+			if (chatHistory.length === 0) {
+				//addMessage('assistant', welcomeMessage, true, null, false);
+			} else {
+				chatHistory.forEach(msg => {
+					if (typeof msg.content === 'string' && msg.content.trim()) {
+						addMessage(msg.role, msg.content, msg.markdown, msg.messageId, false);
+					}
+				});
+			}
+		}
+	});
+
+	document.getElementById('resetBtn')?.addEventListener('click', resetChat);
+};
+
+function resetChat() {
+	chatHistory = [];
+	localStorage.setItem('chatHistory', JSON.stringify(chatHistory));
+
+	if (chatLog) {
+		chatLog.innerHTML = '';
+		addMessage('assistant', welcomeMessage, true, null, false);
+	}
+}