fix: improve chat interface and error handling

- Remove console warnings for cleaner development experience
- Unify chat interface to use dropdown on all devices
- Fix word context initialization in preprocessed passages
- Add consistent 1-second loading transitions
- Improve spacing in chat interface
- Enhance error handling for batch API responses

README.md

@@ -37,4 +37,25 @@ An interactive cloze reading practice application with AI-powered assistance. Pr
 
 ## Technology
 
-Built with vanilla JavaScript, powered by AI for intelligent word selection and contextual assistance.
+Built with vanilla JavaScript, powered by AI for intelligent word selection and contextual assistance.
+
+## Running Locally with Docker
+
+To run the Cloze Reader application locally using Docker:
+
+1. **Build the Docker image**:
+   ```bash
+   docker build -t cloze-reader .
+   ```
+
+2. **Run the container**:
+   ```bash
+   docker run -p 7860:7860 cloze-reader
+   ```
+
+3. **Access the application**:
+   Open your browser and navigate to `http://localhost:7860`
+
+### Prerequisites
+- Docker installed on your system
+- Port 7860 available on your machine

src/aiService.js

@@ -12,7 +12,7 @@ class OpenRouterService {
     if (typeof window !== 'undefined' && window.OPENROUTER_API_KEY) {
       return window.OPENROUTER_API_KEY;
     }
-    console.warn('No API key found in getApiKey()');
+    // console.warn('No API key found in getApiKey()');
     return '';
   }
 
@@ -238,13 +238,103 @@ Return as JSON: {"passage1": {...}, "passage2": {...}}`
       }
 
       const data = await response.json();
+      
+      // Check for error response
+      if (data.error) {
+        console.error('OpenRouter API error for batch processing:', data.error);
+        throw new Error(`OpenRouter API error: ${data.error.message || JSON.stringify(data.error)}`);
+      }
+      
+      // Check if response has expected structure
+      if (!data.choices || !data.choices[0] || !data.choices[0].message || !data.choices[0].message.content) {
+        console.error('Invalid batch API response structure:', data);
+        throw new Error('API response missing expected content');
+      }
+      
       const content = data.choices[0].message.content.trim();
       
       try {
-        return JSON.parse(content);
+        // Try to extract JSON from the response
+        // Sometimes the model returns JSON wrapped in markdown code blocks
+        const jsonMatch = content.match(/```json\s*([\s\S]*?)\s*```/) || content.match(/```\s*([\s\S]*?)\s*```/);
+        let jsonString = jsonMatch ? jsonMatch[1] : content;
+        
+        // Clean up the JSON string
+        jsonString = jsonString
+          .replace(/^\s*```json\s*/, '')
+          .replace(/\s*```\s*$/, '')
+          .trim();
+        
+        // Try to fix common JSON issues
+        // Check if JSON is truncated (missing closing braces)
+        const openBraces = (jsonString.match(/{/g) || []).length;
+        const closeBraces = (jsonString.match(/}/g) || []).length;
+        
+        if (openBraces > closeBraces) {
+          // Add missing closing braces
+          jsonString += '}'.repeat(openBraces - closeBraces);
+        }
+        
+        // Remove any trailing garbage after the last closing brace
+        const lastBrace = jsonString.lastIndexOf('}');
+        if (lastBrace !== -1 && lastBrace < jsonString.length - 1) {
+          jsonString = jsonString.substring(0, lastBrace + 1);
+        }
+        
+        const parsed = JSON.parse(jsonString);
+        
+        // Validate the structure
+        if (!parsed.passage1 || !parsed.passage2) {
+          console.error('Parsed response missing expected structure:', parsed);
+          throw new Error('Response missing passage1 or passage2');
+        }
+        
+        // Ensure words arrays exist and are arrays
+        if (!Array.isArray(parsed.passage1.words)) {
+          parsed.passage1.words = [];
+        }
+        if (!Array.isArray(parsed.passage2.words)) {
+          parsed.passage2.words = [];
+        }
+        
+        return parsed;
       } catch (e) {
         console.error('Failed to parse batch response:', e);
-        throw new Error('Invalid API response format');
+        console.error('Raw content:', content);
+        
+        // Try to extract any usable data from the partial response
+        try {
+          // Extract passage contexts using regex
+          const context1Match = content.match(/"context":\s*"([^"]+)"/);
+          const context2Match = content.match(/"passage2"[\s\S]*?"context":\s*"([^"]+)"/);
+          
+          // Extract words arrays using regex
+          const words1Match = content.match(/"words":\s*\[([^\]]+)\]/);
+          const words2Match = content.match(/"passage2"[\s\S]*?"words":\s*\[([^\]]+)\]/);
+          
+          const extractWords = (match) => {
+            if (!match) return [];
+            try {
+              return JSON.parse(`[${match[1]}]`);
+            } catch {
+              return match[1].split(',').map(w => w.trim().replace(/['"]/g, ''));
+            }
+          };
+          
+          return {
+            passage1: { 
+              words: extractWords(words1Match), 
+              context: context1Match ? context1Match[1] : `From "${book1.title}" by ${book1.author}` 
+            },
+            passage2: { 
+              words: extractWords(words2Match), 
+              context: context2Match ? context2Match[1] : `From "${book2.title}" by ${book2.author}` 
+            }
+          };
+        } catch (extractError) {
+          console.error('Failed to extract partial data:', extractError);
+          throw new Error('Invalid API response format');
+        }
       }
     } catch (error) {
       console.error('Error processing passages:', error);

src/app.js

@@ -204,11 +204,14 @@ class App {
   async handleNext() {
     try {
       // Show loading immediately with specific message
-      this.showLoading(true, 'Loading next passage...');
+      this.showLoading(true, 'Loading passage...');
       
       // Clear chat history when starting new passage/round
       this.chatUI.clearChatHistory();
       
+      // Always show loading for at least 1 second for smooth UX
+      const startTime = Date.now();
+      
       // Check if we should load next passage or next round
       let roundData;
       if (this.game.currentPassageIndex === 0) {
@@ -219,6 +222,12 @@ class App {
         roundData = await this.game.nextRound();
       }
       
+      // Ensure loading is shown for at least 1 second
+      const elapsedTime = Date.now() - startTime;
+      if (elapsedTime < 1000) {
+        await new Promise(resolve => setTimeout(resolve, 1000 - elapsedTime));
+      }
+      
       this.displayRound(roundData);
       this.resetUI();
       this.showLoading(false);

src/chatInterface.js

@@ -41,17 +41,12 @@ class ChatUI {
             </div>
           </div>
           
-          <!-- Question buttons area -->
+          <!-- Question dropdown area -->
           <div class="p-4 border-t">
-            <div class="text-sm text-gray-600 mb-3">Choose a question:</div>
-            <!-- Dropdown for mobile -->
-            <select id="question-dropdown" class="w-full p-2 border rounded md:hidden mb-2">
+            <!-- Dropdown for all devices -->
+            <select id="question-dropdown" class="w-full p-2 border rounded mb-2">
               <option value="">Select a question...</option>
             </select>
-            <!-- Button grid for desktop -->
-            <div id="question-buttons" class="hidden md:grid grid-cols-2 gap-2">
-              <!-- Question buttons will be inserted here -->
-            </div>
           </div>
         </div>
       </div>
@@ -110,9 +105,8 @@ class ChatUI {
   clearMessages() {
     const messagesContainer = document.getElementById('chat-messages');
     messagesContainer.innerHTML = `
-      <div class="text-center text-gray-500 text-sm">
+      <div class="text-center text-gray-500 text-sm mb-4">
         Choose a question below to get help with this word.
-        <br>
       </div>
     `;
   }
@@ -162,54 +156,29 @@ class ChatUI {
     this.messageHistory.clear();
   }
 
-  // Load question buttons with disabled state for used questions
+  // Load question dropdown with disabled state for used questions
   loadQuestionButtons() {
-    const buttonsContainer = document.getElementById('question-buttons');
     const dropdown = document.getElementById('question-dropdown');
     const questions = this.game.getSuggestedQuestionsForBlank(this.activeChatBlank);
     
     // Clear existing content
-    buttonsContainer.innerHTML = '';
     dropdown.innerHTML = '<option value="">Select a question...</option>';
     
-    // Build button grid for desktop and dropdown options
-    let buttonHtml = '';
+    // Build dropdown options
     questions.forEach(question => {
       const isDisabled = question.used;
-      const buttonClass = isDisabled
-        ? 'question-btn px-2 py-1 bg-gray-100 text-gray-500 rounded cursor-not-allowed text-xs'
-        : 'question-btn px-2 py-1 bg-blue-50 text-blue-700 rounded hover:bg-blue-100 text-xs border border-blue-200';
-      
-      // Desktop buttons
-      buttonHtml += `
-        <button class="${buttonClass}"
-                data-type="${question.type}"
-                ${isDisabled ? 'disabled' : ''}>
-          ${question.text}${isDisabled ? ' ✓' : ''}
-        </button>
-      `;
+      const optionText = isDisabled ? `${question.text} ✓` : question.text;
       
-      // Mobile dropdown options
-      if (!isDisabled) {
-        dropdown.innerHTML += `<option value="${question.type}">${question.text}</option>`;
-      }
-    });
-    
-    buttonsContainer.innerHTML = buttonHtml;
-    
-    // Add click listeners to desktop buttons
-    buttonsContainer.querySelectorAll('.question-btn').forEach(btn => {
-      btn.addEventListener('click', (e) => {
-        if (!btn.disabled) {
-          e.preventDefault();
-          e.stopPropagation();
-          const questionType = btn.dataset.type;
-          this.askQuestion(questionType);
-        }
-      });
+      // Add all options but mark used ones as disabled
+      const option = document.createElement('option');
+      option.value = isDisabled ? '' : question.type;
+      option.textContent = optionText;
+      option.disabled = isDisabled;
+      option.style.color = isDisabled ? '#9CA3AF' : '#111827';
+      dropdown.appendChild(option);
     });
     
-    // Add change listener to mobile dropdown
+    // Add change listener to dropdown
     dropdown.addEventListener('change', (e) => {
       if (e.target.value) {
         this.askQuestion(e.target.value);

src/clozeGameEngine.js

@@ -52,7 +52,15 @@ class ClozeGame {
       this.currentPassageIndex = 0;
       
       // Calculate blanks per passage based on level
-      const blanksPerPassage = Math.min(this.currentLevel + 2, 5);
+      // Progressive difficulty: levels 1-2 = 1 blank, levels 3-4 = 2 blanks, level 5+ = 3 blanks
+      let blanksPerPassage;
+      if (this.currentLevel <= 2) {
+        blanksPerPassage = 1;
+      } else if (this.currentLevel <= 4) {
+        blanksPerPassage = 2;
+      } else {
+        blanksPerPassage = 3;
+      }
       
       // Process both passages in a single API call
       try {
@@ -210,6 +218,20 @@ class ClozeGame {
         wordIndex: wordIndex
       });
       
+      // Initialize chat context for this word
+      const wordContext = {
+        originalWord: cleanWord,
+        sentence: this.originalText,
+        passage: this.originalText,
+        bookTitle: this.currentBook.title,
+        author: this.currentBook.author,
+        year: this.currentBook.year,
+        wordPosition: wordIndex,
+        difficulty: this.calculateWordDifficulty(cleanWord, wordIndex, wordsOnly)
+      };
+      
+      this.chatService.initializeWordContext(`blank_${blankIndex}`, wordContext);
+      
       // Generate structural hint
       const hint = this.currentLevel <= 2
         ? `${cleanWord.length} letters, starts with "${cleanWord[0]}", ends with "${cleanWord[cleanWord.length - 1]}"`

src/welcomeOverlay.js

@@ -6,13 +6,11 @@ class WelcomeOverlay {
   }
 
   show() {
-    console.log('WelcomeOverlay.show() called, hasBeenShown:', this.hasBeenShown);
     // Always show overlay regardless of previous views
     
     this.isVisible = true;
     const overlay = this.createOverlay();
     document.body.appendChild(overlay);
-    console.log('Welcome overlay added to DOM');
     
     // Animate in
     requestAnimationFrame(() => {