fix: adding ai assistance to pages (#2905)

* fix: adding ai modal to pages * fix: pages overflow * chore: update pages UI * fix: updating page description while using ai assistance * fix: gpt assistant modal height and position --------- Co-authored-by: Aaryan Khandelwal <aaryankhandu123@gmail.com>
2023-11-27 20:39:18 +05:30 · 2023-11-27 20:39:18 +05:30 · d84e043c93
commit d84e043c93
parent 10cde58363
7 changed files with 134 additions and 80 deletions
--- a/packages/editor/document-editor/src/ui/components/editor-header.tsx
+++ b/packages/editor/document-editor/src/ui/components/editor-header.tsx
@ -46,7 +46,7 @@ export const EditorHeader = (props: IEditorHeader) => {

  return (
    <div className="flex items-center border-b border-custom-border-200 py-2 px-5">
-      <div className="flex-shrink-0 w-56 lg:w-80">
+      <div className="flex-shrink-0 w-56 lg:w-72">
        <SummaryPopover
          editor={editor}
          markings={markings}
--- a/packages/editor/document-editor/src/ui/components/heading-component.tsx
+++ b/packages/editor/document-editor/src/ui/components/heading-component.tsx
@ -7,7 +7,7 @@ export const HeadingComp = ({
 }) => (
  <h3
    onClick={onClick}
-    className="ml-4 mt-3 cursor-pointer text-sm font-bold font-medium leading-[125%] tracking-tight hover:text-custom-primary max-md:ml-2.5"
+    className="ml-4 mt-3 cursor-pointer text-sm font-medium leading-[125%] tracking-tight hover:text-custom-primary max-md:ml-2.5"
    role="button"
  >
    {heading}
--- a/packages/editor/document-editor/src/ui/components/page-renderer.tsx
+++ b/packages/editor/document-editor/src/ui/components/page-renderer.tsx
@ -19,7 +19,7 @@ export const PageRenderer = (props: IPageRenderer) => {

  return (
    <div className="w-full pl-7 pt-5 pb-64">
-      <h1 className="text-4xl font-bold break-all pr-5 -mt-2">
+      <h1 className="text-4xl font-bold break-words pr-5 -mt-2">
        {documentDetails.title}
      </h1>
      <div className="flex flex-col h-full w-full pr-5">
--- a/packages/editor/document-editor/src/ui/components/summary-side-bar.tsx
+++ b/packages/editor/document-editor/src/ui/components/summary-side-bar.tsx
@ -15,7 +15,7 @@ export const SummarySideBar = ({
 }: ISummarySideBarProps) => {
  return (
    <div
-      className={`h-full px-5 pt-5 transition-all duration-200 transform overflow-hidden ${
+      className={`h-full p-5 transition-all duration-200 transform overflow-hidden ${
        sidePeekVisible ? "translate-x-0" : "-translate-x-full"
      }`}
    >
--- a/packages/editor/document-editor/src/ui/index.tsx
+++ b/packages/editor/document-editor/src/ui/index.tsx
@ -127,14 +127,14 @@ const DocumentEditor = ({
        documentDetails={documentDetails}
      />
      <div className="h-full w-full flex overflow-y-auto">
-        <div className="flex-shrink-0 h-full w-56 lg:w-80 sticky top-0">
+        <div className="flex-shrink-0 h-full w-56 lg:w-72 sticky top-0">
          <SummarySideBar
            editor={editor}
            markings={markings}
            sidePeekVisible={sidePeekVisible}
          />
        </div>
-        <div className="h-full w-full">
+        <div className="h-full w-[calc(100%-14rem)] lg:w-[calc(100%-18rem-18rem)]">
          <PageRenderer
            editor={editor}
            editorContentCustomClassNames={editorContentCustomClassNames}
@ -142,7 +142,7 @@ const DocumentEditor = ({
            documentDetails={documentDetails}
          />
        </div>
-        <div className="hidden lg:block flex-shrink-0 w-56 lg:w-80" />
+        <div className="hidden lg:block flex-shrink-0 w-56 lg:w-72" />
      </div>
    </div>
  );
--- a/web/components/core/modals/gpt-assistant-modal.tsx
+++ b/web/components/core/modals/gpt-assistant-modal.tsx
@ -117,38 +117,41 @@ export const GptAssistantModal: React.FC<Props> = (props) => {

  return (
    <div
-      className={`absolute ${inset} z-20 w-full space-y-4 rounded-[10px] border border-custom-border-200 bg-custom-background-100 p-4 shadow ${
+      className={`absolute ${inset} z-20 w-full flex flex-col space-y-4 rounded-[10px] border border-custom-border-200 bg-custom-background-100 p-4 shadow overflow-hidden ${
        isOpen ? "block" : "hidden"
      }`}
    >
-      {((content && content !== "") || (htmlContent && htmlContent !== "<p></p>")) && (
-        <div className="text-sm">
-          Content:
-          <RichReadOnlyEditorWithRef
-            value={htmlContent ?? `<p>${content}</p>`}
-            customClassName="-m-3"
-            noBorder
-            borderOnFocus={false}
-            ref={editorRef}
-          />
-        </div>
-      )}
-      {response !== "" && (
-        <div className="page-block-section text-sm">
-          Response:
-          <RichReadOnlyEditor
-            value={`<p>${response}</p>`}
-            customClassName="-mx-3 -my-3"
-            noBorder
-            borderOnFocus={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>
-      )}
+      <div className="max-h-72 overflow-y-auto space-y-4 vertical-scroll-enable">
+        {((content && content !== "") || (htmlContent && htmlContent !== "<p></p>")) && (
+          <div className="text-sm">
+            Content:
+            <RichReadOnlyEditorWithRef
+              value={htmlContent ?? `<p>${content}</p>`}
+              customClassName="-m-3"
+              noBorder
+              borderOnFocus={false}
+              ref={editorRef}
+            />
+          </div>
+        )}
+        {response !== "" && (
+          <div className="page-block-section text-sm">
+            Response:
+            <RichReadOnlyEditor
+              value={`<p>${response}</p>`}
+              customClassName="-mx-3 -my-3"
+              noBorder
+              borderOnFocus={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>
+        )}
+      </div>
      <Controller
        control={control}
        name="task"
--- a/web/pages/[workspaceSlug]/projects/[projectId]/pages/[pageId].tsx
+++ b/web/pages/[workspaceSlug]/projects/[projectId]/pages/[pageId].tsx
@ -2,17 +2,21 @@ import React, { useEffect, useRef, useState, ReactElement } from "react";
 import { useRouter } from "next/router";
 import useSWR from "swr";
 import { Controller, useForm } from "react-hook-form";
+import { Sparkle } from "lucide-react";
+import { observer } from "mobx-react-lite";
 // services
 import { PageService } from "services/page.service";
 import { FileService } from "services/file.service";
 // hooks
 import useUser from "hooks/use-user";
 import { useDebouncedCallback } from "use-debounce";
+import { useMobxStore } from "lib/mobx/store-provider";
 // layouts
 import { AppLayout } from "layouts/app-layout";
 // components
 import { PageDetailsHeader } from "components/headers/page-details";
 import { EmptyState } from "components/common";
+import { GptAssistantModal } from "components/core";
 // ui
 import { DocumentEditorWithRef, DocumentReadOnlyEditorWithRef } from "@plane/document-editor";
 import { Spinner } from "@plane/ui";
@ -30,18 +34,23 @@ import { PAGE_DETAILS } from "constants/fetch-keys";
 const fileService = new FileService();
 const pageService = new PageService();

-const PageDetailsPage: NextPageWithLayout = () => {
+const PageDetailsPage: NextPageWithLayout = observer(() => {
  const editorRef = useRef<any>(null);
-
+  // states
  const [isSubmitting, setIsSubmitting] = useState<"submitting" | "submitted" | "saved">("saved");
-
+  const [gptModalOpen, setGptModal] = useState(false);
+  // store
+  const {
+    appConfig: { envConfig },
+  } = useMobxStore();
+  // router
  const router = useRouter();
  const { workspaceSlug, projectId, pageId } = router.query;

  const { user } = useUser();

-  const { handleSubmit, reset, getValues, control } = useForm<IPage>({
-    defaultValues: { name: "" },
+  const { handleSubmit, reset, getValues, control, setValue, watch } = useForm<IPage>({
+    defaultValues: { name: "", description_html: "<p></p>" },
  });

  // =================== Fetching Page Details ======================
@ -167,6 +176,22 @@ const PageDetailsPage: NextPageWithLayout = () => {
    }
  };

+  const handleAiAssistance = async (response: string) => {
+    if (!workspaceSlug || !projectId || !pageId) return;
+
+    const newDescription = `${watch("description_html")}<p>${response}</p>`;
+    setValue("description_html", newDescription);
+    editorRef.current?.setEditorValue(newDescription);
+
+    pageService
+      .patchPage(workspaceSlug.toString(), projectId.toString(), pageId.toString(), {
+        description_html: newDescription,
+      })
+      .then(() => {
+        mutatePageDetails((prevData) => ({ ...prevData, description_html: newDescription } as IPage), false);
+      });
+  };
+
  useEffect(() => {
    if (!pageDetails) return;

@ -227,45 +252,71 @@ const PageDetailsPage: NextPageWithLayout = () => {
                }
              />
            ) : (
-              <Controller
-                name="description_html"
-                control={control}
-                render={({ field: { value, onChange } }) => (
-                  <DocumentEditorWithRef
-                    documentDetails={{
-                      title: pageDetails.name,
-                      created_by: pageDetails.created_by,
-                      created_on: pageDetails.created_at,
-                      last_updated_at: pageDetails.updated_at,
-                      last_updated_by: pageDetails.updated_by,
-                    }}
-                    uploadFile={fileService.getUploadFileFunction(workspaceSlug as string)}
-                    deleteFile={fileService.deleteImage}
-                    ref={editorRef}
-                    debouncedUpdatesEnabled={false}
-                    setIsSubmitting={setIsSubmitting}
-                    value={!value || value === "" ? "<p></p>" : value}
-                    customClassName="tracking-tight self-center px-0 h-full w-full"
-                    onChange={(_description_json: Object, description_html: string) => {
-                      onChange(description_html);
-                      setIsSubmitting("submitting");
-                      debouncedFormSave();
-                    }}
-                    duplicationConfig={{ action: duplicate_page }}
-                    pageArchiveConfig={
-                      user && pageDetails.owned_by === user.id
-                        ? {
-                            is_archived: pageDetails.archived_at ? true : false,
-                            action: pageDetails.archived_at ? unArchivePage : archivePage,
-                          }
-                        : undefined
-                    }
-                    pageLockConfig={
-                      user && pageDetails.owned_by === user.id ? { is_locked: false, action: lockPage } : undefined
-                    }
-                  />
+              <div className="h-full w-full relative overflow-hidden">
+                <Controller
+                  name="description_html"
+                  control={control}
+                  render={({ field: { value, onChange } }) => (
+                    <DocumentEditorWithRef
+                      documentDetails={{
+                        title: pageDetails.name,
+                        created_by: pageDetails.created_by,
+                        created_on: pageDetails.created_at,
+                        last_updated_at: pageDetails.updated_at,
+                        last_updated_by: pageDetails.updated_by,
+                      }}
+                      uploadFile={fileService.getUploadFileFunction(workspaceSlug as string)}
+                      deleteFile={fileService.deleteImage}
+                      ref={editorRef}
+                      debouncedUpdatesEnabled={false}
+                      setIsSubmitting={setIsSubmitting}
+                      value={!value || value === "" ? "<p></p>" : value}
+                      customClassName="tracking-tight self-center px-0 h-full w-full"
+                      onChange={(_description_json: Object, description_html: string) => {
+                        onChange(description_html);
+                        setIsSubmitting("submitting");
+                        debouncedFormSave();
+                      }}
+                      duplicationConfig={{ action: duplicate_page }}
+                      pageArchiveConfig={
+                        user && pageDetails.owned_by === user.id
+                          ? {
+                              is_archived: pageDetails.archived_at ? true : false,
+                              action: pageDetails.archived_at ? unArchivePage : archivePage,
+                            }
+                          : undefined
+                      }
+                      pageLockConfig={
+                        user && pageDetails.owned_by === user.id ? { is_locked: false, action: lockPage } : undefined
+                      }
+                    />
+                  )}
+                />
+                {projectId && envConfig?.has_openai_configured && (
+                  <>
+                    <button
+                      type="button"
+                      className="flex items-center gap-1 rounded px-1.5 py-1 text-xs hover:bg-custom-background-90 absolute top-3 right-[68px]"
+                      onClick={() => setGptModal((prevData) => !prevData)}
+                    >
+                      <Sparkle className="h-4 w-4" />
+                      AI
+                    </button>
+                    <GptAssistantModal
+                      isOpen={gptModalOpen}
+                      handleClose={() => {
+                        setGptModal(false);
+                      }}
+                      inset="top-9 right-[68px] !w-1/2 !max-h-[50%]"
+                      content=""
+                      onResponse={(response) => {
+                        handleAiAssistance(response);
+                      }}
+                      projectId={projectId.toString()}
+                    />
+                  </>
                )}
-              />
+              </div>
            )}
          </div>
        </div>
@ -276,7 +327,7 @@ const PageDetailsPage: NextPageWithLayout = () => {
      )}
    </>
  );
-};
+});

 PageDetailsPage.getLayout = function getLayout(page: ReactElement) {
  return (