Upload components/AgentWorkflow.jsx with huggingface_hub

components/AgentWorkflow.jsx

@@ -0,0 +1,131 @@
+import { useState } from 'react'
+import VoiceControl from './VoiceControl'
+
+const AgentWorkflow = ({ language }) => {
+  const [tasks, setTasks] = useState([])
+  const [activeTask, setActiveTask] = useState(null)
+  const [output, setOutput] = useState('')
+
+  const handleCommand = (command) => {
+    const newTask = {
+      id: tasks.length + 1,
+      command,
+      status: 'pending',
+      steps: []
+    }
+    
+    setTasks([...tasks, newTask])
+    setActiveTask(newTask.id)
+    
+    // Simulate task execution
+    setTimeout(() => {
+      setTasks(prev => prev.map(task => 
+        task.id === newTask.id 
+          ? { ...task, status: 'completed', steps: [
+              { id: 1, action: 'parse', result: 'success' },
+              { id: 2, action: 'plan', result: 'success' },
+              { id: 3, action: 'execute', result: 'success' }
+            ]} 
+          : task
+      ))
+      
+      setOutput(language === 'fa' 
+        ? `وظیفه "${command}" با موفقیت انجام شد.\n\nفایل‌های تولید شده:\n- پروژه جدید React\n- تنظیمات اولیه\n- مثال کامپوننت\n\nدستور بعدی را بگویید یا بنویسید.` 
+        : `Task "${command}" completed successfully.\n\nGenerated files:\n- New React project\n- Initial setup\n- Example component\n\nSay or type your next command.`)
+    }, 2000)
+  }
+
+  return (
+    <div className="bg-white rounded-lg shadow-md p-4">
+      <h2 className="text-xl font-bold mb-4">
+        {language === 'fa' ? 'عامل هوشمند برنامه‌نویسی' : 'AI Programming Agent'}
+      </h2>
+      
+      <VoiceControl language={language} onCommand={handleCommand} />
+      
+      <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mt-6">
+        <div className="md:col-span-1">
+          <h3 className="font-bold mb-2">
+            {language === 'fa' ? 'وظایف اخیر' : 'Recent Tasks'}
+          </h3>
+          <div className="border rounded-lg p-2 h-64 overflow-y-auto">
+            {tasks.length === 0 ? (
+              <p className="text-gray-500 text-center py-8">
+                {language === 'fa' ? 'هیچ وظیفه‌ای ثبت نشده است' : 'No tasks recorded'}
+              </p>
+            ) : (
+              <ul className="space-y-2">
+                {tasks.map(task => (
+                  <li 
+                    key={task.id} 
+                    className={`p-2 rounded cursor-pointer ${activeTask === task.id ? 'bg-blue-100' : 'hover:bg-gray-100'}`}
+                    onClick={() => setActiveTask(task.id)}
+                  >
+                    <div className="flex justify-between">
+                      <span className="truncate">{task.command}</span>
+                      <span className={`px-2 py-1 text-xs rounded-full ${
+                        task.status === 'completed' ? 'bg-green-100 text-green-800' :
+                        task.status === 'failed' ? 'bg-red-100 text-red-800' :
+                        'bg-yellow-100 text-yellow-800'
+                      }`}>
+                        {task.status}
+                      </span>
+                    </div>
+                  </li>
+                ))}
+              </ul>
+            )}
+          </div>
+        </div>
+        
+        <div className="md:col-span-2">
+          <h3 className="font-bold mb-2">
+            {language === 'fa' ? 'جزئیات وظیفه' : 'Task Details'}
+          </h3>
+          <div className="border rounded-lg p-4 h-64 overflow-y-auto">
+            {activeTask ? (
+              <>
+                <h4 className="font-semibold mb-2">
+                  {language === 'fa' ? 'دستور:' : 'Command:'} {tasks.find(t => t.id === activeTask)?.command}
+                </h4>
+                <div className="mb-4">
+                  <h5 className="font-medium mb-1">
+                    {language === 'fa' ? 'مراحل اجرا:' : 'Execution Steps:'}
+                  </h5>
+                  <ul className="space-y-1">
+                    {tasks.find(t => t.id === activeTask)?.steps.map(step => (
+                      <li key={step.id} className="flex items-center">
+                        <span className={`inline-block w-2 h-2 rounded-full mr-2 ${
+                          step.result === 'success' ? 'bg-green-500' : 'bg-red-500'
+                        }`}></span>
+                        {step.action} - {step.result}
+                      </li>
+                    ))}
+                  </ul>
+                </div>
+                <div>
+                  <h5 className="font-medium mb-1">
+                    {language === 'fa' ? 'خروجی:' : 'Output:'}
+                  </h5>
+                  <pre className="bg-gray-100 p-2 rounded text-sm whitespace-pre-wrap">
+                    {output || (language === 'fa' 
+                      ? 'هیچ خروجی‌ای نمایش داده نشده است' 
+                      : 'No output displayed')}
+                  </pre>
+                </div>
+              </>
+            ) : (
+              <p className="text-gray-500 text-center py-8">
+                {language === 'fa' 
+                  ? 'لطفاً یک وظیفه را انتخاب کنید' 
+                  : 'Please select a task'}
+              </p>
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default AgentWorkflow