function MainComponent() { const [isLoading, setIsLoading] = React.useState(false); const [preferences, setPreferences] = React.useState({ speed: 5, taste: 5, nutrition: 5 }); const [mealSuggestions, setMealSuggestions] = React.useState({ soup: null, mainCourse: null, hotAppetizer: null, salad: null }); const handleInputChange = (event)=>{ setPreferences({ ...preferences, [event.target.name]: event.target.value }); }; const handleSubmit = async (event)=>{ event.preventDefault(); setIsLoading(true); try { const response = await fetch('/integrations/chat-gpt/conversationgpt4', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages: [ { role: "user", content: `Hız: ${preferences.speed}, Lezzet: ${preferences.taste}, Besleyicilik: ${preferences.nutrition}` } ], system_prompt: 'Türkçe YouTube videolarında bulunan yemek tarifleri bazında bir çorba, ana yemek, ara sıcak ve salata öner.', max_tokens: 2000 }) }); const data = await response.json(); if (data.status && typeof data.result === 'string') { const meals = data.result.split('\n'); setMealSuggestions({ soup: meals.find((meal)=>meal.toLowerCase().includes('çorba')), mainCourse: meals.find((meal)=>meal.toLowerCase().includes('ana yemek')), hotAppetizer: meals.find((meal)=>meal.toLowerCase().includes('ara sıcak')), salad: meals.find((meal)=>meal.toLowerCase().includes('salata')) }); } else { throw new Error('Invalid response from the server'); } } catch (error) { console.error('Fetching meal suggestions failed', error); } finally{ setIsLoading(false); } }; const suggestionItems = [ { key: 'soup', label: 'Çorba' }, { key: 'mainCourse', label: 'Ana Yemek' }, { key: 'hotAppetizer', label: 'Ara Sıcak' }, { key: 'salad', label: 'Salata' } ]; const renderSuggestion = (mealKey, label)=>{ if (isLoading) { return /*#__PURE__*/ React.createElement("div", { className: "animate-pulse flex space-x-4", __source: { fileName: "", lineNumber: 74, columnNumber: 14 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "rounded-full bg-gray-400 h-12 w-12", __source: { fileName: "", lineNumber: 75, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "flex-1 space-y-4 py-1", __source: { fileName: "", lineNumber: 76, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "h-4 bg-gray-400 rounded w-3/4", __source: { fileName: "", lineNumber: 77, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "space-y-2", __source: { fileName: "", lineNumber: 78, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "h-4 bg-gray-400 rounded", __source: { fileName: "", lineNumber: 79, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "h-4 bg-gray-400 rounded w-5/6", __source: { fileName: "", lineNumber: 80, columnNumber: 13 }, __self: this })))); } if (mealSuggestions[mealKey]) { return /*#__PURE__*/ React.createElement("div", { className: "bg-white shadow rounded p-4 mb-4", __source: { fileName: "", lineNumber: 88, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-roboto text-lg text-[#121212] mb-2", __source: { fileName: "", lineNumber: 89, columnNumber: 11 }, __self: this }, label), /*#__PURE__*/ React.createElement("a", { href: `https://www.youtube.com/results?search_query=${encodeURIComponent(mealSuggestions[mealKey])}`, target: "_blank", rel: "noopener noreferrer", className: "font-roboto text-blue-600 hover:text-blue-800 visited:text-purple-600", __source: { fileName: "", lineNumber: 90, columnNumber: 11 }, __self: this }, mealSuggestions[mealKey])); } return null; }; return /*#__PURE__*/ React.createElement("div", { className: "p-4 flex flex-col items-center justify-center", __source: { fileName: "", lineNumber: 106, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, className: "w-full max-w-[400px] space-y-4", __source: { fileName: "", lineNumber: 107, columnNumber: 7 }, __self: this }, Object.entries(preferences).map(([key, value])=>/*#__PURE__*/ React.createElement("div", { key: key, __source: { fileName: "", lineNumber: 109, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "font-roboto text-[#121212] block mb-2", __source: { fileName: "", lineNumber: 110, columnNumber: 13 }, __self: this }, key.charAt(0).toUpperCase() + key.slice(1), " (0-10):"), /*#__PURE__*/ React.createElement("input", { type: "range", name: key, min: "0", max: "10", value: value, onChange: handleInputChange, className: "w-full", __source: { fileName: "", lineNumber: 113, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "text-center font-roboto text-[#121212]", __source: { fileName: "", lineNumber: 122, columnNumber: 13 }, __self: this }, value))), /*#__PURE__*/ React.createElement("button", { type: "submit", disabled: isLoading, className: "w-full bg-[#010101] text-white font-roboto py-2 px-4 hover:bg-[#121212] disabled:bg-gray-300 rounded", __source: { fileName: "", lineNumber: 125, columnNumber: 9 }, __self: this }, "Yemek Önerisi Al")), /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-[400px] mt-4", __source: { fileName: "", lineNumber: 133, columnNumber: 7 }, __self: this }, suggestionItems.map((item)=>renderSuggestion(item.key, item.label)))); }