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

73
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,33 +155,48 @@ 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:
{/* <WrappedRemirrorRichTextEditor */} <TiptapEditor
{/* value={htmlContent ?? <p>{content}</p>} */} value={htmlContent ?? `<p>${content}</p>`}
{/* customClassName="-m-3" */} customClassName="-m-3"
{/* noBorder */} noBorder
{/* borderOnFocus={false} */} borderOnFocus={false}
{/* editable={false} */} editable={false}
{/* ref={editorRef} */} ref={editorRef}
{/* /> */} />
{/* </div> */} {/* <WrappedRemirrorRichTextEditor */}
{/* )} */} {/* value={htmlContent ?? <p>{content}</p>} */}
{/* customClassName="-m-3" */}
{/* noBorder */}
{/* borderOnFocus={false} */}
{/* editable={false} */}
{/* ref={editorRef} */}
{/* /> */}
</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,11 +209,10 @@ 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..." }`}
}`}
autoComplete="off" autoComplete="off"
/> />
<div className={`flex gap-2 ${response === "" ? "justify-end" : "justify-between"}`}> <div className={`flex gap-2 ${response === "" ? "justify-end" : "justify-between"}`}>
@ -225,8 +248,8 @@ export const GptAssistantModal: React.FC<Props> = ({
{isSubmitting {isSubmitting
? "Generating response..." ? "Generating response..."
: response === "" : response === ""
? "Generate response" ? "Generate response"
: "Generate again"} : "Generate again"}
</PrimaryButton> </PrimaryButton>
</div> </div>
</div> </div>