function StylishManImageDisplay({ src, alt }) { return /*#__PURE__*/ React.createElement("img", { src: src, alt: alt, className: "w-[400px] h-[400px] mb-4", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }); } function StylishManImageDisplayStory() { return /*#__PURE__*/ React.createElement("div", { className: "flex justify-center mt-4", __source: { fileName: "", lineNumber: 9, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(StylishManImageDisplay, { src: "coolGuyImage.jpg", alt: "A stylish man wearing glasses", __source: { fileName: "", lineNumber: 10, columnNumber: 7 }, __self: this })); } function MainComponent() { const [inputText, setInputText] = React.useState(""); const [chatMessages, setChatMessages] = React.useState([]); const [loading, setLoading] = React.useState(false); const handleSend = async ()=>{ if (!inputText.trim()) return; const userMessage = { role: "user", content: inputText }; const messages = [ ...chatMessages, userMessage ]; setChatMessages(messages); setInputText(""); setLoading(true); const response = await fetch('/integrations/chat-gpt/conversationgpt4', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages: [ ...messages, { role: "user", content: `${inputText} 境界知能YouTuberのふりをして返事してください` } ] }) }); const data = await response.json(); setLoading(false); if (data.choices && data.choices[0] && data.choices[0].message) { const assistantMessage = data.choices[0].message; setChatMessages([ ...messages, assistantMessage ]); } }; return /*#__PURE__*/ React.createElement("div", { className: "w-full h-full p-4", __source: { fileName: "", lineNumber: 37, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold text-center mb-4", __source: { fileName: "", lineNumber: 38, columnNumber: 7 }, __self: this }, "境界知能YouTuberが全力肯定するサイト"), /*#__PURE__*/ React.createElement("div", { className: "flex justify-center mb-4", __source: { fileName: "", lineNumber: 39, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement(StylishManImageDisplay, { src: "coolGuyImage.jpg", alt: "A stylish man wearing glasses", __source: { fileName: "", lineNumber: 40, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "border border-gray-300 p-4 rounded h-[500px] overflow-y-auto mb-4", __source: { fileName: "", lineNumber: 45, columnNumber: 7 }, __self: this }, chatMessages.map((message, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: `${message.role === 'user' ? 'text-right' : 'text-left'} mb-2`, __source: { fileName: "", lineNumber: 47, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "p-2 rounded inline-block bg-gray-200", __source: { fileName: "", lineNumber: 48, columnNumber: 13 }, __self: this }, message.content))), loading && /*#__PURE__*/ React.createElement("div", { className: "text-center", __source: { fileName: "", lineNumber: 51, columnNumber: 21 }, __self: this }, "Loading...")), /*#__PURE__*/ React.createElement("div", { className: "flex", __source: { fileName: "", lineNumber: 53, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "chatInput", className: "border border-gray-300 p-2 rounded flex-grow mr-2", value: inputText, onChange: (e)=>setInputText(e.target.value), __source: { fileName: "", lineNumber: 54, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: handleSend, className: "bg-blue-500 text-white p-2 rounded", __source: { fileName: "", lineNumber: 61, columnNumber: 9 }, __self: this }, "送信"))); }