Madhura68
e816ccc77a
Voltooit de UI-laag van PLAN_CHAT (gebruikersvragen over plan, Claude antwoordt async). Backend (UserQuestion model, createUserQuestionAction, SSE-handling, server-side prop-passing) was al aanwezig — alleen de UI-koppeling ontbrak waardoor userQuestions ongebruikt bleven. - IdeaDetailLayout geeft userQuestions/planMd/ideaId/isDemo door aan IdeaTimeline en telt user-questions mee in de tab-count - IdeaTimeline mergt user-questions chronologisch met logs+questions, rendert ze met MessageCircle-icoon en pending/answered status, en toont onderaan UserChatInput wanneer plan_md aanwezig is - UserChatInput nieuw component met textarea + verzend-knop dat createUserQuestionAction aanroept en op success router.refresh() triggert zodat SSE de pending-state oppikt - useNotificationsRealtime: router toegevoegd aan useEffect-deps zodat router.refresh() op user_question/idea-job events werkt zonder stale-closure waarschuwing Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
74 lines
2 KiB
TypeScript
74 lines
2 KiB
TypeScript
'use client'
|
|
|
|
import { useState, useTransition } from 'react'
|
|
import { useRouter } from 'next/navigation'
|
|
import { Send } from 'lucide-react'
|
|
import { toast } from 'sonner'
|
|
|
|
import { Button } from '@/components/ui/button'
|
|
import { Textarea } from '@/components/ui/textarea'
|
|
import { createUserQuestionAction } from '@/actions/user-questions'
|
|
|
|
interface Props {
|
|
ideaId: string
|
|
isDemo?: boolean
|
|
}
|
|
|
|
export function UserChatInput({ ideaId, isDemo = false }: Props) {
|
|
const router = useRouter()
|
|
const [text, setText] = useState('')
|
|
const [pending, startTransition] = useTransition()
|
|
|
|
function submit() {
|
|
const trimmed = text.trim()
|
|
if (!trimmed) {
|
|
toast.error('Vraag mag niet leeg zijn')
|
|
return
|
|
}
|
|
startTransition(async () => {
|
|
const r = await createUserQuestionAction(ideaId, trimmed)
|
|
if ('error' in r) {
|
|
toast.error(r.error)
|
|
return
|
|
}
|
|
toast.success('Vraag verzonden — Claude gaat ermee aan de slag.')
|
|
setText('')
|
|
router.refresh()
|
|
})
|
|
}
|
|
|
|
if (isDemo) {
|
|
return (
|
|
<div className="rounded-md border border-input bg-surface-container p-3">
|
|
<p className="text-xs text-muted-foreground italic">
|
|
Demo-modus: vragen stellen is niet beschikbaar.
|
|
</p>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<div className="space-y-2 rounded-md border border-input bg-surface-container p-3">
|
|
<label className="text-xs font-medium text-muted-foreground">
|
|
Stel een vraag over dit plan
|
|
</label>
|
|
<Textarea
|
|
value={text}
|
|
onChange={(e) => setText(e.target.value)}
|
|
rows={3}
|
|
placeholder="Bijv. Waarom is gekozen voor X in plaats van Y?"
|
|
disabled={pending}
|
|
/>
|
|
<div className="flex justify-end">
|
|
<Button
|
|
size="sm"
|
|
disabled={pending || !text.trim()}
|
|
onClick={submit}
|
|
>
|
|
<Send className="size-4" />
|
|
{pending ? 'Bezig…' : 'Verzend'}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|