feat: introduce trigger functionality (#27644)

Signed-off-by: lyzno1 <yuanyouhuilyz@gmail.com>
Co-authored-by: Stream <Stream_2@qq.com>
Co-authored-by: lyzno1 <92089059+lyzno1@users.noreply.github.com>
Co-authored-by: zhsama <torvalds@linux.do>
Co-authored-by: Harry <xh001x@hotmail.com>
Co-authored-by: lyzno1 <yuanyouhuilyz@gmail.com>
Co-authored-by: yessenia <yessenia.contact@gmail.com>
Co-authored-by: hjlarry <hjlarry@163.com>
Co-authored-by: gemini-code-assist[bot] <176961590+gemini-code-assist[bot]@users.noreply.github.com>
Co-authored-by: Copilot Autofix powered by AI <62310815+github-advanced-security[bot]@users.noreply.github.com>
Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
Co-authored-by: WTW0313 <twwu@dify.ai>
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

web/app/components/base/modal/index.tsx

@@ -8,6 +8,7 @@ import { noop } from 'lodash-es'
 type IModal = {
   className?: string
   wrapperClassName?: string
+  containerClassName?: string
   isShow: boolean
   onClose?: () => void
   title?: React.ReactNode
@@ -16,11 +17,14 @@ type IModal = {
   closable?: boolean
   overflowVisible?: boolean
   highPriority?: boolean // For modals that need to appear above dropdowns
+  overlayOpacity?: boolean // For semi-transparent overlay instead of default
+  clickOutsideNotClose?: boolean // Prevent closing when clicking outside modal
 }
 
 export default function Modal({
   className,
   wrapperClassName,
+  containerClassName,
   isShow,
   onClose = noop,
   title,
@@ -29,19 +33,21 @@ export default function Modal({
   closable = false,
   overflowVisible = false,
   highPriority = false,
+  overlayOpacity = false,
+  clickOutsideNotClose = false,
 }: IModal) {
   return (
     <Transition appear show={isShow} as={Fragment}>
-      <Dialog as="div" className={classNames('relative', highPriority ? 'z-[1100]' : 'z-[60]', wrapperClassName)} onClose={onClose}>
+      <Dialog as="div" className={classNames('relative', highPriority ? 'z-[1100]' : 'z-[60]', wrapperClassName)} onClose={clickOutsideNotClose ? noop : onClose}>
         <TransitionChild>
           <div className={classNames(
-            'fixed inset-0 bg-background-overlay',
+            'fixed inset-0',
+            overlayOpacity ? 'bg-workflow-canvas-canvas-overlay' : 'bg-background-overlay',
             'duration-300 ease-in data-[closed]:opacity-0',
             'data-[enter]:opacity-100',
             'data-[leave]:opacity-0',
           )} />
         </TransitionChild>
-
         <div
           className="fixed inset-0 overflow-y-auto"
           onClick={(e) => {
@@ -49,7 +55,7 @@ export default function Modal({
             e.stopPropagation()
           }}
         >
-          <div className="flex min-h-full items-center justify-center p-4 text-center">
+          <div className={classNames('flex min-h-full items-center justify-center p-4 text-center', containerClassName)}>
             <TransitionChild>
               <DialogPanel className={classNames(
                 'relative w-full max-w-[480px] rounded-2xl bg-components-panel-bg p-6 text-left align-middle shadow-xl transition-all',