Start making it so you can refrence other scripts

Author: MrBlankCoding

src/ai_dom_editor/editor/helpers/api_handler.js

@@ -167,8 +167,19 @@ export class ApiHandler {
       return { 'Authorization': `Bearer ${apiKey}` };
     }
 
+    // Handle Gemma models specifically
+    const isGemma = modelId.includes('gemma') || 
+                   (provider.includes('google') && modelId.includes('gemma'));
+
+    if (isGemma) {
+      return { 
+        'Authorization': `Bearer ${apiKey}`,
+        'Content-Type': 'application/json'
+      };
+    }
+
     // Gemini API uses x-goog-api-key header
-    if (modelId.includes('gemini') || modelId.includes('gemma') || provider.includes('gemini')) {
+    if (modelId.includes('gemini') || provider.includes('gemini')) {
       return { 'x-goog-api-key': apiKey };
     }
 
@@ -280,7 +291,12 @@ Your response is only the JavaScript code.`;
 
     // build messages depending on heuristics (some providers expect system+user, others expect just user)
     const provider = (modelConfig.provider || '').toLowerCase();
-    const isGoogleish = !provider.includes('aimlapi') && (modelId.toLowerCase().includes('gemini') || modelId.toLowerCase().includes('gemma') || provider.includes('google') || provider.includes('vertex'));
+    const isGemma = modelId.toLowerCase().includes('gemma');
+    const isGoogleish = !provider.includes('aimlapi') && 
+                       !isGemma && 
+                       (modelId.toLowerCase().includes('gemini') || 
+                        provider.includes('google') || 
+                        provider.includes('vertex'));
     const isAnthropic = provider.includes('anthropic') || modelId.toLowerCase().includes('claude');
 
     // prefer settings on per-model config, fallback to global
@@ -289,7 +305,17 @@ Your response is only the JavaScript code.`;
 
     // Construct request body for common Chat completions patterns (best-effort)
     let requestBody;
-    if (isGoogleish) {
+    if (isGemma) {
+      // Format for Gemma models
+      requestBody = {
+        model: modelId,
+        messages: [
+          { role: 'user', content: `${systemPrompt}\n\n${userMessage}` }
+        ],
+        temperature: temperature,
+        max_tokens: max_tokens
+      };
+    } else if (isGoogleish) {
       // Gemini uses a different API format than OpenAI
       // Format: { contents: [{ parts: [{ text: "..." }] }] }
       const combinedPrompt = `${systemPrompt}\n\n${userMessage}`;

src/ai_dom_editor/editor/helpers/event_handler.js

@@ -7,9 +7,16 @@ export class EventHandler {
   }
 
   setupEventListeners() {
-    this.editor.elements.userInput.addEventListener('input', () => {
+    this.editor.elements.userInput.addEventListener('input', (e) => {
       this.editor.uiManager.autoResize(this.editor.elements.userInput);
       this.editor.elements.sendBtn.disabled = !this.editor.elements.userInput.value.trim();
+
+      const value = e.target.value;
+      if (value.endsWith('@')) {
+        this.editor.uiManager.showScriptSelector(e.target);
+      } else if (!value.includes('@')) {
+        this.editor.uiManager.hideScriptSelector();
+      }
     });
 
     this.editor.elements.userInput.addEventListener('keydown', (e) => {

src/ai_dom_editor/editor/helpers/ui_manager.js

@@ -196,4 +196,38 @@ export class UIManager {
       this.editor.elements.welcomeMessage.style.display = 'none';
     }
   }
+
+  async showScriptSelector(input) {
+    this.hideScriptSelector();
+    const scripts = await this.editor.userscriptHandler.getAllScripts();
+    if (!scripts || scripts.length === 0) return;
+
+    const selector = document.createElement('div');
+    selector.className = 'script-selector';
+    
+    scripts.forEach(scriptName => {
+      const item = document.createElement('div');
+      item.className = 'script-item';
+      item.textContent = scriptName;
+      item.addEventListener('click', () => {
+        const atIndex = input.value.lastIndexOf('@');
+        input.value = input.value.substring(0, atIndex + 1) + scriptName + ' ';
+        this.hideScriptSelector();
+        input.focus();
+      });
+      selector.appendChild(item);
+    });
+
+    document.body.appendChild(selector);
+    const rect = input.getBoundingClientRect();
+    selector.style.top = `${rect.top - selector.offsetHeight}px`;
+    selector.style.left = `${rect.left}px`;
+  }
+
+  hideScriptSelector() {
+    const selector = document.querySelector('.script-selector');
+    if (selector) {
+      selector.remove();
+    }
+  }
 }

src/ai_dom_editor/editor/helpers/userscript_handler.js

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

src/assets/styles/ai/ai_dom_editor.css

@@ -539,4 +539,25 @@ button svg {
   flex-shrink: 0;
   width: 38px;
   height: 38px;
+}
+
+.script-selector {
+  position: absolute;
+  z-index: 1000;
+  background: var(--bg-tertiary);
+  border: 1px solid var(--border-primary);
+  border-radius: 0.5rem;
+  max-height: 150px;
+  overflow-y: auto;
+  width: 250px;
+}
+
+.script-item {
+  padding: 0.5rem 0.75rem;
+  cursor: pointer;
+  font-size: 0.8125rem;
+}
+
+.script-item:hover {
+  background: var(--bg-hover);
 }

src/background/background.js

@@ -548,52 +548,57 @@ chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
       updateAllTabBadges();
       sendResponse({ success: true });
     },
-
     createScript: () => {
       handleScriptCreation(message.data.url, message.data.template);
     },
-
     contentScriptReady: () => {
       if (sender.tab?.id) {
         state.executedScripts.set(sender.tab.id, new Set());
       }
     },
-
     greasyForkInstall: () => {
       handleGreasyForkInstall(message.url);
     },
-
     openAISettings: () => {
       chrome.tabs.create({ url: chrome.runtime.getURL("ai_dom_editor/settings/ai_settings.html") });
       sendResponse({ success: true });
     },
-
     createScriptFromAI: () => {
       handleAIScriptCreation(message.script, message.url);
       sendResponse({ success: true });
     },
-
     aiSettingsUpdated: () => {
-      // Notify any open AI editors
       chrome.runtime.sendMessage({ action: 'aiConfigUpdated' }).catch(() => {});
       sendResponse({ success: true });
     },
+  };
+
+  const handler = messageHandlers[message.action];
+  if (handler) {
+    handler();
+    return false;
+  }
 
-    getScriptContent: async ({ scriptName }) => {
+  if (message.action === 'getScriptContent') {
+    (async () => {
       const { scripts = [] } = await chrome.storage.local.get("scripts");
-      const script = scripts.find(s => s.name === scriptName);
+      const script = scripts.find(s => s.name === message.scriptName);
       if (script) {
         sendResponse({ code: script.code });
       } else {
-        sendResponse({ error: `Script not found: ${scriptName}` });
+        sendResponse({ error: `Script not found: ${message.scriptName}` });
       }
-    },
-  };
+    })();
+    return true; 
+  }
 
-  const handler = messageHandlers[message.action];
-  if (handler) {
-    handler();
-    return false;
+  if (message.action === 'getAllScripts') {
+    (async () => {
+      const { scripts = [] } = await chrome.storage.local.get("scripts");
+      const scriptNames = scripts.map(s => s.name);
+      sendResponse({ scripts: scriptNames });
+    })();
+    return true;
   }
 
   sendResponse({ error: "Unknown action" });