function MainComponent() { const [messages, setMessages] = React.useState([ { role: "system", content: "Write a Ken Carson verse on a drill rap song called 'Cablamo Kick Crack The Nigga'." } ]); const [isLoading, setIsLoading] = React.useState(false); const handleMessageSubmit = async (event)=>{ event.preventDefault(); const input = event.target.elements.messageInput; if (input.value.trim() === '') return; const userMessage = { role: "user", content: input.value.trim() }; setMessages([ ...messages, userMessage ]); setIsLoading(true); const response = await fetch('/integrations/chat-gpt/conversationgpt4', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages: [ ...messages, userMessage ], system_prompt: "Write a Ken Carson verse for a drill rap song called 'Cablamo Kick Crack The Nigga'.", max_tokens: 2000 }) }); const data = await response.json(); setIsLoading(false); if (data) { const receivedMessage = { role: 'system', content: data.choices[0].message.content }; setMessages([ ...messages, userMessage, receivedMessage ]); } }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen py-2 bg-[#F8FAFC]", __source: { fileName: "", lineNumber: 42, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-lg px-6 py-8 bg-white shadow-md overflow-hidden sm:rounded-lg", __source: { fileName: "", lineNumber: 43, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "mb-4 text-3xl font-bold text-center font-crimson-text text-[#121212]", __source: { fileName: "", lineNumber: 44, columnNumber: 9 }, __self: this }, "Ken Carson Drill Verse Generator"), /*#__PURE__*/ React.createElement("form", { onSubmit: handleMessageSubmit, className: "space-y-6", __source: { fileName: "", lineNumber: 47, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 48, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "messageInput", className: "block text-sm font-medium text-[#121212]", __source: { fileName: "", lineNumber: 49, columnNumber: 13 }, __self: this }, "Your message:"), /*#__PURE__*/ React.createElement("div", { className: "mt-1", __source: { fileName: "", lineNumber: 52, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "messageInput", id: "messageInput", autoComplete: "off", className: "w-full px-3 py-2 border border-[#D1D5DB] rounded-md shadow-sm placeholder-[#9CA3AF] focus:outline-none focus:ring-2 focus:ring-[#3B82F6] focus:border-transparent", __source: { fileName: "", lineNumber: 53, columnNumber: 15 }, __self: this }))), /*#__PURE__*/ React.createElement("button", { type: "submit", className: `w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-[#2563EB] hover:bg-[#1D4ED8] focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-[#2563EB] ${isLoading && 'opacity-50 cursor-not-allowed'}`, disabled: isLoading, __source: { fileName: "", lineNumber: 61, columnNumber: 11 }, __self: this }, isLoading ? /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 67, columnNumber: 17 }, __self: this }, "Sending...") : /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 68, columnNumber: 17 }, __self: this }, "Send"))), /*#__PURE__*/ React.createElement("div", { className: "mt-6 text-left space-y-4", __source: { fileName: "", lineNumber: 71, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("ul", { __source: { fileName: "", lineNumber: 72, columnNumber: 11 }, __self: this }, messages.map((message, index)=>/*#__PURE__*/ React.createElement("li", { key: index, className: `font-roboto text-sm ${message.role === 'system' ? 'text-[#374151]' : 'text-white bg-[#2563EB] p-2 rounded'}`, __source: { fileName: "", lineNumber: 74, columnNumber: 15 }, __self: this }, message.content)))))); }