@keak/sdk 1.0.9 → 2.0.1

package/src/cli/ai-helper.js

@@ -12,7 +12,7 @@ class AIHelper {
         content: fileContent,
         fileName: filePath.split('/').pop(),
         framework: framework,
-        task: 'add_keak_provider'
+        task: 'add_keak_hook'
       });
 
       const options = {
@@ -111,12 +111,10 @@ class AIHelper {
 
 // Fallback AI logic when API is not available
 class LocalAIHelper {
-  addKeakProvider(content, isTypeScript = false) {
+  addKeakHook(content) {
     const lines = content.split('\n');
     const result = [];
     let importAdded = false;
-    let inJSXReturn = false;
-    let jsxDepth = 0;
     let lastImportLine = -1;
 
     // First pass: find last import
@@ -129,76 +127,156 @@ class LocalAIHelper {
     // Add import after last import
     for (let i = 0; i < lines.length; i++) {
       result.push(lines[i]);
-      
+
       if (i === lastImportLine && !importAdded) {
-        result.push("import { KeakProvider } from '@keak/sdk';");
+        result.push("import { useKeak, KeakToolbar } from '@keak/sdk';");
         importAdded = true;
       }
     }
 
     // If no imports found, add at the beginning
     if (!importAdded) {
-      result.unshift("import { KeakProvider } from '@keak/sdk';");
+      result.unshift("import { useKeak, KeakToolbar } from '@keak/sdk';");
     }
 
-    // Now wrap the appropriate component
+    // Now add hook to the appropriate location
     const finalContent = result.join('\n');
-    
-    // Try different wrapping strategies
+
+    // Try different strategies based on file type
     if (finalContent.includes('ReactDOM.render')) {
       return this.wrapReactDOMRender(finalContent);
     } else if (finalContent.includes('createRoot')) {
       return this.wrapCreateRoot(finalContent);
     } else if (finalContent.includes('export default function')) {
-      return this.wrapDefaultExport(finalContent);
+      return this.addHookToDefaultExport(finalContent);
     } else {
-      return this.wrapGenericComponent(finalContent);
+      return this.addHookToGenericComponent(finalContent);
     }
   }
 
   wrapReactDOMRender(content) {
-    return content.replace(
-      /ReactDOM\.render\s*\(\s*(<[\s\S]*?[\s\S]*?<\/[\s\S]*?)\s*,/,
+    // For ReactDOM.render, create a KeakWrapper component with the hook
+    const wrapperComponent = `
+// Keak wrapper component with hook
+function KeakWrapper({ children }) {
+  useKeak({ debug: true });
+  return (
+    <>
+      {children}
+      <KeakToolbar position="bottom-right" />
+    </>
+  );
+}
+`;
+
+    // Insert wrapper component before ReactDOM.render
+    const renderIndex = content.indexOf('ReactDOM.render');
+    if (renderIndex === -1) return content;
+
+    const beforeRender = content.substring(0, renderIndex);
+    const afterRender = content.substring(renderIndex);
+
+    // Wrap the rendered component
+    const wrappedRender = afterRender.replace(
+      /ReactDOM\.render\s*\(\s*(<[\s\S]*?>[\s\S]*?<\/[\s\S]*?>)\s*,/,
       `ReactDOM.render(
-  <KeakProvider config={{ apiKey: 'demo', debug: true }}$1
-  </KeakProvider,`
+  <KeakWrapper>
+    $1
+  </KeakWrapper>,`
     );
+
+    return beforeRender + wrapperComponent + wrappedRender;
   }
 
   wrapCreateRoot(content) {
-    return content.replace(
-      /root\.render\s*\(\s*(<[\s\S]*?[\s\S]*?<\/[\s\S]*?)\s*\)/,
+    // For createRoot, create a KeakWrapper component with the hook
+    const wrapperComponent = `
+// Keak wrapper component with hook
+function KeakWrapper({ children }) {
+  useKeak({ debug: true });
+  return (
+    <>
+      {children}
+      <KeakToolbar position="bottom-right" />
+    </>
+  );
+}
+`;
+
+    // Insert wrapper component before root.render
+    const renderIndex = content.indexOf('root.render');
+    if (renderIndex === -1) return content;
+
+    const beforeRender = content.substring(0, renderIndex);
+    const afterRender = content.substring(renderIndex);
+
+    // Wrap the rendered component
+    const wrappedRender = afterRender.replace(
+      /root\.render\s*\(\s*(<[\s\S]*?>[\s\S]*?<\/[\s\S]*?>)\s*\)/,
       `root.render(
-  <KeakProvider config={{ apiKey: 'demo', debug: true }}$1
-  </KeakProvider)`
+  <KeakWrapper>
+    $1
+  </KeakWrapper>)`
     );
+
+    return beforeRender + wrapperComponent + wrappedRender;
   }
 
-  wrapDefaultExport(content) {
-    // Find the return statement in the default export function
-    const functionMatch = content.match(/(export\s+default\s+function\s+\w+\s*\([^)]*\)\s*{[\s\S]*?return\s+)\(?([\s\S]*?)\)?(\s*;?\s*})/);
-    
+  addHookToDefaultExport(content) {
+    // For default export components, add the hook directly to the component body
+    const functionMatch = content.match(/(export\s+default\s+function\s+\w+\s*\([^)]*\)\s*\{)\s*/);
+
     if (functionMatch) {
-      const wrapped = `${functionMatch[1]}(
-    <KeakProvider config={{ apiKey: 'demo', debug: true }}${functionMatch[2]}
-    </KeakProvider)${functionMatch[3]}`;
-      return content.replace(functionMatch[0], wrapped);
+      // Add hook at the start of the component
+      const withHook = content.replace(
+        functionMatch[0],
+        `${functionMatch[1]}
+  useKeak({ debug: true });
+  `
+      );
+
+      // Add KeakToolbar before the closing JSX tag
+      const returnMatch = withHook.match(/(return\s+\([\s\S]*?)(\s*<\/\w+>\s*\)\s*;?\s*})/);
+      if (returnMatch) {
+        return withHook.replace(
+          returnMatch[0],
+          `${returnMatch[1]}
+      <KeakToolbar position="bottom-right" />${returnMatch[2]}`
+        );
+      }
+
+      return withHook;
     }
-    
+
     return content;
   }
 
-  wrapGenericComponent(content) {
-    // Try to find any return statement with JSX
-    const returnMatch = content.match(/(return\s+)\(?([\s\S]*?<[\s\S]*?[\s\S]*?<\/[\s\S]*?)\)?(\s*;?)/);
-    
-    if (returnMatch) {
-      const wrapped = `${returnMatch[1]}(
-    <KeakProvider config={{ apiKey: 'demo', debug: true }}${returnMatch[2]}
-    </KeakProvider)${returnMatch[3]}`;
-      return content.replace(returnMatch[0], wrapped);
+  addHookToGenericComponent(content) {
+    // For generic components, try to add the hook to the component body
+    const functionMatch = content.match(/(function\s+\w+\s*\([^)]*\)\s*\{)\s*/);
+
+    if (functionMatch) {
+      // Add hook at the start of the component
+      const withHook = content.replace(
+        functionMatch[0],
+        `${functionMatch[1]}
+  useKeak({ debug: true });
+  `
+      );
+
+      // Add KeakToolbar before the closing JSX tag
+      const returnMatch = withHook.match(/(return\s+\([\s\S]*?)(\s*<\/\w+>\s*\)\s*;?)/);
+      if (returnMatch) {
+        return withHook.replace(
+          returnMatch[0],
+          `${returnMatch[1]}
+      <KeakToolbar position="bottom-right" />${returnMatch[2]}`
+        );
+      }
+
+      return withHook;
     }
-    
+
     return content;
   }
 }