Unstable

Author: MrBlankCoding

src/ai_dom_editor/editor/helpers/api_handler.js

@@ -163,6 +163,10 @@ export class ApiHandler {
       return { 'X-API-Key': apiKey };
     }
 
+    if (provider.includes('aimlapi')) {
+      return { 'Authorization': `Bearer ${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 };
@@ -227,98 +231,40 @@ export class ApiHandler {
   }
 
   // Primary method to call AI APIs. Returns { type: 'script', code: '...' }
-  async callAIAPI(userMessage, domSummary) {
-
-    const systemPrompt = `You are an expert JavaScript developer specializing in DOM manipulation and userscripts. Your task is to generate clean, efficient JavaScript code that modifies a webpage based on the user's request.
-
-**CRITICAL CONTEXT - YOU MUST ANALYZE THIS:**
-
-**Current Page Structure (DOM Summary):**
-${domSummary}
-
-**INSTRUCTIONS:**
-
-1. **DEEPLY ANALYZE THE DOM:** Study the DOM structure carefully. Look for:
-   - Element tags, IDs, and class names you can target
-   - The hierarchy and nesting of elements
-   - Text content that helps identify elements
-   - Attributes that can be used for precise selection
-   
-2. **USE SPECIFIC SELECTORS:** Based on your analysis:
-   - Prefer IDs when available (e.g., \`document.getElementById('specific-id')\`)
-   - Use class names with querySelector (e.g., \`document.querySelector('.specific-class')\`)
-   - Use tag names with additional context (e.g., \`document.querySelector('div > h1')\`)
-   - 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 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_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 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, 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:** Pure JavaScript code only (absolutely NO metadata, NO wrappers, NO fences).`;
+  async callAIAPI(userMessage, domSummary, previousCode = null) {
+
+    let systemPrompt = `You are a JavaScript developer who writes userscripts.
+This is the current page structure (DOM summary):
+${domSummary}`;
+
+    if (previousCode) {
+      systemPrompt += `
+This is the previously generated code:
+\`\`\`javascript
+${previousCode}
+\`\`\`
+The user wants to modify the above script.
+`;
+    }
+
+    systemPrompt += `
+Your task is to generate JavaScript code to modify the page based on the user's request.
+- Use specific selectors. Prefer IDs, then classes, then tags.
+- You can use Greasemonkey APIs: GM_addStyle, GM_setValue, GM_getValue, GM_deleteValue, GM_listValues, GM_xmlhttpRequest, GM_notification, GM_addElement, GM_registerMenuCommand, GM_openInTab, GM_setClipboard, GM_download, GM_getResourceText, unsafeWindow.
+- Write immediately executable code.
+- Check if elements exist before using them.
+- Use modern JavaScript.
+- Do not include userscript metadata headers (like // ==UserScript==), markdown fences, or IIFE wrappers. Only provide pure JavaScript code.
+
+User's request: ${userMessage}
+
+Your response is only the JavaScript code.`;
 
     // Decide model config (selectedModel preferred, else global apiConfig)
     const modelConfig = this.selectedModel || this.apiConfig || {};
     const modelId = modelConfig.id || modelConfig.model || this.apiConfig?.model || 'gpt-4';
     const endpoint = modelConfig.endpoint || this.apiConfig?.endpoint;
-    const apiKey = modelConfig.apiKey || modelConfig.apiKey || this.apiConfig?.apiKey || this.apiConfig?.key;
+    const apiKey = modelConfig.apiKey || modelConfig.key || this.apiConfig?.apiKey || this.apiConfig?.key;
 
     if (!endpoint) {
       this.editor?.uiManager?.showConfigBanner?.();
@@ -334,7 +280,7 @@ ${userMessage}
 
     // build messages depending on heuristics (some providers expect system+user, others expect just user)
     const provider = (modelConfig.provider || '').toLowerCase();
-    const isGoogleish = modelId.toLowerCase().includes('gemini') || modelId.toLowerCase().includes('gemma') || provider.includes('google') || provider.includes('vertex');
+    const isGoogleish = !provider.includes('aimlapi') && (modelId.toLowerCase().includes('gemini') || modelId.toLowerCase().includes('gemma') || provider.includes('google') || provider.includes('vertex'));
     const isAnthropic = provider.includes('anthropic') || modelId.toLowerCase().includes('claude');
 
     // prefer settings on per-model config, fallback to global

src/ai_dom_editor/editor/helpers/chat_manager.js

@@ -7,17 +7,26 @@ export class ChatManager {
     this.editor = editor;
     this.messages = [];
     this.currentSiteUrl = '';
+    this.scriptId = null; // Add scriptId property
+  }
+
+  setScriptId(scriptId) {
+    this.scriptId = scriptId;
+    this.loadChatHistory();
   }
 
   async loadChatHistory() {
     try {
-      const [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
-      if (!tab || !tab.url) return;
+      if (!this.scriptId) {
+        const [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
+        if (!tab || !tab.url) return;
 
-      const url = new URL(tab.url);
-      this.currentSiteUrl = `${url.protocol}//${url.hostname}`;
+        const url = new URL(tab.url);
+        this.currentSiteUrl = `${url.protocol}//${url.hostname}`;
+        this.scriptId = `chat_${this.currentSiteUrl}`;
+      }
 
-      const storageKey = `aiChatHistory_${this.currentSiteUrl}`;
+      const storageKey = `aiChatHistory_${this.scriptId}`;
       const { [storageKey]: history } = await chrome.storage.local.get(storageKey);
 
       if (history && history.messages && history.messages.length > 0) {
@@ -39,11 +48,12 @@ export class ChatManager {
 
   async saveChatHistory() {
     try {
-      if (!this.currentSiteUrl) return;
+      if (!this.scriptId) return;
 
-      const storageKey = `aiChatHistory_${this.currentSiteUrl}`;
+      const storageKey = `aiChatHistory_${this.scriptId}`;
       await chrome.storage.local.set({
         [storageKey]: {
+          id: this.scriptId,
           url: this.currentSiteUrl,
           messages: this.messages,
           lastUpdated: Date.now()
@@ -54,6 +64,11 @@ export class ChatManager {
     }
   }
 
+  getPreviousCode() {
+    const lastAssistantMessage = this.messages.slice().reverse().find(msg => msg.role === 'assistant' && msg.data && msg.data.code);
+    return lastAssistantMessage ? lastAssistantMessage.data.code : null;
+  }
+
   addMessage(role, text, data = {}) {
     this.messages.push({ role, text, timestamp: new Date(), data });
 
@@ -73,13 +88,13 @@ export class ChatManager {
   }
 
   async clearChat() {
-    if (confirm('Clear conversation history for this site?')) {
+    if (confirm('Clear conversation history for this script?')) {
       this.messages = [];
       this.editor.elements.messages.innerHTML = '';
       this.editor.uiManager.showWelcomeMessage();
 
-      if (this.currentSiteUrl) {
-        const storageKey = `aiChatHistory_${this.currentSiteUrl}`;
+      if (this.scriptId) {
+        const storageKey = `aiChatHistory_${this.scriptId}`;
         await chrome.storage.local.remove(storageKey);
       }
     }

src/ai_dom_editor/editor/helpers/event_handler.js

@@ -111,7 +111,21 @@ export class EventHandler {
         const domSummary = response?.summary || '';
 
         try {
-          const aiResponse = await this.editor.apiHandler.callAIAPI(message, domSummary);
+          let previousCode = this.editor.chatManager.getPreviousCode();
+          const scriptNameMatch = message.match(/@(\S+)/);
+          if (scriptNameMatch) {
+            const scriptName = scriptNameMatch[1];
+            try {
+              previousCode = await this.editor.userscriptHandler.getScriptContent(scriptName);
+              this.editor.chatManager.setScriptId(scriptName);
+            } catch (error) {
+              this.editor.chatManager.addMessage('assistant', `Error: ${error.message}`);
+              this.editor.chatManager.removeMessage(loadingId);
+              return;
+            }
+          }
+
+          const aiResponse = await this.editor.apiHandler.callAIAPI(message, domSummary, previousCode);
           this.editor.chatManager.removeMessage(loadingId);
           this.handleAIResponse(aiResponse);
         } catch (error) {

src/ai_dom_editor/editor/helpers/userscript_handler.js

@@ -5,6 +5,20 @@ export class UserscriptHandler {
     this.editor = editor;
   }
 
+  async getScriptContent(scriptName) {
+    return new Promise((resolve, reject) => {
+      chrome.runtime.sendMessage({ action: 'getScriptContent', scriptName }, (response) => {
+        if (chrome.runtime.lastError) {
+          return reject(new Error(chrome.runtime.lastError.message));
+        }
+        if (response.error) {
+          return reject(new Error(response.error));
+        }
+        resolve(response.code);
+      });
+    });
+  }
+
   async createUserscript(code) {
     try {
       const [tab] = await chrome.tabs.query({ active: true, currentWindow: true });