import { cn } from '@/lib/utils'; import { ArrowUp } from 'lucide-react'; import { useEffect, useState } from 'react'; import TextareaAutosize from 'react-textarea-autosize'; import { Attach, CopilotToggle } from './MessageInputActions'; const MessageInput = ({ sendMessage, }: { sendMessage: (message: string) => void; }) => { const [copilotEnabled, setCopilotEnabled] = useState(false); const [message, setMessage] = useState(''); const [textareaRows, setTextareaRows] = useState(1); const [mode, setMode] = useState<'multi' | 'single'>('single'); useEffect(() => { if (textareaRows >= 2 && message && mode === 'single') { setMode('multi'); } else if (!message && mode === 'multi') { setMode('single'); } }, [textareaRows, mode, message]); return (
{ e.preventDefault(); sendMessage(message); setMessage(''); }} onKeyDown={(e) => { if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); sendMessage(message); setMessage(''); } }} className={cn( 'bg-[#111111] p-4 flex items-center overflow-hidden border border-[#1C1C1C]', mode === 'multi' ? 'flex-col rounded-lg' : 'flex-row rounded-full', )} > {mode === 'single' && } setMessage(e.target.value)} onHeightChange={(height, props) => { setTextareaRows(Math.ceil(height / props.rowHeight)); }} className="transition bg-transparent placeholder:text-white/50 placeholder:text-sm text-sm text-white resize-none focus:outline-none w-full px-2 max-h-24 lg:max-h-36 xl:max-h-48 flex-grow flex-shrink" placeholder="Ask a follow-up" /> {mode === 'single' && (
)} {mode === 'multi' && (
)} ); }; export default MessageInput;