function MainComponent() { const handleSubmit = async (e)=>{ e.preventDefault(); const prompt = e.target.prompt.value; const spec = e.target.spec.value; const response = await fetch('/integrations/anthropic-claude-haiku/', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages: [ { "role": "user", "content": prompt }, { "role": "system", "content": spec } ] }) }); const data = await response.json(); const output = data.choices[0].message.content; document.getElementById('output').innerText = output; }; return /*#__PURE__*/ React.createElement("div", { className: "font-roboto p-4 space-y-4", __source: { fileName: "", lineNumber: 24, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, className: "space-y-4", __source: { fileName: "", lineNumber: 25, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 26, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "prompt", className: "block text-sm font-medium text-[#000000]", __source: { fileName: "", lineNumber: 27, columnNumber: 11 }, __self: this }, "Prompt"), /*#__PURE__*/ React.createElement("textarea", { id: "prompt", name: "prompt", rows: "4", className: "mt-1 p-2 w-full border border-gray-300 rounded-md", __source: { fileName: "", lineNumber: 28, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 30, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "spec", className: "block text-sm font-medium text-[#000000]", __source: { fileName: "", lineNumber: 31, columnNumber: 11 }, __self: this }, "Spec"), /*#__PURE__*/ React.createElement("textarea", { id: "spec", name: "spec", rows: "4", className: "mt-1 p-2 w-full border border-gray-300 rounded-md", __source: { fileName: "", lineNumber: 32, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "px-4 py-2 bg-blue-600 text-white rounded-md", __source: { fileName: "", lineNumber: 34, columnNumber: 9 }, __self: this }, "Generate")), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 36, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-[#000000]", __source: { fileName: "", lineNumber: 37, columnNumber: 9 }, __self: this }, "Output"), /*#__PURE__*/ React.createElement("pre", { id: "output", className: "mt-1 p-2 w-full h-[200px] overflow-auto border border-gray-300 rounded-md", __source: { fileName: "", lineNumber: 38, columnNumber: 9 }, __self: this }))); }