function MainComponent() { const [input, setInput] = React.useState(''); const [chatMessages, setChatMessages] = React.useState([]); const [loading, setLoading] = React.useState(false); const [images, setImages] = React.useState([]); const handleInputChange = (event)=>{ setInput(event.target.value); }; const handleSendMessage = async ()=>{ if (input.trim() === '') return; const newUserMessage = { role: "user", content: input.trim() }; setChatMessages([ ...chatMessages, newUserMessage ]); setInput(''); setLoading(true); try { const chatResponse = await fetch('/integrations/chat-gpt/conversationgpt4', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages: [ newUserMessage ], system_prompt: input }) }); const chatData = await chatResponse.json(); const assistantMessage = { role: "assistant", content: chatData.choices[0].message.content }; setChatMessages((currentMessages)=>[ ...currentMessages, assistantMessage ]); if (assistantMessage.content.includes("image prompts")) { const imagePrompts = assistantMessage.content.match(/image prompts: (.*)/i)[1].split(','); for (let prompt of imagePrompts){ const imageResponse = await fetch(`/integrations/stable-diffusion/?prompt=${encodeURIComponent(prompt.trim())}`, { method: 'GET' }); const imageData = await imageResponse.json(); setImages((currentImages)=>[ ...currentImages, ...imageData.data ]); } } } catch (error) { setChatMessages((currentMessages)=>[ ...currentMessages, { role: "assistant", content: "エラーが発生しました。やり直してください。" } ]); } finally{ setLoading(false); } }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen flex flex-col", __source: { fileName: "", lineNumber: 49, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "bg-[#D32F2F] p-4 text-white", __source: { fileName: "", lineNumber: 50, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "container mx-auto flex justify-between items-center", __source: { fileName: "", lineNumber: 51, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "logo.png", alt: "フジテレビのロゴ", className: "h-[50px]", __source: { fileName: "", lineNumber: 52, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "flex gap-4", __source: { fileName: "", lineNumber: 53, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "/", className: "hover:text-[#B71C1C]", __source: { fileName: "", lineNumber: 54, columnNumber: 13 }, __self: this }, "トップページ"), /*#__PURE__*/ React.createElement("a", { href: "/schedule", className: "hover:text-[#B71C1C]", __source: { fileName: "", lineNumber: 55, columnNumber: 13 }, __self: this }, "番組表"), /*#__PURE__*/ React.createElement("a", { href: "/list", className: "hover:text-[#B71C1C]", __source: { fileName: "", lineNumber: 56, columnNumber: 13 }, __self: this }, "番組一覧"), /*#__PURE__*/ React.createElement("a", { href: "/news", className: "hover:text-[#B71C1C]", __source: { fileName: "", lineNumber: 57, columnNumber: 13 }, __self: this }, "ニュース"), /*#__PURE__*/ React.createElement("a", { href: "/streaming", className: "hover:text-[#B71C1C]", __source: { fileName: "", lineNumber: 58, columnNumber: 13 }, __self: this }, "動画配信")), /*#__PURE__*/ React.createElement("input", { type: "text", name: "search", placeholder: "検索...", className: "p-2 border", __source: { fileName: "", lineNumber: 60, columnNumber: 11 }, __self: this }))), /*#__PURE__*/ React.createElement("main", { className: "flex-1 lg:container mx-auto p-4 grid lg:grid-cols-4 gap-4", __source: { fileName: "", lineNumber: 63, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "lg:col-span-3 bg-white p-4 space-y-4", __source: { fileName: "", lineNumber: 64, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "program-schedule.png", alt: "フジテレビの番組表", className: "w-full max-h-[300px] object-cover rounded shadow", __source: { fileName: "", lineNumber: 65, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold", __source: { fileName: "", lineNumber: 66, columnNumber: 13 }, __self: this }, "主なコンテンツ"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4", __source: { fileName: "", lineNumber: 67, columnNumber: 13 }, __self: this }, images.map((src, index)=>/*#__PURE__*/ React.createElement("img", { key: index, src: src, alt: `生成された画像 ${index + 1}`, className: "w-full h-[200px] object-cover rounded shadow", __source: { fileName: "", lineNumber: 69, columnNumber: 17 }, __self: this })))), /*#__PURE__*/ React.createElement("aside", { className: "lg:col-span-1 bg-gray-200 p-4 space-y-4", __source: { fileName: "", lineNumber: 73, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col space-y-2 h-full", __source: { fileName: "", lineNumber: 74, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex-grow overflow-y-auto no-scrollbar bg-white p-2", __source: { fileName: "", lineNumber: 75, columnNumber: 13 }, __self: this }, chatMessages.map((msg, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: `rounded p-2 my-1 ${msg.role === 'user' ? 'bg-blue-200 ml-auto' : 'bg-green-200 mr-auto'}`, __source: { fileName: "", lineNumber: 77, columnNumber: 17 }, __self: this }, msg.content)), loading && /*#__PURE__*/ React.createElement("div", { className: "animate-pulse h-6 bg-gray-300 rounded", __source: { fileName: "", lineNumber: 81, columnNumber: 27 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "border-t border-gray-300 pt-4", __source: { fileName: "", lineNumber: 83, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex gap-2", __source: { fileName: "", lineNumber: 84, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "message", value: input, onChange: handleInputChange, className: "p-2 border border-gray-300 flex-grow", placeholder: "メッセージを入力...", __source: { fileName: "", lineNumber: 85, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: handleSendMessage, className: "bg-green-500 text-white p-2 rounded hover:bg-green-600", __source: { fileName: "", lineNumber: 86, columnNumber: 17 }, __self: this }, "送信")))))), /*#__PURE__*/ React.createElement("footer", { className: "bg-[#424242] text-white p-4", __source: { fileName: "", lineNumber: 92, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "container mx-auto text-center", __source: { fileName: "", lineNumber: 93, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "/sitemap", className: "hover:text-[#BDBDBD]", __source: { fileName: "", lineNumber: 94, columnNumber: 11 }, __self: this }, "サイトマップ"), /*#__PURE__*/ React.createElement("a", { href: "/terms", className: "ml-4 hover:text-[#BDBDBD]", __source: { fileName: "", lineNumber: 95, columnNumber: 11 }, __self: this }, "利用規約"), /*#__PURE__*/ React.createElement("a", { href: "/privacy", className: "ml-4 hover:text-[#BDBDBD]", __source: { fileName: "", lineNumber: 96, columnNumber: 11 }, __self: this }, "プライバシーポリシー"), /*#__PURE__*/ React.createElement("a", { href: "/contact", className: "ml-4 hover:text-[#BDBDBD]", __source: { fileName: "", lineNumber: 97, columnNumber: 11 }, __self: this }, "お問い合わせ")))); }