@pheem49/mint 1.5.0 → 1.5.2

package/src/UI/renderer.js

@@ -11,6 +11,9 @@ const visionBtn = document.getElementById('vision-btn');
 const imagePreviewContainer = document.getElementById('image-preview-container');
 const imagePreview = document.getElementById('image-preview');
 const removeImageBtn = document.getElementById('remove-image-btn');
+const modelMount = document.getElementById('model-mount');
+const modelShell = document.getElementById('model-shell');
+const modelStatus = document.getElementById('model-status');
 
 // Proactive Assistant elements
 const proactiveBar = document.getElementById('proactive-bar');
@@ -24,6 +27,31 @@ let ttsProvider = 'google';
 let ttsVolume = 1.0;
 let ttsSpeed = 1.0;
 let ttsPitch = 1.0;
+let lastConversationLanguage = 'auto';
+
+function detectConversationLanguage(text) {
+    const value = String(text || '');
+    if (/[\u0E00-\u0E7F]/.test(value)) return 'thai';
+    if (/[A-Za-z]/.test(value)) return 'english';
+    return 'auto';
+}
+
+function rememberConversationLanguage(text) {
+    const detected = detectConversationLanguage(text);
+    if (detected !== 'auto') {
+        lastConversationLanguage = detected;
+    }
+}
+
+function buildInteractionLanguageInstruction() {
+    if (lastConversationLanguage === 'thai') {
+        return 'Current conversation language: Thai. Reply in Thai. Do not reply in English just because this interaction instruction is written in English.';
+    }
+    if (lastConversationLanguage === 'english') {
+        return 'Current conversation language: English. Reply in English. Do not switch to Thai.';
+    }
+    return 'Infer the reply language from the recent conversation before this interaction instruction, not from the language of this instruction.';
+}
 
 // --- Theme Loading ---
 function applyTheme(theme, accentColor, systemTextColor, config = {}) {
@@ -392,11 +420,17 @@ let currentAudioPlayer = null;
 
 function speakText(text, options = {}) {
     if (window.api && window.api.setAiState) window.api.setAiState('speaking');
-    const onEnd = typeof options.onEnd === 'function' ? options.onEnd : null;
+    const onEnd = typeof options.onEnd === 'function' ? options.onEnd : () => {};
+    
+    const wrappedOnEnd = () => {
+        if (window.Live2DManager) Live2DManager.stopLipSync();
+        onEnd();
+    };
+
     return new Promise(async (resolve) => {
         if (!enableVoiceReply) {
             if (window.api && window.api.setAiState) window.api.setAiState('idle');
-            if (onEnd) onEnd();
+            wrappedOnEnd();
             return resolve();
         }
 
@@ -406,16 +440,20 @@ function speakText(text, options = {}) {
             currentAudioPlayer.currentTime = 0;
             currentAudioPlayer = null;
         }
+        if (window.Live2DManager) Live2DManager.stopLipSync();
+
         if ('speechSynthesis' in window) {
             window.speechSynthesis.cancel();
         }
 
         if (!text || !text.trim()) {
             if (window.api && window.api.setAiState) window.api.setAiState('idle');
-            if (onEnd) onEnd();
+            wrappedOnEnd();
             return resolve();
         }
 
+        if (window.Live2DManager) Live2DManager.startLipSync();
+
         try {
             if (ttsProvider !== 'native') {
                 const urls = await window.api.getTtsUrls(text);
@@ -424,7 +462,7 @@ function speakText(text, options = {}) {
                     const playNext = () => {
                         if (i >= urls.length) {
                             if (window.api && window.api.setAiState) window.api.setAiState('idle');
-                            if (onEnd) onEnd();
+                            wrappedOnEnd();
                             return resolve();
                         }
                         const audio = new Audio(urls[i].url);
@@ -443,7 +481,7 @@ function speakText(text, options = {}) {
                         };
                         audio.play().catch(e => {
                             console.error("Audio playback prevented:", e);
-                            fallbackSpeak(text, onEnd, resolve);
+                            fallbackSpeak(text, wrappedOnEnd, resolve);
                         });
                     };
                     playNext();
@@ -455,7 +493,7 @@ function speakText(text, options = {}) {
         }
 
         // Fallback
-        fallbackSpeak(text, onEnd, resolve);
+        fallbackSpeak(text, wrappedOnEnd, resolve);
     });
 }
 
@@ -566,6 +604,95 @@ function formatProviderInfo(providerInfo) {
     return model ? `${provider || 'AI'} • ${model}` : provider;
 }
 
+function splitListOutro(text) {
+    const value = String(text || '').trim();
+    const markers = [
+        ' คุณภีมอยาก',
+        ' อยากให้',
+        ' อยากดู',
+        ' บอกมิ้นท์',
+        ' Would you',
+        ' Do you want',
+        ' Tell me'
+    ];
+
+    for (const marker of markers) {
+        const index = value.indexOf(marker);
+        if (index > 60) {
+            return {
+                main: value.slice(0, index).trim(),
+                outro: value.slice(index).trim()
+            };
+        }
+    }
+
+    return { main: value, outro: '' };
+}
+
+function buildAiTextBlocks(text) {
+    const normalized = normalizeAiText(text).replace(/\r\n/g, '\n').trim();
+    if (!normalized) return [];
+
+    const readable = normalized
+        .replace(/\s+(\d+)[.)]\s+/g, '\n$1. ')
+        .replace(/\n{3,}/g, '\n\n');
+
+    const blocks = [];
+    const lines = readable.split(/\n+/).map(line => line.trim()).filter(Boolean);
+
+    for (const line of lines) {
+        const numbered = line.match(/^\d+[.)]\s+(.+)$/);
+        const bullet = line.match(/^[-*•]\s+(.+)$/);
+
+        if (numbered || bullet) {
+            const content = numbered ? numbered[1] : bullet[1];
+            const { main, outro } = splitListOutro(content);
+            blocks.push({ type: 'bullet', text: main });
+            if (outro) blocks.push({ type: 'paragraph', text: outro });
+        } else {
+            blocks.push({ type: 'paragraph', text: line });
+        }
+    }
+
+    return blocks;
+}
+
+function appendFormattedMessageText(bubble, text, sender) {
+    if (sender !== 'ai') {
+        const textSpan = document.createElement('span');
+        textSpan.textContent = text;
+        bubble.appendChild(textSpan);
+        return;
+    }
+
+    const blocks = buildAiTextBlocks(text);
+    if (blocks.length === 0) return;
+
+    const wrapper = document.createElement('div');
+    wrapper.classList.add('formatted-ai-text');
+
+    for (const block of blocks) {
+        const item = document.createElement(block.type === 'bullet' ? 'div' : 'p');
+        item.classList.add(block.type === 'bullet' ? 'ai-list-item' : 'ai-paragraph');
+
+        if (block.type === 'bullet') {
+            const bullet = document.createElement('span');
+            bullet.classList.add('ai-list-bullet');
+            bullet.textContent = '•';
+            const content = document.createElement('span');
+            content.textContent = block.text;
+            item.appendChild(bullet);
+            item.appendChild(content);
+        } else {
+            item.textContent = block.text;
+        }
+
+        wrapper.appendChild(item);
+    }
+
+    bubble.appendChild(wrapper);
+}
+
 function appendMessage(text, sender, base64Image = null, timestamp = null, options = {}) {
     const messageDiv = document.createElement('div');
     messageDiv.classList.add('message', `${sender}-message`);
@@ -587,9 +714,7 @@ function appendMessage(text, sender, base64Image = null, timestamp = null, optio
     }
 
     if (text) {
-        const textSpan = document.createElement('span');
-        textSpan.textContent = text;
-        bubble.appendChild(textSpan);
+        appendFormattedMessageText(bubble, text, sender);
     }
 
     bubbleWrapper.appendChild(bubble);
@@ -635,6 +760,9 @@ function normalizeAiText(input) {
 function splitAiMessages(text) {
     const normalized = normalizeAiText(text).trim();
     if (!normalized) return [];
+    if (/(^|\s)\d+[.)]\s+/.test(normalized) || /(^|\n)\s*[-*•]\s+/.test(normalized)) {
+        return [normalized];
+    }
     const byBlankLine = normalized
         .split(/\n\s*\n/)
         .map((part) => part.trim())
@@ -756,14 +884,52 @@ function scrollToBottom() {
     chatContainer.scrollTop = chatContainer.scrollHeight;
 }
 
+function loadScript(src) {
+    return new Promise((resolve, reject) => {
+        if (document.querySelector(`script[src="${src}"]`)) {
+            resolve();
+            return;
+        }
+        const script = document.createElement('script');
+        script.src = src;
+        script.onload = resolve;
+        script.onerror = () => reject(new Error(`Failed to load script: ${src}`));
+        document.body.appendChild(script);
+    });
+}
+
+async function loadLive2DWhenIdle() {
+    if (!modelMount || window.Live2DManager) return;
+    try {
+        await loadScript('../../node_modules/@hazart-pkg/live2d-core/live2dcubismcore.min.js');
+        await loadScript('../../node_modules/pixi.js/dist/browser/pixi.min.js');
+        await loadScript('../../node_modules/pixi-live2d-display/dist/cubism4.min.js');
+        await loadScript('live2d_manager.js');
+        if (window.Live2DManager) {
+            await Live2DManager.loadModel(modelMount, modelStatus, modelShell);
+        }
+    } catch (err) {
+        console.error('[Live2D] Deferred load failed:', err);
+        if (modelStatus) {
+            modelStatus.classList.add('is-error');
+            modelStatus.textContent = 'Live2D model unavailable.';
+        }
+    }
+}
+
 async function loadChatHistory() {
     try {
         const history = await window.api.getChatHistory();
+        const initial = chatContainer.querySelector('.message.initial');
+        
         if (!Array.isArray(history) || history.length === 0) {
+            if (initial) {
+                initial.style.display = 'flex';
+                initial.style.opacity = '1';
+            }
             return;
         }
 
-        const initial = chatContainer.querySelector('.message.initial');
         if (initial) {
             initial.remove();
         }
@@ -771,11 +937,12 @@ async function loadChatHistory() {
         for (const item of history) {
             if (!item || typeof item.text !== 'string' || !item.text.trim()) continue;
             const sender = item.sender === 'user' ? 'user' : 'ai';
-            if (sender === 'ai') {
-                await appendAiMessages(item.text, { allowDelay: false, timestamp: item.timestamp, providerInfo: item.providerInfo });
-            } else {
-                appendMessage(item.text, sender, null, item.timestamp);
+            if (sender === 'user' && !String(item.text).startsWith('Model interaction:')) {
+                rememberConversationLanguage(item.text);
             }
+            appendMessage(item.text, sender, null, item.timestamp, {
+                providerInfo: sender === 'ai' ? item.providerInfo : null
+            });
         }
     } catch (error) {
         console.error('Failed to load chat history:', error);
@@ -785,23 +952,31 @@ async function loadChatHistory() {
 async function sendTextMessage(text, options = {}) {
     const cleanText = (text || '').trim();
     const allowSmartContext = options.allowSmartContext !== false;
+    const includePendingImage = options.includePendingImage !== false;
+    const displayText = options.displayText !== undefined ? options.displayText : cleanText;
+    const trackLanguage = options.trackLanguage !== false;
 
     // We can send either a text message, an image, or both.
-    if (!cleanText && !currentBase64Image) return;
+    if (!cleanText && (!includePendingImage || !currentBase64Image)) return;
 
     // Cache the image for sending and UI, then clear
-    let imageToSend = currentBase64Image;
+    let imageToSend = includePendingImage ? currentBase64Image : null;
 
     // Clear input & UI for explicit images
     chatInput.value = '';
-    currentBase64Image = null;
-    imagePreviewContainer.style.display = 'none';
-    imagePreview.src = '';
+    if (includePendingImage) {
+        currentBase64Image = null;
+        imagePreviewContainer.style.display = 'none';
+        imagePreview.src = '';
+    }
 
     const now = new Date().toISOString();
 
     // Show user message (with explicit image if available)
-    appendMessage(cleanText, 'user', imageToSend, now);
+    appendMessage(displayText, 'user', imageToSend, now);
+    if (trackLanguage) {
+        rememberConversationLanguage(displayText || cleanText);
+    }
 
     // Show typing early so user knows we are processing
     showTyping();
@@ -846,7 +1021,9 @@ async function sendTextMessage(text, options = {}) {
             } else {
                 // General system info (date, time, RAM, CPU)
                 const info = await window.api.getSystemInfo();
-                response.response += `\n\n📅 วันนี้: ${info.date}\n⏰ เวลา: ${info.time}\n💻 RAM: ${info.ram.used} / ${info.ram.total} (${info.ram.percent})`;
+                const machine = info.machine && info.machine.display ? `\n🖥️ รุ่นเครื่อง: ${info.machine.display}` : '';
+                const distro = info.distro ? `\nระบบ: ${info.distro}` : '';
+                response.response += `\n\n📅 วันนี้: ${info.date}\n⏰ เวลา: ${info.time}${machine}${distro}\n💻 CPU: ${info.cpu.model} (${info.cpu.cores} คอร์)\n💻 RAM: ${info.ram.used} / ${info.ram.total} (${info.ram.percent})`;
             }
         }
 
@@ -880,6 +1057,20 @@ chatForm.addEventListener('submit', throttle(async (e) => {
     await sendTextMessage(text);
 }, 500));
 
+window.addEventListener('live2d-model-interaction', async (event) => {
+    const prompt = event?.detail?.prompt;
+    if (!prompt) return;
+    if (window.api && window.api.setAiState) window.api.setAiState('thinking');
+    const interactionPrompt = `${prompt}\n\n${buildInteractionLanguageInstruction()}`;
+    const displayPrefix = lastConversationLanguage === 'thai' ? 'แตะโมเดล' : 'Model interaction';
+    await sendTextMessage(interactionPrompt, {
+        allowSmartContext: false,
+        includePendingImage: false,
+        trackLanguage: false,
+        displayText: `${displayPrefix}: ${event.detail.label || event.detail.region || 'Interaction'}`
+    });
+});
+
 // --- Image Paste and Drag-n-Drop Support ---
 function handleImageFile(file) {
     if (!file || !file.type.startsWith('image/')) return;
@@ -936,6 +1127,8 @@ window.addEventListener('DOMContentLoaded', async () => {
     chatInput.focus();
     await loadTheme();
     await loadChatHistory();
+    const scheduleLive2DLoad = window.requestIdleCallback || ((callback) => setTimeout(callback, 750));
+    scheduleLive2DLoad(() => loadLive2DWhenIdle());
 });
 
 // Proactive OS Notifications (Battery, Network, etc.)
@@ -1028,6 +1221,131 @@ if (smartContextToggle) {
     });
 }
 
+// Toggle Live2D Model visibility
+const toggleModelBtn = document.getElementById('toggle-model-btn');
+const assistantWorkspace = document.querySelector('.assistant-workspace');
+
+if (toggleModelBtn && assistantWorkspace) {
+    toggleModelBtn.addEventListener('click', () => {
+        const isHidden = assistantWorkspace.classList.toggle('model-hidden');
+        toggleModelBtn.classList.toggle('active', isHidden);
+        
+        // Save preference to local storage
+        localStorage.setItem('mint-model-hidden', String(isHidden));
+        
+        // Refit model if shown
+        if (!isHidden && window.Live2DManager && Live2DManager.model) {
+            // Wait for transition
+            setTimeout(() => {
+                // Trigger a resize event to refit
+                window.dispatchEvent(new Event('resize'));
+            }, 450);
+        }
+    });
+
+    // Restore preference on load
+    const savedModelHidden = localStorage.getItem('mint-model-hidden');
+    const savedHidden = savedModelHidden === null || savedModelHidden === 'true';
+    if (savedHidden) {
+        assistantWorkspace.classList.add('model-hidden');
+        toggleModelBtn.classList.add('active');
+    }
+}
+
+// Cycle Shiroko's Expression
+const changeExpressionBtn = document.getElementById('change-expression-btn');
+if (changeExpressionBtn) {
+    changeExpressionBtn.addEventListener('click', () => {
+        if (window.Live2DManager) {
+            Live2DManager.cycleExpression();
+        }
+    });
+}
+
+// Cycle Live2D accessories
+const accessoryStorageKey = 'mint-live2d-accessories';
+const accessoryCycleBtn = document.getElementById('accessory-cycle-btn');
+const accessoryCycleLabel = document.getElementById('accessory-cycle-label');
+const accessoryCycleOrder = [null, 'glasses', 'pen', 'cat'];
+const accessoryLabels = {
+    glasses: 'Glasses',
+    pen: 'Pen',
+    cat: 'Cat'
+};
+let savedAccessories = {};
+try {
+    savedAccessories = JSON.parse(localStorage.getItem(accessoryStorageKey) || '{}') || {};
+} catch (_) {
+    savedAccessories = {};
+}
+
+const getSavedAccessoryId = () => accessoryCycleOrder.find(id => id && savedAccessories[id] === true) || null;
+
+function updateAccessoryCycleButton(accessoryId) {
+    if (!accessoryCycleBtn) return;
+    const isActive = Boolean(accessoryId);
+    const label = accessoryId ? accessoryLabels[accessoryId] : 'Accessory';
+    accessoryCycleBtn.classList.toggle('active', isActive);
+    accessoryCycleBtn.setAttribute('aria-pressed', String(isActive));
+    accessoryCycleBtn.title = `Accessory: ${label}`;
+    if (accessoryCycleLabel) accessoryCycleLabel.textContent = label;
+}
+
+let currentAccessoryId = getSavedAccessoryId();
+updateAccessoryCycleButton(currentAccessoryId);
+
+if (accessoryCycleBtn) {
+    accessoryCycleBtn.addEventListener('click', () => {
+        const currentIndex = accessoryCycleOrder.indexOf(currentAccessoryId);
+        currentAccessoryId = accessoryCycleOrder[(currentIndex + 1) % accessoryCycleOrder.length];
+        updateAccessoryCycleButton(currentAccessoryId);
+
+        if (window.Live2DManager) {
+            Live2DManager.setExclusiveAccessory(currentAccessoryId, true);
+        } else {
+            savedAccessories = {};
+            if (currentAccessoryId) savedAccessories[currentAccessoryId] = true;
+            localStorage.setItem(accessoryStorageKey, JSON.stringify(savedAccessories));
+        }
+    });
+}
+
+// Toggle Live2D model interaction
+const toggleInteractionBtn = document.getElementById('toggle-interaction-btn');
+if (toggleInteractionBtn) {
+    const savedInteractionEnabled = localStorage.getItem('mint-model-interaction-enabled') !== 'false';
+    toggleInteractionBtn.classList.toggle('active', savedInteractionEnabled);
+    toggleInteractionBtn.setAttribute('aria-pressed', String(savedInteractionEnabled));
+    if (window.Live2DManager) {
+        Live2DManager.setInteractionEnabled(savedInteractionEnabled);
+    }
+
+    toggleInteractionBtn.addEventListener('click', () => {
+        const isEnabled = !toggleInteractionBtn.classList.contains('active');
+        toggleInteractionBtn.classList.toggle('active', isEnabled);
+        toggleInteractionBtn.setAttribute('aria-pressed', String(isEnabled));
+        if (window.Live2DManager) {
+            Live2DManager.setInteractionEnabled(isEnabled, true);
+        } else {
+            localStorage.setItem('mint-model-interaction-enabled', String(isEnabled));
+        }
+    });
+}
+
+// Toggle Live2D interaction area guide
+const interactionGuideBtn = document.getElementById('interaction-guide-btn');
+if (interactionGuideBtn && modelShell) {
+    const savedGuideVisible = localStorage.getItem('mint-interaction-guide-visible') === 'true';
+    modelShell.classList.toggle('show-interaction-guide', savedGuideVisible);
+    interactionGuideBtn.classList.toggle('active', savedGuideVisible);
+
+    interactionGuideBtn.addEventListener('click', () => {
+        const isVisible = modelShell.classList.toggle('show-interaction-guide');
+        interactionGuideBtn.classList.toggle('active', isVisible);
+        localStorage.setItem('mint-interaction-guide-visible', String(isVisible));
+    });
+}
+
 // Spotlight integration
 window.api.onSpotlightToChat((query) => {
     chatInput.value = query;