Fix gemini api error

Author: MrBlankCoding

src/ai_dom_editor/editor/helpers/api_handler.js

@@ -154,6 +154,7 @@ export class ApiHandler {
   _buildAuthHeaders(modelConfig) {
     const apiKey = modelConfig?.apiKey || modelConfig?.key;
     const provider = (modelConfig?.provider || '').toLowerCase();
+    const modelId = (modelConfig?.id || modelConfig?.model || '').toLowerCase();
 
     if (!apiKey) return {};
 
@@ -162,6 +163,11 @@ export class ApiHandler {
       return { 'X-API-Key': apiKey };
     }
 
+    // Gemini API uses x-goog-api-key header
+    if (modelId.includes('gemini') || modelId.includes('gemma') || provider.includes('gemini')) {
+      return { 'x-goog-api-key': apiKey };
+    }
+
     // common heuristics
     if (provider.includes('openai') || provider.includes('gpt') || provider.includes('anthropic')) {
       return { 'Authorization': `Bearer ${apiKey}` };
@@ -179,6 +185,18 @@ export class ApiHandler {
 
   // Robust response content extractor for various provider shapes
   _extractContentFromResponse(data) {
+    // Gemini API format: { candidates: [{ content: { parts: [{ text: "..." }] } }] }
+    if (data?.candidates && Array.isArray(data.candidates) && data.candidates.length > 0) {
+      const candidate = data.candidates[0];
+      if (candidate?.content?.parts && Array.isArray(candidate.content.parts)) {
+        const textParts = candidate.content.parts
+          .filter(part => part.text)
+          .map(part => part.text)
+          .join('');
+        if (textParts) return textParts;
+      }
+    }
+
     // OpenAI Chat Completions
     if (data?.choices && Array.isArray(data.choices) && data.choices.length > 0) {
       const first = data.choices[0];
@@ -233,34 +251,68 @@ ${domSummary}
    - Combine selectors for precision (e.g., \`document.querySelector('div.container > h1.title')\`)
 
 3. **GREASEMONKEY APIs AVAILABLE:**
-   You have access to these powerful APIs - use them when appropriate:
-   - \`GM_addStyle(css)\` - Inject CSS (preferred for styling changes)
-   - \`GM_setValue(key, value)\` - Store persistent data
+   You have access to these powerful APIs - USE THEM when they make the code better:
+   
+   **STYLING (HIGHLY RECOMMENDED for CSS changes):**
+   - \`GM_addStyle(css)\` - Inject CSS (ALWAYS prefer this over inline styles for multiple elements)
+   
+   **STORAGE (for persistent data):**
+   - \`GM_setValue(key, value)\` - Store data across page loads
    - \`GM_getValue(key, defaultValue)\` - Retrieve stored data
-   - \`GM_xmlhttpRequest(details)\` - Make cross-origin requests
+   - \`GM_deleteValue(key)\` - Delete stored data
+   - \`GM_listValues()\` - List all stored keys
+   
+   **NETWORK (for API calls and cross-origin requests):**
+   - \`GM_xmlhttpRequest(details)\` - Make cross-origin HTTP requests
+   
+   **UI ENHANCEMENTS:**
    - \`GM_notification(options)\` - Show desktop notifications
-   - \`GM_addElement(parent, tag, attributes)\` - Create and insert elements
-   - \`GM_registerMenuCommand(name, callback)\` - Add menu commands
-   - And many more standard Tampermonkey APIs
+   - \`GM_addElement(parent, tag, attributes)\` - Create and insert DOM elements
+   - \`GM_registerMenuCommand(caption, callback)\` - Add custom menu commands
+   - \`GM_openInTab(url, options)\` - Open URLs in new tabs
+   
+   **UTILITIES:**
+   - \`GM_setClipboard(data, type)\` - Copy data to clipboard
+   - \`GM_download(url, name)\` - Download files
+   - \`GM_getResourceText(name)\` - Get text resources
+   - \`unsafeWindow\` - Direct access to page's window object (use cautiously)
 
 4. **CODE QUALITY REQUIREMENTS:**
-   - Write immediately executable code - no placeholders
-   - Check element existence before manipulation
-   - Use efficient selectors based on the actual DOM
-   - Handle edge cases gracefully
-   - Prefer GM_addStyle for CSS changes over inline styles
-   - Use modern JavaScript (ES6+)
-
-5. **OUTPUT FORMAT:**
-   - Return ONLY the JavaScript code
-   - NO markdown code fences
-   - NO explanations or comments outside the code
-   - NO \`// ==UserScript==\` headers
+   - Write immediately executable code - no placeholders, no TODO comments
+   - Always check element existence before manipulation (e.g., \`if (element) { ... }\`)
+   - Use efficient selectors based on the actual DOM structure provided
+   - Handle edge cases gracefully with try-catch where appropriate
+   - Prefer GM_addStyle for ANY CSS changes affecting multiple elements
+   - Use modern JavaScript (ES6+) with arrow functions, const/let, template literals
+   - Add brief inline comments explaining complex logic
+   - Wait for DOM if needed (DOMContentLoaded or wait functions)
+
+5. **CRITICAL - ZERO METADATA GENERATION:**
+   ⚠️ NEVER generate userscript metadata - this is handled automatically ⚠️
+   
+   **DO NOT INCLUDE:**
+   - \`// ==UserScript==\` headers
+   - \`// @name\`, \`@grant\`, \`@match\`, \`@run-at\`, etc.
+   - Markdown code fences (\`\`\`javascript)
+   - IIFE wrappers (function() {...})()
+   
+   **ONLY PROVIDE:**
+   - Pure JavaScript code that solves the problem
+   - Code starts immediately (no metadata, no wrappers)
+   
+   **WHY:** Our analyzer automatically:
+   - Detects which GM APIs you use
+   - Generates all @grant directives
+   - Creates optimal @match patterns
+   - Sets appropriate @run-at timing
+   - Wraps your code properly
+   
+   Your job: Write great code. Our job: Perfect metadata.
 
 **USER'S REQUEST:**
 ${userMessage}
 
-**YOUR RESPONSE:** Generate the complete, executable JavaScript code now.`;
+**YOUR RESPONSE:** Pure JavaScript code only (absolutely NO metadata, NO wrappers, NO fences).`;
 
     // Decide model config (selectedModel preferred, else global apiConfig)
     const modelConfig = this.selectedModel || this.apiConfig || {};
@@ -284,7 +336,6 @@ ${userMessage}
     const provider = (modelConfig.provider || '').toLowerCase();
     const isGoogleish = modelId.toLowerCase().includes('gemini') || modelId.toLowerCase().includes('gemma') || provider.includes('google') || provider.includes('vertex');
     const isAnthropic = provider.includes('anthropic') || modelId.toLowerCase().includes('claude');
-    const isGemma = modelId.toLowerCase().includes('gemma');
 
     // prefer settings on per-model config, fallback to global
     const temperature = (typeof modelConfig.temperature === 'number') ? modelConfig.temperature : (typeof this.apiConfig?.temperature === 'number' ? this.apiConfig.temperature : 0.7);
@@ -293,28 +344,22 @@ ${userMessage}
     // Construct request body for common Chat completions patterns (best-effort)
     let requestBody;
     if (isGoogleish) {
-      // Gemma models don't support system instructions, combine into user message
-      if (isGemma) {
-        requestBody = {
-          model: modelId,
-          messages: [
-            { role: 'user', content: `${systemPrompt}\n\n${userMessage}` }
-          ],
-          temperature,
-          max_tokens
-        };
-      } else {
-        // Gemini and other Google models support system instructions
-        requestBody = {
-          model: modelId,
-          messages: [
-            { role: 'system', content: systemPrompt },
-            { role: 'user', content: userMessage }
-          ],
+      // Gemini uses a different API format than OpenAI
+      // Format: { contents: [{ parts: [{ text: "..." }] }] }
+      const combinedPrompt = `${systemPrompt}\n\n${userMessage}`;
+      requestBody = {
+        contents: [
+          {
+            parts: [
+              { text: combinedPrompt }
+            ]
+          }
+        ],
+        generationConfig: {
           temperature,
-          max_tokens
-        };
-      }
+          maxOutputTokens: max_tokens
+        }
+      };
     } else if (isAnthropic) {
       // Claude-like: use a single input field (this is heuristic)
       requestBody = {
@@ -340,17 +385,13 @@ ${userMessage}
     if (modelConfig?.extraRequestFields && typeof modelConfig.extraRequestFields === 'object') {
       Object.assign(requestBody, modelConfig.extraRequestFields);
     }
-    
-    console.log('Request', JSON.stringify(requestBody, null, 2));
 
     // Timeout handling
     const controller = new AbortController();
     const timeout = modelConfig.requestTimeoutMs || this.defaultTimeoutMs;
     const timeoutId = setTimeout(() => controller.abort(), timeout);
 
     try {
-      const startTime = Date.now();
-      
       const res = await fetch(endpoint, {
         method: 'POST',
         headers: {

src/ai_dom_editor/editor/helpers/event_handler.js

@@ -80,20 +80,9 @@ export class EventHandler {
     const message = this.editor.elements.userInput.value.trim();
     if (!message) return;
 
-    console.log('📨 User Message Sent:', message);
-
     const hasModel = this.editor.apiHandler.selectedModel && this.editor.apiHandler.selectedModel.apiKey && this.editor.apiHandler.selectedModel.endpoint;
     const hasConfig = this.editor.apiHandler.apiConfig && this.editor.apiHandler.apiConfig.apiKey && this.editor.apiHandler.apiConfig.endpoint;
 
-    console.log('🔍 API Configuration Status:', {
-      hasModel,
-      hasConfig,
-      selectedModel: this.editor.apiHandler.selectedModel ? {
-        id: this.editor.apiHandler.selectedModel.id,
-        provider: this.editor.apiHandler.selectedModel.provider
-      } : null
-    });
-    
     if (!hasModel && !hasConfig) {
       this.editor.chatManager.addMessage('assistant', 'Please configure your AI API settings first.');
       return;
@@ -120,22 +109,13 @@ export class EventHandler {
         }
 
         const domSummary = response?.summary || '';
-        console.log('📋 DOM Summary Received:', {
-          length: domSummary.length,
-          preview: domSummary.substring(0, 300) + '...'
-        });
 
         try {
           const aiResponse = await this.editor.apiHandler.callAIAPI(message, domSummary);
-          console.log('✅ AI Response Received:', {
-            type: aiResponse.type,
-            codeLength: aiResponse.code?.length || 0
-          });
           this.editor.chatManager.removeMessage(loadingId);
           this.handleAIResponse(aiResponse);
         } catch (error) {
-          console.error('❌ AI Generation Error:', error);
-          this.editor.chatManager.removeMessage(loadingId);
+          this.editor.chatManager.removeMessage(loadingId); 
           this.editor.chatManager.addMessage('assistant', `Error: ${error.message}`, { error: true });
         }
       });
@@ -146,27 +126,17 @@ export class EventHandler {
   }
 
   handleAIResponse(response) {
-    console.log('🎯 Handling AI Response:', {
-      isArray: Array.isArray(response),
-      type: response?.type,
-      hasCode: !!response?.code,
-      responseKeys: Object.keys(response || {})
-    });
-    
     if (Array.isArray(response)) {
-      console.log('📝 Displaying array response (actions)');
       this.editor.chatManager.addMessage('assistant', 'I\'ll apply these changes to the page:', {
         code: JSON.stringify(response, null, 2),
         actions: response
       });
     } else if (response.type === 'script' && response.code) {
-      console.log('💻 Displaying script response, code length:', response.code.length);
       this.editor.chatManager.addMessage('assistant', 'I\'ve generated this code for you:', {
         code: response.code,
         isScript: true
       });
     } else {
-      console.error('⚠️ Unexpected response format:', response);
       this.editor.chatManager.addMessage('assistant', 'Unexpected response format from AI', { error: true });
     }
   }

src/ai_dom_editor/editor/helpers/userscript_handler.js

@@ -1,4 +1,4 @@
-// src/ai_dom_editor/editor/helpers/userscript_handler.js
+import ScriptAnalyzer from '../../../utils/scriptAnalyzer.js';
 
 export class UserscriptHandler {
   constructor(editor) {
@@ -9,45 +9,59 @@ export class UserscriptHandler {
     try {
       const [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
       const url = new URL(tab.url);
+      let scriptCode = typeof code === 'string' ? code : this.convertActionsToScript(code);
+      const userPrompt = this.editor.eventHandler.lastUserPrompt || '';
+
+      scriptCode = scriptCode.replace(/\/\/\s*==UserScript==[\s\S]*?\/\/\s*==\/UserScript==\n*/g, '').trim();
+
+      const detectedApis = ScriptAnalyzer.detectGMApiUsage(scriptCode);
+      const suggestedRunAt = ScriptAnalyzer.suggestRunAt(scriptCode);
+      const scriptName = ScriptAnalyzer.generateScriptName(url.hostname, userPrompt);
 
-      const scriptCode = typeof code === 'string' ? code : this.convertActionsToScript(code);
-      
-      const siteName = url.hostname.replace('www.', '').split('.')[0];
-      const capitalizedSite = siteName.charAt(0).toUpperCase() + siteName.slice(1);
-      const date = new Date().toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' });
-      
-      const description = this.editor.eventHandler.lastUserPrompt || `Modifications for ${url.hostname}`;
+      const metadata = {
+        name: scriptName,
+        namespace: 'https://codetweak.local',
+        version: '1.0.0',
+        description: userPrompt || `Modifications for ${url.hostname}`,
+        author: 'CodeTweak AI',
+        matches: [`${url.origin}/*`],
+        gmApis: detectedApis,
+        runAt: suggestedRunAt
+      };
 
-      const userscript = `// ==UserScript==
-// @name         ${capitalizedSite} - ${date}
-// @namespace    http://tampermonkey.net/
-// @version      1.0.0
-// @description  ${description}
-// @author       AI Assistant
-// @match        ${url.origin}/*
-// @grant        GM_addStyle
-// @grant        GM_getValue
-// @grant        GM_setValue
-// @run-at       document-end
-// ==/UserScript==
-
-(function() {
-    'use strict';
-    
-${scriptCode.split('\n').map(line => '    ' + line).join('\n')}
-})();`;
+      const wrappedCode = this.wrapInIIFE(scriptCode);
+      const finalScript = ScriptAnalyzer.rebuildWithEnhancedMetadata(wrappedCode, metadata);
 
+      // Send to editor
       chrome.runtime.sendMessage({
         action: 'createScriptFromAI',
-        script: userscript,
+        script: finalScript,
         url: tab.url
       });
 
       this.editor.chatManager.addMessage('assistant', '✓ Script created and opened in editor!');
     } catch (error) {
+      console.error('❌ Error creating userscript:', error);
       this.editor.chatManager.addMessage('assistant', `Error creating script: ${error.message}`, { error: true });
     }
   }
+  
+  wrapInIIFE(code) {
+    const isWrapped = /^\s*\(\s*function\s*\(/.test(code) || /^\s*\(function\s*\(/.test(code);
+    
+    if (isWrapped) {
+      return code;
+    }
+    
+    const lines = code.split('\n');
+    const indentedLines = lines.map(line => '    ' + line);
+    
+    return `(function() {
+    'use strict';
+    
+${indentedLines.join('\n')}
+})();`;
+  }
 
   convertActionsToScript(actions) {
     const lines = [];

src/ai_dom_editor/settings/ai_settings.html

@@ -41,7 +41,8 @@ <h3>Getting Started</h3>
               <li>Obtain an API key from your chosen provider</li>
               <li>OpenAI: <a href="https://platform.openai.com/api-keys" target="_blank">platform.openai.com</a></li>
               <li>Anthropic: <a href="https://console.anthropic.com/" target="_blank">console.anthropic.com</a></li>
-              <li>Google: <a href="https://makersuite.google.com/app/apikey" target="_blank">makersuite.google.com</a></li>
+              <li>Google Gemini: <a href="https://aistudio.google.com/app/apikey" target="_blank">aistudio.google.com</a></li>
+              <li>For Gemini: Select "Google (Gemini)" provider and your model - the endpoint will be configured automatically</li>
             </ul>
           </div>
         </div>