Merge pull request #1 from rohitmane-dev/sync-upstream

Sync upstream

Author: rohitmane-dev

.gemini/AI_TUTOR_CRITICAL_FIXES.md

@@ -0,0 +1,161 @@
+# AI Tutor Critical Fixes - Typing & Video Issues
+
+## Date: 2026-02-17 01:16 IST
+
+## Issues Fixed
+
+### 1. ✅ Typing Rendering Problem (FIXED)
+**Problem:** Text rendering was breaking/glitching during speech synthesis
+**Root Cause:** Speech was starting immediately with typing, causing React rendering conflicts
+
+**Solution:**
+- Added 500ms delay before speech starts
+- Allows typing animation to stabilize first
+- Prevents rendering interference
+
+**Code:**
+```javascript
+// Speak non-code stages while typing - with delay to prevent rendering issues
+if (stage.type !== 'CODE') {
+    // Delay speech slightly to let typing animation start smoothly
+    setTimeout(() => {
+        speak(stage.content, `stage-${currentStageIndex}`);
+    }, 500);
+}
+```
+
+**Result:** Smooth typing animation without visual glitches ✅
+
+---
+
+### 2. ✅ YouTube Video Not Embedding (FIXED)
+**Problem:** Videos showing as raw links instead of playable embeds
+**Root Cause:** Video player only rendered during typing (SequentialFlow), not for completed messages
+
+**Solution:**
+- Added video extraction for completed messages
+- Renders ReactPlayer component after message content
+- Maintains same styling as typing video display
+
+**Code:**
+```javascript
+{(() => {
+    const videoMatch = msg.content.match(/\[\[VIDEO:\s*(https?:\/\/[^\]]+)\]\]/);
+    if (videoMatch) {
+        return (
+            <div className="mt-6 overflow-hidden rounded-2xl border border-border bg-card shadow-xl w-full max-w-full">
+                <div className="p-3 bg-red-500/5 border-b flex items-center justify-between">
+                    <div className="flex items-center gap-2">
+                        <div className="p-1 bg-red-500 rounded-lg shrink-0">
+                            <Youtube className="w-4 h-4 text-white" />
+                        </div>
+                        <span className="text-[10px] font-bold uppercase tracking-widest text-red-600 truncate">Mastery Tutorial</span>
+                    </div>
+                </div>
+                <div className="w-full relative bg-black aspect-video">
+                    <ReactPlayer
+                        url={videoMatch[1]}
+                        width="100%"
+                        height="100%"
+                        style={{ position: 'absolute', top: 0, left: 0 }}
+                        controls={true}
+                    />
+                </div>
+            </div>
+        );
+    }
+    return null;
+})()}
+```
+
+**Result:** Videos now embed properly in both typing and completed states ✅
+
+---
+
+### 3. ✅ Video Display Timing (IMPROVED)
+**Problem:** Video was showing on all stages during typing
+**Solution:** 
+- Video now only shows on the last stage
+- Only displays when typing is complete
+
+**Code:**
+```javascript
+isFinal={i === visibleStages.length - 1 && !isTyping}
+```
+
+**Result:** Clean, sequential display without premature video rendering ✅
+
+---
+
+### 4. ✅ Code Block Width (FIXED)
+**Problem:** Code blocks constrained by message bubble width (85%)
+**Solution:**
+- Code blocks now break out of message container
+- Use full AI Tutor window width
+- Negative margins to expand beyond bubble
+
+**Code:**
+```javascript
+className="my-6 -mx-4 sm:-mx-6 md:-mx-8 rounded-2xl overflow-hidden border border-border shadow-2xl bg-[#0d1117] w-[calc(100%+2rem)] sm:w-[calc(100%+3rem)] md:w-[calc(100%+4rem)]"
+```
+
+**Result:** Code blocks use full window width, text stays in bubble ✅
+
+---
+
+## Current Behavior
+
+### Message Flow:
+1. **User asks question** → Message sent
+2. **AI starts typing** → 
+   - INTRO stage types + speaks (after 500ms delay)
+   - CONCEPT stage types + speaks (after 500ms delay)
+   - CODE stage types + shows "Preparing code..." (silent)
+   - SUMMARY stage types + speaks (after 500ms delay)
+3. **Typing completes** →
+   - Video extracts from content
+   - ReactPlayer renders with controls
+   - Confidence meter appears
+   - "Ask Mentor" button appears
+
+### Video Rendering:
+- **During typing:** Shows on last stage when typing complete
+- **After typing:** Extracted and rendered from message content
+- **Format:** Responsive ReactPlayer with 16:9 aspect ratio
+- **Never shows:** Raw URLs or `[[VIDEO: URL]]` markers
+
+---
+
+## Testing Results
+
+✅ **Typing Animation:** Smooth, no glitches
+✅ **Speech Synthesis:** Plays without breaking rendering
+✅ **Video Embedding:** Works in both typing and completed states
+✅ **Code Block Width:** Full window width
+✅ **Text Content:** Stays within message bubble
+✅ **Confidence Score:** Displays correctly
+✅ **Escalation Button:** Functional
+
+---
+
+## Files Modified
+
+### `eta-web/src/components/AITutor.jsx`
+1. **Line 301-307:** Added 500ms delay to speech synthesis
+2. **Line 343:** Fixed video display timing (`isFinal` logic)
+3. **Line 39:** Code block width expansion with negative margins
+4. **Line 783-815:** Added video extraction and rendering for completed messages
+
+---
+
+## Known Behavior
+
+✅ **Speech Delay:** 500ms pause before speech starts (prevents rendering issues)
+✅ **Video Display:** Shows after all content is typed
+✅ **Code Blocks:** Expand to full window width
+✅ **Message Text:** Stays within 85% bubble constraint
+
+---
+
+**Status:** ✅ ALL CRITICAL ISSUES RESOLVED
+**Last Updated:** 2026-02-17 01:16 IST