function AccordionToggleText({ isOpen, toggleAccordion }) { const buttonText = isOpen ? "詳細をとじる" : "詳細をひらく"; return /*#__PURE__*/ React.createElement("p", { className: "cursor-pointer text-blue-500", onClick: toggleAccordion, __source: { fileName: "", lineNumber: 4, columnNumber: 5 }, __self: this }, buttonText); } function AccordionToggleTextStory() { const [accordionState, setAccordionState] = React.useState(false); const handleAccordionToggle = ()=>setAccordionState(!accordionState); return /*#__PURE__*/ React.createElement("div", { className: "font-roboto", __source: { fileName: "", lineNumber: 15, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(AccordionToggleText, { isOpen: accordionState, toggleAccordion: handleAccordionToggle, __source: { fileName: "", lineNumber: 16, columnNumber: 7 }, __self: this })); } function MainComponent() { const [searchQuery, setSearchQuery] = React.useState(""); const [searchResults, setSearchResults] = React.useState([]); const [chatGptResponse, setChatGptResponse] = React.useState(""); const [loading, setLoading] = React.useState(false); const [accordionState, setAccordionState] = React.useState(false); const handleSearch = async ()=>{ setLoading(true); const searchResponse = await fetch(`/integrations/google-search/search?q=${searchQuery}`, { method: 'GET' }); const searchResult = await searchResponse.json(); setSearchResults(searchResult.items); const chatGptResponse = await fetch('/integrations/chat-gpt/conversationgpt4', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages: [ { role: "user", content: `Can you summarize the following information: ${searchResult.items.map((item)=>item.snippet).join(' ')}` } ], system_prompt: 'Explain this content' }) }); const chatGptResult = await chatGptResponse.json(); setChatGptResponse(chatGptResult.choices[0].message.content); setLoading(false); }; const handleAccordionToggle = ()=>setAccordionState(!accordionState); return /*#__PURE__*/ React.createElement("div", { className: "p-4 font-roboto", __source: { fileName: "", lineNumber: 31, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center", __source: { fileName: "", lineNumber: 32, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold mb-4", __source: { fileName: "", lineNumber: 33, columnNumber: 9 }, __self: this }, "Google Search & ChatGPT"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "searchQuery", value: searchQuery, onChange: (e)=>setSearchQuery(e.target.value), placeholder: "Enter search query", className: "mb-4 p-2 border border-gray-300 rounded w-[300px]", __source: { fileName: "", lineNumber: 34, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: "bg-blue-500 text-white font-semibold py-2 px-4 rounded", id: "searchButton", onClick: handleSearch, disabled: loading, __source: { fileName: "", lineNumber: 42, columnNumber: 9 }, __self: this }, loading ? "Loading..." : "Search")), /*#__PURE__*/ React.createElement("div", { className: "results mt-4", __source: { fileName: "", lineNumber: 51, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-semibold mb-2", __source: { fileName: "", lineNumber: 52, columnNumber: 9 }, __self: this }, "Search Results"), /*#__PURE__*/ React.createElement("ul", { className: "list-disc pl-5", __source: { fileName: "", lineNumber: 53, columnNumber: 9 }, __self: this }, searchResults.map((result, index)=>/*#__PURE__*/ React.createElement("li", { key: index, __source: { fileName: "", lineNumber: 55, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: result.link, className: "text-blue-500", target: "_blank", rel: "noopener noreferrer", __source: { fileName: "", lineNumber: 56, columnNumber: 15 }, __self: this }, result.title), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 59, columnNumber: 15 }, __self: this }, result.snippet))))), /*#__PURE__*/ React.createElement("div", { className: "chatgpt-response mt-4", __source: { fileName: "", lineNumber: 64, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-semibold mb-2", __source: { fileName: "", lineNumber: 65, columnNumber: 9 }, __self: this }, "ChatGPT Response"), /*#__PURE__*/ React.createElement("div", { className: "p-3 border border-gray-300 rounded", __source: { fileName: "", lineNumber: 66, columnNumber: 9 }, __self: this }, chatGptResponse)), /*#__PURE__*/ React.createElement("div", { className: "text mt-10", __source: { fileName: "", lineNumber: 70, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { __source: { fileName: "", lineNumber: 71, columnNumber: 9 }, __self: this }, "11:00 RACINES ORGANIC"), /*#__PURE__*/ React.createElement("p", { className: "txt-contents", __source: { fileName: "", lineNumber: 72, columnNumber: 9 }, __self: this }, "目白駅前の商業施設"), /*#__PURE__*/ React.createElement(AccordionToggleText, { isOpen: accordionState, toggleAccordion: handleAccordionToggle, __source: { fileName: "", lineNumber: 73, columnNumber: 9 }, __self: this }), accordionState && /*#__PURE__*/ React.createElement("div", { className: "infomation", __source: { fileName: "", lineNumber: 75, columnNumber: 11 }, __self: this }, "アクセス：目白駅　徒歩5分", /*#__PURE__*/ React.createElement("br", { __source: { fileName: "", lineNumber: 76, columnNumber: 26 }, __self: this }), "営業時間:ランチ 11：00-17:00 ディナー 17:30-21:00 定休日:なし", /*#__PURE__*/ React.createElement("br", { __source: { fileName: "", lineNumber: 77, columnNumber: 57 }, __self: this }), "住所:", /*#__PURE__*/ React.createElement("a", { href: "https://maps.app.goo.gl/behgppEQZ375931S9", __source: { fileName: "", lineNumber: 78, columnNumber: 16 }, __self: this }, " 東京都豊島区目白2-39-1 トラッド目白 2F"), /*#__PURE__*/ React.createElement("br", { __source: { fileName: "", lineNumber: 78, columnNumber: 97 }, __self: this }), "SNS:", /*#__PURE__*/ React.createElement("a", { href: "https://www.instagram.com/accounts/login/?next=https%3A%2F%2Fwww.instagram.com%2Fracines_organic_mejiro%2F&is_from_rle", __source: { fileName: "", lineNumber: 79, columnNumber: 17 }, __self: this }, "Instagram"), /*#__PURE__*/ React.createElement("br", { __source: { fileName: "", lineNumber: 80, columnNumber: 26 }, __self: this }), "公式サイト：", /*#__PURE__*/ React.createElement("a", { href: "https://racines-organic.com/", __source: { fileName: "", lineNumber: 81, columnNumber: 19 }, __self: this }, "RACINES ORGANIC"), /*#__PURE__*/ React.createElement("br", { __source: { fileName: "", lineNumber: 81, columnNumber: 77 }, __self: this }), "食べログ:", /*#__PURE__*/ React.createElement("a", { href: "https://tabelog.com/tokyo/A1305/A130502/13265373/", __source: { fileName: "", lineNumber: 82, columnNumber: 18 }, __self: this }, "RACINES ORGANIC")))); }