chore: added ai generation inside block in pages (#732)

apps/app/components/pages/create-update-block-inline.tsx

@@ -3,6 +3,8 @@ import dynamic from "next/dynamic";
 
 import { mutate } from "swr";
 
+import { SparklesIcon } from "@heroicons/react/24/outline";
+
 // react-hook-form
 import { Controller, useForm } from "react-hook-form";
 // services
@@ -23,6 +25,9 @@ type Props = {
   data?: IPageBlock;
   setIsSyncing?: React.Dispatch<React.SetStateAction<boolean>>;
   focus?: keyof IPageBlock;
+  handelAutoGenerateDescription?: () => Promise<void>;
+  iAmFeelingLucky?: boolean;
+  setGptAssistantModal: () => void;
 };
 
 const defaultValues = {
@@ -44,6 +49,9 @@ export const CreateUpdateBlockInline: React.FC<Props> = ({
   data,
   setIsSyncing,
   focus,
+  handelAutoGenerateDescription,
+  setGptAssistantModal,
+  iAmFeelingLucky,
 }) => {
   const router = useRouter();
   const { workspaceSlug, projectId, pageId } = router.query;
@@ -185,6 +193,7 @@ export const CreateUpdateBlockInline: React.FC<Props> = ({
                 onJSONChange={(jsonValue) => setValue("description", jsonValue)}
                 onHTMLChange={(htmlValue) => setValue("description_html", htmlValue)}
                 placeholder="Description"
+                aria-hidden
                 customClassName="text-sm"
                 noBorder
                 borderOnFocus={false}
@@ -193,6 +202,37 @@ export const CreateUpdateBlockInline: React.FC<Props> = ({
           />
         </div>
         <div className="flex justify-end items-center gap-2">
+          { data &&
+            <>
+              {console.log(handelAutoGenerateDescription, setGptAssistantModal, iAmFeelingLucky)}
+              <button
+                type="button"
+                className={`flex items-center gap-1 rounded px-1.5 py-1 text-xs hover:bg-gray-100 ${iAmFeelingLucky ? "cursor-wait bg-gray-100" : ""
+                  }`}
+                onClick={handelAutoGenerateDescription}
+                disabled={iAmFeelingLucky}
+              >
+                {iAmFeelingLucky ? (
+                  "Generating response..."
+                ) : (
+                  <>
+                    <SparklesIcon className="h-4 w-4" />I{"'"}m feeling lucky
+                  </>
+                )}
+              </button>
+              <button
+                type="button"
+                className="flex items-center gap-1 rounded px-1.5 py-1 text-xs hover:bg-gray-100"
+                onClick={() => {
+                  handleClose();
+                  setGptAssistantModal();
+                }}
+              >
+                <SparklesIcon className="h-4 w-4" />
+                AI
+              </button>
+            </>
+          }
           <SecondaryButton onClick={handleClose}>Cancel</SecondaryButton>
           <PrimaryButton type="submit" disabled={watch("name") === ""} loading={isSubmitting}>
             {data

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

@@ -303,6 +303,9 @@ export const SinglePageBlock: React.FC<Props> = ({
               {...provided.dragHandleProps}
             >
               <CreateUpdateBlockInline
+                handelAutoGenerateDescription={handelAutoGenerateDescription}
+                setGptAssistantModal={()=>setGptAssistantModal((prev)=>!prev)}
+                iAmFeelingLucky={iAmFeelingLucky}
                 handleClose={() => setCreateBlockForm(false)}
                 data={block}
                 setIsSyncing={setIsSyncing}

apps/app/pages/[workspaceSlug]/projects/[projectId]/pages/[pageId].tsx

@@ -486,6 +486,7 @@ const SinglePage: NextPage = () => {
                     <CreateUpdateBlockInline
                       handleClose={() => setCreateBlockForm(false)}
                       focus="name"
+                      setGptAssistantModal={()=>{}}
                     />
                   </div>
                 )}