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/drawer/index.tsx

@@ -10,6 +10,7 @@ export type IDrawerProps = {
   description?: string
   dialogClassName?: string
   dialogBackdropClassName?: string
+  containerClassName?: string
   panelClassName?: string
   children: React.ReactNode
   footer?: React.ReactNode
@@ -22,6 +23,7 @@ export type IDrawerProps = {
   onCancel?: () => void
   onOk?: () => void
   unmount?: boolean
+  noOverlay?: boolean
 }
 
 export default function Drawer({
@@ -29,6 +31,7 @@ export default function Drawer({
   description = '',
   dialogClassName = '',
   dialogBackdropClassName = '',
+  containerClassName = '',
   panelClassName = '',
   children,
   footer,
@@ -41,6 +44,7 @@ export default function Drawer({
   onCancel,
   onOk,
   unmount = false,
+  noOverlay = false,
 }: IDrawerProps) {
   const { t } = useTranslation()
   return (
@@ -53,15 +57,15 @@ export default function Drawer({
       }}
       className={cn('fixed inset-0 z-[30] overflow-y-auto', dialogClassName)}
     >
-      <div className={cn('flex h-screen w-screen justify-end', positionCenter && '!justify-center')}>
+      <div className={cn('flex h-screen w-screen justify-end', positionCenter && '!justify-center', containerClassName)}>
         {/* mask */}
-        <DialogBackdrop
+        {!noOverlay && <DialogBackdrop
           className={cn('fixed inset-0 z-[40]', mask && 'bg-black/30', dialogBackdropClassName)}
           onClick={() => {
             if (!clickOutsideNotOpen)
               onClose()
           }}
-        />
+        />}
         <div className={cn('relative z-[50] flex w-full max-w-sm flex-col justify-between overflow-hidden bg-components-panel-bg p-6 text-left align-middle shadow-xl', panelClassName)}>
           <>
             <div className='flex justify-between'>