function MainComponent() { const [messages, setMessages] = React.useState([]); const [loading, setLoading] = React.useState(false); const inputRef = React.useRef(); const fetchChatGPTResponse = async (userMessage)=>{ setLoading(true); try { const response = await fetch('/integrations/chat-gpt/conversationgpt4', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages: [ { role: 'user', content: userMessage } ], system_prompt: 'Explain this content' }) }); const data = await response.json(); if (data && data.choices && data.choices.length > 0) { setMessages((prevMessages)=>[ ...prevMessages, { role: 'user', content: userMessage }, { role: 'assistant', content: data.choices[0].message.content } ]); } } catch (error) { console.error('Fetching ChatGPT response failed:', error); } finally{ setLoading(false); } }; const handleSubmit = (event)=>{ event.preventDefault(); const userMessage = inputRef.current.value; if (userMessage.trim() === '') return; fetchChatGPTResponse(userMessage); inputRef.current.value = ''; }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-[#f0f0f0] p-4", __source: { fileName: "", lineNumber: 46, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-xl", __source: { fileName: "", lineNumber: 47, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white shadow-md rounded-lg p-6 mb-4", __source: { fileName: "", lineNumber: 48, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-semibold mb-4", __source: { fileName: "", lineNumber: 49, columnNumber: 21 }, __self: this }, "Chat with GPT-4"), /*#__PURE__*/ React.createElement("div", { id: "messages", className: "h-[400px] overflow-y-auto p-4 bg-[#fafafa] rounded-lg mb-4", __source: { fileName: "", lineNumber: 50, columnNumber: 21 }, __self: this }, messages.map((message, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: `p-2 ${message.role === 'assistant' ? 'text-left' : 'text-right'}`, __source: { fileName: "", lineNumber: 52, columnNumber: 29 }, __self: this }, /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 53, columnNumber: 33 }, __self: this }, message.content)))), /*#__PURE__*/ React.createElement("form", { className: "flex gap-4", onSubmit: handleSubmit, __source: { fileName: "", lineNumber: 57, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("input", { ref: inputRef, type: "text", name: "message", placeholder: "Type your message here...", className: "flex-1 p-4 rounded-lg border-2 border-gray-200 focus:border-blue-500 outline-none transition-colors", __source: { fileName: "", lineNumber: 58, columnNumber: 25 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "px-6 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition-colors", __source: { fileName: "", lineNumber: 65, columnNumber: 25 }, __self: this }, "送信"))), loading && /*#__PURE__*/ React.createElement("div", { className: "text-center", __source: { fileName: "", lineNumber: 72, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 73, columnNumber: 25 }, __self: this }, "Loading...")))); }