Function InputArea

frontend/src/components/Chat/InputArea.tsx:6–100

()

import Button from '../Common/Button';

const InputArea: React.FC = () => {
  const [message, setMessage] = useState('');
  const { sendMessage, isLoading } = useChatStore();
  const { currentPipeline } = usePipelineStore();

  const quickActions = [
    {
      label: 'Add URL',
      prompt: 'I want to add a new URL to scrape',
      icon: '🔗'
    },
    {
      label: 'Define Schema',
      prompt: 'Help me define the data schema for extraction',
      icon: '📋'
    },
    {
      label: 'Generate Code',
      prompt: 'Generate the Python code for my scraping pipeline',
      icon: '💻'
    },
    {
      label: 'Run Pipeline',
      prompt: 'Execute the scraping pipeline',
      icon: '▶️'
    }
  ];

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    if (message.trim() && !isLoading && currentPipeline) {
      sendMessage(message, currentPipeline.id);
      setMessage('');
    }
  };

  const handleKeyDown = (e: KeyboardEvent<HTMLTextAreaElement>) => {
    if (e.key === 'Enter' && !e.shiftKey) {
      e.preventDefault();
      handleSubmit(e);
    }
  };

  const handleQuickAction = (action: typeof quickActions[0]) => {
    if (currentPipeline) {
      if (action.label === 'Run Pipeline') {
        // Handle Run Pipeline differently - actually execute it
        usePipelineStore.getState().runPipeline(currentPipeline.id);
      } else {
        sendMessage(action.prompt, currentPipeline.id);
      }
    }
  };

  return (
    <div className="border-t border-border p-4">
      <div className="flex flex-wrap gap-2 mb-3">
        {quickActions.map((action) => (