fix(chat): fix modals outside click (Issue #2578)

apps/chat/src/components/Chat/Publish/PublishWizard.tsx

@@ -49,6 +49,7 @@ import {
 } from '@/src/store/publication/publication.reducers';
 import { UIActions } from '@/src/store/ui/ui.reducers';
 
+import { DISALLOW_CLICK_OUTSIDE } from '@/src/constants/dialogs';
 import { PUBLISHING_FOLDER_NAME } from '@/src/constants/folders';
 import { PUBLIC_URL_PREFIX } from '@/src/constants/public';
 
@@ -451,6 +452,7 @@ export function PublishModal<
       state={isOpen ? ModalState.OPENED : ModalState.CLOSED}
       onClose={onClose}
       initialFocus={nameInputRef}
+      dismissProps={DISALLOW_CLICK_OUTSIDE}
     >
       <div className="flex w-full flex-col divide-y divide-tertiary overflow-y-auto">
         <div className="px-3 py-4 md:pl-4 md:pr-10">

apps/chat/src/components/Chat/Publish/ReviewApplicationDialog.tsx

@@ -4,6 +4,8 @@ import { ApplicationSelectors } from '@/src/store/application/application.reduce
 import { useAppDispatch, useAppSelector } from '@/src/store/hooks';
 import { PublicationActions } from '@/src/store/publication/publication.reducers';
 
+import { ALLOW_CLICK_OUTSIDE } from '@/src/constants/dialogs';
+
 import Modal from '../../Common/Modal';
 import { Spinner } from '../../Common/Spinner';
 import { ReviewApplicationDialogView } from './ReviewApplicationDialogView';
@@ -25,8 +27,8 @@ export function ReviewApplicationDialog() {
       onClose={handleClose}
       overlayClassName="fixed inset-0 top-[48px]"
       state={ModalState.OPENED}
+      dismissProps={ALLOW_CLICK_OUTSIDE}
       containerClassName="flex flex-col gap-4 sm:w-[600px] w-full"
-      dismissProps={{ outsidePressEvent: 'mousedown' }}
     >
       {isLoading ? (
         <div className="flex h-[250px] flex-col justify-center">

apps/chat/src/components/Common/ApplicationWizard/ApplicationWizard.tsx

@@ -1,4 +1,3 @@
-import { UseDismissProps } from '@floating-ui/react';
 import React, { useCallback, useMemo } from 'react';
 
 import { ApplicationType } from '@/src/types/applications';
@@ -7,14 +6,15 @@ import { ModalState } from '@/src/types/modal';
 import { ApplicationSelectors } from '@/src/store/application/application.reducers';
 import { useAppSelector } from '@/src/store/hooks';
 
+import { DISALLOW_CLICK_OUTSIDE } from '@/src/constants/dialogs';
+
 import { ApplicationWizardHeader } from '@/src/components/Common/ApplicationWizard/ApplicationWizardHeader';
 import { CodeAppView } from '@/src/components/Common/ApplicationWizard/CodeAppView/CodeAppView';
 import { CustomAppView } from '@/src/components/Common/ApplicationWizard/CustomAppView';
 import { QuickAppView } from '@/src/components/Common/ApplicationWizard/QuickAppView';
 import Modal from '@/src/components/Common/Modal';
 import { Spinner } from '@/src/components/Common/Spinner';
 
-const modalDismissProps = { outsidePressEvent: 'mousedown' } as UseDismissProps;
 interface ApplicationWizardProps {
   isOpen: boolean;
   onClose: (value: boolean) => void;
@@ -60,7 +60,7 @@ export const ApplicationWizard: React.FC<ApplicationWizardProps> = ({
       onClose={handleClose}
       dataQa="application-dialog"
       containerClassName="flex w-full flex-col pt-2 md:grow-0 xl:max-w-[720px] 2xl:max-w-[780px] !bg-layer-2"
-      dismissProps={modalDismissProps}
+      dismissProps={DISALLOW_CLICK_OUTSIDE}
       hideClose
     >
       {isLoading ? (

apps/chat/src/components/Common/ApplicationWizard/CodeAppView/CodeEditor.tsx

@@ -328,6 +328,20 @@ export const CodeEditor = ({ sourcesFolderId, setValue }: Props) => {
     }
   }, [rootFileNames, setValue, sourcesFolderId]);
 
+  useEffect(() => {
+    const handleKeyUp = (event: KeyboardEvent) => {
+      if (event.key === 'Escape' && isFullScreen) {
+        setIsFullScreen(false);
+      }
+    };
+
+    window.addEventListener('keyup', handleKeyUp);
+
+    return () => {
+      window.removeEventListener('keyup', handleKeyUp);
+    };
+  }, [isFullScreen]);
+
   const handleUploadFile = useCallback(
     (relativePath: string) => {
       setUploadFolderId(relativePath);

apps/chat/src/components/Marketplace/ApplicationDetails/ApplicationDetails.tsx

@@ -9,6 +9,7 @@ import { ConversationsActions } from '@/src/store/conversations/conversations.re
 import { useAppDispatch, useAppSelector } from '@/src/store/hooks';
 import { ModelsSelectors } from '@/src/store/models/models.reducers';
 
+import { ALLOW_CLICK_OUTSIDE } from '@/src/constants/dialogs';
 import { MarketplaceQueryParams } from '@/src/constants/marketplace';
 
 import Modal from '../../Common/Modal';
@@ -80,6 +81,7 @@ export const ApplicationDetails = ({
       overlayClassName="!z-40"
       containerClassName="flex w-full flex-col divide-y divide-tertiary divide-tertiary xl:max-w-[720px] max-w-[700px]"
       onClose={onClose}
+      dismissProps={ALLOW_CLICK_OUTSIDE}
     >
       <ApplicationDetailsHeader isMobileView={isMobileView} entity={entity} />
       <ApplicationDetailsContent entity={entity} />

apps/chat/src/components/Marketplace/ApplicationLogs.tsx

@@ -15,6 +15,8 @@ import {
 } from '@/src/store/application/application.reducers';
 import { useAppDispatch, useAppSelector } from '@/src/store/hooks';
 
+import { ALLOW_CLICK_OUTSIDE } from '@/src/constants/dialogs';
+
 import Modal from '../Common/Modal';
 import { Spinner } from '../Common/Spinner';
 import Tooltip from '../Common/Tooltip';
@@ -134,6 +136,7 @@ export const ApplicationLogs = ({
       overlayClassName="!z-40"
       containerClassName="flex w-full flex-col min-h-[350px] xl:max-w-[820px] max-w-[800px]"
       onClose={onClose}
+      dismissProps={ALLOW_CLICK_OUTSIDE}
     >
       <LogsHeader />
       <LogsView />

apps/chat/src/components/Promptbar/components/PreviewPromptModal.tsx

@@ -22,6 +22,8 @@ import {
 } from '@/src/store/prompts/prompts.reducers';
 import { PublicationActions } from '@/src/store/publication/publication.reducers';
 
+import { ALLOW_CLICK_OUTSIDE } from '@/src/constants/dialogs';
+
 import { NotFoundEntity } from '@/src/components/Common/NotFoundEntity';
 import Tooltip from '@/src/components/Common/Tooltip';
 
@@ -106,6 +108,7 @@ export const PreviewPromptModal = ({
       portalId="theme-main"
       containerClassName="inline-block w-full overflow-y-auto py-4 md:p-0 align-bottom transition-all xl:max-h-[800px] xl:max-w-[720px] 2xl:max-w-[1000px]"
       dataQa="preview-prompt-modal"
+      dismissProps={ALLOW_CLICK_OUTSIDE}
       headingClassName={classNames(
         'px-3 md:p-6',
         prompt.publicationInfo?.action === PublishActions.DELETE &&

apps/chat/src/constants/dialogs.ts

@@ -0,0 +1,11 @@
+import { UseDismissProps } from '@floating-ui/react';
+
+export const ALLOW_CLICK_OUTSIDE = {
+  outsidePress: true,
+  escapeKey: true,
+} as UseDismissProps;
+
+export const DISALLOW_CLICK_OUTSIDE = {
+  outsidePress: false,
+  escapeKey: false,
+} as UseDismissProps;