diff --git a/frontend/src/components/flowpilot/FlowPilotMessageBar.tsx b/frontend/src/components/flowpilot/FlowPilotMessageBar.tsx new file mode 100644 index 00000000..efe2e480 --- /dev/null +++ b/frontend/src/components/flowpilot/FlowPilotMessageBar.tsx @@ -0,0 +1,75 @@ +import { useState, useRef, useCallback } from 'react' +import { Send } from 'lucide-react' +import { cn } from '@/lib/utils' +import type { StepResponseRequest } from '@/types/ai-session' + +interface FlowPilotMessageBarProps { + onRespond: (response: StepResponseRequest) => void + disabled?: boolean + isProcessing?: boolean +} + +export function FlowPilotMessageBar({ onRespond, disabled = false, isProcessing = false }: FlowPilotMessageBarProps) { + const [message, setMessage] = useState('') + const textareaRef = useRef(null) + + const isDisabled = disabled || isProcessing + + const handleSubmit = useCallback(() => { + const trimmed = message.trim() + if (!trimmed || isDisabled) return + onRespond({ free_text_input: trimmed }) + setMessage('') + if (textareaRef.current) { + textareaRef.current.style.height = 'auto' + } + }, [message, isDisabled, onRespond]) + + const handleKeyDown = useCallback((e: React.KeyboardEvent) => { + if (e.key === 'Enter' && !e.shiftKey) { + e.preventDefault() + handleSubmit() + } + }, [handleSubmit]) + + const handleInput = useCallback((e: React.ChangeEvent) => { + setMessage(e.target.value) + const textarea = e.target + textarea.style.height = 'auto' + textarea.style.height = `${Math.min(textarea.scrollHeight, 120)}px` + }, []) + + return ( +
+
+