@dropins/mcp 0.1.0

package/dist/operations/suggest-slot-implementation.js

@@ -0,0 +1,183 @@
+import { z } from "zod";
+import { formatSuccessResponse, formatExceptionResponse, } from "../common/response-handling.js";
+import { getSlotRegistry, getAllDropinNames, findModel, } from "../common/registry-loader.js";
+import { projectDirGuard, readBlockFile, extractImportsFromBlock, } from "../common/project-reader.js";
+import { sanitizeForComment, validateBlockName } from "../common/sanitize.js";
+export const SuggestSlotSchema = z.object({
+    request: z
+        .string()
+        .describe('What the merchant wants (e.g. "Add loyalty points badge next to price in cart")'),
+    blockName: z.string().describe('Block name (e.g. "commerce-cart")'),
+    projectDir: z
+        .string()
+        .describe("Absolute path to the merchant storefront project root"),
+});
+function scoreSlotRelevance(request, slot, _container) {
+    const lowerReq = request.toLowerCase();
+    const lowerSlot = slot.name.toLowerCase();
+    const lowerDesc = (slot.description ?? "").toLowerCase();
+    let score = 0;
+    if (lowerReq.includes(lowerSlot))
+        score += 10;
+    if (lowerSlot.includes("footer") && lowerReq.includes("below"))
+        score += 3;
+    if (lowerSlot.includes("footer") && lowerReq.includes("after"))
+        score += 3;
+    if (lowerSlot.includes("heading") && lowerReq.includes("title"))
+        score += 3;
+    if (lowerSlot.includes("heading") && lowerReq.includes("header"))
+        score += 3;
+    if (lowerSlot.includes("thumbnail") && lowerReq.includes("image"))
+        score += 3;
+    if (lowerSlot.includes("thumbnail") && lowerReq.includes("photo"))
+        score += 3;
+    if (lowerSlot.includes("price") && lowerReq.includes("price"))
+        score += 5;
+    if (lowerSlot.includes("price") && lowerReq.includes("cost"))
+        score += 3;
+    if (lowerSlot.includes("content") && lowerReq.includes("content"))
+        score += 3;
+    if (lowerSlot.includes("content") && lowerReq.includes("custom"))
+        score += 2;
+    if (lowerSlot.includes("agreement") && lowerReq.includes("terms"))
+        score += 5;
+    if (lowerSlot.includes("agreement") && lowerReq.includes("checkbox"))
+        score += 3;
+    const reqWords = lowerReq.split(/\s+/);
+    for (const word of reqWords) {
+        if (word.length > 3 && lowerDesc.includes(word))
+            score += 2;
+        if (word.length > 3 && lowerSlot.includes(word))
+            score += 2;
+    }
+    return score;
+}
+function generateSlotCode(slot, request) {
+    const contextType = slot.contextType ?? "DefaultSlotContext";
+    const customMethods = slot.customMethods ?? [];
+    const hasAppendAgreement = customMethods.includes("appendAgreement");
+    if (hasAppendAgreement) {
+        return `${slot.name}: (ctx) => {
+  // ${sanitizeForComment(request)}
+  ctx.appendAgreement(() => ({
+    name: 'custom-agreement',
+    mode: 'manual',
+    translationId: 'Custom.Agreement.Label',
+  }));
+},`;
+    }
+    return `${slot.name}: (ctx) => {
+  // ${sanitizeForComment(request)}
+  // Context type: ${contextType}
+  const element = document.createElement('div');
+  element.className = 'custom-${slot.name.toLowerCase()}';
+
+  // Build your custom content here
+  element.textContent = 'Custom content';
+
+  ctx.appendChild(element);
+},`;
+}
+export async function suggestSlotImplementation(params) {
+    try {
+        const blockNameError = validateBlockName(params.blockName);
+        if (blockNameError) {
+            return formatSuccessResponse("Invalid block name", {
+                error: blockNameError,
+            });
+        }
+        const guard = projectDirGuard(params.projectDir);
+        if (guard)
+            return guard;
+        const blockContent = readBlockFile(params.projectDir, params.blockName);
+        let detectedDropins = [];
+        let detectedContainers = [];
+        if (blockContent) {
+            const imports = extractImportsFromBlock(blockContent);
+            detectedContainers = imports.containerImports;
+            for (const imp of imports.dropinImports) {
+                const match = imp.match(/@dropins\/(storefront-[^/]+)/);
+                if (match && !detectedDropins.includes(match[1])) {
+                    detectedDropins.push(match[1]);
+                }
+            }
+        }
+        else {
+            const match = params.blockName.match(/^commerce-(.+)/);
+            if (match) {
+                const hint = match[1];
+                const allDropins = getAllDropinNames();
+                detectedDropins = allDropins.filter((d) => d.includes(hint) || hint.includes(d.replace("storefront-", "")));
+            }
+        }
+        if (detectedDropins.length === 0) {
+            detectedDropins = getAllDropinNames();
+        }
+        const suggestions = [];
+        const registry = getSlotRegistry();
+        for (const dropinName of detectedDropins) {
+            const dropinData = registry.dropins[dropinName];
+            if (!dropinData)
+                continue;
+            for (const [containerName, containerData] of Object.entries(dropinData.containers)) {
+                if (detectedContainers.length > 0 &&
+                    !detectedContainers.includes(containerName)) {
+                    continue;
+                }
+                for (const slot of containerData.slots) {
+                    const score = scoreSlotRelevance(params.request, slot, containerName);
+                    if (score > 0) {
+                        suggestions.push({
+                            dropin: dropinName,
+                            container: containerName,
+                            slotName: slot.name,
+                            description: slot.description,
+                            contextType: slot.contextType ?? "DefaultSlotContext",
+                            relevance: score >= 8 ? "high" : score >= 4 ? "medium" : "low",
+                            example: slot.example ?? "",
+                            codeSnippet: generateSlotCode(slot, params.request),
+                        });
+                    }
+                }
+            }
+        }
+        suggestions.sort((a, b) => {
+            const order = { high: 0, medium: 1, low: 2 };
+            return ((order[a.relevance] ?? 3) -
+                (order[b.relevance] ?? 3));
+        });
+        const topSuggestions = suggestions.slice(0, 5);
+        const resolvedTypes = {};
+        for (const suggestion of topSuggestions) {
+            const rawType = suggestion.contextType;
+            if (!rawType || rawType === "DefaultSlotContext")
+                continue;
+            const namedTypes = rawType.match(/\b[A-Z][A-Za-z0-9]+\b/g) ?? [];
+            for (const typeName of namedTypes) {
+                if (typeName in resolvedTypes)
+                    continue;
+                const matches = findModel(typeName);
+                if (matches.length > 0) {
+                    resolvedTypes[typeName] = matches[0].definition;
+                }
+            }
+        }
+        return formatSuccessResponse(topSuggestions.length > 0
+            ? `Found ${topSuggestions.length} slot suggestion(s) for: "${params.request}"`
+            : `No matching slots found for: "${params.request}"`, {
+            request: params.request,
+            blockName: params.blockName,
+            detectedDropins,
+            detectedContainers,
+            blockFound: !!blockContent,
+            suggestions: topSuggestions,
+            ...(Object.keys(resolvedTypes).length > 0 && { resolvedTypes }),
+            hint: topSuggestions.length === 0
+                ? "Try rephrasing your request, or use list_slots to browse available slots"
+                : undefined,
+        });
+    }
+    catch (error) {
+        return formatExceptionResponse(error, "suggesting slot implementation");
+    }
+}