Update index.html

index.html

@@ -340,36 +340,130 @@ class RobotFace {
         this.blinkProgress = 1; this.isBlinking = false; this.lastBlinkTime = Date.now();
         this.isSleeping = true; this.lastInteractionTime = Date.now(); this.sleepTimeout = 10000;
         this.isWatchingInput = false; this.isThinking = false;
-        this.readingOscillation = 0; this.thinkingInterval = null;
+        this.readingOscillation = 0;
+        
+        // --- State variables for new animations ---
+        this.thinkingStartTime = 0;
+        this.leftEyeScale = 1;
+        this.rightEyeScale = 1;
+
+        this.isFocusing = false;
+        this.focusProgress = 0;
+        this.focusEye = 'left';
+        this.lastFocusTime = Date.now();
+        this.nextFocusDelay = 4000 + Math.random() * 3000;
+
         this.initInteractions(); requestAnimationFrame(this.render.bind(this));
     }
+
     render() {
         this.lookX += (this.targetLookX - this.lookX) * 0.1;
         this.lookY += (this.targetLookY - this.lookY) * 0.1;
         this.ctx.clearRect(0, 0, this.W, this.H); this.drawFaceplate();
         const now = Date.now();
-        if (this.isSleeping) { this.drawSleepEyes(); } else {
+
+        if (this.isSleeping) {
+            this.drawSleepEyes();
+        } else {
+            // --- Animation Logic ---
+            const isIdle = !this.isThinking && !this.isWatchingInput && !this.isBlinking && !this.isFocusing;
+
+            if (this.isThinking) {
+                const elapsed = now - this.thinkingStartTime;
+                const oscillation = Math.sin(elapsed / 300); // Speed of thinking animation
+                const scaleAmount = 0.3; // How much the eye scales
+                this.leftEyeScale = 1 - (scaleAmount * (oscillation + 1) / 2);
+                this.rightEyeScale = 1 - (scaleAmount * (-oscillation + 1) / 2);
+            } else {
+                // Reset scale if not thinking
+                this.leftEyeScale = 1;
+                this.rightEyeScale = 1;
+            }
+
             if (this.isWatchingInput) {
                 this.targetLookY = 25; this.readingOscillation += 0.1;
                 this.targetLookX = Math.sin(this.readingOscillation) * 10;
             }
-            if (!this.isThinking && !this.isWatchingInput && now - this.lastInteractionTime > this.sleepTimeout) { this.isSleeping = true; }
-            if (!this.isBlinking && !this.isThinking && now - this.lastBlinkTime > 3000 + Math.random() * 2000) { this.blink(); }
+
+            if (isIdle && now - this.lastInteractionTime > this.sleepTimeout) { this.isSleeping = true; }
+            if (isIdle && now - this.lastBlinkTime > 3000 + Math.random() * 2000) { this.blink(); }
+            if (isIdle && now - this.lastFocusTime > this.nextFocusDelay) { this.startFocus(); }
+            
             this.drawExpression();
         }
         requestAnimationFrame(this.render.bind(this));
     }
+
+    drawExpression() {
+        const eW = 100, eH = 100, eR = 30, eY = this.H / 2 + this.lookY;
+        const lCX = this.W * 0.3 + this.lookX, rCX = this.W * 0.7 + this.lookX;
+
+        let finalLeftScale = this.leftEyeScale;
+        let finalRightScale = this.rightEyeScale;
+
+        if (this.isFocusing) {
+            const scale = 1 - (1 - 0.65) * this.focusProgress;
+            if (this.focusEye === 'left') {
+                finalLeftScale = scale;
+            } else {
+                finalRightScale = scale;
+            }
+        }
+        
+        const lW = eW * finalLeftScale;
+        const lH = eH * this.blinkProgress * finalLeftScale;
+        const rW = eW * finalRightScale;
+        const rH = eH * this.blinkProgress * finalRightScale;
+
+        this.drawEye(lCX, eY, lW, lH, eR);
+        this.drawEye(rCX, eY, rW, rH, eR);
+    }
+    
+    startFocus() {
+        if (this.isFocusing) return;
+        this.isFocusing = true;
+        this.focusEye = Math.random() < 0.5 ? 'left' : 'right';
+        this.lastFocusTime = Date.now();
+        this.nextFocusDelay = 4000 + Math.random() * 3000;
+        
+        let startTime = null;
+        const duration = 300; // a quick focus animation
+        const animateFocus = (timestamp) => {
+            if (!startTime) startTime = timestamp;
+            const elapsed = timestamp - startTime;
+            
+            if (elapsed < duration) { // Focusing in
+                this.focusProgress = elapsed / duration;
+            } else if (elapsed < duration * 2) { // Focusing out
+                this.focusProgress = 1 - ((elapsed - duration) / duration);
+            } else {
+                this.focusProgress = 0;
+                this.isFocusing = false;
+                return;
+            }
+            requestAnimationFrame(animateFocus);
+        };
+        requestAnimationFrame(animateFocus);
+    }
+
+    startThinking() {
+        this.isThinking = true;
+        this.thinkingStartTime = Date.now();
+        this.targetLookX = 0; this.targetLookY = 0;
+    }
+    
+    stopThinking() {
+        this.isThinking = false;
+        this.leftEyeScale = 1;
+        this.rightEyeScale = 1;
+    }
+
+    // --- Other methods (drawFaceplate, drawEye, drawSleepEyes, initInteractions, wakeUp, blink) remain unchanged ---
     drawFaceplate() {
         const c = this.ctx, r = 60;
         c.fillStyle = '#050505'; c.strokeStyle = '#333333'; c.lineWidth = 4;
         c.beginPath(); c.roundRect(0, 0, this.W, this.H, r); c.fill(); c.stroke();
     }
-    drawExpression() {
-        const eW = 100, eH = 100, eR = 30, eY = this.H / 2 + this.lookY;
-        const lCX = this.W * 0.3 + this.lookX, rCX = this.W * 0.7 + this.lookX;
-        const cH = eH * this.blinkProgress;
-        this.drawEye(lCX, eY, eW, cH, eR); this.drawEye(rCX, eY, eW, cH, eR);
-    }
     drawEye(cx, cy, w, h, r) {
         const c = this.ctx;
         const eyeColor = getComputedStyle(document.documentElement).getPropertyValue('--eye-color').trim();
@@ -420,11 +514,6 @@ class RobotFace {
         };
         requestAnimationFrame(a);
     }
-    startThinking() {
-        this.isThinking = true; this.targetLookX = 0; this.targetLookY = 0;
-        this.thinkingInterval = setInterval(() => this.blink(), 800);
-    }
-    stopThinking() { this.isThinking = false; clearInterval(this.thinkingInterval); }
 }
 
 class ChatInterface {
@@ -435,7 +524,7 @@ class ChatInterface {
         this.inputArea = document.getElementById('input-area');
         this.sendButtonContainer = document.getElementById('send-button-container');
         this.sendButton = document.getElementById('send-button');
-        this.isDragging = false; this.startY = 0; this.currentY = 0; this.dragThreshold = 30; // اصلاح آستانه
+        this.isDragging = false; this.startY = 0; this.currentY = 0; this.dragThreshold = 30;
         this.API_URL = 'https://text.pollinations.ai/openai';
 
         const SYSTEM_PROMPT = `
@@ -572,20 +661,17 @@ class ChatInterface {
             return '';
         });
 
-        // First, escape all HTML, then process markdown.
         let contentHtml = escapeHTML(processedText)
             .replace(markdownLinkRegex, '<a href="$2" target="_blank">$1</a>');
 
-        // Since code blocks are special, we handle them separately to avoid double-escaping.
         contentHtml = contentHtml.replace(codeBlockRegex, (match, lang, code) => {
             const uniqueId = `code-${Date.now()}-${Math.random()}`;
-            // The code inside is already escaped from the main escapeHTML call.
-            return `<div class="code-block-wrapper">
+            return `</div><div class="code-block-wrapper">
                         <div class="code-block-header">
                             <button class="copy-code-btn" data-target="${uniqueId}">کپی</button>
                         </div>
                         <pre><code id="${uniqueId}">${code.trim()}</code></pre>
-                    </div>`;
+                    </div><div class="message-content">`;
         });
         
         bubble.innerHTML = `