diff --git a/frontend/src/components/CommunityHub/PublishEntityModal/AgentFlows/index.jsx b/frontend/src/components/CommunityHub/PublishEntityModal/AgentFlows/index.jsx new file mode 100644 index 0000000000..b8c860f4f0 --- /dev/null +++ b/frontend/src/components/CommunityHub/PublishEntityModal/AgentFlows/index.jsx @@ -0,0 +1,260 @@ +import { useState, useRef } from "react"; +import { useTranslation } from "react-i18next"; +import CommunityHub from "@/models/communityHub"; +import showToast from "@/utils/toast"; +import paths from "@/utils/paths"; +import { X, CaretRight } from "@phosphor-icons/react"; +import { BLOCK_INFO } from "@/pages/Admin/AgentBuilder/BlockList"; + +export default function AgentFlows({ entity }) { + const { t } = useTranslation(); + const formRef = useRef(null); + const [isSubmitting, setIsSubmitting] = useState(false); + const [tags, setTags] = useState([]); + const [tagInput, setTagInput] = useState(""); + const [isSuccess, setIsSuccess] = useState(false); + const [itemId, setItemId] = useState(null); + const [expandedStep, setExpandedStep] = useState(null); + + const handleSubmit = async (e) => { + e.preventDefault(); + e.stopPropagation(); + setIsSubmitting(true); + try { + const form = new FormData(formRef.current); + const data = { + name: form.get("name"), + description: form.get("description"), + tags: tags, + visibility: "private", + flow: JSON.stringify({ + name: form.get("name"), + description: form.get("description"), + steps: entity.steps, + tags: tags, + visibility: "private", + }), + }; + const { success, error, itemId } = + await CommunityHub.createAgentFlow(data); + if (!success) throw new Error(error); + setItemId(itemId); + setIsSuccess(true); + } catch (error) { + console.error("Failed to publish agent flow:", error); + showToast(`Failed to publish agent flow: ${error.message}`, "error", { + clear: true, + }); + } finally { + setIsSubmitting(false); + } + }; + + const handleKeyDown = (e) => { + if (e.key === "Enter" || e.key === ",") { + e.preventDefault(); + const value = tagInput.trim(); + if (value.length > 20) return; + if (value && !tags.includes(value)) { + setTags((prevTags) => [...prevTags, value].slice(0, 5)); // Limit to 5 tags + setTagInput(""); + } + } + }; + + const removeTag = (tagToRemove) => { + setTags(tags.filter((tag) => tag !== tagToRemove)); + }; + + if (isSuccess) { + return ( +
+
+

+ {t("community_hub.publish.agent_flow.success_title")} +

+

+ {t("community_hub.publish.agent_flow.success_description")} +

+

+ {t("community_hub.publish.agent_flow.success_thank_you")} +

+ + {t("community_hub.publish.agent_flow.view_on_hub")} + +
+
+ ); + } + + return ( + <> +
+

+ {t("community_hub.publish.agent_flow.modal_title")} +

+
+
+
+
+ +
+ {t("community_hub.publish.agent_flow.name_description")} +
+ +
+ +
+ +
+ {t("community_hub.publish.agent_flow.description_description")} +
+