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,6 +442,7 @@ export const DraftIssueForm: FC<IssueFormProps> = (props) => {
                       />
                     )}
                   />
+                  {envConfig?.has_openai_configured && (
                     <GptAssistantModal
                       isOpen={gptAssistantModal}
                       handleClose={() => {
@@ -455,6 +458,7 @@ export const DraftIssueForm: FC<IssueFormProps> = (props) => {
                       }}
                       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,6 +397,7 @@ export const IssueForm: FC<IssueFormProps> = observer((props) => {
                       />
                     )}
                   />
+                  {envConfig?.has_openai_configured && (
                     <GptAssistantModal
                       isOpen={gptAssistantModal}
                       handleClose={() => {
@@ -411,6 +413,7 @@ export const IssueForm: FC<IssueFormProps> = observer((props) => {
                       }}
                       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,6 +349,7 @@ export const CreateUpdateBlockInline: FC<Props> = ({ handleClose, data, handleAi
           </Button>
         </div>
       </form>
+      {envConfig?.has_openai_configured && (
         <GptAssistantModal
           block={data ? data : undefined}
           isOpen={gptAssistantModal}
@@ -365,6 +370,7 @@ export const CreateUpdateBlockInline: FC<Props> = ({ handleClose, data, handleAi
           }}
           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;
 }