function MainComponent({ setMessages, isLoading }) { const handleSubmit = async (event)=>{ event.preventDefault(); const searchBarContent = event.target.elements.searchInput.value; setMessages((prevMessages)=>[ ...prevMessages, { role: 'user', content: searchBarContent } ]); const response = await fetch('/integrations/chat-gpt/conversationgpt4', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages: [ { role: 'user', content: searchBarContent } ], system_prompt: 'Please provide assistance' }) }); const data = await response.json(); if (data && data.status) { setMessages((prevMessages)=>[ ...prevMessages, { role: 'system', content: data.result } ]); } isLoading(false); }; return /*#__PURE__*/ React.createElement("nav", { className: "bg-[#010101]", __source: { fileName: "", lineNumber: 31, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between flex-wrap p-6 max-w-7xl mx-auto", __source: { fileName: "", lineNumber: 32, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center flex-shrink-0 text-white mr-6", __source: { fileName: "", lineNumber: 33, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "font-semibold text-xl tracking-tight", __source: { fileName: "", lineNumber: 34, columnNumber: 11 }, __self: this }, "LatestLyrics")), /*#__PURE__*/ React.createElement("div", { className: "w-full block flex-grow lg:flex lg:justify-center lg:w-auto", __source: { fileName: "", lineNumber: 37, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 38, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "#responsive-header", className: "block mt-4 lg:inline-block lg:mt-0 text-teal-200 hover:text-white mr-4 font-roboto", __source: { fileName: "", lineNumber: 39, columnNumber: 13 }, __self: this }, "Home"), /*#__PURE__*/ React.createElement("a", { href: "#responsive-header", className: "block mt-4 lg:inline-block lg:mt-0 text-teal-200 hover:text-white mr-4 font-roboto", __source: { fileName: "", lineNumber: 42, columnNumber: 13 }, __self: this }, "Music"), /*#__PURE__*/ React.createElement("a", { href: "#responsive-header", className: "block mt-4 lg:inline-block lg:mt-0 text-teal-200 hover:text-white mr-4 font-roboto", __source: { fileName: "", lineNumber: 45, columnNumber: 13 }, __self: this }, "Lyrics"), /*#__PURE__*/ React.createElement("a", { href: "#responsive-header", className: "block mt-4 lg:inline-block lg:mt-0 text-teal-200 hover:text-white mr-4 font-roboto", __source: { fileName: "", lineNumber: 48, columnNumber: 13 }, __self: this }, "Singer"), /*#__PURE__*/ React.createElement("a", { href: "#responsive-header", className: "block mt-4 lg:inline-block lg:mt-0 text-teal-200 hover:text-white font-roboto", __source: { fileName: "", lineNumber: 51, columnNumber: 13 }, __self: this }, "Latest"))))); } function StoryComponent() { const [messages, setMessages] = React.useState([]); const [loading, setLoading] = React.useState(false); return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 66, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(MainComponent, { setMessages: setMessages, isLoading: setLoading, __source: { fileName: "", lineNumber: 67, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "m-4", __source: { fileName: "", lineNumber: 68, columnNumber: 7 }, __self: this }, loading ? /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 70, columnNumber: 11 }, __self: this }, "Loading...") : messages.map((message, index)=>/*#__PURE__*/ React.createElement("p", { key: index, __source: { fileName: "", lineNumber: 73, columnNumber: 13 }, __self: this }, `${message.role}: ${message.content}`)))); }