diff --git a/components/docs-chat/chat-input.tsx b/components/docs-chat/chat-input.tsx new file mode 100644 index 0000000..013d37f --- /dev/null +++ b/components/docs-chat/chat-input.tsx @@ -0,0 +1,98 @@ +'use client' + +import { useRef, useState } from 'react' +import { Send } from 'lucide-react' + +import { cn } from '@/lib/utils' + +interface ChatInputProps { + onSend: (message: string) => void + disabled?: boolean + placeholder?: string +} + +/** + * Chat input component with textarea, send button, Enter/Shift+Enter support + * + * - Enter: send message + * - Shift+Enter: new line + * - Auto-resize textarea + */ +export function ChatInput({ + onSend, + disabled = false, + placeholder = 'Stel een vraag...', +}: ChatInputProps) { + const [value, setValue] = useState('') + const textareaRef = useRef(null) + + const handleSubmit = () => { + const trimmed = value.trim() + if (!trimmed || disabled) return + + onSend(trimmed) + setValue('') + + // Reset textarea height + if (textareaRef.current) { + textareaRef.current.style.height = 'auto' + } + } + + const handleKeyDown = (e: React.KeyboardEvent) => { + if (e.key === 'Enter' && !e.shiftKey) { + e.preventDefault() + handleSubmit() + } + } + + const handleChange = (e: React.ChangeEvent) => { + setValue(e.target.value) + + // Auto-resize + const textarea = e.target + textarea.style.height = 'auto' + textarea.style.height = `${Math.min(textarea.scrollHeight, 120)}px` + } + + const canSend = value.trim().length > 0 && !disabled + + return ( +
+
+