function MainComponent() { const [loading, setLoading] = React.useState(false); const [response, setResponse] = React.useState(""); const handleSend = async ()=>{ setLoading(true); const model = document.querySelector('select[name="model"]').value; const userMessage = document.querySelector('textarea[name="user_message"]').value; let endpoint; switch(model){ case 'CHAT_GPT': endpoint = '/integrations/chat-gpt/conversationgpt4'; break; case 'ANTHROPIC_CLAUDE_SONNET': endpoint = '/integrations/anthropic-claude-sonnet/'; break; case 'ANTHROPIC_CLAUDE_HAIKU': endpoint = '/integrations/anthropic-claude-haiku/'; break; case 'GROQ': endpoint = '/integrations/groq/'; break; default: return; } const response = await fetch(endpoint, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages: [ { role: 'user', content: userMessage } ] }) }); const data = await response.json(); const result = data.choices[0].message.content; setResponse(result); setLoading(false); }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen flex flex-col items-center justify-center bg-gray-100", __source: { fileName: "", lineNumber: 46, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-[400px] bg-white rounded-lg shadow-lg p-6", __source: { fileName: "", lineNumber: 47, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold font-roboto mb-4", __source: { fileName: "", lineNumber: 48, columnNumber: 9 }, __self: this }, "AILab"), /*#__PURE__*/ React.createElement("select", { name: "model", className: "w-full mb-4 p-2 border border-gray-300 rounded-md", __source: { fileName: "", lineNumber: 49, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "CHAT_GPT", __source: { fileName: "", lineNumber: 50, columnNumber: 11 }, __self: this }, "ChatGPT"), /*#__PURE__*/ React.createElement("option", { value: "ANTHROPIC_CLAUDE_SONNET", __source: { fileName: "", lineNumber: 51, columnNumber: 11 }, __self: this }, "Claude Sonnet"), /*#__PURE__*/ React.createElement("option", { value: "ANTHROPIC_CLAUDE_HAIKU", __source: { fileName: "", lineNumber: 52, columnNumber: 11 }, __self: this }, "Claude Haiku"), /*#__PURE__*/ React.createElement("option", { value: "GROQ", __source: { fileName: "", lineNumber: 53, columnNumber: 11 }, __self: this }, "Groq")), /*#__PURE__*/ React.createElement("textarea", { name: "user_message", className: "w-full p-2 mb-4 border border-gray-300 rounded-md", rows: "4", placeholder: "Type your message here...", __source: { fileName: "", lineNumber: 55, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: "w-full bg-blue-500 text-white py-2 rounded-md font-bold font-roboto", onClick: handleSend, disabled: loading, __source: { fileName: "", lineNumber: 61, columnNumber: 9 }, __self: this }, loading ? "Loading..." : "Send"), /*#__PURE__*/ React.createElement("div", { className: "mt-4 p-4 border border-gray-300 rounded-md h-[200px] overflow-y-auto", __source: { fileName: "", lineNumber: 68, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-gray-700", __source: { fileName: "", lineNumber: 69, columnNumber: 11 }, __self: this }, response || "Responses will appear here...")))); }