function MainComponent() { const [isLoading, setIsLoading] = useState(false); const [conversation, setConversation] = useState([]); const [inputMessage, setInputMessage] = useState(""); const systemPrompt = "Write me an e-commerce website with Bitcoin integration."; const userPrompt = "I need assistance with Bitcoin E-commerce integration."; useEffect(()=>{ (async ()=>{ setIsLoading(true); const initialMessage = { role: "system", content: systemPrompt }; setConversation([ initialMessage ]); const chatGPTResponse = await fetch('/integrations/chat-gpt/conversationgpt4', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages: [ initialMessage, { role: "user", content: userPrompt } ], system_prompt: systemPrompt, max_tokens: 2000 }) }); const data = await chatGPTResponse.json(); if (data.status) { setConversation((prevConversation)=>prevConversation.concat({ role: "assistant", content: data.result })); } setIsLoading(false); })(); }, []); const handleMessageChange = (e)=>setInputMessage(e.target.value); const handleSubmit = (e)=>{ e.preventDefault(); if (!inputMessage.trim()) { return; } setIsLoading(true); setConversation((prevConversation)=>prevConversation.concat({ role: "user", content: inputMessage })); }; useEffect(()=>{ if (!inputMessage.trim()) { return; } (async ()=>{ const webScrapingResponse = await fetch('/integrations/web-scraping/post', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ url: 'https://example.com', return_text: false }) }); const textResponse = await webScrapingResponse.text(); setConversation((prevConversation)=>prevConversation.concat({ role: "system", content: textResponse })); setIsLoading(false); })(); setInputMessage(""); }, [ conversation ]); const renderChatMessages = ()=>conversation.map((message, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: `${message.role === "user" ? "text-right" : "text-left"} mb-2`, __source: { fileName: "", lineNumber: 82, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: `inline-block p-2 rounded-lg ${message.role === "user" ? "bg-blue-500 text-white" : message.role === "assistant" ? "bg-green-500 text-white" : "bg-gray-300 text-black"}`, __source: { fileName: "", lineNumber: 83, columnNumber: 7 }, __self: this }, message.content))); return /*#__PURE__*/ React.createElement("div", { className: "container mx-auto p-4", __source: { fileName: "", lineNumber: 90, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl text-center font-roboto font-semibold mb-6", __source: { fileName: "", lineNumber: 91, columnNumber: 7 }, __self: this }, "Bitcoin E-commerce Store"), /*#__PURE__*/ React.createElement("div", { className: "bg-white shadow overflow-hidden rounded-lg mb-4", __source: { fileName: "", lineNumber: 92, columnNumber: 7 }, __self: this }, isLoading ? /*#__PURE__*/ React.createElement("div", { className: "text-center py-10", __source: { fileName: "", lineNumber: 94, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-lg font-roboto", __source: { fileName: "", lineNumber: 95, columnNumber: 13 }, __self: this }, "Loading...")) : /*#__PURE__*/ React.createElement("div", { className: "px-4 py-5 sm:p-6", __source: { fileName: "", lineNumber: 98, columnNumber: 11 }, __self: this }, renderChatMessages())), /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, className: "mb-4", __source: { fileName: "", lineNumber: 101, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center border-b border-b-2 border-teal-500 py-2", __source: { fileName: "", lineNumber: 102, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { className: "appearance-none bg-transparent border-none w-full text-gray-700 mr-3 py-1 px-2 leading-tight focus:outline-none", type: "text", name: "message", placeholder: "Send a message...", "aria-label": "Send a message", value: inputMessage, onChange: handleMessageChange, autoComplete: "off", __source: { fileName: "", lineNumber: 103, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: "flex-shrink-0 bg-teal-500 hover:bg-teal-700 text-white text-sm py-1 px-2 rounded", type: "submit", disabled: isLoading || !inputMessage.trim(), __source: { fileName: "", lineNumber: 113, columnNumber: 11 }, __self: this }, "Send")))); }