chore: ai for issue description (#575)

* feat: block sync

* chore: ai assistant for issue description

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,13 +100,12 @@ 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 !== "") || htmlContent) && (
-        {content && content !== "" && (
+        <div className="text-sm page-block-section">
-          <div className="text-sm">
           Content:
           <RemirrorRichTextEditor
             value={htmlContent ?? <p>{content}</p>}
@@ -116,7 +117,7 @@ export const GptAssistantModal: React.FC<Props> = ({
         </div>
       )}
       {response !== "" && (
-          <div className="text-sm">
+        <div className="text-sm page-block-section">
           Response:
           <RemirrorRichTextEditor
             value={`<p>${response}</p>`}
@@ -157,7 +158,11 @@ export const GptAssistantModal: React.FC<Props> = ({
         )}
         <div className="flex items-center gap-2">
           <SecondaryButton onClick={onClose}>Close</SecondaryButton>
-            <PrimaryButton type="submit" loading={isSubmitting}>
+          <PrimaryButton
+            type="button"
+            onClick={handleSubmit(handleResponse)}
+            loading={isSubmitting}
+          >
             {isSubmitting
               ? "Generating response..."
               : response === ""
@@ -166,7 +171,6 @@ export const GptAssistantModal: React.FC<Props> = ({
           </PrimaryButton>
         </div>
       </div>
-      </form>
     </div>
   );
 };

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(() => {
+  // useEffect(() => {
-    const alertUser = (e: BeforeUnloadEvent) => {
+  //   const alertUser = (e: BeforeUnloadEvent) => {
-      console.log("beforeunload");
+  //     e.preventDefault();
-      e.preventDefault();
+  //     e.returnValue = "";
-      e.returnValue = "";
+  //     return "Are you sure you want to leave?";
-      return "Are you sure you want to leave?";
+  //   };
-    };
 
-    window.addEventListener("beforeunload", alertUser);
+  //   window.addEventListener("beforeunload", alertUser);
-    return () => {
+  //   return () => {
-      window.removeEventListener("beforeunload", alertUser);
+  //     window.removeEventListener("beforeunload", alertUser);
-    };
+  //   };
-  }, [isSubmitting]);
+  // }, [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,13 +129,20 @@ export const IssueDescriptionForm: FC<IssueDetailsProps> = ({
         )}
       </div>
       <span>{errors.name ? errors.name.message : null}</span>
+      <Controller
+        name="description"
+        control={control}
+        render={({ field: { value } }) => (
           <RemirrorRichTextEditor
             value={
-          watch("description") && watch("description") !== ""
+              !value ||
-            ? watch("description")
+              value === "" ||
-            : watch("description_html")
+              (typeof value === "object" && Object.keys(value).length === 0)
+                ? watch("description_html")
+                : value
             }
-        placeholder="Describe the issue..."
+            onJSONChange={(jsonValue) => setValue("description", jsonValue)}
+            onHTMLChange={(htmlValue) => setValue("description_html", htmlValue)}
             onBlur={() => {
               setIsSubmitting(true);
               handleSubmit(handleDescriptionFormSubmit)()
@@ -148,10 +153,11 @@ export const IssueDescriptionForm: FC<IssueDetailsProps> = ({
                   setIsSubmitting(false);
                 });
             }}
-        onJSONChange={(json) => setValue("description", json)}
+            placeholder="Describe the issue..."
-        onHTMLChange={(html) => setValue("description_html", html)}
             editable={!isNotAllowed}
           />
+        )}
+      />
       <div
         className={`absolute -bottom-8 right-0 text-sm text-gray-500 ${
           isSubmitting ? "block" : "hidden"

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

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>

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
+                <SingleViewItem key={view.id} view={view} setSelectedView={setSelectedView} />
-                  key={view.id}
-                  view={view}
-                  setSelectedView={setSelectedView}
-                />
               ))}
             </div>
           </div>