diff --git a/chat.js b/chat.js
index e69de29..ad98005 100644
--- a/chat.js
+++ b/chat.js
@@ -0,0 +1,604 @@
+// Configuration
+const BACKENDS = {
+ plato : {
+ prod: '/api/plato',
+ dev : 'http://192.168.1.74:1234/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'
+
+// Global state
+let currentBackend = 'plato'
+let currentModel = null
+let availableModels = []
+let currentStreamController = null
+let isStreaming = false
+let chatHistory = [] // Initialize chat history array
+
+// Get current API URL based on selected backend
+function getApiUrl() {
+ const backend = BACKENDS[currentBackend]
+ return IS_PRODUCTION ? backend.prod : backend.dev
+}
+
+// Update backend display
+function updateBackendDisplay() {
+ const backend = BACKENDS[currentBackend]
+ const displayText = IS_PRODUCTION
+ ? `${ backend.prod } → ${ backend.name }`
+ : backend.dev
+ document.getElementById('backendDisplay').textContent = displayText
+}
+
+// Fetch available models from backend
+async function fetchModels() {
+ try {
+ const response = await fetch(`${ getApiUrl() }/models`)
+ if (response.ok) {
+ const data = await response.json()
+ availableModels = data.data || []
+ populateModelSelector()
+
+ // Auto-select first model if none selected
+ if (!currentModel && availableModels.length > 0) {
+ currentModel = availableModels[0].id
+ document.getElementById('modelSelector').value = currentModel
+ }
+ } else {
+ console.error('Failed to fetch models:', response.statusText)
+ document.getElementById('modelSelector').innerHTML = ''
+ }
+ } catch (error) {
+ console.error('Error fetching models:', error)
+ document.getElementById('modelSelector').innerHTML = ''
+ }
+}
+
+// Populate model selector dropdown
+function populateModelSelector() {
+ const selector = document.getElementById('modelSelector')
+ if (availableModels.length === 0) {
+ selector.innerHTML = ''
+ return
+ }
+
+ selector.innerHTML = availableModels.map(model =>
+ ``
+ ).join('')
+
+ if (currentModel) {
+ selector.value = currentModel
+ }
+}
+
+// Handle backend and model selection changes
+document.addEventListener('DOMContentLoaded', () => {
+ const backendSelector = document.getElementById('backendSelector')
+ const modelSelector = document.getElementById('modelSelector')
+
+ backendSelector.value = currentBackend
+ updateBackendDisplay()
+ fetchModels()
+
+ backendSelector.addEventListener('change', (e) => {
+ currentBackend = e.target.value
+ updateBackendDisplay()
+ console.log('Backend switched to:', currentBackend, '→', getApiUrl())
+ fetchModels() // Reload models for new backend
+ })
+
+ modelSelector.addEventListener('change', (e) => {
+ currentModel = e.target.value
+ console.log('Model selected:', currentModel)
+ })
+})
+
+// DOM Elements
+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')
+
+// Initialize marked with options
+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
+ }
+})
+
+// Auto-resize textarea
+function autoResize(textarea) {
+ textarea.style.height = 'auto'
+ textarea.style.height = Math.min(textarea.scrollHeight, 300) + 'px'
+}
+
+// Add message to chat
+function addMessage(role, content, markdown = false, messageId = null) {
+ 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'
+ // Parse thinking tags before markdown
+ const processedContent = parseThinkingTags(content)
+ contentDiv.innerHTML = marked.parse(processedContent)
+ // Apply syntax highlighting if hljs is available
+ if (window.hljs) {
+ setTimeout(() => {
+ contentDiv.querySelectorAll('pre code').forEach((block) => {
+ hljs.highlightElement(block)
+ })
+ }, 0)
+ }
+ } else {
+ // Parse thinking tags for non-markdown too
+ const processedContent = parseThinkingTags(content)
+ contentDiv.innerHTML = processedContent
+ contentDiv.style.whiteSpace = 'pre-wrap'
+ contentDiv.style.padding = '8px 0'
+ contentDiv.style.color = '#2d3339'
+ }
+
+ messageDiv.appendChild(headerDiv)
+ messageDiv.appendChild(contentDiv)
+ chatLog.appendChild(messageDiv)
+ chatLog.scrollTop = chatLog.scrollHeight
+
+ // Add message to chat history
+ chatHistory.push({ role, content, markdown, messageId })
+
+ return contentDiv
+}
+
+// Parse [THINK] tags and create collapsible sections
+function parseThinkingTags(content) {
+ let result = content
+ let thinkingCounter = 0
+
+ // Handle complete [THINK]...[/THINK] blocks
+ const completeThinkRegex = /\[THINK\]([\s\S]*?)\[\/THINK\]/gi
+ result = result.replace(completeThinkRegex, (match, thinkContent) => {
+ thinkingCounter++
+ const id = `thinking-${ Date.now() }-${ thinkingCounter }`
+ return `
+
+
${ thinkContent.trim() }
+
+
+
${ thinkContent.trim() }
+