dify

dify/web/app/components/billing/trigger-events-limit-modal/index.module.css

@@ -0,0 +1,30 @@
+.surface {
+  border: 0.5px solid var(--color-components-panel-border, rgba(16, 24, 40, 0.08));
+  background:
+    linear-gradient(109deg, var(--color-background-section, #f9fafb) 0%, var(--color-background-section-burn, #f2f4f7) 100%),
+    var(--color-components-panel-bg, #fff);
+}
+
+.heroOverlay {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='54' height='54' fill='none'%3E%3Crect x='1' y='1' width='48' height='48' rx='12' stroke='rgba(16, 24, 40, 0.3)' stroke-width='1' opacity='0.08'/%3E%3C/svg%3E");
+  background-size: 54px 54px;
+  background-position: 31px -23px;
+  background-repeat: repeat;
+  mask-image: linear-gradient(180deg, rgba(255, 255, 255, 1) 45%, rgba(255, 255, 255, 0) 75%);
+  -webkit-mask-image: linear-gradient(180deg, rgba(255, 255, 255, 1) 45%, rgba(255, 255, 255, 0) 75%);
+}
+
+.icon {
+  border: 0.5px solid transparent;
+  background:
+    linear-gradient(180deg, var(--color-components-avatar-bg-mask-stop-0, rgba(255, 255, 255, 0.12)) 0%, var(--color-components-avatar-bg-mask-stop-100, rgba(255, 255, 255, 0.08)) 100%),
+    var(--color-util-colors-blue-brand-blue-brand-500, #296dff);
+  box-shadow: 0 10px 20px color-mix(in srgb, var(--color-util-colors-blue-brand-blue-brand-500, #296dff) 35%, transparent);
+}
+
+.highlight {
+  background: linear-gradient(97deg, var(--color-components-input-border-active-prompt-1, rgba(11, 165, 236, 0.95)) -4%, var(--color-components-input-border-active-prompt-2, rgba(21, 90, 239, 0.95)) 45%);
+  -webkit-background-clip: text;
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+}

dify/web/app/components/billing/trigger-events-limit-modal/index.tsx

@@ -0,0 +1,90 @@
+'use client'
+import type { FC } from 'react'
+import React from 'react'
+import { useTranslation } from 'react-i18next'
+import Modal from '@/app/components/base/modal'
+import Button from '@/app/components/base/button'
+import { TriggerAll } from '@/app/components/base/icons/src/vender/workflow'
+import UsageInfo from '@/app/components/billing/usage-info'
+import UpgradeBtn from '@/app/components/billing/upgrade-btn'
+import type { Plan } from '@/app/components/billing/type'
+import styles from './index.module.css'
+
+type Props = {
+  show: boolean
+  onDismiss: () => void
+  onUpgrade: () => void
+  usage: number
+  total: number
+  resetInDays?: number
+  planType: Plan
+}
+
+const TriggerEventsLimitModal: FC<Props> = ({
+  show,
+  onDismiss,
+  onUpgrade,
+  usage,
+  total,
+  resetInDays,
+}) => {
+  const { t } = useTranslation()
+
+  return (
+    <Modal
+      isShow={show}
+      onClose={onDismiss}
+      closable={false}
+      clickOutsideNotClose
+      className={`${styles.surface} flex h-[360px] w-[580px] flex-col overflow-hidden rounded-2xl !p-0 shadow-xl`}
+    >
+      <div className='relative flex w-full flex-1 items-stretch justify-center'>
+        <div
+          aria-hidden
+          className={`${styles.heroOverlay} pointer-events-none absolute inset-0`}
+        />
+        <div className='relative z-10 flex w-full flex-col items-start gap-4 px-8 pt-8'>
+          <div className={`${styles.icon} flex h-12 w-12 items-center justify-center rounded-[12px]`}>
+            <TriggerAll className='h-5 w-5 text-text-primary-on-surface' />
+          </div>
+          <div className='flex flex-col items-start gap-2'>
+            <div className={`${styles.highlight} title-lg-semi-bold`}>
+              {t('billing.triggerLimitModal.title')}
+            </div>
+            <div className='body-md-regular text-text-secondary'>
+              {t('billing.triggerLimitModal.description')}
+            </div>
+          </div>
+          <UsageInfo
+            className='mb-5 w-full rounded-[12px] bg-components-panel-on-panel-item-bg'
+            Icon={TriggerAll}
+            name={t('billing.triggerLimitModal.usageTitle')}
+            usage={usage}
+            total={total}
+            resetInDays={resetInDays}
+            hideIcon
+          />
+        </div>
+      </div>
+
+      <div className='flex h-[76px] w-full items-center justify-end gap-2 px-8 pb-8 pt-5'>
+        <Button
+          className='h-8 w-[77px] min-w-[72px] !rounded-lg !border-[0.5px] px-3 py-2'
+          onClick={onDismiss}
+        >
+          {t('billing.triggerLimitModal.dismiss')}
+        </Button>
+        <UpgradeBtn
+          isShort
+          onClick={onUpgrade}
+          className='flex w-[93px] items-center justify-center !rounded-lg !px-2'
+          style={{ height: 32 }}
+          labelKey='billing.triggerLimitModal.upgrade'
+          loc='trigger-events-limit-modal'
+        />
+      </div>
+    </Modal>
+  )
+}
+
+export default React.memo(TriggerEventsLimitModal)