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, loading, }: { sendMessage: (message: string) => void; loading: boolean; }) => { 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 (
{ if (loading) return; e.preventDefault(); sendMessage(message); setMessage(''); }} onKeyDown={(e) => { if (e.key === 'Enter' && !e.shiftKey && !loading) { e.preventDefault(); sendMessage(message); setMessage(''); } }} className={cn( 'bg-light-primary dark:bg-dark-primary p-4 flex items-center overflow-hidden border border-light-300 dark:border-dark-200', 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 dark:placeholder:text-white/50 placeholder:text-sm text-sm dark: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;