function MainComponent() { const [messages, setMessages] = React.useState([]); const [inputValue, setInputValue] = React.useState(""); const [isLoading, setIsLoading] = React.useState(false); const [chatResponse, setChatResponse] = React.useState(""); const sendMessage = async (content)=>{ if (!content.trim()) return; const newMessage = { role: "user", content }; setMessages([ ...messages, newMessage ]); setIsLoading(true); try { const response = await fetch('/integrations/chat-gpt/conversationgpt4', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages: [ ...messages, newMessage ], system_prompt: 'Assist with an online fashion shop inquiry' }) }); const data = await response.json(); if (data.status) { setChatResponse(data.result); setMessages([ ...messages, newMessage, { role: "assistant", content: data.result } ]); } else throw new Error('Failed to fetch response'); } catch (error) { setChatResponse("Sorry, there was an error processing your request."); } finally{ setIsLoading(false); } }; const handleInputChange = (event)=>{ setInputValue(event.target.value); }; const handleSubmit = (event)=>{ event.preventDefault(); sendMessage(inputValue); setInputValue(""); }; const messagesEndRef = React.useRef(null); const scrollToBottom = ()=>{ messagesEndRef.current?.scrollIntoView({ behavior: "smooth" }); }; React.useEffect(scrollToBottom, [ messages ]); return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#f3f3f3] flex flex-col", __source: { fileName: "", lineNumber: 47, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex-grow flex flex-col justify-between", __source: { fileName: "", lineNumber: 48, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "p-4", __source: { fileName: "", lineNumber: 49, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-xl font-bold text-[#333] mb-4 font-roboto", __source: { fileName: "", lineNumber: 50, columnNumber: 11 }, __self: this }, "Youth Fashion Shop"), /*#__PURE__*/ React.createElement("p", { className: "text-base text-gray-600 font-roboto", __source: { fileName: "", lineNumber: 51, columnNumber: 11 }, __self: this }, "Find the latest trends in young fashion. We accept all major payment methods including credit cards, Bizum, and PayPal."), /*#__PURE__*/ React.createElement("div", { className: "mt-6 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4", __source: { fileName: "", lineNumber: 52, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "max-h-[300px] overflow-y-auto p-4", __source: { fileName: "", lineNumber: 55, columnNumber: 9 }, __self: this }, messages.map((msg, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: `text-sm p-2 my-1 rounded-lg font-roboto ${msg.role === 'user' ? 'bg-blue-200' : 'bg-green-200'}`, __source: { fileName: "", lineNumber: 57, columnNumber: 13 }, __self: this }, msg.content)), /*#__PURE__*/ React.createElement("div", { ref: messagesEndRef, __source: { fileName: "", lineNumber: 61, columnNumber: 11 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "p-4 bg-white shadow-md", __source: { fileName: "", lineNumber: 64, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, className: "flex items-center", __source: { fileName: "", lineNumber: 65, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "message", value: inputValue, onChange: handleInputChange, placeholder: "Ask us anything...", className: "flex-grow border rounded-lg p-2 mr-2 outline-none", __source: { fileName: "", lineNumber: 66, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "px-4 py-2 bg-blue-500 text-white font-semibold rounded-lg", disabled: isLoading, __source: { fileName: "", lineNumber: 74, columnNumber: 11 }, __self: this }, isLoading ? "Loading..." : "Send"))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 83, columnNumber: 7 }, __self: this }, ` @keyframes slideInFromLeft { 0% { transform: translateY(100%); } 100% { transform: translateY(0); } } .chat-slide-in { animation: 0.5s ease-out 0s 1 slideInFromLeft; } `)); }