Text here
import React, { useState } from ‘react’; import { Input } from ‘@/components/ui/input’; import { Label } from ‘@/components/ui/label’; import { Button } from ‘@/components/ui/button’; import { Card, CardContent, CardHeader, CardTitle } from ‘@/components/ui/card’; const CharityChatbotForm = () => { const [formData, setFormData] = useState({ businessName: ”, websiteUrl: ”, sector: ”, contactEmail: ”, description: ” }); const [uploadedFiles, setUploadedFiles] = useState([]); const handleInputChange = (e) => { const { name, value } = e.target; setFormData(prevState => ({ …prevState, [name]: value })); }; const handleFileUpload = (e) => { const files = Array.from(e.target.files); const allowedTypes = [ ‘application/msword’, ‘application/vnd.openxmlformats-officedocument.wordprocessingml.document’, // .docx ‘application/vnd.ms-excel’, ‘application/vnd.openxmlformats-officedocument.spreadsheetml.sheet’, // .xlsx ‘application/pdf’, ‘text/plain’ ]; const validFiles = files.filter(file => allowedTypes.includes(file.type)); setUploadedFiles(prevFiles => [ …prevFiles, …validFiles ]); }; const removeFile = (fileToRemove) => { setUploadedFiles(prevFiles => prevFiles.filter(file => file !== fileToRemove) ); }; const handleSubmit = (e) => { e.preventDefault(); // Create FormData object to send files and form data const submissionData = new FormData(); // Add form fields Object.entries(formData).forEach(([key, value]) => { submissionData.append(key, value); }); // Add files uploadedFiles.forEach(file => { submissionData.append(‘files’, file); }); // TODO: Implement actual submission logic (API call) console.log(‘Submission Data:’, submissionData); alert(‘Form submitted! We will process your chatbot training request.’); }; const getFileIcon = (file) => { const fileType = file.type; if (fileType.includes(‘word’)) return ‘📄’; if (fileType.includes(‘excel’)) return ‘📊’; if (fileType === ‘application/pdf’) return ‘📕’; return ‘📁’; }; return (