"use client" import { useCallback, useMemo, useState } from "react" import { AnimatePresence, motion } from "motion/react" // ============================================================================ // TYPES // ============================================================================ export interface ThreatPattern { id: string name: string pattern: RegExp severity: "critical" | "high" | "medium" | "low" description: string category: "jailbreak" | "extraction" | "manipulation" | "encoding" } export interface DetectionResult { isThreat: boolean threats: DetectedThreat[] riskScore: number sanitizedPrompt: string analysisTimeMs: number } export interface DetectedThreat { pattern: ThreatPattern match: string position: { start: number; end: number } confidence: number } export interface GuardConfig { enabledCategories?: ( | "jailbreak" | "extraction" | "manipulation" | "encoding" )[] customPatterns?: ThreatPattern[] blockThreshold?: number sanitize?: boolean } // ============================================================================ // THREAT PATTERNS (OWASP LLM01 - Prompt Injection) // ============================================================================ const THREAT_PATTERNS: ThreatPattern[] = [ // JAILBREAK ATTEMPTS { id: "jailbreak-dan", name: "DAN (Do Anything Now)", pattern: /\b(DAN|do anything now|jailbreak|bypass|ignore previous|forget (your|all) (instructions|rules|training))\b/gi, severity: "critical", description: "Attempts to override safety guidelines using DAN-style prompts", category: "jailbreak", }, { id: "jailbreak-roleplay", name: "Roleplay Jailbreak", pattern: /\b(pretend (you are|to be|you're)|act as|roleplay as|you are now|from now on you|imagine you are)\s*(an? )?(evil|unfiltered|uncensored|unrestricted)/gi, severity: "critical", description: "Malicious roleplay instructions to bypass restrictions", category: "jailbreak", }, { id: "jailbreak-ignore", name: "Instruction Override", pattern: /\b(ignore|disregard|forget|override|bypass|circumvent)\s+(all\s+)?(previous|prior|above|earlier|system)\s*(instructions|prompts|rules|guidelines|restrictions)/gi, severity: "critical", description: "Direct attempts to override system instructions", category: "jailbreak", }, { id: "jailbreak-developer", name: "Developer Mode Exploit", pattern: /\b(developer mode|debug mode|admin mode|root access|sudo|maintenance mode|god mode|test mode)\b/gi, severity: "high", description: "Attempts to activate fictitious privileged modes", category: "jailbreak", }, // DATA EXTRACTION { id: "extraction-system", name: "System Prompt Extraction", pattern: /\b(what (is|are) your (instructions|system prompt|rules|guidelines)|repeat (your|the) (system|initial) (prompt|instructions)|print your (prompt|instructions)|show me your (prompt|rules))\b/gi, severity: "high", description: "Attempts to extract system prompt or instructions", category: "extraction", }, { id: "extraction-api", name: "API Key Extraction", pattern: /\b(api[_\s]?key|secret[_\s]?key|access[_\s]?token|auth[_\s]?token|password|credentials|private[_\s]?key)\b/gi, severity: "critical", description: "Attempts to extract sensitive credentials", category: "extraction", }, { id: "extraction-internal", name: "Internal Data Extraction", pattern: /\b(internal (data|documents|files)|confidential|proprietary|classified|sensitive (information|data)|database (dump|contents)|user (data|records))\b/gi, severity: "high", description: "Attempts to access internal or sensitive data", category: "extraction", }, // MANIPULATION { id: "manipulation-injection", name: "SQL/Code Injection", pattern: /(SELECT\s+\*|DROP\s+TABLE|DELETE\s+FROM|INSERT\s+INTO|UNION\s+SELECT|exec\s*\(|eval\s*\(|__import__|subprocess|os\.system)/gi, severity: "critical", description: "SQL or code injection attempts", category: "manipulation", }, { id: "manipulation-indirect", name: "Indirect Injection", pattern: /\b(when (you|the model) (see|read|encounter)|if .{0,30} then (ignore|override|forget)|<\/?system>|<\/?user>|<\/?assistant>|\[SYSTEM\]|\[INST\])/gi, severity: "high", description: "Indirect prompt injection via content", category: "manipulation", }, { id: "manipulation-virtualization", name: "Prompt Virtualization", pattern: /\b(hypothetically|theoretically|in a (fictional|alternate) (world|scenario)|for educational purposes only|just for fun|let's play a game)\s+(what if|could you|would you)/gi, severity: "medium", description: "Attempts to create hypothetical scenarios for policy bypass", category: "manipulation", }, // ENCODING ATTACKS { id: "encoding-base64", name: "Base64 Encoded Payload", pattern: /\b(decode|execute|run|eval).*base64|[A-Za-z0-9+/]{50,}={0,2}\b/gi, severity: "high", description: "Base64 encoded payloads that may hide malicious content", category: "encoding", }, { id: "encoding-unicode", name: "Unicode Smuggling", pattern: /[\u200B-\u200D\uFEFF\u2060]|\\u00[0-9a-f]{2}|%[0-9a-f]{2}/gi, severity: "medium", description: "Hidden unicode characters or encoded sequences", category: "encoding", }, { id: "encoding-homoglyph", name: "Homoglyph Attack", pattern: /[аеіорстухАЕІОРСТУХ]|[\u0430\u0435\u0456\u043E\u0440\u0441\u0442\u0443\u0445]/g, severity: "medium", description: "Cyrillic or lookalike characters that could bypass filters", category: "encoding", }, ] // ============================================================================ // HOOK: usePromptGuard // ============================================================================ interface UsePromptGuardOptions extends GuardConfig { onThreatDetected?: (result: DetectionResult) => void onCleanPrompt?: (prompt: string) => void } export function usePromptGuard(options: UsePromptGuardOptions = {}) { const { enabledCategories = ["jailbreak", "extraction", "manipulation", "encoding"], customPatterns = [], blockThreshold = 50, sanitize = true, onThreatDetected, onCleanPrompt, } = options const [lastResult, setLastResult] = useState(null) const [isAnalyzing, setIsAnalyzing] = useState(false) const [blockedCount, setBlockedCount] = useState(0) const [analyzedCount, setAnalyzedCount] = useState(0) // Combine built-in and custom patterns const allPatterns = useMemo(() => { const enabledPatterns = THREAT_PATTERNS.filter((p) => enabledCategories.includes(p.category) ) return [...enabledPatterns, ...customPatterns] }, [enabledCategories, customPatterns]) // Analyze prompt for threats const analyzePrompt = useCallback( (prompt: string): DetectionResult => { const startTime = performance.now() const threats: DetectedThreat[] = [] let sanitizedPrompt = prompt // Check each pattern for (const pattern of allPatterns) { const regex = new RegExp(pattern.pattern.source, pattern.pattern.flags) let match: RegExpExecArray | null while ((match = regex.exec(prompt)) !== null) { // Calculate confidence based on match length and pattern severity const severityWeight = { critical: 1.0, high: 0.8, medium: 0.6, low: 0.4, } const confidence = Math.min( 0.95, severityWeight[pattern.severity] * (0.7 + match[0].length / 100) ) threats.push({ pattern, match: match[0], position: { start: match.index, end: match.index + match[0].length, }, confidence, }) // Sanitize by redacting the match if (sanitize) { sanitizedPrompt = sanitizedPrompt.replace(match[0], "[REDACTED]") } } } // Calculate overall risk score (0-100) let riskScore = 0 if (threats.length > 0) { const severityScores = threats.map((t) => { const base = { critical: 40, high: 25, medium: 15, low: 8 } return base[t.pattern.severity] * t.confidence }) riskScore = Math.min( 100, severityScores.reduce((a, b) => a + b, 0) ) } const result: DetectionResult = { isThreat: riskScore >= blockThreshold, threats, riskScore, sanitizedPrompt, analysisTimeMs: performance.now() - startTime, } return result }, [allPatterns, blockThreshold, sanitize] ) // Guard a prompt - returns true if safe, false if blocked const guardPrompt = useCallback( (prompt: string): { safe: boolean; result: DetectionResult } => { setIsAnalyzing(true) try { const result = analyzePrompt(prompt) setLastResult(result) setAnalyzedCount((c) => c + 1) if (result.isThreat) { setBlockedCount((c) => c + 1) onThreatDetected?.(result) return { safe: false, result } } else { onCleanPrompt?.(prompt) return { safe: true, result } } } finally { setIsAnalyzing(false) } }, [analyzePrompt, onThreatDetected, onCleanPrompt] ) // Get blocked rate const blockedRate = useMemo(() => { return analyzedCount > 0 ? (blockedCount / analyzedCount) * 100 : 0 }, [blockedCount, analyzedCount]) return { guardPrompt, analyzePrompt, lastResult, isAnalyzing, stats: { blockedCount, analyzedCount, blockedRate, }, } } // ============================================================================ // THREAT INDICATOR // ============================================================================ interface ThreatIndicatorProps { result: DetectionResult | null } export function ThreatIndicator({ result }: ThreatIndicatorProps) { if (!result) return null const riskLevel = result.riskScore >= 70 ? "critical" : result.riskScore >= 40 ? "high" : result.riskScore >= 20 ? "medium" : "low" const colors = { critical: "bg-red-500/10 text-red-600 dark:text-red-400 border-red-500/30", high: "bg-orange-500/10 text-orange-600 dark:text-orange-400 border-orange-500/30", medium: "bg-amber-500/10 text-amber-600 dark:text-amber-400 border-amber-500/30", low: "bg-emerald-500/10 text-emerald-600 dark:text-emerald-400 border-emerald-500/30", } return ( {result.isThreat ? ( ) : ( )} {result.isThreat ? "BLOCKED" : "SAFE"} Risk: {result.riskScore.toFixed(0)}% {result.analysisTimeMs.toFixed(1)}ms ) } // ============================================================================ // RISK METER // ============================================================================ interface RiskMeterProps { riskScore: number threshold: number } export function RiskMeter({ riskScore, threshold }: RiskMeterProps) { const getColor = (score: number) => { if (score >= 70) return "bg-red-500" if (score >= 40) return "bg-orange-500" if (score >= 20) return "bg-amber-500" return "bg-emerald-500" } return (

Threat Risk Score = threshold ? "text-red-500" : "text-emerald-500" }`} > {riskScore.toFixed(0)}%

{/* Threshold marker */}

{/* Risk bar */}

Safe Block threshold: {threshold}% Critical

) } // ============================================================================ // THREAT DETAILS // ============================================================================ interface ThreatDetailsProps { threats: DetectedThreat[] } export function ThreatDetails({ threats }: ThreatDetailsProps) { if (threats.length === 0) { return (

No threats detected

This prompt appears safe

) } const severityColors = { critical: "bg-red-500/10 text-red-600 border-red-500/30", high: "bg-orange-500/10 text-orange-600 border-orange-500/30", medium: "bg-amber-500/10 text-amber-600 border-amber-500/30", low: "bg-zinc-500/10 text-zinc-600 border-zinc-500/30", } return (

{threats.length} threat{threats.length > 1 ? "s" : ""} detected

{threats.map((threat, index) => (

{threat.pattern.severity} {threat.pattern.name}

{threat.pattern.description}

{(threat.confidence * 100).toFixed(0)}% confidence


                  "{threat.match}"

))}

) } // ============================================================================ // GUARD STATS PANEL // ============================================================================ interface GuardStatsPanelProps { stats: { blockedCount: number analyzedCount: number blockedRate: number } } export function GuardStatsPanel({ stats }: GuardStatsPanelProps) { return (

Guard Statistics

} color="blue" /> } color="red" /> } color={ stats.blockedRate > 50 ? "red" : stats.blockedRate > 20 ? "amber" : "emerald" } />

{/* Blocked/Safe ratio bar */}

Blocked: {stats.blockedCount} Safe: {stats.analyzedCount - stats.blockedCount}

0 ? `${(stats.blockedCount / stats.analyzedCount) * 100}%` : "0%", }} transition={{ duration: 0.5 }} /> 0 ? `${((stats.analyzedCount - stats.blockedCount) / stats.analyzedCount) * 100}%` : "0%", }} transition={{ duration: 0.5 }} />

) } function StatCard({ label, value, icon, color, }: { label: string value: string icon: React.ReactNode color: "emerald" | "amber" | "red" | "blue" }) { const colorClasses = { emerald: "bg-emerald-500/10 text-emerald-600 dark:text-emerald-400", amber: "bg-amber-500/10 text-amber-600 dark:text-amber-400", red: "bg-red-500/10 text-red-600 dark:text-red-400", blue: "bg-blue-500/10 text-blue-600 dark:text-blue-400", } return (

{icon}

{value}

{label}

) } // ============================================================================ // PATTERN CATEGORIES // ============================================================================ interface PatternCategoriesProps { enabledCategories: ( | "jailbreak" | "extraction" | "manipulation" | "encoding" )[] onToggle: ( category: "jailbreak" | "extraction" | "manipulation" | "encoding" ) => void } export function PatternCategories({ enabledCategories, onToggle, }: PatternCategoriesProps) { const categories = [ { id: "jailbreak" as const, name: "Jailbreak", description: "DAN, roleplay, instruction override", icon: , count: THREAT_PATTERNS.filter((p) => p.category === "jailbreak").length, }, { id: "extraction" as const, name: "Extraction", description: "System prompt, credentials, internal data", icon: , count: THREAT_PATTERNS.filter((p) => p.category === "extraction").length, }, { id: "manipulation" as const, name: "Manipulation", description: "SQL injection, indirect injection", icon: , count: THREAT_PATTERNS.filter((p) => p.category === "manipulation") .length, }, { id: "encoding" as const, name: "Encoding", description: "Base64, unicode, homoglyphs", icon: , count: THREAT_PATTERNS.filter((p) => p.category === "encoding").length, }, ] return (

{categories.map((category) => { const isEnabled = enabledCategories.includes(category.id) return ( ) })}

) } // ============================================================================ // ICONS // ============================================================================ function ShieldAlertIcon({ className }: { className?: string }) { return ( ) } function ShieldCheckIcon({ className }: { className?: string }) { return ( ) } function ScanIcon({ className }: { className?: string }) { return ( ) } function PercentIcon({ className }: { className?: string }) { return ( ) } function UnlockIcon({ className }: { className?: string }) { return ( ) } function DatabaseIcon({ className }: { className?: string }) { return ( ) } function CodeIcon({ className }: { className?: string }) { return ( ) } function BinaryIcon({ className }: { className?: string }) { return ( ) }

prompt-injection-guard