thunderstrike/plane
thunderstrike/plane
2
0
Fork 0
forked from github/plane
Code Pull Requests Activity

fix: AI Assistance hide/unhide depending on the configuration (#2825)

Browse Source 
* fix: gpt error handlijng

* fix: enabling ai assistance only when it is configured.
This commit is contained in:
sriram veeraghanta 2023-11-22 13:20:59 +05:30
parent 734f27122b
commit 666d46de58
6 changed files with 99 additions and 84 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
web/components/core/modals/gpt-assistant-modal.tsx
View File

@ -92,7 +92,7 @@ export const GptAssistantModal: React.FC<Props> = (props) => {
.catch((err) => { .catch((err) => {
const error = err?.data?.error; const error = err?.data?.error;
if (err.status === 429) if (err?.status === 429)
setToastAlert({ setToastAlert({
type: "error", type: "error",
title: "Error!", title: "Error!",

60
web/components/issues/draft-issue-form.tsx
View File

@ -31,6 +31,8 @@ import type { IUser, IIssue, ISearchIssueResponse } from "types";
// components // components
import { RichTextEditorWithRef } from "@plane/rich-text-editor"; import { RichTextEditorWithRef } from "@plane/rich-text-editor";
import useEditorSuggestions from "hooks/use-editor-suggestions"; import useEditorSuggestions from "hooks/use-editor-suggestions";
import { observer } from "mobx-react-lite";
import { useMobxStore } from "lib/mobx/store-provider";
const aiService = new AIService(); const aiService = new AIService();
const fileService = new FileService(); const fileService = new FileService();
@ -89,7 +91,7 @@ interface IssueFormProps {
)[]; )[];
} }
export const DraftIssueForm: FC<IssueFormProps> = (props) => { export const DraftIssueForm: FC<IssueFormProps> = observer((props) => {
const { const {
handleFormSubmit, handleFormSubmit,
data, data,
@ -100,30 +102,30 @@ export const DraftIssueForm: FC<IssueFormProps> = (props) => {
createMore, createMore,
setCreateMore, setCreateMore,
status, status,
user,
fieldsToShow, fieldsToShow,
handleDiscard, handleDiscard,
} = props; } = props;
// states
const [stateModal, setStateModal] = useState(false); const [stateModal, setStateModal] = useState(false);
const [labelModal, setLabelModal] = useState(false); const [labelModal, setLabelModal] = useState(false);
const [parentIssueListModalOpen, setParentIssueListModalOpen] = useState(false); const [parentIssueListModalOpen, setParentIssueListModalOpen] = useState(false);
const [selectedParentIssue, setSelectedParentIssue] = useState<ISearchIssueResponse | null>(null); const [selectedParentIssue, setSelectedParentIssue] = useState<ISearchIssueResponse | null>(null);
const [gptAssistantModal, setGptAssistantModal] = useState(false); const [gptAssistantModal, setGptAssistantModal] = useState(false);
const [iAmFeelingLucky, setIAmFeelingLucky] = useState(false); const [iAmFeelingLucky, setIAmFeelingLucky] = useState(false);
// hooks
const { setValue: setLocalStorageValue } = useLocalStorage("draftedIssue", {}); const { setValue: setLocalStorageValue } = useLocalStorage("draftedIssue", {});
const { setToastAlert } = useToast();
const editorSuggestions = useEditorSuggestions();
// refs
const editorRef = useRef<any>(null); const editorRef = useRef<any>(null);
// router
const router = useRouter(); const router = useRouter();
const { workspaceSlug } = router.query; const { workspaceSlug } = router.query;
// store
const { setToastAlert } = useToast(); const {
appConfig: { envConfig },
const editorSuggestions = useEditorSuggestions(); } = useMobxStore();
// form info
const { const {
formState: { errors, isSubmitting }, formState: { errors, isSubmitting },
handleSubmit, handleSubmit,
@ -440,21 +442,23 @@ export const DraftIssueForm: FC<IssueFormProps> = (props) => {
/> />
)} )}
/> />
<GptAssistantModal {envConfig?.has_openai_configured && (
isOpen={gptAssistantModal} <GptAssistantModal
handleClose={() => { isOpen={gptAssistantModal}
setGptAssistantModal(false); handleClose={() => {
// this is done so that the title do not reset after gpt popover closed setGptAssistantModal(false);
reset(getValues()); // this is done so that the title do not reset after gpt popover closed
}} reset(getValues());
inset="top-2 left-0" }}
content="" inset="top-2 left-0"
htmlContent={watch("description_html")} content=""
onResponse={(response) => { htmlContent={watch("description_html")}
handleAiAssistance(response); onResponse={(response) => {
}} handleAiAssistance(response);
projectId={projectId} }}
/> projectId={projectId}
/>
)}
</div> </div>
)} )}
<div className="flex flex-wrap items-center gap-2"> <div className="flex flex-wrap items-center gap-2">
@ -623,4 +627,4 @@ export const DraftIssueForm: FC<IssueFormProps> = (props) => {
</form> </form>
</> </>
); );
}; });

53
web/components/issues/form.tsx
View File

@ -94,28 +94,29 @@ export const IssueForm: FC<IssueFormProps> = observer((props) => {
fieldsToShow, fieldsToShow,
handleFormDirty, handleFormDirty,
} = props; } = props;
// states
const [stateModal, setStateModal] = useState(false); const [stateModal, setStateModal] = useState(false);
const [labelModal, setLabelModal] = useState(false); const [labelModal, setLabelModal] = useState(false);
const [parentIssueListModalOpen, setParentIssueListModalOpen] = useState(false); const [parentIssueListModalOpen, setParentIssueListModalOpen] = useState(false);
const [selectedParentIssue, setSelectedParentIssue] = useState<ISearchIssueResponse | null>(null); const [selectedParentIssue, setSelectedParentIssue] = useState<ISearchIssueResponse | null>(null);
const [gptAssistantModal, setGptAssistantModal] = useState(false); const [gptAssistantModal, setGptAssistantModal] = useState(false);
const [iAmFeelingLucky, setIAmFeelingLucky] = useState(false); const [iAmFeelingLucky, setIAmFeelingLucky] = useState(false);
// refs
const editorRef = useRef<any>(null); const editorRef = useRef<any>(null);
// router
const router = useRouter(); const router = useRouter();
const { workspaceSlug } = router.query; const { workspaceSlug } = router.query;
// store
const { user: userStore } = useMobxStore(); const {
user: userStore,
appConfig: { envConfig },
} = useMobxStore();
const user = userStore.currentUser; const user = userStore.currentUser;
console.log("envConfig", envConfig);
// hooks
const editorSuggestion = useEditorSuggestions(); const editorSuggestion = useEditorSuggestions();
const { setToastAlert } = useToast(); const { setToastAlert } = useToast();
// form info
const { const {
formState: { errors, isSubmitting, isDirty }, formState: { errors, isSubmitting, isDirty },
handleSubmit, handleSubmit,
@ -396,21 +397,23 @@ export const IssueForm: FC<IssueFormProps> = observer((props) => {
/> />
)} )}
/> />
<GptAssistantModal {envConfig?.has_openai_configured && (
isOpen={gptAssistantModal} <GptAssistantModal
handleClose={() => { isOpen={gptAssistantModal}
setGptAssistantModal(false); handleClose={() => {
// this is done so that the title do not reset after gpt popover closed setGptAssistantModal(false);
reset(getValues()); // this is done so that the title do not reset after gpt popover closed
}} reset(getValues());
inset="top-2 left-0" }}
content="" inset="top-2 left-0"
htmlContent={watch("description_html")} content=""
onResponse={(response) => { htmlContent={watch("description_html")}
handleAiAssistance(response); onResponse={(response) => {
}} handleAiAssistance(response);
projectId={projectId} }}
/> projectId={projectId}
/>
)}
</div> </div>
)} )}
<div className="flex flex-wrap items-center gap-2"> <div className="flex flex-wrap items-center gap-2">

60
web/components/pages/create-update-block-inline.tsx
View File

@ -19,6 +19,7 @@ import { IUser, IPageBlock } from "types";
// fetch-keys // fetch-keys
import { PAGE_BLOCKS_LIST } from "constants/fetch-keys"; import { PAGE_BLOCKS_LIST } from "constants/fetch-keys";
import useEditorSuggestions from "hooks/use-editor-suggestions"; import useEditorSuggestions from "hooks/use-editor-suggestions";
import { useMobxStore } from "lib/mobx/store-provider";
type Props = { type Props = {
handleClose: () => void; handleClose: () => void;
@ -40,19 +41,24 @@ const pagesService = new PageService();
const issueService = new IssueService(); const issueService = new IssueService();
const fileService = new FileService(); const fileService = new FileService();
export const CreateUpdateBlockInline: FC<Props> = ({ handleClose, data, handleAiAssistance, setIsSyncing, focus }) => { export const CreateUpdateBlockInline: FC<Props> = (props) => {
const { handleClose, data, handleAiAssistance, setIsSyncing, focus } = props;
// states
const [iAmFeelingLucky, setIAmFeelingLucky] = useState(false); const [iAmFeelingLucky, setIAmFeelingLucky] = useState(false);
const [gptAssistantModal, setGptAssistantModal] = useState(false); const [gptAssistantModal, setGptAssistantModal] = useState(false);
// store
const {
appConfig: { envConfig },
} = useMobxStore();
// refs
const editorRef = useRef<any>(null); const editorRef = useRef<any>(null);
// router
const router = useRouter(); const router = useRouter();
const { workspaceSlug, projectId, pageId } = router.query; const { workspaceSlug, projectId, pageId } = router.query;
// hooks
const editorSuggestion = useEditorSuggestions(); const editorSuggestion = useEditorSuggestions();
const { setToastAlert } = useToast(); const { setToastAlert } = useToast();
// form info
const { const {
handleSubmit, handleSubmit,
control, control,
@ -222,9 +228,7 @@ export const CreateUpdateBlockInline: FC<Props> = ({ handleClose, data, handleAi
else handleSubmit(createPageBlock)(); else handleSubmit(createPageBlock)();
} }
}; };
window.addEventListener("keydown", submitForm); window.addEventListener("keydown", submitForm);
return () => { return () => {
window.removeEventListener("keydown", submitForm); window.removeEventListener("keydown", submitForm);
}; };
@ -345,26 +349,28 @@ export const CreateUpdateBlockInline: FC<Props> = ({ handleClose, data, handleAi
</Button> </Button>
</div> </div>
</form> </form>
<GptAssistantModal {envConfig?.has_openai_configured && (
block={data ? data : undefined} <GptAssistantModal
isOpen={gptAssistantModal} block={data ? data : undefined}
handleClose={() => setGptAssistantModal(false)} isOpen={gptAssistantModal}
inset="top-8 left-0" handleClose={() => setGptAssistantModal(false)}
content={watch("description_html")} inset="top-8 left-0"
htmlContent={watch("description_html")} content={watch("description_html")}
onResponse={(response) => { htmlContent={watch("description_html")}
if (data && handleAiAssistance) { onResponse={(response) => {
handleAiAssistance(response); if (data && handleAiAssistance) {
editorRef.current?.setEditorValue(`${watch("description_html")}<p>${response}</p>` ?? ""); handleAiAssistance(response);
} else { editorRef.current?.setEditorValue(`${watch("description_html")}<p>${response}</p>` ?? "");
setValue("description", {}); } else {
setValue("description_html", `${watch("description_html")}<p>${response}</p>`); setValue("description", {});
setValue("description_html", `${watch("description_html")}<p>${response}</p>`);
editorRef.current?.setEditorValue(watch("description_html") ?? ""); editorRef.current?.setEditorValue(watch("description_html") ?? "");
} }
}} }}
projectId={projectId?.toString() ?? ""} projectId={projectId?.toString() ?? ""}
/> />
)}
</div> </div>
); );
}; };

6
web/components/web-hooks/webhooks-list-item.tsx
View File

@ -1,10 +1,10 @@
import { FC, useState } from "react"; import { FC } from "react";
import { ToggleSwitch } from "@plane/ui"; import { ToggleSwitch } from "@plane/ui";
import { Pencil, XCircle } from "lucide-react";
import { IWebhook } from "types";
import Link from "next/link"; import Link from "next/link";
import { RootStore } from "store/root"; import { RootStore } from "store/root";
import { useMobxStore } from "lib/mobx/store-provider"; import { useMobxStore } from "lib/mobx/store-provider";
// types
import { IWebhook } from "types";
interface IWebhookListItem { interface IWebhookListItem {
workspaceSlug: string; workspaceSlug: string;

2
web/types/app.d.ts vendored
View File

@ -11,4 +11,6 @@ export interface IAppConfig {
slack_client_id: string | null; slack_client_id: string | null;
posthog_api_key: string | null; posthog_api_key: string | null;
posthog_host: string | null; posthog_host: string | null;
has_openai_configured: boolean;
has_unsplash_configured: boolean;
} }