From 96910e18973a09100b14dc865940afc241d6ba09 Mon Sep 17 00:00:00 2001
From: Aaryan Khandelwal <65252264+aaryan610@users.noreply.github.com>
Date: Wed, 29 Mar 2023 16:30:40 +0530
Subject: [PATCH] chore: ai for issue description (#575)

* feat: block sync

* chore: ai assistant for issue description
---
 .../components/core/gpt-assistant-modal.tsx   | 138 +++++++++---------
 .../components/issues/description-form.tsx    |  80 +++++-----
 apps/app/components/issues/form.tsx           |  35 ++++-
 .../components/pages/single-page-block.tsx    |   1 +
 .../projects/[projectId]/views/index.tsx      |   8 +-
 5 files changed, 148 insertions(+), 114 deletions(-)

diff --git a/apps/app/components/core/gpt-assistant-modal.tsx b/apps/app/components/core/gpt-assistant-modal.tsx
index e9c7241c1..f5c372798 100644
--- a/apps/app/components/core/gpt-assistant-modal.tsx
+++ b/apps/app/components/core/gpt-assistant-modal.tsx
@@ -19,6 +19,7 @@ type Props = {
   content: string;
   htmlContent?: string;
   onResponse: (response: string) => void;
+  projectId: string;
 };
 
 type FormData = {
@@ -37,12 +38,13 @@ export const GptAssistantModal: React.FC<Props> = ({
   content,
   htmlContent,
   onResponse,
+  projectId,
 }) => {
   const [response, setResponse] = useState("");
   const [invalidResponse, setInvalidResponse] = useState(false);
 
   const router = useRouter();
-  const { workspaceSlug, projectId } = router.query;
+  const { workspaceSlug } = router.query;
 
   const { setToastAlert } = useToast();
 
@@ -80,7 +82,7 @@ export const GptAssistantModal: React.FC<Props> = ({
 
     await aiService
       .createGptTask(workspaceSlug as string, projectId as string, {
-        prompt: content && content !== "" ? content : "",
+        prompt: content && content !== "" ? content : htmlContent ?? "",
         task: formData.task,
       })
       .then((res) => {
@@ -98,75 +100,77 @@ export const GptAssistantModal: React.FC<Props> = ({
 
   return (
     <div
-      className={`absolute ${inset} z-20 w-full rounded-[10px] border bg-white p-4 shadow ${
+      className={`absolute ${inset} z-20 w-full space-y-4 rounded-[10px] border bg-white p-4 shadow ${
         isOpen ? "block" : "hidden"
       }`}
     >
-      <form onSubmit={handleSubmit(handleResponse)} className="space-y-4">
-        {content && content !== "" && (
-          <div className="text-sm">
-            Content:
-            <RemirrorRichTextEditor
-              value={htmlContent ?? <p>{content}</p>}
-              customClassName="-mx-3 -my-3"
-              noBorder
-              borderOnFocus={false}
-              editable={false}
-            />
-          </div>
-        )}
-        {response !== "" && (
-          <div className="text-sm">
-            Response:
-            <RemirrorRichTextEditor
-              value={`<p>${response}</p>`}
-              customClassName="-mx-3 -my-3"
-              noBorder
-              borderOnFocus={false}
-              editable={false}
-            />
-          </div>
-        )}
-        {invalidResponse && (
-          <div className="text-sm text-red-500">
-            No response could be generated. This may be due to insufficient content or task
-            information. Please try again.
-          </div>
-        )}
-        <Input
-          type="text"
-          name="task"
-          register={register}
-          placeholder={`${
-            content && content !== ""
-              ? "Tell AI what action to perform on this content..."
-              : "Ask AI anything..."
-          }`}
-          autoComplete="off"
-        />
-        <div className={`flex gap-2 ${response === "" ? "justify-end" : "justify-between"}`}>
-          {response !== "" && (
-            <PrimaryButton
-              onClick={() => {
-                onResponse(response);
-                onClose();
-              }}
-            >
-              Use this response
-            </PrimaryButton>
-          )}
-          <div className="flex items-center gap-2">
-            <SecondaryButton onClick={onClose}>Close</SecondaryButton>
-            <PrimaryButton type="submit" loading={isSubmitting}>
-              {isSubmitting
-                ? "Generating response..."
-                : response === ""
-                ? "Generate response"
-                : "Generate again"}
-            </PrimaryButton>
-          </div>
+      {((content && content !== "") || htmlContent) && (
+        <div className="text-sm page-block-section">
+          Content:
+          <RemirrorRichTextEditor
+            value={htmlContent ?? <p>{content}</p>}
+            customClassName="-mx-3 -my-3"
+            noBorder
+            borderOnFocus={false}
+            editable={false}
+          />
         </div>
-      </form>
+      )}
+      {response !== "" && (
+        <div className="text-sm page-block-section">
+          Response:
+          <RemirrorRichTextEditor
+            value={`<p>${response}</p>`}
+            customClassName="-mx-3 -my-3"
+            noBorder
+            borderOnFocus={false}
+            editable={false}
+          />
+        </div>
+      )}
+      {invalidResponse && (
+        <div className="text-sm text-red-500">
+          No response could be generated. This may be due to insufficient content or task
+          information. Please try again.
+        </div>
+      )}
+      <Input
+        type="text"
+        name="task"
+        register={register}
+        placeholder={`${
+          content && content !== ""
+            ? "Tell AI what action to perform on this content..."
+            : "Ask AI anything..."
+        }`}
+        autoComplete="off"
+      />
+      <div className={`flex gap-2 ${response === "" ? "justify-end" : "justify-between"}`}>
+        {response !== "" && (
+          <PrimaryButton
+            onClick={() => {
+              onResponse(response);
+              onClose();
+            }}
+          >
+            Use this response
+          </PrimaryButton>
+        )}
+        <div className="flex items-center gap-2">
+          <SecondaryButton onClick={onClose}>Close</SecondaryButton>
+          <PrimaryButton
+            type="button"
+            onClick={handleSubmit(handleResponse)}
+            loading={isSubmitting}
+          >
+            {isSubmitting
+              ? "Generating response..."
+              : response === ""
+              ? "Generate response"
+              : "Generate again"}
+          </PrimaryButton>
+        </div>
+      </div>
     </div>
   );
 };
diff --git a/apps/app/components/issues/description-form.tsx b/apps/app/components/issues/description-form.tsx
index a4ba631e8..666b30964 100644
--- a/apps/app/components/issues/description-form.tsx
+++ b/apps/app/components/issues/description-form.tsx
@@ -3,7 +3,7 @@ import { FC, useCallback, useEffect, useState } from "react";
 import dynamic from "next/dynamic";
 
 // react-hook-form
-import { useForm } from "react-hook-form";
+import { Controller, useForm } from "react-hook-form";
 // components
 import { Loader, TextArea } from "components/ui";
 const RemirrorRichTextEditor = dynamic(() => import("components/rich-text-editor"), {
@@ -42,6 +42,8 @@ export const IssueDescriptionForm: FC<IssueDetailsProps> = ({
     watch,
     setValue,
     reset,
+    register,
+    control,
     formState: { errors },
   } = useForm<IIssue>({
     defaultValues: {
@@ -64,19 +66,18 @@ export const IssueDescriptionForm: FC<IssueDetailsProps> = ({
     [handleFormSubmit]
   );
 
-  useEffect(() => {
-    const alertUser = (e: BeforeUnloadEvent) => {
-      console.log("beforeunload");
-      e.preventDefault();
-      e.returnValue = "";
-      return "Are you sure you want to leave?";
-    };
+  // useEffect(() => {
+  //   const alertUser = (e: BeforeUnloadEvent) => {
+  //     e.preventDefault();
+  //     e.returnValue = "";
+  //     return "Are you sure you want to leave?";
+  //   };
 
-    window.addEventListener("beforeunload", alertUser);
-    return () => {
-      window.removeEventListener("beforeunload", alertUser);
-    };
-  }, [isSubmitting]);
+  //   window.addEventListener("beforeunload", alertUser);
+  //   return () => {
+  //     window.removeEventListener("beforeunload", alertUser);
+  //   };
+  // }, [isSubmitting]);
 
   // reset form values
   useEffect(() => {
@@ -94,7 +95,7 @@ export const IssueDescriptionForm: FC<IssueDetailsProps> = ({
           id="name"
           name="name"
           placeholder="Enter issue name"
-          value={watch("name")}
+          register={register}
           onFocus={() => setCharacterLimit(true)}
           onBlur={() => {
             setCharacterLimit(false);
@@ -108,9 +109,6 @@ export const IssueDescriptionForm: FC<IssueDetailsProps> = ({
                 setIsSubmitting(false);
               });
           }}
-          onChange={(e) => {
-            setValue("name", e.target.value);
-          }}
           required={true}
           className="min-h-10 block w-full resize-none
       overflow-hidden rounded border-none bg-transparent
@@ -131,26 +129,34 @@ export const IssueDescriptionForm: FC<IssueDetailsProps> = ({
         )}
       </div>
       <span>{errors.name ? errors.name.message : null}</span>
-      <RemirrorRichTextEditor
-        value={
-          watch("description") && watch("description") !== ""
-            ? watch("description")
-            : watch("description_html")
-        }
-        placeholder="Describe the issue..."
-        onBlur={() => {
-          setIsSubmitting(true);
-          handleSubmit(handleDescriptionFormSubmit)()
-            .then(() => {
-              setIsSubmitting(false);
-            })
-            .catch(() => {
-              setIsSubmitting(false);
-            });
-        }}
-        onJSONChange={(json) => setValue("description", json)}
-        onHTMLChange={(html) => setValue("description_html", html)}
-        editable={!isNotAllowed}
+      <Controller
+        name="description"
+        control={control}
+        render={({ field: { value } }) => (
+          <RemirrorRichTextEditor
+            value={
+              !value ||
+              value === "" ||
+              (typeof value === "object" && Object.keys(value).length === 0)
+                ? watch("description_html")
+                : value
+            }
+            onJSONChange={(jsonValue) => setValue("description", jsonValue)}
+            onHTMLChange={(htmlValue) => setValue("description_html", htmlValue)}
+            onBlur={() => {
+              setIsSubmitting(true);
+              handleSubmit(handleDescriptionFormSubmit)()
+                .then(() => {
+                  setIsSubmitting(false);
+                })
+                .catch(() => {
+                  setIsSubmitting(false);
+                });
+            }}
+            placeholder="Describe the issue..."
+            editable={!isNotAllowed}
+          />
+        )}
       />
       <div
         className={`absolute -bottom-8 right-0 text-sm text-gray-500 ${
diff --git a/apps/app/components/issues/form.tsx b/apps/app/components/issues/form.tsx
index 81e01e6be..35cff8472 100644
--- a/apps/app/components/issues/form.tsx
+++ b/apps/app/components/issues/form.tsx
@@ -7,6 +7,7 @@ import { useRouter } from "next/router";
 // react-hook-form
 import { Controller, useForm } from "react-hook-form";
 // components
+import { GptAssistantModal } from "components/core";
 import {
   IssueAssigneeSelect,
   IssueLabelSelect,
@@ -22,7 +23,7 @@ import { CreateLabelModal } from "components/labels";
 // ui
 import { CustomMenu, Input, Loader, PrimaryButton, SecondaryButton } from "components/ui";
 // icons
-import { XMarkIcon } from "@heroicons/react/24/outline";
+import { SparklesIcon, XMarkIcon } from "@heroicons/react/24/outline";
 // helpers
 import { cosineSimilarity } from "helpers/string.helper";
 // types
@@ -31,7 +32,7 @@ import type { IIssue } from "types";
 const RemirrorRichTextEditor = dynamic(() => import("components/rich-text-editor"), {
   ssr: false,
   loading: () => (
-    <Loader>
+    <Loader className="mt-4">
       <Loader.Item height="12rem" width="100%" />
     </Loader>
   ),
@@ -81,6 +82,8 @@ export const IssueForm: FC<IssueFormProps> = ({
   const [labelModal, setLabelModal] = useState(false);
   const [parentIssueListModalOpen, setParentIssueListModalOpen] = useState(false);
 
+  const [gptAssistantModal, setGptAssistantModal] = useState(false);
+
   const router = useRouter();
   const { workspaceSlug } = router.query;
 
@@ -115,6 +118,13 @@ export const IssueForm: FC<IssueFormProps> = ({
     });
   };
 
+  const handleAiAssistance = async (response: string) => {
+    if (!workspaceSlug || !projectId) return;
+
+    setValue("description", {});
+    setValue("description_html", `${watch("description_html")}<p>${response}</p>`);
+  };
+
   useEffect(() => {
     setFocus("name");
 
@@ -233,7 +243,17 @@ export const IssueForm: FC<IssueFormProps> = ({
                   </div>
                 )}
               </div>
-              <div>
+              <div className="relative">
+                <div className="flex justify-end -mb-2 mr-2">
+                  <button
+                    type="button"
+                    className="-mr-2 flex items-center gap-1 rounded px-1.5 py-1 text-xs hover:bg-gray-100"
+                    onClick={() => setGptAssistantModal((prevData) => !prevData)}
+                  >
+                    <SparklesIcon className="h-4 w-4" />
+                    AI
+                  </button>
+                </div>
                 <Controller
                   name="description"
                   control={control}
@@ -250,6 +270,15 @@ export const IssueForm: FC<IssueFormProps> = ({
                     />
                   )}
                 />
+                <GptAssistantModal
+                  isOpen={gptAssistantModal}
+                  handleClose={() => setGptAssistantModal(false)}
+                  inset="top-2 left-0"
+                  content=""
+                  htmlContent={watch("description_html")}
+                  onResponse={handleAiAssistance}
+                  projectId={projectId}
+                />
               </div>
               <div className="flex flex-wrap items-center gap-2">
                 <Controller
diff --git a/apps/app/components/pages/single-page-block.tsx b/apps/app/components/pages/single-page-block.tsx
index 8c9064ad7..7e10138a2 100644
--- a/apps/app/components/pages/single-page-block.tsx
+++ b/apps/app/components/pages/single-page-block.tsx
@@ -333,6 +333,7 @@ export const SinglePageBlock: React.FC<Props> = ({ block, projectDetails }) => {
           content={block.description_stripped}
           htmlContent={block.description_html}
           onResponse={handleAiAssistance}
+          projectId={projectId as string}
         />
       </div>
     </div>
diff --git a/apps/app/pages/[workspaceSlug]/projects/[projectId]/views/index.tsx b/apps/app/pages/[workspaceSlug]/projects/[projectId]/views/index.tsx
index 848073251..084a149ce 100644
--- a/apps/app/pages/[workspaceSlug]/projects/[projectId]/views/index.tsx
+++ b/apps/app/pages/[workspaceSlug]/projects/[projectId]/views/index.tsx
@@ -50,8 +50,6 @@ const ProjectViews: NextPage<UserAuth> = (props) => {
       : null
   );
 
-  console.log(views)
-
   return (
     <AppLayout
       meta={{
@@ -88,11 +86,7 @@ const ProjectViews: NextPage<UserAuth> = (props) => {
             <h3 className="text-3xl font-semibold text-black">Views</h3>
             <div className="rounded-[10px] border">
               {views.map((view) => (
-                <SingleViewItem
-                  key={view.id}
-                  view={view}
-                  setSelectedView={setSelectedView}
-                />
+                <SingleViewItem key={view.id} view={view} setSelectedView={setSelectedView} />
               ))}
             </div>
           </div>