function MainComponent() { const [prompt, setPrompt] = React.useState('Enter your prompt here'); const [inputs, setInputs] = React.useState([ 'Example input 1', 'Example input 2', 'Example input 3' ]); const [outputs, setOutputs] = React.useState([ 'Example output 1', 'Example output 2', 'Example output 3' ]); const [optimizedPrompt, setOptimizedPrompt] = React.useState(''); const [isOptimizing, setIsOptimizing] = React.useState(false); const handlePromptChange = (event)=>{ setPrompt(event.target.value); }; const handleInputChange = (index, event)=>{ const newInputs = [ ...inputs ]; newInputs[index] = event.target.value; setInputs(newInputs); }; const handleOutputChange = (index, event)=>{ const newOutputs = [ ...outputs ]; newOutputs[index] = event.target.value; setOutputs(newOutputs); }; const handleOptimizePrompt = async ()=>{ setIsOptimizing(true); const response = await fetch('/integrations/anthropic-claude/', { method: 'POST', body: JSON.stringify({ messages: [ { role: 'user', content: `Optimize the following prompt using the provided example inputs and outputs: ${prompt}\nInputs: ${inputs.join(', ')}\nOutputs: ${outputs.join(', ')}` } ] }), headers: { 'Content-Type': 'application/json' } }); const data = await response.json(); setOptimizedPrompt(data.choices[0].message.content); setIsOptimizing(false); }; const handleLooksGood = ()=>{ setPrompt(optimizedPrompt); setIsOptimizing(false); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center h-screen", __source: { fileName: "", lineNumber: 52, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white shadow-md rounded-lg p-8 w-full max-w-md", __source: { fileName: "", lineNumber: 53, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold mb-4", __source: { fileName: "", lineNumber: 54, columnNumber: 9 }, __self: this }, "Prompt Optimizer"), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 55, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "prompt", className: "block font-medium mb-2", __source: { fileName: "", lineNumber: 56, columnNumber: 11 }, __self: this }, "Prompt:"), /*#__PURE__*/ React.createElement("textarea", { id: "prompt", name: "prompt", className: "w-full h-20 border border-gray-300 rounded-md p-2 focus:outline-none focus:ring-2 focus:ring-blue-500", value: prompt, onChange: handlePromptChange, __source: { fileName: "", lineNumber: 57, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 65, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block font-medium mb-2", __source: { fileName: "", lineNumber: 66, columnNumber: 11 }, __self: this }, "Example Inputs:"), inputs.map((input, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "flex items-center mb-2", __source: { fileName: "", lineNumber: 68, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: `input-${index}`, className: "flex-1 border border-gray-300 rounded-md p-2 focus:outline-none focus:ring-2 focus:ring-blue-500", value: input, onChange: (event)=>handleInputChange(index, event), __source: { fileName: "", lineNumber: 69, columnNumber: 15 }, __self: this })))), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 79, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block font-medium mb-2", __source: { fileName: "", lineNumber: 80, columnNumber: 11 }, __self: this }, "Example Outputs:"), outputs.map((output, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "flex items-center mb-2", __source: { fileName: "", lineNumber: 82, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: `output-${index}`, className: "flex-1 border border-gray-300 rounded-md p-2 focus:outline-none focus:ring-2 focus:ring-blue-500", value: output, onChange: (event)=>handleOutputChange(index, event), __source: { fileName: "", lineNumber: 83, columnNumber: 15 }, __self: this })))), /*#__PURE__*/ React.createElement("div", { className: "flex justify-between", __source: { fileName: "", lineNumber: 93, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded", onClick: handleOptimizePrompt, disabled: isOptimizing, __source: { fileName: "", lineNumber: 94, columnNumber: 11 }, __self: this }, isOptimizing ? 'Optimizing...' : 'Optimize Prompt'), /*#__PURE__*/ React.createElement("button", { className: "bg-green-500 hover:bg-green-600 text-white font-bold py-2 px-4 rounded", onClick: handleLooksGood, disabled: isOptimizing, __source: { fileName: "", lineNumber: 101, columnNumber: 11 }, __self: this }, "Looks Good")))); }