function MainComponent() { const [messages, setMessages] = useState([]); const [userInput, setUserInput] = useState(""); const [streamingMessage, setStreamingMessage] = useState(""); const [isLoading, setIsLoading] = useState(false); const handleStreamResponse = useHandleStreamResponse({ onChunk: setStreamingMessage, onFinish: (message)=>{ setMessages((prev)=>[ ...prev, { role: "assistant", content: message } ]); setStreamingMessage(""); setIsLoading(false); } }); const handleSubmit = async (e)=>{ e.preventDefault(); if (!userInput.trim() || isLoading) return; const newMessage = { role: "user", content: userInput }; setMessages((prev)=>[ ...prev, newMessage ]); setUserInput(""); setIsLoading(true); try { const response = await fetch("/integrations/anthropic-claude-sonnet/", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ messages: [ ...messages, newMessage ], stream: true }) }); handleStreamResponse(response); } catch (error) { console.error("Error:", error); setIsLoading(false); } }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col min-h-screen", __source: { fileName: "", lineNumber: 42, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "bg-gray-800 text-white py-4", __source: { fileName: "", lineNumber: 43, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("nav", { className: "container flex items-center justify-between mx-auto", __source: { fileName: "", lineNumber: 44, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-lexend", __source: { fileName: "", lineNumber: 45, columnNumber: 11 }, __self: this }, "Sports Simulator"), /*#__PURE__*/ React.createElement("ul", { className: "flex space-x-4", __source: { fileName: "", lineNumber: 46, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 47, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "#", className: "font-roboto text-xl", __source: { fileName: "", lineNumber: 48, columnNumber: 15 }, __self: this }, "Home")), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 52, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "#", className: "font-roboto text-xl", __source: { fileName: "", lineNumber: 53, columnNumber: 15 }, __self: this }, "Games")), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 57, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "#", className: "font-roboto text-xl", __source: { fileName: "", lineNumber: 58, columnNumber: 15 }, __self: this }, "Players")), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 62, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "#", className: "font-roboto text-xl", __source: { fileName: "", lineNumber: 63, columnNumber: 15 }, __self: this }, "Statistics")), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 67, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "#", className: "font-roboto text-xl", __source: { fileName: "", lineNumber: 68, columnNumber: 15 }, __self: this }, "Settings"))))), /*#__PURE__*/ React.createElement("main", { className: "container mx-auto py-8", __source: { fileName: "", lineNumber: 75, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("section", { className: "text-center", __source: { fileName: "", lineNumber: 76, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-lexend", __source: { fileName: "", lineNumber: 77, columnNumber: 11 }, __self: this }, "Welcome to the Sports Simulator!"), /*#__PURE__*/ React.createElement("p", { className: "mt-4 text-lg font-zilla-slab", __source: { fileName: "", lineNumber: 80, columnNumber: 11 }, __self: this }, "Experience the thrill of playing your favorite sports from the comfort of your own home."), /*#__PURE__*/ React.createElement("div", { className: "mt-8 max-w-2xl mx-auto bg-white rounded-lg shadow-lg p-6", __source: { fileName: "", lineNumber: 84, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-xl font-lexend mb-4", __source: { fileName: "", lineNumber: 85, columnNumber: 13 }, __self: this }, "Sports Assistant"), /*#__PURE__*/ React.createElement("div", { className: "h-[400px] overflow-y-auto mb-4 p-4 bg-gray-50 rounded", __source: { fileName: "", lineNumber: 86, columnNumber: 13 }, __self: this }, messages.map((message, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: `mb-4 ${message.role === "user" ? "text-right" : "text-left"}`, __source: { fileName: "", lineNumber: 88, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: `inline-block p-3 rounded-lg ${message.role === "user" ? "bg-teal-500 text-white" : "bg-gray-200 text-gray-800"}`, __source: { fileName: "", lineNumber: 92, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-roboto", __source: { fileName: "", lineNumber: 99, columnNumber: 21 }, __self: this }, message.content)))), streamingMessage && /*#__PURE__*/ React.createElement("div", { className: "text-left mb-4", __source: { fileName: "", lineNumber: 104, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "inline-block p-3 rounded-lg bg-gray-200 text-gray-800", __source: { fileName: "", lineNumber: 105, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-roboto", __source: { fileName: "", lineNumber: 106, columnNumber: 21 }, __self: this }, streamingMessage)))), /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, className: "flex gap-2", __source: { fileName: "", lineNumber: 111, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", value: userInput, onChange: (e)=>setUserInput(e.target.value), placeholder: "Ask about sports rules, game analysis, or training tips...", className: "flex-1 p-2 border border-gray-300 rounded font-roboto", disabled: isLoading, __source: { fileName: "", lineNumber: 112, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", disabled: isLoading, className: "bg-teal-500 text-white px-4 py-2 rounded font-roboto disabled:opacity-50", __source: { fileName: "", lineNumber: 120, columnNumber: 15 }, __self: this }, isLoading ? "Sending..." : "Send")))), /*#__PURE__*/ React.createElement("section", { className: "mt-8", __source: { fileName: "", lineNumber: 130, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-xl font-lexend", __source: { fileName: "", lineNumber: 131, columnNumber: 11 }, __self: this }, "Upcoming Games"), /*#__PURE__*/ React.createElement("ul", { className: "grid grid-cols-1 gap-4 mt-4 sm:grid-cols-2 md:grid-cols-3", __source: { fileName: "", lineNumber: 132, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("li", { className: "bg-white p-4 shadow", __source: { fileName: "", lineNumber: 133, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "font-roboto text-lg", __source: { fileName: "", lineNumber: 134, columnNumber: 15 }, __self: this }, "Football"), /*#__PURE__*/ React.createElement("div", { className: "text-gray-500 mt-2", __source: { fileName: "", lineNumber: 135, columnNumber: 15 }, __self: this }, "Tuesday, August 24, 2021 at 7:00 PM"), /*#__PURE__*/ React.createElement("div", { className: "text-gray-500 mt-2", __source: { fileName: "", lineNumber: 138, columnNumber: 15 }, __self: this }, "📌 Stadium"), /*#__PURE__*/ React.createElement("div", { className: "text-teal-500 mt-4 flex items-center justify-between", __source: { fileName: "", lineNumber: 139, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 140, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-2xl", __source: { fileName: "", lineNumber: 141, columnNumber: 19 }, __self: this }, "★"), /*#__PURE__*/ React.createElement("div", { className: "ml-1", __source: { fileName: "", lineNumber: 142, columnNumber: 19 }, __self: this }, "4.5")), /*#__PURE__*/ React.createElement("button", { className: "bg-teal-500 text-white py-2 px-4 rounded", disabled: true, __source: { fileName: "", lineNumber: 144, columnNumber: 17 }, __self: this }, "Join"))), /*#__PURE__*/ React.createElement("li", { className: "bg-white p-4 shadow", __source: { fileName: "", lineNumber: 152, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "font-roboto text-lg", __source: { fileName: "", lineNumber: 153, columnNumber: 15 }, __self: this }, "Basketball"), /*#__PURE__*/ React.createElement("div", { className: "text-gray-500 mt-2", __source: { fileName: "", lineNumber: 154, columnNumber: 15 }, __self: this }, "Wednesday, August 25, 2021 at 8:00 PM"), /*#__PURE__*/ React.createElement("div", { className: "text-gray-500 mt-2", __source: { fileName: "", lineNumber: 157, columnNumber: 15 }, __self: this }, "📌 Stadium"), /*#__PURE__*/ React.createElement("div", { className: "text-teal-500 mt-4 flex items-center justify-between", __source: { fileName: "", lineNumber: 158, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 159, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-2xl", __source: { fileName: "", lineNumber: 160, columnNumber: 19 }, __self: this }, "★"), /*#__PURE__*/ React.createElement("div", { className: "ml-1", __source: { fileName: "", lineNumber: 161, columnNumber: 19 }, __self: this }, "4.2")), /*#__PURE__*/ React.createElement("button", { className: "bg-teal-500 text-white py-2 px-4 rounded", disabled: true, __source: { fileName: "", lineNumber: 163, columnNumber: 17 }, __self: this }, "Join"))), /*#__PURE__*/ React.createElement("li", { className: "bg-white p-4 shadow", __source: { fileName: "", lineNumber: 171, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "font-roboto text-lg", __source: { fileName: "", lineNumber: 172, columnNumber: 15 }, __self: this }, "Tennis"), /*#__PURE__*/ React.createElement("div", { className: "text-gray-500 mt-2", __source: { fileName: "", lineNumber: 173, columnNumber: 15 }, __self: this }, "Thursday, August 26, 2021 at 6:00 PM"), /*#__PURE__*/ React.createElement("div", { className: "text-gray-500 mt-2", __source: { fileName: "", lineNumber: 176, columnNumber: 15 }, __self: this }, "📌 Stadium"), /*#__PURE__*/ React.createElement("div", { className: "text-teal-500 mt-4 flex items-center justify-between", __source: { fileName: "", lineNumber: 177, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 178, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-2xl", __source: { fileName: "", lineNumber: 179, columnNumber: 19 }, __self: this }, "★"), /*#__PURE__*/ React.createElement("div", { className: "ml-1", __source: { fileName: "", lineNumber: 180, columnNumber: 19 }, __self: this }, "4.7")), /*#__PURE__*/ React.createElement("button", { className: "bg-teal-500 text-white py-2 px-4 rounded", disabled: true, __source: { fileName: "", lineNumber: 182, columnNumber: 17 }, __self: this }, "Join"))))), /*#__PURE__*/ React.createElement("section", { className: "mt-8", __source: { fileName: "", lineNumber: 192, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-xl font-lexend", __source: { fileName: "", lineNumber: 193, columnNumber: 11 }, __self: this }, "Players"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 gap-4 mt-4 sm:grid-cols-2 md:grid-cols-3", __source: { fileName: "", lineNumber: 194, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white p-4 shadow", __source: { fileName: "", lineNumber: 195, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between", __source: { fileName: "", lineNumber: 196, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "font-roboto text-lg", __source: { fileName: "", lineNumber: 197, columnNumber: 17 }, __self: this }, "John Doe"), /*#__PURE__*/ React.createElement("div", { className: "text-gray-500", __source: { fileName: "", lineNumber: 198, columnNumber: 17 }, __self: this }, "🏄 Forward")), /*#__PURE__*/ React.createElement("img", { src: "/images/player1.jpg", alt: "John Doe - Forward", className: "w-full h-40 object-cover mt-4", __source: { fileName: "", lineNumber: 200, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "text-gray-500 mt-2", __source: { fileName: "", lineNumber: 205, columnNumber: 15 }, __self: this }, "📌 Stadium"), /*#__PURE__*/ React.createElement("div", { className: "text-teal-500 mt-4 flex items-center justify-between", __source: { fileName: "", lineNumber: 206, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 207, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-2xl", __source: { fileName: "", lineNumber: 208, columnNumber: 19 }, __self: this }, "★"), /*#__PURE__*/ React.createElement("div", { className: "ml-1", __source: { fileName: "", lineNumber: 209, columnNumber: 19 }, __self: this }, "4.5")), /*#__PURE__*/ React.createElement("button", { className: "bg-teal-500 text-white py-2 px-4 rounded", disabled: true, __source: { fileName: "", lineNumber: 211, columnNumber: 17 }, __self: this }, "Profile"))), /*#__PURE__*/ React.createElement("div", { className: "bg-white p-4 shadow", __source: { fileName: "", lineNumber: 219, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between", __source: { fileName: "", lineNumber: 220, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "font-roboto text-lg", __source: { fileName: "", lineNumber: 221, columnNumber: 17 }, __self: this }, "Jane Smith"), /*#__PURE__*/ React.createElement("div", { className: "text-gray-500", __source: { fileName: "", lineNumber: 222, columnNumber: 17 }, __self: this }, "🏄 Guard")), /*#__PURE__*/ React.createElement("img", { src: "/images/player2.jpg", alt: "Jane Smith - Guard", className: "w-full h-40 object-cover mt-4", __source: { fileName: "", lineNumber: 224, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "text-gray-500 mt-2", __source: { fileName: "", lineNumber: 229, columnNumber: 15 }, __self: this }, "📌 Stadium"), /*#__PURE__*/ React.createElement("div", { className: "text-teal-500 mt-4 flex items-center justify-between", __source: { fileName: "", lineNumber: 230, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 231, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-2xl", __source: { fileName: "", lineNumber: 232, columnNumber: 19 }, __self: this }, "★"), /*#__PURE__*/ React.createElement("div", { className: "ml-1", __source: { fileName: "", lineNumber: 233, columnNumber: 19 }, __self: this }, "4.2")), /*#__PURE__*/ React.createElement("button", { className: "bg-teal-500 text-white py-2 px-4 rounded", disabled: true, __source: { fileName: "", lineNumber: 235, columnNumber: 17 }, __self: this }, "Profile"))), /*#__PURE__*/ React.createElement("div", { className: "bg-white p-4 shadow", __source: { fileName: "", lineNumber: 243, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between", __source: { fileName: "", lineNumber: 244, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "font-roboto text-lg", __source: { fileName: "", lineNumber: 245, columnNumber: 17 }, __self: this }, "Mike Johnson"), /*#__PURE__*/ React.createElement("div", { className: "text-gray-500", __source: { fileName: "", lineNumber: 246, columnNumber: 17 }, __self: this }, "🏄 Center")), /*#__PURE__*/ React.createElement("img", { src: "/images/player3.jpg", alt: "Mike Johnson - Center", className: "w-full h-40 object-cover mt-4", __source: { fileName: "", lineNumber: 248, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "text-gray-500 mt-2", __source: { fileName: "", lineNumber: 253, columnNumber: 15 }, __self: this }, "📌 Stadium"), /*#__PURE__*/ React.createElement("div", { className: "text-teal-500 mt-4 flex items-center justify-between", __source: { fileName: "", lineNumber: 254, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 255, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-2xl", __source: { fileName: "", lineNumber: 256, columnNumber: 19 }, __self: this }, "★"), /*#__PURE__*/ React.createElement("div", { className: "ml-1", __source: { fileName: "", lineNumber: 257, columnNumber: 19 }, __self: this }, "4.7")), /*#__PURE__*/ React.createElement("button", { className: "bg-teal-500 text-white py-2 px-4 rounded", disabled: true, __source: { fileName: "", lineNumber: 259, columnNumber: 17 }, __self: this }, "Profile")))))), /*#__PURE__*/ React.createElement("footer", { className: "bg-gray-800 text-white py-4 mt-auto", __source: { fileName: "", lineNumber: 270, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "container mx-auto text-center", __source: { fileName: "", lineNumber: 271, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-zilla-slab", __source: { fileName: "", lineNumber: 272, columnNumber: 11 }, __self: this }, "© 2021 Sports Simulator. All rights reserved.")))); }