chore: ai for issue description (#575)

* feat: block sync * chore: ai assistant for issue description
2024-06-14 14:31:34 +00:00 · 2023-03-29 16:30:40 +05:30 · 2023-03-29 16:30:40 +05:30 · 96910e1897
commit 96910e1897
parent 2f69761130
5 changed files with 148 additions and 114 deletions
--- 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>
  );
 };
--- 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 ${
--- 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
--- 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>
--- 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>