function MainComponent() { const [input, setInput] = React.useState(''); const [loading, setLoading] = React.useState(false); const [results, setResults] = React.useState({ chatgpt: '', groq: '', googlegemini: '', anthropicopus: '', anthropichaiku: '' }); const sendRequest = (provider, endpoint)=>{ return fetch(endpoint, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages: [ { role: 'user', content: input } ], system_prompt: 'Provide a response based on the following input' }) }).then((res)=>res.json()).then((data)=>data.choices[0].message.content); }; const handleSubmit = async ()=>{ setLoading(true); const urls = { chatgpt: '/integrations/chat-gpt/conversationgpt4', groq: '/integrations/groq/', googlegemini: '/integrations/google-gemini/', anthropicopus: '/integrations/anthropic-claude/', anthropichaiku: '/integrations/anthropic-claude-haiku/' }; const promises = Object.keys(urls).map((provider)=>sendRequest(provider, urls[provider])); const responses = await Promise.all(promises); setResults({ chatgpt: responses[0], groq: responses[1], googlegemini: responses[2], anthropicopus: responses[3], anthropichaiku: responses[4] }); setLoading(false); }; const codeBlock = (text, language)=>/*#__PURE__*/ React.createElement("div", { className: "relative w-full h-[300px] bg-gray-100 overflow-y-scroll p-4", __source: { fileName: "", lineNumber: 51, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "absolute top-2 right-2 bg-blue-500 text-white py-1 px-2 rounded-md", onClick: ()=>navigator.clipboard.writeText(text.trim()), __source: { fileName: "", lineNumber: 52, columnNumber: 7 }, __self: this }, "Copy"), /*#__PURE__*/ React.createElement("pre", { className: "line-numbers", __source: { fileName: "", lineNumber: 54, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("code", { className: `language-${language}`, __source: { fileName: "", lineNumber: 55, columnNumber: 9 }, __self: this }, text))); React.useEffect(()=>{ if (window.Prism) { window.Prism.highlightAll(); } }, [ results ]); return /*#__PURE__*/ React.createElement("div", { className: "container mx-auto p-4", __source: { fileName: "", lineNumber: 67, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("textarea", { className: "w-full border p-2 mb-4", name: "userInput", placeholder: "Type your input here...", value: input, onChange: (e)=>setInput(e.target.value), __source: { fileName: "", lineNumber: 68, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: `w-full bg-blue-500 text-white p-2 ${loading ? 'opacity-50 cursor-not-allowed' : ''}`, onClick: handleSubmit, disabled: loading, __source: { fileName: "", lineNumber: 75, columnNumber: 7 }, __self: this }, loading ? 'Loading...' : 'Submit'), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4 mt-4", __source: { fileName: "", lineNumber: 83, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 84, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-bold text-lg", __source: { fileName: "", lineNumber: 85, columnNumber: 11 }, __self: this }, "ChatGPT"), codeBlock(results.chatgpt, "javascript")), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 88, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-bold text-lg", __source: { fileName: "", lineNumber: 89, columnNumber: 11 }, __self: this }, "Groq"), codeBlock(results.groq, "javascript")), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 92, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-bold text-lg", __source: { fileName: "", lineNumber: 93, columnNumber: 11 }, __self: this }, "Google Gemini"), codeBlock(results.googlegemini, "javascript")), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 96, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-bold text-lg", __source: { fileName: "", lineNumber: 97, columnNumber: 11 }, __self: this }, "Anthropic Opus"), codeBlock(results.anthropicopus, "javascript")), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 100, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-bold text-lg", __source: { fileName: "", lineNumber: 101, columnNumber: 11 }, __self: this }, "Anthropic Haiku"), codeBlock(results.anthropichaiku, "javascript")))); }