import CTAButton from "@/components/lib/CTAButton"; import CommunityHubImportItemSteps from "../.."; import showToast from "@/utils/toast"; import paths from "@/utils/paths"; import { CircleNotch } from "@phosphor-icons/react"; import { useState } from "react"; import AgentFlows from "@/models/agentFlows"; import { safeJsonParse } from "@/utils/request"; export default function AgentFlow({ item, setStep }) { const flowInfo = safeJsonParse(item.flow, { steps: [] }); const [loading, setLoading] = useState(false); async function importAgentFlow() { try { setLoading(true); const { success, error, flow } = await AgentFlows.saveFlow( item.name, flowInfo ); if (!success) throw new Error(error); if (!!flow?.uuid) await AgentFlows.toggleFlow(flow.uuid, true); // Enable the flow automatically after import showToast(`Agent flow imported successfully!`, "success"); setStep(CommunityHubImportItemSteps.completed.key); } catch (e) { console.error(e); showToast(`Failed to import agent flow. ${e.message}`, "error"); } finally { setLoading(false); } } return (

Import Agent Flow "{item.name}"

{item.creatorUsername && (

Created by{" "} @{item.creatorUsername}

)}

Agent flows allow you to create reusable sequences of actions that can be triggered by your agent.

Flow Details:

Description: {item.description}

Steps ({flowInfo.steps.length}):

{step.type}

{loading ? : null} {loading ? "Importing..." : "Import agent flow"}

); }