function MainComponent() { const [selectedProject, setSelectedProject] = React.useState(null); const [taskNotes, setTaskNotes] = React.useState({}); const [question, setQuestion] = React.useState(''); const [imageData, setImageData] = React.useState(''); const [questionAnswer, setQuestionAnswer] = React.useState(''); const pipelineProjects = [ { name: 'Sales', percentageComplete: 25, tasks: [ { name: 'Lead Qualification', notes: '' }, { name: 'Initial Meeting', notes: '' }, { name: 'Proposal Submission', notes: '' } ] }, { name: 'Implementation', percentageComplete: 50, tasks: [ { name: 'Define Project Scope', notes: '' }, { name: 'Resource Allocation', notes: '' }, { name: 'Timeline Planning', notes: '' } ] }, { name: 'Build', percentageComplete: 75, tasks: [ { name: 'Backend Development', notes: '' }, { name: 'Frontend Development', notes: '' }, { name: 'Testing', notes: '' } ] }, { name: 'Enrollment', percentageComplete: 100, tasks: [ { name: 'Final QA', notes: '' }, { name: 'User Training', notes: '' }, { name: 'Project Handover', notes: '' } ] } ]; React.useEffect(()=>{ if (question && imageData) { fetch('/integrations/gpt-vision/', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ model: 'gpt-4-vision-preview', messages: [ { "role": "user", "content": [ { "type": "text", "text": question }, { "type": "image_url", "image_url": imageData } ] } ] }) }).then((response)=>response.json()).then((data)=>{ const answer = data.choices[0].message.content.text; setQuestionAnswer(answer); }).catch(console.error); } }, [ question, imageData ]); const handleProjectClick = (project)=>{ setSelectedProject(selectedProject === project.name ? null : project.name); setTaskNotes({ ...taskNotes, [project.name]: project.tasks.map((task)=>task.notes) }); }; const handleTaskNoteChange = (projectName, taskName, value)=>{ setTaskNotes({ ...taskNotes, [projectName]: taskNotes[projectName].map((task)=>task.name === taskName ? { ...task, notes: value } : task) }); }; const projectProgress = pipelineProjects.map((project)=>/*#__PURE__*/ React.createElement("div", { key: project.name, className: "flex flex-col space-y-2 md:flex-row md:items-center md:space-y-0 md:space-x-2", __source: { fileName: "", lineNumber: 65, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: `flex-1`, __source: { fileName: "", lineNumber: 66, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { onClick: ()=>handleProjectClick(project), className: "text-xs font-medium text-[#5D5D5D] cursor-pointer", __source: { fileName: "", lineNumber: 67, columnNumber: 9 }, __self: this }, project.name), /*#__PURE__*/ React.createElement("div", { className: "w-full bg-[#E0E0E0] h-[6px] rounded-full overflow-hidden", __source: { fileName: "", lineNumber: 73, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: `bg-[#4C9AFF] h-[6px] rounded-full transition-all duration-300`, style: { width: `${project.percentageComplete}%` }, __source: { fileName: "", lineNumber: 74, columnNumber: 11 }, __self: this })), selectedProject === project.name && /*#__PURE__*/ React.createElement("div", { className: "mt-2 space-y-2", __source: { fileName: "", lineNumber: 80, columnNumber: 11 }, __self: this }, project.tasks.map((task, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "space-y-1", __source: { fileName: "", lineNumber: 82, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-xs font-medium text-[#5D5D5D]", __source: { fileName: "", lineNumber: 83, columnNumber: 17 }, __self: this }, task.name), /*#__PURE__*/ React.createElement("textarea", { className: "w-full p-2 text-xs font-medium text-[#5D5D5D] border rounded-md", placeholder: "Notes", name: `${task.name.toLowerCase().replaceAll(' ', '-')}-notes`, value: task.notes, onChange: (e)=>handleTaskNoteChange(project.name, task.name, e.target.value), __source: { fileName: "", lineNumber: 84, columnNumber: 17 }, __self: this }))))))); return /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-4xl mx-auto p-4 space-y-6", __source: { fileName: "", lineNumber: 100, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "font-medium text-2xl text-center text-[#333333]", __source: { fileName: "", lineNumber: 101, columnNumber: 7 }, __self: this }, "Project Pipeline"), /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 102, columnNumber: 7 }, __self: this }, projectProgress), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 105, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("input", { className: "w-full p-2 text-xs font-medium text-[#5D5D5D] border rounded-md mb-2", type: "text", name: "question", placeholder: "Ask a question about an image", value: question, onChange: (e)=>setQuestion(e.target.value), __source: { fileName: "", lineNumber: 106, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("input", { className: "w-full p-2 text-xs font-medium text-[#5D5D5D] border rounded-md", type: "file", name: "imageUpload", accept: "image/*", onChange: (e)=>setImageData(e.target.files[0]), __source: { fileName: "", lineNumber: 114, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "mt-2 text-xs font-medium text-[#5D5D5D]", __source: { fileName: "", lineNumber: 121, columnNumber: 9 }, __self: this }, questionAnswer))); }