import { ArrowRight } from 'lucide-react'; import { useEffect, useRef, useState } from 'react'; import TextareaAutosize from 'react-textarea-autosize'; import CopilotToggle from './MessageInputActions/Copilot'; import Focus from './MessageInputActions/Focus'; import Optimization from './MessageInputActions/Optimization'; const EmptyChatMessageInput = ({ sendMessage, focusMode, setFocusMode, optimizationMode, setOptimizationMode, }: { sendMessage: (message: string) => void; focusMode: string; setFocusMode: (mode: string) => void; optimizationMode: string; setOptimizationMode: (mode: string) => void; }) => { const [copilotEnabled, setCopilotEnabled] = useState(false); const [message, setMessage] = useState(''); const inputRef = useRef(null); useEffect(() => { const handleKeyDown = (e: KeyboardEvent) => { const activeElement = document.activeElement; const isInputFocused = activeElement?.tagName === 'INPUT' || activeElement?.tagName === 'TEXTAREA' || activeElement?.hasAttribute('contenteditable'); if (e.key === '/' && !isInputFocused) { e.preventDefault(); inputRef.current?.focus(); } }; document.addEventListener('keydown', handleKeyDown); return () => { document.removeEventListener('keydown', handleKeyDown); }; }, []); return (
{ e.preventDefault(); sendMessage(message); setMessage(''); }} onKeyDown={(e) => { if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); sendMessage(message); setMessage(''); } }} className="w-full" >
setMessage(e.target.value)} minRows={2} className="bg-transparent placeholder:text-black/50 dark:placeholder:text-white/50 text-sm text-black dark:text-white resize-none focus:outline-none w-full max-h-24 lg:max-h-36 xl:max-h-48" placeholder="Ask anything..." />
); }; export default EmptyChatMessageInput;