[V0_FILE]typescriptreact:file="components/rule-builder/context.tsx" isMerged="true" "use client" import type React from "react" import { createContext, useContext, useReducer, type ReactNode } from "react" import type { Rule, RuleSegment, TestField } from "./types" interface RuleBuilderState { rule: Rule currentStep: number selectedSegment: RuleSegment | null testFields: TestField[] testResult: any isLoading: boolean } type RuleBuilderAction = | { type: "SET_RULE"; payload: Rule } | { type: "SET_STEP"; payload: number } | { type: "SET_SEGMENT"; payload: RuleSegment } | { type: "SET_TEST_FIELDS"; payload: TestField[] } | { type: "SET_TEST_RESULT"; payload: any } | { type: "SET_LOADING"; payload: boolean } | { type: "UPDATE_RULE_FIELD"; payload: { field: keyof Rule; value: any } } const initialState: RuleBuilderState = { rule: { name: "", description: "", items: [], actions: [], }, currentStep: 1, selectedSegment: null, testFields: [], testResult: null, isLoading: false, } function ruleBuilderReducer(state: RuleBuilderState, action: RuleBuilderAction): RuleBuilderState { switch (action.type) { case "SET_RULE": return { ...state, rule: action.payload } case "SET_STEP": return { ...state, currentStep: action.payload } case "SET_SEGMENT": return { ...state, selectedSegment: action.payload } case "SET_TEST_FIELDS": return { ...state, testFields: action.payload } case "SET_TEST_RESULT": return { ...state, testResult: action.payload } case "SET_LOADING": return { ...state, isLoading: action.payload } case "UPDATE_RULE_FIELD": return { ...state, rule: { ...state.rule, [action.payload.field]: action.payload.value }, } default: return state } } const RuleBuilderContext = createContext<{ state: RuleBuilderState dispatch: React.Dispatch } | null>(null) export function RuleBuilderProvider({ children }: { children: ReactNode }) { const [state, dispatch] = useReducer(ruleBuilderReducer, initialState) return {children} } export function useRuleBuilder() { const context = useContext(RuleBuilderContext) if (!context) { throw new Error("useRuleBuilder must be used within RuleBuilderProvider") } return context } [V0_FILE]typescriptreact:file="components/rule-builder/types.ts" isMerged="true" export interface SimpleCondition { id: string field: string condition: string value: string customField?: string } export interface SimpleAction { id: string action: string value: string description?: string when: "always" | "specific" conditionId?: string } export interface ConditionItem { id: string type: "condition" | "group" condition?: SimpleCondition groupOperator?: "AND" | "OR" groupConditions?: SimpleCondition[] nextOperator?: "AND" | "OR" | "" } export interface Rule { name: string description: string items: ConditionItem[] actions: SimpleAction[] } export type RuleSegment = "ARC" | "Violation" | "SLA" export interface TestField { id: string name: string value: any type?: "string" | "number" | "boolean" } export interface Field { value: string label: string example: string icon: string description: string category: string type: "string" | "number" | "boolean" } [V0_FILE]typescriptreact:file="components/rule-builder/constants.ts" isMerged="true" import type { Field, RuleSegment } from "./types" export const SEGMENT_CONFIGS: Record< RuleSegment, { icon: string description: string color: string } > = { ARC: { icon: "🏛️", description: "Architectural Review Committee rules", color: "blue", }, Violation: { icon: "⚠️", description: "Violation management rules", color: "red", }, SLA: { icon: "⏱️", description: "Service Level Agreement rules", color: "green", }, } export const FIELDS: Field[] = [ { value: "status", label: "Status", example: "Pending, Approved, Denied", icon: "📋", description: "Current request status", category: "Status", type: "string", }, { value: "days_old", label: "Days Old", example: "5, 10, 30", icon: "📅", description: "Days since submission", category: "Time", type: "number", }, { value: "priority", label: "Priority", example: "High, Medium, Low", icon: "⚡", description: "Priority level", category: "Priority", type: "string", }, { value: "amount", label: "Amount", example: "1000, 5000", icon: "💰", description: "Dollar amount", category: "Financial", type: "number", }, { value: "votes", label: "Votes", example: "3, 4, 5", icon: "🗳️", description: "Number of votes", category: "Voting", type: "number", }, { value: "total_members", label: "Total Members", example: "5, 7, 9", icon: "👥", description: "Total voting members", category: "Voting", type: "number", }, ] export const CONDITIONS = [ { value: "is", label: "Equals", icon: "=", description: "Must match exactly" }, { value: "is_not", label: "Not Equal", icon: "≠", description: "Must be different" }, { value: "is_more_than", label: "Greater Than", icon: ">", description: "Must be larger" }, { value: "is_less_than", label: "Less Than", icon: "<", description: "Must be smaller" }, { value: "contains", label: "Contains", icon: "⊃", description: "Must include text" }, { value: "is_majority", label: "Is Majority", icon: "🗳️", description: "More than half" }, ] export const ACTIONS = [ { value: "update_status", label: "Update Status", icon: "🔄", description: "Change the status", category: "Status", }, { value: "send_notification", label: "Send Notification", icon: "📧", description: "Send email/alert", category: "Communication", }, { value: "assign_to", label: "Assign To", icon: "👤", description: "Assign to person", category: "Assignment", }, { value: "escalate", label: "Escalate", icon: "🚨", description: "Escalate to higher level", category: "Escalation", }, { value: "calculate_fee", label: "Calculate Fee", icon: "💰", description: "Calculate late fees/interest", category: "Financial", }, ] [V0_FILE]typescriptreact:file="components/rule-builder/wizard.tsx" isMerged="true" "use client" import { Card, CardContent } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Progress } from "@/components/ui/progress" import { ChevronLeft, ChevronRight } from "lucide-react" import { useRuleBuilder } from "./context" import { StepOne } from "./steps/step-one" import { StepTwo } from "./steps/step-two" import { StepThree } from "./steps/step-three" import { StepFour } from "./steps/step-four" const STEPS = [ { id: 1, title: "Setup", component: StepOne }, { id: 2, title: "Conditions", component: StepTwo }, { id: 3, title: "Actions", component: StepThree }, { id: 4, title: "Test", component: StepFour }, ] export function RuleBuilderWizard() { const { state, dispatch } = useRuleBuilder() const { currentStep, rule } = state const currentStepData = STEPS.find((s) => s.id === currentStep) const StepComponent = currentStepData?.component const progress = Math.min(100, (currentStep / STEPS.length) * 100) const canProceed = () => { switch (currentStep) { case 1: return rule.name && state.selectedSegment case 2: return rule.items.length > 0 case 3: return rule.actions.length > 0 case 4: return true default: return false } } return (

{/* Header */}

Rule Builder

Create intelligent business rules in minutes

{/* Progress */}

Step {currentStep} of {STEPS.length}: {currentStepData?.title} {Math.round(progress)}%

{/* Step Navigation */}

{STEPS.map((step, index) => (

{step.id}

{step.title} {index < STEPS.length - 1 && }

))}

{/* Step Content */} {StepComponent && } {/* Navigation */}

) } [V0_FILE]typescriptreact:file="components/rule-builder/steps/step-two.tsx" isMerged="true" "use client" import { Button } from "@/components/ui/button" import { Plus, GitBranch } from "lucide-react" import { useRuleBuilder } from "../context" import { ConditionBuilder } from "../components/condition-builder" import { generateId } from "../utils" export function StepTwo() { const { state, dispatch } = useRuleBuilder() const { rule } = state const addCondition = () => { const newItem = { id: generateId(), type: "condition" as const, condition: { id: generateId(), field: "", condition: "", value: "", }, nextOperator: "" as const, } dispatch({ type: "SET_RULE", payload: { ...rule, items: [...rule.items, newItem], }, }) } const addGroup = () => { const newItem = { id: generateId(), type: "group" as const, groupOperator: "AND" as const, groupConditions: [ { id: generateId(), field: "", condition: "", value: "", }, ], nextOperator: "" as const, } dispatch({ type: "SET_RULE", payload: { ...rule, items: [...rule.items, newItem], }, }) } return (

Define Conditions

Set up the conditions that will trigger your rule

{rule.items.map((item, index) => ( ))}

) } [V0_FILE]typescriptreact:file="components/rule-builder/steps/step-three.tsx" isMerged="true" "use client" import { Button } from "@/components/ui/button" import { Plus } from "lucide-react" import { useRuleBuilder } from "../context" import { ActionBuilder } from "../components/action-builder" import { generateId } from "../utils" export function StepThree() { const { state, dispatch } = useRuleBuilder() const { rule } = state const addAction = () => { const newAction = { id: generateId(), action: "", value: "", when: "always" as const, } dispatch({ type: "SET_RULE", payload: { ...rule, actions: [...rule.actions, newAction], }, }) } return (

Define Actions

Set up what happens when your conditions are met

{rule.actions.map((action) => ( ))}

) } [V0_FILE]typescriptreact:file="components/rule-builder/steps/step-four.tsx" isMerged="true" "use client" import { useState } from "react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Play, Plus, Copy, CheckCircle2, XCircle, Zap } from "lucide-react" import { useRuleBuilder } from "../context" import { FIELDS } from "../constants" import type { TestField } from "../types" import { simulateRule, generateRuleSchema } from "../services/rule-service" export function StepFour() { const { state, dispatch } = useRuleBuilder() const { rule, testFields, testResult } = state const [isTesting, setIsTesting] = useState(false) const addTestField = () => { const newField: TestField = { id: `field_${Date.now()}`, name: "", value: "", type: "string", } dispatch({ type: "SET_TEST_FIELDS", payload: [...testFields, newField], }) } const updateTestField = (id: string, field: keyof TestField, value: any) => { const updated = testFields.map((f) => (f.id === id ? { ...f, [field]: value } : f)) dispatch({ type: "SET_TEST_FIELDS", payload: updated }) } const removeTestField = (id: string) => { const filtered = testFields.filter((f) => f.id !== id) dispatch({ type: "SET_TEST_FIELDS", payload: filtered }) } const runTest = async () => { setIsTesting(true) try { const testData = testFields.reduce( (acc, field) => { acc[field.name] = field.value return acc }, {} as Record, ) const result = simulateRule(rule, testData) dispatch({ type: "SET_TEST_RESULT", payload: result }) } catch (error) { console.error("Test failed:", error) } finally { setIsTesting(false) } } const copySchema = () => { const schema = generateRuleSchema(rule) navigator.clipboard.writeText(JSON.stringify(schema, null, 2)) } return (

Test Your Rule

Add test data to see how your rule behaves

{/* Test Data */}

Test Data

{testFields.map((field) => (

Field Name

Value { const fieldConfig = FIELDS.find((f) => f.value === field.name) const value = fieldConfig?.type === "number" ? Number(e.target.value) || e.target.value : e.target.value updateTestField(field.id, "value", value) }} placeholder="Enter value" type={FIELDS.find((f) => f.value === field.name)?.type === "number" ? "number" : "text"} />

))} {testFields.length === 0 && (

No test fields added. Click "Add Field" to start testing.

)} {/* Test Button */} {/* Test Results */} {testResult && ( {testResult.triggered ? ( ) : ( )} Test Results

{testResult.triggered ? "✅ Rule triggered successfully" : "❌ Rule not triggered"}

{testResult.conditionResults.length > 0 && (

Condition Results:

{testResult.conditionResults.map((result: any, index: number) => (

{result.passed ? ( ) : ( )} {result.description}

))}

)} {testResult.executedActions.length > 0 && (

Executed Actions:

{testResult.executedActions.map((action: any, index: number) => (

{action.type}: {action.value}

))}

)} )} {/* Rule Schema */}

Rule Schema

            {JSON.stringify(generateRuleSchema(rule), null, 2)}

) } [V0_FILE]typescriptreact:file="components/rule-builder/components/condition-builder.tsx" isFixed="true" isQuickEdit="true" isMerged="true" "use client" import { Card, CardContent } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { X, Plus, Target, GitBranch } from "lucide-react" import { useRuleBuilder } from "../context" import type { ConditionItem } from "../types" import { FIELDS, CONDITIONS } from "../constants" import { generateId } from "../utils" interface ConditionBuilderProps { item: ConditionItem index: number isLast: boolean } export function ConditionBuilder({ item, index, isLast }: ConditionBuilderProps) { const { state, dispatch } = useRuleBuilder() const { rule } = state const updateItem = (updates: Partial) => { const updatedItems = rule.items.map((i) => (i.id === item.id ? { ...i, ...updates } : i)) dispatch({ type: "SET_RULE", payload: { ...rule, items: updatedItems }, }) } const updateCondition = (field: string, value: string) => { if (item.condition) { updateItem({ condition: { ...item.condition, [field]: value }, }) } } const updateGroupCondition = (conditionId: string, field: string, value: string) => { if (item.groupConditions) { const updated = item.groupConditions.map((c) => (c.id === conditionId ? { ...c, [field]: value } : c)) updateItem({ groupConditions: updated }) } } const addGroupCondition = () => { if (item.groupConditions) { const newCondition = { id: generateId(), field: "", condition: "", value: "", } updateItem({ groupConditions: [...item.groupConditions, newCondition], }) } } const removeGroupCondition = (conditionId: string) => { if (item.groupConditions && item.groupConditions.length > 1) { const filtered = item.groupConditions.filter((c) => c.id !== conditionId) updateItem({ groupConditions: filtered }) } } const removeItem = () => { if (rule.items.length > 1) { const filtered = rule.items.filter((i) => i.id !== item.id) dispatch({ type: "SET_RULE", payload: { ...rule, items: filtered }, }) } } return (

{item.type === "group" ? ( ) : ( )} {item.type === "group" ? "Condition Group" : "Condition"} {index + 1}

{rule.items.length > 1 && ( )}

{item.type === "condition" && item.condition ? (

Field

Condition

Value updateCondition("value", e.target.value)} placeholder="Enter value" />

) : item.type === "group" && item.groupConditions ? (

Group Operator

{item.groupConditions.map((condition) => (

updateGroupCondition(condition.id, "value", e.target.value)} placeholder="Value" /> {item.groupConditions!.length > 1 && ( )}

))}

) : null} {!isLast && (

Next Operator

)} ) } [V0_FILE]typescriptreact:file="components/rule-builder/components/action-builder.tsx" isMerged="true" "use client" import { Card, CardContent } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Textarea } from "@/components/ui/textarea" import { X, Zap } from "lucide-react" import { useRuleBuilder } from "../context" import type { SimpleAction } from "../types" import { ACTIONS } from "../constants" interface ActionBuilderProps { action: SimpleAction } export function ActionBuilder({ action }: ActionBuilderProps) { const { state, dispatch } = useRuleBuilder() const { rule } = state const updateAction = (field: keyof SimpleAction, value: string) => { const updatedActions = rule.actions.map((a) => (a.id === action.id ? { ...a, [field]: value } : a)) dispatch({ type: "SET_RULE", payload: { ...rule, actions: updatedActions }, }) } const removeAction = () => { if (rule.actions.length > 1) { const filtered = rule.actions.filter((a) => a.id !== action.id) dispatch({ type: "SET_RULE", payload: { ...rule, actions: filtered }, }) } } const renderValueInput = () => { switch (action.action) { case "update_status": return ( updateAction("value", e.target.value)} placeholder="e.g., Approved, Rejected, Escalated" /> ) case "send_notification": return (

{ const message = action.value.split("|")[1] || "" updateAction("value", `${e.target.value}|${message}`) }} placeholder="Recipient email" />

{
                const recipient = action.value.split("|")[0] || ""
                updateAction("value", `${recipient}|${e.target.value}`)
              }}
              placeholder="Message content"
              rows={2}
            />
          </div>
        )
      case "assign_to":
        return (
          <Input
            value={action.value}
            onChange={(e) => updateAction("value", e.target.value)}
            placeholder="Person or role to assign to"
          />
        )
      case "calculate_fee":
        return (
          <div className="grid grid-cols-2 gap-2">
            <Input
              value={action.value.split("|")[0] || ""}
              onChange={(e) => {
                const interest = action.value.split("|")[1] || ""
                updateAction("value", `${e.target.value}|${interest}`)
              }}
              placeholder="Late fee amount"
              type="number"
            />
            <Input
              value={action.value.split("|")[1] || ""}
              onChange={(e) => {
                const fee = action.value.split("|")[0] || ""
                updateAction("value", `${fee}|${e.target.value}`)
              }}
              placeholder="Interest rate %"
              type="number"
            />
          </div>
        )
      default:
        return (
          <Input
            value={action.value}
            onChange={(e) => updateAction("value", e.target.value)}
            placeholder="Enter action value"
          />
        )
    }
  }

return (
    <Card>
      <CardContent className="p-4">
        <div className="flex items-center justify-between mb-4">
          <div className="flex items-center gap-2">
            <Zap className="h-4 w-4 text-green-600" />
            <span className="font-medium">Action</span>
          </div>
          {rule.actions.length > 1 && (
            <Button variant="ghost" size="sm" onClick={removeAction}>
              <X className="h-4 w-4" />
            </Button>
          )}
        </div>

<div className="grid grid-cols-2 gap-4">
          <div className="space-y-2">
            <Label>Action Type</Label>
            <Select value={action.action} onValueChange={(value) => updateAction("action", value)}>
              <SelectTrigger>
                <SelectValue placeholder="Select action" />
              </SelectTrigger>
              <SelectContent>
                {ACTIONS.map((actionType) => (
                  <SelectItem key={actionType.value} value={actionType.value}>
                    <div className="flex items-center gap-2">
                      <span>{actionType.icon}</span>
                      <span>{actionType.label}</span>
                    </div>
                  </SelectItem>
                ))}
              </SelectContent>
            </Select>
          </div>
          <div className="space-y-2">
            <Label>Value</Label>
            {renderValueInput()}
          </div>
        </div>

<div className="mt-4 flex items-center gap-4">
          <Label>Execute</Label>
          <Select value={action.when} onValueChange={(value) => updateAction("when", value as "always" | "specific")}>
            <SelectTrigger className="w-32">
              <SelectValue />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="always">Always</SelectItem>
              <SelectItem value="specific">Conditional</SelectItem>
            </SelectContent>
          </Select>
        </div>
      </CardContent>
    </Card>
  )
}
[V0_FILE]typescriptreact:file="components/rule-builder/services/rule-service.ts" isMerged="true"
import type { Rule, SimpleCondition } from "../types"

export function simulateRule(rule: Rule, data: Record<string, any>) {
  const conditionResults: any[] = []
  const executedActions: any[] = []

const itemResults = rule.items.map((item) => {
    if (item.type === "condition" && item.condition) {
      const result = evaluateCondition(item.condition, data)
      conditionResults.push({
        passed: result,
        description: `${item.condition.field} ${item.condition.condition} "${item.condition.value}" (actual: ${data[item.condition.field]})`,
      })
      return result
    } else if (item.type === "group" && item.groupConditions && item.groupOperator) {
      const groupResults = item.groupConditions.map((cond) => {
        const result = evaluateCondition(cond, data)
        conditionResults.push({
          passed: result,
          description: `${cond.field} ${cond.condition} "${cond.value}" (actual: ${data[cond.field]}) [Group ${item.groupOperator}]`,
        })
        return result
      })

return item.groupOperator === "AND" ? groupResults.every(Boolean) : groupResults.some(Boolean)
    }
    return false
  })

// Evaluate final result with operators
  let finalResult = itemResults[0] || false
  for (let i = 1; i < itemResults.length; i++) {
    const operator = rule.items[i - 1].nextOperator
    if (operator === "AND") {
      finalResult = finalResult && itemResults[i]
    } else if (operator === "OR") {
      finalResult = finalResult || itemResults[i]
    }
  }

// Execute actions if rule triggered
  if (finalResult) {
    rule.actions.forEach((action) => {
      if (action.when === "always") {
        executedActions.push({
          type: action.action,
          value: action.value,
          source: "global",
        })
      }
    })
  }

return {
    triggered: finalResult,
    executedActions,
    conditionResults,
  }
}

function evaluateCondition(condition: SimpleCondition, data: Record<string, any>): boolean {
  const fieldValue = data[condition.field]
  const conditionValue = condition.value

switch (condition.condition) {
    case "is":
      return String(fieldValue).toLowerCase() === String(conditionValue).toLowerCase()
    case "is_not":
      return String(fieldValue).toLowerCase() !== String(conditionValue).toLowerCase()
    case "is_more_than":
      return Number(fieldValue) > Number(conditionValue)
    case "is_less_than":
      return Number(fieldValue) < Number(conditionValue)
    case "contains":
      return String(fieldValue).toLowerCase().includes(String(conditionValue).toLowerCase())
    case "is_majority":
      const votes = Number(fieldValue)
      const totalMembers = data.total_members || 5
      return votes > totalMembers / 2
    default:
      return false
  }
}

export function generateRuleSchema(rule: Rule) {
  return {
    id: `rule_${Date.now()}`,
    name: rule.name,
    description: rule.description,
    isActive: true,
    priority: 1,
    conditions: rule.items,
    actions: rule.actions,
    metadata: {
      createdAt: new Date().toISOString(),
      updatedAt: new Date().toISOString(),
      version: "1.0",
      createdBy: "rule_builder",
    },
  }
}
[V0_FILE]typescriptreact:file="components/rule-builder/utils.ts" isMerged="true"
import { v4 as uuidv4 } from "uuid"

export function generateId(): string {
  return uuidv4()
}

export function formatActionValue(action: any): string {
  if (action.action === "send_notification") {
    const [recipient, message] = action.value.split("|")
    return `To: ${recipient}, Message: ${message}`
  }
  if (action.action === "calculate_fee") {
    const [fee, interest] = action.value.split("|")
    return `Fee: $${fee}, Interest: ${interest}%`
  }
  return action.value
}
[V0_FILE]typescriptreact:file="lib/gemini-service.ts" isEdit="true" isQuickEdit="true"
import { GoogleGenerativeAI } from "@google/generative-ai"

// Only initialize if API key is available
const API_KEY ="AIzaSyDyuFucr597uAfltBiKed7J4z7fp2m_Vvg"

// Export a function that checks if Gemini is available
export function isGeminiAvailable() {
  return !!API_KEY
}

// Export the genAI instance only if API key is available
export const genAI = API_KEY ? new GoogleGenerativeAI(API_KEY) : null
[V0_FILE]typescriptreact:file="components/rule-builder/services/ai-service.ts" isEdit="true" isQuickEdit="true"
import type { Rule, RuleSegment } from "../types"
import { genAI, isGeminiAvailable } from "@/lib/gemini-service"
import { generateId } from "../utils"

export async function evaluateNaturalLanguageRule(
  naturalLanguageRule: string,
  segment: RuleSegment,
): Promise<Rule | null> {
  // Check if Gemini is available
  if (!isGeminiAvailable()) {
    // Return a basic rule structure as fallback
    return createFallbackRule(naturalLanguageRule, segment)
  }

try {
    const model = genAI!.getGenerativeModel({ model: "gemini-1.5-flash" })

const prompt = `
      Convert this natural language rule for ${segment} into a structured format:
      "${naturalLanguageRule}"

Return ONLY a JSON object with this structure:
      {
        "name": "string",
        "description": "string", 
        "items": [
          {
            "id": "string",
            "type": "condition",
            "condition": {
              "id": "string",
              "field": "string",
              "condition": "string", 
              "value": "string"
            },
            "nextOperator": ""
          }
        ],
        "actions": [
          {
            "id": "string",
            "action": "string",
            "value": "string",
            "when": "always"
          }
        ]
      }
    `

const result = await model.generateContent(prompt)
    const response = await result.response
    const text = response.text().trim()

const jsonText = text.replace(/```json\n?|\n?```/g, "").trim()
    const parsed = JSON.parse(jsonText)

return parsed
  } catch (error) {
    console.error("Error evaluating rule:", error)
    return createFallbackRule(naturalLanguageRule, segment)
  }
}

// Create a basic rule structure based on the input
function createFallbackRule(input: string, segment: RuleSegment): Rule {
  // Extract potential field and value from input
  const words = input.toLowerCase().split(/\s+/)

// Look for common patterns
  let field = "status"
  let condition = "is"
  let value = "pending"
  let action = "send_notification"
  let actionValue = "admin@example.com|New rule triggered"

if (words.includes("days") || words.includes("old")) {
    field = "days_old"
    condition = "is_more_than"
    value = "7"
  }

if (words.includes("priority") || words.includes("urgent")) {
    field = "priority"
    value = "high"
  }

if (words.includes("escalate")) {
    action = "escalate"
    actionValue = "manager"
  }

return {
    name: `${segment} Rule`,
    description: input,
    items: [
      {
        id: generateId(),
        type: "condition",
        condition: {
          id: generateId(),
          field,
          condition,
          value,
        },
        nextOperator: "",
      },
    ],
    actions: [
      {
        id: generateId(),
        action,
        value: actionValue,
        when: "always",
      },
    ],
  }
}
[V0_FILE]typescriptreact:file="components/rule-builder/steps/step-one.tsx" isEdit="true" isQuickEdit="true"
"use client"

import { useState } from "react"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Textarea } from "@/components/ui/textarea"
import { Button } from "@/components/ui/button"
import { Brain, Loader2 } from "lucide-react"
import { useRuleBuilder } from "../context"
import { SEGMENT_CONFIGS } from "../constants"
import type { RuleSegment } from "../types"
import { evaluateNaturalLanguageRule } from "../services/ai-service"
import { isGeminiAvailable } from "@/lib/gemini-service"

export function StepOne() {
  const { state, dispatch } = useRuleBuilder()
  const { rule, selectedSegment } = state
  const [naturalLanguageRule, setNaturalLanguageRule] = useState("")
  const [isEvaluating, setIsEvaluating] = useState(false)

const handleSegmentSelect = (segment: RuleSegment) => {
    dispatch({ type: "SET_SEGMENT", payload: segment })
  }

const handleEvaluateRule = async () => {
    if (!naturalLanguageRule || !selectedSegment) return

setIsEvaluating(true)
    try {
      if (!isGeminiAvailable()) {
        // Show a message about missing API key
        alert(
          "Gemini API key not found. Using basic rule creation instead. To use AI features, add your NEXT_PUBLIC_GEMINI_API_KEY to environment variables.",
        )
      }

const evaluatedRule = await evaluateNaturalLanguageRule(naturalLanguageRule, selectedSegment)
      if (evaluatedRule) {
        dispatch({ type: "SET_RULE", payload: evaluatedRule })
        dispatch({ type: "SET_STEP", payload: 2 })
      }
    } catch (error) {
      console.error("Error evaluating rule:", error)
      alert("Failed to evaluate rule. Please try again or create your rule manually.")
    } finally {
      setIsEvaluating(false)
    }
  }

return (
    <div className="space-y-6">
      <div>
        <h2 className="text-xl font-semibold mb-4">Basic Information</h2>

<div className="grid grid-cols-2 gap-4 mb-6">
          <div className="space-y-2">
            <Label htmlFor="name">Rule Name</Label>
            <Input
              id="name"
              value={rule.name}
              onChange={(e) =>
                dispatch({
                  type: "UPDATE_RULE_FIELD",
                  payload: { field: "name", value: e.target.value },
                })
              }
              placeholder="Enter rule name"
            />
          </div>
          <div className="space-y-2">
            <Label htmlFor="description">Description</Label>
            <Input
              id="description"
              value={rule.description}
              onChange={(e) =>
                dispatch({
                  type: "UPDATE_RULE_FIELD",
                  payload: { field: "description", value: e.target.value },
                })
              }
              placeholder="Brief description"
            />
          </div>
        </div>
      </div>

<div>
        <Label className="text-base font-medium mb-3 block">Rule Type</Label>
        <div className="grid grid-cols-3 gap-4 mb-6">
          {Object.entries(SEGMENT_CONFIGS).map(([key, config]) => (
            <div
              key={key}
              className={`p-4 rounded-lg border-2 cursor-pointer transition-all hover:shadow-md ${
                selectedSegment === key ? "border-blue-500 bg-blue-50" : "border-gray-200 hover:border-gray-300"
              }`}
              onClick={() => handleSegmentSelect(key as RuleSegment)}
            >
              <div className="text-2xl mb-2">{config.icon}</div>
              <div className="font-medium text-gray-900">{key}</div>
              <div className="text-sm text-gray-600">{config.description}</div>
            </div>
          ))}
        </div>
      </div>

{selectedSegment && (
        <div>
          <Label className="text-base font-medium mb-3 block">Describe Your Rule</Label>
          <Textarea
            value={naturalLanguageRule}
            onChange={(e) => setNaturalLanguageRule(e.target.value)}
            placeholder={`Describe your ${selectedSegment} rule in plain English. For example:
"If a violation is critical and outstanding for more than 7 days, escalate to the board"
"When an ARC request is pending for over 14 days, notify the committee"`}
            rows={4}
            className="mb-4"
          />
          <Button onClick={handleEvaluateRule} disabled={isEvaluating || !naturalLanguageRule} className="w-full">
            {isEvaluating ? (
              <>
                <Loader2 className="h-4 w-4 mr-2 animate-spin" />
                Converting to Rule...
              </>
            ) : (
              <>
                <Brain className="h-4 w-4 mr-2" />
                Convert to Rule
              </>
            )}
          </Button>
        </div>
      )}
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isQuickEdit="true"
"use client"

import { RuleBuilderProvider } from "@/components/rule-builder/context"
import { RuleBuilderWizard } from "@/components/rule-builder/wizard"
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"
import { AlertCircle } from "lucide-react"
import { isGeminiAvailable } from "@/lib/gemini-service"

export default function Page() {
  return (
    <RuleBuilderProvider>
      <div className="min-h-screen bg-gradient-to-br from-slate-50 to-blue-50 py-8">
        {!isGeminiAvailable() && (
          <div className="container mx-auto px-4 max-w-4xl mb-6">
            <Alert variant="warning" className="bg-amber-50 border-amber-200">
              <AlertCircle className="h-4 w-4 text-amber-600" />
              <AlertTitle className="text-amber-800">API Key Missing</AlertTitle>
              <AlertDescription className="text-amber-700">
                Gemini API key not found. AI features will be limited. To enable AI-powered rule creation, add your
                NEXT_PUBLIC_GEMINI_API_KEY to environment variables.
              </AlertDescription>
            </Alert>
          </div>
        )}
        <RuleBuilderWizard />
      </div>
    </RuleBuilderProvider>
  )
}</article></body></html>