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

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

@@ -1,3 +1,4 @@
+import { UseDismissProps } from '@floating-ui/react';
 import { IconPlus, IconX } from '@tabler/icons-react';
 import {
   ClipboardEvent,
@@ -68,6 +69,11 @@ import isEqual from 'lodash-es/isEqual';
 import startCase from 'lodash-es/startCase';
 import toLower from 'lodash-es/toLower';
 
+const modalDismissProps = {
+  outsidePress: false,
+  escapeKey: false,
+} as UseDismissProps;
+
 interface Props<
   T extends Conversation | ShareEntity | PublishRequestDialAIEntityModel,
 > {
@@ -451,6 +457,7 @@ export function PublishModal<
       state={isOpen ? ModalState.OPENED : ModalState.CLOSED}
       onClose={onClose}
       initialFocus={nameInputRef}
+      dismissProps={modalDismissProps}
     >
       <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

@@ -1,3 +1,5 @@
+import { UseDismissProps } from '@floating-ui/react';
+
 import { ModalState } from '@/src/types/modal';
 
 import { ApplicationSelectors } from '@/src/store/application/application.reducers';
@@ -8,6 +10,11 @@ import Modal from '../../Common/Modal';
 import { Spinner } from '../../Common/Spinner';
 import { ReviewApplicationDialogView } from './ReviewApplicationDialogView';
 
+const modalDismissProps = {
+  outsidePress: true,
+  escapeKey: true,
+} as UseDismissProps;
+
 export function ReviewApplicationDialog() {
   const isLoading = useAppSelector(
     ApplicationSelectors.selectIsApplicationLoading,
@@ -25,8 +32,8 @@ export function ReviewApplicationDialog() {
       onClose={handleClose}
       overlayClassName="fixed inset-0 top-[48px]"
       state={ModalState.OPENED}
+      dismissProps={modalDismissProps}
       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

@@ -14,7 +14,11 @@ import { QuickAppView } from '@/src/components/Common/ApplicationWizard/QuickApp
 import Modal from '@/src/components/Common/Modal';
 import { Spinner } from '@/src/components/Common/Spinner';
 
-const modalDismissProps = { outsidePressEvent: 'mousedown' } as UseDismissProps;
+const modalDismissProps = {
+  outsidePress: false,
+  escapeKey: false,
+} as UseDismissProps;
+
 interface ApplicationWizardProps {
   isOpen: boolean;
   onClose: (value: boolean) => void;

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

@@ -1,3 +1,4 @@
+import { UseDismissProps } from '@floating-ui/react';
 import { useCallback, useMemo } from 'react';
 
 import { useSearchParams } from 'next/navigation';
@@ -18,6 +19,8 @@ import { ApplicationDetailsHeader } from './ApplicationHeader';
 
 import { PublishActions } from '@epam/ai-dial-shared';
 
+const modalDismissProps = { outsidePress: true } as UseDismissProps;
+
 interface Props {
   isMobileView: boolean;
   entity: DialAIEntityModel;
@@ -80,6 +83,7 @@ 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={modalDismissProps}
     >
       <ApplicationDetailsHeader isMobileView={isMobileView} entity={entity} />
       <ApplicationDetailsContent entity={entity} />

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

@@ -1,3 +1,4 @@
+import { UseDismissProps } from '@floating-ui/react';
 import { IconDownload, IconRefresh } from '@tabler/icons-react';
 import React from 'react';
 
@@ -115,6 +116,8 @@ const LogsFooter = ({ entityId }: { entityId: string }) => {
   );
 };
 
+const modalDismissProps = { outsidePress: true } as UseDismissProps;
+
 interface ApplicationLogsProps {
   entityId: string;
   isOpen: boolean;
@@ -134,6 +137,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={modalDismissProps}
     >
       <LogsHeader />
       <LogsView />

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

@@ -1,3 +1,4 @@
+import { UseDismissProps } from '@floating-ui/react';
 import { IconFileArrowRight, IconTrashX } from '@tabler/icons-react';
 import { MouseEventHandler, useCallback } from 'react';
 
@@ -32,6 +33,11 @@ import Modal from '../../Common/Modal';
 
 import { PublishActions } from '@epam/ai-dial-shared';
 
+const modalDismissProps = {
+  outsidePress: true,
+  escapeKey: true,
+} as UseDismissProps;
+
 interface Props {
   isOpen: boolean;
   onDuplicate?: MouseEventHandler<HTMLButtonElement>;
@@ -106,6 +112,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={modalDismissProps}
       headingClassName={classNames(
         'px-3 md:p-6',
         prompt.publicationInfo?.action === PublishActions.DELETE &&