ai integration
This commit is contained in:
169
src/app/page.tsx
169
src/app/page.tsx
@@ -25,6 +25,10 @@ export default function HomePage() {
|
||||
const [end, setEnd] = useState('')
|
||||
const [allDay, setAllDay] = useState(false)
|
||||
|
||||
// AI
|
||||
const [aiPrompt, setAiPrompt] = useState('')
|
||||
const [aiLoading, setAiLoading] = useState(false)
|
||||
|
||||
useEffect(() => {
|
||||
(async () => {
|
||||
const stored = await getAllEvents()
|
||||
@@ -128,6 +132,64 @@ export default function HomePage() {
|
||||
}
|
||||
}
|
||||
|
||||
// --- AI CREATE ---
|
||||
const handleAiCreate = async () => {
|
||||
if (!aiPrompt.trim()) return
|
||||
setAiLoading(true)
|
||||
try {
|
||||
const res = await fetch('/api/ai-event', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ prompt: aiPrompt })
|
||||
})
|
||||
const data = await res.json()
|
||||
if (data.title) {
|
||||
setTitle(data.title || '')
|
||||
setDescription(data.description || '')
|
||||
setLocation(data.location || '')
|
||||
setUrl(data.url || '')
|
||||
setStart(data.start || '')
|
||||
setEnd(data.end || '')
|
||||
setAllDay(data.allDay || false)
|
||||
setEditingId(null)
|
||||
setDialogOpen(true)
|
||||
} else {
|
||||
alert('AI could not parse event.')
|
||||
}
|
||||
} catch (err) {
|
||||
console.error(err)
|
||||
alert('AI request error')
|
||||
} finally {
|
||||
setAiLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
const handleAiSummarize = async () => {
|
||||
if (events.length === 0) {
|
||||
alert("No events to summarize")
|
||||
return
|
||||
}
|
||||
setAiLoading(true)
|
||||
try {
|
||||
const res = await fetch('/api/ai-summary', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ events })
|
||||
})
|
||||
const data = await res.json()
|
||||
if (data.summary) {
|
||||
alert(data.summary)
|
||||
} else {
|
||||
alert('No summary generated.')
|
||||
}
|
||||
} catch (err) {
|
||||
console.error(err)
|
||||
alert('Error summarizing events')
|
||||
} finally {
|
||||
setAiLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
onDragOver={handleDragOver}
|
||||
@@ -136,6 +198,21 @@ export default function HomePage() {
|
||||
className={`p-4 min-h-[80vh] rounded border-2 border-dashed transition ${isDragOver ? 'border-blue-500 bg-blue-50' : 'border-gray-300'
|
||||
}`}
|
||||
>
|
||||
<div className="flex gap-2 mb-4">
|
||||
<input
|
||||
className="flex-1 border p-2 rounded"
|
||||
placeholder='Describe an event for AI to create'
|
||||
value={aiPrompt}
|
||||
onChange={e => setAiPrompt(e.target.value)}
|
||||
/>
|
||||
<Button onClick={handleAiCreate} disabled={aiLoading}>
|
||||
{aiLoading ? 'Thinking...' : 'AI Create'}
|
||||
</Button>
|
||||
<Button variant="secondary" onClick={handleAiSummarize} disabled={aiLoading}>
|
||||
AI Summarize
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div className="flex gap-2 flex-wrap mb-4">
|
||||
<Button onClick={() => setDialogOpen(true)}>Add Event</Button>
|
||||
{events.length > 0 && (
|
||||
@@ -163,16 +240,11 @@ export default function HomePage() {
|
||||
</label>
|
||||
</div>
|
||||
|
||||
{events.length === 0 && (
|
||||
<p className="text-gray-500 italic">No events yet. Add or drop an .ics file here.</p>
|
||||
)}
|
||||
{events.length === 0 && <p className="text-gray-500 italic">No events yet.</p>}
|
||||
|
||||
<ul className="mt-4 space-y-2">
|
||||
<ul className="space-y-2">
|
||||
{events.map(ev => (
|
||||
<li
|
||||
key={ev.id}
|
||||
className="border p-2 rounded bg-white shadow-sm flex justify-between items-center"
|
||||
>
|
||||
<li key={ev.id} className="border p-2 rounded bg-white shadow-sm flex justify-between">
|
||||
<div>
|
||||
<strong>{ev.title}</strong> — {ev.allDay
|
||||
? ev.start.split('T')[0]
|
||||
@@ -180,80 +252,43 @@ export default function HomePage() {
|
||||
{ev.location && <div className="text-sm text-gray-500">{ev.location}</div>}
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
<Button
|
||||
size="sm"
|
||||
onClick={() => {
|
||||
setTitle(ev.title)
|
||||
setDescription(ev.description || '')
|
||||
setLocation(ev.location || '')
|
||||
setUrl(ev.url || '')
|
||||
setStart(ev.start)
|
||||
setEnd(ev.end || '')
|
||||
setAllDay(ev.allDay || false)
|
||||
setEditingId(ev.id)
|
||||
setDialogOpen(true)
|
||||
}}
|
||||
>
|
||||
Edit
|
||||
</Button>
|
||||
<Button variant="secondary" size="sm" onClick={() => handleDelete(ev.id)}>
|
||||
Delete
|
||||
</Button>
|
||||
<Button size="sm" onClick={() => {
|
||||
setTitle(ev.title)
|
||||
setDescription(ev.description || '')
|
||||
setLocation(ev.location || '')
|
||||
setUrl(ev.url || '')
|
||||
setStart(ev.start)
|
||||
setEnd(ev.end || '')
|
||||
setAllDay(ev.allDay || false)
|
||||
setEditingId(ev.id)
|
||||
setDialogOpen(true)
|
||||
}}>Edit</Button>
|
||||
<Button variant="secondary" size="sm" onClick={() => handleDelete(ev.id)}>Delete</Button>
|
||||
</div>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
|
||||
<Dialog
|
||||
open={dialogOpen}
|
||||
onOpenChange={val => {
|
||||
if (!val) resetForm()
|
||||
setDialogOpen(val)
|
||||
}}
|
||||
>
|
||||
<DialogContent className="space-y-2">
|
||||
<Dialog open={dialogOpen} onOpenChange={val => { if (!val) resetForm(); setDialogOpen(val) }}>
|
||||
<DialogContent>
|
||||
<DialogHeader>
|
||||
<DialogTitle>{editingId ? 'Edit Event' : 'Add Event'}</DialogTitle>
|
||||
</DialogHeader>
|
||||
<Input placeholder="Title" value={title} onChange={e => setTitle(e.target.value)} />
|
||||
<textarea
|
||||
className="border p-2 rounded w-full"
|
||||
placeholder="Description"
|
||||
value={description}
|
||||
onChange={e => setDescription(e.target.value)}
|
||||
></textarea>
|
||||
<textarea className="border p-2 rounded w-full" placeholder="Description" value={description} onChange={e => setDescription(e.target.value)}></textarea>
|
||||
<Input placeholder="Location" value={location} onChange={e => setLocation(e.target.value)} />
|
||||
<Input placeholder="URL" value={url} onChange={e => setUrl(e.target.value)} />
|
||||
<label className="flex items-center gap-2 mt-2">
|
||||
<input type="checkbox" checked={allDay} onChange={e => setAllDay(e.target.checked)} />
|
||||
All day event
|
||||
</label>
|
||||
|
||||
{!allDay && (
|
||||
<>
|
||||
<label>Start date & time</label>
|
||||
<Input type="datetime-local" value={start} onChange={e => setStart(e.target.value)} />
|
||||
<label>End date & time</label>
|
||||
<Input type="datetime-local" value={end} onChange={e => setEnd(e.target.value)} />
|
||||
</>
|
||||
)}
|
||||
{allDay && (
|
||||
<>
|
||||
<label>Start date</label>
|
||||
<Input
|
||||
type="date"
|
||||
value={start ? start.split('T')[0] : ''}
|
||||
onChange={e => setStart(e.target.value)}
|
||||
/>
|
||||
<label>End date</label>
|
||||
<Input
|
||||
type="date"
|
||||
value={end ? end.split('T')[0] : ''}
|
||||
onChange={e => setEnd(e.target.value)}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
|
||||
{!allDay ? <>
|
||||
<Input type="datetime-local" value={start} onChange={e => setStart(e.target.value)} />
|
||||
<Input type="datetime-local" value={end} onChange={e => setEnd(e.target.value)} />
|
||||
</> : <>
|
||||
<Input type="date" value={start ? start.split('T')[0] : ''} onChange={e => setStart(e.target.value)} />
|
||||
<Input type="date" value={end ? end.split('T')[0] : ''} onChange={e => setEnd(e.target.value)} />
|
||||
</>}
|
||||
<DialogFooter>
|
||||
<Button onClick={handleSave}>{editingId ? 'Update' : 'Save'}</Button>
|
||||
</DialogFooter>
|
||||
|
||||
Reference in New Issue
Block a user