function MainComponent() { const [userInput, setUserInput] = React.useState(""); const [loading, setLoading] = React.useState(false); const [responses, setResponses] = React.useState({ chatGPT: "", googleGemini: "", anthropicClaude: "" }); const [layout, setLayout] = React.useState("vertical"); const fetchData = async ()=>{ const messageBody = { messages: [ { "role": "user", "content": userInput } ] }; setLoading(true); const chatGPTPromise = fetch('/integrations/chat-gpt/conversationgpt4', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ ...messageBody, system_prompt: 'Explain this content' }) }); const googleGeminiPromise = fetch('/integrations/google-gemini/', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(messageBody) }); const anthropicClaudePromise = fetch('/integrations/anthropic-claude/', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(messageBody) }); Promise.all([ chatGPTPromise, googleGeminiPromise, anthropicClaudePromise ]).then(async ([chatGPTResponse, googleGeminiResponse, anthropicClaudeResponse])=>{ const chatGPTData = await chatGPTResponse.json(); const googleGeminiData = await googleGeminiResponse.json(); const anthropicClaudeData = await anthropicClaudeResponse.json(); setResponses({ chatGPT: chatGPTData.choices[0].message.content, googleGemini: googleGeminiData.choices[0].message.content, anthropicClaude: anthropicClaudeData.choices[0].message.content }); setLoading(false); }); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen gap-4 p-4", __source: { fileName: "", lineNumber: 63, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-semibold", __source: { fileName: "", lineNumber: 64, columnNumber: 7 }, __self: this }, "Chat Models Comparator"), /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-2xl space-y-4", __source: { fileName: "", lineNumber: 65, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("textarea", { name: "userInput", className: "w-full h-32 p-2 border rounded-md", placeholder: "Type your message here...", value: userInput, onChange: (e)=>setUserInput(e.target.value), __source: { fileName: "", lineNumber: 66, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: "w-full py-2 px-4 bg-blue-500 hover:bg-blue-700 text-white font-bold rounded-lg", onClick: fetchData, disabled: loading, __source: { fileName: "", lineNumber: 73, columnNumber: 9 }, __self: this }, "Submit"), /*#__PURE__*/ React.createElement("div", { className: "flex justify-end space-x-2", __source: { fileName: "", lineNumber: 80, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: `py-1 px-3 text-white font-bold rounded-lg ${layout === 'vertical' ? 'bg-blue-700' : 'bg-blue-500'}`, onClick: ()=>setLayout('vertical'), __source: { fileName: "", lineNumber: 81, columnNumber: 11 }, __self: this }, "Vertical"), /*#__PURE__*/ React.createElement("button", { className: `py-1 px-3 text-white font-bold rounded-lg ${layout === 'horizontal' ? 'bg-blue-700' : 'bg-blue-500'}`, onClick: ()=>setLayout('horizontal'), __source: { fileName: "", lineNumber: 87, columnNumber: 11 }, __self: this }, "Horizontal")), /*#__PURE__*/ React.createElement("div", { className: `gap-4 ${layout === 'horizontal' ? 'flex flex-row' : 'flex flex-col'}`, __source: { fileName: "", lineNumber: 94, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex-1 p-4 border rounded-lg", __source: { fileName: "", lineNumber: 97, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-bold", __source: { fileName: "", lineNumber: 98, columnNumber: 13 }, __self: this }, "Chat GPT Response"), /*#__PURE__*/ React.createElement("p", { className: "text-sm", __source: { fileName: "", lineNumber: 99, columnNumber: 13 }, __self: this }, loading ? "Loading..." : responses.chatGPT)), /*#__PURE__*/ React.createElement("div", { className: "flex-1 p-4 border rounded-lg", __source: { fileName: "", lineNumber: 101, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-bold", __source: { fileName: "", lineNumber: 102, columnNumber: 13 }, __self: this }, "Google Gemini Response"), /*#__PURE__*/ React.createElement("p", { className: "text-sm", __source: { fileName: "", lineNumber: 103, columnNumber: 13 }, __self: this }, loading ? "Loading..." : responses.googleGemini)), /*#__PURE__*/ React.createElement("div", { className: "flex-1 p-4 border rounded-lg", __source: { fileName: "", lineNumber: 105, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-bold", __source: { fileName: "", lineNumber: 106, columnNumber: 13 }, __self: this }, "Anthropic Claude Response"), /*#__PURE__*/ React.createElement("p", { className: "text-sm", __source: { fileName: "", lineNumber: 107, columnNumber: 13 }, __self: this }, loading ? "Loading..." : responses.anthropicClaude))))); }