function MainComponent() { const [prompt, setPrompt] = useState(''); const [spec, setSpec] = useState(''); const [output, setOutput] = useState(''); const [model, setModel] = useState('ANTHROPIC_CLAUDE_HAIKU'); const [examples, setExamples] = useState([]); const [isLoading, setIsLoading] = useState(false); const handleGenerate = async ()=>{ setIsLoading(true); try { const response = await fetch(`/integrations/${model}/`, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages: [ { role: 'user', content: `${prompt}\n\nSpec: ${spec}` } ] }) }); const data = await response.json(); const generatedOutput = data.choices[0].message.content; setOutput(generatedOutput); } catch (error) { console.error('Error:', error); } setIsLoading(false); }; const handleSaveExample = ()=>{ setExamples([ ...examples, { spec, output } ]); setSpec(''); setOutput(''); }; const handleLoadExamples = ()=>{ const formattedExamples = examples.map(({ spec, output })=>`Spec: ${spec}\nOptimized Spec: ${output}`).join('\n\n'); setPrompt(`${prompt}\n\n${formattedExamples}`); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-gray-100 p-4 font-roboto", __source: { fileName: "", lineNumber: 47, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-5xl bg-white shadow-md rounded-lg p-6", __source: { fileName: "", lineNumber: 48, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-bold mb-6 text-center", __source: { fileName: "", lineNumber: 49, columnNumber: 9 }, __self: this }, "Spec Auto Complete"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-6 mb-6", __source: { fileName: "", lineNumber: 50, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 51, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "prompt", className: "block font-medium mb-2", __source: { fileName: "", lineNumber: 52, columnNumber: 13 }, __self: this }, "Prompt"), /*#__PURE__*/ React.createElement("textarea", { id: "prompt", name: "prompt", rows: "6", className: "w-full p-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500", value: prompt, onChange: (e)=>setPrompt(e.target.value), __source: { fileName: "", lineNumber: 55, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 64, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "spec", className: "block font-medium mb-2", __source: { fileName: "", lineNumber: 65, columnNumber: 13 }, __self: this }, "Current Spec"), /*#__PURE__*/ React.createElement("textarea", { id: "spec", name: "spec", rows: "6", className: "w-full p-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500", value: spec, onChange: (e)=>setSpec(e.target.value), __source: { fileName: "", lineNumber: 68, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 77, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "output", className: "block font-medium mb-2", __source: { fileName: "", lineNumber: 78, columnNumber: 13 }, __self: this }, "Optimized Spec"), /*#__PURE__*/ React.createElement("textarea", { id: "output", name: "output", rows: "6", className: "w-full p-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500", value: output, onChange: (e)=>setOutput(e.target.value), __source: { fileName: "", lineNumber: 81, columnNumber: 13 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col md:flex-row items-center justify-between mb-6", __source: { fileName: "", lineNumber: 91, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { type: "button", className: "bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded mb-4 md:mb-0 flex items-center", onClick: handleGenerate, disabled: isLoading, __source: { fileName: "", lineNumber: 92, columnNumber: 11 }, __self: this }, isLoading ? /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("i", { className: "fas fa-spinner fa-spin mr-2", __source: { fileName: "", lineNumber: 100, columnNumber: 17 }, __self: this }), " Generating...") : /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("i", { className: "fas fa-bolt mr-2", __source: { fileName: "", lineNumber: 104, columnNumber: 17 }, __self: this }), " Generate")), /*#__PURE__*/ React.createElement("select", { value: model, onChange: (e)=>setModel(e.target.value), className: "p-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500", __source: { fileName: "", lineNumber: 108, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "ANTHROPIC_CLAUDE_HAIKU", __source: { fileName: "", lineNumber: 113, columnNumber: 13 }, __self: this }, "Claude Haiku"), /*#__PURE__*/ React.createElement("option", { value: "ANTHROPIC_CLAUDE", __source: { fileName: "", lineNumber: 114, columnNumber: 13 }, __self: this }, "Claude"))), /*#__PURE__*/ React.createElement("div", { className: "flex justify-center mb-6", __source: { fileName: "", lineNumber: 117, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { type: "button", className: "bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded", onClick: handleSaveExample, __source: { fileName: "", lineNumber: 118, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-save mr-2", __source: { fileName: "", lineNumber: 123, columnNumber: 13 }, __self: this }), " Save Example")), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6", __source: { fileName: "", lineNumber: 126, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 127, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-bold mb-4", __source: { fileName: "", lineNumber: 128, columnNumber: 13 }, __self: this }, "Workflow Diagram"), /*#__PURE__*/ React.createElement("div", { className: "bg-white p-4 rounded-lg shadow-md", __source: { fileName: "", lineNumber: 129, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center mb-4", __source: { fileName: "", lineNumber: 130, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-blue-500 text-white font-bold py-2 px-4 rounded-full mr-4", __source: { fileName: "", lineNumber: 131, columnNumber: 17 }, __self: this }, "Spec"), /*#__PURE__*/ React.createElement("i", { className: "fas fa-arrow-right text-gray-500", __source: { fileName: "", lineNumber: 132, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex items-center mb-4", __source: { fileName: "", lineNumber: 134, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-blue-500 text-white font-bold py-2 px-4 rounded-full mr-4", __source: { fileName: "", lineNumber: 135, columnNumber: 17 }, __self: this }, "Prompt"), /*#__PURE__*/ React.createElement("i", { className: "fas fa-arrow-right text-gray-500", __source: { fileName: "", lineNumber: 136, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 138, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-blue-500 text-white font-bold py-2 px-4 rounded-full", __source: { fileName: "", lineNumber: 139, columnNumber: 17 }, __self: this }, "Output")))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 143, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-bold mb-4", __source: { fileName: "", lineNumber: 144, columnNumber: 13 }, __self: this }, "Saved Examples"), /*#__PURE__*/ React.createElement("div", { className: "bg-white p-4 rounded-lg shadow-md", __source: { fileName: "", lineNumber: 145, columnNumber: 13 }, __self: this }, examples.map(({ spec, output }, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "mb-4", __source: { fileName: "", lineNumber: 147, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-2", __source: { fileName: "", lineNumber: 148, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: `spec-${index}`, className: "block font-medium mb-1", __source: { fileName: "", lineNumber: 149, columnNumber: 21 }, __self: this }, "Spec"), /*#__PURE__*/ React.createElement("textarea", { id: `spec-${index}`, name: `spec-${index}`, rows: "2", className: "w-full p-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500", value: spec, onChange: (e)=>{ const updatedExamples = [ ...examples ]; updatedExamples[index].spec = e.target.value; setExamples(updatedExamples); }, __source: { fileName: "", lineNumber: 152, columnNumber: 21 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 165, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: `output-${index}`, className: "block font-medium mb-1", __source: { fileName: "", lineNumber: 166, columnNumber: 21 }, __self: this }, "Optimized Spec"), /*#__PURE__*/ React.createElement("textarea", { id: `output-${index}`, name: `output-${index}`, rows: "2", className: "w-full p-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500", value: output, onChange: (e)=>{ const updatedExamples = [ ...examples ]; updatedExamples[index].output = e.target.value; setExamples(updatedExamples); }, __source: { fileName: "", lineNumber: 169, columnNumber: 21 }, __self: this })))), /*#__PURE__*/ React.createElement("button", { type: "button", className: "bg-yellow-500 hover:bg-yellow-700 text-white font-bold py-2 px-4 rounded", onClick: handleLoadExamples, __source: { fileName: "", lineNumber: 184, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-upload mr-2", __source: { fileName: "", lineNumber: 189, columnNumber: 17 }, __self: this }), " Load Saved Examples")))))); }