import React, { useState, useRef } from "react"; export default function App() { const [topic, setTopic] = useState(""); const [inputTopic, setInputTopic] = useState(""); const [generating, setGenerating] = useState(false); const [error, setError] = useState(null); const [agenda, setAgenda] = useSharedStorage("meeting:agenda", null); const [editingPoint, setEditingPoint] = useState(null); // index or null const editInputRef = useRef(null); // Smart generate agenda using AI const { ask, loading: aiLoading } = useAI(); const quickGenerate = async (query) => { setGenerating(true); setError(null); try { // Calls prompt for a structured, focused 3-point agenda (bulleted list/plain text array) const result = await ask( `For a meeting about "${query}", generate a focused 3-point agenda with clear, outcome-driven bullet points that keep discussion on track. Output as a plain text numbered list ONLY (no extra text, no explanations), for example: 1. Review last week's actions 2. Discuss blockers 3. Plan next steps. Limit each point to one sentence. Use neutral, inclusive language.` ); // Parse agenda points const lines = result .split(/\n|\r/) .map(l => l.trim()) .filter(Boolean) .map(l => l.replace(/^\d+\.\s*/, "")); setAgenda({ topic: query, points: lines.slice(0, 3).map((text, i) => ({ text, checked: false })), createdAt: new Date().toISOString(), }); setTopic(query); } catch (e) { setError( "Couldn't generate agenda. Try rewording your topic or retry later." ); } finally { setGenerating(false); } }; const handleCreate = (e) => { e.preventDefault(); if (!inputTopic.trim()) return; quickGenerate(inputTopic.trim()); }; const handleCheck = idx => { if (!agenda) return; setAgenda(prev => ({ ...prev, points: prev.points.map((pt, i) => i === idx ? { ...pt, checked: !pt.checked } : pt ), })); }; const handleEdit = (idx) => { setEditingPoint(idx); setTimeout(() => { editInputRef.current?.focus(); }, 100); }; const handleEditChange = (e, idx) => { const val = e.target.value; setAgenda(prev => ({ ...prev, points: prev.points.map((pt, i) => i === idx ? { ...pt, text: val } : pt) })); }; const handleEditBlur = () => setEditingPoint(null); const handleEditKey = (e) => { if (e.key === "Enter") setEditingPoint(null); }; const handleReset = () => { setAgenda(null); setTopic(""); setInputTopic(""); setError(null); }; // Save/Download (text) const download = useDownload(); const handleDownload = () => { if (!agenda) return; const content = `Meeting Topic: ${agenda.topic}\nAgenda:\n` + agenda.points.map((pt,i) => `${i+1}. ${pt.text}${pt.checked ? " [done]" : ""}`).join("\n"); download(`Agenda - ${agenda.topic.slice(0,32)}.txt`, content, "text/plain"); }; return (

One-Minute Meeting Agenda Builder

Instantly create, edit, and check off a focused 3-point agenda for any meeting. Helps reduce wasted time and keeps discussion on target.

{!agenda && ( )} {agenda && (

Topic

{agenda.topic}

Agenda Points

{editingPoint === idx ? ( handleEditChange(e, idx)} onBlur={handleEditBlur} onKeyDown={handleEditKey} className="flex-1 bg-card border border-border rounded px-2 py-1 text-foreground" maxLength={60} aria-label="Edit agenda point" /> ) : ( handleEdit(idx)} tabIndex={0} onKeyDown={e=>{if(e.key==='Enter'){handleEdit(idx)}}} role="button" aria-label="Edit agenda point" > {pt.text} )}

Tip: Tap any point to edit. Check off during your meeting!

)}

); }