fix: pages ai modal (#694)

apps/app/components/pages/single-page-block.tsx

@@ -8,16 +8,19 @@ import { mutate } from "swr";
 
 // react-hook-form
 import { Controller, useForm } from "react-hook-form";
+// react-beautiful-dnd
+import { Draggable } from "react-beautiful-dnd";
 // services
 import pagesService from "services/pages.service";
 import issuesService from "services/issues.service";
+import aiService from "services/ai.service";
 // hooks
 import useToast from "hooks/use-toast";
 // components
 import { GptAssistantModal } from "components/core";
 import { CreateUpdateBlockInline } from "components/pages";
 // ui
-import { CustomMenu, Input, Loader } from "components/ui";
+import { CustomMenu, Loader } from "components/ui";
 // icons
 import { LayerDiagonalIcon } from "components/icons";
 import { ArrowPathIcon } from "@heroicons/react/20/solid";
@@ -34,7 +37,6 @@ import { copyTextToClipboard } from "helpers/string.helper";
 import { IIssue, IPageBlock, IProject } from "types";
 // fetch-keys
 import { PAGE_BLOCKS_LIST } from "constants/fetch-keys";
-import { Draggable } from "react-beautiful-dnd";
 
 type Props = {
   block: IPageBlock;
@@ -54,6 +56,7 @@ const RemirrorRichTextEditor = dynamic(() => import("components/rich-text-editor
 export const SinglePageBlock: React.FC<Props> = ({ block, projectDetails, index }) => {
   const [isSyncing, setIsSyncing] = useState(false);
   const [createBlockForm, setCreateBlockForm] = useState(false);
+  const [iAmFeelingLucky, setIAmFeelingLucky] = useState(false);
 
   const [gptAssistantModal, setGptAssistantModal] = useState(false);
 
@@ -164,6 +167,44 @@ export const SinglePageBlock: React.FC<Props> = ({ block, projectDetails, index
       });
   };
 
+  const handelAutoGenerateDescription = async () => {
+    if (!workspaceSlug || !projectId) return;
+
+    setIAmFeelingLucky(true);
+
+    aiService
+      .createGptTask(workspaceSlug as string, projectId as string, {
+        prompt: block.name,
+        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:
+              "Block 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));
+  };
+
   const handleAiAssistance = async (response: string) => {
     if (!workspaceSlug || !projectId) return;
 
@@ -287,6 +328,22 @@ export const SinglePageBlock: React.FC<Props> = ({ block, projectDetails, index
                       </a>
                     </Link>
                   )}
+                  <button
+                    type="button"
+                    className={`flex items-center gap-1 rounded px-1.5 py-1 text-xs hover:bg-gray-100 ${
+                      iAmFeelingLucky ? "cursor-wait" : ""
+                    }`}
+                    onClick={handelAutoGenerateDescription}
+                    disabled={iAmFeelingLucky}
+                  >
+                    {iAmFeelingLucky ? (
+                      "Generating response..."
+                    ) : (
+                      <>
+                        <SparklesIcon className="h-4 w-4" />I{"'"}m feeling lucky
+                      </>
+                    )}
+                  </button>
                   <button
                     type="button"
                     className="-mr-2 flex items-center gap-1 rounded px-1.5 py-1 text-xs hover:bg-gray-100"
@@ -323,28 +380,27 @@ export const SinglePageBlock: React.FC<Props> = ({ block, projectDetails, index
                   </CustomMenu>
                 </div>
               </div>
-              <div
-                className="page-block-section font relative -mx-3 -mt-3 ml-6"
-                onClick={() => setCreateBlockForm(true)}
-              >
-                <Controller
-                  name="description"
-                  control={control}
-                  render={({ field: { value } }) => (
-                    <RemirrorRichTextEditor
-                      value={
-                        !value || (typeof value === "object" && Object.keys(value).length === 0)
-                          ? watch("description_html")
-                          : value
-                      }
-                      placeholder="Description"
-                      customClassName="text-sm"
-                      noBorder
-                      borderOnFocus={false}
-                      editable={false}
-                    />
-                  )}
-                />
+              <div className="page-block-section font relative -mx-3 -mt-3 ml-6">
+                <div onClick={() => setCreateBlockForm(true)}>
+                  <Controller
+                    name="description"
+                    control={control}
+                    render={({ field: { value } }) => (
+                      <RemirrorRichTextEditor
+                        value={
+                          !value || (typeof value === "object" && Object.keys(value).length === 0)
+                            ? watch("description_html")
+                            : value
+                        }
+                        placeholder="Description"
+                        customClassName="text-sm"
+                        noBorder
+                        borderOnFocus={false}
+                        editable={false}
+                      />
+                    )}
+                  />
+                </div>
                 <GptAssistantModal
                   block={block}
                   isOpen={gptAssistantModal}