{label}

{recipe.name}

\n {recipe.source &&

{recipe.source}

}\n {rating &&

{rating}

}\n

\n {recipe.tags?.map((tag) => (\n \n {tag}\n \n ))}\n {!recipe.tried && (\n New!\n )}\n

\n );\n}\n\nfunction ChatMessage({ message }: { message: ConversationMessage }) {\n const isUser = message.role === \"user\";\n return (\n

\n \n {message.content}\n

\n \n );\n}\n\nexport default function App() {\n const planId = window.__PLAN_ID__;\n const [planData, setPlanData] = useState(null);\n const [messages, setMessages] = useState([]);\n const [loading, setLoading] = useState(true);\n const [error, setError] = useState(null);\n const [input, setInput] = useState(\"\");\n const [sending, setSending] = useState(false);\n const [confirming, setConfirming] = useState(false);\n const messagesEndRef = useRef(null);\n\n useEffect(() => {\n if (planId) {\n fetchPlan();\n fetchMessages();\n } else {\n setLoading(false);\n }\n }, [planId]);\n\n useEffect(() => {\n messagesEndRef.current?.scrollIntoView({ behavior: \"smooth\" });\n }, [messages]);\n\n async function fetchPlan() {\n try {\n const res = await fetch(`/api/plan/${planId}`);\n if (!res.ok) throw new Error(\"Plan not found\");\n const data = await res.json();\n setPlanData(data);\n } catch (e: any) {\n setError(e.message);\n } finally {\n setLoading(false);\n }\n }\n\n async function fetchMessages() {\n try {\n const res = await fetch(`/api/chat/${planId}`);\n const data = await res.json();\n setMessages(data.messages || []);\n } catch (e) {\n console.error(\"Failed to fetch messages:\", e);\n }\n }\n\n async function sendMessage(e: React.FormEvent) {\n e.preventDefault();\n if (!input.trim() || sending) return;\n\n const userMessage = input.trim();\n setInput(\"\");\n setSending(true);\n setMessages((prev) => [...prev, { id: Date.now(), meal_plan_id: planId!, role: \"user\", content: userMessage, created_at: new Date().toISOString() }]);\n\n try {\n const res = await fetch(\"/api/chat\", {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({ planId, message: userMessage }),\n });\n const data = await res.json();\n setMessages((prev) => [\n ...prev,\n { id: Date.now() + 1, meal_plan_id: planId!, role: \"assistant\", content: data.response, created_at: new Date().toISOString() },\n ]);\n if (data.plan) setPlanData((prev) => (prev ? { ...prev, plan: data.plan } : prev));\n } catch (e) {\n setMessages((prev) => [\n ...prev,\n { id: Date.now() + 1, meal_plan_id: planId!, role: \"assistant\", content: \"Sorry, there was an error. Please try again.\", created_at: new Date().toISOString() },\n ]);\n } finally {\n setSending(false);\n }\n }\n\n async function confirmPlan() {\n if (confirming) return;\n setConfirming(true);\n try {\n const res = await fetch(\"/api/confirm\", {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({ planId }),\n });\n const data = await res.json();\n alert(data.message);\n fetchPlan();\n } catch (e: any) {\n alert(\"Failed to confirm plan: \" + e.message);\n } finally {\n setConfirming(false);\n }\n }\n\n // Home page - no plan selected\n if (!planId) {\n return (\n

Forkcast

Weekly meal planning for your family

\n Check your email for this week's meal plan, or use the API to generate one.\n

API Endpoints:

\n POST /api/init - Initialize database\n POST /api/trigger-email - Send test email\n GET /api/recipes - List recipes\n

\n );\n }\n\n if (loading) {\n return (\n

Loading plan...

\n );\n }\n\n if (error) {\n return (\n

Error: {error}

\n );\n }\n\n if (!planData) {\n return (\n

Plan not found

\n );\n }\n\n const { plan, saturdayMeal1, saturdayMeal2, wednesdayMeal, babyMeal1, babyMeal2 } = planData;\n const isConfirmed = plan?.status === \"confirmed\";\n\n return (\n

\n {/* Header */}\n

Meal Plan

\n Week of{\" \"}\n {new Date(plan.week_of).toLocaleDateString(\"en-GB\", {\n weekday: \"long\",\n day: \"numeric\",\n month: \"long\",\n })}\n

\n \n {plan.status}\n \n

\n\n {/* Saturday Meals */}\n

Saturday Cooking

12 portions total

\n \n \n

\n\n {/* Wednesday */}\n

Wednesday

\n \n

\n\n {/* Baby Meals */}\n

Baby Meals

Weekend finger foods

\n \n \n

\n\n {/* Grocery List */}\n

Grocery List

{plan.grocery_list?.length || 0} items

\n {plan.grocery_list?.map((item, i) => (\n

\n {item}\n

\n ))}\n

\n\n {/* Chat (only if not confirmed) */}\n {!isConfirmed && (\n

Chat with Assistant

\n {messages.length === 0 && (\n

\n Ask about recipes, request swaps, or note ingredients you already have.\n

\n )}\n {messages.map((msg) => (\n \n ))}\n

\n )}\n\n {/* Confirm Button */}\n {!isConfirmed && (\n

\n \n {confirming ? \"Confirming...\" : \"Accept Plan & Add to Todoist\"}\n \n

\n )}\n\n {isConfirmed && (\n

Plan confirmed! Groceries added to Todoist.

\n )}\n

\n );\n}\n","deleted","label",[169,170,151],"frontend","components","permalink","https://www.val.town/x/maggieappleton/Forkcast/code/frontend/components/App.tsx","extension","actionData","errors"]