chore: update 9 file(s)

.gitignore

@@ -1,3 +1,5 @@
 .idea/
 .env
 .aider*
+node_modules/
+dist/

Dockerfile

@@ -1,3 +1,15 @@
+FROM node:20-alpine AS builder
+WORKDIR /app
+COPY package*.json ./
+RUN npm ci
+COPY wwww/ ./
+COPY webpack.config.js ./
+COPY robots.txt ./
+COPY site.webmanifest ./
+RUN mkdir -p /usr/share/nginx/html
+RUN npm run build
 FROM nginx:alpine
-COPY ./wwww /usr/share/nginx/html/
+COPY --from=builder /app/dist /usr/share/nginx/html
 COPY nginx.conf /etc/nginx/conf.d/default.conf
+EXPOSE 80
+CMD ["nginx", "-g", "daemon off;"]

package.json

@@ -0,0 +1,32 @@
+{
+  "name": "jarvis-lan",
+  "version": "0.0.1",
+  "description": "",
+  "private": true,
+  "type": "module",
+  "keywords": [
+    ""
+  ],
+  "license": "",
+  "author": "",
+  "scripts": {
+    "build": "webpack --mode production",
+    "build:dev": "webpack --mode development",
+    "watch": "webpack --mode development --watch",
+    "dev": "webpack serve --mode development",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "devDependencies": {
+    "clean-webpack-plugin": "^4.0.0",
+    "copy-webpack-plugin": "^13.0.1",
+    "css-loader": "^7.1.2",
+    "html-webpack-plugin": "^5.6.5",
+    "mini-css-extract-plugin": "^2.9.4",
+    "webpack": "^5.104.0",
+    "webpack-cli": "^6.0.1",
+    "webpack-dev-server": "^5.2.2"
+  },
+  "dependencies": {
+    "jsdom": "^27.3.0"
+  }
+}

robots.txt

@@ -0,0 +1,5 @@
+# www.robotstxt.org/
+
+# Allow crawling of all content
+User-agent: *
+Disallow:

site.webmanifest

@@ -0,0 +1,12 @@
+{
+  "short_name": "",
+  "name": "",
+  "icons": [{
+    "src": "icon.png",
+    "type": "image/png",
+    "sizes": "192x192"
+  }],
+  "start_url": "/?utm_source=homescreen",
+  "background_color": "#fafafa",
+  "theme_color": "#fafafa"
+}

webpack.config.js

@@ -0,0 +1,92 @@
+import path                   from 'path'
+import { fileURLToPath }      from 'url'
+import HtmlWebpackPlugin      from 'html-webpack-plugin'
+import MiniCssExtractPlugin   from 'mini-css-extract-plugin'
+import CopyWebpackPlugin      from 'copy-webpack-plugin'
+import { CleanWebpackPlugin } from 'clean-webpack-plugin'
+
+const __filename = fileURLToPath(import.meta.url)
+const __dirname = path.dirname(__filename)
+
+export default (env, argv) => {
+	const isProduction = argv.mode === 'production'
+
+	return {
+		mode: isProduction ? 'production' : 'development',
+
+		entry: {
+			wwww: './www/chatv3.js'
+		},
+
+		output: {
+			path      : path.resolve(__dirname, 'dist'),
+			filename  : isProduction ? 'js/[name].[contenthash:8].js' : 'js/[name].js',
+			publicPath: isProduction ? '../' : '/'
+		},
+
+		module: {
+			rules: [
+				{
+					test: /\.css$/,
+					use : [
+						MiniCssExtractPlugin.loader,
+						'css-loader'
+					]
+				}
+			]
+		},
+
+		plugins: [
+			new CleanWebpackPlugin(),
+
+			new MiniCssExtractPlugin({
+				filename: isProduction ? 'css/[name].[contenthash:8].css' : 'css/[name].css'
+			}),
+
+			new HtmlWebpackPlugin({
+				template: './www/index.html',
+				filename: 'index.html',
+				chunks  : ['wwww'],
+				inject  : 'body',
+				minify  : isProduction
+			}),
+			new CopyWebpackPlugin({
+				patterns: [
+					{ from: 'www/404.html', to: '404.html' },
+					{ from: 'www/favicon.ico', to: 'favicon.ico' },
+					{ from: 'www/icon.svg', to: 'icon.svg' },
+					{ from: 'robots.txt', to: 'robots.txt', noErrorOnMissing: true },
+					{ from: 'site.webmanifest', to: 'site.webmanifest', noErrorOnMissing: true }
+				]
+			})
+		],
+
+		optimization: {
+			moduleIds   : 'deterministic',
+			runtimeChunk: 'single',
+			splitChunks : {
+				cacheGroups: {
+					vendor: {
+						test  : /[\\/]node_modules[\\/]/,
+						name  : 'vendors',
+						chunks: 'all'
+					}
+				}
+			}
+		},
+
+		devtool: isProduction ? 'source-map' : 'eval-source-map',
+
+		devServer: {
+			host         : '0.0.0.0',
+			port         : 8082,
+			allowedHosts : 'all',
+			hot          : true,
+			devMiddleware: { publicPath: '/' },
+			static       : [
+				{ directory: path.resolve(__dirname, 'dist') },
+				{ directory: path.resolve(__dirname, 'www'), publicPath: '/' }
+			]
+		}
+	}
+}

www/chatv3.js

@@ -1,17 +1,17 @@
 const BACKENDS = {
-	plato: {
+	plato : {
 		prod: '/api/plato',
-		dev: 'http://192.168.1.74:8080/v1',
+		dev : 'http://192.168.1.74:8080/v1',
 		name: 'Plato (192.168.1.74)'
 	},
-	stoic: {
+	stoic : {
 		prod: '/api/stoic',
-		dev: 'http://192.168.1.159:1234/v1',
+		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',
+		dev : 'http://192.168.1.159:8081/v1',
 		name: 'Ollama (192.168.1.159:8081)'
 	}
 }
@@ -27,10 +27,10 @@ let chatHistory = JSON.parse(localStorage.getItem('chatHistory')) || []
 
 // ✅ FIX: Generate unique IDs and validate message structure
 chatHistory = chatHistory.map((message, index) => ({
-	role: message.role || 'user',
+	role     : message.role || 'user',
-	content: message.content || '',
+	content  : message.content || '',
-	markdown: message.markdown || false,
+	markdown : message.markdown || false,
-	messageId: message.messageId || `msg-${Date.now()}-${index}`
+	messageId: message.messageId || `msg-${ Date.now() }-${ index }`
 })).filter(msg => msg.content && typeof msg.content === 'string')
 
 const welcomeMessage = `# Welcome to LM Studio Chat!
@@ -39,7 +39,7 @@ I now support **full conversation history**, **real-time streaming responses** a
 
 ## 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
+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
@@ -55,115 +55,115 @@ I now support **full conversation history**, **real-time streaming responses** a
 // ✅ NEW: Robust parser for backend:model format
 function splitBackendModel(value) {
 	if (!value || value === ':') {
-		return { backendKey: '', model: '' };
+		return { backendKey: '', model: '' }
 	}
 
-	const colonIndex = value.indexOf(':');
+	const colonIndex = value.indexOf(':')
 	if (colonIndex === -1) {
-		return { backendKey: value, model: '' };
+		return { backendKey: value, model: '' }
 	}
 
 	return {
 		backendKey: value.substring(0, colonIndex),
-		model: value.substring(colonIndex + 1)
+		model     : value.substring(colonIndex + 1)
-	};
+	}
 }
 
 function getApiUrl() {
-	const { backendKey, model } = splitBackendModel(currentBackendModel);
+	const { backendKey, model } = splitBackendModel(currentBackendModel)
-	const effectiveBackendKey = backendKey || 'plato';
+	const effectiveBackendKey = backendKey || 'plato'
-	const backend = BACKENDS[effectiveBackendKey];
+	const backend = BACKENDS[effectiveBackendKey]
 
 	if (!backend) {
-		throw new Error(`Invalid backend: '${effectiveBackendKey}'`);
+		throw new Error(`Invalid backend: '${ effectiveBackendKey }'`)
 	}
 
-	return IS_PRODUCTION ? backend.prod : backend.dev;
+	return IS_PRODUCTION ? backend.prod : backend.dev
 }
 
 function updateBackendModelDisplay() {
-	const { backendKey, model } = splitBackendModel(currentBackendModel);
+	const { backendKey, model } = splitBackendModel(currentBackendModel)
-	const backend = BACKENDS[backendKey];
+	const backend = BACKENDS[backendKey]
-	if (!backend) return;
+	if (!backend) return
 
 	const displayText = IS_PRODUCTION
-		? `${backend.prod} - ${backend.name}`
+		? `${ backend.prod } - ${ backend.name }`
-		: backend.dev;
+		: backend.dev
-	const displayElement = document.getElementById('backendDisplay');
+	const displayElement = document.getElementById('backendDisplay')
 	if (displayElement) {
-		displayElement.textContent = `${displayText} - Model: ${model || 'None'}`;
+		displayElement.textContent = `${ displayText } - Model: ${ model || 'None' }`
 	}
 }
 
 async function fetchBackendModels() {
-	const selector = document.getElementById('backendModelSelector');
+	const selector = document.getElementById('backendModelSelector')
-	let allModels = [];
+	let allModels = []
 
 	for (const [backendKey, backendConfig] of Object.entries(BACKENDS)) {
 		try {
-			const apiUrl = IS_PRODUCTION ? backendConfig.prod : backendConfig.dev;
+			const apiUrl = IS_PRODUCTION ? backendConfig.prod : backendConfig.dev
-			console.log(`Fetching models from ${backendKey}: ${apiUrl}`);
+			console.log(`Fetching models from ${ backendKey }: ${ apiUrl }`)
 
-			const response = await fetch(`${apiUrl}/models`, {
+			const response = await fetch(`${ apiUrl }/models`, {
 				signal: AbortSignal.timeout(5000) // 5 second timeout
-			});
+			})
 
 			if (response.ok) {
-				const data = await response.json();
+				const data = await response.json()
 				if (data.data && Array.isArray(data.data)) {
 					const models = data.data.map(model => ({
 						backend: backendKey,
-						model: model.id
+						model  : model.id
-					}));
+					}))
-					allModels = [...allModels, ...models];
+					allModels = [...allModels, ...models]
 				}
 			} else {
-				console.error(`Failed to fetch models from ${backendKey}: ${response.status} ${response.statusText}`);
+				console.error(`Failed to fetch models from ${ backendKey }: ${ response.status } ${ response.statusText }`)
 			}
 		} catch (error) {
-			console.error(`Error fetching models from ${backendKey}:`, error);
+			console.error(`Error fetching models from ${ backendKey }:`, error)
 		}
 	}
 
-	availableBackendModels = allModels;
+	availableBackendModels = allModels
 
 	if (selector) {
 		if (availableBackendModels.length === 0) {
-			selector.innerHTML = '<option value="">No models available (check backends)</option>';
+			selector.innerHTML = '<option value="">No models available (check backends)</option>'
 		} else {
-			populateBackendModelSelector();
+			populateBackendModelSelector()
 
 			// Auto-select if no valid model is set
-			const hasModel = currentBackendModel && currentBackendModel.includes(':') && currentBackendModel.split(':')[1];
+			const hasModel = currentBackendModel && currentBackendModel.includes(':') && currentBackendModel.split(':')[1]
 			if (!hasModel && availableBackendModels.length > 0) {
-				currentBackendModel = `${availableBackendModels[0].backend}:${availableBackendModels[0].model}`;
+				currentBackendModel = `${ availableBackendModels[0].backend }:${ availableBackendModels[0].model }`
-				selector.value = currentBackendModel;
+				selector.value = currentBackendModel
 			}
 		}
 	}
 
-	updateBackendModelDisplay();
+	updateBackendModelDisplay()
 }
 
 function populateBackendModelSelector() {
-	const selector = document.getElementById('backendModelSelector');
+	const selector = document.getElementById('backendModelSelector')
-	if (!selector) return;
+	if (!selector) return
 
 	if (availableBackendModels.length === 0) {
-		selector.innerHTML = '<option value="">No models available</option>';
+		selector.innerHTML = '<option value="">No models available</option>'
-		return;
+		return
 	}
 
 	selector.innerHTML = availableBackendModels.map(backendModel =>
-		`<option value="${backendModel.backend}:${backendModel.model}">${BACKENDS[backendModel.backend].name} - ${backendModel.model}</option>`
+		`<option value="${ backendModel.backend }:${ backendModel.model }">${ BACKENDS[backendModel.backend].name } - ${ backendModel.model }</option>`
-	).join('');
+	).join('')
 
-	if (currentBackendModel && selector.querySelector(`option[value="${currentBackendModel}"]`)) {
+	if (currentBackendModel && selector.querySelector(`option[value="${ currentBackendModel }"]`)) {
-		selector.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}`;
+		currentBackendModel = `${ availableBackendModels[0].backend }:${ availableBackendModels[0].model }`
-		selector.value = currentBackendModel;
+		selector.value = currentBackendModel
 	}
 }
 
@@ -171,492 +171,494 @@ 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 backendModelSelector = document.getElementById('backendModelSelector');
+	const backendModelSelector = document.getElementById('backendModelSelector')
 
 	if (backendModelSelector) {
 		backendModelSelector.addEventListener('change', (e) => {
-			currentBackendModel = e.target.value;
+			currentBackendModel = e.target.value
-			updateBackendModelDisplay();
+			updateBackendModelDisplay()
-			fetchBackendModels();
+			fetchBackendModels()
-		});
+		})
 	}
-});
+})
 
-const chatLog = document.getElementById('chatLog');
+const chatLog = document.getElementById('chatLog')
-const userInput = document.getElementById('userInput');
+const userInput = document.getElementById('userInput')
-const sendBtn = document.getElementById('sendBtn');
+const sendBtn = document.getElementById('sendBtn')
-const streamToggle = document.getElementById('streamToggle');
+const streamToggle = document.getElementById('streamToggle')
-const markdownToggle = document.getElementById('markdownToggle');
+const markdownToggle = document.getElementById('markdownToggle')
-const modelNameSpan = document.getElementById('modelName');
+const modelNameSpan = document.getElementById('modelName')
 
 marked.setOptions({
-	gfm: true,
+	gfm      : true,
-	breaks: 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, saveToHistory = true) {
-	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 = '#e0e0e0';
+		contentDiv.style.color = '#e0e0e0'
 	}
 
-	messageDiv.appendChild(headerDiv);
+	messageDiv.appendChild(headerDiv)
-	messageDiv.appendChild(contentDiv);
+	messageDiv.appendChild(contentDiv)
 	if (chatLog) {
-		chatLog.appendChild(messageDiv);
+		chatLog.appendChild(messageDiv)
-		chatLog.scrollTop = chatLog.scrollHeight;
+		chatLog.scrollTop = chatLog.scrollHeight
 	}
 
 	if (saveToHistory) {
-		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}')">
+			<div class="thinking-header" onclick="toggleThinking('${ id }')">
-				<span class="thinking-toggle" id="${id}-toggle">?</span>
+				<span class="thinking-toggle" id="${ id }-toggle">?</span>
 				<span>? Thinking...</span>
 			</div>
-			<div class="thinking-content" id="${id}">${thinkContent.trim()}</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}')">
+			<div class="thinking-header" onclick="toggleThinking('${ id }')">
-				<span class="thinking-toggle" id="${id}-toggle">?</span>
+				<span class="thinking-toggle" id="${ id }-toggle">?</span>
 				<span>? Thinking...</span>
 			</div>
-			<div class="thinking-content" id="${id}">${thinkContent.trim()}</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 && 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.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 = '#e0e0e0';
+		contentDiv.style.color = '#e0e0e0'
 	}
 	if (chatLog) {
-		chatLog.scrollTop = chatLog.scrollHeight;
+		chatLog.scrollTop = chatLog.scrollHeight
 	}
 }
 
 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(avatar);
+	headerDiv.appendChild(avatar)
-	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)
 	if (chatLog) {
-		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)
 	if (chatLog) {
-		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();
+	currentStreamController = new AbortController()
-	isStreaming = true;
+	isStreaming = true
 
 	try {
-		const { backendKey, model } = splitBackendModel(currentBackendModel);
+		const { backendKey, model } = splitBackendModel(currentBackendModel)
-		const selectedModel = model || availableBackendModels[0]?.model || 'local-model';
+		const selectedModel = model || availableBackendModels[0]?.model || 'local-model'
 
 		const requestBody = {
-			model: selectedModel,
+			model         : selectedModel,
-			messages: getApiMessages(),
+			messages      : getApiMessages(),
-			stream: true,
+			stream        : true,
-			temperature: 0.7,
+			temperature   : 0.7,
-			max_tokens: 2000
+			repeat_penalty: 1.1,
-		};
+			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 response = await fetch(`${ getApiUrl() }/chat/completions`, {
-		const decoder = new TextDecoder();
+			method : 'POST',
+			headers: {
+				'Content-Type' : 'application/json',
+				'Authorization': `Bearer ${ API_KEY }`
+			},
+			body   : JSON.stringify(requestBody),
+			signal : currentStreamController.signal  // ✅ Now works correctly
+		})
 
-		let updateScheduled = false;
+		if (!response.ok) {
-		let lastUpdate = Date.now();
+			throw new Error(`API Error: ${ response.status } ${ response.statusText }`)
-		const MIN_UPDATE_INTERVAL = 100;
+		}
+
+		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;
+			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(() => {
+				requestAnimationFrame(() => {
-						updateMessageContent(contentDiv, accumulatedContent, markdownToggle && markdownToggle.checked, 'assistant');
+					updateMessageContent(contentDiv, accumulatedContent, markdownToggle && markdownToggle.checked, 'assistant')
-						if (cursorSpan.parentNode) {
+					if (cursorSpan.parentNode) {
-							contentDiv.appendChild(cursorSpan);
+						contentDiv.appendChild(cursorSpan)
-						}
+					}
-						if (chatLog) {
+					if (chatLog) {
-							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 && markdownToggle.checked, 'assistant');
+						updateMessageContent(contentDiv, accumulatedContent, markdownToggle && markdownToggle.checked, 'assistant')
 						if (cursorSpan.parentNode) {
-							contentDiv.appendChild(cursorSpan);
+							contentDiv.appendChild(cursorSpan)
 						}
 						if (chatLog) {
-							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 && cursorSpan.parentNode) {
-			cursorSpan.parentNode.removeChild(cursorSpan);
+			cursorSpan.parentNode.removeChild(cursorSpan)
 		}
 	}
 }
 
 async function handleNonStreamingResponse(userMessage) {
-	let typingIndicator = null;
+	let typingIndicator = null
 	try {
-		typingIndicator = showTypingIndicator();
+		typingIndicator = showTypingIndicator()
 
-		const { backendKey, model } = splitBackendModel(currentBackendModel);
+		const { backendKey, model } = splitBackendModel(currentBackendModel)
-		const selectedModel = model || availableBackendModels[0]?.model || 'local-model';
+		const selectedModel = model || availableBackendModels[0]?.model || 'local-model'
 
 		const requestBody = {
-			model: selectedModel,
+			model         : selectedModel,
-			messages: getApiMessages(),
+			messages      : getApiMessages(),
-			stream: false,
+			stream        : false,
-			temperature: 0.7,
+			temperature   : 0.7,
-			max_tokens: 2000
+			repeat_penalty: 1.1,
-		};
+			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();
+		const response = await fetch(`${ getApiUrl() }/chat/completions`, {
-		removeTypingIndicator(typingIndicator);
+			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;
+			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)
 		if (typingIndicator) {
-			removeTypingIndicator(typingIndicator);
+			removeTypingIndicator(typingIndicator)
 		}
-		addMessage('assistant', `Error: ${error.message}`, false);
+		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
 
 	// ✅ FIX: Validate backend selection
 	if (!currentBackendModel) {
-		addMessage('assistant', 'Please select a backend model first.', false);
+		addMessage('assistant', 'Please select a backend model first.', false)
-		return;
+		return
 	}
 
-	addMessage('user', userMessage, false);
+	addMessage('user', userMessage, false)
 
-	userInput.value = '';
+	userInput.value = ''
-	userInput.style.height = 'auto';
+	userInput.style.height = 'auto'
-	sendBtn.disabled = true;
+	sendBtn.disabled = true
 
 	if (streamToggle.checked) {
-		sendBtn.textContent = 'Stop';
+		sendBtn.textContent = 'Stop'
-		await handleStreamingResponse(userMessage);
+		await handleStreamingResponse(userMessage)
 	} else {
-		await handleNonStreamingResponse(userMessage);
+		await handleNonStreamingResponse(userMessage)
 	}
 
-	sendBtn.textContent = 'Send';
+	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 = () => {
-	if (userInput) userInput.focus();
+	if (userInput) userInput.focus()
 
 	// Set default backend BEFORE fetching
 	if (!currentBackendModel) {
-		currentBackendModel = 'plato';
+		currentBackendModel = 'plato'
 	}
 
 	fetchBackendModels().then(() => {
@@ -667,22 +669,22 @@ window.onload = () => {
 			} else {
 				chatHistory.forEach(msg => {
 					if (typeof msg.content === 'string' && msg.content.trim()) {
-						addMessage(msg.role, msg.content, msg.markdown, msg.messageId, false);
+						addMessage(msg.role, msg.content, msg.markdown, msg.messageId, false)
 					}
-				});
+				})
 			}
 		}
-	});
+	})
 
-	document.getElementById('resetBtn')?.addEventListener('click', resetChat);
+	document.getElementById('resetBtn')?.addEventListener('click', resetChat)
-};
+}
 
 function resetChat() {
-	chatHistory = [];
+	chatHistory = []
-	localStorage.setItem('chatHistory', JSON.stringify(chatHistory));
+	localStorage.setItem('chatHistory', JSON.stringify(chatHistory))
 
 	if (chatLog) {
-		chatLog.innerHTML = '';
+		chatLog.innerHTML = ''
-		addMessage('assistant', welcomeMessage, true, null, false);
+		addMessage('assistant', welcomeMessage, true, null, false)
 	}
 }