Function WorkflowPanel

frontend/src/components/WorkflowPanel.jsx:4–182

({ currentWorkflow, isLoading })

import { FileText, CheckCircle2, Circle, Loader2, Presentation, Image as ImageIcon } from 'lucide-react'

const WorkflowPanel = ({ currentWorkflow, isLoading }) => {
  const [workflow, setWorkflow] = useState(null)

  useEffect(() => {
    if (currentWorkflow) {
      setWorkflow(currentWorkflow)
    }
  }, [currentWorkflow])

  // Default workflow stages
  const defaultStages = [
    { id: 'RAG', name: 'RAG', status: 'pending', description: 'Index documents and run RAG queries ...' },
    { id: 'Summary', name: 'Summary', status: 'pending', description: 'Summarize key content from RAG results ...' },
    { id: 'Plan', name: 'Plan', status: 'pending', description: 'Plan the generation ...' },
    { id: 'Generate', name: 'Generate', status: 'pending', description: 'Generate ...' }
  ]

  const stages = workflow?.stages || defaultStages

  const getStageIcon = (status) => {
    switch (status) {
      case 'completed':
        return <CheckCircle2 className="w-5 h-5 text-green-600 dark:text-green-400" />
      case 'active':
        return <Loader2 className="w-5 h-5 text-blue-600 dark:text-blue-400 animate-spin" />
      default:
        return <Circle className="w-5 h-5 text-gray-300 dark:text-gray-600" />
    }
  }

  return (
    <div className="h-full flex flex-col bg-white dark:bg-gray-900 rounded-2xl shadow-xl overflow-hidden">
      {/* Header - Fixed height for alignment */}
      <div className="flex items-center justify-between px-6 border-b border-gray-100 dark:border-gray-800 bg-white dark:bg-gray-900 h-[72px] flex-shrink-0">
        <div className="flex items-center gap-2">
          {isLoading ? (
            <Loader2 className="w-5 h-5 text-purple-600 dark:text-purple-400 animate-spin" />
          ) : (
            <Presentation className="w-5 h-5 text-purple-600 dark:text-purple-400" />
          )}
          <h2 className="text-lg font-semibold text-gray-900 dark:text-gray-100">
            Workflow Status
          </h2>
        </div>
        <span className={`text-xs font-medium px-3 py-1 rounded-full ${
          isLoading 
            ? 'bg-purple-100 text-purple-700 dark:bg-purple-900/30 dark:text-purple-300' 
            : 'bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-300'
        }`}>
          {isLoading ? 'Processing' : 'Ready'}
        </span>
      </div>

      {/* Content */}
      <div className="flex-1 overflow-y-auto p-4">
        {!isLoading && !workflow ? (
          <div className="flex flex-col items-center justify-center h-full text-center">
            <div className="w-16 h-16 rounded-full bg-gray-100 dark:bg-gray-800 flex items-center justify-center mb-4">