dify

dify/web/app/components/base/modal/index.css

@@ -0,0 +1,7 @@
+.modal-dialog {
+  @apply relative z-50;
+}
+
+.modal-panel {
+  @apply w-full max-w-[480px] transform rounded-2xl bg-components-panel-bg p-6 text-left align-middle shadow-xl transition-all;
+}

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

@@ -0,0 +1,133 @@
+import type { Meta, StoryObj } from '@storybook/nextjs'
+import { useEffect, useState } from 'react'
+import Modal from '.'
+
+const meta = {
+  title: 'Base/Feedback/Modal',
+  component: Modal,
+  parameters: {
+    layout: 'fullscreen',
+    docs: {
+      description: {
+        component: 'Lightweight modal wrapper with optional header/description, close icon, and high-priority stacking for dropdown overlays.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    className: {
+      control: 'text',
+      description: 'Extra classes applied to the modal panel.',
+    },
+    wrapperClassName: {
+      control: 'text',
+      description: 'Additional wrapper classes for the dialog.',
+    },
+    isShow: {
+      control: 'boolean',
+      description: 'Controls whether the modal is visible.',
+    },
+    title: {
+      control: 'text',
+      description: 'Heading displayed at the top of the modal.',
+    },
+    description: {
+      control: 'text',
+      description: 'Secondary text beneath the title.',
+    },
+    closable: {
+      control: 'boolean',
+      description: 'Whether the close icon should be shown.',
+    },
+    overflowVisible: {
+      control: 'boolean',
+      description: 'Allows content to overflow the modal panel.',
+    },
+    highPriority: {
+      control: 'boolean',
+      description: 'Lifts the modal above other high z-index elements like dropdowns.',
+    },
+    onClose: {
+      control: false,
+      description: 'Callback invoked when the modal requests to close.',
+    },
+  },
+  args: {
+    isShow: false,
+    title: 'Create new API key',
+    description: 'Generate a scoped key for this workspace. You can revoke it at any time.',
+    closable: true,
+  },
+} satisfies Meta<typeof Modal>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+const ModalDemo = (props: React.ComponentProps<typeof Modal>) => {
+  const [open, setOpen] = useState(props.isShow)
+
+  useEffect(() => {
+    setOpen(props.isShow)
+  }, [props.isShow])
+
+  return (
+    <div className="relative flex h-[480px] items-center justify-center bg-gray-100">
+      <button
+        className="rounded-md bg-primary-600 px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-primary-700"
+        onClick={() => setOpen(true)}
+      >
+        Show modal
+      </button>
+
+      <Modal
+        {...props}
+        isShow={open}
+        onClose={() => {
+          props.onClose?.()
+          setOpen(false)
+        }}
+      >
+        <div className="mt-6 space-y-4 text-sm text-gray-600">
+          <p>
+            Provide a descriptive name for this key so collaborators know its purpose. Restrict usage with scopes to limit access.
+          </p>
+          <div className="rounded-lg border border-dashed border-gray-200 bg-gray-50 p-4 text-xs text-gray-500">
+            Form fields and validation messaging would appear here. This placeholder keeps the story lightweight.
+          </div>
+        </div>
+        <div className="mt-8 flex justify-end gap-3">
+          <button
+            className="rounded-md border border-gray-300 px-3 py-1.5 text-sm text-gray-600 hover:bg-gray-50"
+            onClick={() => setOpen(false)}
+          >
+            Cancel
+          </button>
+          <button className="rounded-md bg-primary-600 px-3 py-1.5 text-sm text-white hover:bg-primary-700">
+            Create key
+          </button>
+        </div>
+      </Modal>
+    </div>
+  )
+}
+
+export const Default: Story = {
+  render: args => <ModalDemo {...args} />,
+}
+
+export const HighPriorityOverflow: Story = {
+  render: args => <ModalDemo {...args} />,
+  args: {
+    highPriority: true,
+    overflowVisible: true,
+    description: 'Demonstrates the modal configured to sit above dropdowns while letting the body content overflow.',
+    className: 'max-w-[540px]',
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Shows the modal with `highPriority` and `overflowVisible` enabled, useful when nested within complex surfaces.',
+      },
+    },
+  },
+}

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

@@ -0,0 +1,94 @@
+import { Dialog, DialogPanel, DialogTitle, Transition, TransitionChild } from '@headlessui/react'
+import { Fragment } from 'react'
+import { RiCloseLine } from '@remixicon/react'
+import classNames from '@/utils/classnames'
+import { noop } from 'lodash-es'
+// https://headlessui.com/react/dialog
+
+type IModal = {
+  className?: string
+  wrapperClassName?: string
+  containerClassName?: string
+  isShow: boolean
+  onClose?: () => void
+  title?: React.ReactNode
+  description?: React.ReactNode
+  children?: React.ReactNode
+  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,
+  description,
+  children,
+  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={clickOutsideNotClose ? noop : onClose}>
+        <TransitionChild>
+          <div className={classNames(
+            '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) => {
+            e.preventDefault()
+            e.stopPropagation()
+          }}
+        >
+          <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',
+                overflowVisible ? 'overflow-visible' : 'overflow-hidden',
+                'duration-100 ease-in data-[closed]:scale-95 data-[closed]:opacity-0',
+                'data-[enter]:scale-100 data-[enter]:opacity-100',
+                'data-[enter]:scale-95 data-[leave]:opacity-0',
+                className,
+              )}>
+                {title && <DialogTitle
+                  as="h3"
+                  className="title-2xl-semi-bold text-text-primary"
+                >
+                  {title}
+                </DialogTitle>}
+                {description && <div className='body-md-regular mt-2 text-text-secondary'>
+                  {description}
+                </div>}
+                {closable
+                  && <div className='absolute right-6 top-6 z-10 flex h-5 w-5 items-center justify-center rounded-2xl hover:cursor-pointer hover:bg-state-base-hover'>
+                    <RiCloseLine className='h-4 w-4 text-text-tertiary' onClick={
+                      (e) => {
+                        e.stopPropagation()
+                        onClose()
+                      }
+                    } />
+                  </div>}
+                {children}
+              </DialogPanel>
+            </TransitionChild>
+          </div>
+        </div>
+      </Dialog>
+    </Transition>
+  )
+}

dify/web/app/components/base/modal/modal.stories.tsx

@@ -0,0 +1,216 @@
+import type { Meta, StoryObj } from '@storybook/nextjs'
+import { useEffect, useState } from 'react'
+import Modal from './modal'
+
+const meta = {
+  title: 'Base/Feedback/RichModal',
+  component: Modal,
+  parameters: {
+    layout: 'fullscreen',
+    docs: {
+      description: {
+        component: 'Full-featured modal with header, subtitle, customizable footer buttons, and optional extra action.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    size: {
+      control: 'radio',
+      options: ['sm', 'md'],
+      description: 'Defines the panel width.',
+    },
+    title: {
+      control: 'text',
+      description: 'Primary heading text.',
+    },
+    subTitle: {
+      control: 'text',
+      description: 'Secondary text below the title.',
+    },
+    confirmButtonText: {
+      control: 'text',
+      description: 'Label for the confirm button.',
+    },
+    cancelButtonText: {
+      control: 'text',
+      description: 'Label for the cancel button.',
+    },
+    showExtraButton: {
+      control: 'boolean',
+      description: 'Whether to render the extra button.',
+    },
+    extraButtonText: {
+      control: 'text',
+      description: 'Label for the extra button.',
+    },
+    extraButtonVariant: {
+      control: 'select',
+      options: ['primary', 'warning', 'secondary', 'secondary-accent', 'ghost', 'ghost-accent', 'tertiary'],
+      description: 'Visual style for the extra button.',
+    },
+    disabled: {
+      control: 'boolean',
+      description: 'Disables footer actions when true.',
+    },
+    footerSlot: {
+      control: false,
+    },
+    bottomSlot: {
+      control: false,
+    },
+    onClose: {
+      control: false,
+      description: 'Handler fired when the close icon or backdrop is clicked.',
+    },
+    onConfirm: {
+      control: false,
+      description: 'Handler fired when confirm is pressed.',
+    },
+    onCancel: {
+      control: false,
+      description: 'Handler fired when cancel is pressed.',
+    },
+    onExtraButtonClick: {
+      control: false,
+      description: 'Handler fired when the extra button is pressed.',
+    },
+    children: {
+      control: false,
+    },
+  },
+  args: {
+    size: 'sm',
+    title: 'Delete integration',
+    subTitle: 'Disabling this integration will revoke access tokens and webhooks.',
+    confirmButtonText: 'Delete integration',
+    cancelButtonText: 'Cancel',
+    showExtraButton: false,
+    extraButtonText: 'Disable temporarily',
+    extraButtonVariant: 'warning',
+    disabled: false,
+    onClose: () => console.log('Modal closed'),
+    onConfirm: () => console.log('Confirm pressed'),
+    onCancel: () => console.log('Cancel pressed'),
+    onExtraButtonClick: () => console.log('Extra button pressed'),
+  },
+} satisfies Meta<typeof Modal>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+type ModalProps = React.ComponentProps<typeof Modal>
+
+const ModalDemo = (props: ModalProps) => {
+  const [open, setOpen] = useState(false)
+
+  useEffect(() => {
+    if (props.disabled && open)
+      setOpen(false)
+  }, [props.disabled, open])
+
+  const {
+    onClose,
+    onConfirm,
+    onCancel,
+    onExtraButtonClick,
+    children,
+    ...rest
+  } = props
+
+  const handleClose = () => {
+    onClose?.()
+    setOpen(false)
+  }
+
+  const handleConfirm = () => {
+    onConfirm?.()
+    setOpen(false)
+  }
+
+  const handleCancel = () => {
+    onCancel?.()
+    setOpen(false)
+  }
+
+  const handleExtra = () => {
+    onExtraButtonClick?.()
+  }
+
+  return (
+    <div className="relative flex h-[480px] items-center justify-center bg-gray-100">
+      <button
+        className="rounded-md bg-primary-600 px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-primary-700"
+        onClick={() => setOpen(true)}
+      >
+        Show rich modal
+      </button>
+
+      {open && (
+        <Modal
+          {...rest}
+          onClose={handleClose}
+          onConfirm={handleConfirm}
+          onCancel={handleCancel}
+          onExtraButtonClick={handleExtra}
+          children={children ?? (
+            <div className="space-y-4 text-sm text-gray-600">
+              <p>
+                Removing integrations immediately stops workflow automations related to this connection.
+                Make sure no scheduled jobs depend on this integration before proceeding.
+              </p>
+              <ul className="list-disc space-y-1 pl-4 text-xs text-gray-500">
+                <li>All API credentials issued by this integration will be revoked.</li>
+                <li>Historical logs remain accessible for auditing.</li>
+                <li>You can re-enable the integration later with fresh credentials.</li>
+              </ul>
+            </div>
+          )}
+        />
+      )}
+    </div>
+  )
+}
+
+export const Default: Story = {
+  render: args => <ModalDemo {...args} />,
+}
+
+export const WithExtraAction: Story = {
+  render: args => <ModalDemo {...args} />,
+  args: {
+    showExtraButton: true,
+    extraButtonVariant: 'secondary',
+    extraButtonText: 'Disable only',
+    footerSlot: (
+      <span className="text-xs text-gray-400">Last synced 5 minutes ago</span>
+    ),
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Illustrates the optional extra button and footer slot for advanced workflows.',
+      },
+    },
+  },
+}
+
+export const MediumSized: Story = {
+  render: args => <ModalDemo {...args} />,
+  args: {
+    size: 'md',
+    subTitle: 'Use the larger width to surface forms with more fields or supporting descriptions.',
+    bottomSlot: (
+      <div className="border-t border-divider-subtle bg-components-panel-bg px-6 py-4 text-xs text-gray-500">
+        Need finer control? Configure automation rules in the integration settings page.
+      </div>
+    ),
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Shows the medium sized panel and a populated `bottomSlot` for supplemental messaging.',
+      },
+    },
+  },
+}

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

@@ -0,0 +1,139 @@
+import type { ButtonProps } from '@/app/components/base/button'
+import Button from '@/app/components/base/button'
+import {
+  PortalToFollowElem,
+  PortalToFollowElemContent,
+} from '@/app/components/base/portal-to-follow-elem'
+import cn from '@/utils/classnames'
+import { RiCloseLine } from '@remixicon/react'
+import { noop } from 'lodash-es'
+import { memo } from 'react'
+import { useTranslation } from 'react-i18next'
+
+type ModalProps = {
+  onClose?: () => void
+  size?: 'sm' | 'md'
+  title: string
+  subTitle?: string
+  children?: React.ReactNode
+  confirmButtonText?: string
+  onConfirm?: () => void
+  cancelButtonText?: string
+  onCancel?: () => void
+  showExtraButton?: boolean
+  extraButtonText?: string
+  extraButtonVariant?: ButtonProps['variant']
+  onExtraButtonClick?: () => void
+  footerSlot?: React.ReactNode
+  bottomSlot?: React.ReactNode
+  disabled?: boolean
+  containerClassName?: string
+  wrapperClassName?: string
+  clickOutsideNotClose?: boolean
+}
+const Modal = ({
+  onClose,
+  size = 'sm',
+  title,
+  subTitle,
+  children,
+  confirmButtonText,
+  onConfirm,
+  cancelButtonText,
+  onCancel,
+  showExtraButton,
+  extraButtonVariant = 'warning',
+  extraButtonText,
+  onExtraButtonClick,
+  footerSlot,
+  bottomSlot,
+  disabled,
+  containerClassName,
+  wrapperClassName,
+  clickOutsideNotClose = false,
+}: ModalProps) => {
+  const { t } = useTranslation()
+
+  return (
+    <PortalToFollowElem open>
+      <PortalToFollowElemContent
+        className={cn('z-[9998] flex h-full w-full items-center justify-center bg-background-overlay', wrapperClassName)}
+        onClick={clickOutsideNotClose ? noop : onClose}
+      >
+        <div
+          className={cn(
+            'flex max-h-[80%] flex-col rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg shadow-xs',
+            size === 'sm' && 'w-[480px]',
+            size === 'md' && 'w-[640px]',
+            containerClassName,
+          )}
+          onClick={e => e.stopPropagation()}
+        >
+          <div className='title-2xl-semi-bold relative shrink-0 p-6 pb-3 pr-14 text-text-primary'>
+            {title}
+            {
+              subTitle && (
+                <div className='system-xs-regular mt-1 text-text-tertiary'>
+                  {subTitle}
+                </div>
+              )
+            }
+            <div
+              className='absolute right-5 top-5 flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg'
+              onClick={onClose}
+            >
+              <RiCloseLine className='h-5 w-5 text-text-tertiary' />
+            </div>
+          </div>
+          {
+            children && (
+              <div className='min-h-0 flex-1 overflow-y-auto px-6 py-3'>{children}</div>
+            )
+          }
+          <div className='flex shrink-0 justify-between p-6 pt-5'>
+            <div>
+              {footerSlot}
+            </div>
+            <div className='flex items-center'>
+              {
+                showExtraButton && (
+                  <>
+                    <Button
+                      variant={extraButtonVariant}
+                      onClick={onExtraButtonClick}
+                      disabled={disabled}
+                    >
+                      {extraButtonText || t('common.operation.remove')}
+                    </Button>
+                    <div className='mx-3 h-4 w-[1px] bg-divider-regular'></div>
+                  </>
+                )
+              }
+              <Button
+                onClick={onCancel}
+                disabled={disabled}
+              >
+                {cancelButtonText || t('common.operation.cancel')}
+              </Button>
+              <Button
+                className='ml-2'
+                variant='primary'
+                onClick={onConfirm}
+                disabled={disabled}
+              >
+                {confirmButtonText || t('common.operation.save')}
+              </Button>
+            </div>
+          </div>
+          {bottomSlot && (
+            <div className='shrink-0'>
+              {bottomSlot}
+            </div>
+          )}
+        </div>
+      </PortalToFollowElemContent>
+    </PortalToFollowElem>
+  )
+}
+
+export default memo(Modal)