77 lines
2.3 KiB
TypeScript
77 lines
2.3 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 { debugProps } from '@/lib/debug'
|
|
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" {...debugProps('user-chat-input', 'UserChatInput', 'components/ideas/user-chat-input.tsx')}>
|
|
<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" {...debugProps('user-chat-input', 'UserChatInput', 'components/ideas/user-chat-input.tsx')}>
|
|
<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}
|
|
data-debug-id="user-chat-input__textarea"
|
|
/>
|
|
<div className="flex justify-end">
|
|
<Button
|
|
size="sm"
|
|
disabled={pending || !text.trim()}
|
|
onClick={submit}
|
|
data-debug-id="user-chat-input__submit"
|
|
>
|
|
<Send className="size-4" />
|
|
{pending ? 'Bezig…' : 'Verzend'}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|