diff --git a/apps/app/components/issues/form.tsx b/apps/app/components/issues/form.tsx index 800630c15..b320107ee 100644 --- a/apps/app/components/issues/form.tsx +++ b/apps/app/components/issues/form.tsx @@ -6,6 +6,10 @@ import { useRouter } from "next/router"; // react-hook-form import { Controller, useForm } from "react-hook-form"; +// services +import aiService from "services/ai.service"; +// hooks +import useToast from "hooks/use-toast"; // components import { GptAssistantModal } from "components/core"; import { @@ -83,10 +87,13 @@ export const IssueForm: FC = ({ const [parentIssueListModalOpen, setParentIssueListModalOpen] = useState(false); const [gptAssistantModal, setGptAssistantModal] = useState(false); + const [iAmFeelingLucky, setIAmFeelingLucky] = useState(false); const router = useRouter(); const { workspaceSlug } = router.query; + const { setToastAlert } = useToast(); + const { register, formState: { errors, isSubmitting }, @@ -102,6 +109,8 @@ export const IssueForm: FC = ({ reValidateMode: "onChange", }); + const issueName = watch("name"); + const handleTitleChange = (e: ChangeEvent) => { const value = e.target.value; const similarIssue = issues?.find((i: IIssue) => cosineSimilarity(i.name, value) > 0.7); @@ -126,6 +135,44 @@ export const IssueForm: FC = ({ setValue("description_html", `${watch("description_html")}

${response}

`); }; + const handelAutoGenerateDescription = async () => { + if (!workspaceSlug || !projectId) return; + + setIAmFeelingLucky(true); + + aiService + .createGptTask(workspaceSlug as string, projectId as string, { + prompt: issueName, + task: "Generate a proper description for this issue in context of a project management software.", + }) + .then((res) => { + if (res.response === "") + setToastAlert({ + type: "error", + title: "Error!", + message: + "Issue title isn't informative enough to generate the description. Please try with a different title.", + }); + else handleAiAssistance(res.response_html); + }) + .catch((err) => { + if (err.status === 429) + setToastAlert({ + type: "error", + title: "Error!", + message: + "You have reached the maximum number of requests of 50 requests per month per user.", + }); + else + setToastAlert({ + type: "error", + title: "Error!", + message: "Some error occurred. Please try again.", + }); + }) + .finally(() => setIAmFeelingLucky(false)); + }; + useEffect(() => { setFocus("name"); @@ -245,10 +292,28 @@ export const IssueForm: FC = ({ )}
-
+
+ {issueName && issueName !== "" && ( + + )}