[V0_FILE]typescriptreact:file="components/flow-chart.tsx" isMerged="true" "use client" import { useCallback } from "react" import ReactFlow, { type Node, type Edge, addEdge, Background, type Connection, ConnectionMode, Controls, useNodesState, useEdgesState, Panel, } from "reactflow" import "reactflow/dist/style.css" const initialNodes: Node[] = [ { id: "1", type: "input", data: { label: "Input Node" }, position: { x: 250, y: 25 }, style: { background: "#f0f9ff", color: "#0c4a6e", border: "1px solid #0c4a6e", borderRadius: "8px", padding: "10px", width: 150, }, }, { id: "2", data: { label: "Processing Node" }, position: { x: 100, y: 125 }, style: { background: "#f0fdf4", color: "#166534", border: "1px solid #166534", borderRadius: "8px", padding: "10px", width: 150, }, }, { id: "3", data: { label: "Default Node" }, position: { x: 400, y: 125 }, style: { background: "#fef2f2", color: "#991b1b", border: "1px solid #991b1b", borderRadius: "8px", padding: "10px", width: 150, }, }, { id: "4", type: "output", data: { label: "Output Node" }, position: { x: 250, y: 250 }, style: { background: "#f5f3ff", color: "#5b21b6", border: "1px solid #5b21b6", borderRadius: "8px", padding: "10px", width: 150, }, }, ] const initialEdges: Edge[] = [ { id: "e1-2", source: "1", target: "2", animated: true }, { id: "e1-3", source: "1", target: "3", animated: true }, { id: "e2-4", source: "2", target: "4", animated: true }, { id: "e3-4", source: "3", target: "4", animated: true }, ] export default function FlowChart() { const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes) const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges) const onConnect = useCallback((params: Edge | Connection) => setEdges((eds) => addEdge(params, eds)), [setEdges]) return (

Drag to connect nodes

Scroll to zoom

) } [V0_FILE]typescriptreact:file="app/page.tsx" isFixed="true" isEdit="true" isQuickEdit="true" isMerged="true" import EsperwiseFlow from "./EsperwiseFlow" // Assuming EsperwiseFlow is a component in the same directory export default function Home() { return (

Esperwise

AI-Powered Medical Assistant Platform

) } [V0_FILE]typescriptreact:file="components/esperwise-flow.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { useCallback } from "react" import ReactFlow, { Background, Controls, MiniMap, Panel, useNodesState, useEdgesState, addEdge, type Node, type Edge, type Connection, MarkerType, } from "reactflow" import "reactflow/dist/style.css" import { UserRound, Stethoscope, Bot, Link, Database, MessageSquare, FileText, Workflow, Ear, FileCheck, FilePlus2, BrainCircuit, } from "lucide-react" import type { JSX } from "react/jsx-runtime" // Import JSX to fix the undeclared variable error // Node styles - update colors to match website theme const doctorNodeStyle = { background: "#0d9488", color: "white", border: "1px solid #0f766e", borderRadius: "12px", padding: "16px", boxShadow: "0 4px 6px -1px rgba(0, 0, 0, 0.3)", width: 200, } const patientNodeStyle = { background: "#134e4a", color: "white", border: "1px solid #115e59", borderRadius: "12px", padding: "16px", boxShadow: "0 4px 6px -1px rgba(0, 0, 0, 0.3)", width: 200, } const aiNodeStyle = { background: "#10b981", color: "white", border: "1px solid #059669", borderRadius: "12px", padding: "16px", boxShadow: "0 4px 6px -1px rgba(0, 0, 0, 0.3)", width: 200, } const dataNodeStyle = { background: "#0f766e", color: "white", border: "1px solid #0d9488", borderRadius: "12px", padding: "16px", boxShadow: "0 4px 6px -1px rgba(0, 0, 0, 0.3)", width: 200, } const outputNodeStyle = { background: "#14b8a6", color: "white", border: "1px solid #0d9488", borderRadius: "12px", padding: "16px", boxShadow: "0 4px 6px -1px rgba(0, 0, 0, 0.3)", width: 200, } // Custom node data type type NodeData = { label: string icon?: JSX.Element description?: string } // Initial nodes const initialNodes: Node[] = [ // Feature 1: Doctor-Created Chatbots { id: "doctor1", data: { label: "Doctor", icon: , description: "Creates specialized chatbots", }, position: { x: 100, y: 100 }, style: doctorNodeStyle, }, { id: "create-chatbot", data: { label: "Create Chatbot", icon: , description: "General or specialized", }, position: { x: 100, y: 250 }, style: aiNodeStyle, }, { id: "invite-patients", data: { label: "Invite Patients", icon: , description: "Share access links", }, position: { x: 100, y: 400 }, style: doctorNodeStyle, }, { id: "rag-training", data: { label: "RAG Training", icon: , description: "Train on doctor's style & questions", }, position: { x: 350, y: 250 }, style: dataNodeStyle, }, { id: "patient1", data: { label: "Patient", icon: , description: "Accesses via invitation link", }, position: { x: 100, y: 550 }, style: patientNodeStyle, }, { id: "chatbot-interaction", data: { label: "Chatbot Interaction", icon: , description: "AI asks relevant questions", }, position: { x: 350, y: 550 }, style: aiNodeStyle, }, // Feature 2: Doctor-Patient Session AI Agents { id: "doctor2", data: { label: "Doctor", icon: , description: "Conducts patient sessions", }, position: { x: 700, y: 100 }, style: doctorNodeStyle, }, { id: "workflow-designer", data: { label: "Workflow Designer", icon: , description: "Create dynamic workflows", }, position: { x: 700, y: 250 }, style: doctorNodeStyle, }, { id: "ai-agents", data: { label: "AI Agents", icon: , description: "Dynamic agents with system prompts", }, position: { x: 950, y: 250 }, style: aiNodeStyle, }, { id: "patient2", data: { label: "Patient", icon: , description: "Participates in session", }, position: { x: 700, y: 400 }, style: patientNodeStyle, }, { id: "session-listener", data: { label: "Session Listener", icon: , description: "Esperwise listens to conversation", }, position: { x: 950, y: 400 }, style: aiNodeStyle, }, { id: "workflow-execution", data: { label: "Workflow Execution", icon: , description: "Apply workflow to session", }, position: { x: 825, y: 550 }, style: aiNodeStyle, }, { id: "transcript", data: { label: "Transcript", icon: , description: "Complete session transcript", }, position: { x: 650, y: 700 }, style: outputNodeStyle, }, { id: "medical-summary", data: { label: "Medical Summary", icon: , description: "Concise medical summary", }, position: { x: 825, y: 700 }, style: outputNodeStyle, }, { id: "diagnosis", data: { label: "Diagnosis", icon: , description: "AI-assisted diagnosis", }, position: { x: 1000, y: 700 }, style: outputNodeStyle, }, ] // Update the edge styles to match the website's color scheme const initialEdges: Edge[] = [ // Feature 1: Doctor-Created Chatbots { id: "e-doctor1-create", source: "doctor1", target: "create-chatbot", animated: true, style: { stroke: "#0d9488", strokeWidth: 2 }, markerEnd: { type: MarkerType.ArrowClosed, color: "#0d9488" }, }, { id: "e-create-rag", source: "create-chatbot", target: "rag-training", animated: true, style: { stroke: "#10b981", strokeWidth: 2 }, markerEnd: { type: MarkerType.ArrowClosed, color: "#10b981" }, }, { id: "e-create-invite", source: "create-chatbot", target: "invite-patients", animated: true, style: { stroke: "#10b981", strokeWidth: 2 }, markerEnd: { type: MarkerType.ArrowClosed, color: "#10b981" }, }, { id: "e-invite-patient", source: "invite-patients", target: "patient1", animated: true, style: { stroke: "#0d9488", strokeWidth: 2 }, markerEnd: { type: MarkerType.ArrowClosed, color: "#0d9488" }, }, { id: "e-patient-chatbot", source: "patient1", target: "chatbot-interaction", animated: true, style: { stroke: "#134e4a", strokeWidth: 2 }, markerEnd: { type: MarkerType.ArrowClosed, color: "#134e4a" }, }, { id: "e-rag-chatbot", source: "rag-training", target: "chatbot-interaction", animated: true, style: { stroke: "#0f766e", strokeWidth: 2 }, markerEnd: { type: MarkerType.ArrowClosed, color: "#0f766e" }, }, // Feature 2: Doctor-Patient Session AI Agents { id: "e-doctor2-workflow", source: "doctor2", target: "workflow-designer", animated: true, style: { stroke: "#0d9488", strokeWidth: 2 }, markerEnd: { type: MarkerType.ArrowClosed, color: "#0d9488" }, }, { id: "e-workflow-agents", source: "workflow-designer", target: "ai-agents", animated: true, style: { stroke: "#0d9488", strokeWidth: 2 }, markerEnd: { type: MarkerType.ArrowClosed, color: "#0d9488" }, }, { id: "e-doctor2-patient2", source: "doctor2", target: "patient2", animated: true, style: { stroke: "#0d9488", strokeWidth: 2 }, markerEnd: { type: MarkerType.ArrowClosed, color: "#0d9488" }, }, { id: "e-session-listener", source: "patient2", target: "session-listener", animated: true, style: { stroke: "#134e4a", strokeWidth: 2 }, markerEnd: { type: MarkerType.ArrowClosed, color: "#134e4a" }, }, { id: "e-doctor-listener", source: "doctor2", target: "session-listener", animated: true, style: { stroke: "#0d9488", strokeWidth: 2 }, markerEnd: { type: MarkerType.ArrowClosed, color: "#0d9488" }, }, { id: "e-agents-workflow", source: "ai-agents", target: "workflow-execution", animated: true, style: { stroke: "#10b981", strokeWidth: 2 }, markerEnd: { type: MarkerType.ArrowClosed, color: "#10b981" }, }, { id: "e-listener-workflow", source: "session-listener", target: "workflow-execution", animated: true, style: { stroke: "#10b981", strokeWidth: 2 }, markerEnd: { type: MarkerType.ArrowClosed, color: "#10b981" }, }, { id: "e-workflow-transcript", source: "workflow-execution", target: "transcript", animated: true, style: { stroke: "#10b981", strokeWidth: 2 }, markerEnd: { type: MarkerType.ArrowClosed, color: "#10b981" }, }, { id: "e-workflow-summary", source: "workflow-execution", target: "medical-summary", animated: true, style: { stroke: "#10b981", strokeWidth: 2 }, markerEnd: { type: MarkerType.ArrowClosed, color: "#10b981" }, }, { id: "e-workflow-diagnosis", source: "workflow-execution", target: "diagnosis", animated: true, style: { stroke: "#10b981", strokeWidth: 2 }, markerEnd: { type: MarkerType.ArrowClosed, color: "#10b981" }, }, ] // Custom node component const CustomNode = ({ data }: { data: NodeData }) => { return (

{data.icon}

{data.label}

{data.description &&

{data.description}

}

) } // Node types const nodeTypes = { custom: CustomNode, } export default function EsperwiseFlow() { const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes) const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges) const onConnect = useCallback((params: Edge | Connection) => setEdges((eds) => addEdge(params, eds)), [setEdges]) // Update the return statement to use the dark theme return ( { if (n.style?.background) return n.style.background as string return "#eee" }} nodeColor={(n) => { if (n.style?.background) return n.style.background as string return "#fff" }} nodeBorderRadius={12} maskColor="rgba(10, 30, 28, 0.7)" style={{ background: "#0a1e1c" }} />

Esperwise Platform Legend

Doctor Actions

Patient Interactions

AI Components

Data Processing

Outputs

) } [V0_FILE]typescriptreact:file="app/EsperwiseFlow.tsx" isQuickEdit="true" isMerged="true" "use client" import EsperwiseFlow from "@/components/esperwise-flow" export default EsperwiseFlow [V0_FILE]typescriptreact:file="app/onboarding-flow/page.tsx" isMerged="true" import OnboardingNowFlow from "@/components/onboarding-now-flow" export default function OnboardingFlowPage() { return (

OnboardingNow

AI-Powered Interview & Onboarding Platform

{/* Subtle border glow effect */}

) } [V0_FILE]typescriptreact:file="components/onboarding-now-flow.tsx" isMerged="true" "use client" import { useCallback, useState } from "react" import ReactFlow, { Background, Controls, MiniMap, Panel, useNodesState, useEdgesState, addEdge, type Node, type Edge, type Connection, MarkerType, } from "reactflow" import "reactflow/dist/style.css" import { Users, Building2, Palette, ToggleLeft, FileSpreadsheet, UserPlus, Mic, Mail, UserCircle, BrainCircuit, FileText, BarChart3, Filter, Download, CheckCircle2, Settings, Briefcase, Globe, PanelRight, MessageSquare, } from "lucide-react" import type { JSX } from "react/jsx-runtime" // Node styles with gradients for visual appeal const superAdminNodeStyle = { background: "linear-gradient(135deg, #0d9488 0%, #0f766e 100%)", color: "white", border: "1px solid rgba(15, 118, 110, 0.5)", borderRadius: "12px", padding: "16px", boxShadow: "0 4px 20px -1px rgba(0, 0, 0, 0.4), 0 0 15px rgba(13, 148, 136, 0.2)", width: 220, transition: "all 0.3s ease", } const companyAdminNodeStyle = { background: "linear-gradient(135deg, #134e4a 0%, #115e59 100%)", color: "white", border: "1px solid rgba(17, 94, 89, 0.5)", borderRadius: "12px", padding: "16px", boxShadow: "0 4px 20px -1px rgba(0, 0, 0, 0.4), 0 0 15px rgba(19, 78, 74, 0.2)", width: 220, transition: "all 0.3s ease", } const aiNodeStyle = { background: "linear-gradient(135deg, #10b981 0%, #059669 100%)", color: "white", border: "1px solid rgba(5, 150, 105, 0.5)", borderRadius: "12px", padding: "16px", boxShadow: "0 4px 20px -1px rgba(0, 0, 0, 0.4), 0 0 15px rgba(16, 185, 129, 0.3)", width: 220, transition: "all 0.3s ease", } const candidateNodeStyle = { background: "linear-gradient(135deg, #0f766e 0%, #0d9488 100%)", color: "white", border: "1px solid rgba(13, 148, 136, 0.5)", borderRadius: "12px", padding: "16px", boxShadow: "0 4px 20px -1px rgba(0, 0, 0, 0.4), 0 0 15px rgba(15, 118, 110, 0.2)", width: 220, transition: "all 0.3s ease", } const outputNodeStyle = { background: "linear-gradient(135deg, #14b8a6 0%, #0d9488 100%)", color: "white", border: "1px solid rgba(13, 148, 136, 0.5)", borderRadius: "12px", padding: "16px", boxShadow: "0 4px 20px -1px rgba(0, 0, 0, 0.4), 0 0 15px rgba(20, 184, 166, 0.3)", width: 220, transition: "all 0.3s ease", } // Custom node data type type NodeData = { label: string icon?: JSX.Element description?: string } // Initial nodes const initialNodes: Node[] = [ // Super Admin Section { id: "super-admin", data: { label: "Super Admin", icon: , description: "Platform administrator", }, position: { x: 100, y: 100 }, style: superAdminNodeStyle, }, { id: "create-tenant", data: { label: "Create Tenant", icon: , description: "Add new company", }, position: { x: 100, y: 250 }, style: superAdminNodeStyle, }, { id: "white-label", data: { label: "White Label Config", icon: , description: "Branding & customization", }, position: { x: 100, y: 400 }, style: superAdminNodeStyle, }, { id: "feature-toggle", data: { label: "Feature Toggle", icon: , description: "Enable/disable features", }, position: { x: 100, y: 550 }, style: superAdminNodeStyle, }, // Company Admin Section { id: "company-admin", data: { label: "Company Admin", icon: , description: "Tenant administrator", }, position: { x: 400, y: 100 }, style: companyAdminNodeStyle, }, { id: "create-campaign", data: { label: "Create Campaign", icon: , description: "Set up interview process", }, position: { x: 400, y: 250 }, style: companyAdminNodeStyle, }, { id: "add-candidates", data: { label: "Add Candidates", icon: , description: "Upload or add leads", }, position: { x: 400, y: 400 }, style: companyAdminNodeStyle, }, { id: "define-questions", data: { label: "Define Questions", icon: , description: "Create interview questions", }, position: { x: 650, y: 250 }, style: companyAdminNodeStyle, }, { id: "activate-campaign", data: { label: "Activate Campaign", icon: , description: "Launch interview process", }, position: { x: 650, y: 400 }, style: companyAdminNodeStyle, }, { id: "send-invites", data: { label: "Send Invites", icon: , description: "Email unique links", }, position: { x: 525, y: 550 }, style: companyAdminNodeStyle, }, // Candidate Section { id: "candidate", data: { label: "Candidate", icon: , description: "Interview participant", }, position: { x: 900, y: 100 }, style: candidateNodeStyle, }, { id: "branded-interface", data: { label: "Branded Interface", icon: , description: "Custom company branding", }, position: { x: 900, y: 250 }, style: candidateNodeStyle, }, { id: "ai-interviewer", data: { label: "AI Interviewer", icon: , description: "Voice-enabled questions", }, position: { x: 900, y: 400 }, style: aiNodeStyle, }, { id: "voice-response", data: { label: "Voice Response", icon: , description: "Candidate answers via mic", }, position: { x: 900, y: 550 }, style: candidateNodeStyle, }, // AI Processing Section { id: "transcription", data: { label: "Transcription", icon: , description: "Convert speech to text", }, position: { x: 1150, y: 250 }, style: aiNodeStyle, }, { id: "nlp-scoring", data: { label: "NLP Scoring", icon: , description: "Evaluate responses", }, position: { x: 1150, y: 400 }, style: aiNodeStyle, }, { id: "scorecard", data: { label: "Scorecard Generation", icon: , description: "Create candidate assessment", }, position: { x: 1150, y: 550 }, style: aiNodeStyle, }, // Admin Reporting Section { id: "admin-panel", data: { label: "Admin Panel", icon: , description: "Interview management", }, position: { x: 650, y: 700 }, style: companyAdminNodeStyle, }, { id: "interview-logs", data: { label: "Interview Logs", icon: , description: "Detailed reports", }, position: { x: 400, y: 700 }, style: outputNodeStyle, }, { id: "filter-search", data: { label: "Filter & Search", icon: , description: "Find specific candidates", }, position: { x: 900, y: 700 }, style: outputNodeStyle, }, { id: "export", data: { label: "Export Data", icon: , description: "Download reports", }, position: { x: 1150, y: 700 }, style: outputNodeStyle, }, ] // Enhanced edges with better styling const initialEdges: Edge[] = [ // Super Admin flows { id: "e-super-create", source: "super-admin", target: "create-tenant", animated: true, style: { stroke: "url(#superadmin-gradient)", strokeWidth: 3 }, markerEnd: { type: MarkerType.ArrowClosed, color: "#0d9488" }, }, { id: "e-create-white", source: "create-tenant", target: "white-label", animated: true, style: { stroke: "url(#superadmin-gradient)", strokeWidth: 3 }, markerEnd: { type: MarkerType.ArrowClosed, color: "#0d9488" }, }, { id: "e-white-feature", source: "white-label", target: "feature-toggle", animated: true, style: { stroke: "url(#superadmin-gradient)", strokeWidth: 3 }, markerEnd: { type: MarkerType.ArrowClosed, color: "#0d9488" }, }, { id: "e-create-company", source: "create-tenant", target: "company-admin", animated: true, style: { stroke: "url(#superadmin-gradient)", strokeWidth: 3 }, markerEnd: { type: MarkerType.ArrowClosed, color: "#0d9488" }, }, // Company Admin flows { id: "e-company-campaign", source: "company-admin", target: "create-campaign", animated: true, style: { stroke: "url(#company-gradient)", strokeWidth: 3 }, markerEnd: { type: MarkerType.ArrowClosed, color: "#134e4a" }, }, { id: "e-campaign-candidates", source: "create-campaign", target: "add-candidates", animated: true, style: { stroke: "url(#company-gradient)", strokeWidth: 3 }, markerEnd: { type: MarkerType.ArrowClosed, color: "#134e4a" }, }, { id: "e-campaign-questions", source: "create-campaign", target: "define-questions", animated: true, style: { stroke: "url(#company-gradient)", strokeWidth: 3 }, markerEnd: { type: MarkerType.ArrowClosed, color: "#134e4a" }, }, { id: "e-questions-activate", source: "define-questions", target: "activate-campaign", animated: true, style: { stroke: "url(#company-gradient)", strokeWidth: 3 }, markerEnd: { type: MarkerType.ArrowClosed, color: "#134e4a" }, }, { id: "e-candidates-activate", source: "add-candidates", target: "activate-campaign", animated: true, style: { stroke: "url(#company-gradient)", strokeWidth: 3 }, markerEnd: { type: MarkerType.ArrowClosed, color: "#134e4a" }, }, { id: "e-activate-invites", source: "activate-campaign", target: "send-invites", animated: true, style: { stroke: "url(#company-gradient)", strokeWidth: 3 }, markerEnd: { type: MarkerType.ArrowClosed, color: "#134e4a" }, }, { id: "e-invites-candidate", source: "send-invites", target: "candidate", animated: true, style: { stroke: "url(#company-gradient)", strokeWidth: 3 }, markerEnd: { type: MarkerType.ArrowClosed, color: "#134e4a" }, }, // Candidate flows { id: "e-candidate-interface", source: "candidate", target: "branded-interface", animated: true, style: { stroke: "url(#candidate-gradient)", strokeWidth: 3 }, markerEnd: { type: MarkerType.ArrowClosed, color: "#0f766e" }, }, { id: "e-interface-ai", source: "branded-interface", target: "ai-interviewer", animated: true, style: { stroke: "url(#candidate-gradient)", strokeWidth: 3 }, markerEnd: { type: MarkerType.ArrowClosed, color: "#0f766e" }, }, { id: "e-ai-voice", source: "ai-interviewer", target: "voice-response", animated: true, style: { stroke: "url(#ai-gradient)", strokeWidth: 3 }, markerEnd: { type: MarkerType.ArrowClosed, color: "#10b981" }, }, // AI Processing flows { id: "e-voice-transcription", source: "voice-response", target: "transcription", animated: true, style: { stroke: "url(#candidate-gradient)", strokeWidth: 3 }, markerEnd: { type: MarkerType.ArrowClosed, color: "#0f766e" }, }, { id: "e-transcription-nlp", source: "transcription", target: "nlp-scoring", animated: true, style: { stroke: "url(#ai-gradient)", strokeWidth: 3 }, markerEnd: { type: MarkerType.ArrowClosed, color: "#10b981" }, }, { id: "e-nlp-scorecard", source: "nlp-scoring", target: "scorecard", animated: true, style: { stroke: "url(#ai-gradient)", strokeWidth: 3 }, markerEnd: { type: MarkerType.ArrowClosed, color: "#10b981" }, }, // Admin Reporting flows { id: "e-scorecard-admin", source: "scorecard", target: "admin-panel", animated: true, style: { stroke: "url(#ai-gradient)", strokeWidth: 3 }, markerEnd: { type: MarkerType.ArrowClosed, color: "#10b981" }, }, { id: "e-admin-logs", source: "admin-panel", target: "interview-logs", animated: true, style: { stroke: "url(#company-gradient)", strokeWidth: 3 }, markerEnd: { type: MarkerType.ArrowClosed, color: "#134e4a" }, }, { id: "e-admin-filter", source: "admin-panel", target: "filter-search", animated: true, style: { stroke: "url(#company-gradient)", strokeWidth: 3 }, markerEnd: { type: MarkerType.ArrowClosed, color: "#134e4a" }, }, { id: "e-admin-export", source: "admin-panel", target: "export", animated: true, style: { stroke: "url(#company-gradient)", strokeWidth: 3 }, markerEnd: { type: MarkerType.ArrowClosed, color: "#134e4a" }, }, ] // Enhanced custom node component with hover effects const CustomNode = ({ data }: { data: NodeData }) => { const [isHovered, setIsHovered] = useState(false) return (

setIsHovered(true)} onMouseLeave={() => setIsHovered(false)} >

{data.icon}

{data.label}

{data.description && (

{data.description}

)}

) } // Node types const nodeTypes = { custom: CustomNode, } export default function OnboardingNowFlow() { const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes) const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges) const onConnect = useCallback((params: Edge | Connection) => setEdges((eds) => addEdge(params, eds)), [setEdges]) return (

{/* Decorative background elements */}

{/* Title section */}

OnboardingNow Platform

AI-Powered Interview & Onboarding Workflow

{/* SVG Definitions for gradients */} { if (n.style?.background) { if (typeof n.style.background === "string" && n.style.background.includes("gradient")) { return "#0d9488" } return n.style.background as string } return "#eee" }} nodeColor={(n) => { if (n.style?.background) { if (typeof n.style.background === "string" && n.style.background.includes("gradient")) { return "#0d9488" } return n.style.background as string } return "#fff" }} nodeBorderRadius={12} maskColor="rgba(10, 30, 28, 0.7)" style={{ background: "rgba(15, 41, 34, 0.8)", border: "1px solid rgba(13, 148, 136, 0.3)", borderRadius: "8px", boxShadow: "0 4px 20px rgba(0, 0, 0, 0.3)", backdropFilter: "blur(8px)", }} className="!bottom-5 !right-5" />

Platform Legend

Super Admin

Company Admin

Candidate

AI Components

Outputs

) } [V0_FILE]typescriptreact:file="app/chatbot-architecture/page.tsx" isMerged="true" import ChatbotArchitectureFlow from "@/components/chatbot-architecture-flow" export default function ChatbotArchitecturePage() { return (

AI Chatbot Architecture

LLM-Powered Support with Intercom Integration

{/* Subtle border glow effect */}

) } [V0_FILE]typescriptreact:file="components/chatbot-architecture-flow.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { useCallback, useState } from "react" import ReactFlow, { Background, Controls, MiniMap, Panel, useNodesState, useEdgesState, addEdge, type Node, type Edge, type Connection, MarkerType, } from "reactflow" import "reactflow/dist/style.css" import { User, MessageSquare, Database, Bot, Server, BarChart3, Users, ArrowRightLeft, FileText, BrainCircuit, Search, Layers, Network, Webhook, Ticket, Contact, Cpu, } from "lucide-react" import type { JSX } from "react/jsx-runtime" // Node styles with gradients for visual appeal const userNodeStyle = { background: "linear-gradient(135deg, #0d9488 0%, #0f766e 100%)", color: "white", border: "1px solid rgba(15, 118, 110, 0.5)", borderRadius: "12px", padding: "16px", boxShadow: "0 4px 20px -1px rgba(0, 0, 0, 0.4), 0 0 15px rgba(13, 148, 136, 0.2)", width: 220, transition: "all 0.3s ease", } const frontendNodeStyle = { background: "linear-gradient(135deg, #134e4a 0%, #115e59 100%)", color: "white", border: "1px solid rgba(17, 94, 89, 0.5)", borderRadius: "12px", padding: "16px", boxShadow: "0 4px 20px -1px rgba(0, 0, 0, 0.4), 0 0 15px rgba(19, 78, 74, 0.2)", width: 220, transition: "all 0.3s ease", } const aiNodeStyle = { background: "linear-gradient(135deg, #10b981 0%, #059669 100%)", color: "white", border: "1px solid rgba(5, 150, 105, 0.5)", borderRadius: "12px", padding: "16px", boxShadow: "0 4px 20px -1px rgba(0, 0, 0, 0.4), 0 0 15px rgba(16, 185, 129, 0.3)", width: 220, transition: "all 0.3s ease", } const dataNodeStyle = { background: "linear-gradient(135deg, #0f766e 0%, #0d9488 100%)", color: "white", border: "1px solid rgba(13, 148, 136, 0.5)", borderRadius: "12px", padding: "16px", boxShadow: "0 4px 20px -1px rgba(0, 0, 0, 0.4), 0 0 15px rgba(15, 118, 110, 0.2)", width: 220, transition: "all 0.3s ease", } const intercomNodeStyle = { background: "linear-gradient(135deg, #14b8a6 0%, #0d9488 100%)", color: "white", border: "1px solid rgba(13, 148, 136, 0.5)", borderRadius: "12px", padding: "16px", boxShadow: "0 4px 20px -1px rgba(0, 0, 0, 0.4), 0 0 15px rgba(20, 184, 166, 0.3)", width: 220, transition: "all 0.3s ease", } const clusteringNodeStyle = { background: "linear-gradient(135deg, #7e22ce 0%, #6b21a8 100%)", color: "white", border: "1px solid rgba(107, 33, 168, 0.5)", borderRadius: "12px", padding: "16px", boxShadow: "0 4px 20px -1px rgba(0, 0, 0, 0.4), 0 0 15px rgba(126, 34, 206, 0.3)", width: 220, transition: "all 0.3s ease", } // Custom node data type type NodeData = { label: string icon?: JSX.Element description?: string } // Initial nodes const initialNodes: Node[] = [ // User & Frontend Section { id: "user", data: { label: "User", icon: , description: "Customer seeking support", }, position: { x: 100, y: 250 }, style: userNodeStyle, }, { id: "chat-widget", data: { label: "Chat Widget", icon: , description: "Website/app embedded interface", }, position: { x: 400, y: 250 }, style: frontendNodeStyle, }, // AI Chatbot Section { id: "ai-chatbot", data: { label: "AI Chatbot", icon: , description: "Processes user queries", }, position: { x: 700, y: 250 }, style: aiNodeStyle, }, { id: "llm", data: { label: "LLM", icon: , description: "GPT-4 or Claude model", }, position: { x: 700, y: 100 }, style: aiNodeStyle, }, { id: "rag", data: { label: "RAG System", icon: , description: "Retrieval Augmented Generation", }, position: { x: 700, y: 400 }, style: aiNodeStyle, }, // Knowledge Base Section { id: "knowledge-base", data: { label: "Knowledge Base", icon: , description: "Vector database (e.g., Pinecone)", }, position: { x: 1000, y: 400 }, style: dataNodeStyle, }, { id: "backend-server", data: { label: "Backend Server", icon: , description: "Hosts AI model & processes requests", }, position: { x: 1000, y: 250 }, style: dataNodeStyle, }, // API Gateway & Intercom Section { id: "api-gateway", data: { label: "API Gateway", icon: , description: "Secure communication layer", }, position: { x: 700, y: 550 }, style: dataNodeStyle, }, { id: "intercom", data: { label: "Intercom", icon: , description: "Human agent platform", }, position: { x: 400, y: 550 }, style: intercomNodeStyle, }, { id: "human-agent", data: { label: "Human Agent", icon: , description: "Support staff", }, position: { x: 100, y: 550 }, style: intercomNodeStyle, }, // Metrics & Analysis Section { id: "metrics-dashboard", data: { label: "Metrics Dashboard", icon: , description: "Performance monitoring", }, position: { x: 400, y: 700 }, style: dataNodeStyle, }, // Clustering & Transcript Analysis Section { id: "transcript-data", data: { label: "6-Month Transcripts", icon: , description: "Historical chat data", }, position: { x: 1000, y: 700 }, style: dataNodeStyle, }, { id: "clustering-module", data: { label: "Clustering Module", icon: , description: "Groups similar queries", }, position: { x: 700, y: 700 }, style: clusteringNodeStyle, }, { id: "query-patterns", data: { label: "Query Patterns", icon: , description: "Identified common questions", }, position: { x: 700, y: 850 }, style: clusteringNodeStyle, }, { id: "optimization", data: { label: "System Optimization", icon: , description: "Improved efficiency & accuracy", }, position: { x: 400, y: 850 }, style: clusteringNodeStyle, }, // Intercom API Components { id: "conversations-api", data: { label: "Conversations API", icon: , description: "Manage customer conversations", }, position: { x: 100, y: 400 }, style: intercomNodeStyle, }, { id: "contacts-api", data: { label: "Contacts API", icon: , description: "Access customer data", }, position: { x: 250, y: 475 }, style: intercomNodeStyle, }, { id: "webhooks-api", data: { label: "Webhooks API", icon: , description: "Real-time event notifications", }, position: { x: 400, y: 400 }, style: intercomNodeStyle, }, { id: "tickets-api", data: { label: "Tickets API", icon: , description: "Create & manage support tickets", }, position: { x: 550, y: 475 }, style: intercomNodeStyle, }, ] // Enhanced edges with better styling const initialEdges: Edge[] = [ // User to Frontend flow { id: "e-user-chat", source: "user", target: "chat-widget", animated: true, style: { stroke: "url(#user-gradient)", strokeWidth: 3 }, markerEnd: { type: MarkerType.ArrowClosed, color: "#0d9488" }, label: "Initiates chat", }, // Frontend to AI flow { id: "e-chat-ai", source: "chat-widget", target: "ai-chatbot", animated: true, style: { stroke: "url(#frontend-gradient)", strokeWidth: 3 }, markerEnd: { type: MarkerType.ArrowClosed, color: "#134e4a" }, label: "Sends query", }, // AI internal connections { id: "e-ai-llm", source: "ai-chatbot", target: "llm", animated: true, style: { stroke: "url(#ai-gradient)", strokeWidth: 3 }, markerEnd: { type: MarkerType.ArrowClosed, color: "#10b981" }, label: "Processes with", }, { id: "e-ai-rag", source: "ai-chatbot", target: "rag", animated: true, style: { stroke: "url(#ai-gradient)", strokeWidth: 3 }, markerEnd: { type: MarkerType.ArrowClosed, color: "#10b981" }, label: "Enhances with", }, // RAG to Knowledge Base { id: "e-rag-kb", source: "rag", target: "knowledge-base", animated: true, style: { stroke: "url(#ai-gradient)", strokeWidth: 3 }, markerEnd: { type: MarkerType.ArrowClosed, color: "#10b981" }, label: "Retrieves from", }, // Backend connections { id: "e-ai-backend", source: "ai-chatbot", target: "backend-server", animated: true, style: { stroke: "url(#ai-gradient)", strokeWidth: 3 }, markerEnd: { type: MarkerType.ArrowClosed, color: "#10b981" }, }, { id: "e-backend-kb", source: "backend-server", target: "knowledge-base", animated: true, style: { stroke: "url(#data-gradient)", strokeWidth: 3 }, markerEnd: { type: MarkerType.ArrowClosed, color: "#0f766e" }, }, // AI to API Gateway { id: "e-ai-api", source: "ai-chatbot", target: "api-gateway", animated: true, style: { stroke: "url(#ai-gradient)", strokeWidth: 3 }, markerEnd: { type: MarkerType.ArrowClosed, color: "#10b981" }, label: "Escalates via", }, // API Gateway to Intercom { id: "e-api-intercom", source: "api-gateway", target: "intercom", animated: true, style: { stroke: "url(#data-gradient)", strokeWidth: 3 }, markerEnd: { type: MarkerType.ArrowClosed, color: "#0f766e" }, label: "Transfers to", }, // Intercom to Human Agent { id: "e-intercom-human", source: "intercom", target: "human-agent", animated: true, style: { stroke: "url(#intercom-gradient)", strokeWidth: 3 }, markerEnd: { type: MarkerType.ArrowClosed, color: "#14b8a6" }, label: "Assigns to", }, // Human Agent back to User { id: "e-human-user", source: "human-agent", target: "user", animated: true, style: { stroke: "url(#intercom-gradient)", strokeWidth: 3 }, markerEnd: { type: MarkerType.ArrowClosed, color: "#14b8a6" }, label: "Responds to", type: "smoothstep", }, // Metrics connections { id: "e-intercom-metrics", source: "intercom", target: "metrics-dashboard", animated: true, style: { stroke: "url(#intercom-gradient)", strokeWidth: 3 }, markerEnd: { type: MarkerType.ArrowClosed, color: "#14b8a6" }, }, { id: "e-ai-metrics", source: "ai-chatbot", target: "metrics-dashboard", animated: true, style: { stroke: "url(#ai-gradient)", strokeWidth: 3 }, markerEnd: { type: MarkerType.ArrowClosed, color: "#10b981" }, type: "smoothstep", }, // Clustering connections { id: "e-transcript-clustering", source: "transcript-data", target: "clustering-module", animated: true, style: { stroke: "url(#data-gradient)", strokeWidth: 3 }, markerEnd: { type: MarkerType.ArrowClosed, color: "#0f766e" }, label: "Feeds into", }, { id: "e-clustering-patterns", source: "clustering-module", target: "query-patterns", animated: true, style: { stroke: "url(#clustering-gradient)", strokeWidth: 3 }, markerEnd: { type: MarkerType.ArrowClosed, color: "#7e22ce" }, label: "Identifies", }, { id: "e-patterns-optimization", source: "query-patterns", target: "optimization", animated: true, style: { stroke: "url(#clustering-gradient)", strokeWidth: 3 }, markerEnd: { type: MarkerType.ArrowClosed, color: "#7e22ce" }, label: "Enables", }, { id: "e-optimization-kb", source: "optimization", target: "knowledge-base", animated: true, style: { stroke: "url(#clustering-gradient)", strokeWidth: 3 }, markerEnd: { type: MarkerType.ArrowClosed, color: "#7e22ce" }, label: "Improves", type: "smoothstep", }, { id: "e-optimization-ai", source: "optimization", target: "ai-chatbot", animated: true, style: { stroke: "url(#clustering-gradient)", strokeWidth: 3 }, markerEnd: { type: MarkerType.ArrowClosed, color: "#7e22ce" }, label: "Enhances", type: "smoothstep", }, // Intercom API connections { id: "e-intercom-conversations", source: "intercom", target: "conversations-api", animated: true, style: { stroke: "url(#intercom-gradient)", strokeWidth: 3 }, markerEnd: { type: MarkerType.ArrowClosed, color: "#14b8a6" }, }, { id: "e-intercom-contacts", source: "intercom", target: "contacts-api", animated: true, style: { stroke: "url(#intercom-gradient)", strokeWidth: 3 }, markerEnd: { type: MarkerType.ArrowClosed, color: "#14b8a6" }, }, { id: "e-intercom-webhooks", source: "intercom", target: "webhooks-api", animated: true, style: { stroke: "url(#intercom-gradient)", strokeWidth: 3 }, markerEnd: { type: MarkerType.ArrowClosed, color: "#14b8a6" }, }, { id: "e-intercom-tickets", source: "intercom", target: "tickets-api", animated: true, style: { stroke: "url(#intercom-gradient)", strokeWidth: 3 }, markerEnd: { type: MarkerType.ArrowClosed, color: "#14b8a6" }, }, { id: "e-api-conversations", source: "api-gateway", target: "conversations-api", animated: true, style: { stroke: "url(#data-gradient)", strokeWidth: 3 }, markerEnd: { type: MarkerType.ArrowClosed, color: "#0f766e" }, type: "smoothstep", }, { id: "e-api-tickets", source: "api-gateway", target: "tickets-api", animated: true, style: { stroke: "url(#data-gradient)", strokeWidth: 3 }, markerEnd: { type: MarkerType.ArrowClosed, color: "#0f766e" }, type: "smoothstep", }, ] // Enhanced custom node component with hover effects const CustomNode = ({ data }: { data: NodeData }) => { const [isHovered, setIsHovered] = useState(false) return (

setIsHovered(true)} onMouseLeave={() => setIsHovered(false)} >

{data.icon}

{data.label}

{data.description && (

{data.description}

)}

) } // Node types const nodeTypes = { custom: CustomNode, } export default function ChatbotArchitectureFlow() { const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes) const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges) const onConnect = useCallback((params: Edge | Connection) => setEdges((eds) => addEdge(params, eds)), [setEdges]) return (

{/* Decorative background elements */}

System Components

User Interface

Frontend Components

AI Components

Data & Backend

Intercom Integration

Clustering & Optimization

) } [V0_FILE]png:file="public/images/dashboard.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-NaDIeBPVyZndLNtcueIkcZ5qz5atbs.png" isMerged="true" [V0_FILE]png:file="public/images/alerts-dashboard.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-w1tfOz78zSCU7QPYUGACtWzS3HUx9h.png" isMerged="true" [V0_FILE]png:file="public/images/clinical-alerts.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-8KZ4WQqWMaThw1iaM4C45NWrYnjnbJ.png" isMerged="true" [V0_FILE]png:file="public/images/insurance-appeals.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-84j5AigD8hoF1iUWcKWTBY5T25HqSf.png" isMerged="true" [V0_FILE]png:file="public/images/new-appeal.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-3A20uh6PiXLKMa65KIsI9NvdcGd0Yy.png" isMerged="true" [V0_FILE]png:file="public/images/analytics.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-mh4Nj0htBhegWGpCzo2n7oRKWRyrpM.png" isMerged="true" [V0_FILE]png:file="public/images/analytics-insights.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-Z996FDXOBJsLLrvGOLQ1F9oZ4qrTpH.png" isMerged="true" [V0_FILE]png:file="public/images/documentation.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-KjL5js1MQFioSZiZibnCDL9g5HjV2k.png" isMerged="true" [V0_FILE]typescriptreact:file="app/healthcare-platform/page.tsx" isEdit="true" import HealthcarePlatformFlow from "@/components/healthcare-platform-flow" export default function HealthcarePlatformPage() { return (

AI-ENABLED CLINICAL & ADMINISTRATIVE PLATFORM

) } [V0_FILE]png:file="public/images/architecture-diagram.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-AM2fBfK8T2nO0Ojb74qRiY9xPvF3a8.png" [V0_FILE]typescriptreact:file="components/healthcare-platform-flow.tsx" isEdit="true" "use client" import type React from "react" import { useCallback } from "react" import ReactFlow, { Background, Controls, useNodesState, useEdgesState, addEdge, type Node, type Edge, type Connection, MarkerType, } from "reactflow" import "reactflow/dist/style.css" import { Laptop, BarChart3, Database, Server, Cpu, Zap, HospitalIcon, Repeat } from "lucide-react" // Node styles const nodeStyle = { background: "white", color: "black", border: "2px solid black", borderRadius: "4px", padding: "10px", fontSize: "14px", fontWeight: "bold", width: 180, textAlign: "center" as const, } const databaseStyle = { ...nodeStyle, borderRadius: "4px 4px 20px 20px", paddingBottom: "20px", } // Custom node data type type NodeData = { label: string icon?: React.ReactNode } // Initial nodes const initialNodes: Node[] = [ // UI Layer { id: "web-mobile", data: { label: "WEB/MOBILE UI", icon: , }, position: { x: 100, y: 200 }, style: nodeStyle, }, // API Gateway { id: "api-gateway", data: { label: "API GATEWAY", icon: , }, position: { x: 400, y: 200 }, style: nodeStyle, }, // Core Services { id: "allgavgiae", data: { label: "ALLGAVGIAE", icon: , }, position: { x: 400, y: 350 }, style: nodeStyle, }, // Service Components { id: "alert-engine", data: { label: "ALERT ENGINE", icon: , }, position: { x: 200, y: 500 }, style: nodeStyle, }, { id: "appeals-generator", data: { label: "APPEALS GENERATOR", icon: , }, position: { x: 400, y: 500 }, style: nodeStyle, }, { id: "analytics-engine", data: { label: "ANALYTICS ENGINE", icon: , }, position: { x: 600, y: 500 }, style: nodeStyle, }, // Data Layer { id: "raw-storage", data: { label: "RAW STORAGE BLOB", icon: , }, position: { x: 200, y: 650 }, style: databaseStyle, }, { id: "normalized-db", data: { label: "NORMALIZED DB", icon: , }, position: { x: 400, y: 650 }, style: nodeStyle, }, { id: "cache", data: { label: "CACHE", icon: , }, position: { x: 400, y: 800 }, style: nodeStyle, }, // AI Components { id: "ai-nlp", data: { label: "AI/NLP ENGINE", icon: , }, position: { x: 600, y: 650 }, style: nodeStyle, }, // Reporting { id: "reporting", data: { label: "REPORTING / VISUALIZATION", icon: , }, position: { x: 800, y: 200 }, style: nodeStyle, }, // Integration { id: "emr", data: { label: "EMR VIA FHIR", icon: , }, position: { x: 800, y: 500 }, style: nodeStyle, }, { id: "rpa", data: { label: "RPA", icon: , }, position: { x: 800, y: 650 }, style: nodeStyle, }, ] // Edges const initialEdges: Edge[] = [ // Web/Mobile to API Gateway { id: "e-web-api", source: "web-mobile", target: "api-gateway", animated: false, style: { stroke: "black", strokeWidth: 2 }, markerEnd: { type: MarkerType.ArrowClosed, color: "black" }, type: "straight", bidirectional: true, }, // API Gateway to ALLGAVGIAE { id: "e-api-allgavgiae", source: "api-gateway", target: "allgavgiae", animated: false, style: { stroke: "black", strokeWidth: 2 }, markerEnd: { type: MarkerType.ArrowClosed, color: "black" }, }, // ALLGAVGIAE to Services { id: "e-allgavgiae-alert", source: "allgavgiae", target: "alert-engine", animated: false, style: { stroke: "black", strokeWidth: 2 }, markerEnd: { type: MarkerType.ArrowClosed, color: "black" }, }, { id: "e-allgavgiae-appeals", source: "allgavgiae", target: "appeals-generator", animated: false, style: { stroke: "black", strokeWidth: 2 }, markerEnd: { type: MarkerType.ArrowClosed, color: "black" }, }, { id: "e-api-analytics", source: "api-gateway", target: "analytics-engine", animated: false, style: { stroke: "black", strokeWidth: 2 }, markerEnd: { type: MarkerType.ArrowClosed, color: "black" }, }, { id: "e-allgavgiae-analytics", source: "allgavgiae", target: "analytics-engine", animated: false, style: { stroke: "black", strokeWidth: 2 }, markerEnd: { type: MarkerType.ArrowClosed, color: "black" }, }, // Services to Data { id: "e-alert-raw", source: "alert-engine", target: "raw-storage", animated: false, style: { stroke: "black", strokeWidth: 2 }, markerEnd: { type: MarkerType.ArrowClosed, color: "black" }, }, { id: "e-appeals-normalized", source: "appeals-generator", target: "normalized-db", animated: false, style: { stroke: "black", strokeWidth: 2 }, markerEnd: { type: MarkerType.ArrowClosed, color: "black" }, }, { id: "e-analytics-ai", source: "analytics-engine", target: "ai-nlp", animated: false, style: { stroke: "black", strokeWidth: 2 }, markerEnd: { type: MarkerType.ArrowClosed, color: "black" }, }, // Data Connections { id: "e-normalized-raw", source: "normalized-db", target: "raw-storage", animated: false, style: { stroke: "black", strokeWidth: 2 }, markerEnd: { type: MarkerType.ArrowClosed, color: "black" }, }, { id: "e-normalized-cache", source: "normalized-db", target: "cache", animated: false, style: { stroke: "black", strokeWidth: 2 }, markerEnd: { type: MarkerType.ArrowClosed, color: "black" }, }, { id: "e-ai-normalized", source: "ai-nlp", target: "normalized-db", animated: false, style: { stroke: "black", strokeWidth: 2 }, markerEnd: { type: MarkerType.ArrowClosed, color: "black" }, }, // API Gateway to Reporting { id: "e-api-reporting", source: "api-gateway", target: "reporting", animated: false, style: { stroke: "black", strokeWidth: 2 }, markerEnd: { type: MarkerType.ArrowClosed, color: "black" }, }, // Reporting to EMR { id: "e-reporting-emr", source: "reporting", target: "emr", animated: false, style: { stroke: "black", strokeWidth: 2 }, markerEnd: { type: MarkerType.ArrowClosed, color: "black" }, }, // EMR to RPA { id: "e-emr-rpa", source: "emr", target: "rpa", animated: false, style: { stroke: "black", strokeWidth: 2 }, markerEnd: { type: MarkerType.ArrowClosed, color: "black" }, }, // AI to RPA { id: "e-ai-rpa", source: "ai-nlp", target: "rpa", animated: false, style: { stroke: "black", strokeWidth: 2 }, markerEnd: { type: MarkerType.ArrowClosed, color: "black" }, }, ] // Custom bidirectional edge const customEdges = initialEdges.map((edge) => { if (edge.bidirectional) { return { ...edge, markerStart: { type: MarkerType.ArrowClosed, color: "black" }, } } return edge }) export default function HealthcarePlatformFlow() { const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes) const [edges, setEdges, onEdgesChange] = useEdgesState(customEdges) const onConnect = useCallback((params: Connection) => setEdges((eds) => addEdge(params, eds)), [setEdges]) return ( ) }