function MainComponent() { const [transcript, setTranscript] = useState(""); const [isListening, setIsListening] = useState(false); const [projectName, setProjectName] = useState(""); const [isProjectNameSet, setIsProjectNameSet] = useState(false); const [formData, setFormData] = useState({ window_number: "", width: "", height: "", frame_type: "", glass_type: "", notes: "" }); const [error, setError] = useState(null); const [success, setSuccess] = useState(false); const [exportFormat, setExportFormat] = useState("json"); const [windowSpecs, setWindowSpecs] = useState([]); const loadWindowSpecs = async ()=>{ try { const response = await fetch("/api/list-window-specs", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ project_name: projectName }) }); if (!response.ok) { throw new Error("Failed to load window specifications"); } const data = await response.json(); setWindowSpecs(data.specs); } catch (err) { console.error("Error loading window specs:", err); setError("Failed to load window specifications"); } }; useEffect(()=>{ if (isProjectNameSet) { loadWindowSpecs(); } }, [ isProjectNameSet, projectName ]); const handleSetProject = (e)=>{ e.preventDefault(); if (projectName.trim()) { setIsProjectNameSet(true); } }; const handleNewProject = ()=>{ setIsProjectNameSet(false); setProjectName(""); setFormData({ window_number: "", width: "", height: "", frame_type: "", glass_type: "", notes: "" }); setWindowSpecs([]); }; const processVoiceInput = async (text)=>{ const response = await fetch("/integrations/google-gemini-1-5/", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ messages: [ { role: "system", content: "You are a helper that extracts measurements and specifications from voice input about windows. Extract the following fields if mentioned: window_number, width (in inches), height (in inches), frame_type, glass_type, and notes. Return only a JSON object with these fields. If a field is not mentioned, exclude it from the JSON." }, { role: "user", content: text } ], json_schema: { name: "window_specs", schema: { type: "object", properties: { window_number: { type: "string" }, width: { type: "number" }, height: { type: "number" }, frame_type: { type: "string" }, glass_type: { type: "string" }, notes: { type: "string" } }, additionalProperties: false } } }) }); if (!response.ok) { throw new Error("Failed to process voice input"); } const data = await response.json(); const extractedData = JSON.parse(data.choices[0].message.content); setFormData((prev)=>({ ...prev, ...extractedData })); }; useEffect(()=>{ if (!("webkitSpeechRecognition" in window)) { setError("Speech recognition is not supported in this browser"); return; } const recognition = new webkitSpeechRecognition(); recognition.continuous = true; recognition.interimResults = true; recognition.onresult = (event)=>{ const current = event.resultIndex; const transcript = event.results[current][0].transcript; setTranscript(transcript); if (event.results[current].isFinal) { processVoiceInput(transcript).catch((err)=>{ console.error("Error processing voice input:", err); setError("Failed to process voice input"); }); } }; recognition.onerror = (event)=>{ console.error("Speech recognition error:", event.error); setError("Error with speech recognition"); setIsListening(false); }; if (isListening) { recognition.start(); } return ()=>{ recognition.stop(); }; }, [ isListening ]); const handleSubmit = async (e)=>{ e.preventDefault(); try { const response = await fetch("/api/save-window-spec", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ ...formData, project_name: projectName }) }); if (!response.ok) { throw new Error("Failed to save window specifications"); } setSuccess(true); setTimeout(()=>setSuccess(false), 3000); setFormData({ window_number: "", width: "", height: "", frame_type: "", glass_type: "", notes: "" }); loadWindowSpecs(); } catch (err) { console.error("Error saving data:", err); setError("Failed to save window specifications"); } }; const handleExport = async ()=>{ try { const response = await fetch("/api/export-window-specs", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ format: exportFormat, project_name: projectName }) }); if (!response.ok) { throw new Error("Failed to export data"); } const data = await response.json(); if (exportFormat === "json") { const blob = new Blob([ JSON.stringify(data.data, null, 2) ], { type: "application/json" }); const url = URL.createObjectURL(blob); const a = document.createElement("a"); a.href = url; a.download = `${projectName}-specs-${new Date().toISOString().split("T")[0]}.json`; document.body.appendChild(a); a.click(); document.body.removeChild(a); URL.revokeObjectURL(url); } else if (exportFormat === "csv") { const blob = new Blob([ data.data ], { type: "text/csv" }); const url = URL.createObjectURL(blob); const a = document.createElement("a"); a.href = url; a.download = data.filename; document.body.appendChild(a); a.click(); document.body.removeChild(a); URL.revokeObjectURL(url); } else if (exportFormat === "pdf") { const blob = new Blob([ data.data ], { type: "application/pdf" }); const url = URL.createObjectURL(blob); const a = document.createElement("a"); a.href = url; a.download = data.filename; document.body.appendChild(a); a.click(); document.body.removeChild(a); URL.revokeObjectURL(url); } } catch (err) { console.error("Error exporting data:", err); setError("Failed to export data"); } }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gray-100 p-4", __source: { fileName: "", lineNumber: 238, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-4xl mx-auto", __source: { fileName: "", lineNumber: 239, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-lg shadow p-6 mb-6", __source: { fileName: "", lineNumber: 240, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold mb-6", __source: { fileName: "", lineNumber: 241, columnNumber: 11 }, __self: this }, "Window Pre-Site Specifications"), error && /*#__PURE__*/ React.createElement("div", { className: "bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded mb-4", __source: { fileName: "", lineNumber: 246, columnNumber: 13 }, __self: this }, error), success && /*#__PURE__*/ React.createElement("div", { className: "bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded mb-4", __source: { fileName: "", lineNumber: 252, columnNumber: 13 }, __self: this }, "Window specification saved successfully!"), !isProjectNameSet ? /*#__PURE__*/ React.createElement("form", { onSubmit: handleSetProject, className: "space-y-4 mb-6", __source: { fileName: "", lineNumber: 258, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 259, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-gray-700", __source: { fileName: "", lineNumber: 260, columnNumber: 17 }, __self: this }, "Project Name"), /*#__PURE__*/ React.createElement("input", { type: "text", value: projectName, onChange: (e)=>setProjectName(e.target.value), className: "mt-1 block w-full rounded border-gray-300 shadow-sm", required: true, placeholder: "Enter project name to begin", __source: { fileName: "", lineNumber: 263, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "w-full bg-green-500 text-white py-2 px-4 rounded hover:bg-green-600", __source: { fileName: "", lineNumber: 272, columnNumber: 15 }, __self: this }, "Start Project")) : /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center mb-6", __source: { fileName: "", lineNumber: 281, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 282, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-lg font-semibold", __source: { fileName: "", lineNumber: 283, columnNumber: 19 }, __self: this }, "Project: ", projectName)), /*#__PURE__*/ React.createElement("div", { className: "flex gap-2", __source: { fileName: "", lineNumber: 287, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: handleNewProject, className: "text-sm bg-gray-500 text-white py-1 px-3 rounded hover:bg-gray-600", __source: { fileName: "", lineNumber: 288, columnNumber: 19 }, __self: this }, "New Project"), /*#__PURE__*/ React.createElement("select", { value: exportFormat, onChange: (e)=>setExportFormat(e.target.value), className: "text-sm rounded border-gray-300 shadow-sm", __source: { fileName: "", lineNumber: 294, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "json", __source: { fileName: "", lineNumber: 299, columnNumber: 21 }, __self: this }, "JSON"), /*#__PURE__*/ React.createElement("option", { value: "csv", __source: { fileName: "", lineNumber: 300, columnNumber: 21 }, __self: this }, "CSV"), /*#__PURE__*/ React.createElement("option", { value: "pdf", __source: { fileName: "", lineNumber: 301, columnNumber: 21 }, __self: this }, "PDF")), /*#__PURE__*/ React.createElement("button", { onClick: handleExport, className: "text-sm bg-blue-500 text-white py-1 px-3 rounded hover:bg-blue-600", __source: { fileName: "", lineNumber: 303, columnNumber: 19 }, __self: this }, "Export"))), /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 312, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setIsListening(!isListening), className: `px-4 py-2 rounded ${isListening ? "bg-red-500 hover:bg-red-600" : "bg-blue-500 hover:bg-blue-600"} text-white`, __source: { fileName: "", lineNumber: 313, columnNumber: 17 }, __self: this }, isListening ? "Stop Recording" : "Start Recording"), isListening && /*#__PURE__*/ React.createElement("p", { className: "mt-2 text-sm text-gray-600", __source: { fileName: "", lineNumber: 324, columnNumber: 19 }, __self: this }, "Listening: ", transcript)), /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, className: "space-y-4", __source: { fileName: "", lineNumber: 330, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 331, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-gray-700", __source: { fileName: "", lineNumber: 332, columnNumber: 19 }, __self: this }, "Window Number"), /*#__PURE__*/ React.createElement("input", { type: "text", value: formData.window_number, onChange: (e)=>setFormData((prev)=>({ ...prev, window_number: e.target.value })), className: "mt-1 block w-full rounded border-gray-300 shadow-sm", required: true, __source: { fileName: "", lineNumber: 335, columnNumber: 19 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-2 gap-4", __source: { fileName: "", lineNumber: 349, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 350, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-gray-700", __source: { fileName: "", lineNumber: 351, columnNumber: 21 }, __self: this }, "Width (inches)"), /*#__PURE__*/ React.createElement("input", { type: "number", step: "0.01", value: formData.width, onChange: (e)=>setFormData((prev)=>({ ...prev, width: e.target.value })), className: "mt-1 block w-full rounded border-gray-300 shadow-sm", required: true, __source: { fileName: "", lineNumber: 354, columnNumber: 21 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 369, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-gray-700", __source: { fileName: "", lineNumber: 370, columnNumber: 21 }, __self: this }, "Height (inches)"), /*#__PURE__*/ React.createElement("input", { type: "number", step: "0.01", value: formData.height, onChange: (e)=>setFormData((prev)=>({ ...prev, height: e.target.value })), className: "mt-1 block w-full rounded border-gray-300 shadow-sm", required: true, __source: { fileName: "", lineNumber: 373, columnNumber: 21 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 389, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-gray-700", __source: { fileName: "", lineNumber: 390, columnNumber: 19 }, __self: this }, "Frame Type"), /*#__PURE__*/ React.createElement("input", { type: "text", value: formData.frame_type, onChange: (e)=>setFormData((prev)=>({ ...prev, frame_type: e.target.value })), className: "mt-1 block w-full rounded border-gray-300 shadow-sm", required: true, __source: { fileName: "", lineNumber: 393, columnNumber: 19 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 407, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-gray-700", __source: { fileName: "", lineNumber: 408, columnNumber: 19 }, __self: this }, "Glass Type"), /*#__PURE__*/ React.createElement("input", { type: "text", value: formData.glass_type, onChange: (e)=>setFormData((prev)=>({ ...prev, glass_type: e.target.value })), className: "mt-1 block w-full rounded border-gray-300 shadow-sm", required: true, __source: { fileName: "", lineNumber: 411, columnNumber: 19 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 425, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-gray-700", __source: { fileName: "", lineNumber: 426, columnNumber: 19 }, __self: this }, "Notes"), /*#__PURE__*/ React.createElement("textarea", { value: formData.notes, onChange: (e)=>setFormData((prev)=>({ ...prev, notes: e.target.value })), className: "mt-1 block w-full rounded border-gray-300 shadow-sm", rows: "3", __source: { fileName: "", lineNumber: 429, columnNumber: 19 }, __self: this })), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "w-full bg-green-500 text-white py-2 px-4 rounded hover:bg-green-600", __source: { fileName: "", lineNumber: 442, columnNumber: 17 }, __self: this }, "Add Window to Project")))), isProjectNameSet && windowSpecs.length > 0 && /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-lg shadow overflow-hidden", __source: { fileName: "", lineNumber: 454, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "overflow-x-auto", __source: { fileName: "", lineNumber: 455, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("table", { className: "min-w-full divide-y divide-gray-200", __source: { fileName: "", lineNumber: 456, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("thead", { className: "bg-gray-50", __source: { fileName: "", lineNumber: 457, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("tr", { __source: { fileName: "", lineNumber: 458, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("th", { className: "px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider", __source: { fileName: "", lineNumber: 459, columnNumber: 21 }, __self: this }, "Window #"), /*#__PURE__*/ React.createElement("th", { className: "px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider", __source: { fileName: "", lineNumber: 462, columnNumber: 21 }, __self: this }, "Dimensions"), /*#__PURE__*/ React.createElement("th", { className: "px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider", __source: { fileName: "", lineNumber: 465, columnNumber: 21 }, __self: this }, "Frame Type"), /*#__PURE__*/ React.createElement("th", { className: "px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider", __source: { fileName: "", lineNumber: 468, columnNumber: 21 }, __self: this }, "Glass Type"), /*#__PURE__*/ React.createElement("th", { className: "px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider", __source: { fileName: "", lineNumber: 471, columnNumber: 21 }, __self: this }, "Notes"))), /*#__PURE__*/ React.createElement("tbody", { className: "bg-white divide-y divide-gray-200", __source: { fileName: "", lineNumber: 476, columnNumber: 17 }, __self: this }, windowSpecs.map((spec)=>/*#__PURE__*/ React.createElement("tr", { key: spec.id, __source: { fileName: "", lineNumber: 478, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("td", { className: "px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900", __source: { fileName: "", lineNumber: 479, columnNumber: 23 }, __self: this }, spec.window_number), /*#__PURE__*/ React.createElement("td", { className: "px-6 py-4 whitespace-nowrap text-sm text-gray-500", __source: { fileName: "", lineNumber: 482, columnNumber: 23 }, __self: this }, spec.width, '" × ', spec.height, '"'), /*#__PURE__*/ React.createElement("td", { className: "px-6 py-4 whitespace-nowrap text-sm text-gray-500", __source: { fileName: "", lineNumber: 485, columnNumber: 23 }, __self: this }, spec.frame_type), /*#__PURE__*/ React.createElement("td", { className: "px-6 py-4 whitespace-nowrap text-sm text-gray-500", __source: { fileName: "", lineNumber: 488, columnNumber: 23 }, __self: this }, spec.glass_type), /*#__PURE__*/ React.createElement("td", { className: "px-6 py-4 text-sm text-gray-500", __source: { fileName: "", lineNumber: 491, columnNumber: 23 }, __self: this }, spec.notes))))))))); }