diff --git a/frontend/src/components/CommunityHub/PublishEntityModal/SystemPrompts/index.jsx b/frontend/src/components/CommunityHub/PublishEntityModal/SystemPrompts/index.jsx new file mode 100644 index 00000000000..a3187922f4c --- /dev/null +++ b/frontend/src/components/CommunityHub/PublishEntityModal/SystemPrompts/index.jsx @@ -0,0 +1,242 @@ +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 } from "@phosphor-icons/react/dist/ssr"; + +export default function SystemPrompts({ entity }) { + const { t } = useTranslation(); + const formRef = useRef(null); + const [isSubmitting, setIsSubmitting] = useState(false); + const [tags, setTags] = useState([]); + const [tagInput, setTagInput] = useState(""); + const [visibility, setVisibility] = useState("public"); + const [isSuccess, setIsSuccess] = useState(false); + const [itemId, setItemId] = 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"), + prompt: form.get("prompt"), + tags: tags, + visibility: visibility, + }; + + const { success, error, itemId } = + await CommunityHub.createSystemPrompt(data); + if (!success) throw new Error(error); + setItemId(itemId); + setIsSuccess(true); + } catch (error) { + console.error("Failed to publish prompt:", error); + showToast(`Failed to publish prompt: ${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("chat.prompt.publish.success_title")} +

+

+ {t("chat.prompt.publish.success_description")} +

+

+ {t("chat.prompt.publish.success_thank_you")} +

+ + {t("chat.prompt.publish.view_on_hub")} + +
+
+ ); + } + + return ( + <> +
+

+ {t(`chat.prompt.publish.modal_title`)} +

+
+
+
+
+ +
+ {t("chat.prompt.publish.name_description")} +
+ +
+ +
+ +
+ {t("chat.prompt.publish.description_description")} +
+