chore: update 3 file(s)

Co-authored-by: aider (openai//models/qwen2.5-coder-32b-instruct-q4_k_m.gguf) <aider@aider.chat>

chatv2.js

@@ -1,7 +1,7 @@
 const BACKENDS = {
 	plato: {
 		prod: '/api/plato',
-		dev : 'http://192.168.1.74:1234/v1',
+		dev: 'http://192.168.1.74:8080/v1',
 		name: 'Plato (192.168.1.74)'
 	},
 	stoic: {
@@ -19,6 +19,20 @@ 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**.
@@ -38,68 +52,102 @@ I now support **full conversation history**, **real-time streaming responses** a
 
 > *Tip: You can toggle streaming and markdown using the checkboxes below.*`
 
-let currentBackend = 'plato'
+// ✅ NEW: Robust parser for backend:model format
-let currentModel = null
+function splitBackendModel(value) {
-let availableModels = []
+	if (!value || value === ':') {
-let currentStreamController = null
+		return { backendKey: '', model: '' };
-let isStreaming = false
+	}
-let chatHistory = JSON.parse(localStorage.getItem('chatHistory')) || []
 
-chatHistory = chatHistory.map(message => ({
+	const colonIndex = value.indexOf(':');
-	role     : message.role || 'user',
+	if (colonIndex === -1) {
-	content  : message.content || '',
+		return { backendKey: value, model: '' };
-	markdown : message.markdown || false,
+	}
-	messageId: message.messageId || `msg-${ Date.now() }`
+
-}))
+	return {
+		backendKey: value.substring(0, colonIndex),
+		model: value.substring(colonIndex + 1)
+	};
+}
 
 function getApiUrl() {
-	const backend = BACKENDS[currentBackend]
+	const { backendKey, model } = splitBackendModel(currentBackendModel);
-	return IS_PRODUCTION ? backend.prod : backend.dev
+	const effectiveBackendKey = backendKey || 'plato';
+	const backend = BACKENDS[effectiveBackendKey];
+
+	if (!backend) {
+		throw new Error(`Invalid backend: '${effectiveBackendKey}'`);
 	}
 
-function updateBackendDisplay() {
+	return IS_PRODUCTION ? backend.prod : backend.dev;
-	const backend = BACKENDS[currentBackend]
+}
+
+function updateBackendModelDisplay() {
+	const { backendKey, model } = splitBackendModel(currentBackendModel);
+	const backend = BACKENDS[backendKey];
+	if (!backend) return;
+
 	const displayText = IS_PRODUCTION
-		? `${ backend.prod } ? ${ backend.name }`
+		? `${backend.prod} - ${backend.name}`
-		: backend.dev
+		: backend.dev;
-	document.getElementById('backendDisplay').textContent = displayText
+	document.getElementById('backendDisplay').textContent = `${displayText} - Model: ${model || 'None'}`;
 }
 
-async function fetchModels() {
+async function fetchBackendModels() {
 	try {
-		const response = await fetch(`${ getApiUrl() }/models`)
+		// ✅ FIX: Ensure valid backend before fetching
-		if (response.ok) {
+		if (!currentBackendModel || currentBackendModel === ':') {
-			const data = await response.json()
+			currentBackendModel = 'plato';
-			availableModels = data.data || []
-			populateModelSelector()
-
-			if (!currentModel && availableModels.length > 0) {
-				currentModel = availableModels[0].id
-				document.getElementById('modelSelector').value = currentModel
 		}
+
+		const apiUrl = getApiUrl();
+		console.log(`Fetching models from: ${apiUrl}`);
+
+		const response = await fetch(`${apiUrl}/models`);
+
+		if (response.ok) {
+			const data = await response.json();
+
+			const { backendKey } = splitBackendModel(currentBackendModel);
+			const effectiveBackendKey = backendKey || 'plato';
+
+			availableBackendModels = data.data.map(model => ({
+				backend: effectiveBackendKey,
+				model: model.id
+			}));
+
+			populateBackendModelSelector();
+
+			// ✅ FIX: Only auto-select if no model is set
+			const hasModel = currentBackendModel && currentBackendModel.includes(':') && currentBackendModel.split(':')[1];
+			if (!hasModel && availableBackendModels.length > 0) {
+				currentBackendModel = `${availableBackendModels[0].backend}:${availableBackendModels[0].model}`;
+				document.getElementById('backendModelSelector').value = currentBackendModel;
+			}
+
+			updateBackendModelDisplay();
 		} else {
-			console.error('Failed to fetch models:', response.statusText)
+			console.error('Failed to fetch models:', response.statusText);
-			document.getElementById('modelSelector').innerHTML = '<option value="">Error loading models</option>'
+			document.getElementById('backendModelSelector').innerHTML = '<option value="">Error loading models</option>';
 		}
 	} catch (error) {
-		console.error('Error fetching models:', error)
+		console.error('Error fetching models:', error);
-		document.getElementById('modelSelector').innerHTML = '<option value="">Error loading models</option>'
+		document.getElementById('backendModelSelector').innerHTML = '<option value="">Error loading models</option>';
 	}
 }
 
-function populateModelSelector() {
+function populateBackendModelSelector() {
-	const selector = document.getElementById('modelSelector')
+	const selector = document.getElementById('backendModelSelector');
-	if (availableModels.length === 0) {
+	if (availableBackendModels.length === 0) {
-		selector.innerHTML = '<option value="">No models available</option>'
+		selector.innerHTML = '<option value="">No models available</option>';
-		return
+		return;
 	}
 
-	selector.innerHTML = availableModels.map(model =>
+	selector.innerHTML = availableBackendModels.map(backendModel =>
-		`<option value="${ model.id }">${ model.id }</option>`
+		`<option value="${backendModel.backend}:${backendModel.model}">${BACKENDS[backendModel.backend].name} - ${backendModel.model}</option>`
-	).join('')
+	).join('');
 
-	if (currentModel) {
+	if (currentBackendModel) {
-		selector.value = currentModel
+		selector.value = currentBackendModel;
 	}
 }
 
@@ -107,259 +155,254 @@ 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)
+		chatHistory = chatHistory.slice(-MAX_CHAT_HISTORY);
-		localStorage.setItem('chatHistory', JSON.stringify(chatHistory))
+		localStorage.setItem('chatHistory', JSON.stringify(chatHistory));
 	}
 }
 
 document.addEventListener('DOMContentLoaded', () => {
-	const backendSelector = document.getElementById('backendSelector')
+	const backendModelSelector = document.getElementById('backendModelSelector');
-	const modelSelector = document.getElementById('modelSelector')
 
-	backendSelector.value = currentBackend
+	backendModelSelector.addEventListener('change', (e) => {
-	updateBackendDisplay()
+		currentBackendModel = e.target.value;
-	fetchModels()
+		updateBackendModelDisplay();
+		fetchBackendModels();
+	});
 
-	backendSelector.addEventListener('change', (e) => {
+	fetchBackendModels();
-		currentBackend = e.target.value
+});
-		updateBackendDisplay()
-		fetchModels()
-	})
 
-	modelSelector.addEventListener('change', (e) => {
+const chatLog = document.getElementById('chatLog');
-		currentModel = e.target.value
+const userInput = document.getElementById('userInput');
-	})
+const sendBtn = document.getElementById('sendBtn');
-})
+const streamToggle = document.getElementById('streamToggle');
-
+const markdownToggle = document.getElementById('markdownToggle');
-const chatLog = document.getElementById('chatLog')
+const modelNameSpan = document.getElementById('modelName');
-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'
+			const language = hljs.getLanguage(lang) ? lang : 'plaintext';
-			return hljs.highlight(code, { language }).value
+			return hljs.highlight(code, { language }).value;
 		}
-		return code
+		return code;
 	}
-})
+});
 
 function autoResize(textarea) {
-	textarea.style.height = 'auto'
+	textarea.style.height = 'auto';
-	textarea.style.height = Math.min(textarea.scrollHeight, 300) + 'px'
+	textarea.style.height = Math.min(textarea.scrollHeight, 300) + 'px';
 }
 
 function addMessage(role, content, markdown = false, messageId = null) {
-	const messageDiv = document.createElement('div')
+	const messageDiv = document.createElement('div');
-	messageDiv.className = `message message-${ role }`
+	messageDiv.className = `message message-${role}`;
 	if (messageId) {
-		messageDiv.id = messageId
+		messageDiv.id = messageId;
 	}
 
-	const headerDiv = document.createElement('div')
+	const headerDiv = document.createElement('div');
-	headerDiv.className = `message-header ${ role }`
+	headerDiv.className = `message-header ${role}`;
 
-	const avatar = document.createElement('div')
+	const avatar = document.createElement('div');
-	avatar.className = `avatar ${ role }-avatar`
+	avatar.className = `avatar ${role}-avatar`;
-	avatar.textContent = role === 'user' ? '?' : '?'
+	avatar.textContent = role === 'user' ? '?' : '?';
 
-	const name = document.createElement('span')
+	const name = document.createElement('span');
-	name.textContent = role === 'user' ? 'You' : 'Assistant'
+	name.textContent = role === 'user' ? 'You' : 'Assistant';
 
-	headerDiv.appendChild(avatar)
+	headerDiv.appendChild(avatar);
-	headerDiv.appendChild(name)
+	headerDiv.appendChild(name);
 
-	const contentDiv = document.createElement('div')
+	const contentDiv = document.createElement('div');
 
 	if (markdown && role === 'assistant' && markdownToggle.checked) {
-		contentDiv.className = 'markdown-content'
+		contentDiv.className = 'markdown-content';
-		const processedContent = parseThinkingTags(content)
+		const processedContent = parseThinkingTags(content);
-		contentDiv.innerHTML = marked.parse(processedContent)
+		contentDiv.innerHTML = marked.parse(processedContent);
 		if (window.hljs) {
 			setTimeout(() => {
 				contentDiv.querySelectorAll('pre code').forEach((block) => {
-					hljs.highlightElement(block)
+					hljs.highlightElement(block);
-				})
+				});
-			}, 0)
+			}, 0);
 		}
 	} else {
-		const processedContent = parseThinkingTags(content)
+		const processedContent = parseThinkingTags(content);
-		contentDiv.innerHTML = processedContent
+		contentDiv.innerHTML = processedContent;
-		contentDiv.style.whiteSpace = 'pre-wrap'
+		contentDiv.style.whiteSpace = 'pre-wrap';
-		contentDiv.style.padding = '8px 0'
+		contentDiv.style.padding = '8px 0';
-		contentDiv.style.color = '#2d3339'
+		contentDiv.style.color = '#2d3339';
 	}
 
-	messageDiv.appendChild(headerDiv)
+	messageDiv.appendChild(headerDiv);
-	messageDiv.appendChild(contentDiv)
+	messageDiv.appendChild(contentDiv);
-	chatLog.appendChild(messageDiv)
+	chatLog.appendChild(messageDiv);
-	chatLog.scrollTop = chatLog.scrollHeight
+	chatLog.scrollTop = chatLog.scrollHeight;
 
-	chatHistory.push({ role, content, markdown, messageId })
+	chatHistory.push({ role, content, markdown, messageId });
-	trimChatHistory()
+	trimChatHistory();
-	localStorage.setItem('chatHistory', JSON.stringify(chatHistory))
+	localStorage.setItem('chatHistory', JSON.stringify(chatHistory));
 
-	return contentDiv
+	return contentDiv;
 }
 
 function parseThinkingTags(content) {
-	let result = content
+	let result = content;
-	let thinkingCounter = 0
+	let thinkingCounter = 0;
 
-	const completeThinkRegex = /\[THINK\]([\s\S]*?)\[\/THINK\]/gi
+	const completeThinkRegex = /\[THINK\]([\s\S]*?)\[\/THINK\]/gi;
 	result = result.replace(completeThinkRegex, (match, thinkContent) => {
-		thinkingCounter++
+		thinkingCounter++;
-		const id = `thinking-${ Date.now() }-${ 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>`
+		</div>`;
-	})
+	});
 
-	const incompleteThinkRegex = /\[THINK\]([\s\S]*?)$/gi
+	const incompleteThinkRegex = /\[THINK\]([\s\S]*?)$/gi;
 	result = result.replace(incompleteThinkRegex, (match, thinkContent) => {
-		thinkingCounter++
+		thinkingCounter++;
-		const id = `thinking-${ Date.now() }-${ 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>`
+		</div>`;
-	})
+	});
 
-	return result
+	return result;
 }
 
 window.toggleThinking = function(id) {
-	const content = document.getElementById(id)
+	const content = document.getElementById(id);
-	const toggle = document.getElementById(id + '-toggle')
+	const toggle = document.getElementById(id + '-toggle');
 
 	if (content && toggle) {
-		content.classList.toggle('hidden')
+		content.classList.toggle('hidden');
-		toggle.classList.toggle('collapsed')
+		toggle.classList.toggle('collapsed');
-	}
 	}
+};
 
 function updateMessageContent(contentDiv, newContent, markdown = false, role) {
-	const processedContent = parseThinkingTags(newContent)
+	const processedContent = parseThinkingTags(newContent);
 
 	if (markdown && role === 'assistant' && markdownToggle.checked) {
-		contentDiv.innerHTML = marked.parse(processedContent)
+		contentDiv.innerHTML = marked.parse(processedContent);
 		if (window.hljs) {
 			setTimeout(() => {
 				contentDiv.querySelectorAll('pre code').forEach((block) => {
-					hljs.highlightElement(block)
+					hljs.highlightElement(block);
-				})
+				});
-			}, 0)
+			}, 0);
 		}
 	} else {
-		contentDiv.textContent = newContent
+		contentDiv.innerHTML = processedContent;
 	}
 }
 
 function showTypingIndicator() {
-	const typingDiv = document.createElement('div')
+	const typingDiv = document.createElement('div');
-	typingDiv.id = 'typingIndicator'
+	typingDiv.id = 'typingIndicator';
-	typingDiv.className = 'message message-assistant'
+	typingDiv.className = 'message message-assistant';
 
-	const headerDiv = document.createElement('div')
+	const headerDiv = document.createElement('div');
-	headerDiv.className = 'message-header assistant'
+	headerDiv.className = 'message-header assistant';
 
-	const avatar = document.createElement('div')
+	const avatar = document.createElement('div');
-	avatar.className = 'avatar assistant-avatar'
+	avatar.className = 'avatar assistant-avatar';
-	avatar.textContent = '?'
+	avatar.textContent = '?';
 
-	const name = document.createElement('span')
+	const name = document.createElement('span');
-	name.textContent = 'Assistant'
+	name.textContent = 'Assistant';
 
-	headerDiv.appendChild(abatar)
+	headerDiv.appendChild(avatar);  // ✅ FIX: Typo "abatar"
-	headerDiv.appendChild(name)
+	headerDiv.appendChild(name);
 
-	const dotsDiv = document.createElement('div')
+	const dotsDiv = document.createElement('div');
-	dotsDiv.className = 'typing-indicator'
+	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(headerDiv);
-	typingDiv.appendChild(dotsDiv)
+	typingDiv.appendChild(dotsDiv);
-	chatLog.appendChild(typingDiv)
+	chatLog.appendChild(typingDiv);
-	chatLog.scrollTop = chatLog.scrollHeight
+	chatLog.scrollTop = chatLog.scrollHeight;
 
-	return typingDiv
+	return typingDiv;
 }
 
 function removeTypingIndicator(typingDiv) {
 	if (typingDiv && typingDiv.parentNode) {
-		typingDiv.parentNode.removeChild(typingDiv)
+		typingDiv.parentNode.removeChild(typingDiv);
 	}
 }
 
 async function handleStreamingResponse(userMessage) {
-	const messageId = 'msg-' + Date.now()
+	const messageId = 'msg-' + Date.now();
-	let accumulatedContent = ''
+	let accumulatedContent = '';
-	let contentDiv = null
+	let contentDiv = null;
 
-	const messageDiv = document.createElement('div')
+	const messageDiv = document.createElement('div');
-	messageDiv.className = 'message message-assistant'
+	messageDiv.className = 'message message-assistant';
-	messageDiv.id = messageId
+	messageDiv.id = messageId;
 
-	const headerDiv = document.createElement('div')
+	const headerDiv = document.createElement('div');
-	headerDiv.className = 'message-header assistant'
+	headerDiv.className = 'message-header assistant';
 
-	const avatar = document.createElement('div')
+	const avatar = document.createElement('div');
-	avatar.className = 'avatar assistant-avatar'
+	avatar.className = 'avatar assistant-avatar';
-	avatar.textContent = '?'
+	avatar.textContent = '?';
 
-	const name = document.createElement('span')
+	const name = document.createElement('span');
-	name.textContent = 'Assistant'
+	name.textContent = 'Assistant';
 
-	headerDiv.appendChild(avatar)
+	headerDiv.appendChild(avatar);
-	headerDiv.appendChild(name)
+	headerDiv.appendChild(name);
 
-	contentDiv = document.createElement('div')
+	contentDiv = document.createElement('div');
-	contentDiv.className = 'markdown-content'
+	contentDiv.className = 'markdown-content';
 
-	messageDiv.appendChild(headerDiv)
+	messageDiv.appendChild(headerDiv);
-	messageDiv.appendChild(contentDiv)
+	messageDiv.appendChild(contentDiv);
-	chatLog.appendChild(messageDiv)
+	chatLog.appendChild(messageDiv);
 
-	const cursorSpan = document.createElement('span')
+	const cursorSpan = document.createElement('span');
-	cursorSpan.className = 'streaming-cursor'
+	cursorSpan.className = 'streaming-cursor';
-	contentDiv.appendChild(cursorSpan)
+	contentDiv.appendChild(cursorSpan);
+
+	// ✅ FIX: Create AbortController BEFORE fetch
+	currentStreamController = new AbortController();
+	isStreaming = true;
 
 	try {
-		if (!currentModel && availableModels.length > 0) {
+		const { backendKey, model } = splitBackendModel(currentBackendModel);
-			currentModel = availableModels[0].id
+		const selectedModel = model || availableBackendModels[0]?.model || 'local-model';
-			document.getElementById('modelSelector').value = currentModel
-		}
 
 		const requestBody = {
-			model      : currentModel || 'local-model',
+			model: selectedModel,
 			messages: getApiMessages(),
 			stream: true,
 			temperature: 0.7,
 			max_tokens: 2000
-		}
+		};
 
 		const response = await fetch(`${getApiUrl()}/chat/completions`, {
 			method: 'POST',
@@ -367,126 +410,123 @@ async function handleStreamingResponse(userMessage) {
 				'Content-Type': 'application/json',
 				'Authorization': `Bearer ${API_KEY}`
 			},
-			body   : JSON.stringify(requestBody)
+			body: JSON.stringify(requestBody),
-		})
+			signal: currentStreamController.signal  // ✅ Now works correctly
+		});
 
 		if (!response.ok) {
-			throw new Error(`API Error: ${ response.status } ${ response.statusText }`)
+			throw new Error(`API Error: ${response.status} ${response.statusText}`);
 		}
 
-		const reader = response.body.getReader()
+		const reader = response.body.getReader();
-		const decoder = new TextDecoder()
+		const decoder = new TextDecoder();
 
-		isStreaming = true
+		let updateScheduled = false;
-		currentStreamController = new AbortController()
+		let lastUpdate = Date.now();
-
+		const MIN_UPDATE_INTERVAL = 100;
-		let updateScheduled = false
-		let lastUpdate = Date.now()
-		const MIN_UPDATE_INTERVAL = 100
 
 		function scheduleUpdate() {
-			if (updateScheduled) return
+			if (updateScheduled) return;
 
-			const now = Date.now()
+			const now = Date.now();
-			const timeSinceLastUpdate = now - lastUpdate
+			const timeSinceLastUpdate = now - lastUpdate;
 
 			if (timeSinceLastUpdate >= MIN_UPDATE_INTERVAL) {
-				updateScheduled = true
+				updateScheduled = true;
 				requestAnimationFrame(() => {
-					updateMessageContent(contentDiv, accumulatedContent, markdownToggle.checked, 'assistant')
+					updateMessageContent(contentDiv, accumulatedContent, markdownToggle.checked, 'assistant');
 					if (cursorSpan.parentNode) {
-						contentDiv.appendChild(cursorSpan)
+						contentDiv.appendChild(cursorSpan);
 					}
-					chatLog.scrollTop = chatLog.scrollHeight
+					chatLog.scrollTop = chatLog.scrollHeight;
-					lastUpdate = Date.now()
+					lastUpdate = Date.now();
-					updateScheduled = false
+					updateScheduled = false;
-				})
+				});
 			} else {
-				updateScheduled = true
+				updateScheduled = true;
 				setTimeout(() => {
 					requestAnimationFrame(() => {
-						updateMessageContent(contentDiv, accumulatedContent, markdownToggle.checked, 'assistant')
+						updateMessageContent(contentDiv, accumulatedContent, markdownToggle.checked, 'assistant');
 						if (cursorSpan.parentNode) {
-							contentDiv.appendChild(cursorSpan)
+							contentDiv.appendChild(cursorSpan);
 						}
-						chatLog.scrollTop = chatLog.scrollHeight
+						chatLog.scrollTop = chatLog.scrollHeight;
-						lastUpdate = Date.now()
+						lastUpdate = Date.now();
-						updateScheduled = false
+						updateScheduled = false;
-					})
+					});
-				}, MIN_UPDATE_INTERVAL - timeSinceLastUpdate)
+				}, MIN_UPDATE_INTERVAL - timeSinceLastUpdate);
 			}
 		}
 
 		while (true) {
-			const { done, value } = await reader.read()
+			const { done, value } = await reader.read();
-			if (done) break
+			if (done) break;
 
-			const chunk = decoder.decode(value)
+			const chunk = decoder.decode(value);
-			const lines = chunk.split('\n').filter(line => line.trim() !== '')
+			const lines = chunk.split('\n').filter(line => line.trim() !== '');
 
 			for (const line of lines) {
 				if (line.startsWith('data: ')) {
-					const data = line.slice(6)
+					const data = line.slice(6);
 
 					if (data === '[DONE]') {
-						isStreaming = false
+						isStreaming = false;
-						currentStreamController = null
+						currentStreamController = null;
-						updateMessageContent(contentDiv, accumulatedContent, markdownToggle.checked, 'assistant')
+						updateMessageContent(contentDiv, accumulatedContent, markdownToggle.checked, 'assistant');
 						if (cursorSpan.parentNode) {
-							cursorSpan.parentNode.removeChild(cursorSpan)
+							cursorSpan.parentNode.removeChild(cursorSpan);
 						}
-						chatLog.scrollTop = chatLog.scrollHeight
+						chatLog.scrollTop = chatLog.scrollHeight;
-						return
+						return;
 					}
 
 					try {
-						const parsed = JSON.parse(data)
+						const parsed = JSON.parse(data);
 						if (parsed.choices && parsed.choices[0].delta.content) {
-							accumulatedContent += parsed.choices[0].delta.content
+							accumulatedContent += parsed.choices[0].delta.content;
-							scheduleUpdate()
+							scheduleUpdate();
 						}
 					} catch (e) {
-						console.log('Error parsing stream data:', e)
+						console.log('Error parsing stream data:', e);
 					}
 				}
 			}
 		}
 
-		updateMessageContent(contentDiv, accumulatedContent, markdownToggle.checked, 'assistant')
+		updateMessageContent(contentDiv, accumulatedContent, markdownToggle.checked, 'assistant');
-		chatLog.scrollTop = chatLog.scrollHeight
+		chatLog.scrollTop = chatLog.scrollHeight;
 
 	} catch (error) {
-		console.error('Streaming error:', error)
+		console.error('Streaming error:', error);
 		if (error.name !== 'AbortError') {
-			updateMessageContent(contentDiv, `Error: ${ error.message }`, false, 'assistant')
+			updateMessageContent(contentDiv, `Error: ${error.message}`, false, 'assistant');
 		}
 	} finally {
-		isStreaming = false
+		isStreaming = false;
-		currentStreamController = null
+		currentStreamController = null;
-		sendBtn.disabled = false
+		sendBtn.disabled = false;
 
-		if (cursorSpan.parentNode) {
+		if (cursorSpan && cursorSpan.parentNode) {
-			cursorSpan.parentNode.removeChild(cursorSpan)
+			cursorSpan.parentNode.removeChild(cursorSpan);
 		}
 	}
 }
 
 async function handleNonStreamingResponse(userMessage) {
+	let typingIndicator = null;
 	try {
-		const typingIndicator = showTypingIndicator()
+		typingIndicator = showTypingIndicator();
 
-		if (!currentModel && availableModels.length > 0) {
+		const { backendKey, model } = splitBackendModel(currentBackendModel);
-			currentModel = availableModels[0].id
+		const selectedModel = model || availableBackendModels[0]?.model || 'local-model';
-			document.getElementById('modelSelector').value = currentModel
-		}
 
 		const requestBody = {
-			model      : currentModel || 'local-model',
+			model: selectedModel,
 			messages: getApiMessages(),
 			stream: false,
 			temperature: 0.7,
 			max_tokens: 2000
-		}
+		};
 
 		const response = await fetch(`${getApiUrl()}/chat/completions`, {
 			method: 'POST',
@@ -495,91 +535,120 @@ async function handleNonStreamingResponse(userMessage) {
 				'Authorization': `Bearer ${API_KEY}`
 			},
 			body: JSON.stringify(requestBody)
-		})
+		});
 
 		if (!response.ok) {
-			throw new Error(`API Error: ${ response.status } ${ response.statusText }`)
+			throw new Error(`API Error: ${response.status} ${response.statusText}`);
 		}
 
-		const data = await response.json()
+		const data = await response.json();
-		removeTypingIndicator(typingIndicator)
+		removeTypingIndicator(typingIndicator);
 
 		if (data.choices && data.choices.length > 0) {
-			const assistantReply = data.choices[0].message.content
+			const assistantReply = data.choices[0].message.content;
-			addMessage('assistant', assistantReply, markdownToggle.checked)
+			addMessage('assistant', assistantReply, markdownToggle.checked);
 		} else {
-			addMessage('assistant', 'No response generated.', false)
+			addMessage('assistant', 'No response generated.', false);
 		}
 
 	} catch (error) {
-		console.error('Error:', error)
+		console.error('Error:', error);
-		removeTypingIndicator(typingIndicator)
+		if (typingIndicator) {
-		addMessage('assistant', `Error: ${ error.message }`, false)
+			removeTypingIndicator(typingIndicator);
+		}
+		addMessage('assistant', `Error: ${error.message}`, false);
 	} finally {
-		sendBtn.disabled = false
+		sendBtn.disabled = false;
-		userInput.focus()
+		userInput.focus();
 	}
 }
 
 function stopStream() {
 	if (currentStreamController) {
-		currentStreamController.abort()
+		currentStreamController.abort();
-		isStreaming = false
+		isStreaming = false;
-		currentStreamController = null
+		currentStreamController = null;
-		sendBtn.disabled = false
+		sendBtn.disabled = false;
-		sendBtn.textContent = 'Send'
+		sendBtn.textContent = 'Send';
 	}
 }
 
 async function sendMessage() {
-	const userMessage = userInput.value.trim()
+	const userMessage = userInput.value.trim();
-	if (!userMessage || isStreaming) return
+	if (!userMessage || isStreaming) return;
 
-	addMessage('user', userMessage)
+	// ✅ FIX: Validate backend selection
-
+	if (!currentBackendModel) {
-	userInput.value = ''
+		addMessage('assistant', 'Please select a backend model first.', false);
-	userInput.style.height = 'auto'
+		return;
-	sendBtn.disabled = true
-
-	if (streamToggle.checked) {
-		sendBtn.textContent = 'Stop'
-		await handleStreamingResponse(userMessage)
-	} else {
-		await handleNonStreamingResponse(userMessage)
 	}
 
-	sendBtn.textContent = 'Send'
+	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()
+		stopStream();
 	} else {
-		sendMessage()
+		sendMessage();
 	}
-})
+});
 
 userInput.addEventListener('keydown', (e) => {
 	if (e.key === 'Enter' && !e.shiftKey) {
-		e.preventDefault()
+		e.preventDefault();
 		if (!isStreaming) {
-			sendMessage()
+			sendMessage();
 		}
 	}
-})
+});
 
+// ✅ Updated window.onload with better initialization
 window.onload = () => {
-	userInput.focus()
+	userInput.focus();
-	fetchModels()
 
+	// Set default backend BEFORE fetching
+	if (!currentBackendModel) {
+		currentBackendModel = 'plato';
+	}
+
+	fetchBackendModels().then(() => {
+		// Load chat history after models are fetched
+		if (chatLog) {
 			if (chatHistory.length === 0) {
-		document.getElementById('resetBtn').addEventListener('click', resetChat)
+				//addMessage('assistant', welcomeMessage, true);
+			} else {
+				chatHistory.forEach(msg => {
+					if (typeof msg.content === 'string' && msg.content.trim()) {
+						addMessage(msg.role, msg.content, msg.markdown, msg.messageId);
+					}
+				});
 			}
 		}
+	});
+
+	document.getElementById('resetBtn')?.addEventListener('click', resetChat);
+};
 
 function resetChat() {
-	chatHistory = []
+	chatHistory = [];
-	chatLog.innerHTML = welcomeMessage
+	localStorage.setItem('chatHistory', JSON.stringify(chatHistory));
 
-	localStorage.setItem('chatHistory', JSON.stringify(chatHistory))
+	if (chatLog) {
+		chatLog.innerHTML = '';
+		addMessage('assistant', welcomeMessage, true);
+	}
 }

index.html

@@ -15,24 +15,39 @@
         <div>Chat with Streaming</div>
         <div style="font-size: 0.9em; opacity: 0.9; display: flex; align-items: center; gap: 15px; flex-wrap: wrap;">
             <div style="display: flex; align-items: center; gap: 8px;">
-                <span>Backend:</span>
+                <span>Backend & Model:</span>
-                <select id="backendSelector" style="padding: 4px 8px; border-radius: 4px; border: 1px solid #444; background: #2a2a2a; color: #e0e0e0;">
+                <select id="backendModelSelector" style="padding: 4px 8px; border-radius: 4px; border: 1px solid #444; background: #2a2a2a; color: #e0e0e0; min-width: 200px;">
-                    <option value="ollama">Ollama (192.168.1.159:8081)</option>
+                    <option value="">Loading backends and models...</option>
-                    <option value="plato">Plato (192.168.1.74)</option>
-                    <option value="stoic">Stoic (192.168.1.159)</option>
-                </select>
-            </div>
-            <div style="display: flex; align-items: center; gap: 8px;">
-                <span>Model:</span>
-                <select id="modelSelector" style="padding: 4px 8px; border-radius: 4px; border: 1px solid #444; background: #2a2a2a; color: #e0e0e0; min-width: 200px;">
-                    <option value="">Loading models...</option>
                 </select>
             </div>
             <code id="backendDisplay" style="font-size: 0.85em;"></code>
         </div>
     </div>
+</div>
 
-    <div id="chatLog"></div>
+<div id="chatLog">
+    <div class="message message-assistant"><div class="message-header assistant"><div class="avatar assistant-avatar">?</div><span>Assistant</span></div><div class="markdown-content"><h1>Welcome to LM Studio Chat!</h1>
+        <p>I now support <strong>full conversation history</strong>, <strong>real-time streaming responses</strong> and <strong>dark, readable text formatting</strong>.</p>
+        <h2>Features:</h2>
+        <ol>
+            <li><strong>Full Chat History</strong> - Complete conversation context is now sent to the AI</li>
+            <li><strong>Smart History Management</strong> - Automatically keeps the last 50 messages</li>
+            <li><strong>Streaming Mode</strong> (enabled by default) - Watch responses appear word-by-word</li>
+            <li><strong>Markdown Rendering</strong> - Proper formatting for code, lists, tables, and more</li>
+            <li><strong>Readable Dark Text</strong> - No more eye strain from light gray text</li>
+        </ol>
+        <h2>Try it out:</h2>
+        <ul>
+            <li>Ask follow-up questions that reference earlier messages</li>
+            <li>Have a multi-turn conversation with full context</li>
+            <li>Ask "what did I just ask?" to test history retention</li>
+            <li>Watch the streaming response in real-time!</li>
+        </ul>
+        <blockquote>
+            <p><em>Tip: You can toggle streaming and markdown using the checkboxes below.</em></p>
+        </blockquote>
+    </div></div>
+</div>
 
 <div id="inputArea">
         <textarea

style.css

@@ -9,7 +9,6 @@ body {
 #chatContainer {
    display: flex;
    flex-direction: column;
-   height: 95vh;
    background: white;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);