chore(core): adjust ai onboarding dismiss logic, persist dialog and dismiss once closed (#7417)

packages/frontend/component/src/ui/modal/modal.tsx

@@ -10,7 +10,7 @@ import * as VisuallyHidden from '@radix-ui/react-visually-hidden';
 import { assignInlineVars } from '@vanilla-extract/dynamic';
 import clsx from 'clsx';
 import type { CSSProperties } from 'react';
-import { forwardRef } from 'react';
+import { forwardRef, useCallback } from 'react';
 
 import type { IconButtonProps } from '../button';
 import { IconButton } from '../button';
@@ -23,12 +23,20 @@ export interface ModalProps extends DialogProps {
   title?: React.ReactNode;
   description?: React.ReactNode;
   withoutCloseButton?: boolean;
+  /**
+   * __Click outside__ or __Press `Esc`__ won't close the modal
+   * @default false
+   */
+  persistent?: boolean;
 
   portalOptions?: DialogPortalProps;
   contentOptions?: DialogContentProps;
   overlayOptions?: DialogOverlayProps;
   closeButtonOptions?: IconButtonProps;
 }
+type PointerDownOutsideEvent = Parameters<
+  Exclude<DialogContentProps['onPointerDownOutside'], undefined>
+>[0];
 
 const getVar = (style: number | string = '', defaultValue = '') => {
   return style
@@ -48,11 +56,14 @@ export const Modal = forwardRef<HTMLDivElement, ModalProps>(
       description,
       withoutCloseButton = false,
       modal,
+      persistent,
 
       portalOptions,
       contentOptions: {
         style: contentStyle,
         className: contentClassName,
+        onPointerDownOutside,
+        onEscapeKeyDown,
         ...otherContentOptions
       } = {},
       overlayOptions: {
@@ -64,7 +75,8 @@ export const Modal = forwardRef<HTMLDivElement, ModalProps>(
       ...props
     },
     ref
-  ) => (
+  ) => {
+    return (
       <Dialog.Root modal={modal} {...props}>
         <Dialog.Portal {...portalOptions}>
           <Dialog.Overlay
@@ -73,6 +85,20 @@ export const Modal = forwardRef<HTMLDivElement, ModalProps>(
           />
           <div data-modal={modal} className={clsx(styles.modalContentWrapper)}>
             <Dialog.Content
+              onPointerDownOutside={useCallback(
+                (e: PointerDownOutsideEvent) => {
+                  onPointerDownOutside?.(e);
+                  persistent && e.preventDefault();
+                },
+                [onPointerDownOutside, persistent]
+              )}
+              onEscapeKeyDown={useCallback(
+                (e: KeyboardEvent) => {
+                  onEscapeKeyDown?.(e);
+                  persistent && e.preventDefault();
+                },
+                [onEscapeKeyDown, persistent]
+              )}
               className={clsx(styles.modalContent, contentClassName)}
               style={{
                 ...assignInlineVars({
@@ -120,7 +146,8 @@ export const Modal = forwardRef<HTMLDivElement, ModalProps>(
           </div>
         </Dialog.Portal>
       </Dialog.Root>
-  )
+    );
+  }
 );
 
 Modal.displayName = 'Modal';

packages/frontend/core/src/components/affine/ai-onboarding/general.dialog.tsx

@@ -184,10 +184,11 @@ export const AIOnboardingGeneral = () => {
 
   return readyToOpen ? (
     <Modal
+      persistent
       open={open}
       onOpenChange={v => {
         showAIOnboardingGeneral$.next(v);
-        if (!v && isLast) toggleGeneralAIOnboarding(false);
+        if (!v) toggleGeneralAIOnboarding(false);
       }}
       contentOptions={{ className: styles.dialog }}
       overlayOptions={{ className: baseStyles.dialogOverlay }}