lemonade-sdk 8.1.7__py3-none-any.whl → 8.1.9__py3-none-any.whl

lemonade/tools/server/static/js/chat.js

@@ -1,10 +1,18 @@
 // Chat logic and functionality
 let messages = [];
 let attachedFiles = [];
+let systemMessageElement = null;
 
 // Default model configuration
 const DEFAULT_MODEL = 'Qwen2.5-0.5B-Instruct-CPU';
 
+const THINKING_ANIM_INTERVAL_MS = 550;
+// Toggle this to false if you prefer plain dots only.
+const THINKING_USE_LEMON = true;
+const THINKING_FRAMES = THINKING_USE_LEMON
+    ? ['Thinking.','Thinking..','Thinking...','Thinking 🍋']
+    : ['Thinking.','Thinking..','Thinking...'];
+
 // Get DOM elements
 let chatHistory, chatInput, sendBtn, attachmentBtn, fileAttachment, attachmentsPreviewContainer, attachmentsPreviewRow, modelSelect;
 
@@ -21,19 +29,22 @@ document.addEventListener('DOMContentLoaded', function() {
 
     // Set up event listeners
     setupChatEventListeners();
-    
+
     // Initialize model dropdown (will be populated when models.js calls updateModelStatusIndicator)
     initializeModelDropdown();
-    
+
     // Update attachment button state periodically
     updateAttachmentButtonState();
     setInterval(updateAttachmentButtonState, 1000);
+
+    // Display initial system message
+    displaySystemMessage();
 });
 
 function setupChatEventListeners() {
     // Send button click
     sendBtn.onclick = sendMessage;
-    
+
     // Attachment button click
     attachmentBtn.onclick = () => {
         if (!currentLoadedModel) {
@@ -53,10 +64,10 @@ function setupChatEventListeners() {
     // Chat input events
     chatInput.addEventListener('keydown', handleChatInputKeydown);
     chatInput.addEventListener('paste', handleChatInputPaste);
-    
+
     // Model select change
     modelSelect.addEventListener('change', handleModelSelectChange);
-    
+
     // Send button click
     sendBtn.addEventListener('click', function() {
         // Check if we have a loaded model
@@ -72,10 +83,14 @@ function setupChatEventListeners() {
 // Initialize model dropdown with available models
 function initializeModelDropdown() {
     const allModels = window.SERVER_MODELS || {};
-    
+
     // Clear existing options except the first one
-    modelSelect.innerHTML = '<option value="">Pick a model</option>';
-    
+    const indicator = document.getElementById('model-status-indicator');
+    if (indicator.classList.contains('offline') || modelSelect.value === 'server-offline') {
+        modelSelect.value = 'server-offline';
+    } else {
+        modelSelect.innerHTML = '<option value="">Click to select a model ▼</option>';
+    }
     // Add only installed models to dropdown
     Object.keys(allModels).forEach(modelId => {
         // Only add if the model is installed
@@ -86,7 +101,7 @@ function initializeModelDropdown() {
             modelSelect.appendChild(option);
         }
     });
-    
+
     // Set current selection based on loaded model
     updateModelSelectValue();
 }
@@ -96,10 +111,15 @@ window.initializeModelDropdown = initializeModelDropdown;
 
 // Update model select value to match currently loaded model
 function updateModelSelectValue() {
-    if (currentLoadedModel) {
+    const indicator = document.getElementById('model-status-indicator');
+    if (currentLoadedModel && indicator.classList.contains('loading')) {
+		modelSelect.value = 'loading-model';
+	} else if (currentLoadedModel) {
         modelSelect.value = currentLoadedModel;
+    } else if (indicator.classList.contains('offline') && modelSelect.value === 'server-offline') {
+		modelSelect.value = 'server-offline';
     } else {
-        modelSelect.value = '';
+        return;
     }
 }
 
@@ -109,37 +129,34 @@ window.updateModelSelectValue = updateModelSelectValue;
 // Handle model selection change
 async function handleModelSelectChange() {
     const selectedModel = modelSelect.value;
-    
-    if (!selectedModel) {
-        return; // "Pick a model" selected
-    }
-    
-    if (selectedModel === currentLoadedModel) {
-        return; // Same model already loaded
-    }
-    
+
+    if (!selectedModel) return; // "Click to select a model ▼" selected
+    if (selectedModel === currentLoadedModel) return; // Same model already loaded
+
     // Use the standardized load function
     await loadModelStandardized(selectedModel, {
         onLoadingStart: (modelId) => {
             // Update dropdown to show loading state with model name
-            const loadingOption = modelSelect.querySelector('option[value=""]');
+            const loadingOption = document.createElement('option');
+            const select = document.getElementById('model-select');
+            select.innerHTML = '';
+
             if (loadingOption) {
+            	loadingOption.value = 'loading-model';
                 loadingOption.textContent = `Loading ${modelId}...`;
+            	loadingOption.hidden = true;
+            	select.appendChild(loadingOption);
             }
         },
         onLoadingEnd: (modelId, success) => {
             // Reset the default option text
             const defaultOption = modelSelect.querySelector('option[value=""]');
-            if (defaultOption) {
-                defaultOption.textContent = 'Pick a model';
-            }
-        },
-        onSuccess: (loadedModelId) => {
-            // Update attachment button state for new model
+            if (defaultOption) defaultOption.textContent = 'Click to select a model ▼';
+		},
+        onSuccess: () => {
             updateAttachmentButtonState();
         },
-        onError: (error, failedModelId) => {
-            // Reset dropdown to previous value on error
+        onError: () => {
             updateModelSelectValue();
         }
     });
@@ -149,7 +166,7 @@ async function handleModelSelectChange() {
 function updateAttachmentButtonState() {
     // Update model dropdown selection
     updateModelSelectValue();
-    
+
     // Update send button state based on model loading
     if (modelSelect.disabled) {
         sendBtn.disabled = true;
@@ -163,25 +180,30 @@ function updateAttachmentButtonState() {
         attachmentBtn.style.opacity = '0.5';
         attachmentBtn.style.cursor = 'not-allowed';
         attachmentBtn.title = 'Load a model first';
-        return;
-    }
-    
-    const isVision = isVisionModel(currentLoadedModel);
-    
-    if (isVision) {
-        attachmentBtn.style.opacity = '1';
-        attachmentBtn.style.cursor = 'pointer';
-        attachmentBtn.title = 'Attach images';
     } else {
-        attachmentBtn.style.opacity = '0.5';
-        attachmentBtn.style.cursor = 'not-allowed';
-        attachmentBtn.title = 'Image attachments not supported by this model';
+        const isVision = isVisionModel(currentLoadedModel);
+
+        if (isVision) {
+            attachmentBtn.style.opacity = '1';
+            attachmentBtn.style.cursor = 'pointer';
+            attachmentBtn.title = 'Attach images';
+        } else {
+            attachmentBtn.style.opacity = '0.5';
+            attachmentBtn.style.cursor = 'not-allowed';
+            attachmentBtn.title = 'Image attachments not supported by this model';
+        }
     }
+
+    // Update system message when model state changes
+    displaySystemMessage();
 }
 
 // Make updateAttachmentButtonState accessible globally
 window.updateAttachmentButtonState = updateAttachmentButtonState;
 
+// Make displaySystemMessage accessible globally
+window.displaySystemMessage = displaySystemMessage;
+
 // Auto-load default model and send message
 async function autoLoadDefaultModelAndSend() {
     // Check if default model is available and installed
@@ -189,34 +211,27 @@ async function autoLoadDefaultModelAndSend() {
         showErrorBanner('No models available. Please install a model first.');
         return;
     }
-    
+
     if (!window.installedModels || !window.installedModels.has(DEFAULT_MODEL)) {
         showErrorBanner('Default model is not installed. Please install it from the Model Management tab.');
         return;
     }
-    
+
     // Store the message to send after loading
     const messageToSend = chatInput.value.trim();
-    if (!messageToSend && attachedFiles.length === 0) {
-        return; // Nothing to send
-    }
-    
+    if (!messageToSend && attachedFiles.length === 0) return;
+
     // Use the standardized load function
     const success = await loadModelStandardized(DEFAULT_MODEL, {
-        onLoadingStart: (modelId) => {
-            // Custom UI updates for auto-loading
-            sendBtn.textContent = 'Loading model...';
-        },
-        onLoadingEnd: (modelId, loadSuccess) => {
-            // Reset send button text
-            sendBtn.textContent = 'Send';
-        },
-        onSuccess: (loadedModelId) => {
-            // Send the message after successful load
-            sendMessage(messageToSend);
-        },
-        onError: (error, failedModelId) => {
+        // Custom UI updates for auto-loading
+        onLoadingStart: () => { sendBtn.textContent = 'Loading model...'; },
+        // Reset send button text
+        onLoadingEnd: () => { sendBtn.textContent = 'Send'; },
+        // Send the message after successful load
+        onSuccess: () => { sendMessage(messageToSend); },
+        onError: (error) => {
             console.error('Error auto-loading default model:', error);
+            showErrorBanner('Failed to load model: ' + error.message);
         }
     });
 }
@@ -237,15 +252,15 @@ function handleFileSelection() {
         // Check if current model supports vision
         if (!currentLoadedModel) {
             alert('Please load a model first before attaching images.');
-            fileAttachment.value = ''; // Clear the input
+            fileAttachment.value = '';
             return;
         }
         if (!isVisionModel(currentLoadedModel)) {
             alert(`The current model "${currentLoadedModel}" does not support image inputs. Please load a model with "Vision" capabilities.`);
-            fileAttachment.value = ''; // Clear the input
+            fileAttachment.value = '';
             return;
         }
-        
+
         // Filter only image files
         const imageFiles = Array.from(fileAttachment.files).filter(file => {
             if (!file.type.startsWith('image/')) {
@@ -254,17 +269,17 @@ function handleFileSelection() {
             }
             return true;
         });
-        
+
         if (imageFiles.length === 0) {
             alert('Please select only image files (PNG, JPG, GIF, etc.)');
-            fileAttachment.value = ''; // Clear the input
+            fileAttachment.value = '';
             return;
         }
-        
+
         if (imageFiles.length !== fileAttachment.files.length) {
             alert(`${fileAttachment.files.length - imageFiles.length} non-image file(s) were skipped. Only image files are supported.`);
         }
-        
+
         attachedFiles = imageFiles;
         updateInputPlaceholder();
         updateAttachmentPreviewVisibility();
@@ -277,7 +292,8 @@ function handleChatInputKeydown(e) {
     if (e.key === 'Escape' && attachedFiles.length > 0) {
         e.preventDefault();
         clearAttachments();
-    } else if (e.key === 'Enter') {
+    } else if (e.key === 'Enter' && !e.shiftKey) {
+        e.preventDefault();
         // Check if we have a loaded model
         if (currentLoadedModel && modelSelect.value !== '' && !modelSelect.disabled) {
             sendMessage();
@@ -291,19 +307,19 @@ function handleChatInputKeydown(e) {
 // Handle paste events for images
 async function handleChatInputPaste(e) {
     e.preventDefault();
-    
+
     const clipboardData = e.clipboardData || window.clipboardData;
     const items = clipboardData.items;
     let hasImage = false;
     let pastedText = '';
-    
+
     // Check for text content first
     for (let item of items) {
         if (item.type === 'text/plain') {
             pastedText = clipboardData.getData('text/plain');
         }
     }
-    
+
     // Check for images
     for (let item of items) {
         if (item.type.indexOf('image') !== -1) {
@@ -314,10 +330,7 @@ async function handleChatInputPaste(e) {
                 const currentModel = modelSelect.value;
                 if (!isVisionModel(currentModel)) {
                     alert(`The selected model "${currentModel}" does not support image inputs. Please select a model with "Vision" capabilities to paste images.`);
-                    // Only paste text, skip the image
-                    if (pastedText) {
-                        chatInput.value = pastedText;
-                    }
+                    if (pastedText) chatInput.value = pastedText;
                     return;
                 }
                 // Add to attachedFiles array only if it's an image and model supports vision
@@ -327,12 +340,10 @@ async function handleChatInputPaste(e) {
             }
         }
     }
-    
+
     // Update input box content - only show text, images will be indicated separately
-    if (pastedText) {
-        chatInput.value = pastedText;
-    }
-    
+    if (pastedText) chatInput.value = pastedText;
+
     // Update placeholder to show attached images
     updateInputPlaceholder();
     updateAttachmentPreviewVisibility();
@@ -358,46 +369,42 @@ function updateAttachmentPreviewVisibility() {
 function updateAttachmentPreviews() {
     // Clear existing previews
     attachmentsPreviewRow.innerHTML = '';
-    
-    if (attachedFiles.length === 0) {
-        return;
-    }
-    
+
+    if (attachedFiles.length === 0) return;
+
     attachedFiles.forEach((file, index) => {
         // Skip non-image files (extra safety check)
         if (!file.type.startsWith('image/')) {
             console.warn(`Skipping non-image file in preview: ${file.name} (${file.type})`);
             return;
         }
-        
+
         const previewDiv = document.createElement('div');
         previewDiv.className = 'attachment-preview';
-        
+
         // Create thumbnail
         const thumbnail = document.createElement('img');
         thumbnail.className = 'attachment-thumbnail';
         thumbnail.alt = file.name;
-        
+
         // Create filename display
         const filename = document.createElement('div');
         filename.className = 'attachment-filename';
         filename.textContent = file.name || `pasted-image-${index + 1}`;
         filename.title = file.name || `pasted-image-${index + 1}`;
-        
+
         // Create remove button
         const removeBtn = document.createElement('button');
         removeBtn.className = 'attachment-remove-btn';
         removeBtn.innerHTML = '✕';
         removeBtn.title = 'Remove this image';
         removeBtn.onclick = () => removeAttachment(index);
-        
+
         // Generate thumbnail for image
         const reader = new FileReader();
-        reader.onload = (e) => {
-            thumbnail.src = e.target.result;
-        };
+        reader.onload = (e) => { thumbnail.src = e.target.result; };
         reader.readAsDataURL(file);
-        
+
         previewDiv.appendChild(thumbnail);
         previewDiv.appendChild(filename);
         previewDiv.appendChild(removeBtn);
@@ -426,149 +433,385 @@ function fileToBase64(file) {
     return new Promise((resolve, reject) => {
         const reader = new FileReader();
         reader.readAsDataURL(file);
-        reader.onload = () => resolve(reader.result.split(',')[1]); // Remove data:image/...;base64, prefix
+        reader.onload = () => resolve(reader.result.split(',')[1]);
         reader.onerror = error => reject(error);
     });
 }
 
+/**
+ * Incrementally (re)renders reasoning + answer without blowing away the header so user
+ * collapsing/expanding persists while tokens stream.
+ */
+function updateMessageContent(bubbleElement, text, isMarkdown = false) {
+    if (!isMarkdown) {
+        bubbleElement.textContent = text;
+        return;
+    }
+
+    const { main, thought, isThinking } = parseReasoningBlocks(text);
+
+    // Pure normal markdown (no reasoning)
+    if (!thought.trim()) {
+        // If structure existed before, replace fully (safe—no toggle needed)
+        bubbleElement.innerHTML = renderMarkdown(main);
+        delete bubbleElement.dataset.thinkExpanded;
+        return;
+    }
+
+    // Determine current expanded state (user preference) or default
+    let expanded;
+    if (bubbleElement.dataset.thinkExpanded === 'true') expanded = true;
+    else if (bubbleElement.dataset.thinkExpanded === 'false') expanded = false;
+    else expanded = !!isThinking; // default: open while still streaming until user intervenes
+
+    // Create structure once
+    let container = bubbleElement.querySelector('.think-tokens-container');
+    let thoughtContent, headerChevron, headerLabel, mainDiv;
+
+    if (!container) {
+        bubbleElement.innerHTML = ''; // first time constructing reasoning UI
+
+        container = document.createElement('div');
+        container.className = 'think-tokens-container' + (expanded ? '' : ' collapsed');
+
+        const header = document.createElement('div');
+        header.className = 'think-tokens-header';
+        header.onclick = function () { toggleThinkTokens(header); };
+
+        headerChevron = document.createElement('span');
+        headerChevron.className = 'think-tokens-chevron';
+        headerChevron.textContent = expanded ? '▼' : '▶';
+
+        headerLabel = document.createElement('span');
+        headerLabel.className = 'think-tokens-label';
+        header.appendChild(headerChevron);
+        header.appendChild(headerLabel);
+
+        thoughtContent = document.createElement('div');
+        thoughtContent.className = 'think-tokens-content';
+        thoughtContent.style.display = expanded ? 'block' : 'none';
+
+        container.appendChild(header);
+        container.appendChild(thoughtContent);
+        bubbleElement.appendChild(container);
+
+        if (main.trim()) {
+            mainDiv = document.createElement('div');
+            mainDiv.className = 'main-response';
+            bubbleElement.appendChild(mainDiv);
+        }
+    } else {
+        thoughtContent = container.querySelector('.think-tokens-content');
+        headerChevron = container.querySelector('.think-tokens-chevron');
+        headerLabel = container.querySelector('.think-tokens-label');
+        mainDiv = bubbleElement.querySelector('.main-response');
+    }
+
+    // Update label & chevron (don’t override user-expanded state)
+    headerChevron.textContent = expanded ? '▼' : '▶';
+    // Animation-aware label handling
+    if (isThinking) {
+        // If not already animating, seed an initial frame then start animation
+        if (bubbleElement.dataset.thinkAnimActive !== '1') {
+            headerLabel.textContent = THINKING_FRAMES[0];
+            startThinkingAnimation(container);
+        }
+    } else {
+        // Stop any animation and set final label
+        if (bubbleElement.dataset.thinkAnimActive === '1') {
+            stopThinkingAnimation(container);
+        } else {
+            headerLabel.textContent = 'Thought Process';
+        }
+    }
+
+    // Update reasoning content (can re-run markdown safely)
+    thoughtContent.innerHTML = renderMarkdown(thought);
+
+    // Update main answer section
+    if (main.trim()) {
+        if (!mainDiv) {
+            mainDiv = document.createElement('div');
+            mainDiv.className = 'main-response';
+            bubbleElement.appendChild(mainDiv);
+        }
+        mainDiv.innerHTML = renderMarkdown(main);
+    } else if (mainDiv) {
+        mainDiv.remove();
+    }
+
+    // Persist preference
+    bubbleElement.dataset.thinkExpanded = expanded ? 'true' : 'false';
+}
+
 function appendMessage(role, text, isMarkdown = false) {
     const div = document.createElement('div');
     div.className = 'chat-message ' + role;
     // Add a bubble for iMessage style
     const bubble = document.createElement('div');
     bubble.className = 'chat-bubble ' + role;
-    
-    if (role === 'llm' && isMarkdown) {
-        bubble.innerHTML = renderMarkdownWithThinkTokens(text);
+
+    // Check if isMarkdown is true, regardless of role
+    if (isMarkdown) {
+        // Build structure via incremental updater (ensures later token updates won’t wipe user toggle)
+        updateMessageContent(bubble, text, true);
     } else {
         bubble.textContent = text;
     }
-    
+
     div.appendChild(bubble);
     chatHistory.appendChild(div);
     chatHistory.scrollTop = chatHistory.scrollHeight;
-    return bubble; // Return the bubble element for streaming updates
+    return bubble;
 }
 
-function updateMessageContent(bubbleElement, text, isMarkdown = false) {
-    if (isMarkdown) {
-        bubbleElement.innerHTML = renderMarkdownWithThinkTokens(text);
+// Display system message based on current state
+function displaySystemMessage() {
+    // Remove existing system message if it exists
+    if (systemMessageElement) {
+        systemMessageElement.remove();
+        systemMessageElement = null;
+    }
+
+    // Don't show system message if there are already user/LLM messages
+    if (messages.length > 0) return;
+
+    let messageText = '';
+
+    // Check if any models are installed
+    const hasInstalledModels = window.installedModels && window.installedModels.size > 0;
+
+    if (!hasInstalledModels) {
+        // No models installed - show first message
+        messageText = `Welcome to Lemonade! To get started:
+1. Head over to the Model Management tab.
+2. Use the 📥Download button to download a model.
+3. Use the 🚀Load button to load the model.
+4. Come back to this tab, and you are ready to chat with the model.`;
+    } else if (!currentLoadedModel) {
+        // Models available but none loaded - show second message
+        messageText = 'Welcome to Lemonade! Choose a model from the dropdown menu below to load it and start chatting.';
+    }
+
+    if (messageText) {
+        const div = document.createElement('div');
+        div.className = 'chat-message system';
+        div.setAttribute('data-system-message', 'true');
+
+        const bubble = document.createElement('div');
+        bubble.className = 'chat-bubble system';
+        bubble.textContent = messageText;
+
+        div.appendChild(bubble);
+        chatHistory.appendChild(div);
+        chatHistory.scrollTop = chatHistory.scrollHeight;
+
+        systemMessageElement = div;
+    }
+}
+
+function toggleThinkTokens(header) {
+    const container = header.parentElement;
+    const content = container.querySelector('.think-tokens-content');
+    const chevron = header.querySelector('.think-tokens-chevron');
+    const bubble = header.closest('.chat-bubble');
+
+    const nowCollapsed = !container.classList.contains('collapsed'); // current (before toggle) expanded?
+    if (nowCollapsed) {
+        // Collapse
+        content.style.display = 'none';
+        chevron.textContent = '▶';
+        container.classList.add('collapsed');
+        if (bubble) bubble.dataset.thinkExpanded = 'false';
     } else {
-        bubbleElement.textContent = text;
+        // Expand
+        content.style.display = 'block';
+        chevron.textContent = '▼';
+        container.classList.remove('collapsed');
+        if (bubble) bubble.dataset.thinkExpanded = 'true';
     }
 }
 
-function renderMarkdownWithThinkTokens(text) {
-    // Check if text contains opening think tag
-    if (text.includes('<think>')) {
-        if (text.includes('</think>')) {
-            // Complete think block - handle as before
-            const thinkMatch = text.match(/<think>(.*?)<\/think>/s);
-            if (thinkMatch) {
-                const thinkContent = thinkMatch[1].trim();
-                const mainResponse = text.replace(/<think>.*?<\/think>/s, '').trim();
-                
-                // Create collapsible structure
-                let html = '';
-                if (thinkContent) {
-                    html += `
-                        <div class="think-tokens-container">
-                            <div class="think-tokens-header" onclick="toggleThinkTokens(this)">
-                                <span class="think-tokens-chevron">▼</span>
-                                <span class="think-tokens-label">Thinking...</span>
-                            </div>
-                            <div class="think-tokens-content">
-                                ${renderMarkdown(thinkContent)}
-                            </div>
-                        </div>
-                    `;
-                }
-                if (mainResponse) {
-                    html += `<div class="main-response">${renderMarkdown(mainResponse)}</div>`;
-                }
-                return html;
+// ---------- Reasoning Parsing (Harmony + <think>) ----------
+
+function parseReasoningBlocks(raw) {
+    if (raw == null) return { main: '', thought: '', isThinking: false };
+    // Added additional Harmony variants: <|channel|>analysis<|channel|>, <|channel|>analysis<|message|>, <|channel|>analysis<|assistant|>
+    const RE_OPEN  = /<think>|<\|channel\|>analysis<\|(channel|message|assistant)\|>/;
+    const RE_CLOSE = /<\/think>|<\|end\|>/;
+
+    let remaining = String(raw);
+    let main = '';
+    let thought = '';
+    let isThinking = false;
+
+    while (true) {
+        const openIdx = remaining.search(RE_OPEN);
+        if (openIdx === -1) {
+            if (isThinking) {
+                thought += remaining;
+            } else {
+                main += remaining;
             }
+            break;
+        }
+
+        // Text before the opener
+        if (isThinking) {
+            thought += remaining.slice(0, openIdx);
         } else {
-            // Partial think block - only opening tag found, still being generated
-            const thinkMatch = text.match(/<think>(.*)/s);
-            if (thinkMatch) {
-                const thinkContent = thinkMatch[1];
-                const beforeThink = text.substring(0, text.indexOf('<think>'));
-                
-                let html = '';
-                if (beforeThink.trim()) {
-                    html += `<div class="main-response">${renderMarkdown(beforeThink)}</div>`;
-                }
-                
-                html += `
-                    <div class="think-tokens-container">
-                        <div class="think-tokens-header" onclick="toggleThinkTokens(this)">
-                            <span class="think-tokens-chevron">▼</span>
-                            <span class="think-tokens-label">Thinking...</span>
-                        </div>
-                        <div class="think-tokens-content">
-                            ${renderMarkdown(thinkContent)}
-                        </div>
-                    </div>
-                `;
-                
-                return html;
-            }
+            main += remaining.slice(0, openIdx);
         }
+
+        // Drop the opener
+        remaining = remaining.slice(openIdx).replace(RE_OPEN, '');
+        isThinking = true;
+
+        const closeIdx = remaining.search(RE_CLOSE);
+        if (closeIdx === -1) {
+            // Still streaming reasoning (no closer yet)
+            thought += remaining;
+            break;
+        }
+
+        // Add reasoning segment up to closer
+        thought += remaining.slice(0, closeIdx);
+        remaining = remaining.slice(closeIdx).replace(RE_CLOSE, '');
+        isThinking = false;
+        // Loop to look for additional reasoning blocks
     }
-    
-    // Fallback to normal markdown rendering
-    return renderMarkdown(text);
+    return { main, thought, isThinking };
+}
+
+function renderMarkdownWithThinkTokens(text, preservedExpanded) {
+    const { main, thought, isThinking } = parseReasoningBlocks(text);
+
+    if (!thought.trim()) {
+        return renderMarkdown(main);
+    }
+
+    // If we have a preserved user preference, honor it. Otherwise default:
+    // open while streaming (original behavior) else collapsed = false.
+    let expanded = (typeof preservedExpanded === 'boolean')
+        ? preservedExpanded
+        : !!isThinking;
+
+    const chevron = expanded ? '▼' : '▶';
+    const label = expanded && isThinking ? 'Thinking...' : (expanded ? 'Thought Process' : 'Thought Process');
+
+    let html = `
+        <div class="think-tokens-container${expanded ? '' : ' collapsed'}">
+            <div class="think-tokens-header" onclick="toggleThinkTokens(this)">
+                <span class="think-tokens-chevron">${chevron}</span>
+                <span class="think-tokens-label">${label}</span>
+            </div>
+            <div class="think-tokens-content" style="display:${expanded ? 'block' : 'none'};">
+                ${renderMarkdown(thought)}
+            </div>
+        </div>
+    `;
+    if (main.trim()) {
+        html += `<div class="main-response">${renderMarkdown(main)}</div>`;
+    }
+    return html;
+}
+
+function extractAssistantReasoning(fullText) {
+    const { main, thought } = parseReasoningBlocks(fullText);
+    const result = { content: (main || '').trim(), raw: fullText };
+    if (thought && thought.trim()) result.reasoning_content = thought.trim();
+    return result;
 }
 
+// -----------------------------------------------------------
+
 function toggleThinkTokens(header) {
     const container = header.parentElement;
     const content = container.querySelector('.think-tokens-content');
     const chevron = header.querySelector('.think-tokens-chevron');
-    
-    if (content.style.display === 'none') {
-        content.style.display = 'block';
-        chevron.textContent = '▼';
-        container.classList.remove('collapsed');
-    } else {
+    const bubble = header.closest('.chat-bubble');
+
+    const nowCollapsed = !container.classList.contains('collapsed'); // current (before toggle) expanded?
+    if (nowCollapsed) {
+        // Collapse
         content.style.display = 'none';
         chevron.textContent = '▶';
         container.classList.add('collapsed');
+        if (bubble) bubble.dataset.thinkExpanded = 'false';
+    } else {
+        // Expand
+        content.style.display = 'block';
+        chevron.textContent = '▼';
+        container.classList.remove('collapsed');
+        if (bubble) bubble.dataset.thinkExpanded = 'true';
+    }
+}
+
+function startThinkingAnimation(container) {
+    const bubble = container.closest('.chat-bubble');
+    if (!bubble || bubble.dataset.thinkAnimActive === '1') return;
+    const labelEl = container.querySelector('.think-tokens-label');
+    if (!labelEl) return;
+    bubble.dataset.thinkAnimActive = '1';
+    let i = 0;
+    const update = () => {
+        // If streaming ended mid-cycle, stop.
+        if (bubble.dataset.thinkAnimActive !== '1') return;
+        labelEl.textContent = THINKING_FRAMES[i % THINKING_FRAMES.length];
+        i++;
+        bubble.dataset.thinkAnimId = String(setTimeout(update, THINKING_ANIM_INTERVAL_MS));
+    };
+    update();
+}
+
+function stopThinkingAnimation(container, finalLabel = 'Thought Process') {
+    const bubble = container.closest('.chat-bubble');
+    if (!bubble) return;
+    bubble.dataset.thinkAnimActive = '0';
+    const id = bubble.dataset.thinkAnimId;
+    if (id) {
+        clearTimeout(Number(id));
+        delete bubble.dataset.thinkAnimId;
     }
+    const labelEl = container.querySelector('.think-tokens-label');
+    if (labelEl) labelEl.textContent = finalLabel;
 }
 
-async function sendMessage() {
-    const text = chatInput.value.trim();
+async function sendMessage(existingTextIfAny) {
+    const text = (existingTextIfAny !== undefined ? existingTextIfAny : chatInput.value.trim());
     if (!text && attachedFiles.length === 0) return;
-    
+
+    // Remove system message when user starts chatting
+    if (systemMessageElement) {
+        systemMessageElement.remove();
+        systemMessageElement = null;
+    }
+
     // Check if a model is loaded, if not, automatically load the default model
     if (!currentLoadedModel) {
         const allModels = window.SERVER_MODELS || {};
-        
+
         if (allModels[DEFAULT_MODEL]) {
             try {
                 // Show loading message
                 const loadingBubble = appendMessage('system', 'Loading default model, please wait...');
-                
+
                 // Load the default model
                 await httpRequest(getServerBaseUrl() + '/api/v1/load', {
                     method: 'POST',
                     headers: { 'Content-Type': 'application/json' },
                     body: JSON.stringify({ model_name: DEFAULT_MODEL })
                 });
-                
+
                 // Update model status
                 await updateModelStatusIndicator();
-                
+
                 // Remove loading message
                 loadingBubble.parentElement.remove();
-                
+
                 // Show success message briefly
                 const successBubble = appendMessage('system', `Loaded ${DEFAULT_MODEL} successfully!`);
-                setTimeout(() => {
-                    successBubble.parentElement.remove();
-                }, 2000);
-                
+                setTimeout(() => { successBubble.parentElement.remove(); }, 2000);
             } catch (error) {
                 alert('Please load a model first before sending messages.');
                 return;
@@ -578,26 +821,21 @@ async function sendMessage() {
             return;
         }
     }
-    
+
     // Check if trying to send images to non-vision model
-    if (attachedFiles.length > 0) {
-        if (!isVisionModel(currentLoadedModel)) {
-            alert(`Cannot send images to model "${currentLoadedModel}" as it does not support vision. Please load a model with "Vision" capabilities or remove the attached images.`);
-            return;
-        }
+    if (attachedFiles.length > 0 && !isVisionModel(currentLoadedModel)) {
+        alert(`Cannot send images to model "${currentLoadedModel}" as it does not support vision. Please load a model with "Vision" capabilities or remove the attached images.`);
+        return;
     }
-    
+
     // Create message content
     let messageContent = [];
-    
+
     // Add text if present
     if (text) {
-        messageContent.push({
-            type: "text",
-            text: text
-        });
+        messageContent.push({ type: "text", text: text });
     }
-    
+
     // Add images if present
     if (attachedFiles.length > 0) {
         for (const file of attachedFiles) {
@@ -606,9 +844,7 @@ async function sendMessage() {
                     const base64 = await fileToBase64(file);
                     messageContent.push({
                         type: "image_url",
-                        image_url: {
-                            url: `data:${file.type};base64,${base64}`
-                        }
+                        image_url: { url: `data:${file.type};base64,${base64}` }
                     });
                 } catch (error) {
                     console.error('Error converting image to base64:', error);
@@ -616,25 +852,25 @@ async function sendMessage() {
             }
         }
     }
-    
+
     // Display user message (show text and file names)
     let displayText = text;
     if (attachedFiles.length > 0) {
         const fileNames = attachedFiles.map(f => f.name || 'pasted-image').join(', ');
         displayText = displayText ? `${displayText}\n[Images: ${fileNames}]` : `[Images: ${fileNames}]`;
     }
-    
-    appendMessage('user', displayText);
-    
+
+    appendMessage('user', displayText, true);
+
     // Add to messages array
     const userMessage = {
         role: 'user',
-        content: messageContent.length === 1 && messageContent[0].type === "text" 
-            ? messageContent[0].text 
+        content: messageContent.length === 1 && messageContent[0].type === "text"
+            ? messageContent[0].text
             : messageContent
     };
     messages.push(userMessage);
-    
+
     // Clear input and attachments
     chatInput.value = '';
     attachedFiles = [];
@@ -643,7 +879,7 @@ async function sendMessage() {
     updateAttachmentPreviewVisibility(); // Hide preview container
     updateAttachmentPreviews(); // Clear previews
     sendBtn.disabled = true;
-    
+
     // Streaming OpenAI completions (placeholder, adapt as needed)
     let llmText = '';
     const llmBubble = appendMessage('llm', '...');
@@ -651,14 +887,14 @@ async function sendMessage() {
         // Use the correct endpoint for chat completions with model settings
         const modelSettings = getCurrentModelSettings ? getCurrentModelSettings() : {};
         console.log('Applying model settings to API request:', modelSettings);
-        
+
         const payload = {
             model: currentLoadedModel,
             messages: messages,
             stream: true,
             ...modelSettings // Apply current model settings
         };
-        
+
         const resp = await httpRequest(getServerBaseUrl() + '/api/v1/chat/completions', {
             method: 'POST',
             headers: { 'Content-Type': 'application/json' },
@@ -668,59 +904,124 @@ async function sendMessage() {
         const reader = resp.body.getReader();
         let decoder = new TextDecoder();
         llmBubble.textContent = '';
+
+        const reasoningEnabled = (() => {
+            try {
+                const meta = window.SERVER_MODELS?.[currentLoadedModel];
+                return Array.isArray(meta?.labels) && meta.labels.includes('reasoning');
+            } catch (_) { return false; }
+        })();
+
+        let thinkOpened = false;
+        let thinkClosed = false;
+        let reasoningSchemaActive = false;     // true if we saw delta.reasoning object
+        let receivedAnyReasoning = false;      // true once any reasoning (schema or reasoning_content) arrived
+
         while (true) {
             const { done, value } = await reader.read();
             if (done) break;
             const chunk = decoder.decode(value);
-            if (chunk.trim() === 'data: [DONE]' || chunk.trim() === '[DONE]') continue;
-            
+            if (!chunk.trim()) continue;
+
             // Handle Server-Sent Events format
             const lines = chunk.split('\n');
-            for (const line of lines) {
-                if (line.startsWith('data: ')) {
-                    const jsonStr = line.substring(6).trim();
-                    if (jsonStr === '[DONE]') continue;
-                    
-                    try {
-                        const delta = JSON.parse(jsonStr);
-                        if (delta.choices && delta.choices[0] && delta.choices[0].delta) {
-                            const content = delta.choices[0].delta.content;
-                            if (content) {
-                                llmText += unescapeJsonString(content);
-                                updateMessageContent(llmBubble, llmText, true);
-                                chatHistory.scrollTop = chatHistory.scrollHeight;
+            for (const rawLine of lines) {
+                if (!rawLine.startsWith('data: ')) continue;
+                const jsonStr = rawLine.slice(6).trim();
+                if (!jsonStr || jsonStr === '[DONE]') continue;
+
+                let deltaObj;
+                try { deltaObj = JSON.parse(jsonStr); } catch { continue; }
+                const choiceDelta = deltaObj?.choices?.[0]?.delta;
+                if (!choiceDelta) continue;
+
+                // 1. OpenAI reasoning object (preferred schema)
+                if (choiceDelta.reasoning && !thinkClosed) {
+                    reasoningSchemaActive = true;
+                    const r = choiceDelta.reasoning;
+                    if (!thinkOpened) {
+                        llmText += '<think>';
+                        thinkOpened = true;
+                    }
+                    if (Array.isArray(r.content)) {
+                        for (const seg of r.content) {
+                            if (seg?.type === 'output_text' && seg.text) {
+                                llmText += unescapeJsonString(seg.text);
+                                receivedAnyReasoning = true;
                             }
                         }
-                    } catch (parseErr) {
-                        console.warn('Failed to parse JSON:', jsonStr, parseErr);
+                    }
+                    if (r.done && !thinkClosed) {
+                        llmText += '</think>';
+                        thinkClosed = true;
                     }
                 }
+
+                // 2. llama.cpp style: reasoning_content (string fragments)
+                if (choiceDelta.reasoning_content && !thinkClosed) {
+                    if (!thinkOpened) {
+                        llmText += '<think>';
+                        thinkOpened = true;
+                    }
+                    llmText += unescapeJsonString(choiceDelta.reasoning_content);
+                    receivedAnyReasoning = true;
+                    // We DO NOT close yet; we’ll close when first normal content arrives.
+                }
+
+                // 3. Plain content tokens
+                if (choiceDelta.content) {
+                    let c = unescapeJsonString(choiceDelta.content);
+
+                    // If we are inside reasoning (opened, not closed) and this is the first visible answer token,
+                    // close the reasoning block before appending (unless model already emitted </think> itself).
+                    if (thinkOpened && !thinkClosed) {
+                        if (c.startsWith('</think>')) {
+                            // Model closed it explicitly; strip that tag and mark closed
+                            c = c.replace(/^<\/think>\s*/, '');
+                            thinkClosed = true;
+                        } else {
+                            // Close ourselves (covers reasoning_content path & schema early content anomaly)
+                            if (receivedAnyReasoning || reasoningEnabled) {
+                                llmText += '</think>';
+                                thinkClosed = true;
+                            }
+                        }
+                    }
+
+                    // If content stream itself begins a new reasoning section (rare), handle gracefully
+                    if (!thinkOpened && /<think>/.test(c)) {
+                        thinkOpened = true;
+                        const parts = c.split(/<think>/);
+                        // parts[0] is anything before accidental <think>, treat as normal visible content
+                        llmText += parts[0];
+                        // Everything after opener treated as reasoning until a closing tag or we decide to close
+                        llmText += '<think>' + parts.slice(1).join('<think>');
+                        receivedAnyReasoning = true;
+                        updateMessageContent(llmBubble, llmText, true);
+                        chatHistory.scrollTop = chatHistory.scrollHeight;
+                        continue;
+                    }
+
+                    llmText += c;
+                }
+
+                updateMessageContent(llmBubble, llmText, true);
+                chatHistory.scrollTop = chatHistory.scrollHeight;
             }
         }
-        if (!llmText) throw new Error('No response');
-        
-        // Split assistant response into content and reasoning_content so llama.cpp's Jinja does not need to parse <think> tags
-        function splitAssistantResponse(text) {
-            const THINK_OPEN = '<think>';
-            const THINK_CLOSE = '</think>';
-            const result = { content: text };
-            const start = text.indexOf(THINK_OPEN);
-            const end = text.indexOf(THINK_CLOSE);
-            if (start !== -1 && end !== -1 && end > start) {
-                const reasoning = text.substring(start + THINK_OPEN.length, end).trim();
-                const visible = (text.substring(0, start) + text.substring(end + THINK_CLOSE.length)).trim();
-                if (reasoning) result.reasoning_content = reasoning;
-                result.content = visible;
-            }
-            return result;
+
+        // Final safety close (e.g., model stopped mid-reasoning)
+        if (thinkOpened && !thinkClosed) {
+            llmText += '</think>';
         }
 
-        const assistantMsg = splitAssistantResponse(llmText);
+        const assistantMsg = extractAssistantReasoning(llmText);
         messages.push({ role: 'assistant', ...assistantMsg });
+
     } catch (e) {
         let detail = e.message;
         try {
-            const errPayload = { ...payload, stream: false };
+            const errPayload = { model: currentLoadedModel, messages: messages, stream: false };
             const errResp = await httpJson(getServerBaseUrl() + '/api/v1/chat/completions', {
                 method: 'POST',
                 headers: { 'Content-Type': 'application/json' },
@@ -732,4 +1033,6 @@ async function sendMessage() {
         showErrorBanner(`Chat error: ${detail}`);
     }
     sendBtn.disabled = false;
-}
+    // Force a final render to trigger stop animation if needed
+    updateMessageContent(llmBubble, llmText, true);
+}