- {((content && content !== "") || (htmlContent && htmlContent !== "
")) && (
-
- Content:
- ${content}`}
- customClassName="-m-3"
- noBorder
- borderOnFocus={false}
- ref={editorRef}
- />
-
- )}
- {response !== "" && (
-
- Response:
- ${response}`}
- customClassName="-mx-3 -my-3"
- noBorder
- borderOnFocus={false}
- />
-
- )}
- {invalidResponse && (
-
- No response could be generated. This may be due to insufficient content or task information. Please try again.
-
- )}
+
+ {((content && content !== "") || (htmlContent && htmlContent !== "
")) && (
+
+ Content:
+ ${content}`}
+ customClassName="-m-3"
+ noBorder
+ borderOnFocus={false}
+ ref={editorRef}
+ />
+
+ )}
+ {response !== "" && (
+
+ Response:
+ ${response}`}
+ customClassName="-mx-3 -my-3"
+ noBorder
+ borderOnFocus={false}
+ />
+
+ )}
+ {invalidResponse && (
+
+ No response could be generated. This may be due to insufficient content or task information. Please try
+ again.
+
+ )}
+
{
+const PageDetailsPage: NextPageWithLayout = observer(() => {
const editorRef = useRef(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({
- defaultValues: { name: "" },
+ const { handleSubmit, reset, getValues, control, setValue, watch } = useForm({
+ defaultValues: { name: "", description_html: "" },
});
// =================== 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")}${response}
`;
+ 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 = () => {
}
/>
) : (
- (
- " : 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
- }
- />
+
+ (
+ " : 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 && (
+ <>
+
+ {
+ setGptModal(false);
+ }}
+ inset="top-9 right-[68px] !w-1/2 !max-h-[50%]"
+ content=""
+ onResponse={(response) => {
+ handleAiAssistance(response);
+ }}
+ projectId={projectId.toString()}
+ />
+ >
)}
- />
+
)}