function MainComponent() { const [liveStreams, setLiveStreams] = React.useState([]); const [searchResults, setSearchResults] = React.useState([]); const [searchQuery, setSearchQuery] = React.useState(""); const [loadingSearch, setLoadingSearch] = React.useState(false); React.useEffect(()=>{ fetchLiveStreams(); }, []); async function fetchLiveStreams() { const response = await fetch('/integrations/google-search/search?q=Vtuber+live+stream'); const data = await response.json(); const items = data.items.map((item, index)=>({ id: index, title: item.title, channel: item.displayLink, thumbnail: `/path_to_image${index}.jpg` // Dummy paths for demonstration })); setLiveStreams(items); } async function handleSearch() { setLoadingSearch(true); const response = await fetch('/integrations/chat-gpt/conversationgpt4', { method: 'POST', body: JSON.stringify({ messages: [ { "role": "user", "content": `Search for Vtuber channels related to: ${searchQuery}` } ], system_prompt: 'Provide relevant Vtuber channels from YouTube' }), headers: { 'Content-Type': 'application/json' } }); const data = await response.json(); const messageContent = data.choices[0].message.content; const chatResults = messageContent.split('\n').map((title, index)=>({ id: index, title })); setSearchResults(chatResults); setLoadingSearch(false); } return /*#__PURE__*/ React.createElement("div", { className: "font-roboto p-4", __source: { fileName: "", lineNumber: 43, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-center text-2xl font-bold mb-6", __source: { fileName: "", lineNumber: 44, columnNumber: 7 }, __self: this }, "Vtuber Live Viewer"), /*#__PURE__*/ React.createElement("div", { className: "grid gap-6 grid-cols-1 md:grid-cols-2", __source: { fileName: "", lineNumber: 45, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 47, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-semibold mb-4", __source: { fileName: "", lineNumber: 48, columnNumber: 11 }, __self: this }, "現在のライブ配信"), /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 49, columnNumber: 11 }, __self: this }, liveStreams.map((stream)=>/*#__PURE__*/ React.createElement("div", { key: stream.id, className: "bg-white shadow-md rounded-lg p-4", __source: { fileName: "", lineNumber: 51, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: stream.thumbnail, alt: `Live stream ${stream.id}`, className: "w-full h-[200px] object-cover mb-4", __source: { fileName: "", lineNumber: 52, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "text-lg font-medium", __source: { fileName: "", lineNumber: 53, columnNumber: 17 }, __self: this }, stream.title), /*#__PURE__*/ React.createElement("div", { className: "text-sm text-gray-600", __source: { fileName: "", lineNumber: 54, columnNumber: 17 }, __self: this }, stream.channel), /*#__PURE__*/ React.createElement("button", { className: "mt-2 text-blue-500", __source: { fileName: "", lineNumber: 55, columnNumber: 17 }, __self: this }, "視聴する"))))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 61, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-semibold mb-4", __source: { fileName: "", lineNumber: 62, columnNumber: 11 }, __self: this }, "Vtuber検索"), /*#__PURE__*/ React.createElement("div", { className: "bg-white shadow-md rounded-lg p-4", __source: { fileName: "", lineNumber: 63, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("input", { className: "w-full p-2 mb-4 border border-gray-300 rounded-md", type: "text", name: "search", placeholder: "Vtuber名を入力", value: searchQuery, onChange: (e)=>setSearchQuery(e.target.value), __source: { fileName: "", lineNumber: 64, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: "w-full bg-blue-500 text-white p-2 rounded-md", onClick: handleSearch, disabled: loadingSearch, __source: { fileName: "", lineNumber: 72, columnNumber: 13 }, __self: this }, loadingSearch ? '検索中...' : '検索'), /*#__PURE__*/ React.createElement("div", { className: "mt-4 space-y-2", __source: { fileName: "", lineNumber: 75, columnNumber: 13 }, __self: this }, searchResults.map((result)=>/*#__PURE__*/ React.createElement("div", { key: result.id, className: "bg-gray-100 p-2 rounded-md", __source: { fileName: "", lineNumber: 77, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-lg font-medium", __source: { fileName: "", lineNumber: 78, columnNumber: 19 }, __self: this }, result.title), /*#__PURE__*/ React.createElement("button", { className: "text-blue-500", __source: { fileName: "", lineNumber: 79, columnNumber: 19 }, __self: this }, "視聴する")))))))); }