From 3f24902f3fa2f68817cdc8b161ea75888bbd9405 Mon Sep 17 00:00:00 2001
From: mike <michael@appmodel.nl>
Date: Wed, 17 Dec 2025 15:46:59 +0100
Subject: [PATCH] jarvis

---
 index.html | 147 ++++++++++++++++++++++++++++++++++++++++++++---------
 1 file changed, 124 insertions(+), 23 deletions(-)
diff --git a/index.html b/index.html
index 4004763..305c508 100644
--- a/index.html
+++ b/index.html
@@ -3,7 +3,7 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>LM Studio Chat with Streaming</title>
+    <title>Chat</title>
     <!-- Darker markdown styling -->
     <style>
     .markdown-content {
@@ -206,21 +206,22 @@
        padding: 15px;
        background: white;
        display: flex;
+       flex-direction: column;
        gap: 10px;
-       align-items: flex-end;
     }
 
     #userInput {
-       flex: 1;
-       padding: 12px 15px;
-       border: 1px solid #ddd;
-       border-radius: 8px;
-       font-size: 15px;
+       width: 100%;
+       padding: 16px 18px;
+       border: 2px solid #ddd;
+       border-radius: 10px;
+       font-size: 16px;
        resize: none;
-       min-height: 60px;
-       max-height: 200px;
+       min-height: 100px;
+       max-height: 300px;
        font-family: inherit;
-       line-height: 1.5;
+       line-height: 1.6;
+       box-sizing: border-box;
     }
 
     #userInput:focus {
@@ -314,6 +315,52 @@
        }
     }
 
+    .thinking-block {
+       margin: 10px 0;
+       border-left: 3px solid #ff9800;
+       background: #fff3e0;
+       border-radius: 6px;
+       overflow: hidden;
+    }
+
+    .thinking-header {
+       padding: 8px 12px;
+       background: #ffe0b2;
+       cursor: pointer;
+       user-select: none;
+       display: flex;
+       align-items: center;
+       gap: 8px;
+       font-weight: 600;
+       color: #e65100;
+       font-size: 0.9em;
+    }
+
+    .thinking-header:hover {
+       background: #ffcc80;
+    }
+
+    .thinking-toggle {
+       transition: transform 0.2s;
+       display: inline-block;
+    }
+
+    .thinking-toggle.collapsed {
+       transform: rotate(-90deg);
+    }
+
+    .thinking-content {
+       padding: 12px;
+       color: #5d4037;
+       font-size: 0.9em;
+       line-height: 1.5;
+       border-top: 1px solid #ffcc80;
+    }
+
+    .thinking-content.hidden {
+       display: none;
+    }
+
     .controls {
        display: flex;
        gap: 10px;
@@ -344,7 +391,7 @@
 <body>
 <div id="chatContainer">
     <div id="header">
-        <div>🤖 LM Studio Chat with Streaming</div>
+        <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>
@@ -366,13 +413,13 @@
     <div id="chatLog"></div>
     
     <div id="inputArea">
-        <div style="flex: 1;">
-                <textarea
-                        id="userInput"
-                        placeholder="Type your message here... (Shift+Enter for new line, Enter to send)"
-                        rows="1"
-                        oninput="autoResize(this)"
-                ></textarea>
+        <textarea
+                id="userInput"
+                placeholder="Type your message here... (Shift+Enter for new line, Enter to send)"
+                rows="1"
+                oninput="autoResize(this)"
+        ></textarea>
+        <div style="display: flex; justify-content: space-between; align-items: center;">
             <div class="controls">
                 <div>
                     <label>
@@ -384,8 +431,8 @@
                 </div>
                 <div id="modelInfo">Model: <span id="modelName">unknown</span></div>
             </div>
+            <button id="sendBtn">Send</button>
         </div>
-        <button id="sendBtn">Send</button>
     </div>
 </div>
 
@@ -516,7 +563,7 @@ marked.setOptions({
 // Auto-resize textarea
 function autoResize(textarea) {
 	textarea.style.height = 'auto'
-	textarea.style.height = Math.min(textarea.scrollHeight, 200) + 'px'
+	textarea.style.height = Math.min(textarea.scrollHeight, 300) + 'px'
 }
 
 // Old fetchModels function removed - now handled in DOMContentLoaded
@@ -546,7 +593,9 @@ function addMessage(role, content, markdown = false, messageId = null) {
 
 	if (markdown && role === 'assistant' && markdownToggle.checked) {
 		contentDiv.className = 'markdown-content'
-		contentDiv.innerHTML = marked.parse(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(() => {
@@ -556,7 +605,9 @@ function addMessage(role, content, markdown = false, messageId = null) {
 			}, 0)
 		}
 	} else {
-		contentDiv.textContent = content
+		// 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'
@@ -570,10 +621,60 @@ function addMessage(role, content, markdown = false, messageId = null) {
 	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 `<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>`
+	})
+
+	// Handle incomplete [THINK] blocks (still streaming)
+	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
+}
+
+// Toggle thinking section visibility
+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')
+	}
+}
+
 // Update message content (for streaming)
 function updateMessageContent(contentDiv, newContent, markdown = false) {
+	// Parse thinking tags first
+	const processedContent = parseThinkingTags(newContent)
+
 	if (markdown && markdownToggle.checked) {
-		contentDiv.innerHTML = marked.parse(newContent)
+		contentDiv.innerHTML = marked.parse(processedContent)
 		if (window.hljs) {
 			setTimeout(() => {
 				contentDiv.querySelectorAll('pre code').forEach((block) => {
