draply-dev 1.3.3 → 1.3.5

package/bin/cli.js

@@ -97,7 +97,53 @@ function extractClassName(selector) {
   return null;
 }
 
-// ── Call Gemini API ───────────────────────────────────────────────────────────
+// ── Call AI API (Gemini or Groq) ──────────────────────────────────────────────
+function callAI(apiKey, prompt, provider) {
+  if (provider === 'groq') return callGroq(apiKey, prompt);
+  return callGemini(apiKey, prompt);
+}
+
+function callGroq(apiKey, prompt) {
+  return new Promise((resolve, reject) => {
+    const body = JSON.stringify({
+      model: 'llama-3.3-70b-versatile',
+      messages: [{ role: 'user', content: prompt }],
+      temperature: 0.1,
+      max_tokens: 8192
+    });
+
+    const options = {
+      hostname: 'api.groq.com',
+      path: '/openai/v1/chat/completions',
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        'Authorization': `Bearer ${apiKey}`,
+        'Content-Length': Buffer.byteLength(body)
+      }
+    };
+
+    const req = https.request(options, res => {
+      const chunks = [];
+      res.on('data', c => chunks.push(c));
+      res.on('end', () => {
+        try {
+          const data = JSON.parse(Buffer.concat(chunks).toString());
+          if (data.error) {
+            reject(new Error(data.error.message || 'Groq API error'));
+            return;
+          }
+          const text = data.choices?.[0]?.message?.content || '';
+          resolve(text);
+        } catch (e) { reject(e); }
+      });
+    });
+    req.on('error', reject);
+    req.write(body);
+    req.end();
+  });
+}
+
 function callGemini(apiKey, prompt) {
   return new Promise((resolve, reject) => {
     const url = `https://generativelanguage.googleapis.com/v1beta/models/gemini-2.0-flash-lite:generateContent?key=${apiKey}`;
@@ -216,47 +262,96 @@ const server = http.createServer((req, res) => {
         for (const [filePath, { found, items }] of fileChanges) {
           console.log(` \x1b[36m🤖\x1b[0m AI applying ${items.length} changes → ${found.relativePath}`);
 
-          // Build combined prompt
+          // Find the relevant context snippet (~50 lines around the class usage)
+          const lines = found.content.split('\n');
+          let contextStart = 0, contextEnd = lines.length - 1;
+          for (const item of items) {
+            for (let i = 0; i < lines.length; i++) {
+              if (lines[i].includes(item.className)) {
+                contextStart = Math.min(contextStart || i, Math.max(0, i - 25));
+                contextEnd = Math.min(lines.length - 1, i + 25);
+              }
+            }
+          }
+          const snippet = lines.slice(contextStart, contextEnd + 1).join('\n');
+
+          // Build changes description
           let changesBlock = '';
           items.forEach(item => {
             const propsStr = Object.entries(item.props).map(([k, v]) => `  ${k}: ${v}`).join('\n');
             changesBlock += `\nElement .${item.className}:\n${propsStr}\n`;
           });
 
-          const prompt = `You are a code editor. Modify the file to apply CSS style changes.
+          const prompt = `You are a code editor. I need to apply CSS style changes to a file.
 
-FILE: ${found.relativePath}
+FILE: ${found.relativePath} (lines ${contextStart + 1}-${contextEnd + 1})
 \`\`\`
-${found.content}
+${snippet}
 \`\`\`
 
-CHANGES TO APPLY:
+CHANGES:
 ${changesBlock}
-RULES:
-- If CSS/SCSS file: find each class rule and update/add properties. Add rules if missing.
-- If JSX/TSX file: apply in the most appropriate way:
-  - Existing inline styles → update them
-  - File imports CSS → note which CSS file to edit
-  - Tailwind classes → update className with Tailwind classes
-  - Otherwise → add style prop
-- Keep ALL existing code intact. Only modify what's needed.
-- Do NOT add extra comments.
-
-Return ONLY the complete modified file. No markdown fences, no explanations.`;
+IMPORTANT: Return ONLY a JSON array of search-and-replace pairs. Each pair is:
+{"search": "exact existing code to find", "replace": "modified code to replace it with"}
+
+Rules:
+- "search" must be an EXACT substring from the file above (copy it precisely)
+- "search" should be minimal — just the line(s) that need changing
+- For CSS: modify the class rule properties. If rule doesn't exist, set search to the closing bracket of the nearest rule and add the new rule after it.
+- For JSX with className: add/update the style prop on that element
+- For JSX with imported CSS: add CSS rules (search for the import line, replace with import + note)
+- Keep changes minimal
+
+Example response:
+[{"search": "className=\\"hero\\"", "replace": "className=\\"hero\\" style={{color: 'red', fontSize: '20px'}}"}]
+
+Return ONLY valid JSON array. No markdown, no explanation.`;
 
           try {
-            const result = await callGemini(cfg.apiKey, prompt);
-            let code = result.trim();
-            if (code.startsWith('```')) {
-              code = code.replace(/^```[a-z]*\n?/, '').replace(/\n?```$/, '');
+            const result = await callAI(cfg.apiKey, prompt, cfg.provider || 'groq');
+            let jsonStr = result.trim();
+            // Clean markdown fences if present
+            if (jsonStr.startsWith('```')) {
+              jsonStr = jsonStr.replace(/^```[a-z]*\n?/, '').replace(/\n?```$/, '');
+            }
+
+            let patches;
+            try {
+              patches = JSON.parse(jsonStr);
+            } catch {
+              console.log(` \x1b[31m✗\x1b[0m AI returned invalid JSON`);
+              console.log(`   Response: ${jsonStr.substring(0, 200)}`);
+              items.forEach(item => results.push({ selector: item.selector, ok: false, reason: 'AI returned invalid JSON' }));
+              continue;
             }
-            if (code.length < 20) {
-              items.forEach(item => results.push({ selector: item.selector, ok: false, reason: 'AI returned invalid response' }));
+
+            if (!Array.isArray(patches) || patches.length === 0) {
+              items.forEach(item => results.push({ selector: item.selector, ok: false, reason: 'AI returned no changes' }));
               continue;
             }
-            fs.writeFileSync(found.file, code, 'utf8');
-            console.log(` \x1b[32m✓\x1b[0m Applied to ${found.relativePath}`);
-            items.forEach(item => results.push({ selector: item.selector, ok: true, file: found.relativePath }));
+
+            // Apply patches
+            let content = found.content;
+            let applied = 0;
+            for (const patch of patches) {
+              if (!patch.search || patch.replace === undefined) continue;
+              if (content.includes(patch.search)) {
+                content = content.replace(patch.search, patch.replace);
+                applied++;
+                console.log(` \x1b[32m  ✓\x1b[0m Patch applied`);
+              } else {
+                console.log(` \x1b[33m  ⚠\x1b[0m Search string not found: "${patch.search.substring(0, 60)}..."`);
+              }
+            }
+
+            if (applied > 0) {
+              fs.writeFileSync(found.file, content, 'utf8');
+              console.log(` \x1b[32m✓\x1b[0m Applied ${applied} patches to ${found.relativePath}`);
+              items.forEach(item => results.push({ selector: item.selector, ok: true, file: found.relativePath }));
+            } else {
+              items.forEach(item => results.push({ selector: item.selector, ok: false, reason: 'No patches matched' }));
+            }
+
           } catch (aiErr) {
             console.log(` \x1b[31m✗\x1b[0m AI error: ${aiErr.message}`);
             items.forEach(item => results.push({ selector: item.selector, ok: false, reason: aiErr.message }));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "draply-dev",
-  "version": "1.3.3",
+  "version": "1.3.5",
   "description": "Visual overlay for any frontend project — move, resize, restyle live in the browser, save to CSS",
   "author": "Arman",
   "type": "commonjs",

package/src/draply-features.js

@@ -257,13 +257,18 @@
 
       <!-- SETTINGS -->
       <div class="ps-settings" id="__ps_settings__">
-        <div class="ps-settings-label">Gemini API Key</div>
+        <div class="ps-settings-label">AI Provider</div>
+        <div class="ps-settings-row" style="margin-bottom:6px">
+          <button class="ps-eb active" id="__ps_prov_groq__" data-prov="groq" style="flex:1;text-align:center">Groq (free)</button>
+          <button class="ps-eb" id="__ps_prov_gemini__" data-prov="gemini" style="flex:1;text-align:center">Gemini</button>
+        </div>
+        <div class="ps-settings-label">API Key</div>
         <div class="ps-settings-row">
-          <input class="ps-settings-input" id="__ps_apikey__" type="password" placeholder="AIza...">
+          <input class="ps-settings-input" id="__ps_apikey__" type="password" placeholder="gsk_...">
           <button class="ps-settings-save" id="__ps_keysave__">Save</button>
         </div>
         <div class="ps-settings-status" id="__ps_keystatus__">
-          Get free key at <a href="https://aistudio.google.com/apikey" target="_blank" style="color:#a855f7">aistudio.google.com</a>
+          Free key → <a href="https://console.groq.com/keys" target="_blank" style="color:#a855f7">console.groq.com</a>
         </div>
       </div>
 
@@ -313,11 +318,30 @@
     const keySaveBtn = document.getElementById('__ps_keysave__');
     const keyStatus = document.getElementById('__ps_keystatus__');
     const aiBtn = document.getElementById('__ps_ai__');
+    const provGroq = document.getElementById('__ps_prov_groq__');
+    const provGemini = document.getElementById('__ps_prov_gemini__');
+    let selectedProvider = 'groq';
+
+    // Provider toggle
+    provGroq.onclick = () => {
+      selectedProvider = 'groq';
+      provGroq.classList.add('active');
+      provGemini.classList.remove('active');
+      apiKeyInput.placeholder = 'gsk_...';
+      keyStatus.innerHTML = 'Free key → <a href="https://console.groq.com/keys" target="_blank" style="color:#a855f7">console.groq.com</a>';
+    };
+    provGemini.onclick = () => {
+      selectedProvider = 'gemini';
+      provGemini.classList.add('active');
+      provGroq.classList.remove('active');
+      apiKeyInput.placeholder = 'AIza...';
+      keyStatus.innerHTML = 'Free key → <a href="https://aistudio.google.com/apikey" target="_blank" style="color:#a855f7">aistudio.google.com</a>';
+    };
 
     function checkApiKey() {
       fetch('/draply-config').then(r => r.json()).then(d => {
         if (d.hasKey) {
-          keyStatus.textContent = '✅ API key configured';
+          keyStatus.textContent = '✅ API key configured (' + (d.provider || 'groq') + ')';
           keyStatus.className = 'ps-settings-status ok';
           aiBtn.disabled = false;
         } else {
@@ -333,14 +357,14 @@
       fetch('/draply-config', {
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ apiKey: key, provider: 'gemini' })
+        body: JSON.stringify({ apiKey: key, provider: selectedProvider })
       }).then(r => r.json()).then(d => {
         if (d.ok) {
-          keyStatus.textContent = '✅ API key saved!';
+          keyStatus.textContent = '✅ Saved! (' + selectedProvider + ')';
           keyStatus.className = 'ps-settings-status ok';
           apiKeyInput.value = '';
           aiBtn.disabled = false;
-          showToast('🔑 API key saved');
+          showToast('🔑 API key saved (' + selectedProvider + ')');
         }
       });
     };