function MainComponent() { const [selectedDate, setSelectedDate] = React.useState(""); const [translatedNews, setTranslatedNews] = React.useState([]); const [loading, setLoading] = React.useState(false); const [selectedMedia, setSelectedMedia] = React.useState(""); const mediaOptions = { communications: [ "Associated Press", "Thomson Reuters", "Bloomberg", "United Press International", "Dow Jones" ], newspapers: [ "USA Today", "The Wall Street Journal", "The New York Times", "Los Angeles Times", "New York Post", "Chicago Tribune", "The Boston Globe", "Minneapolis Star Tribune", "The Washington Post", "The Philadelphia Inquirer", "The Seattle Times", "Newsday", "San Francisco Chronicle", "The Denver Post", "Houston Chronicle" ], tvStations: [ "ABC", "NBC", "CBS", "FOX", "CNN", "PBS" ] }; const translateNews = async (media, date)=>{ setLoading(true); const response = await fetch(`/integrations/chat-gpt/conversationgpt4`, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages: [ { "role": "user", "content": `Fetch news reported by ${media} on ${date} and translate it into Japanese.` } ], system_prompt: 'Translate this news into Japanese.' }) }); const data = await response.json(); if (data.choices && data.choices.length > 0) { setTranslatedNews([ data.choices[0].message.content ]); } else { setTranslatedNews([ "No news found for this date or translation error." ]); } setLoading(false); }; return /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("div", { className: "flex flex-wrap justify-center my-4", __source: { fileName: "", lineNumber: 41, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("select", { className: "p-2 border rounded-lg", value: selectedMedia, onChange: (e)=>setSelectedMedia(e.target.value), name: "mediaSelection", __source: { fileName: "", lineNumber: 42, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "", __source: { fileName: "", lineNumber: 48, columnNumber: 11 }, __self: this }, "Select Media"), Object.entries(mediaOptions).map(([category, media])=>/*#__PURE__*/ React.createElement("optgroup", { key: category, label: category, __source: { fileName: "", lineNumber: 50, columnNumber: 13 }, __self: this }, media.map((name)=>/*#__PURE__*/ React.createElement("option", { key: name, value: name, __source: { fileName: "", lineNumber: 52, columnNumber: 17 }, __self: this }, name))))), /*#__PURE__*/ React.createElement("input", { type: "date", className: "p-2 border rounded-lg mx-2", value: selectedDate, onChange: (e)=>setSelectedDate(e.target.value), name: "dateSelection", __source: { fileName: "", lineNumber: 57, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: "p-2 border rounded-lg bg-blue-500 text-white hover:bg-blue-700 transition duration-300 ease-in-out", onClick: ()=>translateNews(selectedMedia, selectedDate), disabled: !selectedMedia || !selectedDate, __source: { fileName: "", lineNumber: 64, columnNumber: 9 }, __self: this }, "Fetch News")), /*#__PURE__*/ React.createElement("div", { className: "flex flex-wrap justify-center", __source: { fileName: "", lineNumber: 72, columnNumber: 7 }, __self: this }, loading ? /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 74, columnNumber: 11 }, __self: this }, "Loading...") : translatedNews.map((news, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "m-4 p-4 bg-[#f0f0f0] hover:bg-[#dddddd] rounded-lg shadow-md font-roboto", __source: { fileName: "", lineNumber: 77, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 78, columnNumber: 15 }, __self: this }, news))))); }