Merge pull request #68 from sauravpanda/feature/non-ai-semantic-abstraction

WIP: Feature/non ai semantic abstraction

Author: sauravpanda

extension/package-lock.json

@@ -17,6 +17,67 @@ const getScreenshot = (step: Step): string | undefined => {
   return undefined;
 };
 
+// Helper function to format step details based on type
+const formatStepDetails = (step: any): string => {
+  switch (step.type) {
+    case "navigation":
+      return step.url;
+    case "click":
+      return step.targetText || step.elementText || step.cssSelector || "Click action";
+    case "input":
+      const value = step.value || "";
+      const target = step.targetText || step.cssSelector || "Input field";
+      return `${target}: "${value}"`;
+    case "key_press":
+      return `Key: ${step.key}`;
+    case "scroll":
+      return `(${step.scrollX}, ${step.scrollY})`;
+    case "extract":
+      return step.extractionGoal || "AI Extraction";
+    default:
+      return "Unknown action";
+  }
+};
+
+// Helper function to get step icon based on type
+const getStepIcon = (step: any): string => {
+  switch (step.type) {
+    case "navigation":
+      return "🔗";
+    case "click":
+      return "👆";
+    case "input":
+      return "✏️";
+    case "key_press":
+      return "⌨️";
+    case "scroll":
+      return "📜";
+    case "extract":
+      return "🤖";
+    default:
+      return "❓";
+  }
+};
+
+// Helper function to get background color based on step type
+const getStepBgColor = (step: any, isSelected: boolean): string => {
+  if (isSelected) {
+    switch (step.type) {
+      case "extract":
+        return "bg-blue-100 border-blue-300";
+      default:
+        return "bg-blue-50 border-blue-200";
+    }
+  } else {
+    switch (step.type) {
+      case "extract":
+        return "bg-blue-25 border-blue-100 hover:bg-blue-50";
+      default:
+        return "bg-white border-gray-200 hover:bg-gray-50";
+    }
+  }
+};
+
 // Component to render a single step as a card
 const StepCard: React.FC<{
   step: Step;
@@ -32,23 +93,36 @@ const StepCard: React.FC<{
     switch (step.type) {
       case "click": {
         const s = step as ClickStep;
+        // Enhanced display for radio buttons
+        if (s.radioButtonInfo && s.radioButtonInfo.fieldName && s.radioButtonInfo.optionValue) {
+          return (
+            <div className="flex items-center space-x-2">
+              <span className="text-lg">📻</span>
+              <span className="truncate">
+                Select <strong>{s.radioButtonInfo.optionValue}</strong> for <strong>{s.radioButtonInfo.fieldName}</strong>
+              </span>
+            </div>
+          );
+        }
+        // Standard click display
+        const targetDescription = s.targetText || s.elementText || s.elementTag;
         return (
           <div className="flex items-center space-x-2">
             <span className="text-lg">🖱️</span>
             <span className="truncate">
-              Click on <strong>{s.elementTag}</strong>
-              {s.elementText && `: "${s.elementText}"`}
+              Click on <strong>{targetDescription}</strong>
             </span>
           </div>
         );
       }
       case "input": {
         const s = step as InputStep;
+        const targetDescription = s.targetText || s.elementTag;
         return (
           <div className="flex items-center space-x-2">
             <span className="text-lg">⌨️</span>
             <span className="truncate">
-              Input into <strong>{s.elementTag}</strong>: "{s.value}"
+              Input into <strong>{targetDescription}</strong>: "{s.value}"
             </span>
           </div>
         );
@@ -138,6 +212,24 @@ const StepCard: React.FC<{
                 <strong>Element:</strong> {s.elementTag}
               </p>
             )}
+            {(s as ClickStep | InputStep).targetText && (
+              <p>
+                <strong>Target Text:</strong> {(s as ClickStep | InputStep).targetText}
+              </p>
+            )}
+            {(s as ClickStep).radioButtonInfo && (
+              <div>
+                <p>
+                  <strong>Field Name:</strong> {(s as ClickStep).radioButtonInfo?.fieldName}
+                </p>
+                <p>
+                  <strong>Selected Option:</strong> {(s as ClickStep).radioButtonInfo?.optionValue}
+                </p>
+                <p>
+                  <strong>All Options:</strong> {(s as ClickStep).radioButtonInfo?.allOptions?.join(', ')}
+                </p>
+              </div>
+            )}
             {(s as ClickStep).elementText && (
               <p>
                 <strong>Text:</strong> {(s as ClickStep).elementText}
@@ -178,6 +270,17 @@ const StepCard: React.FC<{
         );
         break;
       }
+      case "extract": {
+        const s = step as any; // ExtractStep
+        specificInfo = (
+          <>
+            <p>
+              <strong>Extraction Goal:</strong> {s.extractionGoal}
+            </p>
+          </>
+        );
+        break;
+      }
       default:
         specificInfo = (
           <p>Details not available for type: {(step as any).type}</p>
@@ -192,19 +295,20 @@ const StepCard: React.FC<{
     );
   };
 
-  return (
-    <div
-      id={`event-item-${index}`} // Keep ID for potential scrolling
-      onClick={onSelect}
-      className={` 
-        border rounded-lg mb-3 overflow-hidden cursor-pointer transition-all duration-150 ease-in-out 
-        ${
-          isSelected
-            ? "border-primary shadow-md scale-[1.01]"
-            : "border-border hover:border-muted-foreground/50 hover:shadow-sm"
-        } 
-      `}
-    >
+      return (
+      <div
+        id={`event-item-${index}`} // Keep ID for potential scrolling
+        onClick={onSelect}
+        className={` 
+          border rounded-lg mb-3 overflow-hidden cursor-pointer transition-all duration-150 ease-in-out 
+          ${getStepBgColor(step, isSelected)}
+          ${
+            isSelected
+              ? "shadow-md scale-[1.01]"
+              : "hover:shadow-sm"
+          } 
+        `}
+      >
       {/* Card Content using Flexbox */}
       <div className="flex items-start p-3 space-x-3">
         {/* Left side: Summary and Details */}

extension/src/entrypoints/background.ts

@@ -1,15 +1,129 @@
-import React from "react";
+import React, { useState } from "react";
 import { useWorkflow } from "../context/workflow-provider";
 import { Button } from "@/components/ui/button"; // Reverted to alias path
 
 export const InitialView: React.FC = () => {
   const { startRecording } = useWorkflow();
+  const [showTemplates, setShowTemplates] = useState(false);
+
+  const workflowTemplates = [
+    {
+      name: "E-commerce Product Research",
+      description: "Navigate product pages and extract prices, reviews, specifications",
+      steps: "Search → Product page → Extract pricing & reviews",
+      icon: "🛒"
+    },
+    {
+      name: "Job Listings Scraper", 
+      description: "Browse job boards and extract job details, requirements, salaries",
+      steps: "Search jobs → Job listings → Extract job details",
+      icon: "💼"
+    },
+    {
+      name: "Travel Booking Flow",
+      description: "Search flights/hotels and extract prices, availability, options",
+      steps: "Search → Results → Extract pricing & options", 
+      icon: "✈️"
+    },
+    {
+      name: "Lead Generation",
+      description: "Navigate directories and extract contact information",
+      steps: "Directory → Company pages → Extract contact info",
+      icon: "📊"
+    },
+    {
+      name: "Social Media Monitoring",
+      description: "Browse social platforms and extract posts, metrics, engagement",
+      steps: "Profile/hashtag → Posts → Extract content & metrics",
+      icon: "📱"
+    },
+    {
+      name: "Custom Workflow",
+      description: "Record any workflow with manual actions and AI extraction",
+      steps: "Start recording and add AI extraction when needed",
+      icon: "🎯"
+    }
+  ];
 
   return (
-    <div className="flex flex-col items-center justify-center h-full space-y-4">
-      <h2 className="text-lg font-semibold">Record a Workflow</h2>
+    <div className="flex flex-col h-full bg-white">
+      <div className="flex-grow flex flex-col items-center justify-center space-y-6 p-4">
+        <div className="text-center space-y-2">
+          <h2 className="text-xl font-semibold text-gray-900">Create a Workflow</h2>
+          <p className="text-sm text-gray-600 max-w-md">
+            Record your actions and add AI extraction steps to automatically gather data from web pages
+          </p>
+        </div>
+
+        <div className="space-y-3 w-full max-w-md">
+          <Button 
+            onClick={startRecording} 
+            className="w-full h-12 text-base font-medium"
+            size="lg"
+          >
+            🔴 Start Recording Workflow
+          </Button>
+          
+          <Button 
+            variant="outline" 
+            onClick={() => setShowTemplates(!showTemplates)}
+            className="w-full text-sm"
+          >
+            📋 View Workflow Templates
+          </Button>
+        </div>
+
+        {showTemplates && (
+          <div className="w-full max-w-2xl space-y-3">
+            <h3 className="text-sm font-medium text-center text-gray-900">Workflow Templates</h3>
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-3 max-h-64 overflow-y-auto">
+              {workflowTemplates.map((template, index) => (
+                <div 
+                  key={index}
+                  className="border border-gray-200 rounded-lg p-3 hover:bg-gray-50 hover:border-gray-300 cursor-pointer transition-all"
+                  onClick={() => {
+                    setShowTemplates(false);
+                    startRecording();
+                  }}
+                >
+                  <div className="flex items-start space-x-3">
+                    <span className="text-2xl">{template.icon}</span>
+                    <div className="flex-1 min-w-0">
+                      <h4 className="text-sm font-medium text-gray-900 truncate">{template.name}</h4>
+                      <p className="text-xs text-gray-600 mt-1">{template.description}</p>
+                      <div className="text-xs text-blue-600 mt-2 font-medium">
+                        {template.steps}
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              ))}
+            </div>
+            <div className="text-xs text-center text-gray-600 bg-blue-50 p-3 rounded border border-blue-200">
+              💡 <strong>Pro tip:</strong> Add AI extraction steps during recording to automatically capture data from the final page. 
+              The AI can extract structured information like prices, contact details, or any specific data you describe.
+            </div>
+          </div>
+        )}
 
-      <Button onClick={startRecording}>Start Recording</Button>
+        <div className="text-center space-y-2 max-w-md">
+          <h3 className="text-sm font-medium text-gray-900">How it works:</h3>
+          <div className="text-xs text-gray-600 space-y-1">
+            <div className="flex items-center space-x-2">
+              <span>1️⃣</span>
+              <span>Record your actions (clicks, inputs, navigation)</span>
+            </div>
+            <div className="flex items-center space-x-2">
+              <span>2️⃣</span>
+              <span>Add AI extraction steps when you want to gather data</span>
+            </div>
+            <div className="flex items-center space-x-2">
+              <span>3️⃣</span>
+              <span>Save and run your workflow to automate the process</span>
+            </div>
+          </div>
+        </div>
+      </div>
     </div>
   );
 };