github/plane
0
0
Fork 1
mirror of https://github.com/makeplane/plane synced 2024-06-14 14:31:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

added tiptap support to gpt assistant modal (yet to be tested)

Browse Source
This commit is contained in:
Palanikannan1437 2023-08-10 01:22:07 +05:30
parent c2a4cdfebb
commit 579051db31
1 changed files with 48 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
apps/app/components/core/modals/gpt-assistant-modal.tsx
View File

@ -1,4 +1,4 @@
import { useEffect, useState, forwardRef, useRef } from "react"; import React, { useEffect, useState, forwardRef, useRef } from "react";
import { useRouter } from "next/router"; import { useRouter } from "next/router";
import dynamic from "next/dynamic"; import dynamic from "next/dynamic";
@ -15,6 +15,7 @@ import useUserAuth from "hooks/use-user-auth";
import { Input, PrimaryButton, SecondaryButton } from "components/ui"; import { Input, PrimaryButton, SecondaryButton } from "components/ui";
import { IIssue, IPageBlock } from "types"; import { IIssue, IPageBlock } from "types";
import Tiptap, { ITiptapRichTextEditor } from "components/tiptap";
type Props = { type Props = {
isOpen: boolean; isOpen: boolean;
handleClose: () => void; handleClose: () => void;
@ -44,6 +45,14 @@ type FormData = {
// //
// WrappedRemirrorRichTextEditor.displayName = "WrappedRemirrorRichTextEditor"; // WrappedRemirrorRichTextEditor.displayName = "WrappedRemirrorRichTextEditor";
const TiptapEditor = React.forwardRef<
ITiptapRichTextEditor,
ITiptapRichTextEditor
>((props, ref) => <Tiptap {...props} forwardedRef={ref} />);
TiptapEditor.displayName = "TiptapEditor";
export const GptAssistantModal: React.FC<Props> = ({ export const GptAssistantModal: React.FC<Props> = ({
isOpen, isOpen,
handleClose, handleClose,
@ -146,13 +155,20 @@ export const GptAssistantModal: React.FC<Props> = ({
return ( return (
<div <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 space-y-4 rounded-[10px] border border-custom-border-200 bg-custom-background-100 p-4 shadow ${isOpen ? "block" : "hidden"
isOpen ? "block" : "hidden"
}`} }`}
> >
{/* {((content && content !== "") || (htmlContent && htmlContent !== "<p></p>")) && ( */} {((content && content !== "") || (htmlContent && htmlContent !== "<p></p>")) && (
{/* <div className="remirror-section text-sm"> */} <div className="remirror-section text-sm">
{/* Content: */} Content:
<TiptapEditor
value={htmlContent ?? `<p>${content}</p>`}
customClassName="-m-3"
noBorder
borderOnFocus={false}
editable={false}
ref={editorRef}
/>
{/* <WrappedRemirrorRichTextEditor */} {/* <WrappedRemirrorRichTextEditor */}
{/* value={htmlContent ?? <p>{content}</p>} */} {/* value={htmlContent ?? <p>{content}</p>} */}
{/* customClassName="-m-3" */} {/* customClassName="-m-3" */}
@ -161,18 +177,26 @@ export const GptAssistantModal: React.FC<Props> = ({
{/* editable={false} */} {/* editable={false} */}
{/* ref={editorRef} */} {/* ref={editorRef} */}
{/* /> */} {/* /> */}
{/* </div> */} </div>
{/* )} */} )}
{response !== "" && ( {response !== "" && (
<div className="page-block-section text-sm"> <div className="page-block-section text-sm">
Response: Response:
<RemirrorRichTextEditor <Tiptap
value={`<p>${response}</p>`} value={`<p>${response}</p>`}
customClassName="-mx-3 -my-3" customClassName="-mx-3 -my-3"
noBorder noBorder
borderOnFocus={false} borderOnFocus={false}
editable={false} editable={false}
/> />
{/* <RemirrorRichTextEditor */}
{/* value={`<p>${response}</p>`} */}
{/* customClassName="-mx-3 -my-3" */}
{/* noBorder */}
{/* borderOnFocus={false} */}
{/* editable={false} */}
{/* /> */}
</div> </div>
)} )}
{invalidResponse && ( {invalidResponse && (
@ -185,8 +209,7 @@ export const GptAssistantModal: React.FC<Props> = ({
type="text" type="text"
name="task" name="task"
register={register} register={register}
placeholder={`${ placeholder={`${content && content !== ""
content && content !== ""
? "Tell AI what action to perform on this content..." ? "Tell AI what action to perform on this content..."
: "Ask AI anything..." : "Ask AI anything..."
}`} }`}