[V0_FILE]typescriptreact:file="components/flow-canvas.tsx" isMerged="true" "use client" import { useCallback, useState } from "react" import ReactFlow, { Background, Controls, MiniMap, addEdge, useEdgesState, useNodesState, type Connection, ConnectionMode, ConnectionLineType, } from "reactflow" import "reactflow/dist/style.css" import InputNode from "./nodes/input-node" import ProcessorNode from "./nodes/processor-node" import OutputNode from "./nodes/output-node" import LogicNode from "./nodes/logic-node" // Import the new LogicNode import type { NodeData, EdgeData } from "@/lib/types" const nodeTypes = { input: InputNode, processor: ProcessorNode, output: OutputNode, logic: LogicNode, // Add the LogicNode to nodeTypes } const defaultEdgeOptions = { animated: true, style: { stroke: '#3b82f6', strokeWidth: 2, }, } const connectionLineStyle = { strokeWidth: 2, stroke: '#3b82f6', } interface FlowCanvasProps { nodes: NodeData[] edges: EdgeData[] setNodes: (nodes: NodeData[]) => void setEdges: (edges: EdgeData[]) => void } export default function FlowCanvas({ nodes, edges, setNodes, setEdges }: FlowCanvasProps) { const [reactFlowNodes, setReactFlowNodes, onNodesChange] = useNodesState(nodes) const [reactFlowEdges, setReactFlowEdges, onEdgesChange] = useEdgesState(edges) const [connectionStartNode, setConnectionStartNode] = useState(null) const handleNodeDataUpdate = useCallback( (nodeId: string, newData: any) => { setReactFlowNodes((nds) => { const updatedNodes = nds.map((node) => { if (node.id === nodeId) { return { ...node, data: { ...node.data, ...newData }, } } // Find connected nodes and update them const connectedEdges = reactFlowEdges.filter( (edge) => edge.source === nodeId && edge.target === node.id ) if (connectedEdges.length > 0) { if (node.type === 'logic') { // Get all input connections to this logic node const allInputs = reactFlowEdges .filter(edge => edge.target === node.id) .reduce((acc, edge) => { const sourceNode = nds.find(n => n.id === edge.source) if (sourceNode?.data.output) { acc[edge.source] = sourceNode.data.output } return acc }, {} as {[key: string]: string}) // Add the new input if (nodeId && newData.output) { allInputs[nodeId] = newData.output } // Combine inputs with ' & ' const combinedInput = Object.values(allInputs).join(' & ') return { ...node, data: { ...node.data, input: combinedInput, output: combinedInput, inputs: allInputs } } } // For output nodes, pass through the data return { ...node, data: { ...node.data, input: newData.output, output: newData.output } } } return node }) setNodes(updatedNodes) return updatedNodes }) }, [reactFlowEdges, setNodes] ) const onConnectStart = useCallback((_, { nodeId }) => { setConnectionStartNode(nodeId) }, []) const onConnectEnd = useCallback((event) => { const targetNode = event.target.closest('.react-flow__node') if (targetNode && connectionStartNode) { const sourceNode = reactFlowNodes.find(node => node.id === connectionStartNode) const targetNodeData = reactFlowNodes.find(node => node.id === targetNode.dataset.id) // Validate connection if (sourceNode && targetNodeData) { const connection = { source: connectionStartNode, target: targetNode.dataset.id, sourceHandle: event.sourceHandle || 'output', targetHandle: event.targetHandle || 'input', type: 'smoothstep', animated: true, id: `e${connectionStartNode}-${targetNode.dataset.id}` } const newEdges = addEdge(connection, reactFlowEdges) setReactFlowEdges(newEdges) setEdges(newEdges as EdgeData[]) // Propagate data if source node has output if (sourceNode.data.output) { handleNodeDataUpdate(targetNode.dataset.id, { input: sourceNode.data.output, sourceNodeId: connectionStartNode }) } } } setConnectionStartNode(null) }, [connectionStartNode, reactFlowEdges, reactFlowNodes, setEdges, handleNodeDataUpdate]) const handleNodesChange = useCallback( (changes: any) => { onNodesChange(changes) setNodes(reactFlowNodes.map(node => ({ ...node, data: { ...node.data, onDataUpdate: handleNodeDataUpdate } }))) }, [onNodesChange, reactFlowNodes, setNodes, handleNodeDataUpdate] ) const handleEdgesChange = useCallback( (changes: any) => { onEdgesChange(changes) setEdges(reactFlowEdges) }, [onEdgesChange, reactFlowEdges, setEdges] ) const nodesWithHandlers = reactFlowNodes.map(node => ({ ...node, data: { ...node.data, onDataUpdate: handleNodeDataUpdate } })) return ( ) } [V0_FILE]typescriptreact:file="components/nodes/input-node.tsx" isMerged="true" "use client" import type React from "react" import { Handle, Position } from "reactflow" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Textarea } from "@/components/ui/textarea" export default function InputNode({ id, data, isConnectable }: any) { const handleInputChange = (e: React.ChangeEvent) => { const newValue = e.target.value if (data.onDataUpdate) { data.onDataUpdate(id, { input: newValue, output: newValue }) } } return ( Input Node

<Handle
          type="source"
          position={Position.Bottom}
          id="output-bottom"
          isConnectable={isConnectable}
          className="w-3 h-3 bg-blue-500"
        />
        <Handle
          type="source"
          position={Position.Right}
          id="output-right"
          isConnectable={isConnectable}
          className="w-3 h-3 bg-blue-500"
        />
      </CardContent>
    </Card>
  )
}

[V0_FILE]typescriptreact:file="components/nodes/processor-node.tsx" isMerged="true"
// ProcessorNode.tsx
import { Handle, Position } from "reactflow"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { useEffect, useState } from "react"

export default function ProcessorNode({ id, data, isConnectable }: any) {
  const isGemini = data.processorType === "gemini"
  const isTransform = data.processorType === "transform"
  
  // Track multiple inputs
  const [inputs, setInputs] = useState<{[key: string]: string}>({})

useEffect(() => {
    // When receiving input, store it with the connection ID
    if (data.input !== undefined && data.sourceNodeId) {
      setInputs(prev => ({
        ...prev,
        [data.sourceNodeId]: data.input
      }))
    }
  }, [data.input, data.sourceNodeId])

useEffect(() => {
    // Process when we have inputs
    if (Object.keys(inputs).length > 0) {
      try {
        // Combine all inputs with ' & '
        const combinedInput = Object.values(inputs).join(' & ')
        
        const processedOutput = isTransform 
          ? combinedInput.toUpperCase() 
          : isGemini 
            ? `Gemini processed: ${combinedInput}`
            : combinedInput

if (data.onDataUpdate) {
          data.onDataUpdate(id, {
            input: combinedInput,
            output: processedOutput,
            inputs: inputs // Store all inputs for reference
          })
        }
      } catch (error) {
        if (data.onDataUpdate) {
          data.onDataUpdate(id, {
            input: Object.values(inputs).join(' & '),
            output: "Error - Please select a different model",
            inputs: inputs
          })
        }
      }
    }
  }, [inputs, id, isTransform, isGemini])

return (
    <Card className="w-64 shadow-md">
      <CardHeader className={`${isGemini ? "bg-purple-500" : "bg-green-500"} text-white py-2 px-4`}>
        <CardTitle className="text-sm font-medium flex justify-between items-center">
          {isGemini ? "Gemini AI" : "Transform"}
          <Badge variant="outline" className="text-xs text-white border-white">
            Processor
          </Badge>
        </CardTitle>
      </CardHeader>
      <CardContent className="p-3">
        <div className="text-sm">
          {isGemini && "Processes input with Gemini AI"}
          {isTransform && "Transforms input to uppercase"}
        </div>

{/* Display all inputs */}
        {Object.entries(inputs).map(([sourceId, input], index) => (
          <div key={sourceId} className="mt-2 p-2 bg-gray-50 rounded text-xs">
            <strong>Input {index + 1}:</strong> {input}
          </div>
        ))}

{data.output !== undefined && (
          <div className="mt-2 p-2 bg-gray-100 rounded text-xs overflow-auto max-h-[100px]">
            <strong>Output:</strong> {data.output}
          </div>
        )}

<Handle
          type="target"
          position={Position.Left}
          id="input-1"
          isConnectable={isConnectable}
          className="w-3 h-3 bg-gray-500"
        />
        <Handle
          type="target"
          position={Position.Top}
          id="input-2"
          isConnectable={isConnectable}
          className="w-3 h-3 bg-gray-500"
        />
        <Handle
          type="source"
          position={Position.Right}
          id="output"
          isConnectable={isConnectable}
          className="w-3 h-3 bg-blue-500"
        />
      </CardContent>
    </Card>
  )
}

[V0_FILE]typescriptreact:file="components/nodes/output-node.tsx" isMerged="true"
import { Handle, Position } from "reactflow"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { useEffect } from "react"

interface OutputNodeProps {
  id: string
  data: {
    input?: string
    output?: string
    onDataUpdate?: (nodeId: string, data: any) => void
  }
  isConnectable: boolean
}

export default function OutputNode({ id, data, isConnectable }: OutputNodeProps) {
  useEffect(() => {
    if (data.input !== undefined && data.onDataUpdate) {
      data.onDataUpdate(id, {
        input: data.input,
        output: data.input
      })
    }
  }, [data.input, id, data.onDataUpdate])

return (
    <Card className="w-64 shadow-md">
      <CardHeader className="bg-red-500 text-white py-2 px-4">
        <CardTitle className="text-sm font-medium">Output Node</CardTitle>
      </CardHeader>
      <CardContent className="p-3">
        <div className="min-h-[80px] bg-gray-100 p-2 rounded overflow-auto text-sm">
          {data.input !== undefined ? data.input : "No output yet"}
        </div>
        <Handle
          type="target"
          position={Position.Left}
          id="input-left"
          isConnectable={isConnectable}
          className="w-3 h-3 bg-gray-500"
        />
        <Handle
          type="target"
          position={Position.Top}
          id="input-top"
          isConnectable={isConnectable}
          className="w-3 h-3 bg-gray-500"
        />
      </CardContent>
    </Card>
  )
}

[V0_FILE]typescriptreact:file="lib/types.ts" isEdit="true" isMerged="true"
import type { Node, Edge } from "reactflow"

export interface NodeData extends Node {
  data: {
    label?: string
    input?: string
    output?: any
    processorType?: "gemini" | "transform"
    inputs?: { [key: string]: string }
    sourceNodeId?: string
    [key: string]: any
  }
}

export interface EdgeData extends Edge {}

[V0_FILE]typescriptreact:file="app/globals.css" isEdit="true" isQuickEdit="true" isMerged="true"
@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  --foreground-rgb: 0, 0, 0;
  --background-start-rgb: 214, 219, 220;
  --background-end-rgb: 255, 255, 255;
}

@media (prefers-color-scheme: dark) {
  :root {
    --foreground-rgb: 255, 255, 255;
    --background-start-rgb: 0, 0, 0;
    --background-end-rgb: 0, 0, 0;
  }
}

body {
  color: rgb(var(--foreground-rgb));
}

/* Node Panel Styling */
.node-panel {
  @apply w-64 bg-gray-800 text-white p-4;
}

.node-panel h2 {
  @apply text-xl font-bold mb-4;
}

.node-panel button {
  @apply w-full justify-start;
}

/* Logic Node Styling */
.logic-node {
  @apply w-16 h-16 rounded-full bg-yellow-500 flex items-center justify-center relative;
}

.logic-node span {
  @apply text-black text-2xl font-bold;
}

.logic-node .react-flow__handle {
  @apply w-3 h-3 !bg-gray-500;
}

.logic-node .react-flow__handle-top {
  @apply top-0;
}

.logic-node .react-flow__handle-left {
  @apply left-0;
}

.logic-node .react-flow__handle-right {
  @apply right-0;
}

/* Input Node Styling */
.input-node {
  @apply w-64 bg-blue-500 text-white p-3 rounded-md shadow-md;
}

.input-node textarea {
  @apply min-h-[80px] text-sm bg-white text-black rounded-md p-2;
}

/* Processor Node Styling */
.processor-node {
  @apply w-64 bg-green-500 text-white p-3 rounded-md shadow-md;
}

.processor-node .badge {
  @apply text-xs text-white border-white;
}

/* Output Node Styling */
.output-node {
  @apply w-64 bg-red-500 text-white p-3 rounded-md shadow-md;
}

.output-node div {
  @apply min-h-[80px] bg-gray-100 p-2 rounded text-sm text-black;
}

/* React Flow Node Styling */
.react-flow__node {
  @apply p-0 rounded-md w-auto text-sm text-center border border-gray-300;
}

.react-flow__handle {
  @apply w-2 h-2 rounded-full;
}

/* Connection Styling */
.connection-path {
  @apply transition-all duration-200 ease-in-out filter drop-shadow-sm;
}

.connection-path:hover {
  @apply filter drop-shadow-md;
}

/* Connector Handle Styling */
.connector-handle {
  @apply transition-all duration-200 ease-in-out shadow-sm;
}

.connector-handle:hover {
  @apply scale-110 shadow-md;
}

[V0_FILE]typescriptreact:file="tailwind.config.ts" isMerged="true"
import type { Config } from "tailwindcss"

const config: Config = {
  darkMode: ["class"],
  content: [
    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./components/**/*.{js,ts,jsx,tsx,mdx}",
    "./app/**/*.{js,ts,jsx,tsx,mdx}",
    "*.{js,ts,jsx,tsx,mdx}",
  ],
  theme: {
    container: {
      center: true,
      padding: "2rem",
      screens: {
        "2xl": "1400px",
      },
    },
    extend: {
      colors: {
        border: "hsl(var(--border))",
        input: "hsl(var(--input))",
        ring: "hsl(var(--ring))",
        background: "hsl(var(--background))",
        foreground: "hsl(var(--foreground))",
        primary: {
          DEFAULT: "hsl(var(--primary))",
          foreground: "hsl(var(--primary-foreground))",
        },
        secondary: {
          DEFAULT: "hsl(var(--secondary))",
          foreground: "hsl(var(--secondary-foreground))",
        },
        destructive: {
          DEFAULT: "hsl(var(--destructive))",
          foreground: "hsl(var(--destructive-foreground))",
        },
        muted: {
          DEFAULT: "hsl(var(--muted))",
          foreground: "hsl(var(--muted-foreground))",
        },
        accent: {
          DEFAULT: "hsl(var(--accent))",
          foreground: "hsl(var(--accent-foreground))",
        },
        popover: {
          DEFAULT: "hsl(var(--popover))",
          foreground: "hsl(var(--popover-foreground))",
        },
        card: {
          DEFAULT: "hsl(var(--card))",
          foreground: "hsl(var(--card-foreground))",
        },
      },
      borderRadius: {
        lg: "var(--radius)",
        md: "calc(var(--radius) - 2px)",
        sm: "calc(var(--radius) - 4px)",
      },
    },
  },
  plugins: [],
}

export default config

[V0_FILE]typescriptreact:file="components/add-environment-variables.tsx" isMerged="true"
export function AddEnvironmentVariables({ names }: { names: string[] }) {
  return (
    <div className="rounded-md border border-amber-200 bg-amber-50 p-4 text-sm text-amber-700 my-4">
      <p>
        This component would allow users to add environment variables like <code>{names.join(", ")}</code> to their
        project.
      </p>
    </div>
  )
}

[V0_FILE]json:file="package.json" isFixed="true" isQuickEdit="true" isMerged="true"
{
  "name": "my-v0-project",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@hookform/resolvers": "^3.9.1",
    "@radix-ui/react-accordion": "^1.2.2",
    "@radix-ui/react-alert-dialog": "^1.1.4",
    "@radix-ui/react-aspect-ratio": "^1.1.1",
    "@radix-ui/react-avatar": "^1.1.2",
    "@radix-ui/react-checkbox": "^1.1.3",
    "@radix-ui/react-collapsible": "^1.1.2",
    "@radix-ui/react-context-menu": "^2.2.4",
    "@radix-ui/react-dialog": "^1.1.4",
    "@radix-ui/react-dropdown-menu": "^2.1.4",
    "@radix-ui/react-hover-card": "^1.1.4",
    "@radix-ui/react-label": "^2.1.1",
    "@radix-ui/react-menubar": "^1.1.4",
    "@radix-ui/react-navigation-menu": "^1.2.3",
    "@radix-ui/react-popover": "^1.1.4",
    "@radix-ui/react-progress": "^1.1.1",
    "@radix-ui/react-radio-group": "^1.2.2",
    "@radix-ui/react-scroll-area": "^1.2.2",
    "@radix-ui/react-select": "^2.1.4",
    "@radix-ui/react-separator": "^1.1.1",
    "@radix-ui/react-slider": "^1.2.2",
    "@radix-ui/react-slot": "^1.1.1",
    "@radix-ui/react-switch": "^1.1.2",
    "@radix-ui/react-tabs": "^1.1.2",
    "@radix-ui/react-toast": "^1.2.4",
    "@radix-ui/react-toggle": "^1.1.1",
    "@radix-ui/react-toggle-group": "^1.1.1",
    "@radix-ui/react-tooltip": "^1.1.6",
    "autoprefixer": "^10.4.20",
    "class-variance-authority": "^0.7.1",
    "clsx": "^2.1.1",
    "cmdk": "1.0.4",
    "date-fns": "4.1.0",
    "embla-carousel-react": "8.5.1",
    "input-otp": "1.4.1",
    "lucide-react": "^0.454.0",
    "next": "14.2.16",
    "next-themes": "^0.4.4",
    "react": "^19",
    "react-day-picker": "8.10.1",
    "react-dom": "^19",
    "react-hook-form": "^7.54.1",
    "react-resizable-panels": "^2.1.7",
    "recharts": "2.15.0",
    "sonner": "^1.7.1",
    "tailwind-merge": "^2.5.5",
    "tailwindcss-animate": "^1.0.7",
    "vaul": "^0.9.6",
    "zod": "^3.24.1",
    "@google/generative-ai": "^0.1.3",
    "react-markdown": "^9.0.1"
  },
  "devDependencies": {
    "@types/node": "^22",
    "@types/react": "^18",
    "@types/react-dom": "^18",
    "postcss": "^8",
    "tailwindcss": "^3.4.17",
    "typescript": "^5"
  }
}

[V0_FILE]typescriptreact:file="components/node-panel.tsx" isEdit="true" isMerged="true"
"use client"

import type React from "react"
import type { NodeData } from "@/lib/types"
import { Button } from "@/components/ui/button"
import { Type, Cpu, FileOutput, GitCompare } from "lucide-react"

interface NodePanelProps {
  setNodes: React.Dispatch<React.SetStateAction<NodeData[]>>
}

export default function NodePanel({ setNodes }: NodePanelProps) {
  const addNode = (type: string, data: any = {}) => {
    const newNode: NodeData = {
      id: `node_${Date.now()}`,
      type,
      position: { x: 100, y: 100 + Math.random() * 100 },
      data: {
        ...data,
        label: `${type.charAt(0).toUpperCase() + type.slice(1)} Node`,
        input: "",
        output: "",
        onDataUpdate: (nodeId: string, newData: any) => {
          setNodes((prevNodes) =>
            prevNodes.map((node) => {
              if (node.id === nodeId) {
                return {
                  ...node,
                  data: { ...node.data, ...newData },
                }
              }
              return node
            }),
          )
        },
      },
    }

setNodes((prevNodes) => [...prevNodes, newNode])
  }

return (
    <div className="w-64 bg-gray-800 text-white p-4">
      <h2 className="text-xl font-bold mb-4">Node Types</h2>
      <div className="space-y-3">
        <Button
          variant="outline"
          className="w-full justify-start"
          onClick={() =>
            addNode("input", {
              input: "",
              output: "",
            })
          }
        >
          <Type className="mr-2 h-4 w-4" />
          Input Node
        </Button>

<Button
          variant="outline"
          className="w-full justify-start"
          onClick={() =>
            addNode("processor", {
              processorType: "gemini",
              input: "",
              output: "",
            })
          }
        >
          <Cpu className="mr-2 h-4 w-4" />
          Gemini AI Node
        </Button>

<Button
          variant="outline"
          className="w-full justify-start"
          onClick={() =>
            addNode("processor", {
              processorType: "transform",
              input: "",
              output: "",
            })
          }
        >
          <Cpu className="mr-2 h-4 w-4" />
          Transform Node
        </Button>

<Button
          variant="outline"
          className="w-full justify-start"
          onClick={() =>
            addNode("logic", {
              input: "",
              output: "",
              inputs: {},
            })
          }
        >
          <GitCompare className="mr-2 h-4 w-4" />
          Logic Node (&)
        </Button>

<Button
          variant="outline"
          className="w-full justify-start"
          onClick={() =>
            addNode("output", {
              input: "",
              output: "",
            })
          }
        >
          <FileOutput className="mr-2 h-4 w-4" />
          Output Node
        </Button>
      </div>
    </div>
  )
}

[V0_FILE]typescriptreact:file="components/nodes/logic-node.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import { Handle, Position } from "reactflow"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { useEffect, useState } from "react"

export default function LogicNode({ id, data, isConnectable }: any) {
  const [inputs, setInputs] = useState<{ [key: string]: string }>({})

useEffect(() => {
    // When receiving input, store it with the connection ID
    if (data.input !== undefined && data.sourceNodeId) {
      setInputs((prev) => ({
        ...prev,
        [data.sourceNodeId]: data.input,
      }))
    }
  }, [data.input, data.sourceNodeId])

useEffect(() => {
    // Process when we have inputs
    if (Object.keys(inputs).length > 0) {
      try {
        // Simple concatenation of inputs
        const combinedInput = Object.values(inputs).join("")

if (data.onDataUpdate) {
          data.onDataUpdate(id, {
            input: combinedInput,
            output: combinedInput,
            inputs: inputs, // Store all inputs for reference
          })
        }
      } catch (error) {
        if (data.onDataUpdate) {
          data.onDataUpdate(id, {
            input: Object.values(inputs).join(""),
            output: "Error - Invalid input combination",
            inputs: inputs,
          })
        }
      }
    }
  }, [inputs, id, data.onDataUpdate])

return (
    <Card className="w-64 shadow-md">
      <CardHeader className="bg-yellow-500 text-white py-2 px-4">
        <CardTitle className="text-sm font-medium">Logic Node (&)</CardTitle>
      </CardHeader>
      <CardContent className="p-3">
        <div className="text-sm">Concatenates text inputs</div>

[V0_FILE]typescript:file="app/actions.ts" isFixed="true" isEdit="true" isQuickEdit="true" isMerged="true"
"use server"

// Server-side function to process text with Gemini API
export async function processWithGeminiAction(
  input: string,
  modelName: string,
  clientApiKey?: string,
  retryCount = 0,
): Promise<{ result: string; error?: string }> {
  try {
    // Use the provided client API key or fall back to the environment variable
    const apiKey = clientApiKey || process.env.GEMINI_API_KEY

if (!apiKey) {
      return {
        result: "Error: No API key found. Please add your Gemini API key.",
        error: "missing_api_key",
      }
    }

// Request markdown formatting in the prompt
    const enhancedInput = `${input}\n\nPlease format your response using Markdown for better readability.`

// Use direct fetch to the Gemini API with the v1 endpoint and the selected model
    const response = await fetch(
      `https://generativelanguage.googleapis.com/v1/models/${modelName}:generateContent?key=${apiKey}`,
      {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify({
          contents: [
            {
              parts: [
                {
                  text: enhancedInput,
                },
              ],
            },
          ],
          generationConfig: {
            temperature: 0.7,
            topK: 40,
            topP: 0.95,
            maxOutputTokens: 1024,
          },
        }),
      },
    )

if (!response.ok) {
      const errorData = await response.json()
      const errorMessage = errorData.error?.message || "Unknown error"
      console.error(`API Error (${response.status}): ${errorMessage}`)

// Handle different error types with specific messages
      if (response.status === 404 || errorMessage.includes("not found")) {
        return {
          result: `Error: The model "${modelName}" is not available with your API key.

Please try selecting a different Gemini model from the dropdown menu at the top of the page.

Available models typically include:
- gemini-1.5-flash (fastest, good for most tasks)
- gemini-1.5-pro (more capable but slower)
- gemini-pro (older version)`,
          error: "model_not_found",
        }
      }

// Handle permission denied errors
      if (errorMessage.includes("PERMISSION_DENIED") || response.status === 403) {
        return {
          result: `Error: You don't have permission to use the "${modelName}" model with your current API key.

Please try:
1. Selecting a different Gemini model from the dropdown menu
2. Checking if your API key has the necessary permissions
3. Creating a new API key with appropriate access`,
          error: "permission_denied",
        }
      }

// Handle rate limit errors specifically
      if (response.status === 429) {
        // If we've already retried too many times, fall back to a simple response
        if (retryCount >= 2) {
          console.warn("Rate limit exceeded after retries, using fallback")
          return {
            result: `[Rate Limit Exceeded] Unable to process with Gemini due to rate limits.
        
Your input was: 
        
${input}

Try again in a few minutes or select a different model.`,
            error: "rate_limit",
          }
        }

// Otherwise, retry with exponential backoff
        const delay = Math.pow(2, retryCount) * 1000 // 1s, 2s, 4s, etc.
        console.log(`Rate limit hit, retrying in ${delay}ms...`)
        await new Promise((resolve) => setTimeout(resolve, delay))
        return processWithGeminiAction(input, modelName, clientApiKey, retryCount + 1)
      }

// Generic error message for other cases
      return {
        result: `API Error (${response.status}): ${errorMessage}

Please try:
- Selecting a different Gemini model
- Checking your API key
- Trying again later`,
        error: "api_error",
      }
    }

const data = await response.json()

// Extract the text from the response
    if (data.candidates && data.candidates[0]?.content?.parts) {
      return { result: data.candidates[0].content.parts[0].text }
    } else {
      return {
        result: "No response generated. Please try again or select a different model.",
        error: "no_response",
      }
    }
  } catch (error) {
    console.error("Gemini API Error:", error)

// Provide a more helpful error message
    if (error instanceof Error) {
      if (error.message.includes("API key not valid")) {
        return {
          result: "Error: Invalid API key. Please check your API key and try again.",
          error: "invalid_api_key",
        }
      } else if (error.message.includes("PERMISSION_DENIED")) {
        return {
          result: `Error: Permission denied. Your API key may not have access to the "${modelName}" model.

Please try selecting a different Gemini model from the dropdown menu at the top of the page.`,
          error: "permission_denied",
        }
      } else if (error.message.includes("not found") || error.message.includes("404")) {
        return {
          result: `Error: The model "${modelName}" is not available.

Please select a different Gemini model from the dropdown menu at the top of the page.
Common models include gemini-1.5-flash, gemini-1.5-pro, or gemini-pro.`,
          error: "model_not_found",
        }
      } else if (
        error.message.includes("429") ||
        error.message.includes("exhausted") ||
        error.message.includes("quota")
      ) {
        return {
          result: `Error: Gemini API rate limit exceeded.

Please try:
- Waiting a few minutes before trying again
- Selecting a different model
- Reducing the frequency of requests`,
          error: "rate_limit",
        }
      }
    }

// Fallback to a simple response that doesn't use the API
    return {
      result: `[Error] Unable to process with Gemini API.
  
Error details: ${error instanceof Error ? error.message : String(error)}

Please try:
- Selecting a different Gemini model
- Checking your API key
- Trying again later
  
Your input was:
  
${input}`,
      error: "unknown_error",
    }
  }
}

// Server-side function to check API quota
export async function checkApiQuotaAction(): Promise<boolean> {
  try {
    const apiKey = process.env.GEMINI_API_KEY

if (!apiKey) {
      return false
    }

// Make a lightweight call to check if the API is available
    const response = await fetch(`https://generativelanguage.googleapis.com/v1/models?key=${apiKey}`, {
      method: "GET",
    })

return response.ok
  } catch (error) {
    console.error("Error checking API quota:", error)
    return false
  }
}

// Server-side function to fetch available models
export async function fetchAvailableModelsAction(
  clientApiKey?: string,
): Promise<{ models: string[]; error: string | null }> {
  try {
    const apiKey = clientApiKey || process.env.GEMINI_API_KEY

if (!apiKey) {
      return {
        models: [],
        error: "No API key found. Please add your Gemini API key.",
      }
    }

const response = await fetch(`https://generativelanguage.googleapis.com/v1/models?key=${apiKey}`)

if (!response.ok) {
      const errorData = await response.json()
      throw new Error(`API Error (${response.status}): ${errorData.error?.message || "Unknown error"}`)
    }

const data = await response.json()

if (data.models && Array.isArray(data.models)) {
      // Extract model names from the response
      const modelNames = data.models.map((model: any) => model.name.split("/").pop())
      return { models: modelNames, error: null }
    } else {
      return { models: [], error: "No models found in API response" }
    }
  } catch (error) {
    console.error("Error fetching models:", error)
    return {
      models: [],
      error: error instanceof Error ? error.message : String(error),
    }
  }
}

[V0_FILE]typescriptreact:file="app/page.tsx" isFixed="true" isEdit="true" isQuickEdit="true"
"use client"

import type React from "react"

import { useState, useRef, useEffect } from "react"
import { Trash2, Play, FileText, AlertCircle } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Textarea } from "@/components/ui/textarea"
import { Card, CardContent, CardHeader } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { toast } from "@/components/ui/use-toast"
import ReactMarkdown from "react-markdown"
import { processWithGeminiAction, checkApiQuotaAction, fetchAvailableModelsAction } from "./actions"

// Types
type BoxType = "input" | "process" | "output" | "logic" | "file-input"
type Connection = { from: string; to: string }
type ConnectionPoint = { x: number; y: number }

interface Box {
  id: string
  type: BoxType
  position: { x: number; y: number }
  data: {
    content?: string
    result?: string
    processorType?: string
    name: string
    inputs?: Record<string, string> // Store inputs by source ID
  }
}

export default function Home() {
  const [boxes, setBoxes] = useState<Box[]>([])
  const [connections, setConnections] = useState<Connection[]>([])
  const [draggingBox, setDraggingBox] = useState<string | null>(null)
  const [draggingOffset, setDraggingOffset] = useState({ x: 0, y: 0 })
  const [connectingFrom, setConnectingFrom] = useState<string | null>(null)
  const [connectionStart, setConnectionStart] = useState<ConnectionPoint | null>(null)
  const [mousePosition, setMousePosition] = useState<ConnectionPoint | null>(null)
  const [processing, setProcessing] = useState(false)
  const canvasRef = useRef<HTMLDivElement>(null)
  const [availableModels, setAvailableModels] = useState<string[]>([])
  const [modelListError, setModelListError] = useState<string | null>(null)
  const [selectedModel, setSelectedModel] = useState<string>("gemini-1.5-flash")
  const [hasApiKey, setHasApiKey] = useState<boolean>(false)
  const [userApiKey, setUserApiKey] = useState<string>("")
  const [isApiKeyModalOpen, setIsApiKeyModalOpen] = useState<boolean>(false)

// Add this function to handle API key submission
  const handleApiKeySubmit = () => {
    // Store the API key in localStorage or a secure cookie
    localStorage.setItem("gemini-api-key", userApiKey)
    setHasApiKey(true)
    setIsApiKeyModalOpen(false)

// Reload available models with the new key
    loadModels(userApiKey)
  }

// Modify your loadModels function to accept a key parameter
  const loadModels = async (apiKey?: string) => {
    const { models, error } = await fetchAvailableModelsAction(apiKey || localStorage.getItem("gemini-api-key") || "")

if (models.length > 0) {
      setAvailableModels(models)
      setHasApiKey(true)
      setModelListError(null)
    } else {
      setAvailableModels([])
      setHasApiKey(false)
      setModelListError(error)
    }
  }

// Load available models on component mount
  useEffect(() => {
    // Check if we have a stored API key
    const storedApiKey = localStorage.getItem("gemini-api-key")
    if (storedApiKey) {
      loadModels(storedApiKey)
    } else {
      setIsApiKeyModalOpen(true)
    }
  }, [])

const addBox = (type: BoxType) => {
    const newBox: Box = {
      id: `box-${Date.now()}`,
      type,
      position: { x: 100, y: 100 + boxes.length * 50 },
      data: {
        name: `${type.charAt(0).toUpperCase() + type.slice(1)} ${boxes.filter((b) => b.type === type).length + 1}`,
        content: type === "input" ? "" : undefined,
        processorType: type === "process" ? "gemini" : undefined, // Default to gemini
        inputs: type === "logic" ? {} : undefined, // Initialize inputs for logic nodes
      },
    }
    setBoxes([...boxes, newBox])
  }

const removeBox = (id: string) => {
    setBoxes(boxes.filter((box) => box.id !== id))
    setConnections(connections.filter((conn) => conn.from !== id && conn.to !== id))
  }

// Find the startDragging function and update it to prevent event propagation when dragging connectors
  // This will prevent the box content from being affected

const startDragging = (e: React.MouseEvent, id: string, isConnector = false) => {
    // Prevent event propagation when dragging connectors
    if (isConnector) {
      e.stopPropagation()
      setConnectingFrom(id)

// Calculate the starting point for the connection
      const box = boxes.find((b) => b.id === id)
      if (box) {
        const rect = (e.target as HTMLElement).getBoundingClientRect()
        const canvasRect = canvasRef.current?.getBoundingClientRect()

if (canvasRect) {
          // Set the connection start point
          setConnectionStart({
            x: rect.left + rect.width / 2 - canvasRect.left,
            y: rect.top + rect.height / 2 - canvasRect.top,
          })

// Initialize mouse position to the same point
          setMousePosition({
            x: rect.left + rect.width / 2 - canvasRect.left,
            y: rect.top + rect.height / 2 - canvasRect.top,
          })
        }
      }
    } else {
      const box = boxes.find((b) => b.id === id)
      if (box) {
        const rect = (e.target as HTMLElement).getBoundingClientRect()
        setDraggingBox(id)
        setDraggingOffset({
          x: e.clientX - rect.left,
          y: e.clientY - rect.top,
        })
      }
    }
  }

// Update the handleMouseUp function to also stop propagation
  const handleMouseUp = (e: React.MouseEvent, id?: string) => {
    if (id) {
      e.stopPropagation()
    }

if (connectingFrom && id && connectingFrom !== id) {
      const fromBox = boxes.find((b) => b.id === connectingFrom)
      const toBox = boxes.find((b) => b.id === id)

if (fromBox && toBox) {
        console.log(`Attempting to connect from ${fromBox.type} (${connectingFrom}) to ${toBox.type} (${id})`)

// Check if the target is a process box and already has an input connection
        if (toBox.type === "process") {
          const existingInputs = connections.filter((conn) => conn.to === id)
          if (existingInputs.length > 0) {
            console.log(`Process box ${id} already has an input connection. Rejecting new connection.`)
            toast({
              title: "Connection Error",
              description: "Process boxes can only have one input. Use a Logic node to combine multiple inputs.",
              variant: "destructive",
            })

// Reset connection state
            setDraggingBox(null)
            setConnectingFrom(null)
            setConnectionStart(null)
            setMousePosition(null)
            return
          }
        }

// Updated connection validation logic to include logic nodes
        const isValidConnection =
          // Original connections
          ((fromBox.type === "input" || fromBox.type === "file-input") && toBox.type === "process") ||
          (fromBox.type === "process" && toBox.type === "output") ||
          // New connections for logic nodes
          ((fromBox.type === "input" || fromBox.type === "file-input") && toBox.type === "logic") ||
          (fromBox.type === "process" && toBox.type === "logic") ||
          (fromBox.type === "logic" && toBox.type === "process") ||
          (fromBox.type === "logic" && toBox.type === "output")

if (isValidConnection) {
          // Check if connection already exists
          const connectionExists = connections.some((conn) => conn.from === connectingFrom && conn.to === id)

if (!connectionExists) {
            console.log(`Creating new connection from ${connectingFrom} to ${id}`)
            const newConnections = [...connections, { from: connectingFrom, to: id }]
            setConnections(newConnections)
          } else {
            console.log(`Connection from ${connectingFrom} to ${id} already exists`)
          }
        } else {
          console.log(`Invalid connection type from ${fromBox.type} to ${toBox.type}`)
          toast({
            title: "Invalid Connection",
            description: "Invalid connection type. Check your flow structure.",
            variant: "destructive",
          })
        }
      }
    }

// Reset connection state
    setDraggingBox(null)
    setConnectingFrom(null)
    setConnectionStart(null)
    setMousePosition(null)
  }

const updateBoxContent = (id: string, content: string) => {
    setBoxes(
      boxes.map((box) => {
        if (box.id === id) {
          return { ...box, data: { ...box.data, content } }
        }
        return box
      }),
    )
  }

const updateBoxName = (id: string, name: string) => {
    setBoxes(boxes.map((box) => (box.id === id ? { ...box, data: { ...box.data, name } } : box)))
  }

const updateBoxProcessorType = (id: string, processorType: string) => {
    setBoxes(boxes.map((box) => (box.id === id ? { ...box, data: { ...box.data, processorType } } : box)))
  }

// Update the processBox function to log logic node processing
  const processBox = async (boxId: string, currentBoxes: Box[], currentConnections: Connection[]): Promise<Box[]> => {
    console.log(`Processing box: ${boxId}`)

const box = currentBoxes.find((b) => b.id === boxId)
    if (!box) {
      console.log(`Box ${boxId} not found`)
      return currentBoxes
    }

// Create a new array to avoid mutating the original
    const updatedBoxes = [...currentBoxes]
    const boxIndex = updatedBoxes.findIndex((b) => b.id === boxId)

// Process based on box type
    if (box.type === "logic") {
      // For logic nodes, collect inputs from all incoming connections
      const incomingConnections = currentConnections.filter((conn) => conn.to === boxId)
      console.log(`Logic node ${boxId} has ${incomingConnections.length} incoming connections`)

const inputs: Record<string, string> = {}

// Collect inputs from all connected source nodes
      for (const conn of incomingConnections) {
        const sourceBox = updatedBoxes.find((b) => b.id === conn.from)
        if (sourceBox && sourceBox.data.result) {
          console.log(
            `Adding input from ${conn.from} (${sourceBox.type}): ${sourceBox.data.result.substring(0, 50)}...`,
          )
          inputs[conn.from] = sourceBox.data.result
        }
      }

// Only process if we have inputs
      if (Object.keys(inputs).length > 0) {
        // Simple concatenation of all inputs
        const combinedInput = Object.values(inputs).join(" AND ")
        console.log(
          `Logic Node ${boxId} combined ${Object.keys(inputs).length} inputs into: ${combinedInput.substring(0, 50)}...`,
        )

// Update the logic node with combined result and inputs
        updatedBoxes[boxIndex] = {
          ...updatedBoxes[boxIndex],
          data: {
            ...updatedBoxes[boxIndex].data,
            result: combinedInput,
            inputs: inputs,
          },
        }
      } else {
        console.log(`Logic Node ${boxId} has no valid inputs to process`)
      }
    } else if (box.type === "process") {
      // For process boxes, get input from the single connected node
      const incomingConnection = currentConnections.find((conn) => conn.to === boxId)

if (incomingConnection) {
        const sourceBox = updatedBoxes.find((b) => b.id === incomingConnection.from)
        if (sourceBox && sourceBox.data.result) {
          const input = sourceBox.data.result
          let result

// Show processing state
          updatedBoxes[boxIndex] = {
            ...updatedBoxes[boxIndex],
            data: { ...updatedBoxes[boxIndex].data, result: "Processing..." },
          }

// Update the UI immediately to show "Processing..."
          setBoxes(updatedBoxes)

if (box.data.processorType === "gemini") {
            try {
              // Use the server action instead of direct API call
              const response = await processWithGeminiAction(input, selectedModel)
              result = response.result

// Check if result indicates a rate limit error
              if (result.includes("rate limit exceeded") || result.includes("Fallback Response")) {
                // If using Gemini fails, offer a simple transformation as fallback
                if (!result.includes("Your input was")) {
                  result += `\n\nFallback transformation: ${input.toUpperCase()}`
                }
              }
            } catch (error) {
              console.error("Error processing with Gemini:", error)
              result = `Error: ${error instanceof Error ? error.message : String(error)}\n\nFallback transformation: ${input.toUpperCase()}`
            }
          } else {
            // Default transformation
            result = input.toUpperCase()
          }

// Update with the final result
          updatedBoxes[boxIndex] = {
            ...updatedBoxes[boxIndex],
            data: { ...updatedBoxes[boxIndex].data, result },
          }
        }
      }
    } else if (box.type === "output") {
      // For output nodes, get input from connected nodes
      const incomingConnections = currentConnections.filter((conn) => conn.to === boxId)
      const inputs: string[] = []

for (const conn of incomingConnections) {
        const sourceBox = updatedBoxes.find((b) => b.id === conn.from)
        if (sourceBox && sourceBox.data.result) {
          inputs.push(sourceBox.data.result)
        }
      }

if (inputs.length > 0) {
        const combinedInput = inputs.join("\n")
        updatedBoxes[boxIndex] = {
          ...updatedBoxes[boxIndex],
          data: { ...updatedBoxes[boxIndex].data, result: combinedInput },
        }
      }
    }

return updatedBoxes
  }

// Process the flow starting from input nodes
  const executeFlow = async () => {
    console.log("Execute Flow button clicked")

// Check if we have a Gemini API key if needed
    if (!hasApiKey && boxes.some((box) => box.type === "process" && box.data.processorType === "gemini")) {
      toast({
        title: "API Key Required",
        description: "Please add your Google Gemini API key to the environment variables",
        variant: "destructive",
      })
      return
    }

// Set processing state to show we're working
    setProcessing(true)

try {
      // Check API quota if using Gemini
      if (boxes.some((box) => box.type === "process" && box.data.processorType === "gemini")) {
        const quotaAvailable = await checkApiQuotaAction()

if (!quotaAvailable) {
          toast({
            title: "API Quota Warning",
            description: "Gemini API quota may be exhausted. Proceeding with fallback mechanisms.",
            variant: "warning",
          })
        }
      }

// Reset all results but keep content
      const resetBoxes = boxes.map((box) => ({
        ...box,
        data: {
          ...box.data,
          result: box.type === "input" || box.type === "file-input" ? box.data.content : undefined,
          inputs: box.type === "logic" ? {} : box.data.inputs,
        },
      }))

// Update the UI with reset boxes
      setBoxes(resetBoxes)

// Find input boxes
      const inputBoxes = resetBoxes.filter((box) => box.type === "input" || box.type === "file-input")

if (inputBoxes.length === 0) {
        toast({
          title: "No Input Boxes",
          description: "Please add at least one input box to your flow",
          variant: "destructive",
        })
        return
      }

// Process the flow level by level
      let currentBoxes = resetBoxes
      const processed = new Set<string>()
      const toProcess = new Set<string>()

// Start with input boxes
      inputBoxes.forEach((box) => {
        // Set initial results for input boxes
        currentBoxes = currentBoxes.map((b) =>
          b.id === box.id ? { ...b, data: { ...b.data, result: b.data.content } } : b,
        )

// Find direct connections from input boxes
        connections.filter((conn) => conn.from === box.id).forEach((conn) => toProcess.add(conn.to))
      })

// Update UI with input box results
      setBoxes(currentBoxes)

// Process the flow level by level until no more nodes to process
      while (toProcess.size > 0) {
        const currentLevel = Array.from(toProcess)
        toProcess.clear() // Reset for next level

// Process all nodes at current level
        for (const boxId of currentLevel) {
          if (processed.has(boxId)) continue

// Process the box
          currentBoxes = await processBox(boxId, currentBoxes, connections)
          processed.add(boxId)

// Update UI after each box is processed
          setBoxes(currentBoxes)

// Find next level of nodes to process
          connections
            .filter((conn) => conn.from === boxId)
            .forEach((conn) => {
              if (!processed.has(conn.to)) {
                toProcess.add(conn.to)
              }
            })
        }
      }

console.log("Flow execution completed successfully")
      toast({
        title: "Flow Executed",
        description: "The flow has been processed successfully",
      })
    } catch (error) {
      console.error("Error executing flow:", error)
      toast({
        title: "Execution Error",
        description: `Error: ${error instanceof Error ? error.message : String(error)}`,
        variant: "destructive",
      })
    } finally {
      setProcessing(false)
    }
  }

// Calculate the center position of a box
  const getBoxCenter = (box: Box): ConnectionPoint => {
    return {
      x: box.position.x + 100, // Center of the box horizontally
      y: box.position.y + 75, // Center of the box vertically
    }
  }

// Calculate the position of the connector handle
  const getConnectorPosition = (box: Box, isOutput: boolean): ConnectionPoint => {
    const center = getBoxCenter(box)
    return {
      x: isOutput ? box.position.x + 200 : box.position.x, // Right or left edge
      y: center.y, // Centered vertically
    }
  }

const renderConnections = () => {
    return connections.map((conn, index) => {
      const fromBox = boxes.find((b) => b.id === conn.from)
      const toBox = boxes.find((b) => b.id === conn.to)

if (!fromBox || !toBox) return null

// Get connector positions
      const fromPos = getConnectorPosition(fromBox, true) // Output connector
      const toPos = getConnectorPosition(toBox, false) // Input connector

// Calculate control points for a nice curve
      const distance = Math.abs(toPos.x - fromPos.x)
      const controlPointOffset = Math.min(80, distance * 0.5)

return (
        <svg key={`conn-${index}`} className="absolute top-0 left-0 w-full h-full pointer-events-none z-0">
          <defs>
            <marker id={`arrowhead-${index}`} markerWidth="10" markerHeight="7" refX="9" refY="3.5" orient="auto">
              <polygon points="0 0, 10 3.5, 0 7" fill="#3b82f6" />
            </marker>
          </defs>
          <path
            d={`M${fromPos.x},${fromPos.y} C${fromPos.x + controlPointOffset},${fromPos.y} ${toPos.x - controlPointOffset},${toPos.y} ${toPos.x},${toPos.y}`}
            stroke="#3b82f6"
            strokeWidth="3"
            fill="none"
            markerEnd={`url(#arrowhead-${index})`}
            className="connection-path"
          />
        </svg>
      )
    })
  }

// Render the rubber band connection when dragging
  const renderRubberBand = () => {
    if (!connectingFrom || !connectionStart || !mousePosition) return null

const fromBox = boxes.find((b) => b.id === connectingFrom)
    if (!fromBox) return null

// Get the starting position (output connector of the source box)
    const fromPos = getConnectorPosition(fromBox, true)

// Calculate control points for a nice curve
    const distance = Math.abs(mousePosition.x - fromPos.x)
    const controlPointOffset = Math.min(80, distance * 0.5)

return (
      <svg className="absolute top-0 left-0 w-full h-full pointer-events-none z-10">
        <path
          d={`M${fromPos.x},${fromPos.y} C${fromPos.x + controlPointOffset},${fromPos.y} ${mousePosition.x - controlPointOffset},${mousePosition.y} ${mousePosition.x},${mousePosition.y}`}
          stroke="#3b82f6"
          strokeWidth="3"
          strokeDasharray="5,5"
          fill="none"
          className="rubber-band-path"
        />
      </svg>
    )
  }

// Let's add a function to test the logic node connections
  const countInputConnections = (boxId: string) => {
    return connections.filter((conn) => conn.to === boxId).length
  }

// Update the renderBox function to show the connection count for logic nodes
  const renderBox = (box: Box) => {
    const boxColors = {
      input: "bg-blue-500",
      "file-input": "bg-cyan-500",
      process: "bg-purple-500",
      output: "bg-green-500",
      logic: "bg-yellow-500",
    }

// Calculate the center position for connector handles
    const centerY = 75 // Vertical center of the box

// Check if this process box already has an input connection
    const hasInputConnection = box.type === "process" && connections.some((conn) => conn.to === box.id)

// Count input connections for logic nodes
    const inputConnectionCount = box.type === "logic" ? countInputConnections(box.id) : 0

return (
      <div
        key={box.id}
        className="absolute"
        style={{
          left: `${box.position.x}px`,
          top: `${box.position.y}px`,
          zIndex: draggingBox === box.id ? 10 : 1,
        }}
      >
        <Card className="w-[200px] shadow-lg">
          <CardHeader
            className={`${boxColors[box.type]} text-white py-2 px-4 cursor-move`}
            onMouseDown={(e) => startDragging(e, box.id)}
          >
            <div className="flex justify-between items-center">
              <Input
                value={box.data.name}
                onChange={(e) => updateBoxName(box.id, e.target.value)}
                className="text-sm font-medium bg-transparent border-0 p-0 h-6 focus-visible:ring-0 focus-visible:ring-offset-0 text-white placeholder:text-white/70"
                onClick={(e) => e.stopPropagation()}
              />
              <Button
                variant="ghost"
                size="icon"
                className="h-6 w-6 text-white hover:text-white hover:bg-white/20"
                onClick={() => removeBox(box.id)}
              >
                <Trash2 className="h-4 w-4" />
              </Button>
            </div>
          </CardHeader>
          <CardContent className="p-3 relative">
            {box.type === "input" && (
              <Textarea
                placeholder="Enter your input here..."
                className="min-h-[80px] text-sm"
                value={box.data.content || ""}
                onChange={(e) => updateBoxContent(box.id, e.target.value)}
              />
            )}

{box.type === "file-input" && (
              <div className="min-h-[80px]">
                <div className="flex flex-col gap-2">
                  <label
                    htmlFor={`file-${box.id}`}
                    className="cursor-pointer py-1 px-2 bg-blue-100 text-blue-700 rounded text-xs text-center hover:bg-blue-200"
                  >
                    Choose Text File
                    <input
                      id={`file-${box.id}`}
                      type="file"
                      accept=".txt,.md,.json,.csv,.html,.js,.ts,.jsx,.tsx,.css"
                      className="hidden"
                      onChange={(e) => {
                        const file = e.target.files?.[0]
                        if (file) {
                          const reader = new FileReader()
                          reader.onload = (event) => {
                            const content = event.target?.result as string
                            updateBoxContent(box.id, content)
                          }
                          reader.readAsText(file)
                        }
                      }}
                    />
                  </label>
                  {box.data.content && (
                    <div className="text-xs text-gray-500 mb-1">File loaded: {box.data.content.length} characters</div>
                  )}
                  <Textarea
                    placeholder="File content will appear here..."
                    className="min-h-[80px] text-sm"
                    value={box.data.content || ""}
                    onChange={(e) => updateBoxContent(box.id, e.target.value)}
                  />
                </div>
              </div>
            )}

{box.type === "process" && (
              <div className="min-h-[80px]">
                <div className="mb-2">
                  <select
                    value={box.data.processorType}
                    onChange={(e) => updateBoxProcessorType(box.id, e.target.value)}
                    className="p-1 text-xs border rounded"
                  >
                    <option value="gemini">Gemini AI</option>
                    <option value="transform">Transform (Uppercase)</option>
                  </select>
                </div>

{box.data.processorType === "gemini" && (
                  <Badge className="mb-2 bg-purple-100 text-purple-800 hover:bg-purple-200">
                    Using model: {selectedModel || "gemini-1.5-flash"}
                  </Badge>
                )}

{/* Add a note about single input limitation */}
                <div className="text-xs text-gray-500 mb-2 flex items-center">
                  <AlertCircle className="h-3 w-3 mr-1 text-amber-500" />
                  Accepts only one input. Use Logic node for multiple inputs.
                </div>

{box.data.result && (
                  <div className="mt-2 p-2 bg-gray-100 rounded text-xs overflow-auto max-h-[150px]">
                    {/* Display raw text instead of rendering markdown */}
                    <pre className="whitespace-pre-wrap break-words">{box.data.result}</pre>
                  </div>
                )}
              </div>
            )}

{box.type === "output" && (
              <div className="min-h-[80px]">
                <div className="bg-gray-100 p-2 rounded overflow-auto text-sm max-h-[200px] mb-2">
                  {box.data.result ? (
                    <div className="markdown-content">
                      <ReactMarkdown>{box.data.result}</ReactMarkdown>
                    </div>
                  ) : (
                    "No output yet"
                  )}
                </div>
                {box.data.result && (
                  <button
                    onClick={() => {
                      // Create a blob with the content
                      const blob = new Blob([box.data.result], { type: "text/markdown" })
                      const url = URL.createObjectURL(blob)

// Create a temporary anchor element and trigger download
                      const a = document.createElement("a")
                      a.href = url
                      a.download = `output-${box.id.replace("box-", "")}.md`
                      document.body.appendChild(a)
                      a.click()

// Clean up
                      document.body.removeChild(a)
                      URL.revokeObjectURL(url)
                    }}
                    className="text-xs py-1 px-2 bg-green-100 text-green-700 rounded hover:bg-green-200 flex items-center justify-center w-full"
                  >
                    <FileText className="h-3 w-3 mr-1" /> Download as Markdown
                  </button>
                )}
              </div>
            )}

{/* Update the logic node rendering to emphasize multiple input capability */}
            {box.type === "logic" && (
              <div className="min-h-[80px]">
                <div className="text-sm mb-2">
                  <div className="flex justify-between items-center">
                    <span>Joins text inputs with "AND" between them</span>
                    <Badge variant="outline" className="text-xs">
                      {inputConnectionCount} input{inputConnectionCount !== 1 ? "s" : ""}
                    </Badge>
                  </div>
                  <div className="text-xs text-green-600 mt-1 flex items-center">
                    <AlertCircle className="h-3 w-3 mr-1" />
                    Can accept multiple inputs
                  </div>
                </div>

{/* Display all inputs */}
                {box.data.inputs &&
                  Object.entries(box.data.inputs).map(([sourceId, input], index) => (
                    <div key={sourceId} className="mt-2 p-2 bg-gray-50 rounded text-xs">
                      <strong>Input {index + 1}:</strong> {input.substring(0, 100)}
                      {input.length > 100 ? "..." : ""}
                    </div>
                  ))}

{box.data.result && (
                  <div className="mt-2 p-2 bg-gray-100 rounded text-xs overflow-auto max-h-[150px]">
                    <div className="markdown-content">
                      <strong>Output:</strong> {box.data.result}
                    </div>
                  </div>
                )}
              </div>
            )}

{/* Connector handles - centered vertically on the sides */}
            {box.type !== "output" && (
              <div
                className={`connector-handle output bg-blue-500 hover:bg-blue-600`}
                style={{ top: `${centerY - 12}px` }}
                onMouseDown={(e) => startDragging(e, box.id, true)}
              >
                <div className="dot"></div>
              </div>
            )}
            {box.type !== "input" && (
              <div
                className={`connector-handle input ${hasInputConnection && box.type === "process" ? "bg-gray-400" : "bg-gray-500"} ${
                  connectingFrom && (!hasInputConnection || box.type !== "process") ? "hover:bg-green-500" : ""
                }`}
                style={{ top: `${centerY - 12}px` }}
                onMouseUp={(e) => handleMouseUp(e, box.id)}
              >
                <div className="dot"></div>
              </div>
            )}
          </CardContent>
        </Card>
      </div>
    )
  }

// Add some CSS to make the connections more visible when dragging
  useEffect(() => {
    const style = document.createElement("style")
    style.innerHTML = `
    .connection-path {
      transition: stroke 0.2s;
    }
    .connection-path:hover {
      stroke: #3182ce;
      stroke-width: 4px;
    }
    .rubber-band-path {
      animation: dash 1s linear infinite;
    }
    @keyframes dash {
      to {
        stroke-dashoffset: 20;
      }
    }
    .markdown-content {
      font-size: 0.8rem;
    }
    .markdown-content h1, .markdown-content h2, .markdown-content h3 {
      font-weight: bold;
      margin-top: 0.5rem;;
      margin-bottom: 0.5rem;
    }
    .markdown-content h1 {
      font-size: 1.2rem;
    }
    .markdown-content h2 {
      font-size: 1.1rem;
    }
    .markdown-content h3 {
      font-size: 1rem;
    }
    .markdown-content p {
      margin-bottom: 0.5rem;
    }
    .markdown-content ul, .markdown-content ol {
      padding-left: 1.5rem;
      margin-bottom: 0.5rem;
    }
    .markdown-content code {
      background-color: #f0f0f0;
      padding: 0.1rem 0.2rem;
      border-radius: 0.2rem;
      font-family: monospace;
    }
    .markdown-content pre {
      background-color: #f0f0f0;
      padding: 0.5rem;
      border-radius: 0.2rem;
      overflow-x: auto;
      margin-bottom: 0.5rem;
    }
    .markdown-content blockquote {
      border-left: 3px solid #cbd5e0;
      padding-left: 0.5rem;
      color: #4a5568;
      margin-bottom: 0.5rem;
    }
    .markdown-content a {
      color: #3182ce;
      text-decoration: underline;
    }
    
    /* New styles for better connector handling */
    .connector-handle {
      position: absolute;
      width: 24px;
      height: 24px;
      border-radius: 50%;
      z-index: 20;
      border: 2px solid white;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: transform 0.1s;
    }
    
    .connector-handle:hover {
      transform: scale(1.1);
    }
    
    .connector-handle.input {
      left: -12px;
    }
    
    .connector-handle.output {
      right: -12px;
    }
    
    .connector-handle .dot {
      width: 8px;
      height: 8px;
      background-color: white;
      border-radius: 50%;
      pointer-events: none;
    }
    
    /* Prevent text selection during dragging */
    .dragging-connection {
      user-select: none;
    }
  `
    document.head.appendChild(style)
    return () => {
      document.head.removeChild(style)
    }
  }, [])

const handleMouseMove = (e: React.MouseEvent) => {
    if (canvasRef.current) {
      const canvasRect = canvasRef.current.getBoundingClientRect()

// Update mouse position for connection rubber banding
      if (connectingFrom) {
        // Prevent text selection during connection dragging
        e.preventDefault()

setMousePosition({
          x: e.clientX - canvasRect.left,
          y: e.clientY - canvasRect.top,
        })
      }

// Handle box dragging
      if (draggingBox) {
        const x = e.clientX - canvasRect.left - draggingOffset.x
        const y = e.clientY - canvasRect.top - draggingOffset.y

setBoxes(boxes.map((box) => (box.id === draggingBox ? { ...box, position: { x, y } } : box)))
      }
    }
  }

// Add a useEffect to handle document-level events for better dragging experience
  useEffect(() => {
    if (connectingFrom || draggingBox) {
      // Disable text selection during dragging operations
      document.body.style.userSelect = "none"

// Enable it back when done
      return () => {
        document.body.style.userSelect = ""
      }
    }
  }, [connectingFrom, draggingBox])

return (
    <main className="flex flex-col min-h-screen bg-gray-100 p-4">
      <div className="mb-4">
        <h1 className="text-2xl font-bold mb-2">Agentic AI Flow Builder</h1>
        <p className="text-gray-600 mb-4">Connect input, process, and output boxes to create an AI workflow</p>

<div className="flex flex-col gap-2 mb-4">
          <div className="flex gap-2 items-center">
            <div className="flex items-center gap-2">
              <label htmlFor="model-select" className="text-sm font-medium">
                Gemini Model:
              </label>
              <select
                id="model-select"
                value={selectedModel}
                onChange={(e) => setSelectedModel(e.target.value)}
                className="p-1 text-sm border rounded"
              >
                <option value="gemini-1.5-flash">Gemini 1.5 Flash</option>
                <option value="gemini-1.5-pro">Gemini 1.5 Pro</option>
                <option value="gemini-pro">Gemini Pro</option>
                {availableModels
                  .filter((model) => !["gemini-1.5-flash", "gemini-1.5-pro", "gemini-pro"].includes(model))
                  .map((model) => (
                    <option key={model} value={model}>
                      {model}
                    </option>
                  ))}
              </select>
            </div>
          </div>

{availableModels.length > 0 ? (
            <div className="text-sm text-green-600">Found {availableModels.length} available Gemini models</div>
          ) : (
            <div className="text-sm text-amber-600">
              {modelListError
                ? `Error fetching Gemini models: ${modelListError}`
                : "No Gemini models available. Transform nodes will still work."}
            </div>
          )}
        </div>

<div className="flex gap-2 flex-wrap">
          <Button onClick={() => addBox("input")} variant="outline">
            Add Input Box
          </Button>
          <Button onClick={() => addBox("file-input")} variant="outline">
            <FileText className="mr-2 h-4 w-4" />
            Add File Input Box
          </Button>
          <Button onClick={() => addBox("process")} variant="outline">
            Add Process Box
          </Button>
          <Button onClick={() => addBox("logic")} variant="outline">
            Add Logic Node (&)
          </Button>
          <Button onClick={() => addBox("output")} variant="outline">
            Add Output Box
          </Button>
          <Button onClick={executeFlow} disabled={processing} className="ml-auto bg-green-600 hover:bg-green-700">
            {processing ? (
              "Processing..."
            ) : (
              <div className="flex items-center gap-2">
                <Play className="h-4 w-4" />
                Execute Flow
              </div>
            )}
          </Button>
        </div>
      </div>

<div
        ref={canvasRef}
        className={`flex-1 bg-white rounded-lg shadow-md relative overflow-auto ${connectingFrom ? "dragging-connection" : ""}`}
        style={{ minHeight: "600px" }}
        onMouseMove={handleMouseMove}
        onMouseUp={(e) => handleMouseUp(e)}
      >
        {renderConnections()}
        {renderRubberBand()}
        {boxes.map(renderBox)}

{boxes.length === 0 && (
          <div className="absolute inset-0 flex items-center justify-center text-gray-400">
            Add boxes and connect them to create your workflow
          </div>
        )}
      </div>

{isApiKeyModalOpen && (
        <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
          <div className="bg-white p-6 rounded-lg shadow-lg max-w-md w-full">
            <h2 className="text-xl font-bold mb-4">Enter Your Gemini API Key</h2>
            <p className="mb-4 text-sm text-gray-600">
              To use the Gemini AI features, you need to provide your own API key. You can get one from the{" "}
              <a
                href="https://makersuite.google.com/"
                target="_blank"
                rel="noopener noreferrer"
                className="text-blue-500 underline"
              >
                Google AI Studio
              </a>
              .
            </p>
            <input
              type="password"
              value={userApiKey}
              onChange={(e) => setUserApiKey(e.target.value)}
              placeholder="Enter your Gemini API key"
              className="w-full p-2 border rounded mb-4"
            />
            <div className="flex justify-end gap-2">
              <Button variant="outline" onClick={() => setIsApiKeyModalOpen(false)}>
                Cancel
              </Button>
              <Button onClick={handleApiKeySubmit} disabled={!userApiKey}>
                Save API Key
              </Button>
            </div>
          </div>
        </div>
      )}
    </main>
  )
}
</article></body></html>

About

Tags

Share

About

Tags

Share

More from dmorgan29-1703

More Templates Like This

About

Tags

Share

About

Tags

Share

More from dmorgan29-1703

More Templates Like This