|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime"; |
|
|
|
import { useState, useEffect } from "react"; |
|
import { useLocalStorage } from "react-use"; |
|
import { toast } from "react-toastify"; |
|
import ChatInterface from "./ChatInterface"; |
|
import { FiCpu, FiCheckCircle, FiLoader } from "react-icons/fi"; |
|
export default function AskAI(props) { |
|
const { agentId, html, setHtml, isAiWorking, setisAiWorking, onNewPrompt, onScrollToBottom, } = props; |
|
|
|
const [geminiKey] = useLocalStorage("geminiKey", ""); |
|
const [chatgptKey] = useLocalStorage("chatgptKey", ""); |
|
const [hfToken] = useLocalStorage("hfToken", ""); |
|
const [activeTasks, setActiveTasks] = useState([]); |
|
const [currentPlan, setCurrentPlan] = useState(null); |
|
|
|
const handleTaskCreated = (task) => { |
|
setActiveTasks(prev => [...prev, task]); |
|
toast.info(`Nova tarefa criada: ${task.description.substring(0, 40)}...`); |
|
}; |
|
const handlePlanCreated = (plan) => { |
|
setCurrentPlan(plan); |
|
toast.success(`Plano criado com ${plan.steps.length} passos`); |
|
}; |
|
const handleTaskUpdated = (taskId, status, result) => { |
|
setActiveTasks(prev => prev.map(task => task.id === taskId |
|
? { |
|
...task, |
|
status, |
|
result, |
|
completedAt: (status === 'completed' || status === 'failed') ? new Date() : undefined |
|
} |
|
: task)); |
|
}; |
|
|
|
useEffect(() => { |
|
const interval = setInterval(() => { |
|
const oneHourAgo = new Date(Date.now() - 60 * 60 * 1000); |
|
setActiveTasks(prev => prev.filter(task => task.status !== 'completed' || |
|
!task.completedAt || |
|
task.completedAt > oneHourAgo)); |
|
}, 15 * 60 * 1000); |
|
return () => clearInterval(interval); |
|
}, []); |
|
|
|
const getAgentStatusColor = () => { |
|
switch (agentId) { |
|
case 'orchestrator': |
|
return 'bg-purple-600'; |
|
case 'mike': |
|
return 'bg-blue-600'; |
|
case 'alex': |
|
return 'bg-green-600'; |
|
case 'david': |
|
return 'bg-amber-600'; |
|
default: |
|
return 'bg-indigo-600'; |
|
} |
|
}; |
|
return (_jsxs("div", { className: "flex flex-col h-full", children: [_jsxs("div", { className: "bg-gray-900 text-white py-3 px-4 border-b border-gray-800", children: [_jsxs("div", { className: "flex items-center", children: [_jsx("div", { className: `w-3 h-3 rounded-full mr-2 ${getAgentStatusColor()}` }), _jsxs("h2", { className: "text-lg font-medium", children: ["Agente: ", agentId] }), isAiWorking && (_jsx("div", { className: "ml-2 animate-pulse text-amber-400", children: _jsx(FiLoader, { className: "animate-spin" }) }))] }), currentPlan && (_jsxs("div", { className: "mt-2 text-sm bg-gray-800 rounded p-2", children: [_jsxs("div", { className: "flex items-center text-indigo-400 mb-1", children: [_jsx(FiCpu, { className: "mr-1" }), " Plano: ", currentPlan.name] }), _jsxs("div", { className: "text-xs text-gray-400", children: [currentPlan.steps.length, " passos planejados"] })] })), activeTasks.length > 0 && (_jsxs("div", { className: "mt-2", children: [_jsx("div", { className: "text-xs text-gray-400 mb-1", children: "Tarefas:" }), _jsxs("div", { className: "flex flex-wrap gap-2", children: [activeTasks |
|
.filter(t => t.status === 'in-progress') |
|
.slice(0, 2) |
|
.map(task => (_jsxs("div", { className: "text-xs bg-gray-800 rounded px-2 py-1 flex items-center", children: [_jsx(FiLoader, { className: "animate-spin mr-1 text-amber-400" }), _jsx("span", { className: "truncate max-w-[180px]", children: task.description })] }, task.id))), activeTasks.filter(t => t.status === 'completed').length > 0 && (_jsxs("div", { className: "text-xs bg-gray-800 rounded px-2 py-1 flex items-center", children: [_jsx(FiCheckCircle, { className: "mr-1 text-green-400" }), _jsxs("span", { children: [activeTasks.filter(t => t.status === 'completed').length, " conclu\u00EDdas"] })] }))] })] }))] }), _jsx(ChatInterface, { agentId: agentId, html: html, setHtml: setHtml, isAiWorking: isAiWorking, setisAiWorking: setisAiWorking, onNewPrompt: onNewPrompt, onScrollToBottom: onScrollToBottom, geminiKey: geminiKey, chatgptKey: chatgptKey, hfToken: hfToken })] })); |
|
} |
|
|