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

* fix: gpt error handlijng

* fix: enabling ai assistance only when it is configured.

web/components/core/modals/gpt-assistant-modal.tsx

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

web/components/issues/draft-issue-form.tsx

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

web/components/issues/form.tsx

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

web/components/pages/create-update-block-inline.tsx

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

web/components/web-hooks/webhooks-list-item.tsx

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

web/types/app.d.ts

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