|
| 1 | +'use client'; |
| 2 | + |
| 3 | +import { useState } from "react"; |
| 4 | + |
| 5 | +interface Command { |
| 6 | + id: string; |
| 7 | + label: string; |
| 8 | + description: string; |
| 9 | + prompt: string; |
| 10 | + category: "analysis" | "monitoring" | "data" | "report"; |
| 11 | +} |
| 12 | + |
| 13 | +const COMMANDS: Command[] = [ |
| 14 | + { id: "scan-anomalies", label: "Scan for anomalies", description: "Check all visible wells", prompt: "Scan all wells in the current viewport for anomalies. Report any debit decline, TDS spikes, or sensor faults.", category: "analysis" }, |
| 15 | + { id: "depression-check", label: "Depression cone analysis", description: "Analyze cones in viewport", prompt: "Analyze depression cones for wells in the current viewport. Are any cones overlapping? Is there evidence of well interference?", category: "analysis" }, |
| 16 | + { id: "interference-check", label: "Check well interference", description: "Detect mutual influence", prompt: "Check for well interference in the current viewport. Are any wells close enough to affect each other's drawdown?", category: "analysis" }, |
| 17 | + |
| 18 | + { id: "region-overview", label: "Region overview", description: "Summary statistics", prompt: "Give me a complete overview of the region I'm looking at: total wells, active/inactive, average yield, water quality summary, any concerns.", category: "monitoring" }, |
| 19 | + { id: "water-quality", label: "Water quality report", description: "TDS and chemical analysis", prompt: "Generate a water quality report for wells in the viewport. Focus on TDS trends, chloride levels, and pH. Flag any wells exceeding UAE drinking water standards.", category: "monitoring" }, |
| 20 | + { id: "well-status", label: "Well status check", description: "Status of all wells", prompt: "Report the operational status of all wells in the viewport. Which are active, inactive, or under maintenance? Any that need attention?", category: "monitoring" }, |
| 21 | + |
| 22 | + { id: "trend-analysis", label: "Trend analysis", description: "Debit and water level trends", prompt: "Analyze debit and water level trends for wells in the viewport over the full observation period. Any declining trends?", category: "data" }, |
| 23 | + { id: "compare-clusters", label: "Compare clusters", description: "Cross-cluster comparison", prompt: "Compare the well clusters visible in the viewport. Which cluster has the best/worst water quality? Highest/lowest yields?", category: "data" }, |
| 24 | + |
| 25 | + { id: "daily-report", label: "Generate daily report", description: "Summary report", prompt: "Generate a daily monitoring report for all wells in the viewport. Include: operational status, water quality summary, anomalies detected, and recommendations.", category: "report" }, |
| 26 | +]; |
| 27 | + |
| 28 | +const CATEGORY_LABELS: Record<string, string> = { |
| 29 | + analysis: "Analysis", |
| 30 | + monitoring: "Monitoring", |
| 31 | + data: "Data", |
| 32 | + report: "Reports", |
| 33 | +}; |
| 34 | + |
| 35 | +interface Props { |
| 36 | + onExecute: (prompt: string) => void; |
| 37 | + disabled: boolean; |
| 38 | +} |
| 39 | + |
| 40 | +export function CommandBar({ onExecute, disabled }: Props) { |
| 41 | + const [isOpen, setIsOpen] = useState(false); |
| 42 | + |
| 43 | + return ( |
| 44 | + <div className="relative px-4 py-1.5 border-t bg-gray-50/50"> |
| 45 | + <button |
| 46 | + onClick={() => setIsOpen(!isOpen)} |
| 47 | + disabled={disabled} |
| 48 | + className="flex items-center gap-1.5 text-xs text-gray-500 hover:text-blue-600 transition-colors disabled:opacity-50" |
| 49 | + > |
| 50 | + <span>Quick commands</span> |
| 51 | + <span className={`transition-transform ${isOpen ? "rotate-180" : ""}`}>▾</span> |
| 52 | + </button> |
| 53 | + |
| 54 | + {isOpen && ( |
| 55 | + <div className="absolute bottom-full left-4 right-4 mb-1 bg-white border rounded-lg shadow-lg max-h-[300px] overflow-y-auto z-20"> |
| 56 | + {(["analysis", "monitoring", "data", "report"] as const).map(category => ( |
| 57 | + <div key={category}> |
| 58 | + <div className="px-3 py-1.5 text-[10px] uppercase font-semibold text-gray-400 bg-gray-50 sticky top-0"> |
| 59 | + {CATEGORY_LABELS[category]} |
| 60 | + </div> |
| 61 | + {COMMANDS.filter(c => c.category === category).map(cmd => ( |
| 62 | + <button |
| 63 | + key={cmd.id} |
| 64 | + onClick={() => { onExecute(cmd.prompt); setIsOpen(false); }} |
| 65 | + className="w-full flex items-start gap-2 px-3 py-2 hover:bg-blue-50 text-left transition-colors" |
| 66 | + > |
| 67 | + <div> |
| 68 | + <div className="text-sm font-medium text-gray-800">{cmd.label}</div> |
| 69 | + <div className="text-xs text-gray-400">{cmd.description}</div> |
| 70 | + </div> |
| 71 | + </button> |
| 72 | + ))} |
| 73 | + </div> |
| 74 | + ))} |
| 75 | + </div> |
| 76 | + )} |
| 77 | + </div> |
| 78 | + ); |
| 79 | +} |
0 commit comments